Как создать шаблон в Dreamweaver

dreamweaver

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

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

Сам шаблон представляет собой файл в формате .dwt и хранится в папке Templates локальной копии сайта. Шаблон включает неизменные области, редактируемые и добавляемые по выбору. Лучше всего назначение областей шаблона продемонстрировать схематично.

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

Некоторые страницы отличаются от других наличием дополнительной области, а белым цветом обозначено неизменное содержимое на всём сайте:

Как создать шаблон в Dreamweaver

Создание областей шаблона

Сделать шаблон можно из любой готовой веб-страницы, открыв её в Dreamweaver. Для этого нужно создать хотя бы одну Редактируемую область. Устанавливаем курсор в нужном месте страницы и идём: «Вставка - Объекты шаблона» (Ctrl+Alt+V):

области

Присваиваем области любое имя и жмём OK. На месте вставки видим следующий код из служебных тегов программы, между которыми и находится редактируемая область, которую остаётся наполнить содержимым:

Редактируемая

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

Точно так создаётся Дополнительная область, но есть отличие. Кроме названия нужно указать, будет ли область отображаться в создаваемых страницах по умолчанию: true - да, false - нет.

Дополнительная

Ещё отличие дополнительной области: в теге страницы head создаётся одноимённый служебный тег head, куда добавляется список дополнительных областей:

код

Значения true и false можно поменять в шаблоне вручную. А для вновь создаваемых страниц задать отображение каждой дополнительной области можно: «Изменить - Свойства шаблона», установив галочку или наоборот убрать.

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

Последнее, существуют ещё два типа области: Изменяемая дополнительная и Повторяющаяся. Последнюю использовать не стоит, если только для одинаковых значений в ячейках таблицы.

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

Когда шаблон готов, создать на его основе страницу не представляет труда. Заходим в: «Файл - Создать», выбираем нужный сайт и шаблон:

создание

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

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

Но для этого нужно, чтобы html-код меню был разным для каждого раздела, а сама область меню была бы не изменяемая. В противном случае, при добавлении новых пунктов меню, понадобится редактировать код на всех страницах вручную. Как быть?

Нам понадобится создать ещё три вложенных шаблона для каждого из разделов, кроме основного. Как создать вложенный шаблон? Создайте страницу из основного шаблона, далее: «Файл - Сохранить как шаблон». При этом область меню в основном шаблоне нужно сделать редактируемой.

А в шаблонах разделов делаем привязки стилей css к соответствующему пункту меню. Далее, важно: добавьте в любое место этой области такой код без пробелов: @@ ("") @@. Это сделает область меню неизменяемой для всех страниц, основанных на таком шаблоне, т.е. всего раздела.

меню для разделов

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

Если, вдобавок, требуется выделять пункты вертикального меню для каждого подраздела, то шаблонов может быть гораздо больше. Что касается именно понятной визуализации элементов навигации, то её можно просто заменить «хлебными крошками», как на webmastersam.ru.

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

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

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