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

Освоение Dreamweaver

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

На основе ваших ответов на эти вопросы Dreamweaver открывается в рабочей среде Developer (минимальный макет, ориентированный на код) или в рабочей среде Standard (разделенный макет с визуальными инструментами и предварительным просмотром в приложении во время написания кода). 

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

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

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

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

Dreamweaver отображает главный экран при запуске или когда не открыт ни один документ.

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

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

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

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

Нажмите «Главная», чтобы вернуться на начальный экран. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

позволяет видеть как представление Code, так и представление Live для одного документа в одном окне.

позволяет видеть как представление Code, так и представление Design для одного документа в одном окне.

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

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

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

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

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

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

• Только представление Code: выберите Code
• Разделенное представление: выберите Split и выберите любой из вариантов разделения
• Режим представления: переключайтесь между представлениями Live и Design
• Переключение представлений: для переключения представлений из одного в другое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(Доступно только в режиме Code.)

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

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

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

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

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

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

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

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

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

Чтобы открыть контекстное меню, щелкните правой кнопкой мыши (Windows) или нажмите Ctrl+щелчок (Mac) на раздел кода в режиме Code или на объект в режимах Live или Design.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы сохранить пользовательское рабочее пространство:

1. Выберите «Окно» > «Макет рабочего пространства» > «Новое рабочее пространство».
2. Введите имя рабочего пространства/среды.

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

Чтобы удалить пользовательское рабочее пространство:

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

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

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

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

Вы можете настроить Dreamweaver под ваши потребности даже в многопользовательской операционной системе, такой как Windows XP или Mac OS X.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте панель Files для просмотра и управления файлами на вашем сайте Dreamweaver.

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

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

Дополнительные сведения о всех возможностях панели «Файлы» см. в разделе Manage files and folders.

CSS Designer

Панель CSS Designer (Windows > CSS Designer) — это CSS Property Inspector, который позволяет «визуально» создавать CSS-стили, файлы и задавать свойства, а также медиа-запросы.

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

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

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

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

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

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

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

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

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

Когда вы выбираете «Global» в области «@Media», отображаются все селекторы, которые не включены в медиа-запрос выбранного источника.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Fit Selection — выберите объект или текст и выберите этот параметр, чтобы заполнить окно документа выбранным содержимым.
• Fit All — заполнить окно документа всей страницей
• Fit Width — заполнить окно документа по ширине всей страницы

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

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

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

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

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

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

Связанные материалы

• Открытие связанных файлов
• Общие сведения о программировании в Dreamweaver
• Настройка параметров написания кода
• Просмотр и изменение содержимого заголовков
• Использование средств визуализации для создания макета
• Предварительный просмотр страниц
• Работа с файлами на панели «Файлы»