ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Шаблон в Dreamweaver Всё о шаблонах в dreamweaver

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

1.

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

Начнём с того, что разберем отличие шаблона Dreamweaver о простой страницы html.  Шаблон в Dreamweaver имеет разрешение 

.dwt

Dwt – это Dreamweaver Template.

И второе отличие – у шаблона есть редактируемая область!

Другими словами, мы можем взять любую страницу, абсолютно любую, и сделать из неё шаблон Dreamweaver!

И когда я слышу такое выражение, что нужно скачать шаблон для Dreamweaver – это звучит глупо! Хотя раньше, надо признать, что в старой версии программы, внутри были собственные, примитивные шаблоны, но на них без слез невозможно было смотреть!

Мы немного отвлеклись!

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

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

2.

Скачать шаблоны для  Dreamweaver.

Мы уже говорили о том, что это глупое выражение, но ведь мы должны как-то оптимизировать свою страницу и под этот поисковый запрос…

Данные шаблоны для Dreamweaver представляют собой обыкновенные страницы html, из которых мы и должны сделать шаблон в  Dreamweaver.

Шаблоны можно скачать здесь.

Если не получилось скачать, то см. здесь.

Шаблонов порядка 680 штук, думаю, что вы найдете что подходящее для себя!

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

Открываем эту страницу в программе.

3.

Как сделать редактируемую область в программе Dreamweaver?

Что такое редактируемая область - это та часть страницы, в которой будет уникальное содержание. Таких уникальных мест должно быть, как минимум 2:, где должен быть уникальный текст страницы и вторая - это там,  где прописываются мета теги.

Открыли страницу в дизайне.

Шаблон в Dreamweaver И в том месте, где будет текст нажимаем ПКМ – шаблоны – создать редактируемую область.
Шаблон в Dreamweaver

Далее. вам сообщат, что вашу страницу автоматически преобразуют в шаблон. Жмем ок.

Шаблон в Dreamweaver

Далее нам нужно назвать редактируемую область.

Шаблон в Dreamweaver Поскольку я показываю на пустой странице, то естественно, что редактируемая область у меня прыгнула в левый верхний угол, а у вас она должна быть там, где вы нажимали ПКМ, ну и я никак не называл свою область и вот, что у меня получилось!

Та часть, которая находится в зеленой рамке, и есть редактируемая область!

Шаблон в Dreamweaver

Если мы посмотрим код – ctrl + Ё, то увидим вот такой код:

Сторчка 9:

Начало редактируемой области.

<!-- TemplateBeginEditable name="EditRegion1" -->

Строка 10 – туда будет помещаться уникальный текст!

Строка 11 :

Конец редактируемой области.

<!-- TemplateEndEditable -->

Шаблон в Dreamweaver Внимание!

Еще мы видим, что наши мета теги –строчка №5,  не получили автоматически редактируемую область, не знаю почему, и нам обязательно нужно это исправить!

Нужно их также обернуть в редактируемую область, как это показано на нижнем скрине:

Те. Добавляем в строчку 5:

Начало редактируемой области для мета тегов.

<!-- TemplateBeginEditable name="doctitle" -->

Далее идут мета теги, о них надо делать отдельную страницу.

И конец редактируемой области для тегов:

Строчка 9:

<!-- TemplateEndEditable -->

Шаблон в Dreamweaver

Сохраняем как шаблон.

4.

Как сохранить страницу как шаблон Dreamweaver?

Идем в файл – сохранить как шаблон.

Шаблон в Dreamweaver

В новом окне – веб сайт – тот который вы сделали. У меня для примера – сайт без имени 2. Это первый шаблон – поэтому  у нас нет шаблонов. Сохранить как- выбираем название. Сохранить.

Шаблон в Dreamweaver

Жмем да.

Шаблон в Dreamweaver

Всё!

Наш шаблон Dreamweaver готов к использованию!

Вот, что у меня получилось – название сайта, папка с шаблонами, сам шаблон.

Шаблон в Dreamweaver

Если у вас нет кнопки справа – файлы идем в меню – окна файлы.

Вы думаете все!? Нет еще не всё!

Теперь нам нужно сделать следующий шаг.

5.

Как прикрепить страницу к шаблону Dreamweaver.

Мы чуть выше сделали шаблон, теперь научимся его использовать!

Создаем страницу index.html – открываем её.

Идем в изменить – шаблоны – применить шаблон к странице.

Шаблон в Dreamweaver

Тут есть одна фишка о которой вы не найдете нигде!

Для быстрого прикрепления страниц к шаблону создаёте сочетание клавиш! И вам не придется каждый раз идти  по этому длинному пути.

И теперь давайте посмотрим, на код нашей первой страницы, которая прикреплена к нашему шаблону.

Здесь мы видим, что доступные места для редактирования –это тем места, которые мы раннее обозначили в шаблоне. 7,8,9,16 строчки… а все остальное будет как в вашем шаблоне.

Шаблон в Dreamweaver

Теперь давайте изменим шаблон, чтобы посмотреть, что будет происходить!

Напишем часть текста, для проверки работы шаблона ниже редактируемой области. И нажимаем сохранить.

Шаблон в Dreamweaver

Нас спрашивают обновить файлы шаблонов!? Конечно! Ведь мы для этого и делали! Мы здесь видим ту единственную, пока, страницу, которую прикрепили к нашему шаблону!

Шаблон в Dreamweaver

Далее мы видим, что файлов обновлено - 1.

Шаблон в Dreamweaver

Теперь давайте откроем нашу страницу, которая обновлена.

И видим, что на нашей странице - index.html-  тоже появилась та строчка, что мы внесли в шаблон. И обращаю ваше внимание, что данный текст вы не сможет отредактировать, поскольку он не размещен в редактируемой области страницы – он и подсвечивается по-другому, в отличии от редактируемой области.

Шаблон в Dreamweaver

Страница получилась довольно большой! Но думаю, что изложенный материал будет вам полезен!

Делайте свой сайт и получайте от этого удовольствие!

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
Создать страницу в dreamweaverСделать страницу в dreamweaverСохранить страницу в dreamweaverНастроить страницу в dreamweaverСохранить страницу в dreamweaverСамому сделать страницу в dreamweaver

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019