Дизайн сайта. 
Разработка сайта, посвященного серии фильмов "Звездные войны"

Дизайн сайта играет важную роль в процессе его продвижения и раскрутки. Первый контакт посетителя с сайтом осуществляется на основе визуального восприятия страницы. Если внешний вид сайта будет приятным и интересным, то пользователь задержится здесь и захочет больше узнать о содержимом веб-ресурса.

Модель сайта

Организационная модель должна быть проста и интуитивно понятна пользователю, а навигация единообразна на всех страницах сайта.

У данной вкладки есть подменю — «Галактика» и «История войн». На последней в свою очередь расположены ссылки в боковом меню на страницы с историей различных битв.

2. «Персонажи».

Данная вкладка делится на подменю «Светлая сторона» и «Темная сторона». Они посвещены персонажам серии фильмов, навигация по страницам в боковом меню.

3. «Сила».

Главная страница вкладки посвещена понятию «сила». В боковой панели навигации — ссылки на различные технологии.

4. «Новости».

На странице отображаются главные новости в галактике «Звездных войн», панель навигации, дающая ссылки на тематические сайты, а также форма «Предложить новость.

Макет сайта и обеспечение адаптивности

Когда продумывается дизайн сайта, учитывается объём будущей информации на нём, привычки потенциальных посетителей, удобство доступа к материалу и множество других вещей. Типовые элементы вроде заголовка, навигации, контента, контактной информации надо разместить на одной странице, в совокупности это и называется её макетом.

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

Адаптивным дизайном называется способ вёрстки, когда ширина макета веб-страницы подстраивается под ширину устройства.

Для основных страниц использован двухколоночный резиновый макет. На рисунке 1 представлен макет сайта при различной ширине окна.

Рисунок 1. Макет сайта Существует несколько подходов к формированию такого макета, но самый простой и удобный заключается в сочетании свойств float и margin. Левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах.

Пример стилевых свойств для оформления макета (Таблица 1):

Таблица 1.

Для левой колонки требуется всего два свойства: float — заставляет вторую колонку располагаться рядом по горизонтали с первой и width, которое устанавливает ширину колонки. Вторая колонка будет занимать всё оставшееся место, поэтому для нее указывать width не нужно.

Правая колонка характеризуется лишь одним свойством — margin-left, оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками.

Контейнер, в который помещаются колонки формируется двумя свойствами:

max-width: 900px;

min-width: 451px.

Первое — задает максимальную ширину, которая не будет превышена. Свойство min-width для слоя контейнера устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки.

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