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

Окно документа — это то рабочее пространство, где создаются гипертекстовые документы (рис. 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, окружающие текущую позицию курсора. Так, для любой пустой страницы селектор принимает значение <body>. Если набрать строчку текста и нажать клавишу ENTER, то появится дескриптор параграфа <р>. Если поместить курсор внутрь таблицы, селектор покажет дескрипторы <table>, <tr>, <td>, относящиеся к таблице, активной строке и ячейке.

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

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

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

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

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

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

Содержание раздела