Современные средства создания Web-страниц

Zip-архив этого документа в формате MS WinWord 6.0 (183226 Байт)

• Классификация средств создания WWW-страниц
• Модули расширения
• Автономные редакторы HTML
• Специализированные средства создания Web-страниц
• Выбор инструмента
• Использование шрифтов в HTML-страницах
• Средства языка HTML
• Тег <FONT>
• Тег <BASEFONT>
• Таблицы стилей
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
• Динамические шрифты
• Web-ресурсы для разработчиков
• Подготовка графики к размещению в Web
• GIF - формат
• JPEG - формат
• Литература

Классификация средств создания WWW-страниц

С тех пор, как Web представил доступ к глобальной коммуникационной среде миллионам рядовых пользователей, ставший ее основой язык разметки гипертекста (HTML) - некогда простой набор легко читаемых управляющих кодов HTML (тегов) - принял понятную лишь посвященным форму. Когда-то практически весь авторский Web-инструментарий был представлен лишь текстовым редактором. Но прогресс не стоит на месте. HTML стандарт все больше развивается, предоставляя тем самым больше возможностей. Сегодня даже наиболее опытные дизайнеры страниц и Web-мастера пользуются специализированными инструментами HTML,так как невозможно удержать в голове все более и более возрастающее количество управляющих кодов HTML (тегов).

С такой же скоростью, что и страницы WWW, множатся инструменты, предназначенные для их создания и редактирования. Условно инструменты создания HTML страниц можно разделить на несколько групп:

1. Модули расширения
2. Автономные редакторы HTML
3. Специализированные средства

Рассмотрим каждую из групп поподробнее.

Модули расширения

Модули расширения - это программные компоненты (plug-ins), которые встраиваются в распространенные программные продукты для конвертирования данных, созданных в этих продуктах, в HTML формат. Модули расширения возникли в 1995-1996 годах на волне огромного всплеска интереса к WWW.

Модули расширения предназначались в основном для текстовых процессоров и использовались для перевода огромного количества документов в форматHTML и дальнейшей публикации в Web. Модули расширения представляют собой преобразователи форматов файлов из оригинального формата в HTML.

Основные примеры модулей расширения:

Internet Assistants for Microsoft Office 95 - Internet Assistant forMicrosoft Word, Excel, Access, Shedule+, PowerPoint.

Воспользовавшись Internet Assistant for Microsoft Word вы можете переводитьдокументы Word в HTML.

Internet Assistant for Microsoft Excel позволит вам публиковать данные электронной таблицы Excel в таблицы HTML. Используя Internet Assistantfor Microsoft PowerPoint, можно сгенерировать HTML версии ваших презентаций и пользоваться ими в режиме удаленного доступа.

Все Internet Assistant имеют возможность перевода вашей графики в форматGIF - компактный формат графики, используемой в Web (этот формат будет подробно рассмотрен ниже).

Бесплатный набор Microsoft Windows 95 PowerTools включает в себя драйвер печати, который вместо выдачи документов на принтер, преобразует их в HTML файл.

Существует также модули расширения ко многим издательским системам.

К слову сказать, Web версия отчета ИВВиБД за 1996 и 1997 год была сформирована с помощью Internet Assistant for Microsoft Word.

В следствие настоящего бума WWW сейчас инструменты для создания Web публикаций встраиваются практически во все основные программные приложения. Microsoft Office 97 позволяет переводить свои документы в формат HTML. То же самое делают Lotus SmartSuite и Corel Office. Современные издательские системы, начиная со скромных приложений для домашнего пользования, типа Microsoft Publisher, и кончая профессиональными, типа QuarkXPress, могут превращать в Web страницы даже документы с очень сложной версткой.

Преимущество использования модулей расширения состоит в том, что пользователю, для формирования HTML файлов не требуется ни осваивать специализированный HTML редактор, ни, тем более, все теги языка HTML. Находясь в знакомой среде программного приложения пользователю следует лишь выбрать (обычно) пункт меню SAVE I As HTML (Сохранить I Как HTML файл).

Но основное преимущество модулей расширения несет также и основной недостаток,так как модули расширения не всегда адекватно передают внешний вид исходного документа, а иногда и не поддерживают некоторые стандарты языка HTML. Даже мне после конвертации отчетов ИВВиБД в HTML формат, приходилось их подкорректировать в специализированном HTML редакторе.

На основе анализа модулей расширения можно сделать вывод, что их использование больше всего подходит новичкам или пользователям, которые работают с Web от случая к случаю.

Кстати, здесь можно заметить, что параллельно развивалось обратное направление производства модулей расширения специально для браузеров (plug-ins). Смысл их использования заключается в следующем: в WWW размещались ссылки на документы в оригинальном формате, при вызове которых запускались специализированные средства просмотра, внедренные в браузер. Примеры таких модулей: MicrosoftWord Viewer для просмотра документов в doc формате, Microsoft Excel Viewer,Adobe PDF Viewer для просмотра файлов в формате PDF.

Автономные редакторы HTML

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

Работая с графическими инструментами, вы имеете дело со страницей в режиме соответствия (WYSIWIG - What You See Is What You Get; Что вы видите,то и получите) - она предстает такой, какой будет в окне браузера. Программа встроена в страницу, но скрыта от автора, который не работает с ней напрямую. В свою очередь программные редакторы выводят на экран в качестве основного представления страницы исходный текст на языке HTML, представляя при этом в распоряжении автора мощные средства генерации кода, избавляющие от необходимости писать его вручную.

В обоих типах программ предлагаются в сущности похожие средства создания и редактирования страниц - это кнопки инструментальной панели (toolbar),"мастера" или "помощники" (wizards), автоматизирующих по крайней мере базовые процедуры создания страниц и способных помочь при построении форм, навигационных карт и выполнении других сложных операций.

Трудно однозначно ответить на вопрос, какой из типов инструментов лучше.Несомненно, пользоваться редактором WYSIWIG легче, особенно новичкам, поскольку они изолируют вас от непростого синтаксиса HTML. Можно создать привлекательную страницу, содержащую такие сложные элементы, как таблицы или фреймы, не зная HTML. Недостаток графических инструментов заключается в том, что они дают приблизительное, часто лишь отдаленное представление о том, какой страница предстанет в окне браузера.

Считается, что программные редакторы представляют в ваше распоряжение более мощные и гибкие средства, и действительно, они заставляют вас уделять больше внимания тексту программы, который стоит за вашим документом. Безусловно, за расширение возможностей приходится платить - в данном случае - это необходимость владения языком HTML.

Таким образом, налицо тенденция отказа от инструментов, показывающих автору исходный текст программы: по мере того, как язык HTML становится все более сложным, он перестает быть пригодным для чтения человеком, и привлекательность средств, открывающих доступ к тексту, уменьшается.

Однако HTML лишь часть общей картины. Хотя авторский инструментарий Web все эффективнее изолирует пользователей от технических деталей, в большинстве случаев не удается предоставить ничего позитивного в одной важной области: построении интерактивных страниц. Интерактивность в Web по прежнему в основном базируется на формах, которые собирают информацию от пользователей и затем, через связь с CGI сценарием на сервере, обрабатывают данные и выдают некоторый результат. Хотя многие продукты позволяют легко создавать сложные формы, большинство не дают возможности продвинуться дальше, так как у них нетсредств для обработки форм. Исключение составляет программа Microsoft FrontPage.

О Microsoft FrontPage разговор особый. Очень часто оказывается, что самое потрясающее средство, из-за которого в значительной мере облегчается процесс разработки сайта, превращается в настоящую удавку, из-за которой вы вынуждены оставаться привязанным к одному конкретному Web-серверу. Самый большой преступник в этом смысле - Microsoft. Оба главных инструмента этой фирмы спроектированы таким образом, что заставляют вас пользоваться только их Internet Information Server (IIS). Лучшие средства FrontPage 98 - автоматизированные навигационные меню и средства управления стилями на базе спецификации CSS- для всего этого требуется установка расширений Microsoft FrontPage Server. Несмотря на то, что эти средства доступны для широкого ранга различных серверов, лучше всего они работают на машинах Windows NT с сервером IIS. То же самое, и даже в большей степени, справедливо для Visual InterDev, поскольку здесь вы можете разрабатывать только такие Web-приложения, которые используют Active Server Pages на последних версиях IIS.

Netscape Navigator Gold 3.0, Netscape Communicator 4.0 (Netscape Communications Corp.)

Вам не удастся найти HTML-редактор, лучше интегрированный с браузером,чем Netscape Navigator (NN). В отличие от обычной редакции NN располагает WYSIWYG - редактором, встроенным в браузер. Это не самый совершенный редактор, и не стоит использовать его для создания крупного корпоративного центра Web, но если вам нужно просто создать несколько небольших страниц, то никакой другой редактор не позволит выполнить работу быстрее.

Окно редактирования выглядит как стандартное окно браузера NN, но с тремя инструментальными панелями в верхней части экрана: одно для форматирования символов, графики и связей; другое для файловых функций и третье для форматирования абзацев. Вы создаете текст, просто набирая его на клавиатуре и выполняя форматирование с помощью инструментальной панели.

После вставки в документ изображения, можно изменить его размеры, положение на экране, окантовку и другие характеристики, просто дважды щелкнув на нем мышью.

Текст, связи и графику можно буксировать по всему окну редактирования, при этом в любой момент можно открыть несколько окон редактирования. В NN есть неплохой редактор таблиц: вначале вы определяете свойства таблицы, а затем вводите данные в ячейки.

Когда вы открываете файлы, в которых есть формы и другие элементы, напрямую не рассчитанные на обработку данным редактором, то ответственные за созданиеэтих элементов управляющие коды HTML (теги) отображаются в виде пиктограмм, похожих на "гардины". Двойной щелчок на пиктограмме тега открывает окно в котором можно редактировать необработанный исходный текст HTML. Редактор генерирует лишь абсолютно минимальный исходный текст HTML, необходимый для отображения файла в браузере.

NN создает таблицы, но ничем не сможет вам помочь при работе с фреймами и формами. Вы не найдете в пакете "мастеров" для создания страниц или шаблонов, но Web - узел Netscape располагает оперативными "мастерами" и образцовыми шаблонами, которые можно использовать для создания страниц. Когда вы завершите создание страниц, NN загрузит их через FTP или HTTP на удаленный сервер.

Если вам нужно всего лишь быстро создавать несколько простых страниц и загружать их в свой Web-узел щелчком мыши, то вам нет смысла использовать какой-либо иной продукт.

HoTMetaL Pro 3.0 (SoftQuad Inc.)

Для всех, кто ищет HTML-редактор промышленного класса, лучшим будет HoTMetaL Pro. Этот WYSIWYG - редактор располагает большим и лучшим набором возможностей, но несмотря на это, пользователям потребуются глубокие знания и опыт работы с HTML. Обладая мощными функциональными возможностями, в пакете отсутствуют средства управления информационным узлом.

В HoTMetaL Pro реализован механизм drag-and-drop дл вставки графики;редактор навигационных карт, создающий объекты произвольной сложности;сохраняемые макрокоманды, средства конвертирования из основных форматовтекстовых процессоров.

Программа располагает десятками шаблонов и образцов графики, а также исчерпывающий самоучитель и системой подсказок. Интерфейс имеет четыре инструментальные панели: системные функции; символьные атрибуты; списки, точки привязки и графика; функции для форм, модулей Java и ActiveX. Окно редактирования обычно показывает вашу работу в форме, приближенной к режиму полного соответствия (WYSIWYG), с отображением текста HTML в виде небольших пиктограмм.

Вы создаете списки, связи (ссылки) и заголовки с помощью пиктограмм инструментальной панели и путем ввода данных с клавиатуры. Превосходный редактор таблиц программы позволяет добавлять и удалять строки и столбцы, объединять несколько ячеек в одну и легко выполнять множество других операций над таблицами. Инструменты создания форм, позволяют добавлять элементы, присутствующие в виде WYSIWYG, непосредственно в файл, но интерфейс организован в предположении, что вы понимаете структуру форм HTML. Редактор фреймов позволяет нарисовать структурную схему фреймового документа и перетащить файл, который будет отображать кадр, из Explorer, но не отображает содержательный материал в кадрах.

Если вы заняты организацией сложного информационного узла Web, то можете отдать предпочтение функциям управления таких пакетов, как Microsoft FrontPage. Но если вы хотите иметь HTML - редактор непревзойденной мощности, то пакету HoTMetaL альтернативы нет.

WebEdit Professional Edition 2.0 (SmartDesk Inc.)

WebEdit Professional - один из самых элегантных и современных программных редакторов Web-страниц. Он предназначен для специалистов, понимающих структурнуюлогику HTML. Благодаря "мастеру", задав лишь несколько вопросов, редактор автоматически создает локальные страницы.

В процессе редактирования заголовки, таблицы, формы и фреймы вставляются без помощи "мастера", данные вводятся в диалоговых окнах, работа с исходным текстом ведется в окне редактирования, а программа предварительного просмотра в реальном времени отображает ваш файл в режиме WYSIWYG.

Не загроможденный лишними деталями интерфейс WebEdit состоит из двух инструментальных панелей и ряда кнопок, которые открывают ниспадающие списки кодов HTML. При перемещении указателя по диалоговым окнам на экране всплывают краткие пояснения, а в help - файле имеется превосходный глоссарий HTML-кодов. WebEdit позволяет строить и импортировать таблицы в интерактивный редактор таблиц, но добавить заголовки можно лишь как отдельные теги, вернувшись в главный экран редактирования.

WebEdit преобразует файлы баз данных с разделителями в HTML-таблицы,объединяет различные файлы в "проекты", которые можно открывать или загружать на сервер через FTP одним щелчком мыши, а также создает навигационные карты на стороне клиента. Продукт обеспечивает работу с фреймами, тегами Java и модулями ActiveX, хотя и не обеспечивает их предварительного просмотра.

В программе присутствует мощная утилита проверки правописания, однаиз функций меню экспортирует файл в форматах Macintosh и UNIX вместо стандарта DOS.

Программа WebEdit располагает практически всеми инструментами, необходимыми специалисту для создания сложных HTML-файлов. Если неуклюжие интерфейсы и недостаточная надежность других программных редакторов переполняют чашу вашего терпения, то при поисках альтернативного решения в первую очередь вам необходимо обратить внимание на WebEdit.

Специализированные средства создания Web-страниц

Создание профессиональных HTML-страниц требует использования специальных средств редактирования. Современные требования, предъявляемые к средствам разработки Web-сайтов, включают в себя:

1. Полную визуальную разработку Web-страниц.
2. Поддержку каскадных таблиц стилей.
3. Использование современных скриптовых языков, таких как JavaScript и т.д.
4. Генерацию Dynamic HTML для различных браузеров.
5. Средства наглядного дизайна таблиц и фреймов.
6. Динамическое отображение создаваемой страницы в браузере.
7. Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию.
8. Средства по управлению Web-сайтом (отслеживание связей и проверка ссылок между страницами).

Dreamweaver, Macromedia

Продукт Macromedia Dreamweaver (Рис.1) - это средство создания Web-страниц,рассчитанное на профессиональных разработчиков.

Основной упор в данном продукте сделан на визуализацию разработки Web-страницы. Вы работаете в режиме WYSIWYG - Dreamweaver объединяет в себе средство для визуального расположения элементов, управления их свойствами на уровне языка HTML и средства поддержки Dynamic HTML.

Macromedia Dreamweaver обеспечивает:

• генерацию свободного от ошибок HTML-кода;
• динамическое отображение создаваемой страницы в выбранном браузере;
• сохранение расположения для ранее созданных документов и документов, созданных другими средствами;
• поддержку каскадных таблиц стилей;
• средства наглядного дизайна таблиц и фреймов;
• генерацию Dynamic HTML для различных браузеров;
• расширяемую коллекцию скриптовых программ JavaScript;
• поддержку анимации, схожую с инструментами Macromedia Director.

Визуальный дизайн

Macromedia Dreamweaver позволяет создавать страницы на основе фреймов(Рис.2). Страница делится на фреймы с помощью команды Modify | Frameset. Далее можно задать цвет фона каждого фрейма или выполнить какие-либо другие действия (Рис.3). Расположив фреймы, мы можем заняться дизайном каждого фрейма как отдельной страницы или продолжить работать с ними в виде фреймов.При этом мы при необходимости можем переключиться в редактор HTML-кода и вносить изменения вручную (Рис.4).

Обычно необходимость в ручном исправлении HTML-кода возникает крайне редко, так как Macromedia Dreamweaver представляет все необходимые средства для визуального создания страниц. Тем не менее встроенный редактор очень удобен.

Чтобы вставить какие-либо элементы, мы используем меню Insert и различныедиалоговые панели, появляющиеся при выборе отдельных команд. Помимо традиционных меню есть множество отдельных инструментальных панелей - для вставки отдельных элементов, для установки атрибутов, для управления фреймами и т.п. Особенно удобна панель установки атрибутов - они отображаются в зависимости от выбранногоэлемента, вы можете динамически изменить любой атрибут данного элемента и посмотреть его на экране (Рис.5).

При необходимости мы можем вызвать панель Behaviors и связать с элементом какую-нибудь скриптовую программу (об этом ниже).

После того как визуальный дизайн завершен, мы можем проверить правильность работы нашей страницы в различных браузерах или воспользоваться встроенным средством проверки, вызываемой по команде File I Check Target Browsers.

Macromedia Dreamweaver - это мощное средство, позволяющее создавать страницы, совместимые с большинством браузеров.

Поддержка таблиц стилей и Dynamic HTML

Спецификация каскадных таблиц стилей появилась довольно давно, но этот механизм стал по-настоящему актуальным только с внедрением в современные браузеры поддержки технологии Dynamic HTML. Пакет Macromedia Dreamweaver обеспечивает удобную работу с каскадными таблицами стилей. В панели определения стилей вы можете создать собственные стили или импортировать существующие (Рис.6).

Создав или импортировав стили, вы в нужный момент выбираете их из панели стилей и применяете ко всем или к выделенным элементам страницы.

Технология Dynamic HTML напрямую связана с таблицами стилей и динамическимизменением атрибутов отдельных элементов. В Macromedia Dreamweaver Dynamic HTML поддерживается за счет подключения программы на JavaScript, котораназывается Change Attribute, - вы выбираете элемент, событие, присущееданному элементу (например, OnMouseOver или OnMouseOut), программу ChangeAttribute и указываете новые значения того или иного атрибута (Рис.7).

Так, не написав ни строки кода, можно создать страницу, в которой расположена форма и строка ввода. При попадании курсора мыши в область строки ввода в ней отображается строка "Hello World!". Вот код страницы, созданной Macromedia Dreamweaver:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function MM_changeProp(objStrNS,objStrIE,theProp,theValue)
{
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);
if ((theObj != null) && (theProp.indexOf("style.") != 0 || theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '="'+theValue+'"');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form method="post" action="">
<input type="TEXT" name="textfield" size="40"
onmouseover="MM_changeProp('document.forms[0].textfield', 'document.forms[0].textfield', 'value', 'Hello World!', 'INPUT/TEXT')"
onmouseout="MM_changeProp('document.forms[0].textfield', 'document.forms[0].textfield', 'value', '', 'INPUT/TEXT')">
</form>
</body>
</html>

Данный код совместим как с Netscape Navigator, так и с Microsoft Internet Explorer. Это очень важно, так как автоматически обеспечивается поддержка большинства популярных платформ.

Поддержка JavaScript

Macromedia Dreamweaver обладает расширенными возможностями написания скриптовых программ и их связи с отдельными элементами вашего документа. Рассмотрим пример. Мы помещаем в документ форму, а в нее - обычную кнопку. В панели Behaviors мы можем сразу же получить список событий, поддерживаемых данным элементом (Рис.8), и даже выбрать ряд предопределенных скриптовых программ, например, вывести сообщение в диалоговой панели или в статусной строке.

Если мы выберем вывод сообщения в диалоговой панели, то получим возможность указать текст сообщения (Рис.9).

После ввода сообщения, в код документа вставится код JavaScript:

<input type="SUBMIT" name="button" value="button" onclick="MM_popupMsg('Hello World!')">

Macromedia Dreamweaver поддерживает создание скриптовых программ для различных браузеров - вы можете выбрать платформу из списка, в котором (для данной версии) представлены браузеры Netscape Navigator 3 и 4, Microsoft Internet Explorer 3 и 4, браузеры 4-й версии и браузеры 3-й и 4-й версии. Это очень удобно, так как объектные модели браузеров отличаются. Вы можете выбрать, например, "браузеры 4-й версии" и получить список только тех событий, которые поддерживаются и в Netscape и Microsoft (Рис.10).

Вся информация о браузерах и скриптовые программы хранятся в текстовых файлах, поэтому вы всегда можете дополнить не только библиотеку, но и описания событий для браузеров.

Анимация

Механизм поддержки анимации в данном продукте называется Timeline. Его суть заключается в том, что вы, выбираете какой-либо объект, например, графическое изображение, помещенное в "слой" (layer), и задаете сценарий его поведения. Для этого используется временная шкала (timeline), разделенная на кадры. К каждому кадру можно присоединить какое-либо событие (Рис.11).

Например, через каждые 5 кадров менять местами два изображения. В данном случае мы выбираем номера кадров и связываем каждый пятый кадр с скриптовыми программами Swap Image и Swap Image Restore (одна изменяет изображение, другая - восстанавливает). В результате мы получаем простейшую анимацию. Пакет предоставляет большой набор предопределенных скриптовых программ, которые можно использовать при обработке событий на временной шкале. Помимо анимации средствами JavaScript пакет обеспечивает интерфейсы с ShockWave, Director, Java-апплетами, встраиваемыми модулями (plug-in) и компонентами ActiveX, что дает практически неограниченные возможности.

На Web-узле Macromedia создан специальный раздел, где разработчики могут обмениваться компонентами, - вы загружаете необходимые вам компоненты и объекты, подключаете их к пакету и используете в своих программах.

Данный пакет представляет собой мощное профессиональное средство длсоздания Web-страниц, поддерживающее скриптовые программы, анимацию, интерфейсс ShockWave, Director и т.п. Объединение данного пакета с HomeSite 3.0фирмы Allaire позволит разработчикам создавать профессиональные страницыс использованием всех возможностей, предоставляемых браузерами последнегопоколения.

Требования к системе

• Pentium 75+ МГц или выше;
• Windows 95 или Windows NT 4.0;
• 24 или более мегабайт памяти;
• 640x480, 256 цветов (рекомендуется более высокое разрешение и большее число цветов);
• 30 Мбайт свободного пространства на диске.

HomeSite 3.0, Allaire

Редактор HomeSite 3.0 фирмы Allaire является новейшей версией средства для создания HTML-страниц, разработанного этой фирмой. С помощью этого редактора можно создавать как отдельные страницы, так и отдельные узлы. Команда File I New выводит диалоговую панель New (Рис.12), в которой естьдве вкладки: HTML-документы и DHTML-документы. В первом случае можно выбрать 5 шаблонов документов или воспользоваться "мастерами": FramesWizard, Multimedia Synchronization Wizard, Real Player Control Wizard, Style Sheet Wizard и Table Wizard. Вкладка DHTML содержит два помощника - Outline Wizard и Slide Show Wizard.

Среда разработчика HomeSite напоминает такие средства как Borland Delphi (сам продукт написан на Borland Delphi) или Microsoft Visual Studio; она построена по принципу - все инструменты доступны для пользования (Рис.13).

Здесь есть главное меню, панель быстрого доступа, палитра инструментов с рядом вкладок, менеджер файлов и проектов и окно редактирования/просмотра.

Панель быстрого доступа содержит кнопки с наиболее часто употребляемыми командами, такими как New, Save, Copy, Paste и т.п. Менеджер файлов и проектов обеспечивает доступ к файлам; их можно выбирать по нескольким категориям: All Web Files, Web Documents, Web Images, All Files и проектам. При работе с проектами существует возможность добавления и удаления файлов из проекта, создания новых проектов и удаления текущих. Для каждого документа проекта имеется возможность его публикации через Microsoft Web Publishing Wizard, проверки верности ссылок, получения "веса" документа - в этом режиме указываются его размер в Кбайтах и время его загрузки при скоростях 14.4, 28.8 и 57.6 Кбод. Последний режим очень полезен при оценке длительности загрузки создаваемой страницы.

Палитра инструментов состоит из ряда вкладок, содержащих различные элементы - от кнопок доступа к панелям настроек наиболее часто используемых элементов (ссылки, изображения, форматирование текста) до вкладок, специфичных для работы с текстом, таблицами, фреймами, формами, программами JavaScript и активными серверными страницами (ASP).

При создании пустого документа с помощью Quick Start Wizard можно указать его заголовок, тип документа, верхний и левый отступ, а также задать значения стандартных МЕТА-тегов (Рис.14).

Для большинства тегов предоставляется диалоговая панель, в которой можно задавать значения атрибутов данного тега (Рис. 15). После того как теги размещены в тексте документа, можно редактировать их атрибуты - для этого нужно поместить курсор в начало тега и нажать клавишу F4.

Практически каждое встроенное средство обладает рядом удобных расширений. Например, панель задания атрибутов ссылки (тег <A>) позволяет выбрать ссылки из закладок Netscape Navigator или Favorites Microsoft Internet Explorer.

Для удобства ввода цветовых констант служит палитра выбора цвета.

Если вы хотите самостоятельно вставлять теги и вручную задавать значения их атрибутов - в вашем распоряжении список Tag List, содержащий панели Tags и Attributes.

Специальная панель содержит кнопки для выполнения специфичных команд. Здесь можно форматировать текст в документе (чтобы он лучше читался и был более структурирован), заменять служебные символы, преобразовывать регистры тегов, вставлять теги <> и </>, что позволит использовать нестандартные теги, включать панели специальных символов и т.п.

Пакет HomeSite поддерживает режим просмотра создаваемого документа как с помощью встроенного браузера, так и с указанием внешнего. Отметим, что поддерживается возможность подключения до 15 внешних браузеров - таким образом, вы можете проверять создаваемые вами документы на различных платформах и в различных условиях.

Отдельный интерес представляют настраиваемые панели, каждая из которых может содержать до 1000 символов - тегов HTML с атрибутами, параметрамии т.п. Вы можете включать сюда элементы, повторяющиеся на ряде страниц, или задавать некоторые параметры форматирования. Например, если все главные заголовки ваших страниц выполнены шрифтом Times New Roman синего цвета с атрибутом выделения и размером 5, то вы можете задать собственную команду в панели. В нашем случае, открывающий тег:

<font size=5 color="Blue" Face=Times New Roman>

и закрывающий тег:

</font>

Диалоговая панель Custom Toolbutton для нашего примера показана на Рис.16.

Если вы задаете значения атрибутов тегов вручную, то на помощь вам придут подсказки, отображаемые для каждого тега - в них описываются все допустимые атрибуты и их предполагаемые значения (Рис.17).

Поддержка JavaScript

Вкладка Script содержит все необходимое для создания программ на языке JavaScript. Здесь есть список встроенных объектов языка и браузера с указанием методов и свойств (выбор элемента приводит к вставке его в документ), кнопка для вставки Java-апплетов, тегов <SCRIPT> и <NOSCRIPT>, задания параметров, вывода сообщений, вызова определенных методов и выбора ряда предопределенных программ (Рис. 18).

HomeSite 3.0 поддерживает всевозможные версии JavaScript - при вставке тега <SCRIPT> вы можете указать значение атрибута LANGUAGE: JavaScript,JScript, JavaScript 1.2 и т.п. Также можно указать, где находится файл с исходным текстом и где должен выполняться данный скрипт (Рис. 19).

Для вывода сообщений вы можете воспользоватьс функциями alert или confirm. Для открытия дочерних окон существует специальная диалоговая панель, позволяющая задать основные параметры вызова функции window.open. Отдельный интерес представляет средство Script Wizard, с помощью которого вы можете поместить в программу ряд предопределенных скриптовых фрагментов.

Поддержка активных серверных страниц (ASP)

Поддержка ASP разделена на две части - поддержка скриптов для Cold Fusion, продукта фирмы Allaire, эквивалентного Active Server Pages, и поддержка Active Server Pages, реализуемых с помощью MS Visual InterDev.

Поддержка Cold Fusion реализована на уровне вставки в текст документа базовых синтаксических конструкций с возможностью задания значений атрибутов.

Скриптовые программы для ASP поддерживаются на уровне вставки доступа к серверным переменным включаемых файлов, тега <%...%>, тега <%=...%> и конструкций If Else и End If (подразумевается, что серверная скриптовая программа создана на языке VBScript).

В заключение скажем несколько слов о поддержке Dynamic HTML. В панели New на вкладке DHTML можно найти две утилиты - Outline Wizard и Slide ShowWizard. Утилита Outline Wizard служит для создания разворачивающихся списков. Сначала мы задаем атрибуты списка: цвета элементов, начальное состояние - свернутый или развернутый, затем описываем сами элементы. Те элементы, которые располагаются на первом уровне, присутствуют в списке всегда, элементы второго и более низких уровней доступны только после активизации элементов первого уровня.

Нажатие кнопки Finish (Рис. 20) приводит к созданию достаточно сложного кода на JavaScript, который использует динамическое управление атрибутами таблицы стилей для отображения/скрытия вложенных элементов. Созданный таким образом разворачивающийся список выглядит так, как показано на Рис. 21.

Утилита Slide Show Wizard используется для показа слайдов. Здесь мы задаем число слайдов, время показа каждого из них, способ перехода от слайда к слайду и описываем содержимое каждого слайда. Это может быть графическое изображение с дополнительным HTML-кодом. При нажатии кнопки Finish мы получаем программу на VBScript, которая управляет отображением слайд-шоу. В комментариях приводится информация о том, как вручную откорректировать и добавить новые слайды.

Отдельного упоминания заслуживает справочная система. Она существует в двух вариантах. Стандартный справочный файл для WinHelp описывает сам продукт, его отдельные элементы, содержит ответы на часто задаваемые вопросы и сборник полезных советов. Дополнительно поставляется подробный справочник по языку HTML, выполненный в виде HTML-документа. Он включен в среду разработчика и как бы становится его интегрированной частью.

Редактор HomeSite 3.0 - это мощное удобное средство для создания Web-узлов и HTML-документов, обладающее всеми необходимыми функциями, свойственными программному продукту такого класса.

Требования к системе

• Pentium 75+ МГц или выше;
• Windows 95 или Windows NT 4.0;
• 16 или более мегабайт памяти;
• 640x480, 256 цветов (рекомендуетс более высокое разрешение и большее число цветов);
• 10 Мбайт свободного пространства на диске.

Выбор инструмента

Требования, предъявляемые к Web-сайтам очень различны. Первое, над чем стоит задуматься при выборе инструмента разработки Web-страниц, для чего вы создаете свой WWW-сервер и какую информацию он будет отображать. Для строительства крупных Web-сайтов можно воспользоваться мощными инструментальными пакетами, такими как Fusion фирмы NetObjects. Инструменты дизайна, включенные в эту программу, по своему действию очень похожи на инструменты профессиональных издательских пакетов, и с их помощью вы можете публиковать информацию из баз данных.

На сегодняшний день Web-страница - это не просто документ. С появлением последних расширений HTML и новых языков Web-программирования, таких как JavaScript, она стала чуть ли не настоящим программным приложением. Если вы хотите создать на своем сервере сложный Web-сайт с интегрированной в него базой данных, вам следует рассмотреть такие инструменты, как VisualInterDev фирмы Microsoft. Эта программа позволит вам построить на вашем сервере довольно сложные приложения.

Для разработки небольших Web-страниц не обязательно покупать фирменный продукт в коробке. Достаточно пробежаться по таким условно-бесплатным сайтам как TUCOWS или Windows95.com, и вы обнаружите огромное разнообразие инструментов, готовых к тому, чтобы их скачали и протестировали на практике. Большинство условно-бесплатных пакетов не так изысканы, как последние WYSIWYG - инструменты, но с их помощью можно реализовать несложные и красивые Web-страницы.

Чтобы стать до конца "упакованным" Web-дизайнером, вам понадобится собрать у себя целый комплект самых разнообразных необходимых инструментов- и все эти инструменты можно найти в Интернет. После того как вы скачаете себе средства Java - программирования, программы для обработки изображений, программу для проверки ссылок, сайт - менеджер и FTP - клиент - только тогда вы сможете строить сложные и красивые Web-сайты.

Использование шрифтов в HTML-страницах

Средства языка HTML

Язык гипертекстовой разметки документов HTML представляет достаточно ограниченные возможности по заданию шрифтов - для этого используются теги <FONT> и <BASEFONT>, каждый из которых имеет атрибут SIZE, задающий размер шрифта в единицах от 0 до 7; тег <FONT> помимо этого имеет атрибут COLOR, указывающий цвет шрифта.

Тег <FONT>

Данный тег позволяет задать размер шрифта и указать его цвет. Тег <FONT> и парный ему тег </FONT> действуют для всех элементов, располагаемых между ними, за исключением таблиц, где необходимо указывать размер шрифта для каждой ячейки отдельно.

Как было сказано выше, атрибут SIZE задает размер шрифта. По умолчанию используется размер 3 - в этом случае текст отображается шрифтом того размера, который задан по умолчанию. Таким образом, шрифт размером 2 будет чуть меньше шрифта по умолчанию, а шрифт размером 4 - чуть больше. Указываемые в качестве параметра атрибута SIZE величины зависят от размера шрифта, установленного по умолчанию, а также от типа шрифта.

Для указания цвета шрифта используется атрибут COLOR, который может иметь либо символьное значение, как например BLUE, либо цифровое - в данном случае указывается шестнадцатеричное число, представляющее собой комбинацию красной, зеленой и синей составляющих цвета (RGB). Например:

<FONT COLOR="BLUE>

или

<FONT COLOR="#979797">

Реальные рзмеры шрифтов, указываемые с помощью атрибута SIZE, зависят от ряда параметров - размера шрифта, заданного по умолчанию, разрешения монитора, способа просмотра, типа браузера и т.п. Спецификация HTML не содержит никаких указаний на то, как размеры, задаваемые с помощью атрибута SIZE, должны соотноситься с реальными размерами шрифта. Это целиком и полностью зависит от разработчиков того или иного браузера. Фирма Vicrosoft, как и Netscape, использует для отображения шрифтов величины, установленные в оригинальном браузере Mosaic. Эти величины, размер шрифта в точках и соответствующие ему значения тега <Hx> приведены в табл. 1.

Браузер Microsoft Internet Explorer 4.0 позволяет достаточно просто изменять размеры шрифтов по умолчанию - для этого используется либо команда View | Fonts, либо кнопка Fonts на основной панели браузера. В данном браузере имеется 5 возможных размеров шрифта - Smallest, Small, Medium, Large и Largest. Размеры шрифта в точках для каждой опции приведены в табл. 2.

Таким образом, используя размеры шрифтов, задаваемые с помощью тега <FONT>, мы можем получать совершенно разные значения для различных режимов просмотра, что может существенно сказываться на результатах отображения одной и той же страницы.

Помимо изменения размера шрифтов, HTML позволяет управлять их атрибутами - использовать выделенные, наклонные шрифты, шрифты с подчеркиванием, надстрочные и подстрочные символы. Для этого используются теги <B>, <I>,<U>, <SUP> и <SUB> соответственно.

Выше мы упомянули, что шрифт с размером 3 является шрифтом по умолчанию. Данный размер может быть изменен с помощью тега <BASEFONT>.

Тег <BASEFONT>

Этот тег задает размер "базового" шрифта, используемого для отображения обычного текста. Например:

<BASEFONT SIZE=4>

В этом случае другие размеры шрифта могут указываться относительно базового. Например:

<FONT SIZE=-1>

задает размер шрифта на 1 меньше базового, а

<FONT SIZE=+2>

размер шрифта на 2 больше базового. Как и в случае с тегом <FONT>, реальный размер шрифта зависит от конкретной конфигурации браузера и используемого разрешения. Отметим, что тег <BASEFONT> не влияет на размеры шрифта, задаваемые тегами <Hx>.

Выше мы рассмотрели два тега языка HTML, позволяющие задавать размер и цвет шрифта. При этом начертание шрифта, используемое для отображения текста, определяется настройками конкретного браузера. Для того, чтобы обеспечить возможность задания начертания шрифта, фирма Microsoft предложила новый атрибут тега <FONT> - FACE.

Атрибут FACE

Атрибут FACE, используемый совместно с тегом <FONT>, позволяет указывать начертание шрифта. Возможно указание трех альтернативных начертаний:

<FONT FACE= FACE1, FACE2, FACE3>

Если первое начертание не найдено, используется второе, затем третье. Если ни одно из указанных начертаний не найдено, используется шрифт по умолчанию. Например, чтобы задать начертание Arial, следует написать:

<FONT SIZE=4 FACE="Arial">Шрифт Arial</FONT>

Фирма Netscape стала поддерживать этот атрибут, начиная с версии NetscapeNavigator 3.0.

Список шрифтов указывается следующим образом:

<FONT FACE="Arial, Helvetica, Times New Roman">

Здесь мы сталкиваемся со следующей проблемой: при разработке страницы мы можем указать практически любой шрифт, но где гарантия того, что выбранный нами шрифт установлен на компьютере пользователя?

Подведем некоторые итоги. Язык HTML предоставляет минимальный контроль над шрифтами, позволяя задавать только их размер и цвет. Атрибут FACE, поддерживаемый браузерами Microsoft и Netscape, не является стандартным и в большинстве случаев игнорируется браузерами других фирм. При изменении размера базового шрифта, разрешения монитора или способа просмотра размеры шрифтов изменяются. Вдобавок к этому, для управления атрибутами шрифтов (подчеркнутый, наклонный и т.п.) необходимо использовать дополнителные теги, что порой усложняет форматирование и редактирование HTML-документов.

Таблицы стилей

Среди дополнений к языку HTML, предлагаемых в версии 3.2, самым важным стали каскадные таблицы стилей (CSS - Cascading Style Sheets). Таблицы стилей дают авторам Web возможность отделить информацию о компоновке и визуальной структуре страницы от ее содержимого, делая большинство браузеров способным в любом случае показать основной содержательный материал страницы. Спецификация состоит из обобщенного тега STYLE, который позволяет добавлять вспомогательные стили, не вводя дополнительный тег в сам язык HTML.

Вы можете создать и хранить единственное определение таблицы стилей для различных документов, просто делая в документах ссылки на эту таблицу стилей, благодаря чему становится гораздо легче придать страницам единообразный вид.

Информация о стилях может содержаться как в самом HTML-документе, так и во внешнем файле. В примерах, рассматриваемых ниже, описание стилей содержится в секции STYLE, располагаемой в части HEAD HTML-документа. Рассмотрим следующий пример (только для Netscape Communicator 4.0 или MS Internet Explorer):

<HTML>
<HEAD>
<TITLE>Style Sheet Demo</TITLE>
<STYLE TYPE="text/css">

BODY background : white
}

<H1 {
color: blue;
font-weight: bold;
font-size: 15pt;
font-family: Arial, sans-serif
}

<P>{
color: green;
font-size: 11pt;
font-family: Georgia, serif
}

<</STYLE>
</HEAD>
<BODY>
<H1>Таблицы стилей</H1>
<P>Использование таблиц стилей позволяет управлять различными атрибутами шрифтов.
</BODY>
</HTML>

С помощью таблицы стилей в примере мы изменили атрибуты шрифтов, используемых для отображения заголовка первого уровня (тег <H1>) и основного текста документа (тег <P>).

Спецификация CSS1 позволяет управлять следующими атрибутами шрифтов: font-family, font-style, font-variant, font-weight, font-size. Рассмотрим каждый из атрибутов поподробнее.

font-family

Данный атрибут задает семейство шрифтов для одного элемента документа. Например:

H1 { font-family: Arial, sans-serif }

Семейство может задаваться либо именем конкретного шрифта, либо "синонимом". Среди поддерживаемых синонимов определены следующие: serif, sans-serif, cursive, fantasy и monospace. Выбор конкретного шрифта целиком и полностью зависит от того, какие шрифты установлены на клиентском компьютере.

font-style

Данный атрибут задает стиль шрифта. Таким стилем может быть normal (значение по умолчанию), italic или oblique. Например:

H2, H3 { font-style: italic }

Конкретное отображение шрифта зависит от используемого браузера.

font-variant

Задает способ отображения символов. В данном случае символы нижнего регистра отображаются как уменьшенные символы верхнего регистра. Например:

<HTML>
<HEAD>
<TITLE>Style Sheet Demo</TITLE>
<STYLE TYPE="text/css">

BODY background : white
}

H3 {
color: blue;
font-size: 15pt;
font-variant: small-caps;
font-family: 'Times New Roman';
}
</STYLE>
</HEAD>
<BODY>
<H3> Использование атрибута small-caps</H3>
</BODY>
</HTML>

font-weight

Данный атрибут задает "вес" шрифта. Допустимы следующие значения: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 900. Значение normal соответствует шрифту с весом 400, bold - с весом 700.Например:

H1 {
font-weght: bold /* 700 */
}

font-size

Задает размер шрифта. Размер может задаваться в абсолютных единицах (xx-small, x-small, small, medium, large, x- large, xx- large), относительных единицах (larger или smaller), типографских единицах или процентах. Например:

P {
font-size: 15pt;
}

H1 {
font-size: larger;
}

H2 {
font-size: 120%;
}

H3 {
font-size: 2.5mm;
}

Возможно указание различных единиц, в которых измеряется размер шрифта. Microsoft Internet Explorer поддерживает следующие единицы: pt (точки), pc ("пики"), in (дюймы), mm (миллиметры), px (пиксели), % (проценты).

Точки эквивалентны 1/72 дюйма, но реальное отображение шрифта зависит от многих параметров, описанных при теге <FONT>.

P>{
font-size : 20pt;
}

Одна "пика" эквивалентна двенадцати типографским точкам.

P{
font-size : 2pc;
}

Реальный размер шрифта, указываемого в дюймах, зависит от выбранного семейства и конкретных настроек клиентского браузера.

P{
font-size : 0.7in;
}

В качестве альтернативы использованию дюймов размеры шрифта можно задавать в миллиметрах.

P{
font-size : 15mm;
}

Реальный размер шрифта, указываемого в пикселях, зависит от выбранного семейства и конкретных настроек клиентского браузера.

P{
font-size : 36px;
}

Размер шрифта, указанный в процентах, показывает размер в процентах от базового размера.

P{
font-size : 150%;
}

font

Атрибут font представляет собой сокращенный вариант атрибута font-style.Например:

P{
font: 12/14pt sans-serif;
}

P{
font: 80% sans-serif;
}

P{
font: x-large/110% "new century schoolbook", serif;
}

P{
font: bold italic large Palatino, serif;
}

Ряд атрибутов позволяет задавать цвет текста и фона. К таким атрибутам относятся: color, background-color, background-image, background-repeat, background-attachment, background-position и background.

Цвет можно задавать тремя способами - в виде предопределенного значения, в виде величины rgb или в виде шестнадцатеричного значения. Например:

{
color : red;
color : rgb(255, 0, 0);
color : #ff0000
}

Некоторые дополнительные атрибуты таблиц стилей позволяют управлять расстояниями между словами (word-spacing), символами (letter-spacing), атрибутами текста (text-deciration), вертикальным выравниванием (vertical-align), преобразованием регистра (text-transform), выравниванием текста (text-align), отступом (text-indent) и высотой строк (line-heght).

Механизм использования таблиц стилей предоставляет больше возможностей для форматирования и указания различных атрибутов текста по сравнению с обычными тегами языка HTML. Но проблема отсутствия на клиентском компьютере шрифтов, которые использовались при разработке HTML страницы, - остается по-прежнему актуальной.

Динамические шрифты

В 1997 году фирмы Microsoft и Netscape предложили собственные варианты использования динамических шрифтов - шрифтов, загружаемых вместе с основным содержанием HTML-страниц.

Фирма Microsoft предлагает специальную утилиту - Microsoft Web Embedding Tool (WEFT), которая позволяет создавать специальные "шрифтовые объекты", используемые в Web-страницах. Такие объекты отличаются от обычных шрифтов тем, что, во-первых, занимают небольшой объем за счет использования алгоритмов сжатия, а во-вторых, содержат только символы, используемые на данной странице. Следует отметить, что утилита WEFT использует Internet Explorer 4.0 для анализа использования шрифтов на страницах, поэтому создаваемые страницы должны быть протестированы с помощью этого браузера. Пример:

<HTML>
<HEAD>
<TITLE>Использование шрифтов</TITLE>
<STYLE TYPE="text/css">
<!-
@font-face {
font-family: Garamond;
font-style: normal;
font-weight: bold;
src: url (http://www.myweb.com/garamond.eot) // размещение файла описани шрифта
}

<@font-face {
font-family: Georgia, serif
font-style: normal;
font-weight: normal;
src: url (http://www.myweb.com/georgia.eot)
}
->
</STYLE>
</HEAD>
<BODY>
<P><font face="Garamond"> Использование шрифта Garamond. Данный параграф отформатирован с помощью шрифта Garamond, который будет встроен в состав HTML документа.</font><P>
<P><font face=" Georgia "> Использование шрифта Georgia. Данный параграф отформатирован с помощью шрифта Georgia, который также будет встроен в состав HTML документа.</font><P>
</BODY>
</HTML>

Фирма Netscape совместно с фирмой Bitstream предлагают использование динамических шрифтов на основе TrueDoc. Данная технология состоит из двух основных компонент - Character Shape Recorder (CSR) и Character Shape Player(CSP). Character Shape Recorder анализирует используемые в составе HTML-страницы шрифты и сохраняет их в виде структуры данных, называемой Portable FontResource (PFR). CSP, встроенный в Netscape Communicator, отображает данные шрифты. Задать динамические шрифты можно либо с помощью тега <FONT FACE>, либо с помощью таблиц стилей. Средства разработки, поддерживающие динамические шрифты на основе TrueDoc, могут использовать тег <LINK>, располагаемый в секции <HEAD>:

<LINK REL="fontdef" SRC="myfont.pfr">

При использовании таблицы стилей вы указываете шрифт точно так же, как и в приведенном выше примере:

@font-face {
font-family: Gothic;
font-style: normal;
font-weight: bold;
src: url (http://www.myweb.com/myfont.pfr) // размещение файла описани шрифта
}

Использование динамических шрифтов является наиболее перспективным вариантом,так как позволяет создавать страницы, которые будут одинаково отображаться на клиентских компьютерах, независимо от установки используемых шрифтов. Но пока окончательного стандарта на использование динамических шрифтов нет. Будем ждать...

Web-ресурсы для разработчиков

Подготовка графики к размещению в Web

Всем известно, что в мире Internet безраздельно господствуют два графических формата: GIF и JPEG. Причем сферы применения каждого четко определены: GIF-картинки, как правило, применяются при оформлении страницы как элементы навигации и фона, а JPEG - для "высококачественного" репродуцирования.

Может быть, вам уже надоела сентенция о том, что объем графики для Web надо снижать до нуля, но пропустить этот раздел никак нельзя. Надо помнить,что большие графические файлы приводят к уменьшению аудитории, никто не досидит до конца, дожидаясь пока загрузятся ваши файлы. Поэтому старайтесь,чтобы высококачественные репродукции занимали не более 50-70 Кбайт, рядовые картинки оформления - 15-20 Кбайт, а элементы навигации - 5-7 Кбайт.

GIF - формат

Чтобы добиться быстрого отклика от сервера, пользуйтесь форматом GIF. Он содержит возможность черезстрочной загрузки, а это значит, что, как только страница начала загружаться на пользовательскую машину, начнет перекачиваться и "preview" низкого разрешения для всей GIF-графики и зритель увидит "схемы" ваших работ. Но надо помнить, что максимальное число цветов в GIF - 256. Это значит, что все ваши Hi-End иллюстрации с миллионами цветов очень сильно пострадают.

Экспортировать в GIF-формат возможно либо в адаптивной, либо в системной цветовой палитре. Адаптивная палитра позволяет настраивать цвета изображения, подбирая каждому номеру указанный в фале цвет. Это хорошо при большом количестве доступных цветов, но если на экране всего 256 цветов, то настроить ничего нельзя, и отображение графики проходит некорректно. В это смысле системная палитра отрабатывает четко: каждому номеру соответствует цвет, стандартно заданный в операционной системе. Но в Windows 95 и Mac OS, например, стандарты разные, так что пользователь из "другого стана" уйдет с вашей странички ни с чем.

Формат GIF89а содержит такую полезную вещь, как возможность анимирования картинок, и возможность просмотра анимации поддерживается подавляющим большинством браузеров.

JPEG - формат

Теперь о формате JPEG. Этот алгоритм сжатия очень эффективен, а последняя версия (progressive JPEG) сжимает графику до невероятно маленьких размеров. Но учтите, что некоторые старые браузеры не смогут их воспроизвести. Заслуживает внимания и тот факт, что в JPEG-файле сохраняются все цвета оригинала - сжатие идет за счет того, что уничтожается часть пиксельной информации. Это хорошо для высоких значений качества, задаваемых в диалоговом окне экспорта, но очень сильно сжатые иллюстрации могут выглядеть по цвету так же плохо, как и GIF, вследствие наличия фантомов и цветовых шумов вокруг контуров.

Поэкспериментируйте с разными форматами и степенями сжатия, добейтесь идеального соотношения качества и объема, сделайте несколько вариантов, просмотрите их в популярных версиях браузеров, выберите лучший и помещайте в Internet.

Каждый формат имеет свои слабости. GIF плохо работает с изображениями с тонкими цветовыми переходами. Цветовой переход имеет много промежуточных оттенков, а поскольку в этом формате все цвета наперечет, часть информации теряется и вместо гладкого перехода мы имеем пастеризованную на несколько уровней картинку. JPEG, наоборот, не имеет ограничений по цвету, но в самых эффективных проявлениях своих алгоритмов сжатия плохо переваривает цветовые границы: здесь проявляются фантомы и цветовой шум, что тоже бьет по глазам. Поэтому, перед тем как экспортировать свою графику в Web, подумайте, с какой целью вы ее помещаете и каков базовый принцип ее построения: если это схематичная миниатюра или средство навигации/оформления, нужно, безусловно, пользоваться форматом GIF. Ну, а если это репродукция, к просмотру которой зрители будут готовы (смирятся с объемом и низкой скоростью загрузки),- работайте с JPEG (Рис.22).

Литература

PC Magazine/Russian Edition. Спецвыпуск N 3, 4 за 1996 г.

КомпьютерПресс. N 1 - 4 за 1998 г.

Мир ПК. N 2 за 1998 г.