Adobe Dreamweaver

Обзор


Содержание сайта
Комбинированные редакторы л. 1
Adobe Dreamweaver Обзор 

Содержание

О Creative Cloud
Новое в последних версиях

Основные шаги

Настройки программы

Интерфейс

Работа с сайтами Dreamweaver

Создание документов (страниц)

Управление файлами и папками

Заметки разработчика

Использование CSS

Макет страниц

Работа с объектами
Список объектов

Фреймы (рамки)
Использование тега DIV
Элементы AP
JavaScript
Цвет
Создание ссылок и навигация

Управление файлами и папками

Совместная работа Dreamweaver с Photoshop, Fireworks, Adobe Flash и др. приложениями

Интеграция с Business Catalyst


Поиск на сайте
Ресурсы и библиотеки
Расширения

Шаблоны

Работа с кодом

Использование сетевых служб
Adobe


Отображение XML-данных с
помощью XSLT


Создание динамических
страниц


Создание форм

Специальные возможности

Сайты для разных экранов и устройств

Предварительный просмотр
Проверка сайта

Отчеты в Dreamweaver

Программа передачи файлов (FTP)


Интерфейс

На рисунке ниже показан интерфейс Adobe Dreamweaver. В разных версиях программы могут быть некоторые отличия.


  1. Кнопка выбора макета
  2. Кнопка выбора расширений
  3. Кнопка работы с веб-сайтом
  4. Кнопка выбора интерфейса (переключатель рабочих пространств - выбор из 11 вариантов). На рисунке - классический интерфейс
  5. Строка меню (10 меню с раскрывающимися списками команд)
  6. Строка вкладок (категорий) - 9 вкладок для разных видов работ
  7. Панель инструментов. Панель инструментов меняется в зависимости от выбранной вкладки  (на рисунке - панель инструментов для вкладки Текст). Строка вкладок (п.6) и панели инструментов (п.7) вместе образуют "Панель вставка"
  8. Строка открытых документов
  9. Панель инструментов "Документ"
  10. Стандартная панель инструментов (создать, открыть, сохранить, вставить и т.д)
  11. Панель инструментов для работы с кодом
  12. Нумерация строк кода
  13. Раздел кода (при разделении окна редактирования на код и дизайн)
  14. Строка состояния (примененные тэги, скорость загрузки страницы, примененная кодировка).
  15. Инспектор свойств
  16. Группа панелей "Результаты" (поиск, справочник, проверка ссылок, отчеты и др.)
  17. Док панелей  - может содержать панели Файлы, Активы, Фрагменты кода, Базы данных, Стили, Инспектор тэгов и др. Док панелей открывается / убирается из окна программы, используя меню Окно - Скрыть панели / Показать панели.
  18. Раздел дизайна (при разделении окна редактирования на код и дизайн)

При изменении рабочего пространства (кнопка 4) интерфейс программы может отличаться от того, что показано на рисунке выше ("Классический" вариант интерфейса).

Окно редактирования (окно документа)

Окно редактирования занимает центральное место в окне программы.
Страница в окне редактирования может быть открыта в режиме кода, в режиме разделения на код и визуальный режим редактирования, в режиме Дизайна или в режиме интерактивного просмотра (более реальный вид страницы).
Подробнее

Представление «Интерактивный код»
Доступно только при просмотре документа в представлении «Интерактивный просмотр» и отображает реальный код.  Представление «Интерактивный код» не поддерживает редактирование.


Панели инструментов:

Стандартная панель инструментов (создать, открыть, сохранить, вставить и т.д)

Панель инструментов "Документ" 

Панель инструментов для работы с кодом

Панель инструментов "Вставка" - Содержит кнопки для вставки в документы различных объектов: изображений, таблиц, элементов мультимедиа и др.
Состоит из строки вкладок (категорий) и соответствующих каждой категории панелей инструментов. Может располагаться выше окна редактирования или находится в доке панелей.

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

Панель инструментов «Связанные файлы»

Панель инструментов "Навигация с помощью браузера"

Строка состояния


Док панелей

Док панелей располагается правее окна редактирования и может содержит следующие панели:
Панель инструментов "Вставка"

Стили CSS - используется для просмотра, создания, редактирования и удаления стилей CSS, а также для присоединения внешних таблиц стилей к документу.

Элементы АР - используется для работы с элементами абсолютного позиционирования

Привязки

Поведение

Компоненты

Базы данных

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

Рамки (Фреймы)

Активы (Ресурсы) - помогает упорядочить ресурсы сайта.

Фрагменты кода

Поведения сервера

Инспектор тегов - изменение и добавление атрибутов тегов

История - содержит список действий, выполненных в активном документе с момента его создания или открытия



Контекстное меню

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

Прочие элементы интерфейса

Экран (окно) приветствия Позволяет открыть недавно использовавшийся документ или создать новый.

Инспектор кода

Редактор библиотеки тегов - Библиотека тегов

Редактор тегов - применяется для просмотра, настройки и редактирования атрибутов тегов.

Навигатор по коду - содержит список исходных файлов, связанных с выделенной областью на странице.

Инспектор тегов - для изменения и добавления атрибутов и изменения атирибутов тегов

Селектор тегов - располагается в строке состояния

Панель "Фрагменты кода"

Редактор тегов Quick Tag - используется,  когда требуется быстро проверить, вставить или изменить теги HTML, не закрывая представление «Дизайн».

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

Селектор тегов Размещается в строке состояния. Показывает иерархию тегов.

Панель "Переходы CSS"

Панель "Обработка стиля"

Группа панелей "Результаты"  (Нижняя панель)
Имеет вкладки - поиск, справочник, проверка, совместимость браузера, проверка ссылок, отчеты сайта, журнал FTP, отладка сервера

Направляющие
Линейка
Направляющие макета
Сетка
Изображение-образец

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

Интерфейс Dreamweaver настраиваемый. Большинство панелей открывается / закрывается через меню Окно.
Также для открытия / закрытия некоторых панелей инструментов применяется меню Просмотр - Панели инструментов.

Подробнее о настройках интерфейса

Дополнительно:
Навигация по панелям
Новое в Dreamweaver CC - Изменения в интерфейсе


О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru