Панель «Вставка» содержит кнопки для создания и вставки различных объектов, например, таблиц и изображений. Кнопки организованы по категориям.
Скрытие и отображение панели «Вставка»
❖ Выберите «Окно» > «Вставка» Примечание. При работе с некоторыми типами файлов (в частности, XML, JavaScript, Java и CSS) панель «Вставка» и представление «Дизайн» недоступны, поскольку в такие файлы кода нельзя вставлять объекты.
Отображение панели «Вставка» в виде горизонтальной панели
В отличие от остальных панелей Dreamweaver, панель «Вставка» можно перетащить из пристыкованного состояния по умолчанию и разместить горизонтально в верхней части окна документа. При этом она преобразуется в панель инструментов (хотя ее нельзя скрывать и отображать таким же образом, как другие панели инструментов).
1 Щелкните вкладку панели «Вставка» и перетащите ее в верхнюю часть окна документа.
2 Отпустите кнопку мыши при появлении синей горизонтальной линии в верхней части окна документа.
Примечание. Горизонтальная панель «Вставка» также является стандартной частью классического рабочего пространства. Чтобы переключиться на классическое рабочее пространство, выберите соответствующий вариант для переключателя рабочих пространств на панели приложений.
Возвращение горизонтальной панели «Вставка» в группу панелей
1 Щелкните захват горизонтальной панели «Вставка» (в левой части панели «Вставка») и перетащите панель к группе панелей. 2 Установите панель «Вставка» на место и отпустите кнопку мыши. Место размещения панели будет отмечено синей линией.
Отображение категорий горизонтальной панели «Вставка» в виде вкладок ❖ Щелкните стрелку рядом с названием категории в левой части горизонтальной панели «Вставка», затем выберите пункт «Показать как вкладки».
Отображение категорий горизонтальной панели «Вставка» в виде меню ❖ Щелкните вкладку на горизонтальной панели «Вставка» правой кнопкой мыши (Windows) или удерживая нажатой клавишу Control (Macintosh) и выберите пункт «Показать как меню».
Содержание панели «Вставка»
Набор команд на панели зависит от выбранной категории (или вкладки).
Устройство и назначение рабочих окон и панелей в мощном редакторе Dreamweaver
Это первый урок посвященный программе Dreamweaver. В нем мы рассмотрим из чего состоит рабочая область программы, как ей управлять, а также разберем назначение каждой панели.
Мы рассмотрим все основные элементы, которые вам точно пригодятся при работе в этой программе.
И так начнем по порядку.
Когда вы только что установили программу и в первый раз ее запустили, то перед вами появится окно под названием Workspace Setup, в котором вам будет предложено выбрать вид рабочей среды. Данное окно изображено на рисунке ниже:
Как вы видите окно разделено на две части в первой части нам предлагают выбрать среду Dreamweaver MX Workspace, на рисунке вы можете наблюдать как в этом случае будут расположены все элементы на странице. Этот вид является наиболее новым и удобным, поэтому я вам рекомендую выбрать именно этот вид рабочей среды.
Во второй же части окна нам предлагают выбрать вид Dreamweaver 4 Workspace это старый вид и он менее удобен.
После того как вы выбрали вид рабочей среды и нажали на кнопку “ok” перед вами загрузится сама программа и предложит вам создать новый документ. Для того чтобы создать новый документ пройдите в пункт меню File >> New…
Создадим к примеру простой HTML документ, поэтому слева выберите Basic Page (Базовая страница), а справа HTML, затем нажмите на кнопку Create (Создать). Смотрите рисунок:
После этого перед вами появится главное окно программы, содержащее различного рода панели и окна. В уменьшенном виде оно отображено на рисунке:
Как видите рабочая область представлена окном документа вокруг которого сверху, с права и снизу находятся различного рода панели, содержащие необходимые инструменты. Разберем их по порядку:
1. Insert (панель объектов). Эта панель служит для быстрой вставки в страницу различных объектов. Это могут быть изображения, таблицы, элементы flash, ссылки и т. д. Как вы видите, на панели имеется большое количество вкладок, это позволяет вмещать в нее большое количество объектов.
2. Document (инструментарий документа). Эта панель содержит некоторые наиболее часто используемые элементы. Это кнопки переключения просмотра кода или дизайна страницы, индикатор динамической проверки совместимости с разными браузерами и некоторые другие.
3. Panel groups (группа панелей). Представляет собой группу панелей собранных вертикально одна пот другой. Каждая из панелей выполняет свои определенные функции.
4. Tag selector (секция тегов). В этой панели отображаются все теги, которые вы использовали при создании страницы. В этой секции они располагаются в порядке их использования на странице. При помощи этой секции мы имеем возможность быстро выделить тот или иной участок вашего кода.
Для этого просто необходимо щелкнуть в секции тегов по интересующему вас тегу и текст, заключенный в этот тег выделится. В результате можно быстро находить те элементы страницы, которые нас интересуют.
5. Properties (редактор свойств). Данная панель является одной из основных и самых важных. Вы будете пользоваться ею практически постоянно. При помощи инструментов размещенных на данной панели мы можем задавать параметры для всех элементов страницы.
Скорее всего, что у вас включен сжатый вариант данной панели, в котором определенные настройки скрыты. Для того чтобы развернуть панель полностью найдите в правом нижнем углу панели стрелочку направленную в низ ( ) и щелкните по ней.
6. В этом месте расположено несколько секций. Это секция масштабирования страницы. С помощью ее вы можете увеличить или уменьшить размер отображения страницы.
Далее следует секция разрешений окна. Щелкнув по ней появится окно с различными значениями, где вы можете выбрать то или иное разрешение, которое может быть установлено на мониторе посетителя. В результате вы можете посмотреть, как будет выглядеть страница на мониторе с тем или иным разрешением.
Ну и последняя секция это – секция размера страницы и скорости загрузки. ( ) Здесь отображается примерный размер созданной вами страницы, а также скорость ее загрузки при таком размере и скорости 28,8 Кбит/с.
Dreamweaver это программа позволяющая работать не с одним а сразу с большим количеством файлов. Вы можете открыть в нем какое угодно количество страниц и работать со всеми страницами одновременно.
Поэтому здесь есть еще одна небольшая панелька на которой располагаются вкладки всех открытых в данный момент файлов. Расположена она над панелью Document (инструментарий документа). ( ) Кликая по эти вкладкам мы можем переходить с одной страницы на другую.
Теперь рассмотрим, какими свойствами обладают сами панели. Все панели не закреплены жестко. В программе предусмотрены различные способы их переноса, растяжения и выключения.
На рисунке приведена вырезка верхней панели Insert. Красным обведены темные точки при помощи этих точек вы можете перемещать эту панель, куда вам будет удобно. Для этого щелкните по ним один раз и не отпуская клавишу можете перетянуть их в любое место.
Таким образом, Вы можете группировать различные панели. Например, перетащив панель Insert вниз, к панели Propertes вы их совместите и у вас уже две панели будут находиться в низу. Таким же образом Вы можете перетащить панель обратно вверх.
Как Вы могли уже заметить, каждая панель носит свое имя, рядом с которым находится черная стрелочка, направленная в низ. На рисунке обведено зеленым. Щелкая по названию с такой стрелочкой, Вы можете сворачивать панели. Это очень удобно, если вам нужно временно освободить рабочее пространство.
Щелкнув по названию повторно, панель опять появится. Кроме того существуют еще две небольшие кнопки со стрелками, одна находится в низу страницы, а другая справа. Выглядят они так:
нижняя( ) и правая ( ).
Потянув за эти кнопки вы можете растянуть ваши панели по ширине как вам удобно, а если просто по ним щелкните то панель свернется.
Назначение каждого элемента всех панелей мы не будем здесь рассматривать, потому, как просто перечислять их назначение ничего не даст, поэтому все они будут рассмотрены на практике в следующих уроках.
Панели инструментов «Стандартная» и «Документ» предназначены для выполнения стандартных операций редактирования и операций с документами, панель инструментов «Создание кода» — для быстрого ввода кода, а панель «Обработка стиля» — для просмотра страницы в том виде, в котором она будет отображена на других типах носителей. При необходимости можно скрыть или отобразить эти панели инструментов.
• Выберите «Просмотр» > «Панели инструментов», а затем выберите нужную панель. • Щелкните правой кнопкой мыши (Windows) или удерживая нажатой клавишу «Control» (Macintosh) любую из панелей, а затем выберите панель из контекстного меню.
Панель инструментов Документ
Для Adobe Dreamweaver CC
A. Представление «Код» B. Показать отображения структуры и кода C. Представление «Дизайн» D. Интерактивный просмотр E. Просмотр/отладка в браузере F. Заголовок документа G. Управление файлами
Для Adobe Dreamweaver CS6, 12.1, 12.2
Строка состояния содержит Селектор тегов, Инструмент «Выделение», Инструмент «Рука», Инструмент «Масштаб», «Размер окна» (для режима «Дизайн»), Размер документа и примерное время загрузки, кодировку документа.
Помимо предварительно заданных и заказных размеров Dreamweaver также приводит список размеров из мультимедийного запроса. При выборе размера, соответствующего мультимедийному запросу, Dreamweaver отображает страницу с помощью мультимедийного запроса. Также можно изменять ориентацию страницы для просмотра страницы для мобильных устройств, когда макет страницы изменяется в зависимости от того, как пользователь держит устройство. 6. Размер документа и время загрузки Отображает примерный размер документа и приблизительное время загрузки страницы, включая изображения и все остальные связанные файлы. 7. Индикатор кодировки Отображает кодировку текста в текущем документе
Отчеты в Dreamweaver запускают для нахождения содержимого, диагностики неисправностей или проверки содержимого.
Можно сформировать следующие типы отчетов: Поиск Позволяет искать теги, атрибуты и конкретный текст внутри тегов. Справочные материалы Позволяет выполнить поиск полезной справочной информации. Проверка Позволяет проверять код и синтаксические ошибки. Совместимость браузера Позволяет проверять в документах код HTML, чтобы выявить теги или атрибуты, которые не поддерживаются целевыми браузерами. Проверка ссылок Позволяет искать и исправлять поврежденные, внешние и потерянные ссылки. Отчеты сайта Предоставляет возможность улучшить рабочие процессы и протестировать параметры HTML сайта. Отчеты о рабочих процессах включают контролируемые и недавно измененные примечания, а также заметки разработчика; отчеты HTML включают комбинируемые вложенные теги шрифта, специальные возможности, отсутствующий текст атрибута «Alt», лишние вложенные теги, удаляемые пустые теги и документы без названия. Журнал FTP Позволяет просматривать операции передачи файлов по FTP. Серверная отладка Позволяет просматривать отладочную информацию приложения Adobe ColdFusion.
Навигация по панелям
1 Находясь в окне документа, нажмите клавиши «Ctrl» и «F6» для смещения фокуса на панель. Пунктир вокруг заголовка панели обозначает, что фокус находится на панели. Программа чтения с экрана озвучивает заголовок панели, получившей фокус. 2 Одновременно нажимайте клавиши «Ctrl» и «F6» до тех пор, пока фокус не сместится на необходимую панель. (Для перемещения между панелями в обратном порядке одновременно нажимайте клавиши «Ctrl», «Shift» и «F6».) 3 Если нужная вам панель закрыта, используйте сочетание клавиш в меню Windows для отображения этой панели, а потом одновременно нажмите «Control» и «F6». Если нужная панель открыта, но не развернута, переместите фокус на заголовок панели и нажмите клавишу «Пробел». Чтобы ее свернуть, нажмите клавишу «Пробел» еще раз. 4 Используйте клавишу «Tab» для перемещения по элементам управления панели. 5 Клавиши со стрелками используются в следующих случаях. • Если элемент управления имеет варианты выбора, для перемещения между вариантами используйте клавиши со стрелками, а для выбора значения — клавишу «Пробел». • Если на панели находятся вкладки, открывающие другие панели, расположите фокус на открытой вкладке.
На рисунке ниже показан интерфейс Adobe Dreamweaver. В разных версиях программы могут быть некоторые отличия.
Окно редактирования (окно документа)
Окно редактирования занимает центральное место в окне программы. Страница в окне редактирования может быть открыта в режиме кода, в режиме разделения на код и визуальный режим редактирования, в режиме Дизайна или в режиме интерактивного просмотра (более реальный вид страницы). Подробнее
Представление «Интерактивный код» Доступно только при просмотре документа в представлении «Интерактивный просмотр» и отображает реальный код. Представление «Интерактивный код» не поддерживает редактирование.
Стандартная панель инструментов (создать, открыть, сохранить, вставить и т.д)
Панель инструментов «Связанные файлы»
Док панелей располагается правее окна редактирования и может содержит следующие панели: Панель инструментов «Вставка»
Примечание. Dreamweaver предоставляет много других панелей, инспекторов и окон. Чтобы открыть панели, инспекторы и окна, используйте меню « Окно ».
Прочие элементы интерфейса
Экран (окно) приветствия Позволяет открыть недавно использовавшийся документ или создать новый.
Панель приложений В верхней части окна приложения находится переключатель рабочих пространств, меню (только в Windows) и другие элементы управления.
Селектор тегов Размещается в строке состояния. Показывает иерархию тегов.
Узнайте о рабочей среде Dreamweaver, доступных вам представлениях и рабочих средах, а также о различных панелях и панелях инструментов в Dreamweaver.
При первом запуске Dreamweaver после установки приложения на экране появится меню QuickStart с просьбой ответить на 3 вопроса, которые позволят персонализировать рабочую среду Dreamweaver в соответствии с вашими потребностями.
На основе ответов на эти вопросы приложение Dreamweaver откроется в рабочей среде «Разработчик» (минимальная компоновка для работы с кодом) или стандартной рабочей среде (разделенная компоновка с визуальными инструментами и предварительным просмотром в приложении при написании кода).
После выбора рабочей среды вам будет предоставлена возможность выбора цветовой темы, с которой вам комфортно работать. После этого можно начать работу.
Эти настройки можно изменить позднее в любой момент с помощью диалогового окна «Правка > Параметры».
Улучшенный экран главной страницы
Экран главной страницы в Dreamweaver предоставляет быстрый доступ к последним использованным файлам, типам файлов и начальным шаблонам.
Кроме того, в этой рабочей среде может отображаться содержимое, соответствующее вашим требованиям (зависит от состояния подписки).
Начальный экран отображается на экране главной страницы Dreamweaver или при отсутствии открытых документов.
Параметры начального экрана Dreamweaver
Для мгновенного доступа с этого экрана к руководствам по Dreamweaver нажмите «Обучение».
Начните создавать документы в Dreamweaver, выбрав один из отображаемых типов файлов.
Открытие одного из начальных шаблонов, поставляемых с Dreamweaver.
Нажмите Home (Главная страница) для возврата к начальному экрану.
Можно видеть последние файлы, с которыми вы работали на начальном экране. Если в последнее время вы не работали ни с какими файлами, данная вкладка будет пуста.
Также можно использовать функции поиска с помощью значка «Поиск» в верхнем правом углу экрана. При вводе поискового запроса приложение отображает последние файлы, ресурсы Creative Cloud, ссылки на справочные разделы и готовые изображения, соответствующие вашему запросу.
Данный начальный экран включен и открывается по умолчанию при запуске приложения.
Если показывать начальный экран не требуется, снимите флажок «Показывать начальный экран» в диалоговом окне «Параметры > Общее».
Вы можете нажать Создать, чтобы начать создание новых файлов Dreamweaver. Если в вашей системе уже есть файлы, нажмите Открыть. Сведения о создании и открытии документов в Dreamweaver см. в разделе Создание и открытие файлов.
Описание рабочей среды
Рабочая среда Dreamweaver позволяет просматривать документы и свойства объектов. Она также содержит множество наиболее часто используемых операций на панелях инструментов, позволяя быстро вносить изменения в документы.
A. Панель приложений B. Панель инструментов «Документ» C. Окно документа D. Переключатель рабочих сред E. Панели F. Представление кода G. Строка состояния H. Селектор тегов I. Интерактивный просмотр J. Панель инструментов
Обзор элементов рабочей среды
Рабочая среда включает следующие элементы.
находится в верхней части окна приложения и содержит переключатель рабочих сред, меню (только в Windows) и другие элементы управления приложением.
Панель инструментов «Документ»
Панель инструментов «Стандартная»
находится в левой части окна приложения и содержит специфические для представления кнопки.
отображает текущий документ по мере его создания и редактирования.
позволяет увидеть и изменить множество свойств выбранного объекта или текста. Каждый объект имеет различные свойства.
позволяет передавать и просматривать файлы PSD в Creative Cloud. С помощью этой панели можно извлекать CSS, текст, изображения, шрифты, цвета, градиенты и измерения из файлов PSD в документ.
позволяет управлять файлами и папками, когда они являются частью сайта Dreamweaver или находятся на удаленном сервере. Панель Файлы также дает вам доступ к файлам на локальном диске. Дополнительные сведения см. в разделе Управление файлами и папками.
Панель «Фрагменты кода»
позволяет сохранять и повторно использовать созданные фрагменты кода на нескольких веб-страницах, различных сайтах и установках Dreamweaver (с помощью синхронизации настроек). Дополнительные сведения см. в разделе Повторное использование фрагментов кода.
Панель конструктора CSS
представляет собой инспектор свойств CSS, позволяющий в визуальном режиме создавать стили и файлы CSS, а также задавать свойства вместе с мультимедийными запросами.
Dreamweaver предоставляет много других панелей, инспекторов и окон. Чтобы открыть панели, инспекторы и окна, используйте меню «Окно».
Обзор окна «Документ»
В окне документа отображается текущий документ. Для переключения между представлениями документа используйте параметры просмотра на панели инструментов «Документ».
Также можно переключаться между представлениями с помощью пунктов «Просмотр» в меню «Просмотр».
отображает реалистичное представление документа в браузере и позволяет взаимодействовать с документом именно таким образом, как это будет происходить в браузере. В режиме интерактивного просмотра можно непосредственно редактировать элементы HTML и сразу же просматривать изменения. Дополнительные сведения о редактировании в режиме интерактивного просмотра см. в разделе Редактирование элементов HTML в режиме интерактивного просмотра.
представляет собой среду разработки для визуального отображения, редактирования и быстрой разработки приложений. В этом режиме Dreamweaver отображает полностью редактируемое визуальное представление документа, похожее на представление страницы, отображаемой в браузере.
представляет собой среду ручного написания кода для ввода и редактирования HTML, JavaScript, а также кода любого другого типа.
Код — Интерактивный просмотр
позволяет видеть представления «Код» и «Дизайн» в одном и том же окне документа.
позволяет видеть представления Код и Дизайн в одном и том же окне документа.
Когда окно Документ развернуто на весь экран (по умолчанию), в верхней части окна Документ отображаются вкладки с именами всех открытых документов. Если в файле есть несохраненные изменения, Dreamweaver отображает звездочку после имени файла.
Переключение между представлениями
Используйте панель инструментов «Документ» для быстрого переключения между различными представлениями. Дополнительные сведения см. в разделе Обзор панели инструментов «Документ».
Переключаться между представлениями можно также с помощью следующих пунктов меню «Просмотр».
Расположение окон документов каскадом или мозаикой, а также их переупорядочивание
Если одновременно открыто много окон, их можно расположить каскадом или мозаикой.
Для расположения окон документов каскадом: выберите «Окно > Упорядочить > Каскад».
Для расположения окон документов мозаикой:
Если открыто более одного файла, то окна документов снабжаются закладками. Для изменения порядка окон документов перетащите закладку окна в новое место в группе.
Изменение размеров окна документа
Строка состояния отображает текущие размеры окна документа (в пикселах). Чтобы сконструировать страницу, которая наилучшим образом выглядит при определенных размерах, следует настроить окно документа в соответствии с заранее заданными размерами, изменить их или создать эти размеры.
При изменении размера просмотра страницы в представлении дизайна или интерактивного просмотра изменяются только размеры просмотра. Размер документа остается неизменным.
Помимо предварительно заданных и пользовательских размеров Dreamweaver также приводит список размеров из мультимедийного запроса. При выборе размера, соответствующего мультимедийному запросу, Dreamweaver отображает страницу с помощью мультимедийного запроса. Также можно изменять ориентацию страницы для просмотра страницы для мобильных устройств, когда макет страницы изменяется в зависимости от того, как пользователь держит устройство.
Чтобы изменить размеры окна документа, выберите один из размеров во всплывающем меню «Размер окна» в нижней части окна документа.
Показанный размер окна отражает внутренние измерения окна браузера без учета границ; размер монитора или мобильное устройство приведено справа.
Для менее точного изменения размеров используйте стандартные методы изменения размеров окон операционной системы. Например, потяните правый нижний угол окна.
(Только Windows) Документы в окне документа по умолчанию развернуты на весь экран. Изменение документа, развернутого на весь экран, не поддерживается. Чтобы свернуть документ, нажмите соответствующую кнопку в верхнем правом углу документа.
Изменение размеров, перечисленных во всплывающем меню «Размер окна»
Выберите пункт «Изменить размеры» во всплывающем меню «Размер окна».
Щелкните любое значение ширины или высоты в списке «Размер окна» и введите новое значение. Чтобы для окна документа настраивалась только ширина (оставляя высоту неизменной), выделите значение высоты и удалите его.
Щелкните текстовое поле «Описание» и введите пояснение к заданному размеру.
Добавление нового размера во всплывающее меню «Размер окна»
Выберите пункт «Изменить размеры» во всплывающем меню «Размер окна».
Щелкните по пустому месту под последним значением в столбце «Ширина».
Введите значения «Ширина» и «Высота».
Чтобы задать только ширину или высоту, просто оставьте одно поле пустым.
Нажмите поле «Описание», чтобы ввести пояснительный текст к введенному размеру.
Например, можно ввести SVGA или «обычный ПК» рядом с записью для монитора с разрешением 800 x 600 пикселов и диагональю 17 дюймов, Mac рядом с записью для монитора с разрешением 832 x 624 пикселов. Для большинства мониторов можно задавать разные разрешения в пикселах.
Нажмите кнопку «Применить» и закройте диалоговое окно.
Размер нового окна теперь доступен для использования во всплывающем меню «Размер окна».
Обзор панели инструментов «Документ»
Панель Документ содержит кнопки, позволяющие быстро переключаться между различными представлениями документа. Эта панель инструментов также содержит некоторые распространенные команды и параметры, связанные с отображением документа и передачей его между локальными и удаленными сайтами.
На панели инструментов Документ отображаются следующие параметры.
Это представление для интерактивного просмотра, которое точно отображает проекты HTML5 и их обновления в реальном времени, что позволяет отображать изменения по мере их внесения. Также в режиме интерактивного просмотра можно редактировать элементы HTML. Раскрывающийся список рядом с параметрами интерактивного просмотра позволяет переключаться между интерактивным просмотром и представлением «Дизайн». Этот раскрывающийся список недоступен для документов c «резиновыми» макетами.
Отображает представление документа таким образом, как пользователь видит его в веб-браузере.
Обзор панели инструментов «Стандартная»
Панель инструментов «Стандартная».
Обзор панели инструментов «Навигация с помощью браузера»
A. Элементы управления браузера B. Адресная строка
По умолчанию в представлении Интерактивный просмотр ссылки не работают. Выключение ссылок позволяет выбирать их и работать с текстом ссылок в окне Документ без перехода на соответствующие страницы. Для проверки ссылок в представлении Интерактивный просмотр можно включить единовременный или постоянный переход, выбрав Просмотр > Параметры интерактивного просмотра > Переход по ссылкам (Ctrl+щелчок по ссылке) или Непрерывный переход по ссылкам.
Обзор панели инструментов
Панель инструментов видна во всех представлениях — «Код», «Дизайн» и «Интерактивный просмотр» — и располагается вертикально по левой стороне окна «Документ». Кнопки на панели инструментов являются специфическими для представления и видны только в том случае, если они применимы к представлению, в котором вы работаете. Например, если вы работаете в режиме интерактивного просмотра, то такие специфичные для представления «Код» пункты, как «Форматировать исходный код», являются невидимыми.
Настройка панели инструментов
Можно настроить панель инструментов в соответствии со своими потребностями, добавив нужные пункты на панель инструментов и удалив ненужные пункты из нее.
Чтобы настроить панель инструментов, выполните следующие действия.
Выберите пункты меню, которые нужно добавить на панель инструментов, или удалите ненужные пункты, после чего нажмите кнопку «Готово», чтобы сохранить панель инструментов.
Чтобы восстановить кнопки панели инструментов по умолчанию, нажмите «Восстановить настройки по умолчанию» в диалоговом окне «Настроить панель инструментов».
Обзор строки состояния
Строка состояния в нижней части окна Документ содержит дополнительные сведения о создаваемом документе.
A. Селектор тегов B. Панель «Вывод» C. Цветовое оформление кода D. Переключение между режимами вставки и замены E. Номер строки и столбца
Селектор тегов
Панель «Вывод»
Щелкните этот значок, чтобы отобразить панель «Вывод», которая указывает на ошибки кода в документе.
Цветовое оформление кода
(Доступно только в представлении «Код».)
Выберите любой из языков кодирования из этого всплывающего меню для изменения цветового оформления кода, чтобы отображать сведения в соответствии с языком программирования.
Переключение между режимами вставки и замены
(Доступно только в представлении «Код».)
Позволяет переключаться между режимами вставки и замены при работе в представлении «Код».
Номер строки и столбца
Отображает номер строки и столбца, в которых находится курсор.
Обзор инспектора свойств
Инспектор свойств (Окно > Свойства) позволяет проверить и отредактировать наиболее распространенные свойства для выбранного элемента страницы, такого как текст или вставленный объект.
Содержимое инспектора свойств меняется в зависимости от выбранного элемента. Например, при выделении на странице изображения инспектор свойств отображает свойства этого изображения (путь к файлу, ширину и высоту, рамку вокруг изображения, если она есть, и так далее).
По умолчанию инспектор свойств расположен у нижнего края рабочей среды, однако его можно открепить и сделать плавающей панелью в пределах рабочего пространства.
Инспектор тегов позволяет просматривать и изменять любые атрибуты, связанные со свойствами заданного тега.
Чтобы вызвать справку по определенному инспектору свойств, нажмите кнопку «Справка» в правом верхнем углу окна «Инспектор свойств» или выберите в меню «Параметры» инспектора свойств пункт «Справка».
Просмотр и изменение свойств элемента страницы
Выберите элемент страницы в окне документа.
Чтобы увидеть свойства выделенного элемента, может потребоваться развернуть инспектор свойств.
Измените любое свойство в инспекторе свойств.
Чтобы получить информацию о конкретных свойствах, выделите элемент в окне документа и щелкните значок «Справка» в правом верхнем углу инспектора свойств.
Если изменения не появились сразу же в окне документа, примените изменения одним из следующих способов.
Контекстные меню
Контекстные меню обеспечивают удобный доступ к наиболее полезным командам и свойствам, связанным с объектом или окном, с которым идет работа. В них содержатся только те команды, которые применимы к текущему выделенному элементу.
Чтобы открыть контекстное меню, щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Ctrl (Mac), фрагмент кода в представлении «Код» либо объект в представлении «Код» или «Дизайн».
Переупорядочение панелей в Dreamweaver
Расположение и внешний вид всех панелей в Dreamweaver можно настроить в соответствии со своими потребностями.
Прикрепление и открепление панелей
Перемещение панелей
При перемещении панелей отображаются подсвеченные зоны перетаскивания — зоны, в которые можно поместить панель. Например, можно переместить палитру/панель выше или ниже в доке. Для этого нужно перетащить ее на узкую синюю зону перетаскивания, которая отображается над другой палитрой/панелью или под ней. Если перетащить палитру/панель в область, не являющуюся зоной перетаскивания, такая палитра/панель станет плавающей.
Чтобы избежать закрепления палитры/панели при перемещении, удерживайте клавишу Ctrl (в Windows) или Command (в Mac OS). Для отмены операции при перемещении палитры/панели нажмите клавишу Esc.
Добавление и удаление панелей
Если из дока удалить все палитры/панели, то он исчезнет. Можно создать док, перемещая палитры/панели в правый угол рабочего пространства/среды до появления зоны перетаскивания.
Управление группами панелей
Создание ряда плавающих панелей
При перетаскивании палитры/панели из дока не в зону перетаскивания палитра/панель становится плавающей. Плавающую палитру/панель можно разместить в любом месте рабочего пространства/среды. Плавающие панели или группы панелей можно собрать в одну подборку, тогда при перетаскивании самой верхней строки заголовка они будут перемещаться как одно целое.
Изменение размеров панелей
Свертывание и развертывание значков панели
Чтобы уменьшить загромождение рабочего пространства/среды, можно свернуть палитры/панели в значки. В некоторых случаях палитры/панели сворачиваются в значки в рабочем пространстве/среде по умолчанию.
Создание пользовательских рабочих сред
Можно настроить рабочую среду, добавляя или удаляя панели в соответствии со своими потребностями. После этого можно сохранить эти изменения в рабочей среде, чтобы впоследствии использовать ее в переключателе рабочих сред на панели инструментов «Документ».
Если текущий размер и положение панелей сохранены как именованная рабочая среда, то эту рабочую среду можно восстановить позднее, даже если некоторые панели были перемещены или закрыты.
Сохранение пользовательской рабочей среды
Рабочая среда сохраняется и видна в переключателе рабочих сред на панели инструментов «Документ».
Удаление пользовательской рабочей среды
Выберите «Управление рабочими средами» в переключателе рабочих сред на панели приложения, чтобы открыть диалоговое окно «Управление рабочими средами». Выберите рабочую среду и щелкните «Удалить».
Отображение рабочих сред и переключение между ними
Выберите рабочую среду в переключателе рабочих сред на панели инструментов «Документ».
Настройка Dreamweaver в многопользовательских системах
Dreamweaver можно настроить под свои задачи даже в многопользовательской операционной системе (Windows XP или Mac OS X).
Dreamweaver следит за тем, чтобы пользовательская конфигурация одного пользователя не влияла на настройки, сделанные другим пользователем. Если при первом запуске Dreamweaver определил, что операционная система является многопользовательской, то создаются копии различных файлов конфигурации. Эти файлы сохраняются в папке, принадлежащей пользователю.
При переустановке или обновлении Dreamweaver будут автоматически созданы резервные копии существующих файлов конфигурации пользователей. Если эти файлы были изменены вручную, эти изменения сохранятся.
Отображение документов на вкладках (только на компьютерах Mac)
Несколько документов можно отображать в одном окне документа на разных вкладках. Их также можно отображать в составе плавающего рабочего пространства, где каждый документ находится в собственном окне.
Открытие документа с вкладками в отдельном окне
Щелкните вкладку, удерживая нажатой клавишу Control, и выберите в контекстном меню команду «Переместить в новое окно».
Изменение применяемых по умолчанию настроек документа с вкладками
Dreamweaver не меняет отображение открытых в текущий момент документов при изменении установок. Однако те документы, которые были открыты после задания параметра, будут отображены в соответствии со сделанным выбором.
Экран приветствия отображается при запуске Dreamweaver и каждый раз, когда в приложении не открыты документы. Его можно скрыть, а затем позднее отобразить снова. Когда экран приветствия скрыт и открытые документы отсутствуют, в окне документа ничего не отображается.
Распространенные панели Dreamweaver
При работе в Dreamweaver вы имеете дело с набором панелей. Некоторые из наиболее часто используемых панелей описаны здесь.
Обзор панели «Вставка»
Панель Вставка (Окно > Вставка) содержит кнопки для создания и вставки различных объектов: таблиц, изображений и ссылок. Кнопки разделены на несколько категорий. Для переключения между ними выбирайте необходимую категорию из раскрывающегося списка вверху.
Панель Вставка содержит следующие категории.
Позволяет создавать и вставлять наиболее часто используемые элементы HTML, например теги div и объекты, такие как изображения и таблицы.
Содержит кнопки для создания форм и вставки элементов формы, таких как поиск, месяц и пароль.
Позволяет сохранить документ как шаблон и пометить определенные регионы как редактируемые, необязательные, повторяющиеся или редактируемые дополнительные области.
Содержит компоненты Bootstrap для работы с навигацией, контейнерами, выпадающими списками и многое другое, что можно использовать при создании адаптивных проектов.
Содержит кнопки для создания сайтов, использующих jQuery Mobile.
Позволяет вставлять такие элементы jQuery UI, как «гармошка», ползунки и кнопки.
При работе с некоторыми типами файлов (в частности, XML, JavaScript, Java и CSS) панель «Вставка» и представление «Дизайн» недоступны, поскольку в такие файлы кода нельзя вставлять объекты.
Вставка объекта
Для вставки объекта с помощью панели «Вставка»:
Выберите соответствующую категорию из всплывающего меню «Категория» на панели «Вставка».
Выполните одно из следующих действий.
Нажмите кнопку объекта или перетащите значок кнопки в окно документа (в представление «Дизайн», «Код» или в интерактивный просмотр).
Щелкните стрелку на кнопке и выберите в меню нужный параметр.
В зависимости от объекта может появиться соответствующее диалоговое окно для вставки объекта, которое подскажет, что надо найти файл или указать параметры объекта. Или же Dreamweaver может вставить в документ код, а также открыть редактор тегов или панель для ввода данных перед вставкой кода.
Для некоторых объектов диалоговое окно не появляется, если объект вставляется в представлении «Дизайн», однако при использовании представления «Код» появляется редактор тегов. Для некоторых объектов вставка объекта в представлении «Дизайн» приводит к тому, что Dreamweaver переключает окно на представление кода перед вставкой объекта.
В категории «Общие» диалогового окна «Настройки» отмените выбор параметра «Показывать диалоговое окно при вставке объектов», чтобы избежать появления диалоговых окон при вставке изображений, таблиц, сценариев, заголовков и других объектов. Этого же эффекта можно добиться, удерживая нажатой клавишу Ctrl (Windows) или Option (Macintosh) при создании объекта.
Когда этот параметр отключен и происходит вставка объекта, этому объекту присваиваются значения по умолчанию. Используйте инспектор свойств для изменения свойств объекта после его вставки.
Добавление и удаление элементов, а также управление элементами из категории «Избранное» панели «Вставка»
Выберите любую категорию на панели «Вставка».
Щелкните правой кнопкой мыши (Windows) либо щелкните, удерживая клавишу Control, (Macintosh) в области, где находятся кнопки, и выберите «Настроить избранное».
В диалоговом окне «Настройка избранных объектов» внесите необходимые изменения и нажмите кнопку «ОК».
Чтобы добавить объект, дважды щелкните его в области «Доступные объекты» слева либо выделите и нажмите стрелку между двумя областями.
Объекты можно добавлять только по одному за раз. Выделить для добавления категорию целиком нельзя.
Если категория «Избранное» панели «Вставка» в данный момент не используется, выберите эту категорию, чтобы увидеть внесенные изменения.
Обзор панели «Файлы»
Панель Файлы позволяет просматривать файлы и работать с ними на сайте 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 позволяет увеличивать масштаб просмотра в области «Окно документа» для проверки пиксельной точности графики, для упрощения выделения мелких элементов, для разработки страниц с мелким текстом, больших страниц и т. д.
Чтобы увеличить или уменьшить масштаб страницы, выберите меню «Просмотр > Параметры представления «Дизайн» > Масштаб», после чего выберите любую из доступных пунктов масштабирования.
Можно выбрать из множества пунктов масштабирования. Можно также нажать кнопку:
Увеличить масштаб можно также без использования инструмента «Масштаб», нажав сочетание клавиш Ctrl + «=» (Windows) или Command + «=» (Macintosh). Уменьшить масштаб можно также без использования инструмента «Масштаб», нажав сочетание клавиш Ctrl + «–» (Windows) или Command + «–» (Macintosh).
Открывать документы во вкладках. Открывает все документы в одном окне с вкладками, что позволяет переключаться между ними (только на 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) в конце абзаца заголовка будет создан новый абзац с тем же тегом заголовка, что позволит ввести несколько заголовков подряд, а затем вернуться назад и ввести остальной текст.
Разрешить несколько последовательных пробелов. Указывает, что при вводе двух и более пробелов в представлении «Дизайн» или «Интерактивный просмотр» будут создаваться неразрывные пробелы. (Например, предложения можно разделить двумя пробелами, как на пишущей машинке). Этот параметр предназначен главным образом для тех, кто привык работать с текстовыми процессорами. Если этот параметр не выбран, любое число пробелов интерпретируется как один пробельный символ (поскольку именно таким образом их трактуют браузеры).
Использовать теги и вместо и . Указывает, что Dreamweaver будет применять тег strong при выполнении действия, которое обычно предполагает применение тега b, и тег em в тех ситуациях, когда должен был быть применен тег i. К таким действиям относится нажатие кнопки «Полужирный» или «Курсив» в инспекторе свойств текста в режиме HTML, а также выбор команды «Формат» > «Стиль» > «Полужирный» или «Формат» > «Стиль» > «Курсив». Чтобы использовать в документе теги b и i, отмените выбор этого параметра.
Примечание. Консорциум World Wide Web не рекомендует пользоваться тегами b и i. Теги strong и em более содержательны, чем b и i.
Выводить предупреждение при размещении редактируемых областей внутри тегов
. Определяет необходимость вывода предупреждающего сообщения при сохранении шаблона Dreamweaver, содержащего изменяемую область в абзаце или теге заголовка. Это сообщение говорит, что пользователь шаблона не сможет создавать в области редактирования абзацы. По умолчанию параметр установлен.
Ограничить операции отмены текущим документом. Ограничивает операции отмены тем файлом, который сейчас редактируется. Например, если вы редактируете файл CSS, можно отменять изменения, сделанные только в этом файле.
Однако, если этот флажок снят, исходный код HTML и все связанные файлы CSS будут иметь общую историю отмены и вы сможете отменять свои действия, независимо от того, работаете вы в коде HTML или в связанном файле CSS.
Максимальное число элементов журнала. Определяет количество элементов, хранящихся в памяти Dreamweaver. (Значение по умолчанию вполне достаточно для большинства пользователей.) Когда число элементов достигает максимального значения, более ранние элементы удаляются.
Орфографический словарь. Содержит список доступных словарей для проверки орфографии. Если словарь содержит несколько диалектов или вариантов языка (например, американский и британский английский), все они перечислены во всплывающем меню «Словарь» по отдельности.