- Руководство пользователя Dreamweaver
- Введение
- Dreamweaver и Creative Cloud
- Рабочие среды и представления Dreamweaver
- Настройка сайтов
- О сайтах Dreamweaver
- Настройка локальной версии сайта
- Подключение к серверу публикации
- Настройка тестового сервера
- Импорт и экспорт параметров сайта Dreamweaver
- Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
- Специальные возможности в Dreamweaver
- Дополнительные настройки
- Настройка установок сайта для передачи файлов
- Задание параметров прокси-сервера в Dreamweaver
- Синхронизация настроек Dreamweaver с Creative Cloud
- Использование Git в Dreamweaver
- Управление файлами
- Создание и открытие файлов
- Управление файлами и папками
- Получение файлов с сервера и размещение их на нем
- Возврат и извлечение файлов
- Синхронизация файлов
- Сравнение файлов
- Скрытие файлов и папок на сайте Dreamweaver
- Включение заметок разработчика для сайтов Dreamweaver
- Предотвращение использования уязвимости Gatekeeper
- Макет и оформление
- Использование средств визуализации для создания макета
- Об использовании CSS для создания макета страницы
- Создание динамичных веб-сайтов с помощью Bootstrap
- Создание и использование медиазапросов в Dreamweaver
- Представление содержимого в таблицах
- Цвета
- Гибкий дизайн с использованием «резиновых» макетов
- Extract в Dreamweaver
- CSS
- Общие сведения о каскадных таблицах стилей
- Создание макетов страниц с помощью конструктора CSS
- Использование препроцессоров CSS в Dreamweaver
- Установка настроек стиля CSS в Dreamweaver
- Перемещение правил CSS в Dreamweaver
- Преобразование встроенного CSS в правило CSS в Dreamweaver
- Работа с тегами div
- Применение градиентов к фону
- Создание и редактирование эффектов перехода CSS3 в Dreamweaver
- Форматирование кода
- Содержимое страницы и ресурсы
- Задание свойств страницы
- Задание свойств заголовка CSS и свойств ссылки CSS
- Работа с текстом
- Поиск и замена текста, тегов и атрибутов
- Панель DOM
- Редактирование в режиме интерактивного просмотра
- Кодировка документов в Dreamweaver
- Выбор и просмотр элементов в окне документа
- Задание свойств текста в инспекторе свойств
- Проверка орфографии на веб-странице
- Использование горизонтальных линеек в Dreamweaver
- Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
- Работа с ресурсами
- Вставка и обновление даты в Dreamweaver
- Создание и управление избранными ресурсами в Dreamweaver
- Вставка и редактирование изображений в Dreamweaver
- Добавление мультимедийных объектов
- Добавление видео Dreamweaver
- Добавление видео HTML5
- Вставка файлов SWF
- Добавление звуковых эффектов
- Добавление аудио HTML5 в Dreamweaver
- Работа с элементами библиотеки
- Использование текста на арабском языке и иврите в Dreamweaver
- Создание ссылок и навигация
- Графические элементы и эффекты jQuery
- Написание кода веб-сайтов
- О программировании в Dreamweaver
- Среда написания кода в Dreamweaver
- Настройка параметров написания кода
- Настройка цветового оформления кода
- Написание и редактирование кода
- Подсказки по коду и автозавершение кода
- Свертывание и развертывание кода
- Повторное использование фрагментов кода
- Анализ Linting для проверки кода
- Оптимизация кода
- Редактирование кода в представлении «Дизайн»
- Работа с содержимым заголовков для страниц
- Вставка серверных включений в Dreamweaver
- Использование библиотек тегов в Dreamweaver
- Импорт пользовательских тегов в Dreamweaver
- Использование вариантов поведения JavaScript (общие инструкции)
- Применение встроенных вариантов поведения JavaScript
- Сведения об XML и XSLT
- Выполнение XSL-преобразования на стороне сервера в Dreamweaver
- Выполнение XSL-преобразования на стороне клиента в Dreamweaver
- Добавление символьных сущностей для XSLT в Dreamweaver
- Форматирование кода
- Процессы взаимодействия продуктов
- Установка и использование расширений в Dreamweaver
- Обновления в Dreamweaver, устанавливаемые через приложение
- Вставить документы Microsoft Office в Dreamweaver (только для Windows)
- Работа с Fireworks и Dreamweaver
- Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
- Интеграция Dreamweaver с Business Catalyst
- Создание персонализированных кампаний почтовой рассылки
- Шаблоны
- О шаблонах Dreamweaver
- Распознавание шаблонов и документов на их основе
- Создание шаблона Dreamweaver
- Создание редактируемых областей в шаблонах
- Создание повторяющихся областей и таблиц в Dreamweaver
- Использование дополнительных областей в шаблонах
- Определение редактируемых атрибутов тега в Dreamweaver
- Создание вложенных шаблонов в Dreamweaver
- Редактирование, обновление и удаление шаблонов
- Экспорт и импорт XML-содержимого в Dreamweaver
- Применение или удаление шаблона из существующего документа
- Редактирование содержимого в шаблонах Dreamweaver
- Правила синтаксиса для тегов шаблона в Dreamweaver
- Настройка предпочтений выделения для областей шаблона
- Преимущества использования шаблонов в Dreamweaver
- Мобильные и многоэкранные устройства
- Динамические сайты, страницы и веб-формы
- Общие сведения о веб-приложениях
- Настройка компьютера для разработки приложений
- Устранение неполадок подключений к базам данных
- Удаление сценариев подключения в Dreamweaver
- Дизайн динамических страниц
- Обзор динамических источников содержимого
- Определение источников динамического содержимого
- Добавление динамического содержимого на страницы
- Изменение динамического содержимого в Dreamweaver
- Отображение записей баз данных
- Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
- Добавление заказных вариантов поведения сервера в Dreamweaver
- Создание форм с помощью Dreamweaver
- Использование форм для сбора информации от пользователей
- Создание и включение форм ColdFusion в Dreamweaver
- Создание веб-форм
- Расширенная поддержка HTML5 для компонентов формы
- Разработка формы с помощью Dreamweaver
- Визуальное построение приложений
- Создание главной страницы и страницы сведений в Dreamweaver
- Создание страниц поиска и результатов поиска
- Создание страницы для вставки записи
- Создание страницы обновления записи в Dreamweaver
- Создание страниц удаления записей в Dreamweaver
- Применение ASP-команд для изменения базы данных в Dreamweaver
- Создание страницы регистрации
- Создание страницы входа
- Создание страницы с доступом только для авторизованных пользователей
- Защита папок в ColdFusion с помощью Dreamweaver
- Использование компонентов ColdFusion в Dreamweaver
- Тестирование, просмотр и публикация веб-сайтов
- Устранение неполадок
Узнайте о том, каким образом 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.