Создание шаблонов в dreamweaver
Создавайте, открывайте, редактируйте, сохраняйте и восстанавливайте файлы в Dreamweaver. Создавайте шаблоны и открывайте связанные файлы.
Dreamweaver предлагает гибкую среду для работы с различными веб-документами. Помимо HTML-документов, можно создавать и открывать различные текстовые документы, например JavaScript, PHP и таблицы каскадных стилей (CSS).
Dreamweaver предоставляет несколько способов создания нового документа. Можно создать следующие документы:
новый пустой документ или шаблон;
документ на основе макета страницы, поставляемого с Dreamweaver, в том числе более тридцати макетов на основе CSS;
документ, созданный по одному из существующих шаблонов.
Можно также задать установки документа. Например, если обычно используется один тип документа, можно для новых страниц задать этот тип в качестве типа документа по умолчанию.
Можно легко задавать такие свойства документа, как мета теги, заголовок документа, цвет фона, и некоторые другие свойства страницы в представлении «Дизайн» или «Код».
Dreamweaver позволяет работать с различными типами файлов. Исходным форматом рабочих файлов является HTML. HTML-файлы — или файлы языка гипертекстовой разметки — содержат язык на основе тегов, который используется для отображения веб-страницы в браузере. HTML-файлы сохраняются с расширением .html или .htm. По умолчанию Dreamweaver сохраняет файлы с расширением .html.
В Dreamweaver можно создавать и редактировать веб-страницы на основе HTML5. Также доступны макеты шаблонов для создания HTML5-страниц с нуля.
Ниже перечислены другие стандартные типы файлов, которые доступны для работы в Dreamweaver.
Файлы каскадных таблиц стилей имеют расширение .css. Эти файлы используются для форматирования HTML-содержимого и управляют расположением различных элементов страницы.
Файлы формата графического обмена (GIF) имеют расширение .jpg. Формат GIF — это используемый в Интернете популярный графический формат для создания рисованного изображения, логотипов, изображений с прозрачными областями и анимации. Изображения в формате GIF содержат не более 256 цветов.
Файлы формата JPEG (по имени объединенной группы экспертов по машинной обработке фотографических изображений) имеют расширение .jpg и обычно используются для работы с фотографиями или высококачественными цветовыми изображениями. Формат JPEG наилучшим образом подходит для цифровых или сканированных изображений, изображений, использующих текстуры, изображений с плавными переходами цвета и любых изображений, которым необходимо более 256 цветов.
Файлы в формате расширяемого языка разметки имеют расширение .xml. Файлы содержат данные в исходной форме, которые подлежат форматированию с использованием языка XSL (расширяемого языка стилей).
В диалоговом окне «Создать документ» отображаются все поддерживаемые типы файлов документов, включая PHP, XML и SVG.
Из этого диалогового окна можно также работать с предустановленными макетами, шаблонами и платформами.
Все представленные макеты шаблонов разработаны для поддержки адаптивных веб-сайтов и совместимы со стандартом HTML-5.
Можно создать страницу, которая содержит предварительно разработанный макет CSS, или создать пустую страницу, а затем собственный макет.
Выберите Файл > Создать .
В категории Создать документ выберите тип создаваемой страницы в столбце Тип документа . Например, для создания простой страницы HTML выберите HTML .
Выберите тип документа из всплывающего меню Тип документа . В большинстве случаев следует использовать тип по умолчанию — HTML5.
Выберите дополнительные параметры в зависимости от типа страницы, которую необходимо создать.
- Нет. Выберите этот вариант, если нужно создать простую веб-страницу без использования какой-либо платформы.
- Bootstrap. Шаблоны Bootstrap представляют собой заранее определенные макеты, использующие платформу Bootstrap. Выберите этот вариант, если необходимо создать адаптивную веб-страницу с помощью платформы Bootstrap. По умолчанию создается документ Bootstrap 4.0.0.
Если планируется создание адаптивных веб-страниц, выберите платформу Bootstrap.
Если не используется платформа:
- Название документа. Если ввести название документа в этом поле, то Dreamweaver автоматически добавит его в раздел документа.
- Тип документа. Выберите тип документа из всплывающего меню «Тип документа». В большинстве случаев следует использовать тип по умолчанию — HTML5.
Выбор одного из определений типа документа XHTML в меню «Тип документа» (DTD) делает страницу совместимой с XHTML. Например, можно сделать HTML-документ совместимым с XHTML, выбрав в меню тип «Переходный XHTML 1.0» или «Строгий XHTML 1.0». XHTML (Расширяемый язык гипертекстовой разметки) представляет собой переработку HTML, используемую в качестве приложения XML. Применение XHTML предоставляет преимущества XML, одновременно обеспечивая обратную и будущую совместимость веб-документов.
- Присоединить CSS. Присоединить существующий макет CSS к странице. Для этого щелкните значок «Присоединить таблицу стилей» рядом с областью «Присоединить CSS-файл» и выберите существующую таблицу стилей CSS.
Если необходимо создать новую страницу на основе композиции Photoshop, выберите «Использовать Extract» для создания страницы из композиций Photoshop.
При выборе этого варианта откроется панель Extract, где можно загрузить файл PSD и начать создание страницы HTML.
Если необходимо создавать адаптивные веб-страницы с помощью платформы Bootstrap:
- Bootstrap CSS. Возможность создать новый CSS-файл Bootstrap или использовать существующий файл CSS. Если вы используете существующий файл CSS, укажите путь к файлу. Убедитесь, что файл CSS находится в пределах корневой папки сайта.
- Присоединить CSS. Присоединить существующий макет CSS к странице. Для этого щелкните значок «Присоединить таблицу стилей» рядом с областью «Присоединить CSS-файл» и выберите существующую таблицу стилей CSS.
- Включить предварительно подготовленный макет. Выберите этот вариант, если у вас уже есть макет. Щелкните «Настройка», чтобы изменить значения сетки и точки останова.
Если необходимо создать новую страницу на основе композиции Photoshop, выберите «Использовать Extract» для создания страницы из композиций Photoshop.
При выборе этого варианта откроется панель Extract, где можно загрузить файл PSD и начать создание страницы HTML.
Сохраните новый документ ( Файл > Сохранить ).
Рекомендуется сохранять файл в месте размещения сайта Dreamweaver.
В поле Имя файла введите имя файла.
Не следует использовать пробелы и специальные символы в наименованиях файлов и папок, а также начинать имя файла с цифры. В частности, не используйте специальные символы (такие как é, ç или ¥), а также знаки пунктуации (такие как двоеточие, косая черта или точка) в именах файлов, которые планируется поместить на удаленный сервер. Многие серверы заменяют данные символы при загрузке файла, что приводит к повреждению ссылок на файл.
Можно использовать диалоговое окно Создать документ для создания шаблонов Dreamweaver. По умолчанию шаблоны сохраняются в папке Templates сайта.
Нельзя создать шаблон без предварительного создания сайта. Дополнительные сведения о сайтах, а также об их создании см. в разделе О сайтах Dreamweaver.
Выберите Файл > Создать .
В диалоговом окне Создать документ выберите категорию Шаблоны сайта .
Выберите тип документа из всплывающего меню «Тип документа». В большинстве случаев следует использовать тип по умолчанию, Переходный XHTML 1.0 .
Выбор одного из определений типа документа XHTML в меню «Тип документа» (DTD) делает страницу совместимой с XHTML. Например, можно сделать HTML-документ совместимым с XHTML, выбрав в меню тип «Переходный XHTML 1.0» или «Строгий XHTML 1.0». XHTML (Расширяемый язык гипертекстовой разметки) представляет собой переработку HTML, используемую в качестве приложения XML. Применение XHTML предоставляет преимущества XML, одновременно обеспечивая обратную и будущую совместимость веб-документов.
Выберите «Обновлять страницу при изменении шаблона», если необходимо включить автоматическое обновление страницы при изменении шаблона.
В поле Имя файла введите имя нового шаблона. Нет необходимости добавлять расширение файла к имени шаблона. При нажатии кнопки Сохранить новому шаблону присваивается расширение .dwt и шаблон сохраняется в папке Templates данного сайта.
Не следует использовать пробелы и специальные символы в наименованиях файлов и папок, а также начинать имя файла с цифры. В частности, не используйте специальные символы (такие как é, ç или ¥), а также знаки пунктуации (такие как двоеточие, косая черта или точка) в именах файлов, которые планируется поместить на удаленный сервер. Многие серверы заменяют данные символы при загрузке файла, что приводит к повреждению ссылок на файл.
Можно выбрать, просмотреть и создать новый документ, используя один из существующих шаблонов или начальные шаблоны Dreamweaver. Можно использовать диалоговое окно Создать документ , чтобы выбрать шаблон из любого сайта, определенного средствами Dreamweaver, или воспользоваться панелью Ресурсы . чтобы создать новый документ по существующему шаблону.
Создание документа по шаблону из панели «Ресурсы»
Откройте панель Ресурсы (меню Окно > Ресурсы ), если она еще не открыта.
На панели Ресурсы щелкните значок «Шаблоны» слева, чтобы просмотреть список шаблонов в текущем сайте.
Если шаблон, который надо применить, только что был создан, может понадобиться нажать кнопку Обновить , чтобы увидеть его.
Щелкните по шаблону, который необходимо применить, правой кнопкой мыши (Windows) или щелкните по нему при нажатой клавише Control (Macintosh), а затем выберите Создать из шаблона .
Документ откроется в области Окно документа .
В состав Dreamweaver включено несколько разработанных профессионалами начальных файлов для мобильных приложений. Можно использовать файлы образца в качестве отправной точки для разработки страниц своего сайта.
При создании документа на основе начального шаблона Dreamweaver создает копию файла, поэтому файлы начальных шаблонов не будут перезаписаны.
Можно предварительно просмотреть файл образца и прочитать краткое описание элементов оформления страницы в диалоговом окне Создать документ .
Выберите Файл > Создать .
В диалоговом окне Создать документ выберите категорию «Начальные шаблоны».
Можно просмотреть информацию об образце страницы и ее внешний вид на правой стороне панели при выборе различных параметров.
Новый документ и все связанные с ним файлы открываются в окне Документ .
Сохраните документ ( Файл > Сохранить ).
В Dreamweaver можно создавать файлы с кодом для ряда языков программирования.
Дополнительные сведения о поддержке программирования в Dreamweaver см. в разделе О программировании в Dreamweaver.
Чтобы создать новый файл с кодом в Dreamweaver, выполните следующие действия.
Выберите Файл > Создать документ .
В меню «Тип документа» выберите файл с кодом, который нужно создать.
Выберите тип документа, который нужно создать, в столбце Тип документа (например, файл PHP).
В зависимости от выбранного типа файлов при создании документа будут доступны дополнительные параметры.
Например, при создании файла PHP можно выбрать параметры DocType и некоторые параметры CSS.
Можно сохранить документ под текущим именем и в текущем расположении или создать его копию с другим именем и в другом расположении.
При именовании файлов избегайте использования пробелов и специальных символов в именах файлов и папок. В частности, не используйте специальные символы (такие как é, ç или ¥), а также знаки пунктуации (такие как двоеточие, косая черта или точка) в именах файлов, которые планируется поместить на удаленный сервер. Многие серверы заменяют данные символы при загрузке файла, что приводит к повреждению ссылок на файл. Также имя файла не следует начинать с цифры.
Сохранение всех открытых документов
Выберите меню Файл > Сохранить все .
Если имеются несохраненные документы, для каждого из них отображается диалоговое окно Сохранить как .
В открывшемся диалоговом окне укажите папку, в которой следует сохранить файл.
В текстовом поле Имя файла введите имя для файла и нажмите кнопку Сохранить .
К ак создать и обновить страницы сайта
Когда шаблон готов, создать на его основе страницу не представляет труда. Заходим в: «Файл - Создать», выбираем нужный сайт и шаблон:
Для обновления необходимо просто внести изменения в шаблон и сохранить. Программа сама предложит обновить страницы, созданные на его основе, и покажет результат. Обновятся и вложенные шаблоны, о них читайте дальше.
Одним из важнейших внутренних факторов продвижения является понятная структура и удобная навигация сайта. Как выделить элемент меню, указывающий на текущий раздел (на нашей схеме: Раздел 1)? Конечно, используя стили css.
Но для этого нужно, чтобы html-код меню был разным для каждого раздела, а сама область меню была бы не изменяемая. В противном случае, при добавлении новых пунктов меню, понадобится редактировать код на всех страницах вручную. Как быть?
Нам понадобится создать ещё три вложенных шаблона для каждого из разделов, кроме основного. Как создать вложенный шаблон? Создайте страницу из основного шаблона, далее: «Файл - Сохранить как шаблон». При этом область меню в основном шаблоне нужно сделать редактируемой.
А в шаблонах разделов делаем привязки стилей css к соответствующему пункту меню. Далее, важно: добавьте в любое место этой области такой код без пробелов: @@ ("") @@ . Это сделает область меню неизменяемой для всех страниц, основанных на таком шаблоне, т.е. всего раздела.
Теперь во всех страницах, основанных на шаблонах разделов, будет выделяться соответствующий элемент меню, указывающий на текущий раздел. Вложенные шаблоны для отдельных разделов целесообразно делать, если они содержат и другие неодинаковые элементы страницы.
И, во всяком случае, нужно стараться, чтобы такие блоки, как реклама РСЯ или кнопки соцсетей, были бы неизменными областями основного шаблона и редактировались только с одного раза.
Не забудьте: для создания шаблона в Dreamweaver необходимо, чтобы программа знала, что имеет дело с веб-сайтом. Зайдите: «Веб-сайт - Новый сайт», в этом окне задайте ему имя и укажите локальную папку его размещения. Подробнее смотрите об этом в материале: Загрузка сайта на сервер.
Если хорошо продумать структуру сайта и грамотно создать шаблоны Dreamweaver, то это будет экономить огромное количество времени и труда в процессе его обновления и модернизации.
Узнайте, как использовать шаблоны Dreamweaver для разработки «фиксированной» макета страницы и создавайте на основе шаблона документы, наследующие его макет страницы.
Шаблон — это особый тип документа, который используется для разработки «фиксированной» макета страницы. На основе шаблона можно создавать документы, наследующие его макет страницы. При разработке шаблона можно указать в качестве доступного для редактирования то содержимое, которое пользователь сможет редактировать в документе, созданном на основе шаблона. Шаблоны позволяют авторам управлять правами на редактирование отдельных элементов страницы, которые предоставляются пользователям шаблона (писателям, художникам или другим веб-разработчикам). Есть несколько типов областей шаблона, которые автор может включить в документ.
Шаблоны позволяют управлять большой областью разработки дизайна и многократно использовать готовые макеты. Чтобы многократно использовать отдельные элементы оформления, например информацию об авторских правах сайта или логотип, создайте элементы библиотеки.
С помощью шаблонов можно изменять несколько страниц одновременно. Созданный на основе шаблона документ остается связанным с этим шаблоном (если документ не отсоединен позднее). Можно изменить шаблон и немедленно обновить оформление всех документов на основе этого шаблона.
При сохранении документа в качестве шаблона большинство его областей блокируется. Путем добавления в шаблон редактируемых областей или редактируемых параметров его автор может определить, какие области документа на основе шаблона будут доступны для редактирования.
При создании шаблона можно вносить изменения в редактируемые и заблокированные области. Однако пользователь шаблона может вносить изменения только в редактируемые области документа на основе шаблона. Блокированные области изменять нельзя.
Есть четыре типа областей шаблона.
Редактируемая область. Незаблокированная область документа на основе шаблона — раздел, доступный для редактирования пользователю шаблона. Автор шаблона может сделать любую область шаблона доступной для редактирования. Чтобы шаблон был эффективен, он должен содержать хотя бы одну редактируемую область. В противном случае страницы на основе шаблона нельзя будет редактировать. Дополнительные сведения о редактируемых областях см. в разделе Создание редактируемых областей в шаблонах.
Повторяющаяся область. Раздел макета документа, настроенный таким образом, чтобы пользователь шаблона мог при необходимости добавлять или удалять копии повторяющейся области в документе на основе шаблона. Например, повторяющейся можно сделать строку таблицы. Повторяющиеся разделы доступны для редактирования, поэтому пользователь шаблона может редактировать содержимое повторяющегося элемента, в то время как оформлением управляет автор шаблона.
Есть 2 типа повторяющихся областей, которые можно вставлять в шаблон: повторяющаяся область и повторяющаяся таблица. О том, как работать с повторяющимися областями, см. в разделе Создание повторяющихся областей и таблиц в Dreamweaver.
Дополнительная область. Раздел шаблона, в котором находится содержимое, например текст или изображение, которые могут отображаться или не отображаться в документе. Пользователь может управлять отображением содержимого страницы на основе шаблона. Дополнительные сведения см. в разделе Дополнительная область.
Редактируемый атрибут тега. Позволяет разблокировать атрибут тега в шаблоне, чтобы атрибут можно было редактировать на странице на основе шаблона. Например, можно заблокировать отображение отдельных изображений в документе, но разрешить пользователю шаблона устанавливать выравнивание по левому краю, правому или центру. Дополнительные сведения см. в разделе Определение редактируемых атрибутов тега в Dreamweaver.
Когда файл шаблона создается путем сохранения существующей страницы в качестве шаблона, новый шаблон в папке Templates и все ссылки в файле обновляются таким образом, чтобы пути относительно документов были верны. Позже, при сохранении документа на основе этого шаблона, все ссылки относительно документов обновляются снова и указывают на правильные файлы.
Когда в файл шаблона добавляется новая ссылка относительно документа, существует вероятность указания ошибочного имени пути, если оно вводится в текстовое поле ссылки в инспекторе свойств. Верный путь в файле шаблона — это путь от папки Templates к связанному документу, а не от папки документа, основанного на шаблоне, к связанному документу. Чтобы при создании ссылок в шаблонах указывались только правильные существующие пути для ссылок, используйте значок папки или значок «Указать файл» в инспекторе свойств.
Некоторые серверные сценарии добавляются в самом начале или конце документа (перед тегом или после тега ). Такие сценарии требуют специальной обработки в шаблонах и документах на основе шаблонов. Обычно, если изменения в коде сценария необходимо внести перед тегом или после тега в шаблоне, то эти изменения не копируются в документ на основе шаблона. Это может вызвать ошибки сервера, если другие серверные сценарии в пределах основной части шаблона зависят от сценариев, которые не скопированы. Если в сценарии перед тегом или после тега в шаблоне вносятся изменения, то появляется предупреждение.
Чтобы избежать данной проблемы, можно добавить в раздел head шаблона следующий код.
Если шаблон содержит этот код, то изменения в сценарии перед тегом или после тега копируются в документ на основе шаблона. Однако эти сценарии в документах на основе шаблонов станут недоступными для редактирования. Таким образом, эти сценарии можно редактировать либо в шаблоне, либо в документах на его основе, но не одновременно в шаблоне и документах.
Параметры шаблона содержат значения для управления содержимым в документах на основе шаблона. Параметры шаблона используются для дополнительных областей или редактируемых атрибутов тега, либо для установки значений, которые необходимо передать вложенному документу. Выберите для каждого параметра имя, тип данных и значение по умолчанию. Каждый параметр должен иметь уникальное имя (оно обрабатывается с учетом регистра). Значения должны принадлежать одному из 5 допустимых типов данных: text, boolean, color, URL или number.
Параметры шаблона передаются документу в качестве параметров экземпляра. В большинстве случаев пользователь шаблона может редактировать значение параметра по умолчанию, чтобы настроить отображение содержимого в документе на основе шаблона. В других случаях автор шаблона может определять, что будет отображаться в документе в зависимости от значения выражения шаблона.
Выражения шаблонов — это инструкции, которые вычисляют или обрабатывают значение.
Выражение позволяет сохранять значение и отображать его в документе. Например, выражение может быть просто значением параметра, например @@(Param)@@ , либо достаточно сложным, чтобы вычислить значения, которые чередуют цвет фона в строке таблицы, например @@((_index & 1) ? red : blue)@@ .
Кроме того, можно определить выражения для условного оператора if и вложенных условных операторов if. Если выражение используется в условной инструкции, то Dreamweaver обрабатывает его как true или false . Если условие имеет значение «true», то дополнительная область в документе на основе шаблона отображается. В противном случае она не отображается.
Выражения можно определить в представлении «Код» или диалоговом окне «Дополнительная область» во время добавления дополнительной области.
Выражения шаблона можно описать в представлении «Код» 2 способами: с помощью комментария или @@(your expression)@@ . При добавлении выражения в код шаблона в представлении «Дизайн» отображается маркер выражения. При применении шаблона Dreamweaver обрабатывает выражение и отображает значение в документе на основе шаблона.
Язык выражений шаблонов — это небольшое подмножество языка JavaScript, использующее синтаксис JavaScript и правила приоритета. Для написания выражений, подобных приведенному ниже, следует использовать операторы JavaScript:
Поддерживаются следующие функции и операторы.
Числовые литералы, строковые литералы (только в двойных кавычках), литералы Boolean ( true или false ).
Ссылка на переменную (см. список определенных переменных ниже в этом разделе).
Ссылка на поле (оператор «dot»).
Используются следующие типы данных: Boolean, 64-битное число IEEE с плавающей точкой, string и object. Шаблоны Dreamweaver не поддерживают использование в JavaScript типов «null» или «undefined». Кроме того, не разрешается неявное преобразование скалярных типов в объекты. Таким образом, выражение "abc".length вместо значения 3 выдаст ошибку.
Доступны только те объекты, которые описаны объектной моделью выражений. Определены следующие переменные.
Содержит данные шаблона на уровне документа с полем для каждого параметра в шаблоне.
Определен только для выражений, которые отображаются внутри повторяющейся области. Предоставляет встроенные сведения об области.
Числовой индекс (от 0) для текущей записи.
Общее количество записей в данной повторяющейся области.
True, если текущая запись является первой в ее повторяющейся области.
True, если текущая запись является последней в ее повторяющейся области.
_prevRecord
Объект _repeat для предыдущей записи. Обращение к этому свойству для первой записи в области является ошибкой.
_nextRecord
Объект _repeat для следующей записи. Обращение к этому свойству для последней записи в области является ошибкой.
Во вложенной повторяющейся области это свойство передает объект _repeat для окружающей (внешней) области повтора. Обращение к этому свойству вне вложенной повторяющейся области является ошибкой.
Во время обработки выражения все поля объектов _document и _repeat не явно доступны. Например, для доступа к параметру заголовка документа можно ввести title вместо _document.title .
В случаях конфликта полей поля объекта _repeat имеют приоритет над полями объекта _document. Поэтому нет необходимости в явных ссылках на _document или _repeat, за исключением случаев, когда _document в повторяющейся области может быть необходим параметрам документа, которые скрыты параметрами повторяющейся области.
Если используются вложенные повторяющиеся области, то неявно доступными будут только поля наиболее глубоко вложенных повторяющихся областей. На внешние области требуется явная ссылка с помощью свойства _parent.
Выражения шаблона можно определить для условного оператора if и вложенных условных операторов if. В этом примере показано определение параметра с именем «Отдел», задание начального значения и определение вложенных условных операторов If, управляющих отображением логотипа.
Ниже приведен пример кода, который можно добавить в раздел head шаблона.
Следующий условный оператор проверяет значение, связанное с параметром Dept . Если условие истинно или выполняется, то отображается соответствующее изображение.
При создании документа на основе шаблона ему автоматически передаются параметры шаблона. Пользователь шаблона определяет отображаемое изображение.
С оздание областей шаблона
Сделать шаблон можно из любой готовой веб-страницы, открыв её в Dreamweaver. Для этого нужно создать хотя бы одну Редактируемую область. Устанавливаем курсор в нужном месте страницы и идём: «Вставка - Объекты шаблона» ( Ctrl+Alt+V ):
Присваиваем области любое имя и жмём OK. На месте вставки видим следующий код из служебных тегов программы, между которыми и находится редактируемая область, которую остаётся наполнить содержимым:
Точно так создаётся Дополнительная область, но есть отличие. Кроме названия нужно указать, будет ли область отображаться в создаваемых страницах по умолчанию: true - да, false - нет.
Ещё отличие дополнительной области: в теге страницы head создаётся одноимённый служебный тег head, куда добавляется список дополнительных областей:
Значения true и false можно поменять в шаблоне вручную. А для вновь создаваемых страниц задать отображение каждой дополнительной области можно: «Изменить - Свойства шаблона», установив галочку или наоборот убрать.
Кроме того, у всех шаблонов и созданных из них страниц тег head будет содержать служебный тег doctitle, как редактируемый. Туда нужно поместить мета-теги и важный тег title, которые должны быть уникальными для каждой страницы.
Последнее, существуют ещё два типа области: Изменяемая дополнительная и Повторяющаяся. Последнюю использовать не стоит, если только для одинаковых значений в ячейках таблицы.
Создание документа по шаблону
Выберите Файл > Создать .
В столбце Веб-сайт выберите сайт Dreamweaver , который содержит необходимый шаблон, а затем выберите шаблон из списка справа.
Снимите флажок Обновлять страницу при изменении шаблона , если не хотите обновлять данную страницу каждый раз, когда вносите изменения в базовый шаблон.
Щелкните Получить дополнительное содержимое. , чтобы открыть Dreamweaver Exchange, где можно получить больше содержимого для оформления страницы.
Сохранение документа
- Чтобы перезаписать текущую версию на диске и сохранить внесенные изменения, выберите меню Файл > Сохранить .
- Чтобы сохранить файл в другой папке или с другим именем, выберите меню Файл > Сохранить как .
В текстовом поле Имя файла введите имя для файла.
Возврат к последней сохраненной версии документа
Выберите меню Файл > Вернуться .
Появится диалоговое окно с запросом отклонить изменения и вернуться к предыдущей сохраненной версии.
Чтобы вернуться к предыдущей версии, нажмите кнопку Да ; чтобы сохранить изменения, нажмите кнопку Нет .
Если сохранить документ, а затем выйти из Dreamweaver, после перезапуска Dreamweaver вернуться к предыдущей версии документа будет невозможно.
Если большинство страниц сайта составляют файлы одного типа (например, HTML, PHP или JavaScript), можно задать установки для автоматического создания новых документов с указанным типом файла.
Выберите меню Правка > Настройки (Windows) или Dreamweaver > Настройки (Macintosh).
Также можно нажать кнопку Настройки в диалоговом окне Создать документ , чтобы задать параметры для нового документа при его создании.
Выберите Создать документ из списка категорий слева.
Задайте или измените установки, где необходимо, и нажмите кнопку ОК , чтобы сохранить их.
Документ по умолчанию
Выберите тип документа, который будет использован для создаваемых страниц.
Расширение по умолчанию
Укажите предпочтительное расширение файла (.htm или .html) для создаваемых HTML-страниц.
Примечание. Данный параметр неактивен для других типов файлов.
Тип документа по умолчанию (DDT)
Выберите одно из определений типа документа XHTML, чтобы сделать новые страницы совместимыми с XHTML. Например, можно сделать HTML-документ совместимым с XHTML, выбрав в меню тип Переходный XHTML 1.0 или Строгий XHTML 1.0 .
Кодировка по умолчанию
Укажите кодировку, которую необходимо использовать при создании новой страницы, а также при открытии документа, который не содержит указания на кодировку.
При выборе Юникод (UTF-8) в качестве кодировки по умолчанию можно включить в документ метку порядка байтов (BOM), выбрав параметр «Включить подпись Unicode (BOM)».
Меткой порядка байтов (BOM) называют 2–4 байта в начале текстового файла, которые определяют его как файл в кодировке Юникод, а также порядок байтов для всех последующих байтов. Так как в UTF‑8 не существует порядка байтов, добавлять BOM для этой кодировки не обязательно. Добавление метки является обязательным для UTF-16 и UTF-32.
Форма стандартизации Юникода
Выберите один из следующих параметров, если в качестве кодировки по умолчанию указывается Юникод (UTF-8) .
Существует четыре формы стандартизации Юникода. Наиболее важной является форма приведения C, так как данная форма наиболее часто используется в модели символов в Интернете. Для полноты информации Adobe предоставляет и другие три формы стандартизации Юникода.
Параметр «Показать диалоговое окно "Создать документ" после нажатия Ctrl + N»
Отмените данный параметр («on Command+N» для Macintosh), чтобы автоматически создавать документ с типом документа по умолчанию при использовании клавишной команды.
В Юникоде существуют внешне сходные символы, которые могут храниться в документе разными способами. Например, символ «ë» (e-умлаут) может быть представлен в виде одного символа «e-умлаут» или в виде двух символов — «обычное латинское e» + «комбинируемый умлаут». Комбинируемый символ в Юникоде используется вместе с предыдущим, таким образом умлаут отобразится над «латинским "e"». Обе формы представления будут выглядеть внешне одинаково, но вид записи в файле будет различаться.
Под приведением понимается процесс, в рамках которого все символы, которые могут храниться по-разному, сохраняются с использованием одной формы. Таким образом, все символы «ë» в документе будут сохранены как отдельный «e-умлаут» или как «e» + «комбинируемый умлаут», а не как обе формы в одном документе.
Узнайте, как создать вложенные шаблоны для управления содержимым страниц, которые используют элементы дизайна в Dreamweaver.
Вложенный шаблон — это шаблон, оформление и редактируемые области которого основаны на другом шаблоне. С помощью вложенных шаблонов удобно управлять содержимым страниц сайта, у которых много общих элементов, но имеются некоторые различия. Например, базовый шаблон может содержать более широкие области схемы и может использоваться многими авторами содержимого сайта, в то время как вложенный шаблон может более детально определять редактируемые области на страницах для указанного раздела сайта.
Редактируемые области в базовом шаблоне передаются вложенному шаблону и остаются доступными для редактирования на страницах, созданных на основе вложенного шаблона, если новые области шаблона не вставлены в эти области.
Изменения в базовом шаблоне автоматически отражаются на шаблонах, созданных на основе базового, а также во всех документах на основе шаблонов, которые созданы на основе главного и вложенных шаблонов.
В следующем примере шаблон trioHome содержит три редактируемые области с именами Body , Nav Bar и Footer .
Для создания вложенного шаблона был создан новый документ на основе шаблона и сохранен как шаблон с именем TrioNested. Во вложенном шаблоне в редактируемую область с именем Body добавлены две редактируемые области.
При добавлении редактируемой области в редактируемую область, передаваемую вложенному шаблону, ее цвет выделения изменяется на оранжевый. Содержимое, добавляемое вне редактируемой области, например графика в editableColumn , становится недоступным для редактирования в документе на основе вложенного шаблона. Выделенные синим цветом редактируемые области, добавленные во вложенный шаблон или передаваемые из базового шаблона, остаются доступными для редактирования в документах, созданных на основе вложенного шаблона. Области шаблона, которые не содержат редактируемую область, передаются документам на основе шаблона в качестве редактируемых.
Вложенные шаблоны позволяют создавать варианты базового шаблона. Вложенные шаблоны можно использовать для создания еще более индивидуальных макетов.
По умолчанию все редактируемые области из базового шаблона передаются через вложенный шаблон документу на основе вложенного шаблона. Это означает, что при создании редактируемой области в базовом шаблоне с последующим созданием вложенного шаблона редактируемая область будет отображаться в документах, созданных на основе вложенного шаблона (если в ту область во вложенном шаблоне не были добавлены какие-либо новые области шаблона).
Чтобы редактируемая область не передавалась как доступная для редактирования область в документы, созданные на основе вложенного шаблона, можно вставить в нее разметку шаблона. Такие области имеют оранжевую границу вместо синей.
Создайте документ из шаблона, на основе которого необходимо создать вложенный шаблон. Выполните одно из следующих действий:
На панели «Ресурсы» выберите «Шаблоны» на левой панели. Выберите «Создать шаблон» на нижней панели.
Выберите команду «Файл» > «Сохранить как». В диалоговом окне «Сохранить как» выберите «Файлы шаблонов» в раскрывающемся списке «Сохранить как».
В поле Сохранить как введите имя и нажмите кнопку «ОК», чтобы сохранить новый документ как вложенный шаблон.
Узнайте, как создать шаблон Dreamweaver на основе существующего документа, создать новый шаблон с помощью панели «Ресурсы» или создать шаблон для сайтов Contribute.
Шаблон можно создать из существующих документов (например, HTML) либо из нового документа.
После создания шаблона можно добавить области шаблона, настроить установки цвета кода и цвет подсветки области шаблона.
В файле заметок разработчика для шаблона можно сохранить дополнительные сведения о шаблоне (например, указать автора, дату изменения или основания для выбора определенных свойств макета). Документы на основе шаблона не наследуют заметки разработчика из шаблона.
Шаблон можно создать из существующего документа.
Выберите меню «Вставка > Шаблон > Создать шаблон».
В категории «Общее» на панели «Вставка» выберите «Шаблоны» в раскрывающемся меню, затем выберите пункт «Создать шаблон».
Чтобы сохранить шаблон, выберите сайт во всплывающем меню «Веб-сайт» и введите уникальное название шаблона в поле «Сохранить как».
Не перемещайте шаблоны из папки Templates и не помещайте в эту папку какие-либо другие файлы. Кроме того, не перемещайте папку Templates из локальной корневой папки. Это приведет к ошибкам путей в шаблонах.
В левой части панели «Ресурсы» (Окно > Ресурсы) выберите значок «Шаблоны».
Щелкните по значку «Создать шаблон» в нижней части панели «Ресурсы».
Новый безымянный шаблон будет добавлен в список шаблонов на панели «Активы».
Dreamweaver создаст пустой шаблон на панели «Ресурсы» и в папке Templates.
С помощью Dreamweaver можно создавать шаблоны, облегчающие пользователям Adobe® Contribute® создание новых страниц, обеспечивающие единообразное оформление сайта и предоставляющие возможность обновлять макет одновременно нескольких страниц.
После создания шаблона и загрузки его на сервер шаблон становится доступным всем пользователям Contribute, которые посещают сайт, если только не установлены ограничения на использование шаблона для ролей Contribute. Если ограничения на использование шаблонов установлены, то, возможно, новые шаблоны придется добавлять в список доступных шаблонов для конкретных пользователей Contribute (см. Администрирование Contribute).
Убедитесь, что корневая папка сайта, определенная в каждом описании веб-сайта пользователя Contribute, совпадает с папкой, определенной в описании веб-сайта в Dreamweaver. Если корневая папка сайта пользователя не совпадает с указанной, то пользователь не сможет работать с шаблонами.
В дополнение к шаблонам Dreamweaver с помощью средств администрирования Contribute можно создавать другие (отличные от Dreamweaver) шаблоны. Шаблон, отличный от Dreamweaver, — это существующая страница, которую пользователи Contribute могут применять для создания новых страниц. Он аналогичен шаблону Dreamweaver, за исключением того, что страница на его основе не будет обновляться при изменении шаблона. Кроме того, шаблоны, отличные от Dreamweaver, не могут содержать элементы Dreamweaver, например редактируемые, заблокированные, повторяющиеся и дополнительные области.
Когда пользователь Contribute создает новый документ на сайте с шаблонами Dreamweaver, Contribute перечисляет доступные шаблоны (как шаблоны Dreamweaver, так и шаблоны, отличные от Dreamweaver) в диалоговом окне «Новая страница».
Чтобы включить в состав сайта страницы, использующие кодировку, отличную от Latin-1, необходимо создать шаблоны (шаблоны Dreamweaver или шаблоны, отличные от Dreamweaver). Пользователи Contribute могут редактировать страницы в различных кодировках, однако пустая страница создается с кодировкой Latin-1. Чтобы создать страницу в другой кодировке, пользователь Contribute может создать копию существующей страницы с другой кодировкой или использовать шаблон с другой кодировкой. Однако, если на сайте нет страниц или шаблонов с другими кодировками, необходимо сначала создать в Dreamweaver страницу или шаблон с нужной кодировкой.
Для того чтобы создать шаблон в Dreamweaver, необходимо определиться со структурой будущего сайта. Конечно, и для готового сайта можно создать шаблоны, если его обновление вызывает трудности и отнимает уйму времени.
Создание шаблонов позволит обновлять весь сайт целиком и создавать типовые страницы, что является одним из достоинств программы Dreamweaver. Кроме того, можно будет добавить повторяющийся блок - вставить его на отдельные или все страницы сайта сразу. Это может быть счётчик посещаемости, баннер, рекламный блок, кнопки социальных сетей.
Сам шаблон представляет собой файл в формате .dwt и хранится в папке Templates локальной копии сайта. Шаблон включает неизменные области, редактируемые и добавляемые по выбору. Лучше всего назначение областей шаблона продемонстрировать схематично.
Возьмём для примера условную структуру, где на сайте находятся три основных раздела в горизонтальном меню, меню с подразделами в левой боковой колонке и основной контент с областями.
Некоторые страницы отличаются от других наличием дополнительной области, а белым цветом обозначено неизменное содержимое на всём сайте:
Читайте также: