Структура страницы сайта | Как создать свой сайт

Какая бывает структура страницы сайта

Май-29-2009 Автор: VeryOldMan

Вот мы и подошли к основному, к чему так сказать стремились, непосредственно к созданию дизайна страницы сайта в программе Photoshop.

А пока,  разберемся со структурой страницы сайта, которая, если Вы заметили, характерна для всех сайтов Сети. Ну, для большинства — это точно.

Создаем главную страницу сайта. Договоримся сразу о том, что мы создаем сайт со статичными html страницами и том, что все, что вы прочитаете далее – это минимальная часть того, что нужно знать для создания сайта.

С чего начнем? С главного – о чем будет сайт. Это отправная точка для создания макета страницы сайта. Если вы определились с темой – продумайте, а лучше на бумаге, карандашом, сделайте эскиз страницы. По устоявшимся традициям структура страницы  сайта выглядит так:

1. Шапка (хедер, header), в которую могут входить, хотя и не обязательно:

  • Логотип
  • Заголовок
  • Слоган
  • Телефон
  • Меню навигации (по сайту)

2. Основная часть страницы:

  • Меню навигации по тематическим разделам
  • Меню навигации (по разделам сайта)
  • Основная информация
  • Изображения, баннеры

3. Подвал (footer)

  • Копирайт
  • Адреса, телефоны
  • Счетчики и баннеры
  • Меню навигации (по сайту, по разделам сайта)

В зависимости от варианта верстки сайта — двуколоночной или триколоночной, основная часть страницы может быть в виде, естественно, двух или трех колонок. Самая широкая – для основной информации. Схематически это выглядит так:

структура страницы сайта

Естественно, вы можете менять местами колонки и основную информацию. Поэтому, проектируя макет страницы сайта, старайтесь сразу прикинуть, как ее потом можно будет порезать на части в соответствии со схемой. Это сэкономит вам время и нервы. Кроме того, сами понимаете, колонки, и зона основной информации будут заняты, соответственно, информацией. Поэтому планировать вставлять сюда какую то графику, по крайней мере, на начальном этапе проектирования, я думаю не нужно.

Исходя из рассмотренной структуры страницы сайта я, для примера, сделал такой макет страницы о лошадях. Нравятся мне они. Сами понимаете, это не законченный труд дизайнера, а просто образец, на котором мне будет удобно вам показать, а вам понять основные принципы создания дизайна  сайта.

По моим прикидкам высота шапки будет 170 пикселей, подвала 140, ширина левой колонки 160, в ней мы расположим навигацию сайта, ширина правой – 210, здесь будут поиск по сайту, разные счетчики и баннеры. Это для главной страницы сайта. Макет внутренних страниц сайта мы упростим, уберем правую колонку и за счет нее увеличим зону основной информации. Пусть будет такой вариант. Конечно, их может быть множество:

структура страницы сайта

Теперь, по этапам, разберем, как это делалось в разделе Макет страницы сайта






Комментариев (1)
  1. andreu Пишет,

    много полезного узнал сасибо

Добавить комментарий