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

Освоение Dreamweaver

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

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

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

Примечание.

Эти настройки можно изменить позднее в любой момент с помощью диалогового окна «Правка > Параметры».

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

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

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

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

Рабочая среда «Начало работы» в Dreamweaver
Рабочая среда «Начало работы» в Dreamweaver

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

Обучение

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

Быстрый запуск

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

Начальные шаблоны

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

Главная

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

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

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

Примечание.

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

Если показывать начальный экран не требуется, снимите флажок «Показывать начальный экран» в диалоговом окне «Параметры > Общее».

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

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

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

Рабочая среда Dreamweaver (CC)
Рабочая среда Dreamweaver

A. Панель приложений B. Панель инструментов «Документ» C. Окно документа D. Переключатель рабочих сред E. Панели F. Представление кода G. Строка состояния H. Селектор тегов I. Интерактивный просмотр J. Панель инструментов 

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

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

Панель приложений

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

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

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

Панель инструментов «Стандартная»

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

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

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

Окно документа

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

Инспектор свойств

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

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

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

Панели

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

Панель Extract

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

Панель «Вставка»

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

Панель «Файлы»

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

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

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

Панель конструктора CSS

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

Примечание.

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

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

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

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

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

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

Представление «Дизайн»

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

Представление кода

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

Код — Код

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

Код — Интерактивный просмотр

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

Код — Дизайн

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

Интерактивный код

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Варианты изменения размеров окна документа
Варианты изменения размеров окна документа

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

Примечание.

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

Примечание.

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

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

  1. Выберите пункт «Изменить размеры» во всплывающем меню «Размер окна».

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

  3. Щелкните текстовое поле «Описание» и введите пояснение к заданному размеру.

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

  1. Выберите пункт «Изменить размеры» во всплывающем меню «Размер окна».

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

  2. Щелкните по пустому месту под последним значением в столбце «Ширина».

  3. Введите значения «Ширина» и «Высота».

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

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

    Например, можно ввести SVGA или «обычный ПК» рядом с записью для монитора с разрешением 800 x 600 пикселов и диагональю 17 дюймов, Mac рядом с записью для монитора с разрешением 832 x 624 пикселов. Для большинства мониторов можно задавать разные разрешения в пикселах.

  5. Нажмите кнопку «Применить» и закройте диалоговое окно.

    Размер нового окна теперь доступен для использования во всплывающем меню «Размер окна».

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

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

Панель инструментов «Документ» (CC)
Панель инструментов «Документ»

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

Представление кода.

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

Представление «Разделение»

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

Интерактивный просмотр.

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

Представление «Дизайн».

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

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

Панель инструментов «Стандартная».

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

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

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

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

A. Элементы управления браузера B. Адресная строка 

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

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

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

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

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

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

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

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

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

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

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

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

Строка состояния (CC)
Строка состояния

A. Селектор тегов B. Панель «Вывод» C. Цветовое оформление кода D. Переключение между режимами вставки и замены E. Номер строки и столбца 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инспектор свойств (CC)
Инспектор свойств

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

Примечание.

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

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

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

  1. Выберите элемент страницы в окне документа.

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

  2. Измените любое свойство в инспекторе свойств.

    Примечание.

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

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

    • Щелкните за пределами текстовых полей редактирования свойств.
    • Нажмите клавишу Enter (Windows) или Return (Macintosh).
    • Нажмите клавишу Tab для переключения на другое свойство.

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

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

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

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

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

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

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

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

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

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

Примечание.

Чтобы избежать закрепления палитры/панели при перемещении, удерживайте клавишу Ctrl (в Windows) или Command (в Mac OS). Для отмены операции при перемещении палитры/панели нажмите клавишу Esc.

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

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

  • Для удаления панели щелкните ее вкладку правой кнопкой (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

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

Форма

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

Шаблоны

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

Компоненты Bootstrap

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

jQuery Mobile

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

jQuery UI

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

Избранное

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

Примечание.

 При работе с некоторыми типами файлов (в частности, XML, JavaScript, Java и CSS) панель «Вставка» и представление «Дизайн» недоступны, поскольку в такие файлы кода нельзя вставлять объекты.

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

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

  1. Выберите соответствующую категорию из всплывающего меню «Категория» на панели «Вставка».

  2. Выполните одно из следующих действий.

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

    • Щелкните стрелку на кнопке и выберите в меню нужный параметр.

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

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

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

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).

  2. В категории «Общие» диалогового окна «Настройки» отмените выбор параметра «Показывать диалоговое окно при вставке объектов», чтобы избежать появления диалоговых окон при вставке изображений, таблиц, сценариев, заголовков и других объектов. Этого же эффекта можно добиться, удерживая нажатой клавишу Ctrl (Windows) или Option (Macintosh) при создании объекта.

Примечание.

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

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

  1. Выберите любую категорию на панели «Вставка».

  2. Щелкните правой кнопкой мыши (Windows) либо щелкните, удерживая клавишу Control, (Macintosh) в области, где находятся кнопки, и выберите «Настроить избранное».

  3. В диалоговом окне «Настройка избранных объектов» внесите необходимые изменения и нажмите кнопку «ОК».

    Чтобы добавить объект, дважды щелкните его в области «Доступные объекты» слева либо выделите и нажмите стрелку между двумя областями.

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

    Примечание.

    Объекты можно добавлять только по одному за раз. Выделить для добавления категорию целиком нельзя.

    • Чтобы удалить объект или разделитель, дважды щелкните его в области «Избранные объекты» справа либо выделите и нажмите кнопку «Удалить выбранный объект из списка избранных объектов» сверху.
    • Чтобы переместить объект, выделите его в области «Избранные объекты» справа, а затем нажмите кнопку «Вверх» или «Вниз» в верхней части области.
    • Чтобы добавить после объекта разделитель, выделите объект в области «Избранные объекты» справа, а затем нажмите кнопку «Добавить разделитель» снизу области.
  4. Если категория «Избранное» панели «Вставка» в данный момент не используется, выберите эту категорию, чтобы увидеть внесенные изменения.

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

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

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

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

Панель «Файлы»
Панель «Файлы»

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

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

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

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

Панель конструктора CSS (CC)
Панель конструктора CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

Увеличить масштаб можно также без использования инструмента «Масштаб», нажав сочетание клавиш Ctrl + «=» (Windows) или Command + «=» (Macintosh). Уменьшить масштаб можно также без использования инструмента «Масштаб», нажав сочетание клавиш Ctrl + «–» (Windows) или Command + «–» (Macintosh).

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

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).

  2. Задайте любой из следующих параметров.

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

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

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

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

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

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

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

    Показывать диалоговое окно при вставке объектов. Определяет, будет ли Dreamweaver запрашивать дополнительную информацию при вставке изображений, таблиц, роликов Shockwave и некоторых других объектов через панель «Вставка» или меню «Вставка». Если этот параметр отключен, диалоговое окно не отображается, и поэтому исходный файл для изображения, число строк и столбцов для таблицы и другие параметры будет необходимо задать в инспекторе свойств. Для изображений прокрутки и HTML Fireworks при вставке объекта всегда появляется диалоговое окно (независимо от значения этого параметра). Чтобы временно изменить значение этого параметра, при вставке и создании объектов удерживайте нажатой клавишу Ctrl (Windows) или Command (Macintosh).

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

    Переключиться в стиль простого абзаца после заголовка. Указывает, что при нажатии клавиши Enter (Windows) или Return (Macintosh) в конце абзаца заголовка в представлении «Дизайн» или «Интерактивный просмотр» будет создан новый абзац, ограниченный тегом p. (Абзац заголовка — это абзац, который ограничен тегами h1, h2 и т. п.) Если этот параметр не установлен, при нажатии клавиши Enter (Return) в конце абзаца заголовка будет создан новый абзац с тем же тегом заголовка, что позволит ввести несколько заголовков подряд, а затем вернуться назад и ввести остальной текст.

    Разрешить несколько последовательных пробелов. Указывает, что при вводе двух и более пробелов в представлении «Дизайн» или «Интерактивный просмотр» будут создаваться неразрывные пробелы. (Например, предложения можно разделить двумя пробелами, как на пишущей машинке). Этот параметр предназначен главным образом для тех, кто привык работать с текстовыми процессорами. Если этот параметр не выбран, любое число пробелов интерпретируется как один пробельный символ (поскольку именно таким образом их трактуют браузеры).

    Использовать теги <strong> и <em> вместо <b> и <i>. Указывает, что Dreamweaver будет применять тег strong при выполнении действия, которое обычно предполагает применение тега b, и тег em в тех ситуациях, когда должен был быть применен тег i. К таким действиям относится нажатие кнопки «Полужирный» или «Курсив» в инспекторе свойств текста в режиме HTML, а также выбор команды «Формат» > «Стиль» > «Полужирный» или «Формат» > «Стиль» > «Курсив». Чтобы использовать в документе теги b и i, отмените выбор этого параметра.

    Примечание. Консорциум World Wide Web не рекомендует пользоваться тегами b и i. Теги strong и em более содержательны, чем b и i.

    Выводить предупреждение при размещении редактируемых областей внутри тегов <p> или <h1>–<h6>. Определяет необходимость вывода предупреждающего сообщения при сохранении шаблона Dreamweaver, содержащего изменяемую область в абзаце или теге заголовка. Это сообщение говорит, что пользователь шаблона не сможет создавать в области редактирования абзацы. По умолчанию параметр установлен.

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

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

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

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

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

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

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

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Mac).

  2. В списке категорий слева выберите пункт «Шрифты».

  3. Выберите тип кодировки (например, западноевропейская или японская) в списке «Параметры шрифта».

    Примечание.

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

  4. Выберите шрифт и кегль для использования в каждой из категорий выбранной кодировки.

    Примечание.

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

    Пропорциональный шрифт.

    Шрифт, которым Dreamweaver отображает обычный текст (то есть текст в абзацах, заголовках и таблицах). Значение по умолчанию зависит от шрифтов, установленных в системе. Например, на большинстве американских компьютеров шрифтом по умолчанию будет Times New Roman 12 pt. (средний) в среде Windows или Times 12 pt. в Mac OS.

    Фиксированный шрифт.

    Шрифт, которым Dreamweaver отображает текст внутри тегов pre, code и tt. Значение по умолчанию зависит от шрифтов, установленных в системе. Например, на большинстве американских компьютеров шрифтом по умолчанию будет Courier New 10 pt. (мелкий) в среде Windows или Monaco 12 pt. в Mac OS.

    Представление кода.

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

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

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

  1. Выберите «Правка > Настройки», а затем выберите категорию «Выделение».

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

  3. Около объекта, подсветку которого надо активировать или деактивировать, установите или снимите флажок «Показать».

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет