Рабочая среда Dreamweaver

При первом запуске Dreamweaver после установки приложения на экране появится меню QuickStart с просьбой ответить на 3 вопроса, которые позволят персонализировать рабочую среду Dreamweaver в соответствии с вашими потребностями.

На основе ответов на эти вопросы приложение Dreamweaver откроется в рабочей среде «Разработчик» (минимальная компоновка для работы с кодом) или стандартной рабочей среде (разделенная компоновка с визуальными инструментами и предварительным просмотром в приложении при написании кода). 

После выбора рабочей среды вам будет предоставлена возможность выбора цветовой темы, с которой вам комфортно работать. После этого можно начать работу.

Улучшенный экран главной страницы

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

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

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

Параметры начального экрана Dreamweaver

Для мгновенного доступа с этого экрана к руководствам по Dreamweaver нажмите «Обучение».

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

Открытие одного из начальных шаблонов, поставляемых с Dreamweaver. 

Нажмите Home (Главная страница) для возврата к начальному экрану. 

Можно видеть последние файлы, с которыми вы работали на начальном экране. Если в последнее время вы не работали ни с какими файлами, данная вкладка будет пуста.

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

Вы можете нажать Создать, чтобы начать создание новых файлов Dreamweaver. Если в вашей системе уже есть файлы, нажмите Открыть. Сведения о создании и открытии документов в Dreamweaver см. в разделе Создание и открытие файлов.

Описание рабочей среды

Рабочая среда Dreamweaver позволяет просматривать документы и свойства объектов. Она также содержит множество наиболее часто используемых операций на панелях инструментов, позволяя быстро вносить изменения в документы.

Обзор элементов рабочей среды

Рабочая среда включает следующие элементы.

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

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

Чтобы отобразить панель инструментов Стандартная, выберите пункты меню Окно > Панели инструментов > Стандартная. Панель инструментов содержит кнопки для обычных операций из меню Файл и Правка: Создать, Открыть, Сохранить, Сохранить все, Печать кода, Вырезать, Копировать, Вставить, Отменить и Вернуть.

находится в левой части окна приложения и содержит специфические для представления кнопки.

отображает текущий документ по мере его создания и редактирования.

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

размещается в строке текущего состояния в нижней части окна документа. Отображает иерархию тегов, окружающих текущее выделение. Для выбора тега и всего его содержимого щелкните нужный тег в иерархии.

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

позволяет передавать и просматривать файлы PSD в Creative Cloud. С помощью этой панели можно извлекать CSS, текст, изображения, шрифты, цвета, градиенты и измерения из файлов PSD в документ.

содержит кнопки для вставки в документы различных объектов: изображений, таблиц и элементов мультимедиа. Каждый объект представляет собой фрагмент кода HTML, который позволяет настраивать различные параметры при вводе объекта. Например, нажав кнопку Таблица на панели «Вставка», можно вставить в документ таблицу. При желании объекты также можно вставлять в документ через меню Вставка, а не только через панель Вставка.

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

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

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

Обзор окна «Документ»

В окне документа отображается текущий документ. Для переключения между представлениями документа используйте параметры просмотра на панели инструментов «Документ». 

Также можно переключаться между представлениями с помощью пунктов «Просмотр» в меню «Просмотр».

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

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

представляет собой среду ручного написания кода для ввода и редактирования HTML, JavaScript, а также кода любого другого типа.

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

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

позволяет видеть представления Код и Дизайн в одном и том же окне документа.

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

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

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

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

Используйте панель инструментов «Документ» для быстрого переключения между различными представлениями. Дополнительные сведения см. в разделе Обзор панели инструментов «Документ».

Переключаться между представлениями можно также с помощью следующих пунктов меню «Просмотр».

• Только представление кода. Выберите «Код».
• Представление «Разделение». Выберите команду «Разделить», после чего выберите любой из вариантов разделения.
• Режим просмотра. Переключение между интерактивным просмотром и представлением «Дизайн».
• Переключение между представлениями. Для переключения из одного представления в другое.

Расположение окон документов каскадом или мозаикой, а также их переупорядочивание

Если одновременно открыто много окон, их можно расположить каскадом или мозаикой.

Для расположения окон документов каскадом: выберите «Окно > Упорядочить > Каскад».

Для расположения окон документов мозаикой: 

• Выберите меню «Окно > Упорядочить > Замостить по горизонтали или Замостить по вертикали».
• Выберите меню «Окно > Упорядочить > Замостить» (Macintosh).

Если открыто более одного файла, то окна документов снабжаются закладками. Для изменения порядка окон документов перетащите закладку окна в новое место в группе.

Изменение размеров окна документа

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

При изменении размера просмотра страницы в представлении дизайна или интерактивного просмотра изменяются только размеры просмотра. Размер документа остается неизменным.

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

Чтобы изменить размеры окна документа, выберите один из размеров во всплывающем меню «Размер окна» в нижней части окна документа.

Показанный размер окна отражает внутренние измерения окна браузера без учета границ; размер монитора или мобильное устройство приведено справа.

Изменение размеров, перечисленных во всплывающем меню «Размер окна»

Добавление нового размера во всплывающее меню «Размер окна»

Обзор панели инструментов «Документ»

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

На панели инструментов Документ отображаются следующие параметры.

Отображение происходит только в представлении Код в окне Документ.

Разделяет окно Документ между представлениями Код и Интерактивный просмотр/дизайн. Представление «Дизайн» недоступно для документов c «резиновыми» макетами.

Это представление для интерактивного просмотра, которое точно отображает проекты HTML5 и их обновления в реальном времени, что позволяет отображать изменения по мере их внесения. Также в режиме интерактивного просмотра можно редактировать элементы HTML. Раскрывающийся список рядом с параметрами интерактивного просмотра позволяет переключаться между интерактивным просмотром и представлением «Дизайн». Этот раскрывающийся список недоступен для документов c «резиновыми» макетами.

Отображает представление документа таким образом, как пользователь видит его в веб-браузере. 

Обзор панели инструментов «Стандартная»

Чтобы отобразить панель инструментов Стандартная, выберите пункты меню Окно > Панели инструментов > Стандартная. Панель инструментов содержит кнопки для обычных операций из меню Файл и Правка: Создать, Открыть, Сохранить, Сохранить все, Печать кода, Вырезать, Копировать, Вставить, Отменить и Вернуть.

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

Панель инструментов Навигация с помощью браузера становится активной в режиме интерактивного просмотра (только если вы включили ее, выбрав меню Окно->Панели инструментов->Стандартная) и отображает адрес просматриваемой страницы в окне Документ. Представление Интерактивный просмотр действует как обычный браузер, поэтому даже при переходе на сайты за пределами локального сайта (например, на сайт http://www.adobe.com) Dreamweaver загружает страницу в окно Документ.

По умолчанию в представлении Интерактивный просмотр ссылки не работают. Выключение ссылок позволяет выбирать их и работать с текстом ссылок в окне Документ без перехода на соответствующие страницы. Для проверки ссылок в представлении Интерактивный просмотр можно включить единовременный или постоянный переход, выбрав Просмотр > Параметры интерактивного просмотра > Переход по ссылкам (Ctrl+щелчок по ссылке) или Непрерывный переход по ссылкам.

Обзор панели инструментов

Панель инструментов видна во всех представлениях — «Код», «Дизайн» и «Интерактивный просмотр» — и располагается вертикально по левой стороне окна «Документ». Кнопки на панели инструментов являются специфическими для представления и видны только в том случае, если они применимы к представлению, в котором вы работаете. Например, если вы работаете в режиме интерактивного просмотра, то такие специфичные для представления «Код» пункты, как «Форматировать исходный код», являются невидимыми. 

Настройка панели инструментов

Можно настроить панель инструментов в соответствии со своими потребностями, добавив нужные пункты на панель инструментов и удалив ненужные пункты из нее.

Чтобы настроить панель инструментов, выполните следующие действия.

Чтобы восстановить кнопки панели инструментов по умолчанию, нажмите «Восстановить настройки по умолчанию» в диалоговом окне «Настроить панель инструментов».

Обзор строки состояния

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

Селектор тегов

Отображает иерархию тегов, окружающих текущее выделение. Чтобы выделить тег и все его содержимое, щелкните нужный тег в иерархии. Чтобы выделить тело документа целиком, выберите <body>. Чтобы задать атрибут class или ID для тега в селекторе тегов, щелкните тег правой кнопкой (Windows) или щелкните тег, удерживая клавишу Control (Macintosh), и выберите класс или идентификатор в контекстном меню.

Панель «Вывод»

Щелкните этот значок, чтобы отобразить панель «Вывод», которая указывает на ошибки кода в документе.

Цветовое оформление кода

(Доступно только в представлении «Код».)

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

Переключение между режимами вставки и замены

(Доступно только в представлении «Код».)

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

Номер строки и столбца

(Доступно только в представлении Код.)

Отображает номер строки и столбца, в которых находится курсор.

Обзор инспектора свойств

Инспектор свойств (Окно > Свойства) позволяет проверить и отредактировать наиболее распространенные свойства для выбранного элемента страницы, такого как текст или вставленный объект.

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

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

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

Просмотр и изменение свойств элемента страницы

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

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

Чтобы открыть контекстное меню, щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Ctrl (Mac), фрагмент кода в представлении «Код» либо объект в представлении «Код» или «Дизайн».

Переупорядочение панелей в Dreamweaver

Расположение и внешний вид всех панелей в Dreamweaver можно настроить в соответствии со своими потребностями.

Прикрепление и открепление панелей

• Чтобы прикрепить палитру/панель, перетащите ее за вкладку в док и поместите сверху или снизу от других палитр/панелей либо между ними.
• Чтобы прикрепить группу палитр/панелей, перетащите ее в док за строку заголовка (пустую одноцветную строку над вкладками).
• Чтобы удалить палитру/панель или группу палитр/панелей из дока, перетащите ее из дока, удерживая за вкладку или строку заголовка. Можно перетащить палитру/панель в другой док или сделать плавающей.

Перемещение панелей

При перемещении панелей отображаются подсвеченные зоны перетаскивания — зоны, в которые можно поместить панель. Например, можно переместить палитру/панель выше или ниже в доке. Для этого нужно перетащить ее на узкую синюю зону перетаскивания, которая отображается над другой палитрой/панелью или под ней. Если перетащить палитру/панель в область, не являющуюся зоной перетаскивания, такая палитра/панель станет плавающей.

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

Добавление и удаление панелей

Если из дока удалить все палитры/панели, то он исчезнет. Можно создать док, перемещая палитры/панели в правый угол рабочего пространства/среды до появления зоны перетаскивания.

• Для удаления панели щелкните ее вкладку правой кнопкой (Windows) на ее вкладке или с удержанием клавиши Control (Mac) и выберите «Закрыть» либо удалите ее из меню «Окно».
• Чтобы добавить панель, выберите ее в меню «Окно» и закрепите в нужном месте.

Управление группами панелей

• Чтобы добавить панель в группу, перетащите вкладку этой панели в выделенную зону перетаскивания группы.
• Чтобы изменить порядок расположения палитр/панелей в группе, перетащите вкладку палитры/панели на новое место внутри группы.
• Чтобы убрать панель из группы и сделать ее плавающей, перетащите панель за ее вкладку за пределы группы.
• Чтобы переместить группу, перетащите панель заголовка (область над вкладками).

Создание ряда плавающих панелей

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

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

Изменение размеров панелей

• Чтобы свернуть или развернуть палитру/панель, группу палитр/панелей или ряд палитр/панелей, дважды щелкните вкладку. Также можно дважды щелкнуть область вкладки (пустое пространство рядом с вкладками).
• Для изменения размера палитры/панели перетащите любую ее сторону.

Свертывание и развертывание значков панели

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

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

Создание пользовательских рабочих сред

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

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

Сохранение пользовательской рабочей среды

1. Выберите «Окно > Макет рабочей среды > Создать рабочую среду».
2. Введите имя рабочей среды.

Рабочая среда сохраняется и видна в переключателе рабочих сред на панели инструментов «Документ».

Удаление пользовательской рабочей среды

Выберите «Управление рабочими средами» в переключателе рабочих сред на панели приложения, чтобы открыть диалоговое окно «Управление рабочими средами». Выберите рабочую среду и щелкните «Удалить».

Отображение рабочих сред и переключение между ними

Выберите рабочую среду в переключателе рабочих сред на панели инструментов «Документ».

Настройка Dreamweaver в многопользовательских системах

Dreamweaver можно настроить под свои задачи даже в многопользовательской операционной системе (Windows XP или Mac OS X).

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

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

Отображение документов на вкладках (только на компьютерах Mac)

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

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

Щелкните вкладку, удерживая нажатой клавишу Control, и выберите в контекстном меню команду «Переместить в новое окно».

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

1. Выберите меню «Dreamweaver > Настройки», а затем выберите категорию «Общие».
2. Выберите или отмените выбор параметра «Открыть документы» во вкладках и нажмите кнопку «ОК».

Dreamweaver не меняет отображение открытых в текущий момент документов при изменении установок. Однако те документы, которые были открыты после задания параметра, будут отображены в соответствии со сделанным выбором.

Экран приветствия отображается при запуске Dreamweaver и каждый раз, когда в приложении не открыты документы. Его можно скрыть, а затем позднее отобразить снова. Когда экран приветствия скрыт и открытые документы отсутствуют, в окне документа ничего не отображается.

Распространенные панели Dreamweaver

При работе в Dreamweaver вы имеете дело с набором панелей. Некоторые из наиболее часто используемых панелей описаны здесь.

Обзор панели «Вставка»

Панель Вставка (Окно > Вставка) содержит кнопки для создания и вставки различных объектов: таблиц, изображений и ссылок. Кнопки разделены на несколько категорий. Для переключения между ними выбирайте необходимую категорию из раскрывающегося списка вверху.

Некоторые категории содержат кнопки со всплывающими меню. Выбранный во всплывающем меню параметр становится действием по умолчанию для данной кнопки. Например, если выбрать параметр Конец строки во всплывающем меню кнопки Символ, то при последующем нажатии кнопки Символ Dreamweaver вставит символ разрыва строки. Каждый раз при выборе нового параметра из всплывающего меню действие по умолчанию для кнопки изменяется.

Панель Вставка содержит следующие категории.

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

Содержит кнопки для создания форм и вставки элементов формы, таких как поиск, месяц и пароль.

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

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

Содержит кнопки для создания сайтов, использующих jQuery Mobile.

Позволяет вставлять такие элементы jQuery UI, как «гармошка», ползунки и кнопки.

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

Вставка объекта

Для вставки объекта с помощью панели «Вставка»:

Редактирование настроек панели «Вставка»

Добавление и удаление элементов, а также управление элементами из категории «Избранное» панели «Вставка»

Обзор панели «Файлы»

Панель Файлы позволяет просматривать файлы и работать с ними на сайте Dreamweaver.

Панель «Файлы» позволяет просматривать файлы и папки, проверять, связаны они с сайтом Dreamweaver или нет, и выполнять стандартные операции с файлами, такие как открытие или перемещение.

С помощью панели «Файлы» также можно управлять файлами и перемещать их на удаленный сервер или с него. 

Дополнительные сведения обо всех операциях с панелью «Файлы» см. в разделе Управление файлами и папками.

Конструктор CSS

Панель конструктора CSS (Окно > Конструктор CSS) ― это инспектор свойств CSS, который позволяет в визуальном режиме создавать стили и файлы CSS, а также задавать свойства и формировать медиазапросы.

Для отмены или повтора любых действий, совершаемых в конструкторе CSS, можно использовать сочетания клавиш Ctrl/Cmd + Z и Ctrl/Cmd + Y соответственно. Все изменения автоматически отображаются в режиме интерактивного просмотра, при этом также происходит обновление соответствующего файла CSS. Чтобы уведомить вас об изменении связанного файла, вкладка соответствующего файла подсвечивается некоторое время (около 8 секунд).

Панель конструктора CSS состоит из следующих областей и параметров.

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

Этот режим не реагирует на выделение. Это означает, что при выборе элемента на странице связанный селектор, медиазапрос или таблица CSS не будут выделены в конструкторе CSS.

Режим «Текущий». Отображает результат применения всех стилей к элементу, выбранному в представлении «Дизайн» или режиме интерактивного просмотра для текущего документа. При использовании этого режима для CSS-файла в представлении кода отображаются все свойства для селектора в фокусе.

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

Область «Источники». В этой области перечислены все связанные с документом таблицы стилей CSS. С помощью этой области можно создать таблицу стилей и прикрепить ее к документу либо определить стили внутри документа.

@Media. В этой области перечислены все медиазапросы, которые имеются в источнике, выбранном в области «Источники». Если не выбрать определенную таблицу CSS, в этой области будут отображены все медиазапросы, связанные с документом.

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

При выборе параметра «Глобально» в области «@Медиа» отображаются все селекторы, которые не включены в медиазапрос выбранного источника.

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

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

Примечание. При выборе элемента страницы в области «Селекторы» выделяется самый точный селектор. Чтобы отобразить список свойств конкретного селектора, выберите его имя на панели.

Для просмотра всех селекторов в области «Источники» выберите «Все источники». Чтобы просмотреть селекторы, которые не относятся к какому-либо медиазапросу в выбранном источнике, щелкните «Глобально» в области «@Медиа».

Обзор направляющих

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

• Изменить окно документа до нужного размера, чтобы посмотреть, как элементы будут размещены на странице.

• Применение изображения-образца в качестве фона страницы позволяет воспроизвести дизайн, созданный в графическом или дизайнерском приложении вроде Adobe® Photoshop® или Adobe® Fireworks®.

• Линейки и направляющие обеспечивают Средства визуализации точного задания положения и размеров элементов страницы.

• Сетка позволяет задать точную позицию и размеры элементов с абсолютным позиционированием (AP).

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

Увеличение или уменьшение масштаба страницы

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

Чтобы увеличить или уменьшить масштаб страницы, выберите меню «Просмотр > Параметры представления "Дизайн" > Масштаб», после чего выберите любую из доступных пунктов масштабирования.

Можно выбрать из множества пунктов масштабирования. Можно также нажать кнопку:

• По выделению. Выделите объект или текст, после чего выберите этот пункт, чтобы заполнить окно документа выбранным содержимым.
• По всей области. Заполнение окна документа всей страницей
• По ширине. Заполнение окна документа по ширине страницы

Установка для Dreamweaver параметров «Общие»

Установка параметров шрифтов для документов в Dreamweaver

Кодировка документа определяет, как этот документ выглядит в браузере. Установки шрифтов Dreamweaver позволяют просмотреть заданную кодировку в предпочтительном шрифте и кегле. Шрифты, выбранные в диалоговом окне «Установки шрифтов», применяются только к отображению шрифтов в Dreamweaver. Они не влияют на отображение документов в браузерах посетителей сайта. Изменить отображение шрифтов в браузере можно с помощью инспектора свойств или применением правил CSS.

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

Настройка цветов выделения в Dreamweaver

Установки выделения позволяют настроить цвета, которыми Dreamweaver выделяет области шаблонов, элементы библиотек, теги сторонних разработчиков, элементы макета и кода.