Загрузка процессора: 143%
 |
ПЛАРСОН | |
Портфолио | |
Конструктор | |
Цена | |
Top 100 | |
Контакты | |
| Дизайн |
| Для кого |
| Статьи |
| Новости |
| Ссылки на сайты |
| 2011-05-17 Теперь ПЛАРСОН поддерживает многоязычность! |
| 2011-04-19 Обновление модулей, переход на многоязычность |
| 2011-04-03 Заморозка УРЛОВ. Обновление админки |
| 2010-12-22 Массовая загрузка фотографий |
| 2010-12-15 Исправлена ошибка в кодировке иностранных символов |
|
||||||
4. Разработка структуры и стиля сайта
Конструктор обеспечивает выполнение всех основных этапов разработки сайта, от компоновки страницы и оформления до формирования общей структуры. В данном разделе будет показано, как это сделать. Разумеется, при разработке реального проекта вы предварительно должны составить на бумаге или в голове карту сайта.
4.1. Оформление и структура
Этот раздел полностью отвечает за внешний вид вашего сайта и его навигационной структуры. Это то, что задёт конечный вид сайта. Однажды завершив создание сайта, вы можете больше никогда не возвращаться к этому пункту меню, - он предназначен для Web-разработчика. Если вы хотите изменить дизайн, добавить новые страницы в любой момент можете здесь внести нужные изменения.
Раздел «Оформление и структура» делится на подпункты «Сайт, основные свойства» и «Страницы сайта» (см. рис. 7) .
Раздел «Сайт, основные свойства» отвечает за весь сайт целиком, и начинать надо с него. Функции этого раздела востребованы относительно редко, потому собраны вместе отдельно от других. Здесь мы найдём «Глобальные свойства», «Выбор раскладки страницы», «Выбор макета сайта».
4.2. Глобальные свойства
Начать работу над сайтом целесообразно с установки основных параметров (общий заголовок сайта, цвет фона, цвет и стиль шрифта, цвет ссылок) общих для всех страниц. Это информация хранится в заголовке страницы ограниченная тегами <HEAD></HEAD>. Здесь заключена различная служебная информация: мета-теги (ключевые слова и описание), кодировка страницы, описание стиля для общих элементов. Содержимое заголовка может незначительно меняться от страницы к странице, но есть общая часть, которая и настраивается в «Глобальных свойствах».
Глобальные свойства представлены в виде модуля с двумя разделами редактирования Дизайн и HTML. Введите здесь название вашего сайта, которое будет отображаться в полосе заголовка окна броузера (тег <Title>), ключевые слова и описание для поисковых машин. Выберите основной шрифт для текста и ссылок. Если вы хотите задать цвет фона страницы отличный от белого, поменяйте значение background-color.
Все страницы сайта состоят из Head-модуля и, как правило, модуля прототипа.
4.3. Выбор раскладки страницы
Оформление страницы начинается с планирования ее компоновки, - где будет находиться логотип, элементы навигации, текст. Разметку страницы рекомендуется продумать заранее, возможно нарисовать на бумаге. Определившись с расположением основных элементов, приступайте к «Выбору раскладки страницы». Этот раздел задает шаблон для прототипа будущих страниц.
Если у нас ещё нет прототипа страниц, нам сюда! Для прототипа предлагается выбрать раскладку страниц с одной, двумя и тремя колонками. Размеры ячеек и другие свойства можно позже настроить в самом модуле прототипа.
Если возникает необходимость заменить схему разметки на другую, то можно поменять существующий прототип страниц. Но в этом случае мы с нуля будем создавать новый прототип и полностью уничтожим старый, со всеми внутренними модулями. Будьте осторожны!
Рис. 8. Выбор раскладки страницы. Вариант с тремя колонками.
4.4. Выбор макета сайта
Раздел «Выбор макета сайта» несколько выбивается из общей канвы процесса создания сайта. Макет сайта это фактически готовый сайт. Выбирая макет, вы полностью уничтожаете свой сайт и создаете новый по подобию этого макета. Макет это связанный набор шаблонов для целых страниц (о создании модулей из шаблонов позже). Для тех, кто не хочет утомлять себя разработкой уникального дизайна с нуля, подойдет готовое решение из набора.
Макет состоит из HEAD-модуля, модуля прототипа страниц и, как правило, включает готовые страницы. Используя макет, вы сразу получаете сайт с дизайном, который впрочем, как всегда можно редактировать через настройку составляющих его модулей.
Число готовых макетов ограничено, этот раздел чаще используется для восстановления сайта из собственных сохранённых макетов. Как сохранить свой сайт в макет, будет рассказано в этом руководстве.
Итак, последовательность действий при создании сайта с нуля такова:
- настраиваем HEAD-модуль в глобальных свойствах,
- создаем модуль прототипа, выбирая раскладку страниц.
Глобальные свойства заданы, сюда мы вернемся, если захотим начать всё с «чистого листа» или подправить HEAD-модуль.
4.5. Настройка прототипа
Как упоминалось выше, каркасом сайта служит прототип страниц, все страницы сайта наследуют его черты (рождаются по его образу и подобию). Соблюдение единого стиля на всех страницах одно из условий комфортности пребывания посетителя на вашем сайте. Пункт «Настройка прототипа страниц» находится в разделе «Страницы сайта». Настройка прототипа есть ни что иное, как редактирование модуля прототипа страниц. Как было сказано выше, большая часть работы сопряжена с редактированием модулей. К прототипу страниц мы обращаемся редко и его редактирование ответственный этап, потому он вынесен в отдельный пункт меню.
Разработка прототипы страницы ничем не отличается от разработки любой страницы сайта, важно только помнить, что все вложенные модули будут видны на всех страницах это общая часть оформления вашего сайта.
Как для обычного модуля вам доступны для редактирования 4 пункта: Шаблон, Layout, Дизайн, HTML. Важно: Смена шаблона это фактически смена раскладки страницы, т.е. для существующего модуля равнозначна операции «выбора раскладки страниц» в одноименном разделе меню.
4.6. Страницы сайта
«Страницы сайта» - вложенный пункт раздела «Оформление и структура». В работе над сайтом к этому разделу мы будем обращаться чаще всего, если не сказать постоянно.
Сайт, как мы выяснили выше, состоит из страниц, и именно их мы создаем, редактируем и наполняем в процессе разработки.
В разделе «Страницы сайта» в рабочей области окна находится панель управления страницами (см. рис. 9), в которой можно добавлять и удалять страницы, изменять их атрибуты название, адрес (в строке броузера), ключевые слова и описание. После добавления новой страницы её можно сразу просмотреть, нажав на кнопку предосмотра.
Рис. 9. Меню страниц сайта. Добавление новых страниц.
Все новые страницы по умолчанию создаются на базе прототипа страниц. Фактически не создается новых модулей, страница только ссылается на модули «образчика». Когда вы что-то меняете в прототипе, это мгновенно отображается на всех связанных с ним страницах, - потому что они его используют за основу. Получаем большую экономию в хранении ресурсов и эффективности работы. Новые страницы с привязкой к прототипу «бестелесны», - они не имеют собственных модулей. В дальнейшем, при разработке каждой из страниц, мы добавляем в них новые модули, присущие только ним. Итак, страница сайта состоит из N модулей прототипа и M своих модулей (N+M) . Иллюстрация на рис. 10.
Рис. 10. Строение сайта из модулей. Прототип и страницы хранятся отдельно, страницы использую модули прототипа.
Редко возникает необходимость создать страницу, отличную от прототипа, т.е. не наследующей модули и оформление прототипа. Тогда вы должны снять флажок «привязка к прототипу». Новая страница будет создана по прототипу, но все ее модули будут существовать независимо от него. Изменения в прототипе никак не скажутся на этой странице. После того, как страница «отвязана» от общей схемы, мы можем поменять её шаблон на странице редактирования модуля страницы.
Разработка конкретной страницы происходит путем редактирования модуля этой страницы. Если модуль унаследован от прототипа, то мы не можем менять его свойства (дизайн), нам доступен только раздел Layout, с помощью которого мы создаем уникальную компоновку модулей на этой странице. Подробнее в главе «Разработка отдельных страниц».
4.7. Типы страниц
Немного отрываясь от описания конструктора, рассмотрим в общем, какие бывают страницы.
Страницы бывают статическими, - информация на них не меняется (контакты, о фирме и т.п.), а также с динамически формируемым содержанием. Статические страницы создаются дизайнером один раз, и это самый простой способ создания сайта, но как увидим ниже, не самый быстрый. К динамическим страницам относится, например, «гостевая» на сайте. В гостевой сообщение может добавить любой посетитель, и ее содержание будет меняться уже без участия создателя. Именно динамические страницы делают сайт живым, постоянно обновляемым и интересным.
Динамические страницы полезны для каталогов продукции. В статической версии вы создаете для каждого товара отдельную страницу и следите за ссылками на других страницах. В случае малейших изменений приходится редактировать все страницы. В динамическом исполнении каталога вы заносите информацию о товаре в специальные таблицы, а сами страницы товаров (их могут быть тысячи) генерируется специальной программой.
При запросе какой-либо страницы выполняется программный код, он извлекает данные из хранилища (БД), после чего собирает страницу на основе шаблонов и представляет ее пользователю
Вышеописанная концепция формирования страниц сайта позволяет разрабатывать сайт дизайнеру, не имеющему навыков верстальщика и Web-программисту, на основе уже имеющихся шаблонов, уточняя (настраивая) детали оформления.
Все современные сайты создаются именно на динамической основе, когда само полезное содержание (контент - товары, статьи, фотографии) хранится в отдельных таблицах БД, где с ним удобно работать, а дизайн страницы подготавливается только раз. Благодаря такой системе решается вопрос одновременного обновления всех страниц (например, при необходимости редизайна), плюс появляется возможность создания нескольких вариантов представления страниц. Вы можете независимо менять дизайн или редактировать информационное наполнение, не трогая верстку страниц. Эта удобная концепция позволяет сэкономить много времени и сил.