Главная · Карта сайта · Поиск · Статьи · Компьютерные курсы · Обучающие программы · Открытые проекты · Веб-программирование · Создание интернет-сайта · Полезные ссылки · Глоссарий · Контакты · Декабрь 09 2016 20:19:59
Последнее опубликованное

Что такое Model-View-Controller
Pattern Model-View-Controller

Как создать свой веб-сайт
Как создать свой сайт в интернете

Разное
Статистика

Как создать свой сайт. Выбор макета и определение структуры сайта


Шаг 4. Определение формы и содержания веб-сайта

После того, как доменное имя зарегистрировано, услуги хостинг-провайдера приобретены и выбран инструмент для создания сайта, самое время определиться с тем, как ваш сайт будет выглядеть и какова будет его структура. В этом разделе я постараюсь объяснить, что такое макет и структура сайта, и как их определять в зависимости от выбранного вами способа построения вашего интернет-ресурса: вручную самостоятельно, средствами CMS или с помощью студии веб-дизайна.

Выбор и создание макета сайта

Не сложно заметить, что большинство современных сайтов состоят из страниц, созданных по единому шаблону - состоящих из одних и тех же элементов: заголовка, боковых панелей, нижней части (подвала), основной информационной области и т.д. Каждая такая область служит определенной цели. В заголовке, к примеру, пользователь видит название сайта, основное меню, контакты и прочую общую для всех страниц информацию. В боковых панелях часто размещают контекстные навигационные меню, содержимое которых зависит от выбранного пользователем раздела или просто рекламу. В нижней части сайта может быть информация об авторе и авторском праве, а также ссылки на наиболее популярные разделы сайта или что-то в этом рода. В основной части страницы содержится то самое информационное наполнение, отличающее эту страницу от всех остальных (основной контент страницы). Ниже приведен общий вид макета сайта, имеющего заголовок, главное меню, боковые панели, подвал и область с основным содержимым. Такой макет еще называют трехколоночным макетом.

Трехколоночный макет сайта
Общий вид трехколоночного макета сайта.

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

Макеты сайтов
а) трехколоночный макет с фиксированной шириной основной области. б) трехколоночный макет с резиновой шириной основной области. в) двухколоночный макет с боковой панелью справа. г) двухколоночный макет с боковой панелью слева.

Итак, макет сайта – это тот самый трафарет, по которому будут создаваться все основные страницы вашего веб-сайта. Теперь рассмотрим, как выбрать/создать нужный вам макет сайта:

  1. Если вы создаете сайт с помощью CMS, то, скорее всего, вы сможете создать макет вашего сайта с помощью визуальных инструментов выбранной вами системы управления контентом. Если вы используете Wordpress, то вопрос с выбором макета сайта сводится к выбору подходящей для вас темы (шаблона) для Wordpress. Подобные темы представлены набором файлов HTML/PHP/CSS, которые загружаются специальным, встроенным в Wordpress инструментом к вам на сайт и подключаются к вашему проекту, как Plug-in компоненты. Найти и подключить нужную вам тему поможет интернет, а помешать только пресловутая проблема выбора, поскольку этих самых тем для Wordpress существует действительно очень много.

  2. Если вы заказали дизайн сайта в студии веб-дизайна, то и макет вам разработают специалисты этой студии, предварительно предложив вам на выбор несколько вариантов. Создание новой страницы будет сводиться к копированию макета и его информационному наполнению.

  3. Если вы создаете сайт самостоятельно, то забота по разработке макета страниц вашего сайта ложится на ваши плечи. Я могу вам помочь в этом, предложив к изучению следующие материалы по основам HTML/CSS разметки:

Определение структуры сайта

Структура сайта – это способ организации связей между различными разделами интернет ресурса, которые представлены отдельными веб-страницами. Структура сайта является иерархической структурой, начинающейся с главной страницы. Уровень раздела или уровень страницы в структуре сайта определяется минимальным количеством переходов по ссылкам, которые необходимо выполнить пользователю, чтобы попасть на данную страницу с главной страницы сайта. Уровень страницы в структуре сайта не следует путать с уровнем вложенности файла, представляющего страницу в папках на диске, где размещен ваш сайт. Страница может находиться в корневом каталоге, но быть недосягаемой с главной станицы, и наоборот – находиться глубоко в подкаталогах на диске, но при этом с главной страницы сайта на нее будет прямая ссылка. Вот так выглядит обобщенная структура сайта до разделов 1-го уровня (будем считать, что главная страница соответствует нулевому уровню).

Структура сайта
Обобщенная структура сайта.

При разработке структуры сайта следует учитывать то обстоятельство, что пользователь не всегда будет начинать навигацию по вашему сайту с главной страницы. Поисковые системы в ответ на запросы пользователя довольно часто формируют ссылки на страницы, соответствующие далеко не 1-му, а то и не 2-му уровню структуры вашего веб-ресурса. В этой связи необходимо сделать все возможное, чтобы пользователь, перейдя по ссылке поисковой системы к вам на сайт, имел возможность вернуться в основной раздел, а также перейти на главную страницу. Таким образом, создавая структуру сайта, вы должны заботиться не только о ссылках, ведущих “вниз”, но и о ссылках, ведущих “вверх” по структуре вашего веб-ресурса в направлении основных разделов и его главной страницы. Структуру раздела, представленного основной страницей и набором тематически связанных с ней страниц можно организовать одним из следующих способов.

Иерархическая структура раздела сайта
Структура раздела сайта "дерево".

Закольцованная структура раздела сайта
Структура раздела сайта "кольцо".

Если снова вспомнить про Wordpress, то думать о структуре сайта при его использовании вам, скорее всего, не придется, поскольку за вас все сделает сама CMS. Вам необходимо будет только завести список категорий статей и относить каждую новую статью к одной или нескольким категориями. Разделы по каждой категории, при желании, можно будет сформировать автоматически.

На этом про макет и структуру сайта у меня все. В следующих разделах речь пойдет уже не столько о способах и техниках построении сайта, сколько о тех деталях, которые помогут вашему интернет проекту стать популярным у поисковых систем.

Вернуться к вопросу: Как выбрать домен и хостинг.
Читать далее: Шаг 5. Начинаем продвигаться сайт в сервисах интернет-поиска.

Компьютерные курсы и курсы программирования
Основы программирования

Курс для начинающих программистов на C# и VB.NET.

SQL 25™

Построение SQL запросов и работа с базой данных.

C# Quick Guide™

Программирование на C#. Краткое руководство.

RegEx

Применение регулярных выражений.

Plug-in архитектура

Примеры программной Plug-in архитектуры.

XML и его расширения

Язык разметки XML и его расширения с примерами.

HTML и разметка гипертекста

Языки HTML, XHTML и CSS с примерами разметки.

Основы веб-дизайна

Основы веб-дизайна: решения типовых задач верстки.

Программирование на PHP

Руководство по программированию на PHP для начинающих.

Справочные материалы

Шаблоны проектирования
Каталог шаблонов проектирования программных компонентов.

Рефакторинг кода
Каталог приемов рефакторинга программного кода.

Гость
Имя

Пароль



Забыли пароль?
Запросите новый здесь
.
Coding Craft. Все права защищены © 2011. Проект Инициативного Народного Фронта Образования - ИНФО-проект.