Тот, кто хоть раз видел сайт, интуитивно подозревает про существование у него некой невидимой программной сущности. Ведь, судя по определению, сайтом является сборник тестовых файлов с кодами, которые являются не чем иным, как инструкциями для такой программы, как браузер, по которым тот рисует сайт на экране монитора.
Однако в этой статье мы будет анализировать видимую сущность сайта – ту картинку на экране, которую видит человек.
Шаблоны для страниц сайта
Ссылка на данную статью:
//design-for.net/page/shablony-dizajna-sajta
Видимая структура страницы сайта имеет корни в полиграфической продукции. Родными братьями сайтов являются книги и журналы, структура которых устоялась задолго до появления сайтов. Как типичный представитель полиграфической продукции, каждый сайт имеет некоторое оформление, основные черты которого оттачивались в течение веков.
Привычным для людей является наличие стартовой страницы сайта, как заставки, с одного взгляда на которую становится ясна тематика сайта. Внутренние страницы сайта решаются в каком-то общем дизайне вместе с первой.
В те времена, когда все сайты представляли собой набор отдельных страниц (статичный сайт) в виде файлов HTML, сайты буквально копировали страницы журналов. Хотя каждая страница статичного сайта может иметь уникальное оформление, совершенно отличное от других страниц, со временем вебмастера стали оформлять сайты, придерживаясь общепринятых норм. Единообразный дизайн всех страниц стал негласным стандартом. Это позволяет нам говорить, что существуют шаблоны для страниц сайта, под которым мы понимаем единое стилевое оформление, присущее всем страницам сайта.
Шаблоны оформления сайта
1.1. Сегодня уже все согласились, что шаблон необходим каждому сайту. В таком случае посетитель, при переходе с одной страницы сайта на другую видит некую общность страниц (предыдущей и последующей) и после перехода понимает, что остается на том же сайте.
1.2. Кроме того, шаблон имеет эстетическую ценность, так как передает настроение и чувство стиля автора, а при точном соответствии с темой может даже усиливать восприятие информации со страниц сайта.
Теперь рассмотрим, что же мы понимаем под шаблоном сайта, какие компоненты формируют дизайн сайта.
Что такое шаблон сайта
2.1. Наверно, даже Новички знают, что для того, чтобы увидеть какую-то страницу сайта надо запустить специальную программу – обозреватель интернета, который называют - браузер. Если мы пропишем в строке адреса браузера особый текст – //design-for.net - ссылку на интересующую нас страницу, то браузер отправится искать эту страницу сайта. На самом сайте браузер определяет – что ему надо скачать (тексты и картинки) на домашний компьютер посетителя, чтобы тот увидел страницу на экране монитора. Ведь страница на сайте не лежит в виде готовой фотографии. Там лежит файл с кодом, который является инструкцией для браузера о том, как ему собрать страницу из отдельных компонентов.
Шаблоном является код, содержащий инструкцию по оформлению страницы: цвет, размер и расположение отдельных блоков, шрифт для текста, толщина, цвет, наклон и многое чего другого.
Кстати, в браузере так же имеются настройки на цвет и шрифты. Если они совпадают с установками шаблона, то браузер правильно нарисует страницу сайта на экране монитора. Если нет, то будет сбой. Поэтому шаблоны сайтов проверяют на совместимость с популярными браузерами.
2.2. Шаблоны в том смысле, о котором я сейчас говорю, появились вместе с движками сайтов - CMS. Благодаря CMS - системе управления содержимым - сайт становится как бы «живым» и реагирует на действия посетителя. Такие сайты называют интерактивными.
Сайты, построенные на системах управления сайтом, не имеют в себе страниц как таковых. Дело в том, что как оказалось, самым компактным методом хранения является размещение текстов, картинок и других файлов по отдельным папкам (местам). Движок взаимодействует с базой данных (БД) в виде таблиц, в которых прописано, где что лежит. Когда на сайт приходит браузер, то «механизм» сайта (движок) выдает ему все отдельные части (компоненты) страницы сайта для её динамической сборки «на лету». Первым браузеру выдается шаблон, исполняющий роль некоторой рамки (болванки с вырезами), в которую браузер вставляет тексты и картинки.
2.3. Такой динамический способ сборки страницы не требует хранения множества готовых файлов страниц с однотипным оформлением, что заняло бы большое дисковое пространство. Браузер закачивает динамический шаблон сайта на компьютер читателя только один раз и при переходе лишь меняет тексты и картинки в «вырезах». Шаблоны повысили производительность при обзоре сайтов, снизив потребление сайтами оперативной памяти серверов.
Блоки шаблона сайта
3.1. Читатель видит страницу в окне браузера, являющегося основной программой Интернета. Эту страницу с данной статьей вы тоже видите в окне какого-то браузера (вашего). Именно этот браузер закачал ее с сервера на экран вашего монитора, собрал и теперь показывает вам в своем окне.
Как видите, страница сайта может занимать все окно браузера или его часть, но строго говоря, всё, что видно в окне браузера - это уже сайт. Через настройки сайта можно сделать фон в виде картинки, орнамента или однотонным. Этот фоновый прямоугольник, на котором лежит картинка сайта называют телом - body.
На экране монитора страница похожа на лист печатной продукции (книги, газеты или журнала) в виде прямоугольника, который можно мысленно разделить на отдельные прямоугольные части (блоки), имеющие свое смысловое значение.
Всё сделано для удобства читателя - страницу сайта можно прокрутить сверху вниз и обратно. При длинном тексте это даже удобнее, чем перелистывать страницы. А вот, сдвиги влево или вправо используются редко, так как это непривычно и неудобно.
Если вы дочитали до этих строк, то значит уже опустились (прокрутили страницу) вниз от верхней красочной картинки, из которой узнали общую информацию о моем сайте. Справа есть неширокая полоска со служебной информацией, а внизу горизонтальная полоска окончания страницы.
3.2. Как правило, сверху каждой страницы имеется заголовок (наименование) самого сайта, его логотип, девиз, какая-то картинка-идея, графически выражающая тему сайта. Уже давно в полиграфии для такого самого верхнего блока существует специальный термин – шапка (header).
Рис.1 Схема расположения блоков компонентов на странице сайта
3.3. Ниже шапки находится самая содержательная часть сайта.Обычно здесь размещают какие-то записи, чаще всего в виде колонки (столбца) с текстом. Часто сбоку от этой главной части (main колонки) делают более узкую колонку – боковой отступ, который так и называют sidbar. Как правило, в сайдбарах размещают служебный материал: ссылки для перехода к другим страницам, рекламу, баннеры, форму поиска или входа и т.д. Если одной колонки не хватает, то устраивают еще одну (или несколько) с той же или другой стороны от главной (main) колонки.
3.4. Так как сайдбары не содержат ценной информации, а только крадут ширину у главной колонки, то их стараются делать несколько уже (лучше намного) главной колонки. Иначе на главной колонке становится тесно для текста и картинок, что затрудняет их чтение посетителем сайта.
3.5. Самым последним блоком является подвал (footer), как образно называют блок в самом низу страницы. Как правило, его оформляют заметно скромнее остальных блоков-компонентов и в нем располагается служебная информация. Чаще всего в подвале дублируется меню для перехода к важным страницам сайта, чтобы читатель, прокутивший страницу до конца, не отматывал ее на начало. Так же подвал – традиционное место для счетчиков посещаемости сайта и некоторых пояснений о программах сайта.
В подвале моего сайта вы можете увидеть фавикон сайта и повтор наименования сайта (как бы подпись автора), а так же ссылку на официальный сайт разработчика движка и статистику потребления сайтом ресурсов.
3.5. Некоторые компоненты входят в состав основных и могут менять свое традиционное место расположения. Так, например, главное меню обычно представляет собой горизонтальную полоску с кнопками-ссылками для перехода к самым значимым страницам сайта. Чаще всего меню располагают или сверху или снизу картинки-идеи в шапке сайта. Там самое видное место, поэтому читателю легко перейти в любой пункт, куда его отсылает меню. Меню может и не быть или оно перенесено в боковую колонку – сайдбар. Так же меню может быть заменено списком рубрик, для которых традиционно отводят место в сайдбаре.
Далее я еще раз объясняю назначение каждого компонента, иногда с некоторыми повторениями их функций. Инициаторам сайта лучше почитать до конца.
Header - шапка сайта
4.1. Самым красочным блоком обычно является шапка сайта – header. Этот блок находится в самом верху сайта и призван привлечь внимание посетителя. Шапка с первого взгляда с помощью графических средств должна рассказать посетителю о тематике сайта. Как правило, основную смысловую нагрузку несет на себе картинка-идея сайта. Когда такой надобности нет, то шапку выполняют со спартанской простотой. Тогда роль шапки может выполнять её отдельные внутренние компоненты – блоки логотипа, названия сайта, девиза, даже рекламные блоки.
4.2. Технически - блок шапки – это прямоугольник над страницей, в котором располагаются в разных комбинациях отдельные компоненты. Этот прямоугольник по ширине чаше всего совпадает с шириной страницы, но может быть и короче, а при «резиновой» верстке – растягиваться при увеличении ширины окна браузера.
Высоту шапки стараются сделать, как можно уже, однако определяющим остается дизайнерская задумка автора сайта. Высота должна быть такой, чтобы посетитель мог видеть под шапкой в окне браузера хотя бы начало текста статей, иначе он просто может не сообразить, что статьи находятся ниже шапки в невидимой части страницы. Ведь читателя в первую очередь интересует информация, находящаяся в статьях, поэтому он может быстро покинуть «сайт без статей».
4.3. Программно шапка сайта (как и любой её компонент) - это некоторый текст с кодом, который может быть вынесен в отдельный файл. В этом тексте прописана инструкция для браузера, как нарисовать этот компонент на экране, вычитывая из текста с кодом всё о свойствах этого компонента.
Главная колонка и сайдбары
5.1. Самым содержательным компонентом сайта является его главная колонка (main), на которую выводятся статьи и изображения. Технически – это прямоугольник, который самостоятельно удлиняется при большом количестве материала, так как обычно имеет ограничения (жесткие или нет) только по ширине.
5.2. Сайдбары – это просто отступы от краев основной колонки, которые так же удлиняются при наполнении их виджетами. Главная колонка и сайдбар могут иметь одинаковую длину, а могут и разную. Более приемлемо выглядит страница с длинной главной колонкой, чем с чересчур вытянутым сайдбаром.
Сайдбар может быть отдельным компонентом, в котором располагаются небольшие блоки (не шире самого сайдбара), например, форма поиска и входа, блок рубрик, рекламный баннер и т.д. Такие небольшие блоки (по-другому их называют виджетами) и придают сайдбару весь смысл его существования. Чем больше виджетов, тем длиннее сайдбар.
5.3. Главная колонка иногда разбивается на псевдоколонки или небольшие блоки-прямоугольники, для вычурного вывода статей. Здесь могут быть разные графические вставки и даже видео. Обычно этим грешат новостные сайты, для которых важно разместить как можно больше анонсов сенсационных заметок.
Footer - подвал сайта
6.1. Подвал сайта, как и сайдбар, предназначен для служебной информации. Наличие подвала позволяет читателю определить на глаз размер статьи, так как полоска подвала завершает страницу. Если в подвале повторяется главное меню, то это дополнительное удобство для посетителя, так как ему легко перейти на следующую страницу, пользуясь этой формой навигации по сайту.
Как видите, страницы сайтов очень похожи на страницы глянцевых журналов. Я делаю подробный анализ составляющих частей по той причине, что автор сайта (вебмастер) является его издателем и по определению должен разбираться в компонентах страницы сайта. Блоки компонентов – это те пазлы (или кубики) из которых собирается общая картинка, которую будет оценивать посетитель сайта. Вебмастер должен в первую очередь ориентироваться на удобство для читателя: привлекательность картинки в шапке, пропорции в размерах частей страницы, вкус в подборе цветов, не утомляющих глаза при чтении. Конечно, в любом случае, главным остается ценное содержание статей, но на внешний вид сайта это никак не влияет. В интернете довольно много успешных сайтов с пустоватым содержанием, которые являются полными аналогами глянцевых журналов.
Вебмастер вправе сам выбирать, как содержание своего сайта, так и его дизайн. Я лишь показываю, как это лучше сделать. Более подробно о науке создания удобного и красивого сайта можно прочитать в статьях из рубрики Дизайн интернет сайта.
Однако изучение теоретических тонкостей – дело долгое, поэтому я предлагаю практикам сразу перейти к статье Шаблон default, в которой я рассказываю о настройках этого универсального шаблона, который поставляется вместе с дистрибутивом бесплатного движка MaxSite CMS. В той статье я на картинах показываю, какие разнообразные стили (от зеленого до черного) оформления для сайтов содержит этот бесплатный шаблон. Множество комбинаций дизайна, присутствующих в шаблоне default, позволят вам легко сделать приличный сайт самостоятельно.
Если вы посмотрите на страницу этого сайта – то увидите одну из самых «сереньких» тем (шкурок), какая есть в шаблоне default. Этот сайт сделан на чистом «дефолте». Я в нем лишь убрал блок логотипа в самом верху сайта и опустил меню под картинку-идею. Для моего структурированного и информационного сайта не требовалась красочность, которой в избыточном количестве нашпигован этот многоликий шаблон. Для тех, кого не устроит и этот шаблон, я в специальной рубрике Каталог шаблонов MaxSite CMS разместил ссылки для скачивания многих других шаблонов на любой вкус (платных и бесплатных).
Когда вы познакомитесь поближе с бесплатной системой управления сайтом MaxSite CMS, то поймете, как можно, не только установить любой шаблон, но и как сделать свой шаблон для своего сайта на прекрасном движке MaxSite CMS. Образцы дизайна сайтов на MaxSite CMS вы можете увидеть, если перейдёте в рубрику Обзор сайтов на MaxSite CMS.