Поиск

HoTMetaL PRO 5.0

Редактор гипертекста HoTMetaL был одним из первых программных продуктов такого рода. Основная идея редактора заключалась в том, чтобы красиво прорисо вать на экране изображения тегов. Здесь сказались преимущества графического режима Windows перед текстовым режимом MSDOS. В случае Windows гипер текст в своем естественном виде лучше читается и редактируется. Одновременно фирмыразработчики развивали в своих программах возможность анализа син таксиса HTML, что помогало пользователям избежать некоторых ошибок, таких, например, как неправильное вложение элементов.

Фирма SoftQuad разработала несколько версий этой программы. На рис. 8.1 по казано окно редактора HoTMetaL PRO версии 5.0. Доступ к необходимой инфор мации осуществляется при помощи панелей. Например, слева помещена панель с деревом папок, что позволяет быстро находить нужные файлы. На панели справа создана заготовка Webстраницы. Мы видим, что теги прорисованы особым обра зом и хорошо заметны. На панелях инструментов размещено большое количество кнопок. Следовательно, разработчики продукта предполагают, что пользователь должен активно использовать их во время создания страниц. Разберемся, для чего они предназначены.

Recource Manager. Если вы хотите, чтобы для просмотра гипертекста было больше места, отключите левую панель этой кнопкой. Previouus Document и Next Document (предыдущий документ и следую щий документ). Переход к окнам открытых в редакторе документов. В отличие от броузеров, которые тоже имеют такие кнопки, в данном случае не осуществляется переход по ряду просмотренных страниц. Spelling (проверка орфографии). После щелчка на этой кнопке открыва ется окно, показанное на рис. 8.2. Проверка начинается от места распо ложения курсора и выполняется для английских слов. В данном случае встре тилось слово «toolbar», которого не оказалось в словаре. Программа предлагает список похожих слов для замены. В окне имеются кнопки, позволяющие доба вить новое слово в словарь (Add to Dictionary), заменить слово (Replace), перейти к следующему слову (Next), установить режим пропуска для данного слова (Set Restriction).

Чтобы воспользоваться встроенным тезаурусом, необходимо выделить одно и; слов документа, а затем выбрать команду Tools > Thesaurus. Окно, которое должно открываться вслед за перечисленными действиями, показано на рис. 8.3. В дан ном случае было выделено слово «assign». Работая с этим окном, мы тоже можем заменить слово, подобрав подходящий синоним. Кроме этого, список позволяет просмотреть и выбрать (кроме синонимов) антонимы (Antonyms), близкие пс смыслу слова (Related Words) и слова, отдаленные по смыслу (Contrasted Words). Это очень полезный инструмент для создания страниц на английском языке. Кроме того, мне кажется, что такая сервисная возможность выходит за рамки подготов ки гипертекста. Тезаурус можно использовать и при изучении английского язы ка, и при подготовке любых английских текстов.

HoTMetaL PRO можно использовать и как обычный текстовый редактор. Создать текстовый документ можно двумя путями. Вопервых, можно обойтись минималь ным количеством элементов, позволяющих набирать произвольный текст, — самый простой, но и самый малоэффективный способ. В этом случае редактор имеет примерно такие же возможности, как Блокнот в Windows. Вовторых, можно использовать знание HTML и задействовать все необходимые элементы. То есть текстовый документ должен создаваться как обычная Webстраница, но с пер спективой вывода на печать. Вы уже знаете, что возможности для форматирования HTMLдокумента велики: выбор шрифтов, использование таблиц, рисунков и т. д. Чтобы распечатать только полезную информацию, необходимо изменить режим просмотра. Форматирование страниц выполняется автоматически, приме нительно к каждому устройству вывода.

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

Возьмем, к примеру, популярный редактор Word. Все, кто с ним работал, прекрас но знают о форматировании текста при помощи стилей. Если вы захотите понять, что представляет собой тот или иной стиль, вам надо будет раскрыть несколько окон с описанием стиля и внимательно изучить их содержимое. Параметров мно го: и тех, которые вы используете, и тех, которые вам безразличны. В самом до кументе подобная информация скрыта от пользователя. Все, кто работал с этим редактором, знают о его «своеволии»: часто программа сама, не спрашивая разре шения, проводит ряд операций по форматированию текста, и пользователь не всегда может отследить эти «правки» и понять причины их возникновения. Или, наоборот, текст не форматируется там, где это необходимо. Возникают сложное' ти и с переносом документов на другой компьютер.

Гипертекстовый документ создается совершенно по другому принципу. Здесь тоже можно применить понятие стиля: это совместное использование элементов форматирования FONT, В, I, L) и им подобных. В данном случае пользователь может увидеть все параметры оформления и область их действия прямо в документе. Изменить их может только он сам, путем редактирования текста документа. Дает ли это какоенибудь преимущество? Думаю, что в некоторых случаях рабо тать с документом в формате гипертекста намного удобнее и легче, чем с таким же документом в формате традиционного редактора для Windows.

HTML Source (источник HTML). Любой редактор гипертекста должен иметь два основных режима просмотра документа: показ всех данных, включая теги, и показ только той информации, которую увидит клиент. Данная кнопка позволяет редактировать гипертекст в его традиционном виде. Tags On. В этом режиме тоже видны теги, но они показаны в виде красивых фигур (см. рис. 8.1).

WYSIWYG view. Эта аббревиатура означает: «что видишь, то и получаешь». Этс стандартный режим редактирования документа в современном редакторе. WYSIWYG Frames view. Редактирование документа с фреймами. Browse (просмотр). Открытие документа в броузере, используемом пс умолчанию.

Insert Element (вставить элемент). Кнопка раскрывает окно, показанное ш рис. 8.4. Оно позволяет выбрать и вставить элемент в Webстраницу. Осо бенность режима заключается в том, что программа отбирает для показа в окш только те элементы, которые позволительно вставить внутри текущего элемента

Insert Element Window (вставить окно элементов). Эта кнопка открывав! или закрывает окно, показанное на рис. 8.4.

Remove Tags (удалить теги). Удаление начального и конечного тегов текуще го элемента. Курсор должен быть установлен внутри элемента. Содержимое элемента (например, текст) удалено не будет. Элементы можно удалять двумя спосо бами. Если выделить оба тега (со всем содержимым) и нажать клавишу Del, то элемею будет удален целиком. Если поставить курсор после начального тега и нажать кла вишу Backspace, будут удалены только теги, а содержимое останется в документе Check HTML (проверить HTML). Программа тестирует гипертекстовый до кумент и сообщает о найденных ошибках в его разметке.

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

Insert Heading (вставить заголовок). Вставка элемента заголовка Н1...Н6. На рис. 8.5 показан пример заголовка второго уровня и контекстное меню этого элемента (элемент FONT полезно добавлять там, где нужен русский текст). Меню позволяет использовать буфер обмена для копирования, вырезки и вставки элемента. Кроме того, команда Insert Element (вставить элемент) открывает окно для вставки нового элемента внутри текущего (см. рис. 8.4). Команда Select Element (выбрать элемент) позволяет выделить текущий элемент. Команда Element Attributes (атрибуты элемента) обеспечивает определение и редактирование атри бутов текущего элемента в режиме диалога. Окно для работы с атрибутами показа но на рис. 8.6. Разумеется, для каждого элемента доступен свой набор атрибутов.

Attribute Inspector. Эта кнопка открывает и закрывает окно атрибутов.

Insert Paragraph (вставить абзац). Вставка элемента абзаца Р.

Insert Line Break (вставить разрыв строки). Вставка элемента принудитель ного разрыва строки BR.

Insert Horisontal Rule (вставить горизонтальную линию). Вставка элемента горизонтальной линии HR.

Emphasis, Strong, TeleType, Citation (выразительность, усиле ние, телетайп, цитата). Инструменты для создания элемен тов содержания. Эти элементы рассмотрены в разделе «Элементы содержания» главы 3. Рисунки на кнопках дают представление о том, как будет выглядеть текст внутри элемента.

Italic, Bold, Underline (курсив, полужирный, подчеркнутый). Ввод в документ элементов форматирования текста (см. раздел «Фор матирование текста» главы 3).

Text Color (цвет текста). Эта кнопка позволяет создать новый элемент FONT в месте расположения курсора. После создания элемента открывается окно с палитрой, показанное на рис. 8.7. Когда цвет выбран, для элемента определяется атрибут цвета color.

Increase Text Size, Decrease Text Size (увеличить размер шрифта, уменьшить ppl размер шрифта). Так же, как и предыдущий, этот инструмент создает но вый элемент FONT, в котором устанавливается новое значение атрибута size.

Align Left, Align Center, Align Right (выравнивание влево, выравни вание по центру, выравнивание вправо). Кнопки, хорошо знако мые всем, кто работал с текстовыми редакторами. В данном случае они позволяют установить соответствующее значение атрибута align.

Indent (отступ). Создание отступа слева для выбранного элемента. Special Characters (спецсимволы). Открытие палитры (рис. 8.8) для ввода спец символов. В данном случае используются буквы различных алфавитов. Спец символы рассматриваются в разделе «Использование спецсимволов» главы 2.

С помощью команды Insert > Symbols можно открыть палитру, показанную на рис. 8.9. Она тоже позволяет вставлять спецсимволы.

Billeted List (ненумерованный список). Создание заготовки для ненумерован ного списка. Первоначально создаются два элемента: UL и LI. Если курсор находится внутри элемента LI, нажатие клавиши Enter приводит к созданию ново го пункта списка. Если курсор находится внутри элемента UL, то нажав клавишу Enter, можно создать еще один список.

Numbered List (нумерованный список). Создание заготовки для нумерован Sill ного списка.

Insert Definition List (вставить список с определениями). Создание заготовки для списка с определениями, то есть элементов DL и ОТ.

Insert Definition Type (вставить тип определения). Создание элемента DT для списка с определениями.

Insert Definition Data (вставить данные определения). Создание элемента DD для списка с определениями.

Insert Preformatted (вставить заранее отформатированный текст). Создание элемента PRE для выделения текста, который не должен форматироваться броузером.

Block Quote (цитата). Создание элемента BLOCKQUOTE для форматирования цитаты.

Address (адрес). Создание элемента ADDRESS для форматирования адреса.

Insert Comment (вставить комментарий). Создание элемента COMMENT для ввода комментария.

/bimages/html (вставить изображение). Создание элемента IMG для размеще ния ссылки на графический файл. Определение атрибутов изображения происходит с помощью окна диалога, показанного на рис. 8.10. Если адрес графического файла хорошо известен пользователю, то он может сразу ввести его в поле Image File. Другой способ — открыть окно для определения URL, щелкнув на кнопке Choose. Работая в окне диалога, пользователь может опреде лить по отдельности каждый элемент URL.

Insert Link (вставить гиперссылку). Создание элемента А и определение его атрибутов. Прежде всего, пользователю предлагается определить адрес ссылки.

Insert Bookmark (вставить закладку). Создание элемента А и определение его атрибута name (это и есть закладка). Такой способ особенно удобен для со здания ссылок в пределах одного документа, но он используется также при раз работке больших Webстраниц, в которых существует несколько точек перехо да. В любом случае созданный элемент будет служить конечной точкой перехода. Необходимо учитывать, что такая ссылка будет работать, если внутри элемента А существует текст. То есть после закрытия окна для определения атрибута надо ввести текстподсказку в документ.

Insert Link to Bookmark (вставить ссылку на закладку). Создание элемента А и определение его атрибута h r e f . Эта кнопка, как правило, используется в паре с предыдущей. После вставки закладки (с помощью кнопки Insert Bookmark), можно создать гиперссылку, приводящую в указанное закладкой место докумен та. Данная кнопка позволяет сделать это автоматически: если элемент А, являю щийся целью, был выделен, то можно перейти в ту часть страницы, откуда должен быть выполнен переход, и щелкнуть на этой кнопке. Элемент гиперссылки будет создан сразу же, но затем разработчик должен ввести текст, который будет служить подсказкой и сделает элемент видимым при просмотре страницы в броузере.

Insert Table (вставить таблицу). Определение параметров таблицы и вставка соответствующих тегов и атрибутов в документ. Пример окна диалога для создания таблицы показан на рис. 8.11. Прочитавшим раздел «Таблицы» главы 3 легко понять, какие именно параметры требуют определения. При использова нии данных величин таблица будет выглядеть так, как показано на рис. 8.12. Обратите внимание, что видимыми являются только внешние теги таблицы TABLE. Сама же таблица прорисовывается в естественном виде. Тем самым облегчается размещение данных в ячейках. Внутрь каждой ячейки автоматически вставляет ся неразрывный пробел. Это необходимо, чтобы рамка таблицы была правильно показана при отсутствии данных.

Ниже приведен ряд кнопок, необходимых для создания форм. Они находятся на панели инструментов Forms.

Insert Form (вставить форму). Создание в документе элемента FORM (см. раз дел «Элементы форм» главы 4).

Insert Text Box (вставить строку ввода текста).
Создание в документе элемента INPUT с атрибутом type="text".
Insert Password Entry (вставить строку ввода пароля).
Создание в документе элемента INPUT с атрибутом type="password".
Insert Check Box (вставить флажок).
Создание флажка, то есть элемента INPUT с атрибутом type="checkbox".
Insert Option Button (вставить переключатель).
Создание переключателя (который обычно входит в группу), то есть элемента INPUT с атрибутом type="radio".
Insert Submit Button (вставить кнопку подтверждения).
Создание кнопки для подтверждения ввода данных в форму, то есть элемента INPUT с атрибутом type="submit".
Insert Reset Button (вставить кнопку сброса).
Создание кнопки для удаления данных из формы, то есть элемента INPUT с атрибутом type="reset".
Insert Image Button (вставить кнопку с изображением).
Создание кнопки с произвольным рисунком, то есть элемента INPUT с атрибутом type="image".
Insert Push Button (вставить кнопку).
Создание кнопки с произвольной над писью.
Insert File Upload (выбор файла).
Создание поля для выбора имени файла в режиме диалога, то есть элемента INPUT с атрибутом type="file".
Insert Hidden Input (вставить скрытый элемент).
Создание скрытого элемен та формы, то есть элемента INPUT с атрибутом type="hidden".
Insert List Box (вставить список).
Создание заготовки списка, состоящего из трех строк: <SELECT size=3>.
Insert Dropdown Box (вставить раскрывающийся список).
Создание заготов ки раскрывающегося списка, состоящего из одной строки: <SELECT size=1>.
Insert Text Area (вставить область многострочного текста).
Создание области с полосами горизонтальной и вертикальной прокрутки, позволяющей вво дить произвольный текст (элемента TEXTAREA с атрибутами rows и cols).
Insert Java Applet (вставить Javaапплет).
Активизация диалога для выбора файла класса. После указания имени файла создается элемент APPLET и ав томатически определяются значения его атрибутов.
Insert ActiveX Control (вставить элемент управления ActiveX).
Активизация диалога для выбора элемента ActiveX. Затем создается элемент OBJECT и ав томатически определяются значения его атрибутов.

Главное меню редактора содержит команды, которые, в общем, повторяют ин струменты, вынесенные на основную панель. Но существуют оригинальные и по лезные дополнения. Так, например, команда Format > CSS Styles позволяет открыть редактор каскадных таблиц стилей и выбрать необходимые параметры для теку щего элемента. На рис. 8.13 показано окно этого редактора, настроенного на эле мент TD. В области предварительного просмотра в правой части окна показывает ся образец элемента (в данном случае ячейки таблицы). Таким образом, можно сразу увидеть, как влияют выбранные настройки на внешний вид элемента. Отдельно следует упомянуть об использовании кириллицы в HoTMetaL. Если пользователь вводит не латинские символы, то редактор автоматически преоб разует введенные буквы в спецсимволы. Разумеется, разработчики редактора не предусматривали возможность использования кириллицы. Просто русские бук вы занимают в кодовой таблице место «экзотических» букв из разных языков. В языке может использоваться латинский алфавит и некоторые его «расширения». При вводе русского текста символы прорисовываются обычным образом, но ис ходный код записывается поособому: буква А обозначается как &Ag rave;, буква Б — как SAacute; и т. д. Для броузеров с установленным русским шрифтом это не имеет значения: кириллица в любом случае будет воспроизведена верно. Для бро узеров, в которых русский шрифт не установлен, это тоже не имеет значения, так как кириллица в них в любом случае прорисована не будет. Главное отличие тако го способа набора текста заключается в том, что исходный код будет трудно чи тать. Поэтому, если вы используете HoTMetaL в работе, но создаете документы с кириллицей, набирайте русский текст в другой программе, например, в режиме просмотра источника в броузере.