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

Использование средств визуализации для создания макета

  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, а также устанавливайте линейки и направляющие макета, используйте направляющие с шаблонами, сетку макета и изображение-образец.

Настройка линеек

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

  • Чтобы включить или отключить линейки, выберите меню «Просмотр» > «Параметры представления "Дизайн"» > «Линейки» > «Показать/скрыть».
  • Чтобы изменить точку отсчета, перетащите значок точки отсчета линеек  (в левом верхнем углу представления «Дизайн» области «Окно документа») в нужное место на странице.
  • Чтобы восстановить позицию точки отсчета по умолчанию, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Линейки» > «Вернуть на исходное положение».
  • Чтобы изменить единицу измерения, выберите пункт меню «Просмотр» > «Линейки», затем выберите «Пикселы», «Дюймы» или «Сантиметры».

Установка направляющих макета

Направляющие — это линии, перетаскиваемые на документ с линеек. Они помогают более точно располагать и выравнивать объекты. Кроме того, с помощью направляющих можно измерять размер элементов страницы или имитировать складки (видимые области) веб-браузеров.

Для выравнивания можно привязывать элементы к направляющим или наоборот. (Для использования функции привязки требуется абсолютное позиционирование элементов.) Кроме того, можно закрепить направляющие от случайного перемещения.

Создание горизонтальной или вертикальной направляющей

  1. Перетащите указатель с соответствующей линейки.
  2. Расположите направляющую в нужном месте области «Окно документа» и отпустите кнопку мыши (чтобы изменить положение направляющей, перетащите ее снова).
    Примечание.

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

Отображение и скрытие направляющих

  1. Выберите меню «Просмотр» > «Направляющие» > «Показать направляющие».

Привязка элементов к направляющим

  • Чтобы привязать элементы к направляющим, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Привязать к направляющим».
  • Чтобы привязать направляющие к элементам, выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Привязать направляющие к элементам».
Примечание.

При изменении размеров элементов, например элементов с абсолютным позиционированием, таблиц и изображений, они привязываются к направляющим.

Блокировка и разблокировка всех направляющих

Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Заблокировать направляющие».

Просмотр и перемещение направляющей в конкретное место

  1. Чтобы увидеть положение направляющей, задержите над ней указатель мыши.
  2. Дважды щелкните направляющую.
  3. Введите новую позицию в диалоговом окне «Перемещение направляющей» и нажмите кнопку «ОК».

Просмотр расстояния между направляющими

Нажмите клавишу Ctrl (Windows) или Cmd (Macintosh) и задержите указатель мыши в любом месте между двумя направляющими.
Примечание.

Единица измерения соответствует единице измерения линеек.

Имитация складки (видимой области) веб-браузера

Выберите пункт «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие», а затем выберите в меню предустановленный размер окна в браузере.

Удаление направляющей

Перетащите направляющую за пределы документа.

Изменение параметров направляющих

  1. Выберите команду «Просмотр» > «Параметры представления "Дизайн"» > «Направляющие» > «Изменить направляющие», настройте приведенные ниже параметры и нажмите кнопку «ОК».

    Цвет направляющей

    Задает цвет направляющих. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.

    Дистанционный цвет

    Указывает цвет линий, отображаемых в качестве индикаторов расстояния при задержании указателя мыши между направляющими. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.

    Показывать направляющие

    Делает направляющие видимыми в представлении «Дизайн».

    Привязать к направляющим

    Привязывает элементы страницы к направляющим при перемещении их по странице.

    Закрепить направляющие

    Блокирует положение направляющих.

    Привязать направляющие к элементам

    Привязывает направляющие к элементам на странице при перетаскивании направляющих.

    Очистить направляющие

    Удаляет все направляющие со страницы.

Использование направляющих с шаблонами

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

К экземплярам шаблона можно также добавлять новые направляющие. Добавленные таким способом направляющие при обновлении главного шаблона не перезаписываются.

Использование сетки макета

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

Отображение или скрытие сетки

Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Отобразить сетку».

Включение или отключение привязки

Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Привязать к сетке».

Изменение параметров сетки

  1. Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Сетка» > «Параметры сетки».

  2. Настройте параметры и нажмите кнопку «ОК», чтобы применить изменения.

    Цвет

    Задает цвет линий сетки. Щелкните образец цвета и выберите цвет из палитры или введите шестнадцатеричное значение в текстовом поле.

    Показать сетку

    Делает сетку видимой в представлении «Дизайн».

    Привязать к сетке

    Привязывает элементы страницы к линиям сетки.

    Интервал

    Управляет расстоянием между линиями сетки. Введите число и выберите в меню единицу измерения — «Пикселы», «Дюймы» или «Сантиметры».

    Отображение

    Указывает способ отображения линий: как линии или как точки.

    Примечание.

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

Использование изображения-образца

Изображение-образец можно использовать в качестве направляющей для повторного создания эскиза страницы, созданной в графическом приложении, например в Adobe Freehand или Fireworks.

Образцом может быть изображение формата PEG, GIF или PNG, размещенное в фоне области «Окно документа». Это изображение можно скрыть, задать для него непрозрачность, а также изменить его положение.

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

Размещение изображения-образца в области «Окно документа»

  1. Выполните одно из следующих действий:
    • Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Загрузить».

    • Выберите «Файл» > «Свойства страницы», затем в категории «Изображение-образец» нажмите кнопку «Обзор» (возле текстового поля «Изображение-образец»).

  2. Перейдите к своему файлу изображения и нажмите кнопку «ОК».

  3. В диалоговом окне «Свойства страницы» укажите прозрачность изображения, перетащив ползунок «Прозрачность», и нажмите кнопку «ОК».

    Чтобы в любой момент переключиться на другое изображение-образец или изменить прозрачность текущего образца, выберите «Файл» > «Свойства страницы».

Отображение или скрытие изображения-образца

Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Показать».

Изменение расположения изображения-образца

  1. Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Настроить расположение».

    • Чтобы точно задать положение изображения-образца, введите значения координат в текстовых полях «X» и «Y».

    • При каждом нажатии клавиш со стрелками изображение будет перемещаться на 1 пиксел.

    • Для перемещения изображения на 5 пикселов удерживайте клавишу Shift, нажимая клавиши со стрелками.

Сброс положения изображения-образца

  1. Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Вернуть в исходное положение».

    Изображение-образец будет возвращено в левый верхний угол области «Окно документа» (0,0).

Выравнивание изображения-образца по выделенному элементу

  1. Выделите элемент в окне «Документ».
  2. Выберите «Просмотр» > «Параметры представления "Дизайн"» > «Изображение-образец» > «Выровнять по выделению».

    Левый верхний угол изображения-образца будет выровнен по левому верхнему углу выделенного элемента.

 Adobe

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

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