Автоматизация ввода
Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (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), в котором тоже очень удобно устанавливать значения всех доступных атрибутов.