- Руководство пользователя 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, а также устанавливайте линейки и направляющие макета, используйте направляющие с шаблонами, сетку макета и изображение-образец.
Настройка линеек
Линейки позволяют измерять и нужным образом располагать элементы при проектировании макета. Линейки могут отображаться на левой и верхней границах страницы (со значениями в пикселах, дюймах или сантиметрах).
- Чтобы включить или отключить линейки, выберите меню «Просмотр» > «Параметры представления "Дизайн"» > «Линейки» > «Показать/скрыть».
- Чтобы изменить точку отсчета, перетащите значок точки отсчета линеек (в левом верхнем углу представления «Дизайн» области «Окно документа») в нужное место на странице.
- Чтобы восстановить позицию точки отсчета по умолчанию, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Линейки» > «Вернуть на исходное положение».
- Чтобы изменить единицу измерения, выберите пункт меню «Просмотр» > «Линейки», затем выберите «Пикселы», «Дюймы» или «Сантиметры».
Установка направляющих макета
Направляющие — это линии, перетаскиваемые на документ с линеек. Они помогают более точно располагать и выравнивать объекты. Кроме того, с помощью направляющих можно измерять размер элементов страницы или имитировать складки (видимые области) веб-браузеров.
Для выравнивания можно привязывать элементы к направляющим или наоборот. (Для использования функции привязки требуется абсолютное позиционирование элементов.) Кроме того, можно закрепить направляющие от случайного перемещения.
Создание горизонтальной или вертикальной направляющей
-
Перетащите указатель с соответствующей линейки.
-
Расположите направляющую в нужном месте области «Окно документа» и отпустите кнопку мыши (чтобы изменить положение направляющей, перетащите ее снова).Примечание.
По умолчанию направляющие хранятся в виде абсолютных расстояний в пикселах от верхнего или левого края документа, а отображаются относительно точки отсчета линейки. Чтобы установить направляющую в процентах, удерживайте клавишу Shift во время ее создания или перемещения.
Отображение и скрытие направляющих
-
Выберите меню «Просмотр» > «Направляющие» > «Показать направляющие».
Привязка элементов к направляющим
- Чтобы привязать элементы к направляющим, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Привязать к направляющим».
- Чтобы привязать направляющие к элементам, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Привязать направляющие к элементам».
При изменении размеров элементов, например элементов с абсолютным позиционированием, таблиц и изображений, они привязываются к направляющим.
Блокировка и разблокировка всех направляющих
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Заблокировать направляющие».
Просмотр и перемещение направляющей в конкретное место
-
Чтобы увидеть положение направляющей, задержите над ней указатель мыши.
-
Дважды щелкните направляющую.
-
Введите новую позицию в диалоговом окне «Перемещение направляющей» и нажмите кнопку «ОК».
Просмотр расстояния между направляющими
Единица измерения соответствует единице измерения линеек.
Имитация складки (видимой области) веб-браузера
Выберите пункт «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие», а затем выберите в меню предустановленный размер окна в браузере.
Удаление направляющей
Изменение параметров направляющих
-
Выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Изменить направляющие», настройте приведенные ниже параметры и нажмите кнопку «ОК».
Цвет направляющей
Задает цвет направляющих. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Дистанционный цвет
Указывает цвет линий, отображаемых в качестве индикаторов расстояния при задержании указателя мыши между направляющими. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Показывать направляющие
Делает направляющие видимыми в представлении «Дизайн».
Привязать к направляющим
Привязывает элементы страницы к направляющим при перемещении их по странице.
Закрепить направляющие
Блокирует положение направляющих.
Привязать направляющие к элементам
Привязывает направляющие к элементам на странице при перетаскивании направляющих.
Очистить направляющие
Удаляет все направляющие со страницы.
Использование направляющих с шаблонами
При добавлении направляющих в шаблон Dreamweaver эти направляющие будут наследоваться всеми экземплярами шаблона. Однако в экземплярах шаблона направляющие рассматриваются как изменяемые области, поэтому они доступны для редактирования. Измененные в экземплярах шаблона направляющие восстанавливаются в исходном положении каждый раз при обновлении главного шаблона.
К экземплярам шаблона можно также добавлять новые направляющие. Добавленные таким способом направляющие при обновлении главного шаблона не перезаписываются.
Использование сетки макета
Сетка отображается в области «Окно документа» как система горизонтальных и вертикальных линий. Она позволяет размещать объекты с большой точностью. Элементы страницы с абсолютным позиционированием можно автоматически привязывать к сетке при их перемещении, а также изменять сетку или управлять поведением привязки с помощью соответствующих параметров сетки. Привязка работает независимо от того, является ли сетка видимой.
Отображение или скрытие сетки
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Отобразить сетку».
Включение или отключение привязки
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Привязать к сетке».
Изменение параметров сетки
-
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Параметры сетки».
-
Настройте параметры и нажмите кнопку «ОК», чтобы применить изменения.
Цвет
Задает цвет линий сетки. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.
Показать сетку
Делает сетку видимой в представлении «Дизайн».
Привязать к сетке
Привязывает элементы страницы к линиям сетки.
Интервал
Управляет расстоянием между линиями сетки. Введите число и выберите в меню единицу измерения — «Пикселы», «Дюймы» или «Сантиметры».
Отображение
Указывает способ отображения линий: как линии или как точки.
Примечание.Если пункт меню «Показывать сетку» не выбран, то сетка в документе не отображается, так же как и внесенные изменения.
Использование изображения-образца
Изображение-образец можно использовать в качестве направляющей для повторного создания эскиза страницы, созданной в графическом приложении, например в Adobe Freehand или Fireworks.
Образцом может быть изображение формата PEG, GIF или PNG, размещенное в фоне области «Окно документа». Это изображение можно скрыть, задать для него непрозрачность, а также изменить его положение.
Изображение-образец отображается только в Dreamweaver. При просмотре страницы в браузере оно не отображается. Когда изображение-образец видимо, настоящие фоновые изображение и цвет в области «Окно документа» не отображаются. Однако при просмотре страницы в браузере они будут видимыми.
Размещение изображения-образца в области «Окно документа»
-
Выполните одно из следующих действий:
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Загрузить».
Выберите «Файл» > «Свойства страницы», затем в категории «Изображение-образец» нажмите кнопку «Обзор» (возле текстового поля «Изображение-образец»).
-
Перейдите к своему файлу изображения и нажмите кнопку «ОК».
-
В диалоговом окне «Свойства страницы» укажите прозрачность изображения, перетащив ползунок «Прозрачность», и нажмите кнопку «ОК».
Чтобы в любой момент переключиться на другое изображение-образец или изменить прозрачность текущего образца, выберите «Файл» > «Свойства страницы».
Отображение или скрытие изображения-образца
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Показать».
Изменение расположения изображения-образца
-
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Настроить расположение».
Чтобы точно задать положение изображения-образца, введите значения координат в текстовых полях «X» и «Y».
При каждом нажатии клавиш со стрелками изображение будет перемещаться на 1 пиксел.
Для перемещения изображения на 5 пикселов удерживайте клавишу Shift, нажимая клавиши со стрелками.
Сброс положения изображения-образца
-
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Вернуть в исходное положение».
Изображение-образец будет возвращено в левый верхний угол области «Окно документа» (0,0).
Выравнивание изображения-образца по выделенному элементу
-
Выделите элемент в окне «Документ».
-
Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Выровнять по выделению».
Левый верхний угол изображения-образца будет выровнен по левому верхнему углу выделенного элемента.