Программный пакет DreamWeaver, как и FrontPage, предназначен для проектирования различных сайтов, в том числе - сайтов издательств, одной из задач которых является распространение электронных изданий. Он пригоден как для создания небольших, так и очень больших сайтов. В первом случае разработкой занимается единственный специалист- вебмастер. В последнем случае над проектом работает целый коллектив, включающий администратора проекта, веб-дизайнера, HTML-верстальщика, веб-программиста, корректора, менеджера рассылок. Многие специалисты утверждают, что профессиональные Web-дизайнеры в своей работе чаще всего используют Adobe PhotoShop для подготовки графики и Macromedia DreamWeaver для дизайна отдельных Web-страниц.

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

6.2.1. Интерфейс пакета DreamWeaver

Интерфейс пакета DreamWeaver 4.0 показан на рис. 6.9. Помимо строки заголовка, строки меню, панели инструментов и стандартного рабочего окна программы отметим наличие нескольких палитр, которые, как и в графических редакторах, размещаются в рабочем окне программы. Кстати, названия открытых трех палитр «Объекты» (Object), «Свойства» (Properties) и «Загрузить» (Launcher) соответствуют первым трем командам секции меню «Окно» (Window).

Данный пакет интегрирован с точки зрения используемых технологий в группу программных продуктов фирмы Macromedia, которая завоевывает все более прочные позиции на рынке средств Web-дизайна. Другие программы этой группы: Macromedia Director и Flash будут рассмотрены в следующих параграфах этой главы. В совокупности они обеспечивают основные направления Web-дизайна, а каждая в отдельности специализирована в одном конкретном направлении.

Вначале остановимся на палитре «Объекты» (Objects), внешний вид которой представлен на рис. 6.10. Внешний вид палитры изменяется в зависимости от типа объекта, выбранного в списочном окне в ее верхней части, т. е. палитру можно назвать адаптивной. По умолчанию в списке устанавливается позиция «Основные» (Common). На рис. 6.10в открытом списке выбран именно этот вариант. Эта палитра с помощью 18-ти различных инструментов позволяет включать в состав страницы различные элементы, в частности (по порядку расположения кнопок в палитре): графику (Image), анимированную кнопку (Rollover Image), внешний вид которой изменяется при подведении к ней курсора мыши, таблицу (Table), таблицу с занесенными в нее данными, подготовленными заранее в другом программном пакете (Tabular Data), линейку (Horizontal Rule), навигационную панель (Navigation Bar) с кнопками для перемещения по сайту, новый изобразительный слой (Draw Layer), мягкий перенос (Line Break) в текст, ссылку на электронный адрес (E-mail Link), текущую дату (Оат.е),флеш- (Flash) и шоквэйв- (Shockwave) анимацию, заготовку Generator и объект FireWorks, Java-апплеты и элементы ActiveX, объекты, воспроизводимые с помощью дополнительных модулей (Plag-ins), и внешний HTML-файл (SSI).

Палитра «Шрифтовые элементы» (Characters) позволяет добавить на Web-страницы один из 12-ти различных специальных символов: переход на новую строку, авторского права (копирайт), зарегистрированный торговый знак, денежные знаки, в том числе, фунт стерлингов, иена, евро, а также кавычки, тире и другие знаки (см. рис. 6.11).

Палитра «Формы» (Forms), показанная на рис. 6.12, служит для создания форм (см. § 2.8 ) и содержит следующие кнопки: собственно форма (Forms), текстовое поле (Text field), кнопка (Button), переключатели Checkbox и Radio Batton, список/меню (List/menu), поле для передачи файлов (Filefield) и изображений (Imagefield), скрытое поле (Hidden field) и указатель гиперссылки для перехода на другой сайт (Jump menu).

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

Палитра «Фреймы» (Frames), показанная на рис. 6.13, позволяете помощью соответствующей кнопки выбирать определенный вид фреймовой структуры страницы с двумя, тремя и четырьмя различным образом расположенными фреймами. Общее число вариантов равно восьми.

Палитра «Заголовочная часть» (Head) позволяет добавлять в заголовочную часть HTML-документа соответствующие теги и значения параметров, в том числе: теги метаинформации и ключевые слова, описание сайта, параметры его обновления, значение базовой ссылки (ссылки по умолчанию), ссылки для связей.

Палитра «Невидимые объекты» (Invisibles), показанная на рис. 6.14, позволяет разместить на странице закладки (см. также§ 4.2 и§ 4.3 ), сноски и комментарии (см. § 2.5 ) и Java-скрипты (см. § 2.9 ).

Последняя палитра, входящая в состав комплексной адаптивной палитры «Объекты», носит название «Специальная» (Special). В ней, как показано на рис. 6.16, имеются три пиктограммы или кнопки, а именно: апплеты, плагины и элементы ActiveX.

Не секрет, что в соревновании между ручным написанием кода и использованием услуг Adobe Dreamweaver уже давно победил последний. Этот удобный во всех смыслах редактор упрощает жизнь любого веб-мастера, экономя его время и силы. То, что в обычном блокноте пишется за полчаса, в этом редакторе можно сделать буквально за пять минут. Причем, что самое главное, в этом случае полностью исключены столь обидные ошибки в коде, которые приходится искать и исправлять. Будь это обычная верстка страниц или программирование на PHP, Dreamweaver всегда придет на помощь. И, конечно же, не стоит сомневаться, что процесс работы с ним будет не только более удобным, но и легким. Фактически Dreamweaver сделает часть работы за пользователя, освободив его от необходимости иметь знания в той или иной сфере веб-технологий. Что может быть проще? Программа понятна каждому и может быть освоена буквально за недели. Эта статья поможет начинающим пользователям еще быстрее разобраться в основах работы с Adobe Dreamweaver на примере последней доступной на данный момент версии 9.0. Сразу следует отметить, что в редактор встроена подробнейшая справка на английском языке, рассказывающая о всех аспектах его использования. Безусловно, эта статья никак не может затрагивать их всех. Но у справки есть один большой недостаток - излишнее обилие информации. Для того чтобы понять азы, требуется потратить большое количество времени. Мы попытаемся исправить этот недостаток.

Интерфейс

Внешний вид программы довольно прост. Между тем рабочее пространство организовано крайне продуманно, что обеспечивает ее эффективное использование. Интерфейс Adobe Dreamweaver состоит из нескольких элементов, которые условно можно разделить на пять групп. К первой относится главное меню, которое находится на фиксированном месте вверху окна программы. Оно включает в себя несколько закладок: "Файл", "Редактировать", "Просмотр", "Вставка", "Изменить", "Текст", "Команды", "Веб-сайт", "Окно" и "Справка". Самыми важными для пользователя являются закладки "Файл" и "Редактировать", так как они не продублированы никакими другими меню и являются часто используемыми. Эти закладки являются типичными для всех программ, и поэтому на них мы останавливаться не будем. Остальные закладки в главном меню не слишком важны, так как частично или полностью продублированы другими элементами интерфейса или же просто редко используются. Следующей группой является меню «Вставка», которая, по сути, является панелью инструментов Dreamweaver. Она может быть перенесена в любую часть окна программы, но лучше всего оставить ее на изначальной позиции под главным меню. Этот элемент интерфейса может быть свернут для увеличения зоны рабочей области. На панели «Вставка» есть несколько закладок, разделенных по типу данных. В закладке «Общий» расположились самые часто используемые элементы: гиперссылки, картинки, таблицы и т. д. Эта закладка используется наиболее часто. Среди других закладок на панели «Макет» (работа со Spry, таблицами и рамками), «Формы», «Данные», «Spry», «Текст» и «Избранное». Закладка «Текст» отчасти продублирована другими элементами интерфейса, а закладка «Избранное» позволяет пользователю составить свое собственное меню.

Очень полезна группа закладок «Стили CSS», в которой можно создавать новые стили и редактировать старые

Справа от рабочей области программы располагается окно с различными группами панелей (всего групп может быть четыре). Оно не может быть перенесено в другое место, но может быть спрятано или закрыто. Каждая группа закладок на этой панели может быть свернута или закрыта. В развернутом виде панель довольна громоздка и существенно сокращает размер рабочей области. Данная часть интерфейса носит вспомогательный характер и позволяет осуществлять некоторые действия, не открывая дополнительных окон. Так, например, очень полезна группа закладок «Стили CSS», в которой можно создавать новые стили и редактировать старые, а также управлять различными свойствами стилей. Другая группа закладок «Инспектор тегов» позволяет управлять выделенным в данный момент тегом: просматривать его свойства и добавлять новые или менять старые параметры. Две другие группы «Файлы» и «Журнал» используются гораздо реже. Первая предназначена для контроля за локальными и сетевыми ресурсами и другими операциями, а вторая исполняет роль лога проведенных операций. При желании пользователь может отменить действия, вернувшись к той или иной точке. Увы, отменить действия выборочно нельзя.

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

К последней группе компонентов интерфейса Dreamweaver относится рабочая область. Она также имеет структуру закладок. В программе можно открыть сразу несколько документов, между которыми можно перемещаться в свободном порядке. Рабочая область включает в себя также несколько инструментов. Верхняя панель «Документ» позволяет переключаться между несколькими режимами: кодированием и дизайном. Кроме того, она позволяет управлять просмотром документа в браузере, если это возможно. При желании эту панель можно переместить в любое место рабочего окна программы. Нижняя панель позволяет переключать режимы курсора, управлять масштабированием. Кроме того, в ней содержатся информация о документе (размер, разрешение и т. п.) и древо иерархии тегов. Последнее представляет собой список всех вышестоящих тегов для данного. В этом списке можно перемещаться вверх по уровню вплоть до тега body.

Работа с документом.

В режиме "код" доступно прямое редактирование документа, аналогичное работе в «Блокноте».

В первую очередь для создания странички потребуется задать ее основные настройки. Делается это через меню "Изменить -> Свойства страницы" ("горячая" клавиша Ctrl + J) или через контекстное меню. В появившемся окне можно задать шрифт по умолчанию для текста и ссылок, дать странице название, определить ее кодировку, а также задать фоновое изображение-образец (tracing). Название сайта, кстати, также можно задать в панели «Документ». Установить остальные параметры страницы можно вручную или же через «Инспектор тегов», выбрав тег body. Зачастую, начинающему веб-мастеру требуются только лишь параметры background и bgcolor (картинка в фоне и цвет фона соответственно). Для создания meta-тегов необходимо перейти в режим «Код», щелкнув на соответствующую закладку на панели «Документ». В этом режиме доступно прямое редактирование документа, аналогичное работе в «Блокноте». Впрочем, у Dreamweaver и здесь есть свои преимущества. Все строки в коде для удобства пронумерованы, а сами теги связаны со всеми панелями программы, как и в режиме «Проект» (он же Design). В зависимости от типа тегов они подсвечиваются разным цветом, тем самым разбивая монотонные куски кода, облегчая его идентификацию. Кроме того, при редактировании кода рядом с курсором появляется небольшое меню со списком возможных вариантов. Пункты из списка можно выбирать клавиатурой или мышкой, после чего они автоматически подставляются в код, что заметно ускоряет верстку документа. Например, чтобы вставить в документ картинку, достаточно набрать открывающую «угловую» скобку, выбрать из появившегося списка тег img (для упрощения поиска можно напечатать букву «i» — программа автоматически отфильтрует все остальные теги, начинающиеся на эту букву), затем поставить пробел, выбрать из опять появившегося меню параметр src, после чего нажать на появившуюся кнопку browse, открывающую окно для поиска нужной картинки. Впрочем, картинки гораздо проще и быстрее вставлять через меню «Вставка». Это относится и к таблицам. При добавлении таблицы в документ через меню появляется окно с настройками количества столбцов и ячеек, интервалов, полей, ширины и т. д. Все эти настройки, а также некоторые другие можно изменить и после создания таблицы через панель «Свойства». Кроме того, можно изменять также и параметры ячеек, выбирая их в рабочей области (в режиме «Код» достаточно поставить курсор в нужный тег). Не менее полезной является функция изменения размеров таблицы, столбцов и ячеек с помощью мышки. Для этого надо зажать курсор на границе и затем перетянуть ее в нужную сторону. Кстати, чтобы удалить какой-либо элемент из документа, достаточно выделить его и нажать на клавишу delete на клавиатуре. А для того чтобы переместить какой-либо элемент (например, вставить текст в таблицу), его также надо выделить и перетащить с зажатым курсором.

Не менее эффективным инструментом в Adobe Dreamweaver является контекстное меню. В нем продублированы основные команды и элементы интерфейса, которые, по мнению разработчиков, требуют быстрого доступа. Здесь можно задать свойства выделенного элемента, включая настройки CSS, выравнивания и форматирования. Кроме того, через контекстное меню можно управлять тегами, добавлять комментарии (они же заметки разработчика) и даже переходить к настройкам страницы. Кстати, чтобы быстро изменить код выделенного элемента, достаточно открыть контекстное меню и выбрать пункт Quick Tag Editor. А вот для вставки различных элементов незаменимыми являются панель «Вставка» и одноименная закладка в главном меню. Все доступные для вставки элементы классифицированы и разбиты на группы. Если же нужный элемент все же отсутствует в списке, можно воспользоваться функцией «Тег...» ("горячая" клавиша Ctrl+E). В появившемся окне появится полный список доступных тегов, разбитых на группы. Причем возможны не только HTML-теги, но и ASP, PHP и т. д.

Не менее удобным является и форматирование текста. Через различные панели инструментов и меню можно изменить выравнивание текста, добавить отступы, создать нумерованные или обычные списки, задать размеры, шрифт и цвет и т. п. Причем, что важно, все параметры, связанные с внешним видом текста, завязаны на CSS. Меняя параметры шрифта, пользователь создает новые стили CSS (программа автоматически вписывает их в документ). Это, с одной стороны, удобно, так как освобождает от необходимости каждый раз проводить одни и те же действия с аналогичными кусками текста, с другой — не очень, так как пользователь может запутаться в созданных стилях. Впрочем, безусловно, CSS гораздо удобнее дублирующих его тегов (таких, как font), так как позволяют экономить время веб-мастера и сокращать конечный размер документа.

Мелочь

Безусловно, все вышеперечисленные функции редактора очень полезны, но они относятся в первую очередь к HTML верстки страниц, то есть для создания простейших сайтов. Но Adobe Dreamweaver позволяет оперировать и другими типами документов. Программа поддерживает Action script, Java script, XML, ASP.NET, JSP, PHP, сценарии и даже просто текстовый документ. Правда, назначение последнего не совсем понятно (в этом плане Dreamweaver явно проигрывает «Блокноту» по потребляемым ресурсам и скорости загрузки). Естественно, что автоподбор тегов и наглядный режим просмотра будут доступны только для документов с поддержкой HTML. Зато в любом типе документа сохранится подсветка кода.

Немаловажным достоинством программы являются заранее заготовленные макеты. При создании нового документа доступен и набор шаблонов. Он включает в себя различные страницы от стандартных фреймов до различных таблиц стилей и даже макетов дизайна. Авторы программы создали несколько десятков различных шаблонов, которые могут пригодиться в различных ситуациях, например для создания сайтов презентаций при ограниченных ресурсах и времени. При использовании готовых ресурсов появится окно «Управление сайтами», где можно добавить новый сайт, отредактировать, будбировать, а также импортировать и экспортировать уже существующий. При создании сайта появится форма с настройками, где в несколько этапов будет необходимо задать несколько параметров: название и адрес, настройки подключения к удаленному серверу и т. п. Данная процедура является частью еще одной полезной (но мало востребованной рядовыми пользователями) функции локального и удаленного управления сайтами. Для подобных операций выделена отдельная закладка в главном меню — «Веб-сайт». В ней можно вызвать окно управления сайтами, проверить ссылки, выполнить ряд других операций. Наиболее интересной для рядового пользователя в этом меню является функция «Отчеты». Она позволяет просканировать сайт на предмет различных недочетов. Результаты проверки выводятся в отдельную панель с несколькими закладками. В одной из них можно проверить битые ссылки, в другой — ошибки кода. Так, например, на одной из взятых мною страниц обнаружились масса отсутствующих атрибутов alt и некоторые не совсем корректные элементы. Кроме того, с помощью «Отчетов» можно проверить код на совместимость с браузерами. Впрочем, если весь код целиком был написан с помощью Dreamweaver, то проблемные места найдены не будут, хотя на самом деле в редких случаях код, написанный редактором, выглядит в браузерах не совсем так, как хотелось бы. Все результаты проверки можно сохранить в отдельный файл.

Итак, как мы видим, Adobe Dreamweaver - это мощное средство для создания, изменения и управления сайтами, которое пригодится как начинающему веб-мастеру, так и опытному пользователю, занимающемуся программированием на Java, PHP и т. д. С помощью Dreamweaver можно выполнять огромное количество операций, для которых без этого редактора требуется сразу несколько программ.

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Подобные документы

Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

дипломная работа , добавлен 25.03.2013


Возможность работы с текстовыми редакторами только для создания небольших WEB-страниц. Теория Web-дизайна и его история. Редактор DreamWeaver, его особенности. Основные требования, предъявляемые к Web-странице. Предпосылки возникновения DreamWeaver.

курсовая работа , добавлен 12.06.2009


Теоретический обзор по проблеме создания web-сайта "Конфликты в организации". Анализ информационных ресурсов и сервисов. Характеристика методов исследования конфликтов в организациях. Программный пакет Macromedia Dreamweaver для создания web-сайтов.

дипломная работа , добавлен 22.06.2015


Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

методичка , добавлен 06.07.2011


Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).

курсовая работа , добавлен 24.11.2012


Обзор программ для создания Web-страниц; сравнительный анализ Macromedia Dreamweaver и Front Page. Процесс создания современного сайта; оценка экономической целесообразности использования компьютера. Охрана труда оператора компьютерного набора и верстки.

дипломная работа , добавлен 07.07.2010


Рассмотрение визуального HTML-редактор Dreamweaver. Определение структуры сайта ООО "Фаст Студия". Содержание страниц "Главная", "Портфолио", "Контакты". Теги форматирования текста и способы его оформления с использованием подключаемых таблиц CSS.

курсовая работа , добавлен 18.08.2013


Характеристика возможностей редактора DreamWeaver и Front Page. Особенности языков программирования PHP и JavaScript. Основные требования, предъявляемые к Web-странице. Специфика программного обеспечения для ее создания и эффективности использования.

курсовая работа , добавлен 03.02.2011

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

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

Dreamweaver поддерживает специальные возможности в операционных системах Windows и Macintosh. Например, в операционной системе Macintosh можно установить визуальные параметры в диалоговом окне «Universal Access Preferences» («Apple» > «System Preferences»). Заданные настройки отражаются в рабочем пространстве Dreamweaver.

Настройка высокой контрастности, доступная в ОС Windows, также поддерживается. Данный параметр можно включить в «Панель управления» Windows. Для компонентов Dreamweaver эта настройка имеет следующий эффект.

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

В представлении «Код» используются системный цвет текста и цвет текста окна. Например, если установить системный цвет в белый на синем, а затем сменить цвета текста через меню «Правка» > «Настройки» > «Цветовое оформление кода», то Dreamweaver не использует эти параметры и отображает текст кода белыми символами на черном фоне.

Область «Дизайн» использует цвета текста и фона, заданные с помощью команд «Изменение» > «Свойства страницы»; таким образом, цвета на созданных страницах будут отображаться так же, как и в браузере.

Оптимизация рабочего пространства для проектирования страниц со специальными возможностями

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

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

1. Выберите «Правка» > «Настройки» (в Windows) либо Dreamweaver > «Настройки» (в Macintosh).
2. В списке «Категория» слева выберите пункт «Специальные возможности», выберите объект, установите любые из перечисленных ниже параметров и нажмите кнопку «ОК». Показывать атрибуты при вставке Выберите объекты, для которых необходимо активировать диалоговые окна специальных возможностей. Например, объекты форм, фреймы, мультимедиа и изображения. При открытии сохранять панель активной Позволяет сохранять положение фокуса на панели, чтобы обеспечить работу программы чтения с экрана. (Если данный параметр не выбран, при открытии панели фокус удерживается в представлении «Дизайн» или «Код».) Построение изображений вне экрана Выберите данный параметр при использовании программы чтения с экрана.

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

Функция проверки специальных возможностей в Dreamweaver

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

Навигация по Dreamweaver с помощью клавиатуры

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

Примечание. Использовать клавишу «Tab» и клавиши со стрелками можно только в операционной системе Windows.

Навигация по панелям

1. Находясь в окне документа, нажмите клавиши «Ctrl» и «F6» для смещения фокуса на панель.

   Пунктир вокруг заголовка панели обозначает, что фокус находится на панели. Программа чтения с экрана озвучивает заголовок панели, получившей фокус.

2. Одновременно нажимайте клавиши «Ctrl» и «F6» до тех пор, пока фокус не сместится на необходимую панель. (Для перемещения между панелями в обратном порядке одновременно нажимайте клавиши «Ctrl», «Shift» и «F6».)
3. Если нужная вам панель закрыта, используйте сочетание клавиш в меню Windows для отображения этой панели, а потом одновременно нажмите «Control» и «F6».

   Если нужная панель открыта, но не развернута, переместите фокус на заголовок панели и нажмите клавишу «Пробел». Чтобы ее свернуть, нажмите клавишу «Пробел» еще раз.

4. Используйте клавишу «Tab» для перемещения по элементам управления панели.
5. Клавиши со стрелками используются в следующих случаях.
   • Если элемент управления имеет варианты выбора, для перемещения между вариантами используйте клавиши со стрелками, а для выбора значения - клавишу «Пробел».
   • Если на панели находятся вкладки, открывающие другие панели, расположите фокус на открытой вкладке и с помощью клавиши «Стрелка влево» или «Стрелка вправо» откройте нужную вкладку. После открытия вкладки перемещаться по ее элементам управления можно с помощью клавиши «Tab».

Навигация по инспектору свойств

1. Чтобы отобразить инспектор свойств, нажмите клавиши «Ctrl» + «F3».
2. Нажимайте сочетание клавиш «Ctrl» + «F6» (только в Windows) до тех пор, пока фокус не сместится на инспектор свойств.
3. Используйте клавишу «Tab» для перемещения по элементам управления инспектора свойств.
4. Клавиши со стрелками используются для перемещения между вариантами выбора.
5. Нажмите клавиши «Ctrl» + «Стрелка вниз/стрелка вверх» (Windows) или «Command» + «Стрелка вниз/стрелка вверх» (Macintosh), чтобы при необходимости открыть или закрыть развернутую секцию инспектора свойств, или наведите стрелку разворачивания на нижний правый угол и нажмите клавишу «Пробел».

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

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

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

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

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


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

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

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

Компоненты

Базы данных

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

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

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

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