О шаблонах Dreamweaver

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы гибкого веб-дизайна
    2. Новые возможности Dreamweaver
    3. Веб-разработка с помощью Dreamweaver: обзор
    4. Dreamweaver / распространенные вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор новых возможностей
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud Libraries в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
  4. Рабочие среды и представления Dreamweaver
    1. Рабочая среда Dreamweaver
    2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
    3. Поиск файлов по имени или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройка локальной версии сайта
    3. Подключение к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт параметров сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Дополнительные настройки
    9. Настройка установок сайта для передачи файлов
    10. Задание параметров прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение файлов с сервера и размещение их на нем
    4. Возврат и извлечение файлов
    5. Синхронизация файлов
    6. Сравнение файлов
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включение заметок разработчика для сайтов Dreamweaver
    9. Предотвращение использования уязвимости Gatekeeper
  7. Макет и оформление
    1. Использование средств визуализации для создания макета
    2. Об использовании CSS для создания макета страницы
    3. Создание динамичных веб-сайтов с помощью Bootstrap
    4. Создание и использование медиазапросов в Dreamweaver
    5. Представление содержимого в таблицах
    6. Цвета
    7. Гибкий дизайн с использованием «резиновых» макетов
    8. Extract в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Создание макетов страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Установка настроек стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Форматирование кода
  9. Содержимое страницы и ресурсы
    1. Задание свойств страницы
    2. Задание свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель DOM
    6. Редактирование в режиме интерактивного просмотра
    7. Кодировка документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Задание свойств текста в инспекторе свойств
    10. Проверка орфографии на веб-странице
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
    13. Работа с ресурсами
    14. Вставка и обновление даты в Dreamweaver
    15. Создание и управление избранными ресурсами в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавление мультимедийных объектов
    18. Добавление видео Dreamweaver
    19. Добавление видео HTML5
    20. Вставка файлов SWF
    21. Добавление звуковых эффектов
    22. Добавление аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
  11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
  13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver

 

Узнайте, как использовать шаблоны Dreamweaver для разработки «фиксированной» макета страницы и создавайте на основе шаблона документы, наследующие его макет страницы.

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

Примечание.

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

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

Примечание.

Шаблоны Dreamweaver отличаются от шаблонов некоторых других программных продуктов Adobe Creative Cloud тем, что раздел «Страница» в них по умолчанию является фиксированным (недоступным для редактирования).

Типы областей шаблона

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

При создании шаблона можно вносить изменения в редактируемые и заблокированные области. Однако пользователь шаблона может вносить изменения только в редактируемые области документа на основе шаблона. Блокированные области изменять нельзя.

Есть четыре типа областей шаблона.

Редактируемая область. Незаблокированная область документа на основе шаблона — раздел, доступный для редактирования пользователю шаблона. Автор шаблона может сделать любую область шаблона доступной для редактирования. Чтобы шаблон был эффективен, он должен содержать хотя бы одну редактируемую область. В противном случае страницы на основе шаблона нельзя будет редактировать. Дополнительные сведения о редактируемых областях см. в разделе Создание редактируемых областей в шаблонах.

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

Есть 2 типа повторяющихся областей, которые можно вставлять в шаблон: повторяющаяся область и повторяющаяся таблица. О том, как работать с повторяющимися областями, см. в разделе Создание повторяющихся областей и таблиц в Dreamweaver.

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

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

Ссылки в шаблонах

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

Когда в файл шаблона добавляется новая ссылка относительно документа, существует вероятность указания ошибочного имени пути, если оно вводится в текстовое поле ссылки в инспекторе свойств. Верный путь в файле шаблона — это путь от папки Templates к связанному документу, а не от папки документа, основанного на шаблоне, к связанному документу. Чтобы при создании ссылок в шаблонах указывались только правильные существующие пути для ссылок, используйте значок папки или значок «Указать файл» в инспекторе свойств.

Серверные сценарии в шаблонах и документах на основе шаблонов

Некоторые серверные сценарии добавляются в самом начале или конце документа (перед тегом <html> или после тега </html>). Такие сценарии требуют специальной обработки в шаблонах и документах на основе шаблонов. Обычно, если изменения в коде сценария необходимо внести перед тегом <html> или после тега </html> в шаблоне, то эти изменения не копируются в документ на основе шаблона. Это может вызвать ошибки сервера, если другие серверные сценарии в пределах основной части шаблона зависят от сценариев, которые не скопированы. Если в сценарии перед тегом <html> или после тега </html> в шаблоне вносятся изменения, то появляется предупреждение.

Чтобы избежать данной проблемы, можно добавить в раздел head шаблона следующий код.

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Если шаблон содержит этот код, то изменения в сценарии перед тегом <html> или после тега </html> копируются в документ на основе шаблона. Однако эти сценарии в документах на основе шаблонов станут недоступными для редактирования. Таким образом, эти сценарии можно редактировать либо в шаблоне, либо в документах на его основе, но не одновременно в шаблоне и документах.

Параметры шаблона

Параметры шаблона содержат значения для управления содержимым в документах на основе шаблона. Параметры шаблона используются для дополнительных областей или редактируемых атрибутов тега, либо для установки значений, которые необходимо передать вложенному документу. Выберите для каждого параметра имя, тип данных и значение по умолчанию. Каждый параметр должен иметь уникальное имя (оно обрабатывается с учетом регистра). Значения должны принадлежать одному из 5 допустимых типов данных: text, boolean, color, URL или number.

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

Выражения шаблона

Выражения шаблонов — это инструкции, которые вычисляют или обрабатывают значение.

Выражение позволяет сохранять значение и отображать его в документе. Например, выражение может быть просто значением параметра, например @@(Param)@@, либо достаточно сложным, чтобы вычислить значения, которые чередуют цвет фона в строке таблицы, например @@((_index & 1) ? red : blue)@@.

Кроме того, можно определить выражения для условного оператора if и вложенных условных операторов if. Если выражение используется в условной инструкции, то Dreamweaver обрабатывает его как true или false. Если условие имеет значение «true», то дополнительная область в документе на основе шаблона отображается. В противном случае она не отображается.

Выражения можно определить в представлении «Код» или диалоговом окне «Дополнительная область» во время добавления дополнительной области.

Выражения шаблона можно описать в представлении «Код» 2 способами: с помощью комментария <!-- TemplateExpr expr="your expresson"--> или @@(your expression)@@. При добавлении выражения в код шаблона в представлении «Дизайн» отображается маркер выражения. При применении шаблона Dreamweaver обрабатывает выражение и отображает значение в документе на основе шаблона.

Язык выражений шаблонов

Язык выражений шаблонов — это небольшое подмножество языка JavaScript, использующее синтаксис JavaScript и правила приоритета. Для написания выражений, подобных приведенному ниже, следует использовать операторы JavaScript:

@@(firstName+lastName)@@

Поддерживаются следующие функции и операторы.

  • Числовые литералы, строковые литералы (только в двойных кавычках), литералы Boolean (true или false).

  • Ссылка на переменную (см. список определенных переменных ниже в этом разделе).

  • Ссылка на поле (оператор «dot»).

  • Унарные операторы: +, -, ~, !

  • Бинарные операторы: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

  • Условный оператор: ?:

  • Круглые скобки: ()

    Используются следующие типы данных: Boolean, 64-битное число IEEE с плавающей точкой, string и object. Шаблоны Dreamweaver не поддерживают использование в JavaScript типов «null» или «undefined». Кроме того, не разрешается неявное преобразование скалярных типов в объекты. Таким образом, выражение "abc".length вместо значения 3 выдаст ошибку.

    Доступны только те объекты, которые описаны объектной моделью выражений. Определены следующие переменные.

    _document

    Содержит данные шаблона на уровне документа с полем для каждого параметра в шаблоне.

    _repeat

    Определен только для выражений, которые отображаются внутри повторяющейся области. Предоставляет встроенные сведения об области.

    _index

    Числовой индекс (от 0) для текущей записи.

    _numRows

    Общее количество записей в данной повторяющейся области.

    _isFirst

    True, если текущая запись является первой в ее повторяющейся области.

    _isLast

    True, если текущая запись является последней в ее повторяющейся области.

    _prevRecord

    Объект _repeat для предыдущей записи. Обращение к этому свойству для первой записи в области является ошибкой.

    _nextRecord

    Объект _repeat для следующей записи. Обращение к этому свойству для последней записи в области является ошибкой.

    _parent

    Во вложенной повторяющейся области это свойство передает объект _repeat для окружающей (внешней) области повтора. Обращение к этому свойству вне вложенной повторяющейся области является ошибкой.

    Во время обработки выражения все поля объектов _document и _repeat не явно доступны. Например, для доступа к параметру заголовка документа можно ввести title вместо _document.title.

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

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

Вложенные условные операторы If в коде шаблона

Выражения шаблона можно определить для условного оператора if и вложенных условных операторов if. В этом примере показано определение параметра с именем «Отдел», задание начального значения и определение вложенных условных операторов If, управляющих отображением логотипа.

Ниже приведен пример кода, который можно добавить в раздел head шаблона.

<!-- TemplateParam name="Dept" type="number" value="1" -->

Следующий условный оператор проверяет значение, связанное с параметром Dept. Если условие истинно или выполняется, то отображается соответствующее изображение.

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

При создании документа на основе шаблона ему автоматически передаются параметры шаблона. Пользователь шаблона определяет отображаемое изображение.

Логотип Adobe

Вход в учетную запись