Конечно, код HTML можно писать в текстовом редакторе, дабы отточить свое мастерство. Но подобные экзерсисы быстро надоедают, особенно если есть способ сделать все это гораздо проще. А такой способ действительно есть. Мы говорим о многочисленных авторских средствах для разработки страниц Web. Эти инструменты позволяют автоматически создавать коды HTML в среде с режимом WYSIWYG, иными словами, видеть проектируемую страницу непосредственно во время работы над ней в том виде, в каком она будет представлена в окне браузера, избавляясь тем самым от необходимости набирать тэги кода HTML.
Эти средства не только позволяют без труда писать коды HTML для базовой страницы, но и добавлять собственные коды HTML.
Объектами нашего тестирования стали два продукта: PageMill 2.0 от Adobe Systems и Home Page 1.0 от Claris. Оба работают на компьютерах Macintosh, но для второго существует версия под Windows (мы, однако, рассматривали только версию для Mac).
ADOBE PAGEMILL 2.0
Программное обеспечение PageMill поставляется на трех дискетах и CD-ROM с дополнительными средствами от независимых разработчиков, техническим описанием, набором готовых заставок и многими другими дополнениями, способными помочь в разработке и совершенствовании страниц Web. Инсталляция аналогична большинству приложений для Macintosh: система запускается с отключенными расширениями, выполняется программа инсталляции, затем - перезагрузка системы. Установка проводится либо в упрощенном режиме (при котором устанавливаются все компоненты), либо в стандартном режиме (при котором устанавливаются только выбранные компоненты). Программа инсталляции автоматически декомпрессирует файлы и правильно размещает их в системе.
СРЕДА РАЗРАБОТКИ
Система PageMill работает в двух основных режимах: Edit (редактирование) и Preview (предварительный просмотр). Первый позволяет создавать и модифицировать страницы Web. Во втором их можно просматривать в таком виде, в каком они появлялись бы при просмотре с помощью браузера Web. Впрочем, браузер для просмотра и интерпретации страницы можно вызвать непосредственно из PageMill. Режиме Edit активизирует расположенную вверху страницы панель инструментов, а также плавающую палитру Inspector Palette. Панель имеет опции форматирования текста, вставки таблиц, размещения изображений и несколько других, полезных для редактирования функций. Символика пиктограмм большой информативностью не отличается, но, к счастью, при указании на пиктограмму курсором мыши под ней высвечивается краткое описание ее функции. Палитра Inspector содержит информацию о текущей странице или выделенном элементе и опции для фреймов, форм, объектов и текущей страницы. Кроме того, когда это необходимо, коды HTML можно редактировать непосредственно в режиме Edit при размещении на странице сложного информационного наполнения - например, JavaScript или управляющих элементов ActiveX, которые PageMill 2.0 не поддерживает. Такие фрагменты предваряются тэгом , а после них ставится ; эти тэги служат указанием для системы игнорировать заключенные между ними фрагменты.
Процедура ввода и редактирования текста в PageMill аналогична любому текстовому процессору. Для этого система располагает достаточным набором функций. Вводить информацию можно либо с клавиатуры, либо путем импортирования файлов, причем в последнем случае можно воспользоваться как операциями "вырезать" и "вставить", так и средствами буксировки. Фильтры для импортирования текстов позволяют открывать файлы, созданные в других текстовых редакторах, однако наша попытка открыть текст Microsoft Word 6.0 окончилась плачевно. В файле .readme, где, якобы, должен находиться список поддерживаемых текстовых процессоров и баз данных, в действительности не приведено ни одного наименования.
PageMill предлагает множество средств форматирования и изменения шрифтов. Есть даже проверка орфографии и глобальная функция поиска и замены. Оказалось, что вводить текст непосредственно проще и быстрее, чем сначала вводить его в текстовом редакторе, а затем импортировать. Единственный недостаток подобной процедуры состоит в том, что когда нажимаешь клавишу возврата каретки в конце строки, создается новый параграф. Этого можно избежать, нажимая одновременно клавишу Shift.
РАБОТА С ИЗОБРАЖЕНИЯМИ
Система PageMill может импортировать файлы трех форматов: Graphical Interchange Format (GIF), Joint Photographic Experts Group (JPEG) и Macintosh Picture (PICT). Процедура импортирования изображений аналогична импортированию текста: изображения могут представлять собой обычные рисунки, ссылки на другие страницы и карты изображений. Однако при импортировании файлов .gif или .jpeg PageMill создает ссылку на оригинал, а для файлов .pict она делает gif-копию, которую размещает в папке Resource. При переносе страниц на сервер ссылки и места расположения файлов необходимо отслеживать.
После того как файл импортирован на страницу (или на него задана ссылка), его можно разместить в нужном месте, изменить размер, создать текстовое обрамление и добавить рамку. Если вы хотите уменьшить изображение (чтобы загрузка занимала меньше времени), оно действительно будет выглядеть меньше, но фактический его размер в байтах не изменится. Это объясняется тем, что PageMill не создает новый экземпляр изображения (или не уменьшает числа пикселов), размер которого уменьшается. Для реального уменьшения размера изображения придется воспользоваться программой редактирования изображений, такой, например, как Adobe Photoshop, и повторно импортировать уменьшенное изображение в PageMill.
Для непосредственного редактирования изображения вы можете обратиться к окну Image (изображение), нажав клавишу command и одновременно дважды щелкнув клавишей мыши на изображении. В числе функций, предлагаемых окном Image, функции прозрачности (они позволяют сделать часть изображения в формате .gif прозрачной, чтобы оно незаметно сливалось с фоном браузера) и средства изменения формата .gif на interlaced .gif. Однако в режиме Preview воспроизводить изображения в формате interlaced .gif нельзя, поэтому такие изображения придется просматривать с помощью браузера типа Netscape 3.0. Данное обстоятельство, разумеется, несколько обременительно.
Карты изображений - это размеченные изображения, при указании на различные области которых активизируются соответствующие ссылки на страницы. PageMill поддерживает оба типа карт изображений: серверные и клиентские. Для первых требуется не только HTML-файл, но и отдельный файл с разметкой карты. Многие браузеры поддерживают клиентские карты изображений, содержащие всю необходимую информацию в HTML-файле. К тому же они работают быстрее серверных. Чтобы созать клиентскую карту изображения с помощью PageMill, необходимо открыть на странице файл .gif или .jpeg и дважды щелкнуть клавишей мыши для вызова серой рамки. Затем вы выбираете инструмент для определения "горячей зоны", а потом - документ, ссылка на который с нажатием на этот участок будет активизироваться. В режиме Edit ссылка видна непосредственно. Каждая "горячая зона" имеет свой номер, причем если зоны перекрываются, зоны с меньшими номерами находятся сверху. Так или иначе, все это призвано облегчить и придать логику созданию карты изображений.
Большинство модулей расширения, совместимых с Netscape 2.0, таких как ролики QuickTime, файл .pdf или анимацию Shockwave, можно вставлять непосредственно. Для этого копию модуля следует прежде всего поместить в папку Browser Plug-ins системы PageMill. Поддержка всех модулей Netscape не гарантируется, но два теста, в которых использовались файлы Shockwave и файлы RealAudio, продемонстрировали надежную работу.
Программы Java и элементы ActiveX перед импортированием их на страницу noedit должны быть скрыты от PageMill с помощью тэгов. Мы импортировали очень большой анимационный файл в формате .gif, и браузер воспроизвел его без какой-либо заминки. (Анимационный .gif содержит серию файлов с изображениями, "проигрываемыми" наподобие слайд-фильма.)
ФРЕЙМЫ, ТАБЛИЦЫ И ФОРМЫ
Фреймы разделяют страницу на несколько независимых разделов. Каждый раздел сам по себе страница, с уникальным URL, но просматривать их можно вместе, на одной главной странице. Как правило, фреймы используются для выдачи статичной информации (например содержания) в одном разделе одновременно с динамичной (например, связанной с данным пунктом содержания) в другом. PageMill 2.0 ссылается на страницу, разделенную на фреймы как на набор фреймов; кроме того, система автоматически создает файл с описанием компоновки и наполнения для каждого фрейма из набора. Для создания фрейма необходимо, держа клавишу Option, установить курсор в пределах окна до появления стрелки. Этой стрелкой указывают вертикальную и горизонтальную границы фрейма (подобно тому как меняют размеры ячеек в таблице Excel). Изменять размер рамки можно также с помощью палитры Inspector, задавая абсолютное или относительное значение для каждой рамки.
Среди других возможностей настройки фрейма - задание окантовки фрейма и линейки "прокрутки". Задавая ссылку в фрейме, вы можете определить место выдачи информации: она может размещаться в любом из фреймов набора, исходном наборе фреймов или новом окне. Для этого нужно трижды щелкнуть мышью на ссылке в фрейме, а затем из всплывшего меню "перетащить" целевую пиктограмму в нужный фрейм, в котором документ, указываемый ссылкой, должен появиться.
Трудность при работе с кадрами состоит только в том, чтобы помнить, что каждый фрейм - это, по существу, отдельная страница, и ее нужно сохранять. PageMill предлагает опцию Frameset в меню File для автоматического сохранения всех фреймов одновременно, что гораздо удобнее, чем сохранять каждый из них по отдельности.
Таблицы применяются для представления больших объемов информации в понятном и структурированном виде, например в электронных таблицах. PageMill 2.0 имеет средства для импортирования информации из таблиц Excel и автоматического создавания таблицы, заполненной данными. При тестировании мы импортировали без проблем состоящую из 25 строк и 10 столбцов таблицу Excel.
Для создания таблицы с нуля нужно нажать пиктограмму Table панели управления и указать число строк и столбцов будущей таблицы посредством буксировки (правда, это число ограничивается 10). Для создания таблицы с большим числом ячеек нужно щелкнуть на кнопке Table, а затем указать число строк и столбцов непосредственно. В диалоговом окне Create Table можно указать также интервалы и фон для ячеек. Любой элемент страницы Web - графика, таблицы, ссылки и прочее - можно вставить и в таблицу. Кроме того, таблицы оказываются весьма полезным средством для формирования структуры страницы: границы таблицы можно сделать невидимыми, но все элементы останутся на своих местах. На практике таблицы настолько полезны, что могут претендовать на роль самых полезных средств PageMill 2.0. Если поначалу и приходится потратить некоторое время, определяя, что можно делать с каждой ячейкой и как она соотносится со всей таблицей, последующий эффект от их применения делает эти усилия более чем оправданными.
Для сбора информации о посетителях узла Web вы можете создать HTML-форму, предлагающую им занести информацию и затем посылающую данные на сервер Web для обработки программой CGI (Common Gateway Interface). PageMill вряд ли поможет в написании программы и обработке данных, но вполне хорош для написания кода HTML для формы. PageMill поддерживает объекты форм, определенные в HTML 2.0. В числе таких объектов check box, radio button, текстовая область, текстовое поле и всплывающее меню. Так же как для создания таблиц, для создания форм предусмотрена соответствующая кнопка; кроме того, с помощью Inspector можно дополнительно настроить объект.
РОГА И КОПЫТА
Перенос созданной страницы Web на сервер Web не представляет труда. В меню Preferences Setup мы выбрали Unix в качестве целевого сервера, после чего PageMill 2.0 подставил соответствующие символы возврата каретки и конца строки для HTML в ASCI-файлах. Еще одно полезное средство мы бы назвали "оценщиком загрузки". Оно позволяет оценить, сколько времени может занять загрузка страницы Web в зависимости от характера соединения с Internet. Правда, в результате 15 попыток, проделанных с одной и той же страницей, загружаемой с двух серверов, получилось 15 различных результатов... Что ж, действительно остается только "оценивать".
CLARIS HOME PAGE 1.0
Claris Home Page 1.0 представляет собой первую версию кросс-платформенного WYSIWYG-инструментария для создания информационного наполнения Web. Он ориентирован на платформы Windows 95, Windows NT и Macintosh. В данном обзоре тестировалась версия программного обеспечения для Macintosh.
(Прим. ред. Во время подготовки данной статьи компания Claris объявила о готовности Home Page 2.0, но поставки продукта еще не начались.)
При инсталляции система запускается с отключенными расширениями, затем выполняется программа установки и производится перезагрузка системы. Мы выбрали упрощенный режим установки. Созданные папки содержали набор готовых картинок, обучающие средства, изображения, образцы HTML-файлов и папку подсказок. Последняя производит отличное впечатление. Она содержит HTML-файлы руководства пользователя, описание поиска неисправностей и список "горячих" клавиш, доступных из меню Help.
СРЕДА РАЗРАБОТКИ
Для разработки Web-страниц Home Page 1.0 предлагает три режима: Edit Page (редактирование страницы), Preview Page (предварительный просмотр страницы) и Edit HTML Source (редактирование исходного кода HTML). Основной режим - это Edit Page. Работа с ним не отличается от работы в любом текстовом процессоре; именно в нем происходит создание программ HTML 2.0. При этом активизируются четыре панели управления: главная панель, панель стилей, панель инструментов и редактор карт изображений. Главная панель содержит такие фунции, как переключение режимов, вставка таблиц и вставка графики. Панель стилей применяется для форматирования текстов и ограничена возможностями форматирования, присущими HTML 2.0. Палитра инструментов представляет собой плавающую палитру. Это означает, что ее можно переместить в любую часть страницы для вставки таких элементов, как check box для формы или якорь для ссылки на URL. Панель карт изображений используется для включения в изображение специальных функций типа карты изображения или придания прозрачности части изображения, для того чтобы был виден фон страницы Web.
Благодаря режиму предварительного просмотра страницы вы можете получить некоторое представление о том, как страница будет выглядеть. Этот режим несколько ограничен и не позволяет просматривать страницы с применением таких современных средств, как фреймы и "горячие" участки на карте изображения, но предлагает функцию просмотра при помощи браузера.
В режиме Edit HTML Source можно непосредственно редактировать исходный код. Для кодов, не распознаваемых средствами Home Page, имеется поле Extra HTML, в которое можно внести любой не поддерживаемый код.
Введенный вручную тестовый код, который Home Page не распознал, он выдал на экран в режиме WYSIWYG красными буквами. При просмотре браузером выяснилось, что код работал. Полезной для создания страниц возможностью оказался прямой доступ к интерактивной документации на базе HTML. Для этого достаточно щелкнуть на пиктограмме Help. Предлагаемое руководство довольно полно, перемещаться по нему в общем-то легко, и оно новее печатной копии.
Перед созданием страницы неплохо бы задать предпочтения Home Page, в том числе тип формата файлов (например признаки перевода строки, поддерживаемые серверной платформой), используемый в режиме предварительного просмотра браузер, место хранения преобразованных изображений, какой тип изображений сохранять (interlaced или нет), и еще несколько других характеристик.
В рассматриваемом примере в качестве сервера была использована машина под Unix, браузера - Netscape 2.0, а все файлы изображений сохранялись как файлы в формате interlaced .gif.
Работа с текстом аналогична работе в любом текстовом редакторе, с той лишь разницей, что нет проверки орфографии и возможности ограничены HTML 2.0. Так, абзацы допустимо редактировать в пределах определений HTML 2.0 с заголовками нескольких уровней, моноширинными шрифтами браузера, списками текстов, стилями для цифр (римские или арабские) и выравниванием.
Опции форматирования символов включают логические и физические стили, а также обычный HTML. Логические стили позволяют различным браузерам интерпретировать стили в пределах своих возможностей, физические же выглядят одинаково вне зависимости от браузера, с помощью которого осуществляется просмотр. Вы можете добавлять специальные символы, такие как символ торговой марки, вводя &#abc; (включая точку с запятой), где abc - десятичное значение символа из таблицы символов ISO Latin-1.
Например, для ввода символа торговой марки мы ввели (r) в режиме Edit Page, затем текст был выделен и выбрана опция Raw HTML из меню Style. Тестируемый файл потребовалось сохранить, закрыть и открыть снова - для интерпретации его с помощью браузера. В целом средства работы с текстом, например форматирование и задание стилей символов, отличаются интуитивностью и хорошей функциональностью.
Изображения для страницы Web должны вводиться в форматах .gif или .jpeg. Home Page поддерживает оба формата; кроме того, имеется возможность автоматически преобразовывать файлы .bmp для Windows под Macintosh в формат .gif. При добавлении на страницу Web файлов .gif или .bmp программа Home Page создает указатель местонахождения файла. Если изображение представлено в формате .pict или .bmp, Home Page создает преобразованный файл .gif и помещает его в задаваемую в системных предпочтениях папку изображений по умолчанию.
Две стандартные манипуляции с изображениями на страницах Web - это изменение стандартных файлов .gif на interlaced .gif, а также придание изображению прозрачности. Сохранение файлов в формате interlaced .gif осуществляется через опцию Preferences, добавление прозрачности производится с помощью редактора Image Object, который позволяет изменять атрибуты изображения. В числе таких атрибутов - размеры изображения, его поведение (карта изображения, кнопки формы, обычное изображение), выравнивание и поддержка дополнительных HTML-кодов для продвинутого редактирования.
Мы попробовали импортировать и отредактировать файлы .gif, .jpeg и .pict, и редактор Object обрабатывал все одинаковым образом. Однако попытка импортирования анимационного файла привела к блокированию системы. Так же как и с PageMill, изменение размера касается только размера появляющегося на экране изображения, а не размера файла изображения. Поэтому импортируя, к примеру, изображение размеров объемом 50 Кбайт и настраивая его таким образом, чтобы оно занимало только часть экрана, стоит помнить о том, что оно по-прежнему остается файлом в 50 Кбайт, и на его загрузку уйдет-таки некоторое время. Изменить объем файла изображения можно только с помощью какого-либо инструментария для редактирования изображений, например Adobe Photoshop.
ССЫЛКИ
Возможно, именно гипертекстовые ссылки делают представление информации в Web столь мощным средством. Ссылки позволяют легко перемещаться от страницы к странице, независимо от их фактического местонахождения. Home Page предлагает удобную среду для создания ссылок на другие страницы Web, на определенные участки той же самой страницы (посредством anchors), узлы ftp и адреса электронной почты. Для создания ссылок можно либо искать файл при помощи браузера, либо вводить URL непосредственно. Средства просмотра очень хороши, и делают создание внутренних ссылок весьма простым занятием. Якорь можно создать поместив курсор там, где необходимо его разместить, и нажав кнопку Insert Anchor. Затем создается ссылка на anchor: прежде всего выбирается текст для ссылки, после чего Link to URL - и, наконец, желаемый anchor. Вся процедура довольно интуитивна.
Для создания карты изображения при помощи Home Page 1.0 необходимо выбрать редактор Object (или просто дважды щелкнуть мышью на изображении, после чего редактор Object активизируется автоматически). В руководстве дано другое описание, а также совершенно дезориентирующее изображение экрана; в действительности все работает гораздо проще, поскольку редактор Image Map автоматически включается в соответствующую панель. Видов горячих областей изображений только два: окружность и квадрат. После задания очертаний области двойной щелчок клавишей мыши на ней приводит к открытию редактора Link для задания URL. Home Page сохраняет код карт изображений в файлах карт, совместимых с NCSA. Это означает, что для активизации карты изображения сервер Web должен выполнить
CGI-сценарии карты изображения. Поддержка карт изображений на клиенте отсутствует, хотя представители компании Claris объявили, что она будет реализована во второй версии.
ТАБЛИЦЫ И ФРЕЙМЫ
Создание таблицы сводится к простому указанию курсором места, где таблица должна быть размещена, с последующим выбором Insert Table из меню. По умолчанию создается таблица, состоящая из двух строк и двух столбцов, однако редактор Table Object позволяет задавать другие атрибуты для таблицы в целом и отдельных ячеек в частности. Чтобы ввести текст или изображение, нужно курсор поместить в соответствующую ячейку, а затем либо ввести текст непосредственно, либо импортировать из другого файла. Если размер изображения или текст превышают размер ячейки, она расширяется по направлению вниз, но ширина ячейки остается неизменной. Так же как и PageMill 2.0, Home Page поддерживает вложенные ячейки. Все, что в принципе можно разместить на странице Web, можно разместить в ячейке таблицы.
Фреймы создаются с помощью Edit Frames, для этого надо выбрать New Frame Layout. Поскольку фреймы являются функцией расширений HTML 3.0, внесенных компанией Netscape, Home Page автоматически добавляет сообщение с объяснением для браузеров, не поддерживающих фреймы. Прежде всего страницу нужно разбить на фреймы. Затем закрепить за фреймом URL и определить другие атрибуты: линейки прокрутки, поля, размер и т. д. К сожалению, прекрасная опция Find File для формирования связей в режиме Edit не работает в режиме Frame. При оформлении содержания с помощью фреймов требуемую страницу можно выдать в любой из страниц набора фреймов. В отличие от PageMill, где страницу достаточно перетащить на место ее отображения, в Home Page придется выполнить запутанную процедуру из 11 шагов.
ФОРМЫ
Home Page поддерживает все виды объектов форм HTML 2.0 и может содержать таблицы, объекты, текст и так далее. Подобно PageMill 2.0 компании Adobe, одна страница имеет одну форму. Для создания формы курсор размещается, там где должна находиться форма, и из меню Insert выбирается опция Forms. Для каждого элемента формы в редакторе Object предлагаются различные опции. Так, например, вы можете задать максимальную длину текстового поля или определить check box как radio button или check box. Создать всплывающие меню, списки прокрутки, кнопки submit, скрытый текст, а также задавать их свойства посредством редактора Object довольно просто. Как для любых форм, сервер вызывает CGI-сценарии для обработки данных, поэтому проверить форму до написания сценария нельзя.
РОГА И КОПЫТА
Home Page позволяет создавать библиотеки для хранения наиболее часто используемых элементов страниц Web, таких как готовый текст, логотипы компаний и т. д. Библиотеки создаются с помощью отдельного меню, доступ к которому осуществляется из меню File. Появившееся окно содержит название библиотеки или пиктограмму в верхней части и фактическое наполнение библиотеки внизу. Для переноса данных из библиотеки на страницу Web надо открыть одновременно и страницу, и библиотеку, а затем отбуксировать требуемый элемент. Элементы можно редактировать и удалять, к тому же несколько библиотек поддерживается одновременно.
ЗАКЛЮЧЕНИЕ
Как PageMill 2.0 компании Adobe, так и Home Page 1.0 компании Claris позволяют создавать готовый код HTML и обладают удобной средой разработки, научиться работать в которой не составит труда. Преимущество второй версии PageMill в большом наборе функций, но пользоваться ими сложновато. Home Page исключительно проста, но ей недостает некоторых функций, которые могут понадобиться разработчикам. И в том, и другом случае создание страниц Web в режиме WYSIWYG оказывается быстрее и проще, чем, к примеру, на машине под Unix.
Джим Перски занимает пост президента Pacific Internet, оператора Internet. С ним можно связаться по адресу: jim@pacific.net.
ИТОГ ИСПЫТАНИЙ
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Сервер Web: ПК на базе процессора Pentium/133 МГц с оперативной памятью объемом 128 Мбайт и дисковой памятью объемом 6 Гбайт под Unix (BSDI Internet Server 2.1), соединение с Internet по протоколу ISDN (один канал B или 64 Кбит/с). |
|