Dreamweaver и специальные возможности. Dreamweaver и специальные возможности Интерфейс среды Dreamweaver

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

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

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 уже давно победил последний. Этот удобный во всех смыслах редактор упрощает жизнь любого веб-мастера, экономя его время и силы. То, что в обычном блокноте пишется за полчаса, в этом редакторе можно сделать буквально за пять минут. Причем, что самое главное, в этом случае полностью исключены столь обидные ошибки в коде, которые приходится искать и исправлять. Будь это обычная верстка страниц или программирование на 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 можно выполнять огромное количество операций, для которых без этого редактора требуется сразу несколько программ.

1.1. Установка

Искушенный пользователь не найдет в процедуре установки программы ничего нового для себя. На дистрибутивном диске надо разыскать и запустить на выполнение программу Dreamweaver 4 lnstaller.exe (инсталлятор). Как и большинство приложений Windows, программа устанавливается в несколько этапов, каждый из которых представлен отдельным диалоговым окном.

Последовательно перечислим основные этапы работы программы установки.

  • Extracting Files (Извлечение файлов). На этом этапе из архивов извлекаются файлы, необходимые для работы программы-инсталлятора и установки системы Dreamweaver. Этап не требует вмешательства пользователя.
  • Welcome (Добро пожаловать). Первый этап собственно установки, на котором пользователь получает основные сведения о выбранной программе и правилах ее инсталляции.
  • License Agreement (Лицензионное соглашение). На втором этапе предлагается ознакомиться с лицензионным соглашением и авторскими правами на программный продукт. Пользователь должен принять предлагаемые обязательства или отвергнуть их.
  • Macromedia Dreamweaver Serialization (Регистрация программы). На третьем этапе появляется диалоговое окно, в которое следует ввести реквизиты пользователя и серийный номер программы.
  • Choose Destination Location (Расположение). На этом этапе требуется вы брать диск и папку для установки программы. Адрес, отличный от предлагаемого по умолчанию, можно задать при помощи стандартной для операционной системы Windows процедуры выбора активного диска и каталога. Запускается процедура щелчком на кнопке Browse (Обзор).
  • Default Editor (Редактор по умолчанию). На этом этапе работы процедуры установки предлагается выбрать типы файлов, для которых программа Dreamweaver будет основным редактором, используемым по умолчанию.
  • Select Program Folder (Выбрать папку программы). Здесь следует выбрать папку, в которой будет находиться ярлык для запуска программы. Напомним, что доступ к этой папке и ее содержимому можно получить при помощи кнопки Пуск и меню Программы. В нелокализованной версии операционной системы они обозначаются соответственно: Start и Programs. По умолчанию инсталлятор предлагает для этих целей папку \Macromedia Dreamweaver 4.

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

1.2. Запуск программы

Операционные системы семейства Windows 9x предлагают пользователю несколько различных способов запуска программ.

После установки пакета в Главное меню Windows добавляется специальный раздел с командами для запуска программы Dreamweaver и сопутствующих файлов. Конкретный вид этих команд зависит от версии операционной системы и редакции самого пакета. В любом случае команда для запуска пакета будет примерно такой: Пуск > Программы > Macromedia Dreamweaver 4 > Dreamweaver 4. Это официальный, штатный способ запуска программы, доступный в операционной среде любой конфигурации.

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

Создание ярлыка

Самым простым и удобным способом является, видимо, запуск программы при помощи ярлыка. Ярлык отображается в виде специального значка. Он представляет собой ссылку на программу и может располагаться в любой папке Windows. Вид значка и подпись под ним выбираются обычно так, чтобы они соответствовали стилю, принятому в программе. Двойной щелчок мышкой на ярлыке запускает связанную с ним программу.

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

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

  • В окне Мой компьютер или при помощи программы Проводник найдите значок программы Dreamweaver. По умолчанию программа устанавливается в папку C:\Program Files\Macromedia\Dreamweaver 4.
  • Зацепите значок мышкой и перетащите его на свободное место Рабочего стола или окна папки.
  • Ярлык получит стандартное имя Ярлык для Dreamweaver.exe, которое можно и изменить. Для этого следует, не отменяя выбора значка, нажать клавишу F2, ввести с клавиатуры новое имя и подтвердить его нажатием на клавишу ENTER.

Запуск с клавиатуры

В операционной системе Windows многие действия можно выполнить при помощи клавиатурных комбинаций (“горячих клавиш”). Клавиатурные комбинации позволяют быстро, без обращения к сложной системе вложенных меню, изменить установку или параметр, получить доступ к ресурсам и, в частности, запустить программу.

Существует несколько способов назначить команде подходящий “клавишный аккорд”. Пусть ярлык программы Dreamweaver создан и находится на Рабочем столе системы Windows. Рассмотрим самый простой способ создании горячей клавиши:

  • щелкните правой кнопкой мыши на ярлыке программы и выберите в открывшемся контекстном меню пункт Свойства;
  • в открывшемся диалоговом окне Свойства: Dreamweaver 4 выберите вкладку Ярлык;
  • щелкните на поле Быстрый вызов и введите в него выбранную клавиатурную комбинацию для запуска пакета. Подтвердите выбор щелчком на кнопке. Применить и закончите работу с окном щелчком на кнопке ОК. В качестве клавиатурных сокращений можно использовать сочетания управляющих клавиш CTRL, ALT, SHIFT с алфавитно-цифровыми клавишами или специальными клавишами F1-F12.

Автоматический запуск

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

Поместить ярлык программы в папку Автозагрузка можно несколькими способами. Основная сложность состоит в том, что у этой папки очень громоздкий адрес: C:\Windows\Главное меню\Программы\Автозагрузка. Чтобы добраться до нее, придется проделать длинный путь по файловой системе Windows. Намного проще сделать это при помощи штатных средств поиска.

  1. В Главном меню дайте команду: Пуск > Найти > Файлы и папки.
  2. Откроется диалоговое окно для поиска файлов и папок. В поле Имя введите образец для поиска: Автозагрузка; в поле. Где искать укажите имя логического диска, на который установлена операционная система. Запустите поиск щелчком на кнопке Найти.
  3. Удерживая нажатой клавишу CTRL, зацепите ярлык программы Dreamweaver и перетащите его с Рабочего стола на значок папки Автозагрузка, расположенный в нижней части окна Найти.

Любой способ запуска программы имеет одинаковые последствия. Программа начинает работу, загрузив в окно документа пустую страницу. Эта страница создается па основе шаблона Default.htm, расположенного в подкаталоге \Configuration\Templates внутри папки программы.

1.3. Интерфейс

Под интерфейсом в информатике понимают совокупность средств и правил, обеспечивающих взаимодействие различных компонентов программы и пользователя. Способ общения, который предлагает пакет Dreamweaver, базируется на привычных для современного пользователя принципах графического оконного интерфейса. По своему внешнему виду программа далека от haute couture некоторых продуктов фирмы Microsoft Это, скорее, уровень добротного pret a porte со всем необходимым для результативной работы. По сравнению с другими программами того же класса и функционального назначения пакет Dreamweaver обладает более ясным, гибким и одновременно мощным интерфейсом. Его главными “несущими конструкциями” являются палитры, многочисленные клавиатурные комбинации и строка меню.

У [налоговые окна, которые остаются на экране после прекращения всех операций с ними, принято называть палитрами (palette) или панелями (panel). Окна, способные располагаться в любом месте экрана, а не только н специально отведенных для этого позициях, обычно называют плавающими палитрами (floatingpalette). Большинство диалоговых окон программы Dreamweaver выполнено в виде плавающих палитр.

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

Почти все палитры обладают способностью к объединению. Это означает, что разные палитры можно совместить в одном диалоговом окне. Операция объединения позволяет получить многофункциональные сборные палитры, которые содержат средства управления, относящиеся к разным темам или командам. Палитры, обладающие способностью к объединению (их в программе большинство), будем называть модульными (dockable). Сложные палитры, состоящие из нескольких отдельных модулей, называются сборными (tabbed).

Нa рис. 1.1 показан внешний вид программы с четырьмя раскрытыми диалоговыми окнами. Самым востребованным средством управления, бесспорно, является палитра Property inspector (Инспектор свойств). С ее помощью выполняется множество операций по форматированию и редактированию объектов па страницах HTML. Палитра Behaviors (Режимы) - это пример модульной плавающей палитры. Программа Dreamweaver располагает примерно дюжиной подобных объектов, предназначенных для решения раз-

Рис. 1.1. Внешний вид окна программы

личных проектных задач. На рисунке приведен пример сборной палитры, которая состоит из двух простых модульных палитр: Layers (Слои) и History (Предыстория). Палитра Objects (Объекты) предназначена для вставки внешних объектов: рисунков, таблиц, слоев, фреймов и пр. Все остальные элементы управления, показанные на рисунке, являются неотъемлемыми составными частями окна документа.

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

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

Окно документа - это то рабочее пространство, где создаются гипертекстовые документы (рис. 1.2). Оно хранит текст, картинки, таблицы, формы и другие объекты, которые составляют содержимое страниц HTML. Программа Dreamweaver является редактором класса WYSIWYG. Эта громоздкая аббревиатура образована по первым буквам английской фразы What you see is what you get (что видите, то и получите). Это значит, что изображение страницы HTML в окне документа не сильно отличается от ее представления в наиболее популярных программах просмотра - броузерах Microsoft Internet Explorer и Netscape Navigator. Несмотря на то, что прямая работа с кодами HTML считается признаком высокого профессионализма, даже самый искушенный Web-дизайнер едва ли откажется от преимуществ, которые дает графический интерфейс и создание документов в режиме WYSIWYG.

Рис. 1.2. Окно документа

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

Режимы работы

В режиме WYSIWYG создание гипертекстового документа немногим отличается от работы с обычным текстовым редактором.

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

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

Все версии программы Dreamweaver, начиная с первой, предоставляют пользователю возможной прямого редактирования кодов разметки. Какие средства применяются для этой работы? Во-первых, это специальный встроенный редактор Code Inspector (Инспектор кодов), который сопровождает программу Dreamweaver с самых первых версий и претерпел за это время только косметические изменения. Во-вторых, пользователь имеет возможность подключить внешний редактор HTML по собственному выбору. В этой роли могут выступать различные программы: от простейших текстовых редакторов универсального назначения (например, Блокнот) до высокоспециализированных программных средств, предназначенных для работы со сложными гипертекстовыми документами (Allaire HomeSite).

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

  • Design View (Режим планировки). Это обычный для визуального редактора режим WYSIWYG, в котором отображаются объекты гипертекстовой страницы, их форматирование и расположение. От пользователя скрыты коды разметки, с помощью которых решаются информационные и оформительские задачи создания гипертекстового документа. Далее будем иногда называть этот режим визуальным.
  • Code View (Режим разметки). В этом режиме в окне документа отображается полный исходный код гипертекстовой страницы, со всеми дескрипторами, метатегами, сценариями и комментариями. Этот режим работы будем называть кодовым. На рис. 1.3 показана пустая страница в режиме отображения кодов. Каждая новая страница, не содержащая ни одного текстового или графического объекта, автоматически получает базовую гипертекстовую разметку.

Рис. 1.3. Окно документа в режиме разметки

Code and Design View (Режим разметки и планировки). Это комбинированный режим, в котором окно документа расщепляется на две секции. В одной секции отображаются коды гипертекстовой разметки, в другой программа показывает планировку страницы со всеми объектами и атрибутами форматирования. На рис. 1.4. показано расщепленное окно документа, в котором представлена пустая страница.)

Рис. 1.4. Расщепленное окно документа

Имеется несколько способов изменения режима работы. Во-первых, это команды строки меню: View > Code (Вид > Разметка), View > Design (Вид > Планировка), View > Code and Design (Вид > Разметка и планировка). Во-вторых, на панели инструментов представлены кнопки, позволяющие быстро переходить из одного режима в другой. Наконец, при помощи клавиатурной комбинации CTRL+TAB можно переходить из режима планировки в режим разметки и обратно или перемещаться из одной части расщепленного окна в другую.

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

Среди программистов получил хождение термин “исходный текст”. Так называется программа, записанная на языке программирования высокого уровня, на начальных этапах ее разработки. Этот термин неплохо передает отношения, существующие между кодовой частью гипертекстового документа и его видимым образом. Запись документа на языке HTML будем называть исходным текстом.

Строка меню

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

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

  • Меню File (Файл) объединяет основные файловые команды, средства работы с шаблонами гипертекстовых документов, команды экспорта, импорта и просмотра во внешних броузерах.
  • В меню Edit (Правка) входят команды, управляющие буфером обмена, средства поиска, директивы выбора объектов и настройки программы. Отдельный раздел составляют команды, управляющие кодами гипертекстовой разметки.
  • Все пункты меню View (Вид) имеют близкое назначение. Здесь объединены средства визуализации вспомогательных элементов интерфейса и объектов гипертекстового документа.
  • В меню Insert (Вставка) входят команды импорта различных объектов: изображений, таблиц, сценариев, форм, слоев, специальных символов, метадескрипторов и пр.
  • Меню Modify (Изменить) объединяет средства и команды для изменения атрибутов объектов гипертекстового документа.
  • Меню Text (Текст) включает в себя ресурсы программы, связанные с созданием текстовых фрагментов и их форматированием.
  • Содержимое меню Commands (Команды) составляют различные командные средства, предназначенные для автоматической обработки гипертекстовых документов: сценарии, верификаторы кодов, утилиты и пр.
  • Пункт Site (Сайт) в строке меню включает в себя средства работы с сайтами и связанными системами гипертекстовых документов, обладающими сложной структурой и многочисленными ссылками.
  • В меню Window (Окно) входят команды визуализации палитр, панелей и диалоговых окон программы.
  • В меню Help (Справка) расположены команды вызова интерактивной справки, запуска электронного учебника, средства автоматической электронной регистрации и запуск демонстрационного ролика.

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

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

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

Перечислим все элементы управления, расположенные на ней (слева направо).

  • Code View (Режим разметки). Кнопка перехода в режим отображения исходной гипертекстовой разметки документа.
  • Code and Design View (Режим разметки и планировки). Кнопка перехода в комбинированный режим работы, когда окно документа расщепляется на две части: в одной выводятся коды разметки, в другой отображается внешний вид гипертекстовой страницы.
  • Design View (Режим планировки). Кнопка перехода в визуальный режим работы редактора - режим WYSIWYG.
  • Title (Заголовок). Текстовое поле, предназначенное для ввода заголовка документа.
  • File Management (Управление файлами). Кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения.
  • Preview/Debug in Browser (Просмотр/отладка в броузере). Кнопка открывает меню с командами просмотра и отладки гипертекстового документа. Первые выполняют верификацию гипертекстовой разметки. Для этого они загружают документ в одну из установленных и связанных с системой Dreamweaver программ просмотра. Команды отладки проверяют работоспособность кодов языка JavaScript в выбранном броузере.
  • Refresh Design View (Обновить страницу). По этой команде все изменения, сделанные в исходном тексте документа, переносятся в режим планировки. При этом выполняется проверка синтаксиса и интерпретация кодов. Корректные фрагменты отображаются на странице, ошибочные помечаются желтым цветом.
  • Reference (Справка). Кнопка выводит на экран электронное справочное руководство, содержащее описание дескрипторов языка гипертекстовой разметки, конструкций иерархических стилевых спецификаций (CSS) и операторов языка JavaScript.
  • Code Navigation (Навигация по кодам). Кнопка открывает доступ к меню с командами, управляющими отладкой встроенных программ, написанных на языке JavaScript.
  • View Options (Параметры отображения). Кнопка открывает меню с командами, которые управляют визуализацией вспомогательных элементов окна документа. В это меню входят многие команды меню View (Вид) строки меню, а также команды, которые управляют представлением кодов.

Селектор разметки

В левой части строки состояния расположен селектор разметки (tag selector). Он представляет собой своеобразный индикатор, который показывает дескрипторы разметки HTML, окружающие текущую позицию курсора. Так, для любой пустой страницы селектор принимает значение . Если набрать строчку текста и нажать клавишу ENTER, то появится дескриптор параграфа <р>. Если поместить курсор внутрь таблицы, селектор покажет дескрипторы

, ,
, относящиеся к таблице, активной строке и ячейке.

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

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

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

Размеры страницы

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

Есть и другие причины, заставляющие менять размеры окна броузера при просмотре онлайновых документов. Каждый грамотный человек согласится с тем, что скорость чтения зависит, кроме всего прочего, и от длины строки. Восприятие прочитанного существенно осложняется, если строчки значительно отличаются от некоторой нормы. Исследования по психологии показали, что оптимальная длина текстовой строки тесно связана с числом символов алфавита. Чтобы определить зону комфортного чтения, надо размер алфавита умножить на коэффициент, который принимает значения от 1,5 до 2. Это значит, что строчки текста на русском языке не должны быть длиннее 70 символов. Многие пользователи, и не подозревая о существовании подобной формулы, ограничивают размеры окна броузера, чтобы предотвратить появление чрезмерно длинных строчек.

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

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

Первый пункт меню 592w задает ширину области документа равной 592 пикселям и оставляет текущую высоту области без изменений. Последний пункт Edit SizesРs (Правка размеров) позволяет выбрать размеры окна документа и внести их в список стандартных. На экране отображается диалоговое окно Preferences (Настройки), где в поле Width (Ширина) задается ширина, а в ноле Height (Высота) - высота области. Текстовое описание нового стандарта указывается в поле Description (Описание).

Все размеры рассчитываются без учета служебных элементов окна программы: размерных линеек и строки меню. Учитывается только рабочая область, отведенная под документ и его объекты. Высота строки состояния и левые и правые поля в программе Dreamweaver подобраны по размерам аналогичных элементов наиболее популярных броузеров Microsoft Explorer и Netscape Navigator.

Индикатор загрузки

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

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

Скорость модемного соединения, принятая в качестве базы расчета, входит в число основных настроек программы и допускает изменение. Для этого надо дать команду Edit > Preferences > Status Bar (Правка > Настройки > Строка состояния) и в поле Connection Speed (Скорость соединения) ввести новое значение скорости.

Основной вклад в суммарные килобайты гипертекстового документа вносят рисунки, мультимедийные файлы и файлы анимации. Чтобы оценить индивидуальный размер картинки, следует ее выбрать и прочитать искомую величину в левом верхнем поле палитры Property inspector (Инспектор свойств) (см. рис. 1.8).

Палитра и панель быстрого запуска

Палитра быстрого запуска (Launcher) - это служебная, вспомогательная палитра, предназначенная для вывода на экран основных диалоговых окон м панелей программы. Для отображения палитры (рис. 1.6) следует выполнить команду Window > Launcher (Окно > Палитра быстрого запуска). Повторное выполнение этой команды убирает палитру с экрана.

Рис. 1.6. Палитра быстрого запуска

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

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

  • Site (Сайт). Диалоговое окно для управления большим сайтом: системой взаимосвязанных гипертекстовых документов со сложными перекрестными ссылками.
  • Assets (Библиотека). Это название, буквальный перевод которого означает активы или фонды, разработчики программы присвоили панели, которая играет в программе роль библиотеки или главного фондохранилища. Она хранит типовые элементы дизайна гипертекстовых документов: изображения, цвета, внешние ссылки, сценарии, Flash-ролики, шаблоны и т. п.
  • HTML Styles (Стили HTML).Палитра, предназначенная для работы со стилями разметки HTML для текстовых строк и абзацев.
  • CSS Styles (Каскадные листы стилей). Палитра служит для управления каскадными листами стилей (cascading style sheet). Этот не очень удачный дословный перевод термина, к сожалению, уже закрепился в русском языке. Термин “иерархические стилевые спецификации” - это неплохой вариант перевода, который следует смыслу явления, а не его букве. В дальнейшем будем использовать оба варианта.
  • Behaviors (Режимы). Палитра объединяет средства управления динамическими сценариями. Динамический сценарий программно управляет интерактивностью гипертекстовой страницы. Сценарии строятся на основе событий, которые происходят на странице в процессе их просмотра. События запускают процедуры обработки объектов, которые обычно пишутся на языке JavaScript. В эту схему укладывается великое множество интерактивных эффектов: от простейших анимированных кнопок, проявляющих чувствительность к положению указателя, до сложных процедур обработки баз данных.
  • History (Предыстория). Палитра записывает и хранит действия пользователя по редактированию документа HTML. Протокол работы с программой позволяет выполнять многоуровневую отмену операций редактирования и сохранять типовые повторяющиеся цепочки как команды.
  • Code Inspector (Инспектор кода). Одна из самых важных палитр программы. По сути дела это внутренний редактор кода HTML, интегрированный в графическую оболочку Dreamweaver. В предыдущих версиях программы, где не было возможности менять режимы работы окна документа, эта палитра была одной из самых важных составляющих. В четвертой версии это обычная модульная палитра, которую можно объединять с другими объектами такого класса.

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

Содержимое палитры быстрого запуска можно менять. Для этого надо дать команду Edit > Preferences (Правка > Настройки). Откроется диалоговое окно с главными настройками программы. В нем выберите категорию Panels (Панели) и измените содержимое палитры средствами, которые предоставляет раздел Show in Launcher (Показать в палитре быстрого запуска).

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

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

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

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

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

Палитра Property inspector (Инспектор свойств)- это основной инструмент программы. Большую часть работы по заданию и изменению атрибутов объектов, расположенных на странице HTML, приходится выполнять с его помощью.

Инспектор свойств представляет собой плавающую палитру, обладающую свойством контекстной зависимости (рис. 1.8). Это значит, что ее содержимое может меняться в зависимости от выполняемой операции, положения курсора и типа выбранных объектов.Рt>

Рис. 1.7. Контекстное меню

Для вывода палитры на экран надо выполнить команду Window > Properties (Окно > Свойства) или воспользоваться комбинацией клавиш CTRL+F3. Повторное выполнение этой команды убирает инспектора с экрана.

Рис. 1.8. Инспектор свойств

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

  • Список Format (Формат) предназначен для выбора одного из стандартных структурных типов текста (1).
  • Список Link (Ссылка) хранит перечень всех ссылок текущего документа. Каждая ссылка обладает неограниченной применимостью. Это значит, что однажды созданную ссылку можно использовать повторно вместе с другими активными областями (2).
  • Список, с помощью которого выбирается шрифтовое оформление выбранного текстового фрагмента. Пункты этого списка представляют собой шрифтовые семейства или наборы, которые объединяют несколько шрифтов и упорядочивают их по предпочтительности применения. Свои названия отдельные пункты получают по заглавным шрифтам наборов (3).
  • Список Size (Размер) предназначен для выбора размера шрифта (4).
  • Кнопка вызова стандартной цветовой палитры. Эта палитра служит для выбора цвета выбранного текстового фрагмента (5).
  • Поле, в котором отображается или задается шестнадцатеричный код выбранного цвета (6).
  • Стандартные по виду и функциям, выполняемым в различных программах, кнопки для выбора начертания шрифта (7).
  • Кнопки для выбора типа выравнивания (8).
  • Кнопка вызова интерактивной подсказки (9).
  • Маркер-указатель. Создает гипертекстовые ссылки при его перетаскивании на требуемый источник: файл или символ привязки (якорь) (10).
  • Кнопка открытия диалогового окна Select File (Выбрать файл). С помощью этого окна можно выполнить навигацию по файловой системе и выбрать документ, который будет служить целью гипертекстовой ссылки (11).
  • Список Target (Назначение) предназначен для выбора способа визуализации документа, на который указывает гипертекстовая ссылка. В этом разделе можно определить окно или фрейм, в котором следует выводить ссылочный документ (12).
  • Стандартные для большинства редакторов, текстовых и HTML, кнопки для создания маркированных и нумерованных списков (13).
  • Кнопка List Item (Раздел списка) служит для открытия диалогового окна List Properties (Свойства списка), предназначенного для редактирования списков всех типов (14).
  • Две кнопки, управляющие горизонтальным сдвигом текстовых фрагментов (15).
  • Кнопка вызова экспресс-редактора кодов (16).
  • Кнопка Expander arrow (Расширение) служит для изменения размером палитры. С ее помощью можно сворачивать и разворачивать палитру Property Inspector (Инспектор свойств) (17).

Большинство команд, выполняемых при помощи Инспектора свойств, немедленно переносятся на обрабатываемый объект: рисунок, текст или таблицу, Лишь в редких случаях требуется дополнительное подтверждение, которое может выполняться нажатием клавиши ENTER или TAB или щелчком мыши.

Для перемещения по разделам Инспектора свойств удобно использовать клавишу TAB. Ее нажатие приводит в действие выбранные установки текущего поля или списка и делает активным следующий элемент управления палитры.

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

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

Редакторы HTML, работающие в режиме WYSIWYG, весьма расточительно расходуют свободное пространство экрана. Это вызвано отнюдь не нерадивостью разработчиков; тому есть объективные причины. Гипертекстовые документы требуют большего числа обрабатывающих функций, чем документы, выводимые на печать. Каждая утилита или команда должна быть представлена в интерфейсе редактора кнопкой или пунктом меню. Поэтому часто рабочий стол редакторов HTML завален палитрами и панелями, как ломберный стол отыгранными картами в азартной партии с большими ставками.

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

Разработчики снабдили программу Dreamweaver несколькими вспомогательными функциями, которые помогают пользователю содержать окно в относительном порядке. Во-первых, палитры Dreamweaver - это отчасти самостоятельные окна, способные располагаться где угодно на Рабочем столе Windows. Это позволяет поделить рабочее пространство монитора между служебными элементами управления и окном документа. Счастливые обладатели двухмониторных систем (подобные конфигурации поддерживают последние версии операционной системы Windows) могут сгруппировать все вспомогательные окна и палитры на одном мониторе, освободив другой для работы с документом.

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

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

Палитра объектов

Только самые простые гипертекстовые документы представляют собой фрагменты текста, размеченные командами перехода по ссылке. Большинство современных страниц HTML мультимедийные. Это значит, что в их состав входят внешние объекты: мультимедийные файлы, средства воспроизведения, картинки, файлы анимации и пр.

Палитра Objects (Палитра объектов) служит для вставки и создания внешних объектов. Все, что можно включить в состав страницы HTML, от растровых изображений до апплетов, написанных на языке Java, можно вставить при помощи палитры объектов.

Чтобы вывести палитру на экран, следует выполнить команду Window > Objects (Окно > Объекты). Клавиатурный эквивалент команды это комбинация CTRL +F2.Повторное выполнение команды убирает палитру с экрана.

Рис. 1.9. Палитра объектов

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

  • Characters (Специальные символы). Вставка специальных символов, отсутствующих на клавиатуре (торговая марка, копирайт и пр.).
  • Common (Общие). Раздел объединяет самые ходовые объекты, без которых трудно обойтись даже при создании простых гипертекстовых документов. Это таблицы, изображения, горизонтальные линейки, текущие календарные даты и т. д.
  • Forms (Формы). Формы и элементы, их образующие: переключатели, списки, текстовые поля и пр.
  • Frames (Фреймы). Создание фреймовых структур с различным положением составных частей - фреймов.
  • Head (Заголовок). Вставка метаописаний в заголовочную часть гипертекстового документа.
  • Invisibles (Скрытые объекты). Размещение скрытых объектов, которые не отображаются программами просмотра страниц HTML. Это самый маленький раздел палитры; он позволяет добавлять всего лишь три типа объектов: символы привязки, комментарии и сценарии.
  • Special (Специальные объекты). Раздел объединяет кнопки вставки специальных объектов. К таковым разработчики программы отнесли апплеты, объекты ActiveX и внешние дополнения (plag- ins).

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

  • Draw Layout Cell (Создание макетной ячейки). Доступ к инструменту создания макетной ячейки.
  • Draw Layout Table (Создание макетной таблицы). Доступ к инструменту создания макетной таблицы.
  • Standard View (Стандартный режим). Переход в стандартный режим работы с документом.
  • Layout View (Режим макетирования). Переход в режим макетирования документа.

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

У некоторых разделов на палитре отображаются не все кнопки. В частности, раздел Common (Общие) объединяет почти два десятка кнопок, которые просто не помещаются в окно палитры. Чтобы получить доступ ко всем ресурсам больших разделов, можно использовать прокрутку (ее обеспечивают две кнопки со стрелками, расположенные у края палитры) или просто увеличить размеры диалогового окна.

Процедура вставки объектов в большинстве случаев требует ввода дополнительных параметров настройки. В таких случаях на экране появляется диалоговое окно, в котором пользователь должен выбрать или ввести требуемые параметры. В основных настройках программы в разделе General (Общие), есть флажок Show Dialog When Inserting Objects (Показывать диалоговые окна при вставке объектов), управляющий отображением этих окон. Если сбросить этот флажок, то для большинства объектов (хотя и не для всех) принимаются стандартные параметры и вывод промежуточных окон подавляется. Чтобы выполнить такую настройку, дайте команду Edit > Preferences > General (Правка > Настройки > Общие).

Инспектор кода

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

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

В состав пакета Dreamweaver входит специальное средство, предназначенное для просмотра и редактирования кодов разметки гипертекстовых документов. В документации на программу оно называется Code Inspector (Инспектор кода).

Существует несколько различных способов его вызова. Во-первых, это команда Window > Code Inspector (Окно > Инспектор кода), во-вторых, это клавиша F10. Кроме того, панель и палитра быстрого запуска располагают специальными кнопками активизации этого средства. Они изображаются в виде пары угловых скобок, повторяя обозначение дескрипторов, принятое и языке HTML.

Рис. 1.10. Инспектор кода

Нa рис. 1.10 показано окно Инспектора кода. В четвертой версии программы Dreamweaver это средство реализовано в виде обычной плавающей палитры, которая по технике работы и возможностям почти не отличается от кодового режима окна документа (Code View). Пять кнопок во втором ряду - это дубликаты командных кнопок основной панели инструментов (см. рис. 1.5). Представлением кодов разметки в палитре управляют команды, доступ к которым открывает кнопка View Options (Параметры отображения). Рассмотрим эти команды.

  • Word Wrap (Перенос по словам). Режим переноса строк кода. Если он включен, то декларации языка HTML, длина которых превосходит текущие размеры окна редактора, автоматически переносятся на другую строчку. Никаких символов перехода на новую строку в исходный текст документа при этом не вставляется - речь идет лишь об особом режиме просмотра.
  • Line Numbers (Номера строк). Команда отображения нумерации. Если этот режим включен, каждая строка получает порядковый номер, что упрощает ориентацию и поиск в больших гипертекстовых документах.
  • Highlight Invalid HTML (Пометка некорректных кодов). Эта команда активизирует режим, в котором синтаксически ошибочные конструкции выделяются желтым цветом в Инспекторе кода и в окне документа. При этом Инспектор свойств выводит сообщение об ошибке и в некоторых случаях предлагает рецепты ее исправления.
  • Syntax Coloring (Раскраска синтаксических конструкций). В этом режиме различные по смыслу части кодовой разметки выделяются разным цветом, что помогает быстрее ориентироваться в исходном тексте документа. Более того, программа Dreamweaver дает возможность выбрать особое цветовое представление для каждого дескриптора языка HTML. Назначение цветов выполняется в основных настройках программы в разделе Code Colors (Цвета кода).
  • Auto Indent (Автоматический отступ). Команда активизирует режим автоматической установки отступов для дескрипторов разметки, вводимых в окне Инспектора кода. Виды дескрипторов и правила расстановки отступов задаются в специальном файле инициализации SourceFormat.txt.

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

  • Find and Replace (Найти и заменить). Вызывает команду поиска и замены.
  • Find Next (Найти далее). Запускает процедуру поиска с ранее введенным образцом для поиска и текущими параметрами поиска. Диалоговое окно настройки поиска и замены не отображается.
  • Reference (Справочное руководство). Вызывает справочное руководство по ресурсам HTML, JavaScript и CSS.
  • Set Breakpoint (Вставить контрольную точку). Устанавливает контрольную точку в позиции текстового курсора. Контрольные точки помогают при отладке встроенных программ.
  • Remove All Breakpoint (Удалить все контрольные точки). Удаляет все контрольные точки из исходного текста документа.
  • Cut (Вырезать). Вырезает выбранный кодовый фрагмент в буфер обмена.
  • Сору (Копировать). Копирует выбранный кодовый фрагмент в буфер обмена.
  • Paste (Вставить). Выполняет вставку содержимого буфера обмена.

Для переключения между Инспектором кода и окном документа можно использовать щелчок мыши или комбинацию клавиш CTRL+TAB.

Инспектор кода можно вполне успешно использовать в несколько необычной для него роли текстового редактора. Программа Dreamweaver успешно распознает файлы, записанные с использованием символов ASCII, например, простой текстовый файл или исходный текст программы. Такие документы открываются при помощи штатной команды Open (Открыть) и загружаются в окно документа, которое работает в кодовом режиме. При этом некоторые ресурсы программы становятся недоступными.

1.4. Открытие файлов

Техника открытия файлов в программе ничем не отличается от тех шаблонных приемов, которыми располагают приложения Windows. Штатный способ - это команда File > Open (Файл >Открыть). Команда имеет клавиатурный эквивалент - сочетание клавиш CTRL+0. Кроме того, в программе поддерживается прием перетаскивания. Значок файла HTML можно перетащить и бросить в любом месте окна документа или на значок или ярлык неактивной программы.

По умолчанию новый файл открываются в собственном окне программы. Это не всегда удобное соглашение можно изменить. Для этого надо по команде Edit > Preferences (Правка > Настройки) получить доступ к основным настройкам программы и в разделе General (Общие) сбросить флажок Open Files in New Window (Открывать файлы в новом окне).

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

Программа Dreamweaver выполняет проверку синтаксиса открываемых страниц HTML. При обнаружении ошибок программа пытается самостоятельно внести в разметку необходимые коррективы. Обо всех неисправимых ошибках кода программа информирует пользователя в специальном окне под названием HTML Corrections (Исправления HTML).

Режим исправления ошибок и вывод протокола проверки допускают настройку. Для этого следует по команде Edit > Preferences (Правка > Настройки) вывести на экран диалоговое окно с основными параметрами программы и внести необходимые коррективы в раздел Code Rewriting (Переписывание кодов).

Программа способна открывать почти все документы, основанные на гипертекстовой разметке стандартного HTML и его расширений и версий.

Приведем далеко не полный перечень файловых форматов, доступных программе: .HTM, .HTML, .ASP, .CFM, .CFML, .TXT, .SHTM, .SHTML, .STM,

LASSO,.ХМL,.CSS, .PHP.

1.5. Сохранение файлов

Сохранение файлов в программе Dreamweaver выполняется стандартными для любых приложений Windows средствами. Это команды строки меню: File > Save (Файл > Сохранить) и File > Save as (Файл > Сохранить как). Первая команда имеет клавиатурный эквивалент - комбинацию клавиш CTRL+S. Она отображает диалоговое окно, в котором задается имя, тип и расположение файла, только в том случае, если имя текущего документа отсутствует. Это же диалоговое окно появляется при каждом обращении к команде Save as (Сохранить как). Этой команде поставлена в соответствие комбинация клавиш CTRL+SHIFT+S. Во всем остальном команды не имеют различий.

По умолчанию файлы гипертекстовых документов получают расширение.НТМ в операционной системе Windows и.HTML на платформе Macintosh.В программе существует полное равновесие между командами открытия и сохранения файлов. Все типы файлов, которые могут быть открыты программой, доступны и для сохранения.

Длинные имена файлов, поддерживаемые операционными системами, начиная с Windows95, стали привычными для современного пользователя. Некоторые серверы к известным правилам образования имен добавляют свои ограничения. Следует избегать в именах пробелов и любых знаком пунктуации, за исключением дефисов (hyphen) и символов подчеркивания (underscore).

1.6. Отмена и повторение

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

В программе Dreamweaver для этого достаточно выполнить команду Edit > Undo (Правка > Отмена) или воспользоваться клавиатурной комбинацией CTRL+Z.

Программа допускает отмену нескольких последовательных действий. Глубина отката входит в число основных настроек программы; по умолчанию она равна 100.

Изменить это число можно следующим образом.

  1. Дайте команду Edit>Preferences(Правка>Настройки)
  2. Откройте категорию General (Общие).
  3. Задайте значение глубины отката в поле Maximum Number of History Stеps (Максимальное число записей журнала).

Запись и хранение редакторской правки и команд пользователя требует дополнительных вычислительных ресурсов. Если резервы оперативной памяти невелики, то большие значения, установленные в поле Maximum Number of History Steps (Максимальное число записей журнала), могут приводить к существенному замедлению работы программы.

Команда Undo (Отмена) позволяет выполнить отмену только “по горячим следам”. Если требуются применить метод проб и ошибок, провести эксперименты с проектом, проверить различные варианты, то она оказывается мало полезной. Кроме того, некоторые команды в принципе нельзя отменить таким способом.

Чтобы выполнить глубокий откат или отменить необратимые команды, можно воспользоваться командой File > Revert (Файл > Вернуться к сохраненному). Эта команда восстанавливает то состояние документа на момент последнего сохранения файла.

Тактика использования команды проста. Перед запуском необратимых или рискованных команд следует сохранить документ на диске. Если опыт оказался неудачным, то команда Revert (Файл > Вернуться к сохраненному) восстановит сохраненное состояние документа.

Программа ведет протокол работы с документом; выполненные команды и операции по редактированию страницы записываются в специальную палитру History (Предыстория). Это гибкое средство управления предоставляет пользователю намного большую свободу управления, чем стандартные команды отмены и возврата к сохраненной версии.

Способы повторения выполненных операций представлены в программе намного скромнее. Команда Edit > Redo (Правка > Повторить) позволяет повторно выполнить предыдущую команду или редакторское действие. Ей соответствует стандартная клавиатурная комбинация CTRL+Y.

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

1.7. Работа с палитрой History

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

Вывести палитру на экран можно по команде Window > History или при помощи комбинации клавиш SHIFT+F10 (рис. 1.11).

Рuс. 1.11. Палитра History (Предыстория)

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

Рассмотрим основные приемы работы с этим объектом

  • Для отмены нескольких последовательных

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

Вместо перетаскивания можно просто щелкнуть на левой полосе палитры напротив

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

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

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

  • Чтобы повторить отдельную выполненную и записанную операцию, надо ее выбрать и нажать кнопку Replay (Воспроизвести) в левом нижнем углу палитры. Программа дает возможность повторно выполнить несколько различных операций. Для этого их надо выбрать и щелкнуть на той же кнопке палитры. Для выбора несмежных команд надо удерживать нажатой клавишу CTRL.
  • Емкость палитры - величина переменная, она задается в основных настройках программы. Откройте командой Edit > Preferences (Правка > Настройки) диалоговое окно с настройками, выберите раздел General (Общие) и введите в поле Maximum Number of History Steps (Максимальное число записей журнала) максимальное число шагов, записываемых в палитру. По умолчанию оно равно 100. Когда число команд палитры превысит установленную емкость, новые команды записываются за счет старых.

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