Вот мы и подошли к основному, к чему так сказать стремились, непосредственно к созданию дизайна страницы сайта в программе Photoshop. Разберемся со структурой страницы сайта, которая, если Вы заметили, характерна для всех сайтов Сети. Ну, для большинства — это точно.
Создаем главную страницу сайта. Договоримся сразу о том, что мы создаем сайт со статичными html страницами и том, что все, что вы прочитаете далее – это минимальная часть того, что нужно знать для создания сайта.
С чего начнем? С главного – о чем будет сайт. Это отправная точка для создания макета страницы сайта. Если вы определились с темой – продумайте, а лучше на бумаге, карандашом, сделайте эскиз страницы. По устоявшимся традициям структура страницы сайта выглядит так:
1. Шапка (хедер, header), в которую могут входить, хотя и не обязательно:
- Логотип
- Заголовок
- Слоган
- Телефон
- Меню навигации (по сайту)
2. Основная часть страницы:
- Меню навигации по тематическим разделам
- Меню навигации (по разделам сайта)
- Основная информация
- Изображения, баннеры
3. Подвал (footer)
- Копирайт
- Адреса, телефоны
- Счетчики и баннеры
- Меню навигации (по сайту, по разделам сайта)
В зависимости от варианта верстки сайта — двуколоночной или триколоночной, основная часть страницы может быть в виде, естественно, двух или трех колонок. Самая широкая – для основной информации. Схематически это выглядит так:
Естественно, вы можете менять местами колонки и основную информацию. Поэтому, проектируя макет страницы сайта, старайтесь сразу прикинуть, как ее потом можно будет порезать на части в соответствии со схемой. Это сэкономит вам время и нервы. Кроме того, сами понимаете, колонки, и зона основной информации будут заняты, соответственно, информацией. Поэтому планировать вставлять сюда какую то графику, по крайней мере, на начальном этапе проектирования, я думаю не нужно.
Исходя из рассмотренной структуры страницы сайта я, для примера, сделал такой макет страницы о лошадях. Нравятся мне они. Сами понимаете, это не законченный труд дизайнера, а просто образец, на котором мне будет удобно вам показать, а вам понять основные принципы создания дизайна сайта.
По моим прикидкам высота шапки будет 170 пикселей, подвала 140, ширина левой колонки 160, в ней мы расположим навигацию сайта, ширина правой – 210, здесь будут поиск по сайту, разные счетчики и баннеры. Это для главной страницы сайта. Макет внутренних страниц сайта мы упростим, уберем правую колонку и за счет нее увеличим зону основной информации. Пусть будет такой вариант. Конечно, их может быть множество:
Теперь, по этапам, разберем, как это делалось в разделе Макет страницы сайта в Photoshop