Руководство пользователя Отмена

О программировании в 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
  19. Устранение неполадок
    1. Исправленные ошибки
    2. Выявленные неполадки

 

 

Узнайте о том, каким образом Dreamweaver поддерживает разные языки программирования, которые используются для создания веб-сайтов.

Самыми популярными языками программирования для проектирования и разработки полнофункциональных веб-сайтов являются HTML, HTML5 и CSS для клиентских приложений, а также PHP, JavaScript, Java и jQuery для серверных приложений.

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

Совместное использование CSS и HTML позволяет создать статический сайт. Однако для большинства веб-сайтов необходима некоторая форма взаимодействия (например, необходимо потребовать от пользователя заполнить форму или совершить платеж) и база данных для хранения всех данных веб-сайта.

Для создания таких внутренних каналов связи необходим серверный язык программирования (например, PHP), который взаимодействует с базой данных.

Языки программирования, поддерживаемые Dreamweaver

Помимо средств редактирования текстов в Adobe Dreamweaver предусмотрены различные функции, например подсказки кода, которые помогают пользователю писать код на следующих языках:

  • HTML
  • PHP
  • CSS
  • JavaScript

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

Автоматическое изменение кода

Можно выбрать параметры, предписывающие Dreamweaver автоматически приводить написанный вручную код в соответствии с указанными критериями. Однако код не будет исправлен, если вы не выберете параметры для его исправления или не выполните действия, в результате которых он будет изменен. Например, Dreamweaver не будет изменять пробелы и регистр атрибутов, если не используется команда «Применить исходное форматирование».

Некоторые из этих параметров исправления кода включены по умолчанию.

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

  • Для редактирования текущего документа используйте сторонний текстовый редактор.

  • По умолчанию Dreamweaver не вносит изменения в код, созданный или измененный в других редакторах HTML, даже в тех случаях, когда код является недопустимым, если только пользователь не включил средства исправления кода.

  • Dreamweaver не изменяет не распознаваемых программой тегов (включая теги XML), поскольку не имеет критериев для их оценки. Если нераспознанный тег перекрывается другим тегом (например, <MyNewTag><em>text</MyNewTag></em>), то Dreamweaver помечает его как ошибку, но не исправляет код.

  • При желании можно настроить в Dreamweaver выделение недопустимого кода желтым цветом в представлении «Код». При выделении подсвеченного раздела в окне инспектора свойств отображается информация о том, как можно исправить ошибку.

Код XHTML

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

Примечание.

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

В приведенной ниже таблице описаны те спецификации XHTML, которые Dreamweaver соблюдает автоматически.

Спецификация XHTML

Действия, выполняемые приложением Dreamweaver

В документе перед корневым элементом должно быть объявление DOCTYPE, содержащее справочные материалы по одному из трех файлов определения типа документа (DTD) XHTML (строгий, переходный или набор фреймов).

Добавляет объявление XHTML DOCTYPE в документ XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Или, если документ XHTML имеет набор фреймов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>

Корневой элемент документа должен иметь формат html, а элемент html должен определять пространство имен XHTML.

Добавляет атрибут namespace в элемент html следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml">

Стандартный документ должен содержать структурные элементы head, title и body. Документ набора фреймов должен содержать структурные элементы head, title и frameset.

В стандартном документе в него включены элементы head, title и body. В документе набора фреймов включает элементы head, title и frameset.

Все элементы в документе должны быть правильно вложены.

<p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p>

Формирует корректно вложенный код и при очистке XHTML исправляет вложенность в коде, созданном средствами, отличными от Dreamweaver.

При написании всех имен элементов и атрибутов нужно использовать строчные буквы.

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

Каждый элемент должен иметь закрывающий тег, если только он не объявлен в DTD как EMPTY.

Вставляет закрывающие теги в формируемый им код, а также при очистке кода XHTML.

Пустые элементы должны иметь закрывающий тег, либо открывающий тег должен заканчиваться символами />. Например, тег <br> является недопустимым, правильная форма — <br></br> или <br/>. Далее приведен список пустых элементов: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta и param.

По соображениям обратной совместимости с обозревателями без средств для работы с XML, перед символами /> следует вставлять пробел (например, следует писать <br />, а не <br/>).

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

Свертывание атрибутов не допускается. Например, <td nowrap> является недопустимым. Правильная форма — <td nowrap="nowrap">.

Это относится к следующим атрибутам: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly и selected.

Вставляет полные пары «атрибут — значение» в формируемый код, а также при очистке кода XHTML.

Примечание. Если браузер HTML не поддерживает стандарт HTML 4, то он может неправильно интерпретировать данные логические атрибуты, когда они отображаются в полной форме.

Все значения атрибутов должны с обеих сторон выделяться кавычками.

Заключает значения атрибутов в кавычки в формируемом им коде и при очистке кода XHTML.

Следующие элементы должны наряду с атрибутом id иметь атрибут name: a, applet, form, frame, iframe, img и map. Например, форма <a name="intro">Introduction</a> является неверной, правильная форма —

<a id="intro">Introduction</a> или <a id="section1" name="intro"> Introduction</a>.

Присваивает атрибутам name и id одно и то же значение всякий раз, когда атрибут name устанавливается с помощью инспектора свойств в коде, сформированном Dreamweaver, а также при очистке кода XHTML.

Для атрибутов со значениями перечисляемого типа значения должны быть в нижнем регистре.

Значение перечисляемого типа — это значение из заданного списка разрешенных значений; например, атрибут align имеет следующие разрешенные значения: center, justify, left и right.

При создании кода и при очистке кода XHTML переводит значения перечисляемого типа в нижний регистр.

Все элементы сценариев и стилей должны иметь атрибут type.

(Атрибут type элемента script является обязательным после появления версии HTML 4, когда атрибут language был объявлен устаревшим.)

При создании кода и при очистке кода XHTML устанавливает атрибуты type и language элементов script, а также атрибут type элементов style.

Все элементы img и area должны иметь атрибут alt.

Задает эти атрибуты при создании кода, а при очистке кода XHTML сообщает об отсутствии атрибутов alt.

Регулярные выражения

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

В следующей таблице перечислены специальные символы в регулярных выражениях, их значения, а также приведены примеры их употребления. При поиске текста, содержащего один из указанных в таблице специальных символов, следует добавить перед соответствующим символом обратную косую черту, чтобы он обрабатывался как обычный символ. Например, чтобы найти символ «*» во фразе some conditions apply*, строка поиска должна выглядеть следующим образом: apply\*. Если не поставить перед звездочкой обратную косую черту, то она будет рассматриваться как специальный символ и будут найдены все вхождения слова «apply» (а также сочетания символов «appl», «applyy» и «applyyy»), а не сочетания, заканчивающиеся звездочкой.

Символ

Соответствия

Пример

^

Начало строки ввода.

^T соответствует «T» во фразе «This good earth», но не во фразе «Uncle Tom’s Cabin».

$

Конец строки ввода.

h$ соответствует букве «h» в слове «teach», но не в слове «teacher».

*

Предшествующий символ встречается 0 или более раз.

um* соответствует сочетанию «um» в «rum», «umm» в «yummy» и букве «u» в «huge».

+

Предшествующий символ встречается 1 или более раз.

um+ соответствует сочетанию «um» в «rum», «umm» в «yummy» и не имеет соответствий в слове «huge».

?

Предшествующий символ встречается не более одного раза (иными словами, предшествующий символ является необязательным).

st?on соответствует «son» в слове «Johnson» и «ston» в слове «Johnston», но не имеет соответствий в словах «Appleton» и «tension».

.

Любой одиночный символ, кроме символа новой строки.

.an соответствует сочетанием «ran» и «can» во фразе «bran muffins can be tasty».

x|y

Либо x, либо y.

FF0000|0000FF соответствует «FF0000» в bgcolor=«#FF0000» и «0000FF» в font color=«#0000FF».

{n}

Ровно n вхождений предыдущего символа.

o{2} соответствует «oo» в «loom» и первым двум «o» в «mooooo», но не имеет соответствий в «money».

{n,m}

Не менее n и не более m вхождений предшествующего символа.

F{2,4} соответствует «FF» в «#FF0000» и первым четырем «F» в #FFFFFF.

[abc]

Любой из заключенных в скобки символов. Диапазон символов указывайте с помощью дефиса (так, выражение [a-f] эквивалентно выражению [abcdef]).

[e-g] соответствует «e» в слове «bed», «f» в слове «folly» и «g» в слове «guard».

[^abc]

Любой не заключенный в скобки символ. Диапазон символов указывайте с помощью дефиса (так, выражение [^a-f] эквивалентно выражению [^abcdef]).

Первым соответствием для [^aeiou] будет «r» в слове «orange», «b» в слове «book» и «k» в слове «eek!».

\b

Граница слова (например, пробел или символ возврата каретки).

\bb соответствует букве «b» в «book», но не имеет соответствий в словах «goober» и «snob»

\B

Любой символ, кроме границы слова

\Bb соответствует букве «b» в «goober», но не имеет соответствий в слове «book».

\d

Любой символ цифры. Аналогично [0-9].

\d соответствует «3» в «C3PO» и «2» в «apartment 2G».

\D

Любой символ, кроме символов цифр. Аналогично [^0-9].

\D соответствует «S» в «900S» и «Q» в «Q45».

\f

Символ прогона страницы

\n

Символ новой строки

\r

Символ возврата каретки

\s

Любой разделитель, включая пробел, символ табуляции, символ перевода страницы или перевода строки.

\sbook соответствует слову «book» в «blue book», но не имеет соответствий в слове «notebook».

\S

Любой единичный символ, кроме разделителей.

\Sbook соответствует слову «book» в «notebook», но не имеет соответствий в «blue book».

\t

Символ табуляции.

\w

Любой символ алфавита или цифра, включая символ подчеркивания. Аналогично [A-Za-z0-9_].

b\w* соответствует слову «barking» в «the barking dog», а также словам «big» и «black» в «the big black dog».

\W

Любой символ, кроме символов алфавита и цифр. Аналогично [^A-Za-z0-9_].

\W соответствует «&» в «Jake&Mattie» и «%» в «100%»

Control + Enter или Shift + Enter (Windows), либо Control + Return, Shift + Return или Command + Return (Macintosh).

Символ возврата. Если вы не используете регулярные выражения, убедитесь, что при выполнении данной операции поиска параметр «Не учитывать пустое пространство» не выбран. Обратите внимание, что в данном случае речь идет о соответствии конкретному символу, а не общему представлению о разрыве строки, например теги <br> и <p> не будут соответствовать критерию поиска. В представлении «Дизайн» символы возврата отображаются как пробелы, а не как символы разрыва строки.

Группы символов внутри регулярного выражения, на которые вы будете ссылаться в дальнейшем, следует выделять скобками. Далее для ссылки на первую, вторую, третью и последующие заключенные в скобки группы символов в поле «Заменить на» используйте знаки $1, $2, $3 и т. д.

Примечание.

В поле «Найти» для ссылки на заключенные в скобки группы символов, ранее использованные в регулярном выражении, вместо знаков $1, $2, $3 используйте знаки \1, \2, \3.

Например, при выполнении операции поиска символов (\d+)\/(\d+)\/(\d+) и замены их по схеме $2/$1/$3 отделенные друг от друга косыми чертами день и месяц меняются местами в дате. Таким образом, американский формат даты изменяется на европейский, или наоборот.

Код поведения сервера

Когда вы разрабатываете динамическую страницу и на панели «Поведение сервера» выбираете поведение сервера, Dreamweaver вставляет в страницу один или несколько блоков кода, обеспечивающего выполнение этого поведения.

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

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?