Шаблоны страниц сайта

Если вы просмотрите исходный html-код нескольких страничек вашего сайта, вы увидите, что в разных страничках содержится много одинаковых строк. Это заголовок страницы, мета-теги, блоки повторяющегося текста (например, информация об авторе, копирайт), блоки меню, счетчиков и так далее. Если вам потребовалось добавить новую страницу к вашему сайту, вы вынуждены будете каждый раз набивать эти повторяющиеся строки, то есть верстать каждую новую страницу заново, что, конечно, очень трудоемко и не имеет смысла. Для облегчения этой работы целесообразно использовать заготовки - шаблоны страниц. Шаблоны бывают разные. Рассмотрим несколько типичных видов шаблонов.

HTML-шаблоны

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

Для примера рассмотрим ту страницу, на которой вы находитесь. Заготовка для этой страницы могла бы содержать шапку страницы (логотип, название сайта, скрипт вызова баннера), левую колонку (это меню одинаково для всех страниц моего сайта), правую колонку (скрипты вызова рекламных ссылок и счетчики) и подвал. Причем имеется в виду, что все эти элементы содержатся в заготовке полностью, в виде готового html-кода. Такая заготовка сохраняется в каком-то файле. Именно такой тип шаблона использовался для создания страничек данного сайта до тех пор, пока я не принялся за подготовку настоящего раздела. Разбираясь с использованием шаблонов я осознал, что такой подход имеет существенные изъяны.

Пожалуй, главным недостатком метода использования html-шаблонов в качестве простой заготовки для новой страницы является то, что при необходимости изменения некоторых элементов страницы, например, при добавлении нового пункта меню, придется вносить исправления во все ранее созданные страницы. Видимо, как раз с целью устранения этого недостатка и был разработан механизм SSI - Server Side Includes. Используя этот механизм можно вынести в отдельный файл некоторые повторяющиеся части страницы, например, меню. Выдаваемая пользователю страница получается "сборкой" из отдельных файлов, что позволяет впоследствии легко вносить изменения во все страницы, изменяя только один файл. Сам шаблон при этом становится гораздо компактнее и устраняется (может быть не окончательно) упомянутый недостаток - трудности модификации. Теперь в любой момент можно добавить в макет страницы новый блок, или изменить HTML-разметку статического блока. Например, можно изменением буквально двух-трёх строчек шаблона добавить дополнительное навигационное меню.

CSS и отделение контента от оформления сайта

Следующим шагом в разработке шаблонов сайта является отделение контента страниц от дизайна сайта. Простой html-шаблон предполагает, что все чисто оформительские элементы (тип и размер шрифтов, размеры полей и отступов, оформление таблиц, ссылок, заголовков и так далее) задаются прямо в тексте тех файлов, из которых собирается страница. С внедрением в веб-разработку каскадных таблиц стилей (CSS) стало возможным отделить содержимое сайта (контент) от дизайна страниц. Контент хранится на сервере в отдельных файлах и это позволяет включать его в различные шаблоны в зависимости от ситуации. Например, одну и ту же страницу сайта можно показать как в полной версии страницы, включающей рекламные блоки, шапку страницы и другие оформительские элементы, так и в упрощённом виде для вывода на печать. Можно создать разные шаблоны для разных разделов сайта, чтобы эти разделы выглядели по-разному, обладали некоторой индивидуальностью. Более того, пользователям можно предоставить на выбор несколько разных шаблонов и каждый посетитель может выбрать дизайн сайта из этих вариантов в соответствии со своими личными предпочтениями.

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

Все оформление в таком варианте выносится в стилевые файлы, которые подключаются с помощью того же SSI или, что более правильно, с помощью тега <link>.

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

Готовые шаблоны выложены на многих сайтах в сети, например, здесь: "Шаблоны сайтов". В перечне ссылок вы найдете ссылки на несколько сайтов с готовыми шаблонами. Другие варианты вы легко найдете через поисковые машины. Эти шаблоны разработаны уже с использованием графики и каскадных таблиц стилей (CSS). Для примера я скачал несколько шаблонов, выбрал из них один и создал вариант текущей страницы с использованием этого шаблона. Результат вы можете посмотреть здесь. Если вы откроете ссылку в другом окне, то увидите, страничка выглядит уже значительно более привлекательно, чем страница, которую вы просматриваете в данный момент.

В качестве еще одного примера приведу шаблон, разработанный Полом Айришем (Paul Irish) совместно с Divya Manian. Отличительной чертой этого шаблона является соответствие требованиям стандарта HTML версии 5. Он создан с использованием CSS и javascript, с учётом передового опыта профессионалов. На сайте разработчиков утверждается, что этот шаблон обладает следующими особенностями, которые делают этот шаблон замечательным:

  • Кросс-браузерная совместимость (включая IE6);
  • Готовность к HTML5. Возможно использование новых тегов, во всей их полноте;
  • Оптимальные правила кэширования и сжатия для достижения первоклассной производительности;
  • Лучшие настройки сайта по умолчанию, исходя из практики;
  • Оптимизации под мобильные браузеры;
  • Предотвращение постепенной деградации возможностей;
  • Специфические классы IE для максимального контроля кросс-браузерной совместимости;
  • Удобные классы .no-js и .js для стилей;
  • Хотите написать юнит-тесты, но лень? Полнофункциональный тестовый набор ждет вас;
  • Профилирование Javascript… в IE6 и IE7? Конечно, не проблема;
  • Настройка Console.log, так что вы не сломаете что-нибудь по ошибке;
  • У вас никогда не будет неправильного типа документа или разметки!
  • Оптимальные стили для печати, оптимизированные по производительности;
  • Разметки, адаптируемые под IOS, Android, Opera Mobile, и скелет CSS;
  • IE6 pngfix включён в поставку;
  • Классы .clearfix и .visuallyhidden для разумной и дружелюбной стилизации;
  • файл .htaccess, который позволяет правильно использовать возможности HTML5 и ускоряет загрузку страницы.

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

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

Поскольку содержимое тега <title> индивидуально для каждой страницы, вынести весь заголовок в отдельный файл невозможно. Если вынести в отдельные файлы три первых и пять последних строк этого фрагмента, оставив в основном шаблоне только строку с тегом <title>, то число файлов (на мой взгляд) будет слишком быстро увеличиваться. А мелкие файлы, как известно, не оптимально расходуют пространство на диске сервера, к тому же и обращение к группе мелких файлов для формирования итоговой страницы будет занимать больше времени, чем обращение к одному-двум большим файлам. Вместе с тем, ограничиться именно двумя файлами (оформление + контент) не получится, потому хотя бы, что блоки меню и рекламных целесообразно вынести в отдельные файлы. В общем, как и всегда, истина где-то посредине. Просто при создании шаблона для своего сайта необходимо продумать оптимальную стратегию разделения кода страницы на отдельные фрагменты. Рискну предложить следующий критерий для выделения фрагментов кода, выносимых в отдельные файлы:

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

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

При разработке шаблона следует иметь в виду, что рано или поздно его придется переделывать. Дело в том, что со временем меняются версии HTML и CSS, обнаруживаются какие-то другие изменения в технологии создания вебсайтов. Например, текущая страница была создана в кодировке cp-1251, а сейчас происходит повсеместный переход на универсальную кодировку utf-8. Так что рано или поздно, приходится дорабатывать или заменять шаблоны страниц. Трудно предусмотреть, какие именно новации будут введены в будущем, но все же при разработке шаблона следует продумать и возможности его последующей модификации (уж насколько это удастся, покажет только время).

Шаблоны в системах управления сайтом

Рассмотренные в предыдущих разделах HTML-шаблоны все еще не идеальны. Как было сказано выше, для создания дополнительной страницы сайта вы должны скопировать шаблон под новым именем, вставить в него вызовы нужных файлов с подключаемыми блоками кода и контентом страницы, настроить ссылки на новую страницу с других страниц (включить новую страницу в структуру сайта). Хотелось бы минимизировать усилия по добавлению новых страниц на сайт. Хотя бы уйти от необходимости копировать шаблон для создания новой страницы. Идея заключается в том, чтобы использовать один и тот же шаблон для всех (группы) страниц сайта, а имена тех файлов, которые должны вставляться в шаблон, определять, анализируя URL вызываемой страницы.

Когда посетитель через веб-браузер запрашивает страницу сайта, нужно выполнить следующие действия:

  • извлечь из запроса указание на запрашиваемую страницу;
  • просмотреть шаблон страницы;
  • найти в нем имена переменных, значения которых должны задавать имена подключаемых файлов (поскольку один шаблон используется для вызова разных страниц, то вместо фиксированных имен подключаемых файлов должны быть указаны переменные) и на основе имени запрашиваемой страницы сформировать значения этих переменных;
  • открыть соответствующие внешние файлы;
  • добавить полученный HTML-код к статической части шаблона;
  • послать сфорированную таким образом страницу в формате HTML браузеру посетителя, который отображает ее на экране.

Очевидно, что для такого механизма формирования отдаваемой посетителю страницы уже нужно какое-то программное обеспечение, простого SSI тут недостаточно, поскольку нужно не просто вставлять в шаблон файлы с заранее известными номерами, а "вычислять" имена нужных файлов (возможно и не одного) на основе URL. Если содержимое подключаемого файла фиксировано и не зависит от формируемой страницы (например, это имеет место для блока счетчиков, код которых обычно одинаков для всех страниц), то вычислений не требуется. Но блоками фиксированного кода ограничиться невозможно: кроме собственно контента от страницы к странице меняется, например, содержание тегов <title>, <meta content> <meta description>.

Таким образом, для использования такого рода шаблонов на хостинге должно быть разрешено использовать один из языков программирования, например, PHP или PERL. Фактически вы должны уже создать не просто шаблон страницы, а разработать собственную систему управления содержимым сайта (CMS). Причем надо предусмотреть не только вызов и подключение нужных блоков, но и продумать вопросы безопасности. Например, поскольку вы предоставляете возможность вызывать через ваш шаблон другие файлы, злоумышленник может задать в URL имя файла, выполняющего далеко не те действия, которые вы предусматривали. Вплоть до вызова исполняемого файла (скрипта) с постороннего сайта. Поэтому задача становится гораздо более сложной, чем создание шаблона, из которого путем копирования формируется новая страница. И если вы не владеете одним из языков программирования для веб, например, PHP, то вряд ли стоит браться за разработку такого шаблона. Лучше использовать одну из существующих CMS, благо даже свободно распространяемые системы типа Друпала, ВордПресс или Джумла, не уступают по функциональности платным разработкам.

Если вы все же хотите разобраться с задачей создания таких шаблонов досконально, рекомендую развернуть любую CMS и проанализировать ее код. А я перейду к рассмотрению такого важного элемента страницы (и, соответственно, любого шаблона страницы), как заголовок.

Полезные ресурсы

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100