Автоматизация ввода
Теперь давайте обратим внимание на панель
инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы.
Элементы управления, представленные на этой панели, предназначены для автоматизации
ввода элементов веб-страницы. Элементы управления сгруппированы в несколько вкладок:
• Common — для ввода тегов, которые используются
наиболее часто;
• Fonts — для изменения параметров шрифта;
• Tables — для создания таблиц;
• Frames — для создания фреймовых структур;
• Lists — для создания списков;
• Forms — для ввода элементов форм;
• Script — для подготовки ко
вводу сценариев, Java-апплетов и элементов ActiveX;
• CFML—для ввода тегов ColdFusion;
• ASP — для определения некоторых элементов динамических страниц active server pages;
• Linkbot — для автоматической проверки
ссылок с помощью внешней программы Linkbot.
Если на панели QuickBar видны не все вкладки,
щелкните на ней правой кнопкой мыши, и в открывшемся меню отметьте те вкладки,
которые хотите сделать видимыми. Подробно разбирать все вкладки панели Quick Bar мы здесь не будем, но
общий принцип работы с ними рассмотрим.
На каждой вкладке представлены командные кнопки, с помощью которых можно
быстро ввести нужный тег или целый блок-заготовку. Например, если перед вами
совершенно чистая страница, нажмите на самую левую кнопку вкладки Common — это кнопка Quick Start (Быстрый старт). Из открывшегося списка можно выбрать
тип документа и быстро сгенерировать его .HTML-заголовок. А если нажать вторую
кнопку той же вкладки — кнопку Body, то откроется
диалоговое окно, в котором можно изменить свойства текущей страницы. Наглядно,
с помощью раскрывающегося списка, организован выбор цвета текста и фона, а если
ни один из предложенных цветов не подходит, командой Custom
(Настроить) можно открыть полную палитру доступных цветов. В небольшом окне
справа можно увидеть, как будет смотреться избранное цветовое сочетание.
Для выбора фонового рисунка служит кнопка, расположенная рядом с полем Background Image (Фоновый
рисунок). Она открывает стандартное окно выбора файла с возможностью его
предварительного просмотра. Конечно, можно ввести название графического файла и
просто с клавиатуры.
Для ввода значения атрибута STYLE= также можно воспользоваться раскрывающей
кнопкой соответствующего поля. При этом открывается окно внешней программы TopStyle. Это же окно будет открываться при каждой
установке атрибута STYLE= для любого тега или при редактировании стилевого
блока. В его правой части находится панель Инспектора стилей (Style Inspector), на которой в
алфавитном порядке приведены все доступные свойства стилей. Обратите внимание
на то, что набор доступных свойств можно изменять в соответствии со своими
запросами. Это может быть полный набор из спецификации CSS уровня 1 или 2, или
набор свойств, поддерживаемых различными версиями броузеров.
Необходимый набор можно выбрать из раскрывающегося списка в Инспекторе стилей.
Значения доступных свойств стилей можно выбирать в
Инспекторе с помощью раскрывающихся списков. Правда, некоторые значения,
например цифровые значения параметров в соответствующих диалоговых окнах, лучше
все-таки вводить вручную. Все изменения значений тут же отображаются в левой
части окна TopStyle. По завершении настройки нажмите
кнопку Done (Готово) — и соответствующий текст
появится в поле ввода Style (Стиль). Теперь обратите
внимание на еще одну особенность окна Body . На его
нижней панели (там, где имеются поля Left Margin, Top Margin
и Fixed Background)
изображен значок броузера Internet
Explorer 4. Наличие этого значка означает, что
атрибуты, представленные в данном разделе, будут ( работать
только в этом броузере.
К этому вопросу мы еще вернемся, а пока нажмите кнопку ОК, и вы увидите, что
все установленные атрибуты тега <BODY>
появились в тексте, например, вот так:
<BODY
TEXT="Blue" BACKGROUND="arrowl.gif"
BGCOLOR="Fuchsia" LINK="Aqua" VLINK="Black"
ALINK="Gray" STYLE="background-position: right;
border-style:
dotted; background-repeat: repeat-y;">
Диалоговые окна редактирования тегов
О том, что это все означает, мы поговорим в следующих главах, а пока что
рассмотрим еще одно типичное диалоговое окно программы. Откройте вкладку Tables и нажмите кнопку Table dialog — обычно она вторая слева. Откроется диалоговое окно пелактопа тегов ТagEditor — TABLE
— Internet Explorer 3;
— Netscape Navigator 3;
—Internet Explorer 4;
— Netscape Communicator 4;
— броузер
Opera (подразумевается версия 3.5).
Как правило, свойства, которые поддерживаются каким-либо
типом броузера более низкой версии, поддерживаются и
в его дальнейших версиях, то есть, если значок показывает, что тот или иной
атрибут поддерживается в броузере Internet
Explorer 3, то это означает, что он, скорее всего,
будет поддерживаться также и в броузере Internet Explorer 4 или в пятой
версии. Однако броузеры других типов, даже более старших версий, поддерживать этот атрибут, скорее
всего, не будут.
Кроме того, в подобных диалоговых окнах имеется вкладка HTML 4.0, на которой
можно устанавливать значения новых атрибутов, стандартизированных в четвертой
версии языка HTML. Если какой-либо из этих “ новых ” атрибутов поддерживался и
в более ранних версиях некоторых броузеров, то на
этой вкладке вы увидите раздел Also in: (А также в...), в котором эти броузеры обозначены с помощью значков.
Дополнительно, данное диалоговое окно содержит еще три вкладки. Средства
вкладки Style Sheets/Accessibility (Списки стилей) служат для установки значения
атрибута STYLE= (с помощью внешней программы TopStyle,
как уже говорилось выше) или для определения стилевого селектора (CLASS) и еще
некоторых связанных с этим атрибутов. Средства вкладки Language
(Язык) предназначены для установок, связанных с языком текста, и, наконец,
средства вкладки Events (События)
Отметим еще одну полезную особенность программы HomeSite.
В ней можно щелкнуть внутри любого тега правой кнопкой мыши и выбрать из
контекстного меню пункт Edit Tag (Правка тега). После
этого открывается диалоговое окно Редактора тегов (Tag
Editor), в котором тоже очень удобно устанавливать
значения всех доступных атрибутов.
Кстати, еще одна интересная возможность заключается в том, что теги И можно “сворачивать” командой Collapse
Tag (Свернуть тег) из контекстного меню. При этом
содержимое тега (все, что находится между его открывающим и закрывающим элементами,
например, между <BODY>
и </BODY>) свернется в
небольшой значок-кнопку. Это полезно при редактировании больших файлов, если
надо быстро окинуть взглядом содержимое всей веб.
По крайней мере, они не обязаны этого делать.
границы. В контекстном меню
имеется также команда Collapse All
Identical QS (Свернуть все идентичные теги), которая
сворачивает содержимое всех тегов, идентичных данному по имени.
Например, если при подаче этой команды был выделен тег <TR>, то в значки свернется содержимое всех гов <TR>,
имеющихся в файле. Чтобы снова развернуть эти значки в текст, щелкните правой
кнопкой мыши в любом месте панели редактирования и выберите в контекстном меню
пункт Expand All
(Развернуть все).
Наконец, прежде чем завершить наш краткий обзор возможностей окна
редактирования, отметим еще одну полезную функцию. В программе Homesite имеется очень удобный инструмент для создания так
называемых графических карт ссылок (Image map). Вы, наверное, видели на веб-страницах
графические изображения, щелчок мыши в разных местах
которых выполняет переход к разным веб-страницам.
Например, если на рисунке изображен автомобиль, то при щелчке на кабине
открывается внутренность кабины, а при щелчке на капоте — двигательный отсек и
т. д.
Создание графических карт ссылок
Для создания графической карты ссылок служит кнопка New
Image Map (Создать
изображение-карту) на верхней панели инструментов. Она открывает диалоговое
окно, в котором можно выбрать какое-либо изображение, уже имеющееся на
странице, или загрузить новое. После этого открывается окно редактора
графической карты ссылок (Image Map
Editor)
Здесь можно визуально задать прямоугольные, круглые или многоугольные
области, используя соответствующие инструменты. Механика работы подобна
рисованию фигур в любом графическом редакторе. А с помощью
инструмента Стрелка можно легко отредактировать местоположение задан ных областей. После
определения каждой области автоматически откры вается окно, в котором выбирают
URL-адреса гиперссылок (атрибут HREF= тега <AREA>). Таким образом,
создание графической карты ссылок пре вращается из сложного и утомительного
занятия (каким оно всегда раньше считалось) в легкую и приятную процедуру.
Итак, мы рассмотрели некоторые полезные возможности панели редак тирования. Однако помимо вкладки Edit (Правка) на
ней имеются еще две вкладки.
Предварительный просмотр страницы
Вторая вкладка называется Browse (Просмотр). На
ней страница отобража ется в том виде, в котором она
будет видна в броузере. Собственно говоря, кроме как
для просмотра, эта вкладка ни для чего больше не предназна чена.
Однако у нее тоже есть несколько особенностей.
Дело в том, что программа Homesite может
использовать для отображения содержимого веб-страницы либо свой встроенный броузер, либо броузеры Internet Explorer и Netscape. При этом никакие внешние программы не запус каются
— все содержимое отображается в окне редактирования, хотя фак
тически при этом могут работать Internet
Explorer или Netscape.
Встроенный броузер
рекомендуется использовать только в тех случаях, когда нет ни Internet Explorer версии хотя бы
3.01 (более ранние версии этого броузера не способны
встраиваться в Homesite), ни Netscape.
Встроенный броузер не
поддерживает ни фреймы, ни сценарии, ни большинство ново введений HTML 4.0. Кроме
того, у него иногда (хотя и редко) возникают проблемы с отображением русских
шрифтов.
Напротив, использовать броузеры Internet Explorer или Netscape в качестве внутреннего средства просмотра очень
удобно, поскольку так можно про- сматривать содержимое
своей веб-страницы в “настоящем” броузере, не
запуская внешнюю программу. Впрочем, просмотр страницы во внешнем
броузере тоже предусмотрен. Для этого служит кнопка
со значком External Browser
(Внешний броузер) на
инструментальной панели. Нажав на нее, можно увидеть список внешних
броузеров, установленных на компьютере, и, выбрав из
списка какой-либо броузер, просмотреть в нем
содержимое страницы. Если никаких броузеров в списке
нет, их можно добавить вручную командой Options > Configure External Browsers (Параметры > Настройка внешних броузеров). А для того чтобы указать, какой броузер будет использоваться в качестве внутреннего,
выберите из меню Options (Параметры) пункт Settings (Настройки) и далее в левой части открывшегося
окна — пункт Browse (Просмотр).
Дретья вкладка панели редактирования — Design (Оформление). Ее средства предоставляют редактор
веб-страниц, работающий по принципу WYSIWYG. Поскольку своего
встроенного WYSZWYG-редактора в программе Homesite
нет, используются средства, встроенные в броузер Internet Explorer 4.01.
Если на компьютере нет этой (или более поздней версии) программы, средствами
вкладки Design (Оформление) воспользоваться нельзя.
Однако мы и так не рекомендуем ими пользоваться, поскольку после этого весь
исходный код может быть переформатирован, вплоть до замены одних тегов другими,
без возможности восстановления. Кроме того, с отображением русских шрифтов
здесь тоже иногда возникают проблемы. Кстати, если выбрать в меню Options (Параметры) пункт Settings
(Настройки) и далее пункт Design (Оформление), то
можно установить флажок Disable (hide)
design tab (Скрыть вкладку
Оформление), чтобы вообще убрать эту вкладку с экрана. На всякий случай.
В программе Homesite есть еще много интересных
возможностей, таких, как автоматическое изменение размера окна внутреннего броузера (до 640х480 или 800х600), поиск и замена текстовых
фрагментов во всех файлах проекта или папки, отображение внутреннего броузера под окном редактирования (с “почти синхронным”
отображением вносимых изменений) и пр. Однако обо всем невозможно рассказать в
небольшой главе. Мы познакомили вас с основными возможностями этой
замечательной программы, а остальные вы легко обнаружите сами в процессе работы.