f мне
-ssssS.......
Создайте си
ГЛ 120
| миллионов!
‘ЧАИНИКОВ"-
Создан*1®
VVeb-страннЦ
ЧАЙНИКОВ
тм
7-е издание
Для
сомневающихся
Бад Смит
Автор многих книг
по работе в Интернете
Артур Бибек
Основатель компании
Netsurfer Communications, Inc.
^АЦДЛЕКтиКД
www.dialektika.com
На компакт-диске
размещены средства
для создания
Web-страниц
Создание
Web-страниц
для
ЧАЙНИКОВ"-
7-е издание
Бад Смит и Артур Бибек
ДИАЛЕКТИКА
Оглавление
Введение	13
ЧАСТЬ I. СОЗДАЙТЕ WEB-СТРАНИЦУ СЕГОДНЯ	19
Глава 1. Основы публикации Web-страниц	21
Глава 2. Публикации в Web: провайдеры Internet и бесплатные службы	37
Глава 3. Введение в HTML	54
ЧАСТЬ II. СОЗДАНИЕ СТРАНИЦ	77
Глава 4. Выбор средств	79
Глава 5. Создание домашней страницы	93
Глава 6. Заполнение домашней страницы	109
Глава 7. Добавление ссылок на Web-страницу	124
ЧАСТЬ ill. БЫСТРЕЕ, ЛУЧШЕ, ПРИВЛЕКАТЕЛЬНЕЕ	137
Глава 8. Создание и добавление готовой графики для размещения в Web 139
Глава 9. Правильное размещение графики	156
Глава 10. Разработка красивых страниц	164
Глава 11. Публикация Web-страниц	177
ЧАСТЬ IV. БОЛЬШЕ ИНТЕРАКТИВНОСТИ!	189
Глава 12. Анимация и мультимедиа	191
Глава 13. Добавление интерактивных элементов	203
Глава 14. Создание многостраничного Web-узла	211
Глава 15. Заведите свой блог	226
ЧАСТЬ V. ВЕЛИКОЛЕПНЫЕ ДЕСЯТКИ	239
Глава 16. Десять вещей, которые нужно делать в процессе Web-публикации 241
Глава 17. Десять вещей, которые не нужно делать в процессе Web-публикации 245
ЧАСТЬ VI. ПРИЛОЖЕНИЯ	249
Приложение А. Словарь терминов	251
Приложение Б. Поставщики услуг Internet	257
Приложение В. Краткое руководство по использованию HTML-дескрипторов 259
Приложение Г. Использование файла Resource.htm	274
Приложение Д. О компакт-диске	282
Предметный указатель	290
Содержание
Об авторах	12
Благодарности	12
Введение	13
Об этой книге	13
Глупые предположения	13
Компакт-диск	14
Обозначения, используемые в книге	14
Структура книги	15
Часть I. Создайте Web-страницу сегодня	16
Часть II. Создание страниц	16
Часть III. Быстрее, лучше, привлекательнее	16
Часть IV. Больше интерактивности!	16
Часть V. Великолепные десятки	16
Часть VI. Приложения	*	16
Пиктограммы, используемые в книге	16
Ждем ваших отзывов!	18
ЧАСТЬ I. СОЗДАЙТЕ WEB-СТРАНИЦУ СЕГОДНЯ	19
Глава 1. Основы публикации Web-страниц	21
Основы Web	21
Знакомство с работой Web	21
Знакомство с URL	22
Web-публикация в стиле для "чайников ”	23
Как создать простую Web-страницу	25
Начните с простого	25
Типы Web-узлов	25
Персональные узлы	26
Тематические узлы	28
Коммерческий узел	28
Развлекательные узлы	30
Принципы создания Web-страниц	31
Для чего создастся страница	31
Не увлекайтесь внешним видом	32
Заинтересуйте посетителя	33
Дважды подумайте о времени загрузки	34
Знайте свою аудиторию	35
Используйте небольшие текстовые блоки	35
Найдите узлы, которые вам нравятся	35
Постоянно совершенствуйте узел	36
Оцените свою работу	36
Глава 2. Публикация в Web: провайдеры Internet и бесплатные службы	37
Какой провайдер является лучшим	37
Начните с Web-страницы Yandex.Народ или Yahoo! GeoCities	39
Зайдите на страницу Yandex-Народ или Yahoo! GeoCities	39
с плюйте обшеппинятой поактике	11
Перед началом работы спланируйте ее
Процедура регистрации
I Триступасм к созданию Web-страницы
Создание Web-страницы на Yandex
Создание Web-сграницы на GeoCities
Глава 3. Введение в HTML
Краткий обзор HTML
Просмотр HTML-документов
Создание HTML-документов
Предварительный просмотр HTML-документов
Практичность HTML
Основные правила HTML
Десять основных дескрипторов HTML плюс еще один
Создание Web-страницы с HTML-дескрипторами
Создайте пустой файл HTML
Заголовки — путь к победе
Придумайте заголовок и введите содержимое в тело документа
Добавьте небольшой список
Оглянитесь в поисках якоря
Просмотр созданной страницы
Следующие этапы изучения HTML
ЧАСТЬ II. СОЗДАНИЕ СТРАНИЦ
Глава 4. Выбор средств
WYSIWYG или обычный текст?
Плюсы и минусы текстовых редакторов
Плюсы и минусы Netscape Composer
Работа с Netscape Composer
Как запустить Netscape 7.1
Получение Netscape Composer
Использование Netscape Composer
Использование текстового редактора
Глава 5. Создание домашней страницы
Что необходимо поместить на домашней странице
Вы и ваши интересы
Вы и ваша семья
Вы и ваша работа
Начинаем создавать страницу
Создание исходной страницы с помощью HTML
Создание исходной Web-сграницы с помощью Web-редактора
Дескрипторы МЕТА
Добавление дескрипторов МЕТА с помощью программы Блокнот
Добавление дескрипторов МЕТА с помощью программы Composer
Г лава 6. Заполнение домашней страницы
1 Написание материалов для Web
Web-pea.'inH
Web-стиль
Форматирование Web-текста	113
Использование HTML-списков	114
Ввод текста в HTML	116
Ввод и форматирование текста с помощью редактора	118
Создание списка	118
Просмотр Web-страницы	119
Ввод текста в Netscape Composer	120
Ввод и форматирование текста с помощью Netscape Composer	121
Создание списка	122
Просмотр HTML-кода	122
Г лава 7. Добавление ссылок на Web-страницу	124
Основы создания ссылок	125
Принципы работы ссылок	125
Ссылки и адреса URL	125
Как избежать ошибок	129
Создание ссылок на Web-с границы	130
Добавление ссылок в HTML	131
Добавление ссылок в Netscape Composer	131
Создание ссылки mailto	133
Создание ссылки mailto в HTML	135
Создание ссылки mailto в Netscape Composer	135
ЧАСТЬ III. БЫСТРЕЕ, ЛУЧШЕ, ПРИВЛЕКАТЕЛЬНЕЕ	137
Глава 8. Создание и добавление готовой графики для размещения в Web	139
Использование графики на Web-узле	139
Использование графических форматов GIF и JPEG	140
Использование инвариантных Web-цветов	142
Получение и создание графики	143
Работа с графикой	145
Ускорение загрузки страниц	146
Как избежать трех серьезных ошибок	147
Использование графики в HTML	148
Использование дескриптора <IMG> для внутритекстовой графики	149
Добавление якоря <А> для создания графической ссылки	150
Работа со сложными GIF-изображениями	152
Прозрачные GIF-изображения	154
Анимированные GIF-изображения	155
Интерактивные карты	155
Глава 9. Правильное размещение графики	156
Корректировка размеров изображения	156
Обтекание графики текстом	157
Заключение графики в рамку	159
Размещение графики в Netscape Composer	159
Размещение графики в HTML	162
Г гава 10. Разработка красивых страниц	104
Три важнейших принципа дизайна	I 04
Простота	Ю5
Предсказуемость
Целостность
Ошибки дизайна, которых следует избегать
Медленно загружающиеся страницы
Отталкивающее сочетание цветов
Мелкий текст (и крупный тоже)
Безнаказанное нарушение правил
Использование таблиц и фреймов
Создание простых таблиц
Таблицы как средство макетирования
Стоит ли использовать фоеймы
Глава 11. Публикация Web-страниц
Получение места на Web-сервере
Эксплуатационные характеристики Web-хостинга
Варианты выбора места на Web-сервере
Обращение за помощью
Передача файлов
Упорядочение файлов перед их п ере дачей
Передача файлов с помощью FTP
Передача файлов с помощью Web-служб
Ввод узла в действие
Тестирование узла
Обратная связь с посетителями
ЧАСТЬ IV. БОЛЬШЕ ИНТЕРАКТИВНОСТИ!
Глава 12. Анимация и мультимедиа
Подводные камни мультимедиа
Анимируйте свои GIF-файлы
Поиск анимированных GIF-файлов
Добавление анимированных GIF-файлов на Web-c границу
Создание анимированных GIF-файлов
Мультимедийные файлы
Добавление видеофайлов формата QuickTime
Добавление аудиофайла формата MP3
Об atftnofiax
Бад Смит (Bud Smith) является автором книг на компьютерную тематику с более чем 12-лет-
UIIM стажем. Создание Web-страниц для “чайников”, 7-е издание— лишь одна из дюжины
написанных им книг. Широкую популярность приобрела книга Бада Internet-маркетинг для
"чайников”. Помимо написания книг Бад работает редактором компьютерного журнала и ме-
неджером по маркетингу.
Знакомство Бада с компьютерами состоялось в 1983 году, когда он оставил многообе-
щающую профессию сварщика и стал обычным оператором по вводу данных. Но вскоре он
поступил на работу во вновь созданную компанию и переехал в Силиконовую Долину. После
и ого последовало сотрудничество с компаниями Intel, IBM, Apple и AOL. Работа и личные
интересы способствовали тому, что через некоторое время Бад получил ученую степень в об-
мети управления информационными системами в университете Сан-Франциско.
Артур Бибек (Arthur Bebak) получил ученую степень в области вычислительной техники
и университете Иллинойса, где имел поощрительную стипендию. Он разрабатывал мэйн-
фреймы, был руководителем крупных технических проектов и изучал методики делового
администрирования. Артур является основателем компании Netsurfer Communications, Inc.,
представляющей собой чрезвычайно успешное электронное издательство. Артур написал
множество научных работ, что, в конце концов (к удивлению для него самого), привело его к на-
писанию настоящей книги.
В компании Netsurfer под руководством Артура работают много людей, создающих Web-
учлы для своих клиентов. Кроме того, компания редактируег и издает несколько виртуальных
ыектронных журналов.
Тэлагоуа/швсбш.
Авторы благодарят ответственного редактора Стива Хейза (Steve Hayes) и всех, кто помо-
гал в написании книги: редакторов Пола Левеке (Paul Levesque), Ребекку Сеннингер (Rebecca
Senninger) и Николь Хеймз (Nicole Haims), технического редактора Данилу Селика (Danilo Celic)
п многих других сотрудников, занимавшихся макетированием, вычиткой, созданием пред-
метного указателя и иллюстраций.
‘Всемирная паутина” была создана, скорее, от большой любви, чем ради наживы, и эту тра-
цицию поддержали многие люди, потратившие свое время на оказание поддержки при напи-
сании данной книги. Мы особенно благодарны поставщикам Web-инструментария, предоста-
вившим превосходную подборку программ для компакт-диска, а также авторам Web-узлов,
описанных в этой книге.
Введение
Одни из вас познакомились с персональным компьютером так давно, что уже не могу|
вспомнить, когда это произошло, а другие — только вчера. Неуклонное повышение роли
персонального компьютера, происходившее со случайными спадами, но без реальных на
дений, определенно стало самым важным социальным и технологическим событием конца
двадцатого столетия. Начиная с Apple II Возняка и Джобса и заканчивая операционнон
системой Windows 95 Билла Гейтса, ни одно изобретение столь глобально не изменило
жизнь, как персональный компьютер.
Однако людям свойственно общаться. На начальном этапе своего развития персональные
компьютеры не давали людям такой возможности. Но с появлением первых модемов, а затем
сетей и, наконец, их аккумулирования в виде Internet персональные компьютеры стали сред
ством, открывшим новую среду общения. Самой видимой и быстро растущей частью Internet
является “всемирная паутина” — World Wide Web. В настоящее время компьютерную свя п,
невозможно втиснуть в рамки одних только вычислений — это более широкое понятие. Ком
пьютеры являются ее важной составляющей, но в большинстве своем они являются средщ
вом достижения конечного результата, позволяющего людям общаться друг с другом.
Самым лучшим каналом взаимосвязи является Web, а в качестве средства общения выс i у
пают Web-страницы. Самые обычные люди проявляют незаурядную энергию и воображение,
создавая и публикуя свои Web-страницы. Побуждающим фактором создания Web-страниц
для обычных людей является их желание, а для развития бизнеса — это необходимость 11о-
этому ажиотаж в Web не прекращается, и часто бывает, что одни и те же люди самовыража
ются на одной Web-странице, а для деловой активности используют другой узел.
Наверное, вы тоже хотите внести свой вклад в развитие “всемирной паутины”, но вам ка
жется, что делать это трудно и дорого. Вы ошибаетесь! По мере роста Web появились очень
легкие способы стать частью этого сообщества. Самые лучшие из них описываются на сэра
ницах настоящей книги.
0J э/пой книге
Какой же материал представлен на страницах этой книги? Простые способы размс оцени я
информации в Web для самых широких кругов пользователей Internet. Способы создания первой
Web-страницы и обогащения ее привлекательным текстом, графикой и мультимедиа. Информа-
ция, необходимая для выхода за пределы первой Web-страницы и создания многостраничного
персонального или коммерческого Web-узла. Средства, помогающие продвинуться в создании
Web-узла настолько далеко, насколько вы сами пожелаете. Все они будут либо описаны в дан
ной книге, либо представлены в виде демо-версий на прилагаемом компакт-диске.
н^гедположения
В книге представлено большое количество полезной информации, но вряд ли кто-го про
читает ее от корки до корки, за исключением разве что многострадального редактора. Это
связано с тем, что темы, посвященные Web-страницам, представлены как для начинающих,
так и для опытных пользователей. Кроме того, в книге представлен материал, посвященный
публикации Web-страниц посредством Web-служб, описаны различные инструменты, в к>м
числе пригодные только для работы на платформе Macintosh или Windows. Пет такого поль-
зователя, которому нужен был бы весь представленный материал. Но определенная его час.ь
необходима всем, кто хочет создать и разместить свою страницу в Web.
Но что же необходимо именно вам! При написании этой книги мы предполагали, что, веро-
ятнее всего, вы уже посещали Web и теперь хотите создать какую-то Web-страницу. При этом
вы еще не являетесь Web-автором, и этот процесс для вас в новинку. Для того чтобы воспользо-
ваться материалом данной книги, вам необходим персональный компьютер, работающий под
управлением Mac OS или Windows, а также доступ к Web, предоставляемый поставщиком услуг
Internet (ISP). На вашем компьютере должен быть установлен Web-браузер, например Microsoft
Internet Explorer, Netscape Navigator или какой-нибудь другой. Если у вас есть доступ к Internet, но
на компьютере установлена система UNIX, то материал этой книги вам тоже подойдет, но к неко-
торым средствам создания Web-страниц, описываемым в данной книге, доступа у вас не будет.
Если у вас еще нет доступа к Web с персонального компьютера, обратитесь к приложе-
нию Б, в котором приведен перечень некоторых Internet-провайдеров России и Украины. Вы
должны иметь определенный опыт путешествий по Web или приобрести его в процессе поис-
ка информации и примеров для своей Web-страницы. Иными словами, самое главное — же-
лание что-то делать. Тогда материал этой книги пригодится и гем, кто хочет создать свою
первую Web-страницу, и тем, кто желает усовершенствовать уже имеющуюся.
'ЗйЬЛ Для целостности восприятия материала книги на приведенных рисунках представле-
ны копии экранов Windows с соответствующим содержимым. Инструкции, приве-
денные в этой книге, написаны так, чтобы их с равным успехом можно было приме-
нить и на платформе Windows, и на платформе Macintosh.
Знакомясь с книгой, ищите ту информацию, которая необходима в данный момент. Позд-
нее вы сможете прочитать и другие заинтересовавшие вас материалы. Внимательно читайте
инструкции, предлагаемые для выполнения тех или иных задач. Попытайтесь воспользовать-
ся инструментами, имеющимися на прилагаемом к книге компакт-диске, а затем поищите ин-
тересующий вас элемент на домашней странице Creating Web-pages For Dummies, созданной
одним из авторов этой книги, по адресу:
www.creating-web-pages.com
/бомпакйг-диск
На прилагаемом к книге компакт-диске содержится богатая подборка программного обес-
печения, предназначенного для создания Web-страниц. Здесь имеется ряд программ как для
Macintosh, так и для Windows. Подробная информация о содержимом компакт-диска содер-
жится в приложении Д. Информация об использовании тех или иных программ приведена
в соответствующих главах и разделах данной книги. Инструкции по установке программ, со-
держащихся на компакт-диске, приведены в приложении Д.
Обозначения, используемые в книге
Когда издатель сказал нам, что в книге должны использоваться обозначения, мы немного
задумались, но оказалось, что имелась в виду всего лишь целостность стиля. Обозначения,
принятые в этой книге, являются стандартными способами изложения определенной инфор-
мации, например инструкций. Одним из примеров обозначений является использование кур-
сивного начертания для выделения новых слов и терминов.
В книге используются следующие обозначения.
' -С Те слова или символы, которые вам следует вводить, обозначаю г си полу-
жирным моноширинным шрифтом.
•С Новые термины выделены курсивом.
J Информация, использующаяся особенным образом, отформатирована посредс i
|вом специальных шрифтов, В этой книге самым распространенным примере г>
подобной информации являются HTML-дескрипторы (элементы форматиропп
ния, использующиеся при создании Web-страниц; их полное определение дашп
в приложеншг А). В качестве примера приведем дескриптор <TITLE>.
Специальные шрифты используются также при написании URL (Uniform Re
source Locator — унифицированный указатель информационного ресурса), пред
ставляющих собой адреса, которые используются для указания местонахождени
Web-страниц. Например, URL издательства “Диалектика” имеет следующий вид
www.dialektika.com
Web является быстро растущей и постоянно развивающейся средой. Некою
рые URL, приведенные в этой книге, к моменту ее чтения вами могут измс
ниться, стать недоступными или могут перестать поддерживаться.
J При подготовке рисунков использованы версии наиболее распространенны
। браузеров.
J Команды и элементы меню могут выглядеть следующим образом: Файл1:
Сохранить. Этот пример, в частности, означает, что в меню Файл следуе
выбрать пункт Сохранить.
J Информационные блоки, относящиеся к одной теме, представлены в вид<
маркированных списков, как, например, тот, с которым вы знакомитесь в дан
ный момент.
J Инструкции, которые следует выполнять в определенном порядке, представ
лены в виде нумерованных списков. В этой книге приведено множество икс 
рукций, описывающих выполнение различных задач, которые помогут вам ста и
успешным создателем Web-страниц.
Для наглядного представления приведем пример инструкции, в которой они
|сывается процедура выполнения какой-то задачи. Вот пример того, какие дс-ii
ствия следует выполнить.
1. Запустите свой Web-браузер.
2. Зайдите на Web-узел www. tryfreestuff. сот.
Примечание. Этот узел приведен в качестве примера, в действительности <я
не существует.
!3. Щелкните на ссылке, указывающей тип вашего компьютера: Macintosh
PC или Unix.
Ctn/Ufianii[ta книги
Мы писали эту книгу, придерживаясь тщательно разработанного, точного и неизменное
плана, благодаря чему получили прогнозированный результат: он в ваших руках. А компак!
диск? То же самое касается и его.
Подождите секунду... Разве неправда, что Web постоянно изменяется, что новые Web
у:лы появляются, как грибы после дождя, а старые столь же быстро исчезают? Разве можн
в I акой обстановке придерживаться строгого плана?
Да. Возможно, в процессе работы мы несколько изменяли свои планы. Но глобальное ни
правление осталось неизменным. Его результатом явилась следующая структура книги.
Часть I. Создайте Web-страницу сегодня
Вероятно, вы уже хотите попробовать себя в роли Web-издателя. Поэтому сначала мы рас-
скажем о том, что должно быть на Web-узле, затем рассмотрим основы HTML, базового языка
Wcb-страниц, а также определенные инструкции по созданию и размещению простых Web-
страниц. Начать можно с Yandex-Народ, бесплатной службы, доступной для всех пользователей.
Часть II. Создание страниц
Бесплатные, легкие в использовании инструменты, описанные в части 1, хороши только для
начинающих Web-издателей. Вскоре вам захочется воспользоваться какими-то “настоящими”
средствами управления и редактирования Web-страниц. Кроме того, вам захочется обогатить
свою страницу посредством отформатированного текста и ссылок. Для того чтобы пользовате-
лям было легче найти вашу страницу с помощью поисковых машин, в нее следует включить де-
скрипторы МЕТА. Обо всем этом и о многом другом пойдет речь в этой части книги.
Часть III. Быстрее, лучше, привлекательнее
Web-графике посвящено огромное количество книг. Это прекрасно, но обычный человек
вряд ли может “переварить” такой объем информации. В этой части мы расскажем не только
о том, как создавать “дружественную” Web-графику, но и как размещать ее на Web-странице.
Затем речь пойдет о том, как опубликовать Web-страницу так, чтобы ее легко могли найти.
Часть IV. Больше интерактивности!
Большинство Web страниц можно только просматривать. Но лучшие из них являются ин-
терактивными, что делает их более привлекательными для посетителей. В этой части вы уз-
наете, как добавить на свою Web-страницу анимацию, мультимедиа, регистрационную форму
и увеличить ее интерактивность. Кроме того, мы расскажем о том, как расширить простую
Web-страницу, превратив ее в многостраничный Web-узел.
Часть V. Великолепные десятки
Список, состоящий из десяти элементов, является великолепным способом представления
сложной информации в привлекательном и легком для запоминания виде. В данной части
описывается, что следует делать и чего следует избегать при Web-публикации.
Часть VI. Приложения
Обычно приложения к книгам представляют собой незначительные комментарии, кото-
рые можно и не читать. Но в этой книге в приложениях содержится действительно полезная
информация. В приложении А приводится словарь терминов, использующихся при работе
и публикации в Web. Без него вы можете легко запутаться. В остальных приложениях приво-
дится информация о провайдерах Internet, ресурсах для разработки Web-страниц, а также ру-
ководство по использованию прилагаемого к книге компакт-диска.
Лик&ог/ъажжы, используемые в книге
о// <Л Информация, содержащаяся на прилагаемом компакт-диске.
Сведения, которые необходимо иметь в виду в процессе работы.
Предупреждение об эффектах, которые могут привести к увеличению времени за
грузки и отображения страницы.
Необязательная информация.
Информация, которая могла не войти в описанные процедуры или инструкции, но
которая поможет при создании Web-страниц.
Ситуации (помимо медленной загрузки), которые могут привести к проблемам.
Вы, читатель этой книги, и есть главный ее критик и комментатор. Мы ценим ваше мне-
ние и хотим знать, что было сделано нами правильно, что можно было сделать лучше и что
еще вы хотели бы увидеть изданным нами. Нам интересно услышать и любые другие замеча-
ния, которые вам хотелось бы высказать в наш адрес.
Мы ждем ваших комментариев и надеемся на них. Вы можете прислать нам бумажное или
электронное письмо либо просто посетить наш Web-сервер и оставить там свои замечания.
Одним словом, любым удобным для вас способом дайте нам знать, нравится или нет вам эта
книга, а также выскажите свое мнение о том, как сделать наши книги более интересными для вас.
Посылая письмо или сообщение, не забудьте указать название книги и ее авторов, а также
ваш обратный адрес. Мы внимательно ознакомимся с вашим мнением и обязательно учтем
его при отборе и подготовке к изданию последующих книг. Наши координаты:
E-mail:	info@dialektika.com
WWW:	http://vzww.dialektika.com
Адреса для писем:
из России:	115419, Москва, а/я 783
из Украины:	03150, Киев, а/я 152
Часть I
Создайте Web-страницу
сегодня

————————
л рЛ5 пробил ВЛб Hi бнцмиро&АклЬ
огонь НЛ IJAlMiU Wilj-tMpAHUl^t!"
3 atnoii чаапи...
Быстро освойте HTML и создайте простую Web-страницу. Для размеще-
ния Web-страницы воспользуйтесь Web-службами или услугами своего
Internet-провайдера. В качестве награды за труды сообщите друзьям
и коллегам свой Web-адрес.
Глава 1
Основы публикации Web-страниц
Z? эгпбй главе...
г Основы Web
> Web-публикация в стиле для “чайников ”
>	Типы Web-узлов
>	Принципы создания Web-страниц
ZfX eb — это прекрасный способ размещения любых сообщений, адресованных всем
< V заинтересованным в них людям. Разместив свою Web-страницу в Internet, вы смо
жетс общаться со своими друзьями и с родственниками, развлекать людей или найти себе ра
боту. Вы можете начать свой бизнес, развивать его или просто развлекаться.
С момента первого издания этой книги, вышедшего более десяти лет назад, ее приобрели
более полумиллиона людей, и, насколько нам известно, они пользуются абсолютно всеми
описанными в этой книге методиками и успешно создали свои первые Web-страницы. Про
читав эту книгу, вы станете на путь, которым прошли многие достигшие успеха люди, соз
щвшие свои Web-страницы.
Основы Web
Вероятнее всего, вы уже пользовались Internet и Web, не имея ни малейшего представле-
ния о том, как работают эти системы. Знакомство с основами их работы поможет вам достичь
успеха в области Web-публикации. В этой книге дается лишь краткое описание, а более под-
робную информацию на эту тему можно поискать в Web. Начать можно с посещения узла
Консорциума World Wide Web по адресу www.w3 . org.
Знакомство с работой Web
Web, или World Wide Web, представляет собой собрание множества текстовых и графичс
i них файлов, из которых состоят Web-страницы. Основой Web является Internet. Благодаря этой
несмирной сети Web объединяет огромное количество файлов и позволяет людям пользоваться
ими Электронная почта — это отдельная служба, также функционирующая на основе Internet.
Web определяют две спецификации: протокол передачи гипертекста (HTTP) и жык
itxp разметки гипертекста (HTML). Основополагающей идеей Web является гипср
^^4. текст —- текст, содержащий ссылки на другие тексты, хранящиеся на других узлах
Internet. Название Web (“всемирная паутина”) основывается на способе, которым псе
ссылки, подобно паутине гигантского паука, объединяют различные тексты.
11росмогр Web-страниц осуществляется с помощью программы, которая называется Web
I/ /I K/IOM. Для запроса Web-сграницы с Web-сервера Web-браузер использует протокол
III IP Web страница, в свою очередь, использует HTTP для запроса других файлов, например
рафических изображений или рекламных объявлений, размещенных на странице. После за-
ipoca Web-страницы ваш Web-браузер получает составляющие ее файлы от одного или не-
•кольких Web-серверов и собирает эти файлы в одну страницу, которая отображается на ак-
ыне вашего компьютера.
Наиболее популярными Web-браузерами являются Microsoft Internet Explorer, Netscape
Navigator, являющийся частью программного пакета Netscape Communicator, Opera (соот-
нетствующий всем стандартам Web-браузер, владельцем которого является не очень крупная
компания) и Safary, относительно новый браузер для компьютеров Macintosh.
Теперь приходит очередь потрудиться HTML. Каждая Web-страница включает в себя тек-
с1овый файл, написанный в формате, именуемом HTML (Hypertext Markup Language— язык
pa зметки гипертекста), а также, как правило, один или несколько графических файлов. HTML
определяет внешний вид и функциональность Web-страницы. На самом деле HTML не опреде-
ияет однозначно внешний вид Web-страницы. В различных Web-браузерах команды HTML вы-
полняются по-разному. Кроме того, пользователь может самостоятельно указать, как должны вы-
глядеть те или иные элементы страницы на экране его компьютера. Поэтому то, что видит при
просмотре Web-страницы один пользователь, может значительно отличаться от того, что видят
другие. (Подробная информация о HTML будет представлена в главе 3 “Введение в HTML”.)
Разместить Web-страницу в Internet удивительно легко. Если вы очень торопитесь, можете сра-
iy перейти к главе 2 “Публикация в Web: провайдеры Internet и бесплатные службы” и, следуя при-
веденным там инструкциям, уже через несколько часов опубликовагь свою первую Web-страницу.
Как попасть в Web
В этой книге много говорится о Web, но не описываются способы подключения к Сети. Даже если вы уже
пользуетесь Web посредством Internet-соединения, имеющегося у вас на работе, то вполне вероятно,
что у вас может возникнуть желание подключиться к Web из дома. Как же это сделать?
Существует множество компаний, именуемых провайдерами Internet, предоставляющих услуги подклю-
чения к Сети. Некоторые из них предоставляют своим пользователям услуги по размещению Web-стра-
ниц на своих серверах. Помимо этого, имеются Web-службы, посредством которых можно быстро опуб-
ликовать свою Web-страницу (речь об этом пойдет в главе 2 “Публикация в Web: провайдеры Internet и
бесплатные службы”).
Знакомство с URL
Internet представляет собой гигантскую компьютерную сеть, соединяющую другие компью-
терные сети, разбросанные по всему миру. По сути, Internet представляет собой гигантский ме-
ханизм перемещения файлов с одного компьютера на другой. Поиск файлов осуществляется по
адресам, именуемым URL (Uniform Resource Locator— унифицированный указатель информа
ционного ресурса). Не правда ли, от такого названия слегка отдаст армейскими порядками?
Адрес, который вы вводите для получения Web-страницы, и есть URL. Например, URI
издательства “Диалектика” выглядит так: www. dialektika. com. URL состоит из трех час
гей (рис. 1.1).
У Протокол. Это название “коммуникационного” языка, используемого данным
информационным ресурсом: HTTP (используется в Web), FTP, Gopher и др.
J Имя домена. Это имя сервера, на котором находится файл.
С Путь. Сообщает серверу, каким образом следует искать файл, коюрый вы х<>
 тите получить.
-*<— П ротокол —►
http://
-*<— Имя домена —
www.server.com/
Путь ►
folder/filename.ext
Рис. 1.1. Структура UPL
(в)
” I. 2 * * * * 7 Web-термины, которые следует знать
Мы хотим пояснить, что означают некоторые Web-термины.
f Web-страница. Любой текстовый документ, опубликованный на Web-сервере, содержит
дескрипторы HTML, практически всегда включает в свой состав гипертекстовые ссылки и, как
правило, графические изображения. После щелчка на кнопке Назад (Back), расположенной на
панели инструментов Web-браузера, пользователь может переместиться на Web-страницу, которую
он просматривал до перехода по гиперссылке.
✓ Web-узел. Подборка Web-страниц по определенной тематике или созданных с определенной
целью, доступ к которым, как правило, осуществляется с начальной (иногда ее называют домашней)
страницы узла. Некоторые Web-узлы состоят только из начальной страницы. В состав других узлов
входит большое количество страниц.
✓ Начальная (домашняя) страница. Web-страница, которая (по умолчанию) первой открывается на
экране компьютера пользователя, посещающего тот или иной Web-узел. Вы сообщаете пользо-
вателям URL своей начальной страницы и пытаетесь договориться с создателями других Web-
страниц, чтобы они разместили на своих узлах ссылку на ваше творение. Домашняя страница яв-
ляется начальной страницей вашего Web-узла и содержит ссылки на другие материалы, разме-
щенные в пределах узла.
✓ Дескрипторы HTML. Краткие команды форматирования или ссылки, заключаемые в тексте HTML-фай-
ла в угловые скобки. Например, дескриптор <bold> сообщает Web-браузеру о том, что текст, кото-
рый следует после данной команды, необходимо отобразить полужирным начертанием. Дескриптор
</bold> сообщает Web-браузеру о том, что выделение полужирным начертанием следует
прекратить. Более подробная информация о языке HTML представлена в главе 3 "Введение в HTML”.
Web-публикация, в с/пиле для.	4чайников ”
11 «учение этой книги поможет вам стать настоящим Web-издателем. Им может считаться
unuoii пользователь, который разместил в World Wide Web свою домашнюю страницу, пусть
.1 ке самую маленькую и простую. Так что заранее примите наши поздравления!
Размещение Web-страницы проходит в несколько этапов, которые выполняются одинако-
ц|1 независимо от используемых инструментов и технологий. Эти этапы могут по-разному
и.। и.шагься или объединяться друг с другом, но в целом их смысл остается неизменным. Вот
ин вы должны сделать.
I. Создайте текстовый HTML-файл, являющийся основой вашей Web-страницы
(см. главу 4 “Выбор средств”).
2. Создайте или получите графические изображения, которые смогут привлечь
внимание к вашей странице (см. главу 8 “Создание и добавление готовой
। рафики для размещения в Web”).
' < отдайте в текстовом HTML-файле ссылки на изображения так, чтобы послед-
ние появлялись по мере необходимости (см. главу 9 “Правильное размещение
 рафики”).
I. Просмотрите Web-страницу на своем компьютере (см. главу 4 “Выбор средств”).
5.	Найдите место для своей страницы на каком-нибудь Web-сервере (см. главу 11
“Публикация Web-страниц”).
6.	Отправьте текстовый HTML-файл и графические файлы на этот Web-сервер
(также см. главу 11 “Публикация Web-страниц”).
7.	Удостоверьтесь в том, что новая Web-страница функционирует так, как вы за-
планировали (см. главу И “Публикация Web-страниц”).
Как правило, эти шаги просты, если речь идет о создании базовой Web-страницы. Однако
при попытке создания многостраничного Web-узла они существенно усложняются. В этой
книге описываются несколько разных, но простых способов создания Web-страницы, а также
способы превращения Web-страницы в многостраничный Web-узел.
После создания Web-страницы, содержащей сложное форматирование или объеди-
f няющей в себе текст и графику, ее следует протестировать в нескольких популярных
Web-браузерах. В приложении Б указаны Web-адреса, с которых можно загрузить
браузеры Internet Explorer, Netscape Navigator, Opera и др.
В качестве примера хорошо продуманной Web-страницы можете посмотреть на страницу
Web-узла For Dummies (для “чайников”'), показанную на рис. 1.2. Она имеет привлекательный
внешний вид, содержит интересную информацию, ссылки, позволяющие ознакомиться с другой
информацией узла для “чайников" и другими ресурсами. Этот узел имеет привлекательный вид,
но и вы, хорошенько все спланировав и потрудившись, сможете достичь подобных результатов.
В этой книге основное внимание уделяется вопросам помощи в создании простых Web-страниц
и объединении нескольких Web-страниц в тесно связанную ipynny, именуемую Web-узлом.
Рис. 1.2. Домашняя страница узла For Dummies, на которой продемонстрированы превосходные навыки
Web-публикации
Примечание. Данная страница изображена в том виде, в каком она выглядит при про-
смотре посредством одного из наиболее популярных браузеров — Microsoft Internet Explorer.
Для соблюдения целостности стиля при отображении большинства других страниц, описы-
ваемых в этой книге, также будет использоваться Internet Explorer.
Как создать простую Web-страницу
Если вы хотите создать лишь простую индивидуальную или деловую Web-страницу, подтвер-
ждающую факт вашего существования, вам не нужно забираться в дебри HTML, знакомигься
с многочисленными инструментами, искать место на сервере и т.п. В главе 2 “Публикация в Web:
провайдеры Internet и бесплатные службы” описываются способы быстрого и легкого создания
первой Web-страницы с помощью существующих шаблонов или простого HTML-кода.
Просмотр HTML-кода
Когда несколько лет назад Тим Бернерс-Ли (Tim Berners-Lee), сотрудник европейской лаборатории физики
шементарных частиц, изобрел HTML, он, вероятно, не мог себе представить, что познакомиться с его детищем
отчет так много людей. Сегодня в большинстве браузеров имеются команды, позволяющие просматривать
исходный HTML-код, посредством которого страница приобретает определенный внешний вид и “ведет
себя” заданным образом.
Например, команда просмотра исходного HTML-кода в Internet Explorer имеет следующий вид: Вид^
Просмотр HTML-кода (View^Source). Выбрав ее, вы увидите все HTML-дескрипторы,
“ вставляющие” страницу выглядеть и “вести себя” именно так, как это происходит.
Отрыв HTML-файл, вы сможете отредактировать текст и HTML-дескрипторы, сохранить файл и снова
шкрыть его в браузере для того, чтобы посмотреть, как будет выглядеть страница после внесенных
изменений.
111 обы узнать, насколько легко можно разместить страницу в Web, обратитесь к главе 2
11убликация в Web: провайдеры Internet и бесплатные службы” и приступайте к работе. Уже
•|| рс । пару часов вы станете Web-издателем.
Начните с простого
Бесплатные и онлайновые службы, описываемые в этой книге, отличаются друг от друга
нм насколько далеко они позволяют вам зайти в использовании предоставляемых услуг. Ес-
UI наш узел станет слишком большим, если на него будет заходить слишком много посетите-
|| п илы вы захотите использовать его для ведения бизнеса, то некоторые из служб попросят
и и ыплатить за поддержание узла.
I ^следующие главы этой части посвящены рассмотрению вопросов, которые необходимо
шли. для создания первой, простой Web-страницы и размещения ее в Web. В частях II и III
н и. пойдет о том, как “украсить” Web-страницу, разместив на ней графику, добавив ссылки,
и । де г, и. се привлекательной. В части IV мы расскажем о добавлении анимации, о том, как
в 1111. с границу интерактивной и как расширить ее до полноценного Web-узла.
ЗПииы Web-узлов
Н Web можно найти примеры практически любой известной человечеству стратегии об-
м и.। информацией, как успешной, так и не очень. Однако не каждый пример Web-страницы,
пип и нной в Internet, применим к вашей ситуации. Во-первых, Internet-ресурсы разных авто-
I пи । iin.no варьируются Одни размешают па неполнапьылИ	.i..--1—
другие создают крупные узлы для ведения электронной торговли. Во-вторых, существуют
различные типы Web-узлов, а практические навыки, пригодные для создания одного типа уз-
лов, могут быть не вполне применимы для создания других.
Web-страницы можно подразделить на четыре типа: персональные, тематические, коммер-
ческие и развлекательные. В следующих разделах мы рассмотрим некоторые специальные во-
просы создания страниц одного типа, которые не подходят для создания страниц других т ипов.
Заранее определитесь, страницу какого типа вы хотите создать, и поищите подобные ей в Internet.
Персональные узлы
Персональные Web-узлы могут иметь множество предназначений. Очень часто они нацеле-
ны на то, чтобы поделиться информацией о себе со своими сотрудниками, друзьями, родствен-
никами и т.д. Персональные Web-страницы являются великолепным способом найти людей,
разделяющих ваши предпочтения, а также познакомиться с интересами других людей. На пер-
сональном Web-узле можно размещат ь семейные фотографии и репортажи о каких-то событиях.
Тогда ваш узел станет подобным поздравительному письму, которое всегда доходит до адресата
без задержек. На рис. 1.3 изображена начальная страница персонального узла, на котором пред-
ставлены в основном профессиональные, хотя не забыты и личные интересы его владельца.
Рис. 1.3. Пример персонального Web-узла
Процедура создания Web-узла интересна сама по себе и является великолс.. способом
попрактиковаться и приобрести навыки работы в Сети. Но очень часто после со щ.пшя и пуб
ликации Web-узлы долго остаются неизменными. Не следуйте таким примерам и постоянно
Насколько актуальны персональные Web-узлы
Деятельность в Web, о которой мы слышим чаще всего, касается крупных узлов коммерческой,
политической направленности и т.п. Персональные Web-узлы слегка затерялись в этой круговерти,
поскольку основное внимание, как правило, уделяется хорошо финансируемым узлам, принадлежащим
каким-либо организациям. Не беспокойтесь об этом — несмотря ни на что, персональные Web-узлы не
стали менее интересными, а создавать их достаточно легко.
Одной из составляющих, поддерживающих незатухающий интерес к персональным Web-узлам, является
то, что все больше и больше людей во всем мире получают доступ к Web. С каждым днем
увеличивается вероятность того, что посетить и по достоинству оценить ваш узел смогут и ваши друзья,
и родственники, и коллеги. И пусть вас не смущает чрезвычайно высокий рост деловой активности
в Web. Привлекательность персональных узлов не стала меньше, просто такие узлы слабее освещаются
средствами массовой информации.
По мере развития персональных Web-узлов их создатели часто добавляют на них инфор-
мацию по какой-то интересующей их теме. В этом случае страницы могут превратиться в те-
матический Web-узел (речь о таких узлах пойдет ниже). В других случаях создатели Web-
утлов добавляют на них информацию о своей работе и достижениях, что придает узлу ком-
мерческую направленность.
Следуя нескольким простым правилам, вы сможете сделать свой персональный Web-узел
интересным, затратив при этом минимум усилий.
•S На чем акцентировать внимание в первую очередь. В верхней части Web-
страницы, которая первой появляется на экране, следует четко указать основ-
ную идею узла. Если основная идея — это вы сами, то в первую очередь посе-
тители страницы должны увидеть ваше имя, фотографии и ссылки на какие-то
сведения о вас, приведенные на вашем узле. Если узел имеет тематическую
направленность, коммерческий характер или является средством саморекла-
мы, это также следует четко обозначить.
J Создайте простой Web-узел. Будьте скромны и реалистичны в своих задачах
и укажите их на начальной странице узла. Затем создайте перечень элементов,
позволяющих расширить узел. Постарайтесь не запутаться в большом количе-
стве коммерческих и тематических страниц, отражающих ваши желания и ин-
тересы. Для начала лучше создать несколько отдельных страниц, чем один
большой персональный Web-узел.
J Разместите много ссылок. Одним из лучших способов обмена информацией
с людьми, разделяющими ваши интересы, является размещение информации об
узлах, подобных вашему, а также размещение ссылок на книги и другие ресур-
сы. Этот перечень можно разместить на начальной странице или же выделить
для этой цели отдельную страницу, являющуюся частью вашего Web-узла. Если
вы составите хорошо продуманный список ссылок по определенной тематике,
то ваш узел станет весьма привлекательным для многих посетителей.
J Позаботьтесь о конфиденциальности. Web-страница подобна рекламному
щиту, за исключением того, что увидеть ее смогут не несколько тысяч, а нс
сколько миллионов людей. Не размещайте на своей Web-странице информа
цию, которую бы вы не хотели увидеть на рекламном щите. Дважды подумай-
те, прежде чем размещать информацию о своих детях и других членах семьи.
Может быть, вы решили пожертвовать собственной конфиденциальностью,
но нс стоит принимать подобные решения за других людей.
ематические узлы
Тематической Web-страницей называется ресурс по определенной теме. Темой можно
читать область интересов или сферу деятельности группы волонтеров, к которой принадле-
сиг автор, но в этом случае страница может превратиться в нечто подобное коммерческому
злу. (Создание Web-узла для группы пользователей может оказаться вашим огромным вкла-
(ом в общее дело, но иногда это может стать очень трудоемкой работой. Поэтому будьте ос-
ютрительны и подумайте, во что ввязываетесь!) Тематическая Web-страница может быть
освящена любому занятию, делу, предприятию, навязчивой идее или быть воплощением по-
ета фантазии. В этом смысле Web напоминает бесконтрольную прессу, в которой можно го-
зорить о чем угодно. Иногда это приносит положительные плоды, а иногда — не очень.
Получить вторую специальность, заключающуюся в поддержке и расширении тематиче-
кого Web-узла, очень просто, но материальной выгоды от этого нет практически никакой.
11оэтому при создании тематического Web-узла следует принять во внимание следующее.
J Что нужно сделать в первую очередь. Как и в случае с персональной Web-
страницей, на первой странице тематического узла следует указать его назва-
ние и четко пояснить направленность данного узла. Кроме того, следует при-
вести максимально широкий перечень ресурсов по данной теме.
J Не отвлекайтесь. Тематический Web-узел потеряет ценность, если его содержи-
мое начнет выходить за пределы одной темы. Скольким людям из тех, кто разде-
ляет ваш интерес к тайской кухне, будет интересным ваше увлечение кинологией?
Если у вас есть несколько хобби или интересов, которыми вы хотите поделиться
в Web, создайте отдельные Web-страницы, посвященные каждому из них.
J Продумайте план наследования. Если ваш Web-узел разрастется до такой сте-
пени, что вы будете не в состоянии самостоятельно его поддерживать и расши-
рять, найдите себе помощника или преемника. Первым же человеком, к кото-
рому можно обратиться с такой просьбой, будет тот, кто пожалуется, что вы
слишком медленно “развиваете” узел! Определите, какие функции вы можете
и хотите выполнять, и попросите других людей заняться всем остальным.
Коммерческий узел
Разработке и поддержке коммерческих Web-узлов, которые также называют бизнес-
сайтами, уделяется огромное количество времени, энергии и финансов. Коммерческие Web
узлы создаются с использованием всевозможных стилей, поскольку их предназначение, ква-
лификация их создателей и лежащие в их основе ресурсы варьируются очень широко. В дан-
ной книге представлено достаточное количество информации для того, чтобы вы могли соз-
дать “дееспособный” узел, обозначающий ваше присутствие в Web, который состоит из
нескольких страниц и содержит информацию о компании и контактную информацию. Но да
же такие узлы бывают разными, и вам необходимо быть уверенным в том, что страница ва
шей организации разработана безупречно.
На рис. 1.4 представлена домашняя страница компании Netsurfer, разработанная Арту-
ром Бибеком (Arthur Bebak), одним из авторов этой книги. Зайдите на этот узел по адресу
www.netsurf. com/nsd и посмотрите, каким образом реализован его дизайн.
Первый вопрос, связанный с существованием коммерческого Web узла, можно
] сформулировать следующим образом: “Кто сможет иметь доступ к узлу?” Одни yi
Ч/ / лы предназначены для размещения в World Wide Web с доступом 6ei oipaiiiriciniii.
другие защищены паролем или другим средством ограничения доступа, некоторые
II I  XI
посещения извне сети называют “расположенными за брандмауэром”. Любая Wcb-
страница, недоступная для всех посетителей, считается размещенной в интрасети
(если доступ к ней возможен в пределах одной компании) или в экстрасети (если дос-
туп к ней имеют только сотрудники компаний, являющихся деловыми партнерами).
1'ис 1.4. Девизом компании Netsurfer Communications является слоган “More Signal, Less Noise”, что
можно перевести как “Больше дела, меньше шума "
Несмотря на многообразие коммерческих Web-узлов, соблюдение лишь нескольких пра-
»•> । но «юлит создать страницу, отвечающую вашим целям.
Что следует сделать в первую очередь. На коммерческой Web-странице
должно быть указано название вашей компании и четко обозначен род ее дея-
тельности. Кроме того, на узле должны содержаться легко доступная кон-
тактная информация и перечень предоставляемых товаров и (или) услуг.
J Позаботьтесь о привлекательном внешнем виде узла. Сказать человеку
о том, что вам не нравится его Web-узел, равноценно критическому высказы-
ванию о прическе этого человека. Вероятнее всего, он воспримет это с оби-
дой. Но некрасивый Web-узел, как и плохая прическа, могут произвести от-
талкивающее впечатление. Убедитесь в том, что внешний вид вашего Web-
узла отвечает профессиональным стандартам вашей компании.
J Получите разрешение. Если вы не являетесь владельцем компании, получите
• ' )	разрешение разместить страницу компании в таком открытом источнике, как
Web. Кроме того, вы должны быть абсолютно уверены в том, что имеете все
необходимые разрешения на использование на Web-странице той или иной
За брандмауэром или перед ним? Вам необходимо подумать о возможности
доступа к узлу. К примеру, наличие на узле небольшого количества конфи-
денциальной информации повысит его ценность, но не позволит открыть дос-
туп к нему широким кругам посетителей, в том числе и тем, для кого ваш узел
мог бы быть весьма полезным. Кроме того, процедура внедрения элементов
контроля за доступом может оказаться сложной. Продумайте, как защитить
J ваш узел паролем или спросите системного администратора компании, можно
в ли управлять доступом физически. Например, доступ можно ограничить, ос-
новываясь на том, из какой сети посетители подключаются к вашему узлу.
J	Найдите специалистов. Существует большая вероятность того, что другие
|	компании, направление деятельности которых аналогично вашей, или даже
сотрудники вашей компании (если вы работаете в крупной организации) име-
ют Web-узлы аналогичной направленности. Найдите создателей этих узлов
и обратитесь к ним за советом или консультацией.
< J Контролируйте посещаемость. Затраченное время, усилия и деньги должны
приносить отдачу, куда бы они ни направлялись, в зом числе и на создание
Web-узла. Одним из самых важных вопросов, на которые вам придется отве-
тить для того, чтобы принять решение о необходимости поддержки или рас-
ширения Web-узла, является то, как часто он посещается. Определитесь, как
контролировать посещаемость вашего узла. Для начала можно установить
счетчик посещений, который можно бесплатно загрузить, например, с узла
homework777.narod.ru/script.htm или leg-design.narod.ru/
scripts/utilit.htm.
S Найдите дополнительные ресурсы. Основное внимание в данной книге уделе-
но созданию простых Web-страниц и Web-узлов. Для больших Web-узлов необ-
ходим доступ к дополнительной информации, помогающей в планировании
 и поддержке узла. Более подробная информация о планировании и поддержке
коммерческих Web-узлов с “уклоном в сторону маркетинга” представлена
в книге Internet-маркетинг для "чайников”, вышедшей в издательстве “Диалектика”.
Web-узел, явно созданный “на коленке”, а не с помощью профессиональных средств,
будет не слишком эффективно содействовать развитию бизнеса. Однако многие созда-
тели узлов пошли по пути “назад в будущее”, придав своим узлам с помощью гра-
фики простой и понятный внешний вид. Как же решить, каким делать свой узел?
Лучше всего посмотреть, как выглядят узлы конкурирующих организаций, и сделать
так, чтобы ваш узел выглядел ничуть не хуже. И помните, что худшим из всех воз-
можных вариантов является полное отсутствие узла.
Развлекательные узлы
Очень многие люди используют Web исключительно для развлечения, поэтому число уз-
лов развлеказельного характера постоянно растет. В последнее время быстро развиваются уз-
лы юмористической направленности и узлы, поддерживающие многопользовательские игры.
Большие ожидания, которые люди возлагают на узлы развлекательного характера, делают
задачу их создания чрезвычайно ответственной. Ниже приведено несколько советов по соз-
данию развлекательных Web-узлов.
/ С чего не следует начинать. Не начинайте с создания развлеки icui.iioi о уща
Это весьма сложная задача. Сначала попробуйте создать узел армии и.шрав
7*О6Й<
J Обновляйте узел. Насколько смешной кажется шутка, которую слышишь во
второй или в третий раз? Вы должны либо часто обновлять содержимое узла,
либо позволить пользователям обеспечивать страницы содержимым посредством
интерактивной взаимосвязи. Ни один из этих способов не является простым.
i J Используйте самые современные технологии. Основой развлечений явля-
ется интерактивность, что влечет за собой использование не только HTML
и статической графики. Чтобы развлекательный узел был постоянно “свежим"
и интересным, необходимо использовать самые современные Web-технологии.
J Извлекайте идеи из технологий. Сама технология может подсказать вам
свежие и интересные идеи. Попробуйте с помощью Java создать игровую
анимационную программу или воспользуйтесь ActiveX для создания вирту-
альной реальности. (Вопросы, связанные с Java и ActiveX, рассматриваются
в главе 13 “Добавление интерактивных элементов”.)

Пристойна ли ваша страница
большинство Web-издателей, заботясь о репутации своих узлов, стараются не размещать на них
агрессивного содержимого. Размещение на Web-узле сцен сексуального характера или насилия
оттолкнет от него многих посетителей и обеспечит узлу плохую репутацию.
А как быть, если тема вашего узла имеет сексуальную направленность, но содержимое не является
.н рессивным? Тогда пришлите URL своего узла авторам этой книги, чтобы мы могли вынести о вашем
узле собственное суждение. А если серьезно, то постарайтесь, чтобы первая страница предупреждала
посетителей о том, что они могут посчитать содержимое узла отталкивающим. В этом случае они смогут
заблаговременно покинуть узел, не просматривая его содержимое.
Однако даже такого подхода может быть недостаточно. Владельцы некоторых Web-серверов удалят вашу
страницу, если она противоречит принятым правилам. Законы некоторых стран прямо или косвенно
указывают, что может быть представлено на Web-странице. Поэтому перед размещением на своей Web-
i границе сомнительного содержимого обязательно изучите правила и законодательство в этой области.
Цшнципы создания Web-cinfiaHUU,
Web-страница или Web-узел в основе своей являются публикацией, хотя и интерактивной.
I .пи до создания страницы продумать ее некоторые принципы, то созданный узел будет бо-
и-е интересным и полезным для людей, которые его увидят. После создания первоначальной
юмяшней Web-страницы вы можете вернуться к этому разделу, перечитать его и сделать
11|>.тн11цу более интересной и полезной.
Для чего создается страница
11режде чем создавать страницу, спросите себя, зачем вы это делаете? (По мере увеличе-
ния количества работы над узлом ваш ответ может претерпеть значительные изменения.) По-
h. mv вы создаете страницу самостоятельно, а не просите кого-то выполнить эту работу? От
и. । на >тот вопрос поможет вам определить некоторые важные аспекты, касающиеся
. 1|>.1шщы. Ниже описываются наиболее распространенные причины, по которым люди во
ixii'k.iioi себя в процесс создания Web-страницы.
J Для рабсил. Все большему и большему количеству людей приходится созда-
вать Web-страницы и Web-узлы в качестве одной из составляющих их про-
фессиональной деятельности. Например, они могут использовать Web для
общения с людьми внутри и вне компании. Но если вы не планируете стать
профессиональным Web-дизайнером, вам необходимо разумно распредели гь
время, которое вы будете трат ить на разработку страниц, и время, в течение ко-
торого вы будете заниматься выполнением других задач, непосредственно свя-
занных с вашей работой. Будьте скромны в определении своих первоначальных
целей и фиксируйте каждый шаг создания и модификации Web-страниц, что-
бы позднее вы или ваш преемник смогли обратиться к этим записям.
/ Для развлечения. Развлекательные узлы внесли свой вклад в привлечение
к Web внимания широких кругов пользоват елей. Но если вы создаете узел для
развлечения, то время для этого следует выделять только после завершения
другой своей деятельности, например, работы, учебы или общения с друзьями
или родственниками. Поэтому не будьте слишком амбициозны в своих перво-
начальных планах, поскольку для завершения и публикации страницы вам по-
требуется потратить какое-то время.
J Для карьеры. Итак, вы хотите полностью или частично посвятить себя Web-
дизайну или каким-то другим образом сделать Internet или Web частью своей
карьеры. В этом случае вы можете позволить себе планировать создание амбици-
озного Web-узла, в котором будут использоваться сложные технологии, отслежи-
ваться посещаемость и т.п. Для приобретения необходимого опыта начните с соз-
дания Web-страницы, воспользовавшись широко доступными средствами
и подходами, которые описываются в этой книге. Чтобы страница отвечала всем
современным требованиям, используйте более сложные технологии, описанию
которых посвящены другие книга (например, язык JavaScript, описанный в вы-
шедшей в издательстве “Диалектика” книге JavaScript для "чайников”).
J Кто его знает... Кто-то сказал: “Если видишь вилку, валяющуюся на дороге,
подними ее”. У вас может не быть особых причин для создания Web-
страницы, но это не должно вас останавливать. После того как в вашем бага-
же накопится немного опыта работы в Web, такая причина может найтись.
Начните с простого, научитесь основам и продвигай гесь дальше.
Не увлекайтесь внешним видом
Процедура разработки Web-страницы не похожа на разработку публикаций других типов,
поскольку вы не в такой степени можете регулировать внешний вид и “настроение” Web
страниц. Скорость модемов и сетевых соединений, размеры экранов, шрифты и другие пара
метры браузеров столь сильно варьируются, что разные пользователи могуг получить совер
шенно противоположные впечатления об одной и той же Web-странице.
С появлением последних версий HTML внешний вид Web-страниц стал в большей cie
ЦИЭ I пени поддаваться контролю. На сложных Web-узлах, таких как Amazon.com, ис
yJL/ пользуются многие элементы HTML, а также языки программирования, например
JavaScript, за счет чего этот узел стал очень компактным, его дизайн обогатился,
и он стал больше похож на красочный журнал, чем на обычную Web-страницу Од
нако многие элементы последних версий HTML еще не стали стандартом для рат
личных Web-браузеров. В этой книге описывается версия HTML 4.0, которая одина
ково работает практически у всех пользователей Web.
Сделайте конструкцию своей страницы простой и сначала не тратьте на улучшение
внешнего вида слишком много времени. Вы сможете улучшить страницу позднее,
когда больше узнаете о Web-публикации в целом и о людях, пользующихся вашей
страницей, в частности.
Заинтересуйте посетителя
11редставьте себе, что Web является гигантской стопкой журналов, а человек, бродящий
но Web, — посетителем, просматривающим обложки этих журналов. Люди, которые зайдут
и.| ваш узел, будут решать, стоит ли на нем задерживаться, основываясь исключительно на
юм, что они увидят на первой странице.
Ь'ели вашей целью является предоставление информации или ссылок, поместите эту ин-
формацию на первой странице или, в крайнем случае, таким образом, чтобы добраться до нее
можно было с помошью лишь одного щелчка мышью. К примеру, на узле компании необхо-
шмо разместить контактную информацию (название компании, ее адрес, номер телефона
и факса) так, чтобы ее легко можно было найти. Для создания персонального узла, который
<>|.| 1 бы привлекателен для потенциальных работодателей, вверху страницы четко укажите,
и какой области вы являетесь докой, а также сделайте легко доступным свое резюме.
Большие проблемы - для больших узлов
В данной книге основное внимание уделяется потребностям людей, которые своими силами создают
простую Web-страницу или небольшой Web-узел. Над более крупными узлами или узлами, которые
необходимо постоянно изменять или обновлять, работает большее количество людей.
I спи вы хотите создать и поддерживать крупный узел, то в самом начале работы подумайте, какие
ресурсы могут для этого понадобиться. Сколько сотрудников вашей компании или других организаций
оудут заниматься рекламой, связями с общественностью и маркетингом?
Вполне обоснованно вы можете ожидать, что вопросами рекламы, маркетинга и PR для поддержки ва-
шею присутствия в Web будет заниматься какое-то подразделение компании. А как быть с продажами?
I (пи учесть долю транзакций, проводимых через Web, то окажется, что какая-то часть персонала должна
сниматься исключительно ими, стараясь, чтобы эта деятельность стала приносить компании прибыль.
Может быть, ваша компания уже страдает от “прогорания” в Web? Классическими симптомами этого за-
гюлевания являются значительные первоначальные вложения в создание красивого узла, многомесяч-
ные затраты на его поддержку и обновление и последующее указывание пальцем на тех, кто потратил
ис< эти деньги напрасно. Как правило, проблема заключается в том, что никто не продумывает предназ-
начение узла, поэтому никто не занимается поддержкой и дизайном узла с учетом этого пред-
ш| шипения. Часто бывает, что для поддержки и усовершенствования узла компания выделяет слишком
мало людей. Если это произошло в вашей компании, вы будете знать породившие данный факт причины
и i можете установить четкие цели, к которым следует стремиться в своей деятельности в Web.
( амым важным элементом внедрения в бизнес каких-то новых технологий является успешный пилотный
проект. Создавая Web-узел меньшего размера, вы приобретете важные навыки и знания о самых важных
юммерческих потребностях и возможности их реализации посредством Web. Определите свои задачи,
। цюмитесь их реализовывать и фиксируйте свои проблемы и успехи. В результате вы сможете реально
иценивагь необходимость и масштаб дальнейшего вложения ресурсов при увеличении доли Web в дея-
ИЧ1Ы10С1И вашей компании.
11 пи нашей целью является развлечение людей, их обучение или привлечение их внима
.uni к рек 1лме, го на первой странице необходимо произвести на посетителей самое сильное
ши ч.п iciiiie и поддержал, их интерес. На рис. 1.5 изображена Web-страница
1 ini iiDipgci сот. несомненно привлекающая внимание посетителей. Она располагается ио
। ip .blip:, www. gzirdendigger . сот/.
Однако, подобно GardenDigger.com, ваша домашняя страница должна помочь людям, ко-
>рые ищут какую-то интересную информацию. Они, несомненно, зайдут на нее еще раз, но
)лько если во время первого посещения страницы не потратят время напрасно.
wwwJSardenDigger.com.t Троа.чесяме чйе>'» /зм^з-гича
£айл Правка Избранное Сервис Справка
j i *3	6	Поиск	 Избранное *3*
кс'б1  .?^i
“ Г
: < 1 
£3 Переход Ссылки "
Адрес! http://www.<jjrderidigger.rom/
GardenDigger.com
Тропические цветы и экзотические фрукты
Главная * Новости 1 Карта J. О сайте ! Гостевая I
| I Растения
|Виды
Семейства
По группам
। Статьи
I Уход
! Размножение
Рассылки
Subsciibe.Ru
1 Новости сайта
)ваш e-mail
al_____
Добро пожаловать на GardenDigger.com!
Новые виды комнатных растений стремительно
заселяют наши подоконники и лоджии, превращая их в
зеленые островки с яркими тропическими цветами.
Особенно приятно созерцать эти прекрасные творения
Флоры в холодные зимние вечера, когда за окном
ветер и снег. Цветы вносят в нашу жизнь частичку
Природы, а она - великий волшебник. Стоит вдохнуть
нежный аромат, закрыть глаза - и тело начинает
расслабляться, плохое настроение улетучивается, а
губы расплываются в улыбке. Вы когда-нибудь
встречали злого цветовода?
«	Существует множество интересных растений, еще не ставших привычными на наших
GO* >glc подоконниках И чем экзотичнее цветок, тем меньше информации о нем и условиях
------—— содержания. Или скромная подпись: "огромное дерево, цветет только в
естественных условиях" - звучит как приговор. Но многие цветоводы еще и
Поиск,,) экспеоиментаторьг^поэтому порой на подоконнике вырастаетто. что«де в каждом	il
gj Готово	"	-- - -	}	, р <^1 ^интернет
Рис. 1.5. Эта страница, несомненно, привлечет внимание посетителей
Дважды подумайте о времени загрузки
Размещение на страницах большого количества графических элементов отнимает
много времени, которое уходит на поиск хорошей графики и ее надлежащее раз-
мещение. Кроме того, посетители узла потратят много времени на загрузку стра-
ницы. Поэтому для начала используйте точечную графику (маленькие изображе-
ния, которые быстро загружаются). Дважды подумайте, прежде чем размещать на
странице большие интерактивные карты или привлекательные открывающие
графические элементы, подобные тем, что имеются на узлах крупных компаний,
таких как Apple. Если вы не используете открывающую графику, размещайте изо-
бражения размером до 20 Кбайт (подробнее об этом — в главе 8 “Создание и
добавление готовой графики для размещения в Web”).

В компьютерной прессе и даже в крупных газетах и журналах достаточно часто
публикуются статьи, в которых говорится о непрекращающихся попытках ускоре-
ния доступа к узлам для широких кругов пользователей. Но несмотря на все раз-
говоры о кабельных модемах, DSL-линиях и других современных технологиях,
большинство пользователей при доступе к Internet из дома пользуются модемами,
передающими данные со скоростью 56 Кбит/с или более медленными Как правы
ло, организации используют более быстрые соединения. По пому нс обращай ie
внимания на мифы по поводу увеличения скорости подключения к Internet обыч-
ного пользователя — все это очковтирательство. Лучше уделите больше внимания
тому, какое количество информации вы разместите на каждой странице, и перед
публикацией протестируйте время загрузки страниц для разных скоростей соеди-
нений, обеспечиваемых модемами.
Знайте свою аудиторию
В ходе проведенных исследований выяснилось, что большинство пользователей Web знают
английский язык. Следовательно, большинство инструментов для создания Web-страниц
и очень многие We.b-браузеры являются англоязычными. Даже через десять лет после рожде-
ния Web, которое произошло в Швейцарии, Северная Америка является “центром тяготения”
к Web. Эта ситуация постепенно меняется, поскольку в области использования Web к США
начинают подтягиваться и другие страны.
Зачем люди подключаются к Internet? Исследования показывают, что основными причина-
ми, по которым люди используют Web, являются сбор информации, развлечение, образование,
работа, времяпровождение и покупки. Какой из этих целей будет служить ваш узел? Как вы об-
ратитесь к людям, посещающим Сеть? Как вы поможете им найти вашу страницу? Ответы на
эти вопросы помогут увеличить привлекательность и повысить посещаемость вашего узла.
Наконец, выясните, какие типы браузеров наиболее распространены среди пользователей.
Исследования показали, что около 90 процентов пользователей Web пользуются браузером
Microsoft Internet Explorer, а остальные используют Netscape Navigator, Firefox и некоторые
другие. Все эти браузеры обеспечивают отображение графики и таблиц. Кроме того, практи-
чески у всех пользователей функция поддержки графики браузером остается включенной
(хотя это совсем не означает, что они обрадуются длительному ожиданию загрузки большого
изображения — этого нужно сильно захотеть).
Подробная информация о категориях пользователей Internet и их занятиях в Сети содер-
жится во многих книгах и статьях по маркетинговым исследованиям в этой области.
Используйте небольшие текстовые блоки
Всем известна пословица “Краткость — сестра таланта”. Ее вполне можно применить
и к созданию Web-узлов. Если текстовой информации будет немного, то вероятность того,
чю посетители ее прочитают и запомнят, повышается. Поэтому размещайте на своих страни-
цах небольшие блоки текста, в которых мысли излагались бы кратко и понятно.
Не стоит злоупотреблять текстовой информацией, но не следует забывать и о том, что она
является чрезвычайно важной для дизайна Web-страницы. Текстовые блоки должны сооб-
щить как можно больше информации, доступной для пользователя в течение ограниченного
времени просмотра им вашей страницы. Кроме того, вы имеете возможность сбалансировать
основные элементы вашей Web-сграницы: текст, ссылки и графику.
Если вы хотите разместить в Web большие документы, перепишите их, разбив на не-
fAi сколько текстовых блоков. Если эта процедура отнимает слишком много времени и сил,
создайте краткие и понятные текстовые блоки для навигации и вступительные парагра-
фы к большому документу. В большом документе сделайте подзаголовки, которые разби-
вают непрерывный поток текста, а на Web-узле создайте указатели к ключевым облас-
тям всего документа. Без этого пользователи могут не найти интересующие их данные.
Найдите узлы, которые вам нравятся
Ознакомьтесь с узлами, подобными вашему внешне или по предназначению. Что в них хо-
рошего? Что плохого? Воспроизведите успешные элементы, не копируя их, поскольку это будег
трунтспием этических норм и закона об авторских правах. Избегайте неудачных элементов. По
мере развития вашего узла сравнивайте его с другими, найденными ранее, и расширяйте свой
поиск с целью получения дополнительных идей (и ошибок, которые не следует повторять).
Количество оригинальных идей, использующихся в Web. очень невелико, и, в лучшем
случае, ваш первоначальный узел сможет претендовать на реализацию только одного-двух
новых подходов. Все остальное будет повторением элементов, встречавшихся ранее. Не сто-
ит делать так, чтобы ваш узел напоминал пользователям другие страницы, в особенности не-
удачные. (Однако будьте осторожны. Если, глядя на экран компьютера, вы все время будете
заниматься критикой и бросаться тяжелыми предметами, то работа в Internet — не для вас.)
Постоянно совершенствуйте узел
При планировании и последующей реализации Web-страницы у вас, вне всякого сомнения,
останется целый ряд задач, не реализованных в первоначальной версии узла и подлежащих, по
мере возможности, последующему выполнению. Составление перечня предстоящих задач по-
зволит вам избежать стремления создать суперузел с нуля. В этом случае вы просто погрязнете
в процессе создания и никогда не дойдете до этапа публикации своей первой Web-страницы.
Этот перечень является начальным этапом планирования последующих усовершенствований.
Некоторые элементы, помещаемые на Web-узел, никогда не должны терять своей акту-
альности. Например, если на странице вашей компании публикуются ежеквартальные отчеты,
будьте готовы быстро внести обновления сразу же после поступления очередного отчета. Ес-
ли на узле размещен перечень сотрудников компании, не забывайте обновлять его после каж-
дого изменения кадрового состава (если только эти изменения не коснутся вас лично, но это
уже будет проблемой вашего преемника).
Наличие очевидно устаревшей информации на Web-узле является одним из самых
( лучших способов произвести плохое впечатление на посетителя и оттолкнуть его от
у последующих посещений вашего узла.
Вы должны не только обновлять Web-узел, но и избегать использования фразы “Узел на-
ходится в процессе создания” или подобных высказываний с извинениями за то, чего еще нет.
Абсолютно все в Web находится в процессе создания, что является одной из причин, по кото-
рым интерес к Сети столь велик, и фактором, побуждающим к созданию новых страниц.
У вас есть только один шанс произвести первое впечатление, и фраза “Узел находится в про-
цессе создания” будет явно не в вашу пользу.
Оцените свою работу
Перед началом разработки и создания Web-страницы определитесь, что, по вашему мне-
нию, сделает страницу успешной. Для начала будет достаточно разместить в Web какую-то
базовую информацию. В качестве последующих шагов ее необходимо будет детализировать.
Стремитесь ли вы добиться определенного числа посещений узла или привлечь посети! елей
определенного типа? Достаточно ли вам будет только просмотров страницы (количество
раз, которое люди просмотрели ту или иную страницу вашего узла), или вы рассчитываете на
реакцию другого типа (например, отправку вам электронной почты)? Вы хотите создать со-
временный стильный узел посредст вом использования графики и анимации? Но готовы ли вы
тратить время и вкладывать деньги в реализацию этой задачи? Поговорите с людьми, зани
мающимися рекламой и маркетингом, и с людьми, работающими в Web. Постарайтесь по-
стичь смысл целей, которые они ставят, и поймите, каким образом они оценивают успеш-
ность достижения поставленных целей.
Глава 2
Публикация в Web: провайдеры Internet
и бесплатные службы
/3 э/пйй гла£е...
у Какой провайдер является лучшим
> Начните с Web-страницы Yandex.Народ или Yahoo! GeoCities
>	Перед началом работы спланируйте ее
>	Процедура регистрации
>	• Приступаем к созданию Web-страницы
Я Я оставщики услуг Internet, число которых увеличивается с каждым днем, открывают
Д* ворота в мир Web и предлагают свои услуги по размещению Web-страниц пользо-
вателей на своих серверах. В большинстве случаев эта услуга платная, а ее стоимость может
|ависеть как от размеров Web-узла, так и его трафика, в том числе и почтового.
Если вы являетесь новичком в области Web-публикации или не располагаете средствами
шя поддержки своего Web-узла на сервере провайдера Internet, можете воспользоваться бес-
платными Web-службами, такими как Yandex.Народ или Yahoo! GeoCities, которые подробно
описываются далее в этой главе.
Примечание. Диапазон услуг по поддержке Web-ст раниц варьируется в зависимости от
провайдера Internet. В этой главе представлена лишь общая информация по данной теме. Для
получения конкретной информации следует обратиться к интересующему вас провайдеру.
Какой n/to0auqe[i явллейься лцчлиим
Каждый пользователь волен самостоятельно выбрать провайдера Internet, услугами кото
рою он будет пользоваться, а также выбрать диапазон предоставляемых услуг в зависимости
<>| своих потребностей и финансовых возможностей. Заключая договор с провайдером, вы
можете выбрать ограниченный или неограниченный доступ к Internet, возможность поддерж-
ки одного пли нескольких почтовых ящиков и т.п. Некоторые провайдеры для привлечения
к тентов предоставляют им право бесплатного доступа к Internet на определенный период.
I спи вас не устроит количество и качество предоставляемых услуг, вы всегда можете сменим,
провайдера. Прежде чем заключать долгосрочный договор, попробуйте воспользоваться ус
ivi.imh нескольких провайдеров it выбрать того из них, качество и стоимость услу! которою
1ШИЯЮТСЯ для вас оптимальными. Не забывайте вовремя оплачивать услуги провайдеров и oi
к i/Kii гесь от тех служб, которые вам не нужны.
Какого бы провайдера вы ни выбрали, убедитесь, что он предоставляет местный
f (для вашего места проживания) телефонный номер для удаленного доступа к Сети.
В противном случае, помимо оплаты услуг провайдера, вам придется оплачивать
между! ородные телефонные разговоры
При доступе к Internet посредством любого провайдера вы сможете воспользоваться бес-
платными Web-службами (подобными Yandex.Народ или GeoCities, речь о которых пойдет
далее в этой главе и которые предлагают бесплатные средства для создания и размещения
своих Web-сграниц).
Помимо доступа к Internet, поддержки почтового ящика и Web-узлов, многие провайде-
ры предоставляют своим пользователям возможность ведения на своих узлах сетевых бе-
сед'. Чем больше клиентов у данного провайдера, тем интереснее и разнообразнее будут
беседы и тем больше людей сможет оказать вам какую-то поддержку, если в этом возник-
нет необходимость.
Если вы еще не выбрали провайдера Internet, услугами которого хотите воспользоваться,
ниже представлены адреса крупных провайдеров России и Украины (более полный список
провайдеров вы можете найти по адресу www. providers . ru).
<i S РОЛ(http://services.rol.ru/rus/)
; J Global Ukraine (www. gu. net)
Сетевые конференции
Отклики пользователей об услугах тех или иных провайдеров Internet можно найти в многочисленных
сетевых конференциях или группах новостей, где посетители могут обсуждать интересующие их темы.
Web-браузеры часто поддерживают функцию чтения сетевых конференций Usenet, а Internet-
провайдеры, наряду с доступом к Web, предоставляют и доступ к сетевым конференциям. Посетители
конференций размещают сообщения, которые сможет прочитать любой другой пользователь. Прочитав
сообщение, любой посетитель конференции может быстро составить и разместить ответ на
прочитанное сообщение, добавив свою информацию или же вступив в спор с автором.
Процедура подготовки и размещения страницы в Web кажется непростой задачей, и быва-
ет трудно поверить, насколько легко это на самом деле. С помощью бесплатных Web-служб,
которые описываются в данной главе, вы можете создать и разместить свою первую страницу
всего за несколько часов, и причем совершенно бесплатно. Вам не придется разбираться
в тонкостях HTML, и вы не столкнетесь со сложностями при публикации.
Обычно свою страницу можно разместить на Web-сервере провайдера Internet, но сущест-
вует и альтернативная возможность — бесплатная Web-служба, такая как, например,
Yandex.Народ или Yahoo! GeoCities. Эти службы являются наиболее популярными соответ-
ственно среди русскоязычной и англоязычной части пользователей Internet. С момента их
создания число размещенных с их помощью страниц превысило пять миллионов, причем
число это постоянно растет.
Уровень популярности этих служб свидетельствует о том, что ими пользуются как посе-
тители, так и владельцы страниц, желающие разместить их в Web. Кроме того, это означает,
что предлагаемый подход является успешным и заслужил право на длительное существова-
ние. (Существовали и продолжают существовать и другие аналогичные службы, но они либо
исчезают, либо не столь популярны среди пользователей.)
Следуя инструкциям, приведенным в этой главе, вы сможете опубликовать свою Web-
страницу на узле Yandex-Народ или Yahoo! GeoCities. Вы сможете стать Web-издателем го-
раздо раньше, чем многие другие люди, если прямо сейчас начнете думат ь о том, как размес-
тить свое творение в Web.
/пи/ппп /'hr if	(м>г‘/'/Ъ1 tin МИШИН [ItlllMi 'l ПС'1
Начните с Web-OHjiaHUUfot Уаи,с1ех .Hafioq
или Уакоо! Qeo Cities
Размещение персональной Web-страницы подразумевает выполнение нескольких операции.
Многие люди делают это для развлечения. Они получают истинное удовольствие от того, что,
разместив Web-страницу в Internet, смогут поделиться информацией о себе и своих интересах
с другими пользователями Сети. Многие персональные Web-страницы в начале своего сущест
вования были очень простыми, но, постепенно развиваясь, превратились в крупные и популяр
ные Web-узлы, диапазон тем которых чрезвычайно широк. Поскольку число пользователей Ceui
постоянно растет, то возможность увидеть вашу Web-страницу получают все больше и больше
ваших сотрудников, родственников и друзей, а также десятки миллионов незнакомцев.
Кроме того, создание персональной Web-страницы будет очень ценным еще и потому, что
вы получите опыт в области публикации в Web. Пока вы этого не сделаете, то будете считать,
что, возможно, этот процесс таит в себе какие-то непреодолимые сложности. Но после pai
мещения своей первой страницы вы обнаружите, что нет ничего такого, что могло бы вас ос
тановить от повторения этой операции! Успех в создании и размещении первой Web-
страницы распространится на всю вашу дальнейшую работу в Web.
Теперь у вас может появиться ощущение, что начинать следует с создания коммерческого
Web-узла, узла общественной организации или чего-то столь же серьезного. Однако при со i
дании коммерческих и других серьезных узлов возникает ряд проблем.
J “Барьер входа”, если можно применить такой термин из области маркетинга,
для узла организации намного выше, поскольку вы беретесь за сложную зада
чу, требующую участия большого количества людей.
J При создании серьезного узла качество работы играет более важную роль, по-
скольку вы представляете не свои персональные интересы, а крупное предприятие.
В связи с этим возрастает страх неудачи. Кроме того, вы беретесь за дело, не
имея должного опыта, поэтому вам труднее будет добиться чего-нибудь стоящего.
Место на Web-сервсрах для коммерческих узлов предоставляется лишь за
плату. Поэтому еще до начала работы вам следует взвесить все “за” и “против”,
что само по себе является еще одним барьером.
Для начала лучше всего создать простую персональную Web-страницу. Откройте для себя
что-то новое, получите удовольствие и наберитесь опыта для дальнейших амбициозных
свершений. А службы тина Yandex.Народ или Yahoo! GeoCities станут для этого хорошей
стартовой площадкой.
Зайдите на страницу Уапйех.Народ или Yahoo! GeoCities
Чтобы увидеть другие персональные Web-страницы, зайдите на узел Yandex.Hapoд или
i ahoo! GeoCities по адресу
hitp://geocities.yahoo.com
и ап
hi i p://narod.yandex.ru
I la рис. 2.1 изображена начальная страница узла Yandex.Народ. Не волнуйтесь, если на >кра
не своего компьютера вы увидите не совсем то, что изображено на рисунке. Yandex.Народ, как
и ipyriie популярные Web-узлы, часто видоизменяет свою начальную страницу. Даже если ио
upon «ойдег, го инструкции, приведенные в этой главе, все равно останутся в силе.
Рис. 2.1. На Web-узле УапЬех.Народ размещены персональные страницы огромного количества пользователей
Для размещения своей страницы с помощью службы Yandex-Народ вам необходимо заре-
истрироваг ься на узле Yandex. Что касается службы Yahoo! GeoCities, то раньше созданные
юльзователем Web-странины систематизировались в виде так называемых товариществ,
< каждом из которых размещались страницы, посвященные определенным темам. Однако,
юсле того как узел GeoCities стал собственностью Yahoo!, подобная практика прекратилась.
3 настоящее время такую возможность имеют только те пользователи, которые создали свои
:траницы в 1990-х годах. Новые пользователи поучают Web-адрес на основе своей регистра-
ми на узле Yahoo!, произвести которую можно также при первом посещении узла GeoCities.
При размещении страницы на узлах Web-служб ваш Web-адрес будет выглядеть следую-
цим образом: ваше_имя_пользователя.пахой.ru или www.geocities.com/
ваше_имя_пользователя. (Такой адрес будет выглядеть гораздо проще, чем если бы в его
остав входили имя товарищества и определенный номер узла, как это было раньше. Если вы
юсмотрите на существующие Web-страницы GeoCities, то увидите, что во многих из них со-
гержатся громоздкие адреса товариществ.)
При первом посещении узла Yandex.Народ или GeoCities воспользуйтесь функцией поис-
<а и найдите Web-узлы других пользователей. Посмотрите, как сделаны самые простые стра-
шцы и какие усилия предпринимали пользователи для придания им индивидуальности
г дальнейшего развития.
Вырвите страницу шпаргалки (она приведена в конце книги) и приколите ее к стене'
ГЛ1 Несмотря на то что вам не нужно знать HTML, чтобы воспользоваться описывае
мыми в этой главе службами, краткое знакомство с данным языком совсем нс по-
вредит, а, наоборот, поможет сделать вашу первую страницу более привлекательной.
Внимательно просмотрите в шпаргалке перечень дескрипторов, которые помогут
украсить вашу Web-страницу
Следуйте общепринятой практике
Для того чтобы быстро и легко создать простую домашнюю страницу, вы можете вос-
пользоваться инструментами редактирования, предоставляемыми в ваше распоряжения
службами Yandex-Народ и GeoCities. Подробнее ознакомившись с FTP (подробно о нем рис
сказывается в главе 11 “Публикация Web-c границ”), вы сможете создавать и размещать более
сложные страницы и разработать практически любой Web-узел. И если при пользовании
службой GeoCities объем вашего узла не может превышать 15 Мбайт, то на Yandex.Народ ог
раничений по размеру нет вообще! Однако необходимо принимать во внимание следующие
правила, оговариваемые этими службами.
J Не для бизнеса. При использовании услуги бесплатного размещения Web-
страницы нельзя применять ее для коммерческой деятельности или рекламы.
Хотя, конечно, рассказать о своем бизнесе никто не запрещает. Запрещаются
пересылка и распространение материалов в рекламных целях или в целях рас-
пространения той или иной информации при отсутствии у вас для этого за-
конных полномочий. Кроме того, запрещается размещение у себя на узле объ-
ектов интеллектуальной собственности, на которые оформлены авторские
права, если не предоставлено доказательство того, что вы имеете право раз-
мещать указанные объекты интеллектуальной собственности для публичного
доступа. Подробная информация о том, чего нельзя делать, имеется на стра
ницах пользовательского соглашения по адресу
www.yandex.ru/infо/agreement.html
или
http:I/docs.yahoo.com/infо/terms/geoterms.html
✓ lie для непристойностей. Бесплатные Web-службы налагают ограничения на
содержимое страниц. Вы не можете публиковать непристойные, вредные или
оскорбительные сведения. Запрещаются также любая дискредитация или на-
рушение авторских прав. Информация на эту тему также приведена в услови-
ях пользовательского соглашения по указанным выше адресам.
J Ограничения объема. Разместив страницу с помощью службы Yandex-Народ,
вы соглашаетесь с ограничением на объем отдельных файлов в 5 Мбайт (мно-
готомный архив считается одним файлом), хотя общий размер узла не огра
ничивается. (При регистрации выделяется 100 Мбайт, но впоследствии згу
цифру можно увеличить, причем пространство предоставляется автоматиче-
ски, без каких-либо проверок со стороны администрации узла.) А вот при
размещении узла посредством службы GeoCities все ваши файлы не должны
занимать более 15 Мбайт, что состав ляет приблизительно 15 000 страниц тек
ста или 100 больших, в четверть экрана, графических изображений. Для о г
дельных Web-страниц это ограничение не представляет собой никакой про
блемы, поскольку их объем наверняка не превысит указанного. Если ваша
Web-страница со временем превратится в многостраничный Web-узел и or ра
ничения объема станут вызывать головную боль, вы сможете получить место
на диске и другие дополнительные возможности, воспользовавшись бонус-
ными программами, предлагаемыми на узле Yahoo!, описание которых при
водится на домашней странице GeoCities.
•S Передача данных объемом нс более 3 Гбайт в месяц. Объем информации,
выгружаемой вами на свой сайт и загружаемой с него пользователями не
должен превышать 3 Гбайт га месяц, иначе GeoCities приостановит обслужи
вание на некоторое время. Этого максимума вполне достаточно для большин-
ства Web-страниц, но если вы разместите на ней, допустим, файл с видеокли-
пом и его загрузят 300 раз за месяц, то ограничение будет нарушено.
J Отсутствие гарантий. Web-службы не гарантируют, что в будущем будут
продолжать практику бесплатного размещения Web-страниц. (Компании не
дают таких гарантий, чтобы обезопасить себя от каких-либо непредвиденных
случаев в будущем, хотя в ближайшее время ничто не говорит о том, что пре-
доставление бесплатных услуг прекратится.) Если этот неприятный момент
когда-нибудь произойдет или если вы найдете другой подобный узел, который
вам понравится больше, вы всегда сможете отказаться от услуг той службы,
которой пользуетесь в данный момент. А сейчас постарайтесь извлечь макси-
мум пользы из имеющихся возможностей.

Web-инструменты против Web-служб
Инструменты Web-публикации, такие как Netscape Composer, представляют собой программы, с помощью
которых подготавливается содержимое, подлежащее размещению в Web. Службы Web-публикаций— это
вспомогательные средства, выполняющие часть процесса по размещению содержимого в Web, например,
поддерживающие ваши Web-страницы на сервере. Службы Web-публикаций, о которых пойдет речь
в этой главе, также содержат инструменты для диалоговой подготовки Web-страниц, но более важное
значение имеют предоставляемые ими услуги Web-хостинга. Поэтому в дальнейшем они будут
называться службами, а не инструментами.
началом fia^otn&L силана^и/йте ее
Процедура создания и размещения страницы с помощью Web-службы занимает около ча-
•а, что совсем немного! Но даже в этом случае обдумывание некоторых моментов перед на-
шлем работы поможет сделать весь процесс легче, приятнее и эффективнее.
i И Посетите страницы Web-служб. Web-службы оказывают существенную по-
j мощь при создании и размещении вашей первой Web-страннцы, но разве вы не
I хотите посмотреть на страницы других пользователей, прежде чем создавать
I свою собственную? Воспользовавшись средствами поиска и систематизацией
| Web-узлов по категориям, найдите Web-страницы по интересующей вас теме.
I -И Изучите Web-службы в целом, щелкая на ссылках и знакомясь с предла-
а гаемыми услугами. Вы можете узнать много нового о данной службе, прочи-
тав предлагаемые пресс-релизы, условия пользовательского соглашения и т.п.
?	Единственное, чего вы сначала можете не понять, это зачем прилагать столько
'	усилий для предоставления бесплатных услуг. Дело в том, что узлы, подобные
Yandex и Yahoo!, таким образом привлекают пользователей к ряду других своих
г услуг. Кроме того, на поддерживаемых ими страницах они размещают свою рек-
ламу. А это, в свою очередь, означает, что всякий раз, когда кто-то (в том числе
и вы) смотрит на свою Web-страницу, Web-служба зарабатывает немного денег.
? И Выясните адреса своих любимых Wcb-страниц. Многие шаблоны страниц,
предлагаемые GeoCities, позволяют размещать на Web-страницах ссылки на
другие узлы, но для этого необходимо знать их URL. Зайдите на несколько
своих любимых узлов (возможно, ранее вы уже создали для них закладки)
и запишите их названия и адреса URL. (Это лучше сделать заблаговременно,
чем в процессе создания Web-страницы.)
Поищите адреса Web-узлов друзей или коллег. В шаблоне персональной стра-
ницы, создаваемой с помощью службы GeoCities, который будет описываться
в этой главе в качестве примера, есть место для включения описания и адресов от
одного до четырех Web-узлов друзей. Заблаговременно выясните URL этих узлов.
Обдумайте структуру своей Web-сграницы. В текстовом редакторе или на
бумаге набросайте ориентировочную структуру страницы с указанием места
размещения текстовой информации, графических изображений и ссылок. Это
поможет вам побыстрее сориентироваться, когда дело дойдет до фактической
компоновки страницы.
J Отсканируйте фотографии. Фотографии или другие графические изображе-
ния в формате GIF или JPEG следует разместить на жестком диске компьюте-
ра, чтобы в дальнейшем их можно было легко выгрузить на Web-страницу.
В качестве графических изображений можно использовать свои фотографии
или картинки, соответствующие теме вашего узла. Если своими силами вы нс
можете отсканировать фотографии, обратитесь в одну из фотолабораторий,
(имеющих соответствующую аппаратуру и программное обеспечение. Подроб-
но о работе с графикой рассказывается в главе 8 “Создание и добавление
J готовой графики для размещения в Web”.
Щгвцедц/ш [гегис(п[гации
На момент выхода этой книги процедура регистрации в службе Yandex.Народ или
GeoCities может измениться. В этом случае следуйте указаниям, отображаемым на
экране вашего компьютера.
Первым шагом является получение имени пользователя в службе Yandex или Yahoo!. Это
позволит вам не только размещать свои Web-страницы на этих узлах, но и пользоваться ря
дом других служб, в том числе и электронной почтой. Если вы уже зарегистрированы в одной
ш этих служб, например в Yandex, и имеете ID пользователя, то для начала процедуры ис-
пользования службы Yandex.Народ выполните следующие действия.
1.	Откройте свой Web-браузер.
Web-узел Yandex-Народ работает с любым браузером.
2.	Зайдите на страницу narod. yandex. ru.
Откроется страница, аналогичная изображенной на рис. 2.1 или очень похожая на нее.
3.	Если вы зарегистрированы на узле Yandex и уже начали сеанс работы с какой-го
из служб, то в верхней части открывшейся Web-страницы будет указано ваше
имя пользователя (на сленге— логин). В этом случае оставшуюся часть инст-
рукции можно пропустить.
Если вы зарегистрированы на узле Yandex, но еще не начали сеанс работы, вве-
дите свой логин и пароль соответственно в поля Логин в Пароль и щелкните па
кнопке Войти. После этого оставшуюся часть инструкции можете пропустить.
Если вы еще не зарегистрированы на узле Yandex, щелкните на ссылке Регист-
рация, расположенной в левом верхнем начальной страницы Yandex-Народ.
После щелчка на ссылке Регистрация откроется страница Yandex Паспорт (рис. 2.2).
Рис. 2.2. Зарегистрируйтесь на узле Yandex
4.	Введите свой логин и пароль, которыми вы будете пользоваться на узле Yandex.
Повторите ввод пароля.
Вполне вероятно, что имя пользователя, которое вы выберете для использования на
узле Yandex (например, vasya или spartak), уже принадлежит какому-то нользова-
гелю. Чтобы сократить количество попыток задания имени пользователя, введите та-
кое имя, которое имело бы смысл для вас, но при этом было бы уникальным. К приме-
ру, это может быть сочетание имени и фамилии, сопровождаемое годом рождения,
например vasyapupkinl975. Постарайтесь, чтобы это имя легко запоминалось, по-
скольку оно будет фигурировать в URL, вашей страницы на узле Yandex-Народ.
Пароль должен состоять не менее чем из четырех символов и не должен совпадать
с логином.
5.	Введите информацию, которая потребуется для восстановления пароля в случае,
если вы его забудете.
Воспользуйтесь раскрывающимся списком и выберите вопрос, который вам задаст
служба Yandex в случае, если вы забудете пароль. Введите ответ на этот вопрос и свой
адрес электронной почты. (Вводите правильный ответ на выбранный вопрос и. вооб-
ще, всегда говорите правду, тогда вам не придется вспоминать, о чем вы loiiopiiini
другим людям вчера или полгода назад.)
jSELr Для верификации, или восстановления, пароля следует указать другой адрес элск
тронной почты, а не тот, который имеется у вас на узле Yandex. Можете указать ка
кой-то другой личный, или рабочий адрес, или адрес электронной почты своего
друга. Можете зарегистрировать новую учетную запись электронной почты на узле
www.Hotmail. com (еще один популярный ресурс бесплатной электронной почты)
или воспользоваться любой другой из многочисленных бесплатных почтовых служб
6.	Введите цифры, указанные на экране. Этот шаг предпринимается для того, чтобы
убедиться в том, что анкету регистрации заполняет реальный человек, а не про
грамма-робот.
7.	Если вы хотите прочитать условия пользовательского соглашения и информа-
цию об обеспечении конфиденциальности при использовании служб Yandex,
щелкните правой кнопкой мыши на соответствующей ссылке, чтобы открыть се
в новом окне.
Если щелкнугь на ссылке левой кнопкой мыши, то соответствующая страница откро
ется в этом же окне браузера и заменит собой его предыдущее содержимое. Если вы,
прочитав соглашение, решите вернуться на страницу регистрации и щелкнете на кноп
ке Назад своего браузера, то обнаружите, что вводимые вами данные могли исчезнуп..
Если вы совершили эту (весьма распространенную) ошибку, повторите шага 4—6.
После щелчка на кнопке ОК вы попадете на новую страницу, которая называется
Дополнительная информация. При желании заполните соответствующие поля
и щелкните на кнопке Добавить. На этом процедура регистрации завершается.
Конфиденциальность на Yandex
Условие конфиденциальности распространяется на всю ту информацию, которую Yandex может
получить о пользователе во время его пребывания на узлах (службах) и которая в принципе может быть
соотнесена с данным конкретным пользователем. Это соглашение распространяется также и на узлы-
партнеры службы Yandex.
Получение и использование персональной информации. Yandex получает персональную инфор-
мацию о вас при регистрации в качестве пользователя этой службы, при использовании некоторых
вспомогательных служб или продуктов, когда вы находитесь на узлах Yandex, а также в случае
использования услуг партнерских компаний. При регистрации на Yandex запрашиваются ваше имя
и фамилия, а также ряд дополнительных (необязательных) данных. Все эти данные могут понадобиться
для восстановления доступа в случае, если вы забыли пароль. Также запрашивается адрес
электронной почты (e-mail), который нужен для быстрого и безопасного восстановления пароля или
для того, чтобы администрация Yandex могла связаться с вами в экстренных случаях (например,
перед аннулировании регистрации при ее фактическом неиспользовании). Этот адрес никогда не
будет использоваться Yandex ни для каких рассылок, кроме тех, на которые вы явно подпишетесь.
J Использование и раскрытие персональной информации. Yandex никому не продает и не разгла
шает персональную информацию о пользователях, за исключением случаев, оговариваемых законо
дательством.
✓ Файлы “cookie”. Yandex может записывать файлы “cookie" на компьютер пользователя и впо-
следствии использовать их. Yandex позволяет некоторым компаниям, партнерам или рекламным
службам использовать cookie в собственных проектах. В то же время Yandex гарантирует, что
ни одна рекламная служба не имеет доступа к cookie-файлам, которые используются службой
Yandex в своих проектах.
J Возможность редактировать и удалять информацию и персональные настройки. Yandex
предоставляет пользователям возможность в любой момент изменить свою персональную инфор-
мацию или персональные настройки.
J Безопасность. Доступ к личной информации о пользователе Yandex или к его персональным
настройкам защищен паролем.
Tlftucfni/naeM к созданию Web-ctnfiaHUUjbt
После регистрации в службе Yandex или GeoCities можно приступать к созданию своей
вой Web-страницы.
издание Web-страницы на Yandex
Откройте страницу www.narod.yandex.ru (см. рис. 2.1) и выполните приведенную
1же последовательность действий.
1.	В соответствующие поля введите логин и пароль, которые вы используете для
служб Yandex, и щелкните на кнопке Войти.
После регистрации на узле Yandex вам предоставляется домашняя страница с URL
Bame_MMH_nonb3OBaTenH.narod. ru. А теперь пришло время попрактиковаться.
2.	После щелчка на кнопке Войти откроется страница под названием Мастерская,
где можно сразу приступить к созданию узла.
В левой части страницы Мастерская выберите тему для вашей первой страницы, на-
пример Про меня, Фотоальбом или какую-нибудь другую. Щелкните на соответст-
вующей ссылке.
3.	Выберите вариант шаблона, который наиболее полно отвечает вашим требова-
ниям. Для этого установите переключатель в соответствующее положение.
В текстовом поле введите имя файла данной страницы. Если вы хотите, чтобы эта
страница была главной страницей вашего узла, введите имя файла index.

При роботе с шаблоном Фотоальбом постарайтесь не размещать на одной странице
слишком много фотографий (картинок). Лучше сделать несколько страничек и свя-
зать их друг с другом ссылками. Фотографии, размещаемые на странице, не должны
быть громоздкими — желательно, чтобы их размер не превышал 50-100 Кбайт.
4.	Щелкните на кнопке Дальше.
5.	Создайте первую страницу.
Заполните простую форму, поместив в нее текст, фотографии или изображения.
6.	Щелкните на кнопке Готово.
Страница создана! Точно так же можно подготовить и другие страницы вашего узла.
7.	Сделайте узел популярным.
Добавьте гостевую книгу, персональный чат и форум, чтобы общаться с посетителями.
Разместите узел в тематическом каталоге узла Yandex.Народ, напишите интригующую
аннотацию. Это заставит счетчик посещений на вашем узле крутиться веселее.
Создание Web-страницы на GeoCities
1.	В области GeoCities Free Web Hosting щелкните на кнопке Sign up.
Вы бесплатно получите домашнюю страницу с адресом www.geocities.com/
ваше_имя_пользователя. Впоследствии вы сможете воспользоваться одной из
платных служб, а сейчас мы уделим внимание бесплатным возможностям.
После щелчка на кнопке Sign Up откроется страница с приветствием. На ней вновь
нужно отыскать ссылку Sign Up, если вы еще не были зарегистрированы в какой-то
другой службе Yahoo! (она находится в правом нижнем углу страницы), если были —
нужно ввести в полях области Sign in to Yahoo! свои пользовательские имя и пароль.
2.	В окне с формой, открывшемся после щелчка на кнопке Sign Up, заполните не-
сколько полей (рис. 2.3). Те из них, которые обязательны для заполнения, отмечены
звездочкой (*), заполнять поля нужно латиницей. Выбрать пользовательское имя
(идентификатор пользователя, ID) будет непросто— на Yahoo! зарегистрированы
миллионы, так что вероятность совпадения очень велика.
Рис. 2.3. Поля, отмеченные звездочкой, должны быть обязательно заполнены
3.	Чтобы убедиться в том, что выбранное имя еще не занято, щелкните на кнопке
Check Availability of This ID. После того как вы получите приветствие типа
Congratulations, the ID Ваше_имя_пользователя is available!, можно завершать
тполнение полей формы, затем следует щелкнуть на кнопке I Agree (и согласиться тем
самым с условиями использования вашей будущей Web-страницы). После того как все
буде т сделано правильно, откроется страница с приветствием.
4.	Щелкните в нижней части страницы с приветствием на кнопке Continue to
Yahoo! GeoCities. Откроется страница с формой, в которой вам нужно будет указа! ь,
Web-страницу какого типа вы собираетесь создать. Возможные положения переклю-
чателя следующие: Personal (персональная). Family (семейная) Association/club/team
(ассоциации/клуба/команды), Education (образовательная), Nonprofit organization
(некоммерческой организации), Small business (малого бизнеса). Второй переключа-
тель желательно установить в положение, указывающее, откуда вы получили инфор-
мацию о Yahoo! GeoCities.
5.	Щелкните на кнопке Submit Откроется Web-страница с приветствием (рис. 2.4).
Обратите внимание: в ее левом верхнем углу указано ваше имя пользователя, а в пра-
вом верхнем углу— URL вашей Web-страницы. Чтобы создать свою Web-страницу,
выполните действия, приведенные в следующем подразделе.

Файл Правка §мд Избранное Ссрвк Справка
Назад *	„	;	% Поиск  Избранное
Адрес; http: //geocities.yahoo.com/
Yahoo» - .Account Info - Help - Sign Out
IfAHoOFGeo it; ' Э
California Starting a
Business
fbnusa corn
Start Your Own Business
Idea
wsicorporate corn
Start Ymi« Own Business
Idea
libertyta/franchise com
Starting Yeur Own
Business Information
ww auction-ittoday com
Welcome. vla<lgusyev_22	lrt^J/www.ggocities.ronr--vladgt№>(!By 22
Upgrade to an AdJtee site start ьу «earthing
Setup fee Waived!	fora domain name
» WWW.1
^Wcb Sih» Account*
* geocities.carn/vladgusyev_22
[ Add Mew Service
My Sei vice
View My Site -
iiwwufiepcftj&s.c&mAilaftgusvev 22
пф Готово
Build My Web Site
Creating web pages is easy with these popular tools..
jX' yahoo? PaqeWizards - >.
\ Build a personal home page quickly with this simple,
step-by-step method. Try it!
Yahoo! PaqeBuildei
MV) Design and customize pages easily with this powerful
and full-featured editor. Try it!
Search GeoCities Help
Advanced Toolbox
Интернет
Рис. 2.4. Наконец-то можно приступить к созданию Web-страницы!
Использование мастера создания Web-страницы
Для быстрого и легкого создания начальной Web-страницы в GeoCities недавно была вве-
дена новая функция, Yahoo! PageWizards (Мастер создания страниц), благодаря которой вы
сможете быстро создать страницу с нуля.
в отличие от других инструментов создания Web-страниц, при использовании мае
тера Yahoo! вы не сможете вводить в текст HTML-дескрипторы. Однако позднее,
при редактировании документа, у вас будет возможность добавить нужные HTMI
дескрипторы (их использованию посвящена часть II данной книги).
Yah за! QeoCtfie»
Для того чтобы быстро создать первоначальную Web-страницу с помощью мастера
Yahoo!, выполните следующие действия.
1.	Зарегистрируйтесь на начальной странице узла GeoCities (www.geocities.com),
а затем щелкните на ссылке Yahoo! PageWizards.
Если вы до сих пор не зарегистрированы как пользователь служб Yahoo!, вам приденя
сделать это сейчас. Для этого прочитайте инструкцию по регистрации, приведенную
в начале этой главы.
Если вы являетесь зарегистрированным пользователем, на экране откроется страница
Yahoo! PageWizards (рис. 2.5).
Yahoo* GeoOties - Micro* Л itftegv* €x^«1r-r
файл Правка Вид Избранное Сервис Справка
Назад -г	!
Поиск Избранное	*	’	.... ...
J Переход Ссылки

Yahoo! - Account Info - Help - Sign Out
California - Starting a
Business
Start Your Own Online
Business
Business to Start - Online	Marketing Home Business
Franchise	Opportunity
•> sicorporaie corn
w«v out2 corn
www oneyearplan net
Welcome, vtad<jusyev_22
httpLVwww.qeodties.coin, vladqiisyev 22
3eedlk%.c'>mMa.<gutycv 22
G?uCitia« F*e^
Home > PageWizards
ml Yahoo! PageWizards
jgeWizards are a fun and fast way to make cool web pages. Just answer a few Get 330+ web site templates with
questions and build a professional-looking web page in minutes.	Yahoo! SiteBuilder. Upgrade Now
Quick Start - Eight designs to choose from and just four easy steps
More Templates..
______________________________________________________ d
1 utobo	,j	> Интернет
I'm 2.5. Вы готовы к работе с мастером создания Web-страниц?
2.	Выберите один из предлагаемых шаблонов.
Шаблоны часто меняются — никому не хочется, чтобы его страница была похожа на
тысячи других. Как правило, предлагаются шаблоны следующих типов.
•	Quick Start (быстрый старт). Группа шаблонов страниц, содержащих практически
одинаковую информацию, но различающихся по своему внешнему виду.
•	Sanrio Themes (художественные темы). В этих шаблонах содержится охраняемая
авторскими правами мультипликационная графика. Такой шаблон превосходно но
дойдет для детей.
*	Popular Themes (популярные темы). Один из этих шаблонов поможет вам сот
1.111, с траничку с описанием праздничного мероприятия или страницу, посвящен
ную юбиляру (либо просто друзу, у которого скоро день рождения). Здесь же вы
найдете (скорее всего) шаблон Personal Page (Персональная страница). Именно
его мы и выбрали для дальнейшего описания.
3.	Щелкните на ссылке Personal Page (Персональная страница).
В данном случае мы описываем работу с мастером Personal Page Wizard. Если вы ре-
шите выбрать другой мастер, то для создания страницы с его помощью необходимо
выполнить в основном те же действия, что описаны в данной инструкции, но с отли-
чиями вам придется разобраться самостоятельно.
4.	На открывшейся странице Yahoo! Personal PageWizard выберите один из шаб-
лонов (они различаются только цветом окантовки) и щелкните на соответст-
вующей ссылке. Откроется страница Build Your Personal Page (Создайте персо-
нальную страницу), аналогичная приведенной на рис. 2.6.
В ее левой части будут показаны шесть областей, которые вы сможете настроить по
своему усмотрению, — ваше имя, адрес электронной почты, фотография (вместо ко-
торой можно оставить изображение человечка) или другая картинка, краткое описание
ваших хобби и интересов, перечень любимых ссылок (до четырех), а также перечень
ссылок на страницы друзей и родственников.
5.	Щелкните на кнопке Begin (Начать).
На открывшейся странице вы сможете изменить фоновый цвет своей страницы
(зеленый, синий, желтый или розовый).
6.	Выберите цвет и щелкните на кнопке Next (Далее).
Теперь можно приступить к фактическому созданию страницы. О том, как это сделать,
вы узнаете в следующем разделе.
http:/,'wizards.yahooxom - Yahoo! Personal Pag»- • •i ' > d

Й Build your Personal Page	ж Fe^aa
Copyright ©2005 Yahoo! inc.
All Rights Reserved.
Welcome to Yahoo! Wizards
Yahool Wizards will walk you through 6 simple steps to build
your own Personal Page. This should only take you about 5 to 10
minutes.
If you choose to skip a step, the section will be removed from
your page.
Click the "Begin" button below to start building your page.
Рис. 2.6. Шесть пунктов, шесть минут - и одна начальная страница готова1
Шесть шагов к успеху
После запуска мастера создания Web-страницы (см. предыдущий раздел) вы будете всего
лишь в шести шагах от владения собственной Web-страницей. Давайте пройдем этот путь.
1.	Введите свое имя и адрес электронной почты, которые будут отображаться на
Web-странице, и щелкните на кнопке Next.
Если вы не хотите размещать на Web-странице свой рабочий или персональный ад-
ЛЛ рес электронной почты (откуда он может быть скопирован в списки спаммеров), за-
регистрируйтесь в одной из служб, предоставляющих бесплатный почтовый ящик
(например, mail.yahoo.com), и укажите на своей странице этот адрес. Если вы
создали новый почтовый ящик, не забывайте время от времени заглядывать в него.
На любом этапе работы мастера вы можете просмотреть создаваемую страницу. Для
этого достаточно найти кнопку Preview (Предварительный просмотр) и щелкнуть на
ней. После просмотра страницы закройте экран предварительного просмотра (будьте
внимательны и не закройте случайно страницу мастера).
После щелчка на кнопке Next откроется страница Pick Your Picture (Выбор изобра-
жения).
2.	Выберите изображение (вы можете выбрать свою картинку, оставить изображе-
ние человечка или вообще обойтись без рисунка) и щелкните на кнопке Next.
Если вы хотите выгрузить на страницу картинку, выберите ее файл на жестком диске
своего компьютера. Вы можете использовать такие графические форматы для Win-
dows: .jpg (JPEG), .gif (GIF), .tif (TIFF), .bmp (Windows Bitmap) или .png
(переносимая сетевая графика). Подробно об этих форматах и о получении изображе
ний речь идет в главе 8 “Создание и добавление готовой графики для размещения в Web”.
После выгрузки одного или нескольких изображений их можно будет выбрать в рас-
крывающемся меню Pick from GeoCities.
Не публикуйте на своей Web-странице изображения, на которые у вас нет прав. Нет
~\ смысла затевать судебные разбирательства.
После щелчка на кнопке Next откроется страница Describe Yourself (Опишите себя).
3.	Под заголовком About me (О себе) введите какую-то информацию о себе, а под
заголовком Hobbies and Interests (Хобби и интересы) перечислите свои при-
страстия. После этого щелкните на кнопке Next.
Описывая себя, не указывайте свои хобби и интересы, поскольку для этого выделено
(отдельное место. Вы можете рассказать, где родились и живете, какой работой за
“ / нимаетесь и т.п. Не давайте слишком подробной личной информации, поскольку сю
могут воспользоваться аферисты.
В текстовом поле Hobbies and Interests введите краткую, но интересную информацию.
Ваши хобби и интересы могут оказаться столь же уникальными, как и отпечатки пальцев.
После щелчка на кнопке Next откроется страница Enter your favorite links (Введите
свои любимые ссылки).
4.	Введите URL и краткие описания своих любимых Web-узлов и щелкните на
кнопке Next.
Введите несколько ссылок па свои любимые Web-узлы. Не беспокойтесь о том, что
пока что вы не можете ввести много ссылок. Во-первых, ссылки можно менять, а во-
вторых, их можно будет добавить с помощью других средств.
После щелчка на кнопке Next откроется страница Describe Your Friends and Family
(Расскажите о своей семье и друзьях).
5.	Введите текстовое описание своей семьи и друзей и щелкните на кнопке Next.
Расскажите что-нибудь о своей семье, предках, супруге и детях. Упомяните о всех
родственниках, у которых есть своя Web-страница (на которую можно разместить
ссылку), или о тех, кто особенно обрадуется, увидев свое имя в Web (в первую очередь
это относится к детям).
Всегда помните об аферистах и не размещайте слишком подробную информацию.
После щелчка на кнопке Next откроется страница Enter your friends and family links
(Введите ссылки на страницы друзей и родственников).
6.	Введите ссылки на Web-сграницы друзей и (или) родственников и щелкните на
кнопке Next.
Если ни у кого из ваших друзей или родственников нет своей Web-страницы, поля для
ввода ссылок можно не заполнять.
После щелчка на кнопке Next откроется страница Name your page (Присвойте имя
странице).
7.	Введите имя своей страницы и щелкните на кнопке Next.
Введенное имя станет частью адреса вашей Web-страницы. Например, если созданной
странице присвоить имя biography.html, то ее полный адрес будет выглядеть следую-
щим образом: www.geocities.сот/ваше_имя_по.льзовате.ля7Ь1одгарЬ.у.html.
Поэтому присваиваемые имена лучше делать краткими и несущими смысловую нагрузку.
°с Если вы хотите, чтобы созданная страница была для вашего узла начальной, при
свойте ей имя index, html. (Это совсем неплохая идея. Если сделать так, то для
открытия вашей страницы достаточно будет ввести более короткий адрес:
www.geocities . сот/ваше_имя_пользователя. Если вы только что присвои-
ли своей странице другое имя, щелкните на кнопке Back и измените его на index).
При необходимости вы всегда сможете переименовать страницу и переместить ее
в другое место узла.
После щелчка на кнопке Next откроется страница с поздравлением.
8.	Щелкните на ссылке с адресом своей Web-страницы (она представлена на жел-
том фоне).
Созданная вами страница откроется в окне браузера, как показано на рис. 2.7.
9.	Запишите или каким-то другим образом сохраните свой Web-адрес (например,
добавьте его в одну из папок меню Избранное своего браузера), а затем верни-
тесь к окну мастера и щелкните на кнопке Done (Готово).
| х' Впоследствии вы, вероятно, захотите улучшить свою Web-страницу, но для
начала вы сделали большой шаг. Информация о том, как можно усовершенс i
вовать свою Web-страницу, приводится в главе 4 “Выбор средств’’. Л сейчас
сообщите свой новый Web-адрес всем друзьям и отправляй ieci> па заслужен
ный отдых!
Рис. 2.7. Ура! Теперь у меня есть своя Web-страница!
Глава 3
Введение в HTML
эЛой главе...
т Краткий обзор HTML
> Практичность HTML
> Создание Web-страницы с HTML-дескрипторами
нание основ HTML будет для вас очень полезным. HTML — это код, который объеди-
няет текстовое содержимое вашей Web-страницы с графикой и ссылками, а также оп-
ределяет внешний вид страницы в Web-браузере. Зная основы HTML, вы будете понимать,
почему Web-страницы выглядят и “ведут себя” тем или иным образом. Кроме того, вы будете
знать, что нужно сделать для создания и усовершенствования Web-страницы.
Зачем изучать основы HTML
Все больше и больше инструментов разработки Web-страниц стараются скрыть HTML от пользователя.
С помощью одного из таких инструментов вы сможете создать Web-страницу, ничего не зная о HTML.
Однако существует ряд причин, по которым следует изучить основы этого языка.
J Потому что так поступают другие люди. Это не аргумент. Дальше!
J Чтобы понять, как функционирует Web. Понимание данного факта особенно ценно, если вы
планируете много работать в Web, а тем более, если хотите заниматься публикацией Web-страниц.
Некоторые концепции Web (например, “то, что вы видите, это не то, что вы получаете") трудно
понять, ничего не зная о HTML.
J Чтобы пользоваться бесплатными Web-инструментами. Многие бесплатные Web-инструменты
позволяют непосредственно вводить HTML-дескрипторы для “оживления” текстового содержимого
страницы. В связи с этим лучше знать побольше всяких дескрипторов.
J Чтобы работать непосредственно с HTML-кодом. Некоторые пользователи устали вводить HTML-
дескрипторы вручную и пользуются инструментами, избавляющими от такой работы. Другие
остаются безгранично преданными HTML, хотя время от времени выражают свое недовольство им.
Однако единственный способ иметь какой-то выбор заключается в изучении HTML.
J Чтобы делать свою работу лучше. При использовании инструмента, скрывающего подробности
HTML, преимущество получают те пользователи, которые знают предмет в достаточной степени для
того, чтобы понять, что происходит “за кулисами”. Практически все инструменты, скрывающие
HTML, можно переключить в режим отображения кода и по мере необходимости работать
непосредственно с ним.
Не пытайтесь сразу же освоить HTML в полном объеме. Если вы потратите слишком много
времени, изучая HTML, то это, скорее всего, несколько замедлит процесс вашего превращения
в Web-издателя. Вы ведь хотите стать им быстро, не правда ли? Поэтому постарайтесь найти ра
(умный компромисс. Воспользуйтесь этой главой для приобретения таких познаний в области
1П ML, которых было бы достаточно для создания первых Web-страниц и их pa(мешения в ( ет и.
К/ш/пкий о&зо[г /£ЛМ£
HTML (язык гипертекстовой разметки, или язык разметки гипертекста) является способом
убавления описательных дескрипторов к обычному тексту таким образом, чтобы все эле-
менты форматирования, ссылок и навигационных данных, которые должны быть на Web-
с । ранице, содержались в том же файле, что и обычный текст. HTML разработан таким обра-
<ом, что он доступен как для прочтения людьми, так и для обработки компьютерами, т.е. он
является основой взаимодействия компьютеров и людей.
Предположим, что к какому-то слову текста вы хотите применить полужирное начерта-
ние, например:
ll'l’ML можно использовать для выделения слова полужирным начертанием.
Для форматирования слова или предложения с помощью HTML необходимо заключить
ci о между дескрипторами, указывающими, где следует начать и закончить полужирное на-
чертание. На языке HTML приведенная выше строка будет выглядеть следующим образом:
HTML можно использовать для выделения слова <Ь>полужирньш
1чертанием</Ь>.
При отображении в Web-браузере слова или предложения, заключенного между HTML-
II скрипгорами, будет отображено только это слово, а не дескрипторы (символы, заключен-
ные в угловые скобки). Web-браузер использует дескрипторы для проведения каких-то мани-
и\ 1яций с текстом, например для его форматирования. В данном случае форматирование
очень простое. Браузеру дается команда: “начать применение полужирного начертания после
। иона “слова” и закончить его после слова “начертанием”.
11оскольку HTML-дескрипторы сосуществую! вместе с текстом, который видят пользова-
н ни на вашей Web-странице, то документ с HTML-дескрипторами называют текстом
HTML-разметкой. Это означает, что в документе наряду с текстом содержатся HTML-
пч крипторы. Файл, содержащий текст с HTML-разметкой, называется HTML-файлом. Как
правило, он имеет расширение .htm или .html, которое стоит после его имени. При про-
мо । ре документа с HTML-разметкой в программе редактирования текстов вы увидите угло-
1ч.к с кобки и HTML-команды. При просмотре этого же документа в Web-браузере вы увидите
«иформатированный текст, ссылки и т.п.
Документ без форматирования (курсива и т.п.) называют обычным текстовым докумен-
ты В документах Word, не являющихся обычными текстовыми документами, имеются до-
ли тигельные встроенные коды форматирования, которые указывают компьютерам, каким
 »>p.i <ом следует отображать и распечатывать текст.
'(обавлять к обычному тексту HTML-дескриторы для создания Web-документов можно
и побом текстовом редакторе. Кроме того, можно воспользоваться инструментом Web-
|и i.iK гирования, скрывающим HTML-дескрипторы.
В мой главе приводится достаточное количество информации о том, что вы увидите при
присмотре текста, содержащего HTML-дескрипторы, и о том, каким образом при необходи-
ма tn следует вносить изменения в текст с HTML-разметкой. Мы не будем приводить сотни
ip.nuiH с описанием HTML-дескрипторов и докучать вам советами по их применению. Не-
>11411,10 технические подробности вы можете прочитать во врезке “Версии HTML”. После
пч<>>111к.1Н11и нескольких Web-страниц вы можете уделить некоторое время более подробному
и и чснию HTML и купить себе какую-нибудь толстую книгу по этой теме.
Б.сли вы хотите подробнее разобраться в предмете до того как засучив рукава, при-
|	| пупите к работе, начните с книги Язык HTML. Самоучитель, выпущенной изда-
icjii.CTBOM “Диалектика”.
Просмотр HTML-документов
11росмотреть HTML-код при работе в Web можно в любой момент. Для этого достаточно
открыть нужную страницу в браузере и выбрать команду Вид^Просмотр HTML-кода (в In-
ternet Explorer) или аналогичную команду других браузеров, чтобы открылось новое окно, со-
держимым которого будет исходный HTML-код данной Web-страницы. На рис. 3.1 в качест-
ве примера изображена начальная страница узла For Dummies, поверх которой расположено
окно с ее исходным HTML-кодом.
Рис. 3.1. Узел For Dummies состоит из текста с HTML-разметкой и графики
Версии HTML
HTML — это язык разметки, соблюдающий правила, изложенные в более сложной спецификации — SGML
(Standard Generalized Markup Language — стандартный обобщенный язык разметки), В настоящее время
широкое распространение получила версия HTML 4, которую поддерживает большинство (хотя и не все)
браузеров и инструментов создания Web-узлов. Многие пользователи никогда не обновляют версию
браузера, с которой они начинали свою работу, поэтому многие старые версии программ используются
и по сей день. Некоторые браузеры подключаются к Сети посредством устройств, подобных Web TV,
которые не поддерживают современные функции, такие как фреймы и динамический HTML (DHTML).
Для того чтобы вашу Web-страницу могли просматривать как можно больше посетителей, продолжайте
использовать и старые дескрипторы, которые поддерживались в HTML 3.2 и более старых версиях
Практически все возможности, описанные в данной книге, поддерживаются в ранних версиях HTML Мы
отдельно их укажем, когда речь пойдет о более современных функциях и элементах.
Из возможности немедленного просмотра HTML-кода какого-либо документа проистека-
ет естественная попытка позаимствовать привлекательные Web-страницы, сохранить их на
(иске в виде HTML-файлов и использовать в качестве шаблонов для своей работы. Это по-
хоже на поведение сороки, которая тащит все, что блестит.

Изучение HTML-сценария
Давайте подробнее рассмотрим термин, благодаря которому появилась аббревиатура HTML (Язык
разметки гипертекста). Наверное, вы уже знаете, что гипертекст представляет собой текст, в котором
содержатся ссылки. Ссылка представляет собой средство соединения этого текста с другим файлом.
Пока что все понятно. Но что такое язык разметки? (Это не тот “птичий” язык, на котором говорят
представители ГАИ, когда хотят оштрафовать за нарушение правил дорожного движения?) Язык
разметки — это способ размещения информации о документе (например, информации о гипертекс-
товых ссылках и форматировании) в самом документе. В языках разметки часто используются дескрип-
торы — символы, заключенные в угловые скобки и дающие команды по отображению. Таким образом,
язык разметки гипертекста, т.е. HTML, представляет собой определенный способ использования
дескрипторов для передачи информации о документе.
Большинство HTML-дескрипторов являются парными: один из них начинает процедуру изменений,
а другой ее завершает. В следующем примере первый дескриптор, <в>, означает начало отображения текста
i полужирным начертанием, а второй дескриптор, </в>, означает завершение полужирного начертания.
Посмотрим, как будет выглядеть фраза, “размеченная” HTML-дескрипторами:
'со <В>хорошая</В> идея.
11ри отображении в окне браузера это предложение будет выглядеть так:
''се хорошая идея.
Браузер считывает только исходное текстовое предложение Это <в>хорошая</в> идея, иго-
норит себе: “Я отображу слово Это, затем включу полужирное начертание, отображу слово хорошая,
(пключу полужирное начертание и отображу слово идея”. Человек, создавший исходную фразу,
поместил в нее HTML-дескрипторы, которые браузер определенным образом проинтерпретировал.
Конечный пользователь видит только полученный результат. В данном случае это слово “хорошая”,
выделенное полужирным начертанием.
Дескрипторы <в> и </в> являются дескрипторами форматирования, которые описывают способ
отображения текста браузером. В HTML существуют еще дескрипторы связывания, которые указывают,
шкую внешнюю информацию следует внести в документ. Ниже приведен пример сложно выглядящего
III ML текста, демонстрирующий применение дескрипторов форматирования и связывания.
Чтобы побольше узнать о <1>Покемонах</1>, "карманных монстрах",
горые сегодня так популярны среди детей, зайдите на официальный
Ь-узел <А HREF="http://www.pokemon.com">Pokemon</A>.
Отображаемый на экране текст будет выглядеть следующим образом:
I г ><>ы побольше узнать о Покемонах, "карманных монстрах",
г,рые сегодня так популярны среди детей, зайдите на официальный
W' Б узел Pokemon.
Дескрипторы форматирования <х> и </х> указывают, что слово покемонах следует отображать
»ур< ивным начертанием. Дескрипторы привязки <А> и </А> указывают, что слово Pokemon является
мко/и-м, т.е. местом начала ссылки. В большинстве браузеров ссылки выделяются подчеркиванием.
А что означает дополнительный текст — href="http://www.pokemon, com" — внутри дескрип-
1 ip.i л ? href является аббревиатурой от Hypertext REFerence (гипертекстовая ссылка) После
щелчка на ссылке браузер будет искать URL, выступающий в качестве гипертекстовой ссылки, в роли
которого в данном примере выступает адрес Web-страницы Pokemon, указанный после знака равенства.
Идея считывания компьютером введенной информации и использования ее для принятия и выполнения
определенного решения не нова. Она зародилась еще в прошлом веке и была досконально изучена.
Такая машина или программа (например, браузер) называется конечным автоматом. В следующий раз,
когда будете говорить с кем-нибудь о Web, постарайтесь “ввернуть” это словечко!
Нет ничего страшного в том, что вы позаимствуете чьи -то материалы для базового
[ уЛЙк"' ) HTML-форматирования. Однако, если вы хотите использовать сложные форматы,
придающие характерные отличия материалу и требуюшие приложить существенные
усилия, необходимо получить разрешение владельца. Для этого обратитесь к Web-
мастеру узла, который вам особенно понравился, опишите, каким образом вы хотите
использовать данное форматирование, и запросите разрешение. Вы удивитесь тому,
как много людей разрешают пользоваться собственными наработками без всякой
компенсации и каких-либо подобных требований.
Создание HTML-документов
Создавать HTML-документы можно в программе подготовки текстов, текстовом редакто-
ре или с помощью HTML-инструмента. В каждом подходе есть свои преимущества.
| J Программа подготовки и редактирования текстов. В большинстве совре-
менных версий таких программных пакетов (их еще называют текстовыми
процессорами) имеется возможность сохранения документа в формате HTML.
Вы можете открыть и редактировать документ в программе подготовки тек-
стов, а затем сохранить его как образующий Web-страницу текст с HTML-
разметкой. Однако программа подготовки текстов поддерживает большее ко-
личество элементов, подлежащих преобразованию, по сравнению с количест-
вом функций, поддерживаемых HTML. Это делает процесс преобразования
далеким от совершенства. Поэтому, по иронии судьбы, программой для под-
готовки текстов можно пользоваться для редактирования HTML-документов
только в том случае, если вы понимаете, какое форматирование поддержива
ется в HTML. А об этом вы узнаете в данной главе.
Текстовый редактор. Это программа, позволяющая редактировать обычный
текст (тот, который большинство людей пересылают друг другу в сообщениях
электронной почты), без применения различных шрифтов, начертаний и сти
лей. Текстовым редактором можно воспользоваться для создания в тексте
HTML-дескрипторов. Сохранен такой файл будет в виде обычного текста, без
добавления скрытых кодов форматирования. Несмотря на то что в текстовых
« редакторах отсутствуют сложные элементы, присущие программам подготов
ки текстов, многие специалисты в области HTML отдают предпочтение имен
J но им. (Файл можно создать и в программе подготовки текстов, а сохранить
его в виде простого текста. В результате вы добьетесь того же результата, но
при этом помните, что файл не следует сохранять в каком-либо формате, oi
личном от самого простого.)
•S HTML-инструмент скрывает от пользователя некоторые детали HTML. Вам
следует научиться работать с каким-либо HTML-инструмсн’юм, а гакже с npoi
раммами, полностью скрывающими от пользователя HTMI код. ('ведении
которые мы предоставим в настоящей главе, помогу! нам от нон и по добные
ваться такими инструментами и будете знать о том, какие существуют альтер-
нативные варианты на тот случай, если используемая программа полностью
не удовлетворяет вашим потребностям.
После создания HTML-файла сохраните его с расширением . htm. Это расширение позволит
Web-браузеру распознать файл и надлежащим образом интерпретировать его. Если вместо . htm
вы будете использовать расширение . html, то ваш файл смогут распознать не все системы.
На компьютерах с разными операционными системами можно использовать имена
ЛЛ файлов разных типов. Но чтобы Web-страницу могло считывать максимально воз-
можное количество систем, им лучше присваивать достаточно короткие имена,
удовлетворяющие условию 8x3. (В качестве примера можно привести имя файла
ИМЯФАЙЛА. EXT, в котором 8 символов стоит до точки и 3 — после нее.) HTML-
файлы должны оканчиваться символами . htm. Кроме того, не используйте в именах
файлов пробелы и специальные символы, такие как двоеточие или апостроф. В ре-
зультате имена файлов будут доступными для большинства компьютеров, которые
будут считывать ваши страницы.
Одной из самых больших проблем, с которыми приходится сталкиваться начинаю-
(	) Щим HTML-программистам, является тот факт, что в настоящее время программы
для подготовки текстов пытаются позиционировать в качестве HTML-редакторов,
что затрудняет непосредственную работу с HTML-дескрипторами. Такие программы
хотят скрыть дескрипторы от пользователя и “позволить” ему работать с формати-
рованным документом, в котором дескрипторы не видны. На первый взгляд, рабо-
тать кажется проще, но в результате пользователь может контролировать свою стра-
ницу в гораздо меньшей степени. Если при работе в Microsoft Word или Wordpad
(поставляемым с операционной системой Microsoft Windows) вы каждый раз будете
сохранять файл в текстовом формате, то тогда сможете получить непосредственный
доступ к HTML-дескрипторам. При этом вы должны быть морально готовы к тому,
что Word или Wordpad будут неизменно задавать вопрос о том, хотите ли вы сохра-
нить файл в виде форматированного документа. Будьте тверды и на такой вопрос
неизменно отвечайте отрицательно.
Предварительный просмотр HTML-документов
После создания HTML-файла необходимо посмотреть, как он будет выглядеть в Web.
Н некоторых программах имеются специальные режимы предварительного просмотра, но са-
мое лучшее представление о том, как будет выглядеть HTML-файл, можно получить посред-
। том Web-браузера.
11ри работе в текстовом редакторе или программе создания HTML-кода сохраните файл
•и щеке. (Помните о необходимости использования расширения .htm.) Затем откройте свой
Web браузер. Для открытия сохраненного файла в Netscape Navigator воспользуйтесь коман-
|ои File^Open Раде (Файл^ФОткрыть страницу), а в Internet Explorer— командой Файл^Ф
* »iкрыть. В открывшемся диалоговом окне щелкните на кнопке Обзор (Browse), найдите
•п лный файл и откройте его.
Н окне браузера вы увидите файл в таком виде, в каком он был бы представлен при раз-
it шепни в Internet. Если вы подключены к Internet, то в процессе предварительного просмо!
1>и < можете даже щелкать на ссылках документа и видеть соответствующую графику на своей
\\ । Ь с । ранице. Однако то, что увидите вы, может отличаться от того, что увидят иные люди,
ч крывшие ваш файл. Дело в том, что другие пользователи могут использовать отличные от
 inn-1 о браузеры и другие шрифты. Кроме того, доступ к файлу, записанному на лиске ваше-
го компьютера, происходит значительно быстрее, чем доступ к этому же файлу через Internet.
Но по крайней мере вы получите представление о том, как выглядит страница.
Если вы имеете возможность одновременно открыть и текстовый редактор, и браузер, то
работа значительно упрощается. (Для быстрого перехода от одного приложения к другому
в Windows применяется комбинация клавиш <Alt+Tab>, а в Macintosh — раскрывающееся
меню, расположенное в правом верхнем углу экрана.) В программе редактирования можно
откорректировать и сохранить файл, а затем воспользоваться командой перезагрузки страни-
цы для просмотра внесенных изменений. В результате вы никогда не будете удивлены тем ре-
зультатом, который увидите после размещения в Web своего творения.
Если вы достаточно искусны, то сможете разместить окна па экране таким образом,
чтобы одновременно видеть и содержимое редактируемого HTML-файла, и окно
браузера, в котором отображается Web-страница.
52SLA Не останавливайтесь на достигнутом. Перед публикацией страницы в Web посмот-
, рите, как она будет выглядеть в разных браузерах. Наиболее популярные браузеры
можно загрузить на свой компьютер с Web-узлов компаний-производителей, как
описано в главе 4 “Выбор средств”.
Л[га1сигачн,осйгЬ ЛЛШ2
Очень часто слово “практичность” заменяют выражением “здравый смысл”. Все, что ка-
сается HTML, подпадает под это понятие. После того как вы несколько раз увидите HTMI
дескрипторы, большинство относящихся к ним правил уляжется в голове и вам не придется
всякий раз мучительно вспоминать их. Если вы случайно сделаете ошибку, не удивляйтесь
тому, что большинство текста в документе будет выделено курсивом, просто вы забыли,
что для завершения курсивного начертания требуется добавить дескриптор </!>.
Основные правила HTML
Ниже приведены несколько основных правил использования HTML, а также те моменты,
которых следует остерегаться.
J Большинство HTML-дескрипторов применяется попарно.
Например, если какой-то текст следует выделить полужирным начертанием,
то перед началом этого фрагмента необходимо поместить дескриптор <В '
а после него— </В>. Если вы забудете поставить дескриптор </В>, in
сначала документ будет выглядеть нормально, а затем начнется несанкцпо
нированное применение полужирного начертания, которое будет приме
няться до самого конца текста.
Не забывайте также о необходимости использования парных дескриптор! ш
и перед публикацией документа проверьте их наличие. Если вы увидите при
менение полужирного начертания или курсива во всем документе, то будет
знать, что нужно делать.
J HTML-дескрипторы следует писать ПРОПИСНЫМИ БУКВАМИ.
HTML-дескрипторы принято писать прописными буквами, чтобы они вы н«
лялись в тексте, в который вставлены. Однако между дескрипторами привя п н
гипертекстовую ссылку (например, URL) следует иабнран. в том pciiinp-
(верхнем или нижнем), в каком она могла бы применяться в любом другом мес-
те. Ниже приведен пример использования прописных и строчных символов.
<А HREF=”textver. htrn" >Фрагмент текста.</А>
Предварительно заданные части HTML-дескриптора, такие как А, /А и href,
написаны прописными буквами. Имя файла написано строчными буквами.
Такое соглашение принято в операционной системе UNIX, и это поможет из-
бежать проблем, если ваша Web-страница попадет на сервер UNIX. Текст ме-
жду дескрипторами, который будет отображаться на Web-странице в виде
ссылки, можно набрать прописными символами, если это будет иметь смысл
для читателей вашей Web-страницы.
Компьютеры, работающие на платформе UNIX, учитывают регистр прописных
и строчных символов. Если один файл будет иметь имя MyFile. txt, а дру-
гой— myfile.txt, то они сохраняются как разные файлы. Платформы PC
и Macintosh не учитывают регистр символов и трактуют имена MyFile. txt
и myf ile. txt как один и тот же файл. Поскольку Web-файлы могут быть раз-
мещены на Web-сервере с операционной системой другого типа, отличной от
той, в которой они были созданы, вы должны обращать внимание на использо-
вание верхнего и нижнего регистра символов. Легче всего следовать правилу,
принятому среди пользователей UNIX: для написания имен файлов всегда ис-
пользуйте нижний регистр символов. (Некоторые пользователи UNIX доходяг
до крайностей и используют нижний регистр символов во всех ситуациях, даже
в тексте персональных сообщений элекфонной почты, которую они отправляют.)
В HTML символы абзаца и табуляции в тексте игнорируются.
При использовании HTML пользователя больше всего сбивает с толку тот
факт, что игнорируются абзацы, создающиеся в тексте после нажатия клави-
ши <Enter>, а также символы табуляции. При отображении HTML-кода брау-
зер автоматически разбивает текст на строки таким образом, чтобы полно-
стью заполнить текущий размер окна. А абзац браузер создает только в том
случае, когда видит дескриптор <Р> или какой-то другой, влекущий за собой
начало новой строки (например, дескриптор заголовка первого уровня <Н1>).
В HTML между абзацами необходимо вставлять дескриптор абзаца (<Р>).
Независимо от того, сколько раз при наборе текста вы нажали клавишу перехо-
да к следующей строке, если между абзацами не поставить дескриптор абзаца
<Р>, то текст на Web-странице будет отображаться как один большой фрагмент.
Базовый HTML-код но-разному выглядит в различных типах браузеров.
Базовый HTML-код не позволяет в большой степени контролировать внешний
вид документа. (Новые версии HTML дают большую степень контроля, но
они не поддерживаются старыми версиями популярных браузеров, поэтому
мы не советуем использовать новые коды.) Одни и те же дескрипторы разные
браузеры трактуют по-разному. Например, заголовок верхнего уровня
(определяемый дескрипторами <Н1> и </Н1>) в одном браузере может вы-
глядеть крупнее, чем в другом.
Некоторые дескрипторы не работают в определенных браузерах.
Некоторые браузеры (такие как Netscape Navigator) поддерживают дескрип-
торы. которые другие браузеры не могут' интерпретировать. Во избежание
сюрпризов для пользователей, которые будут просматривать ваши докумен-
ты, мы рекомендуем применять преимущественно базовые дескрипторы.
В этой книге описываются только такие дескрипторы.
J Пользователи конфигурируют свои браузеры по-разному.
Помимо того, что существуют отличия между разными браузерами и их вер-
сиями, пользователи по-разному конфигурируют свои программы. Пользова-
тели, имеющие мониторы с большим размером экрана, стремятся просматри-
вать документы в окне большего размера. Но поскольку такие пользователи
сидят дальше от экрана (помните, как в детстве вам говорили, что следует си-
деть на расстоянии как минимум 5 метров от телевизора?), то для отображе-
ния текста они могут использовать шрифты большего размера. Некоторые
пользователи отключают поддержку графики. Вследствие всех этих индиви-
дуальных пристрастий документ у разных пользователей может выглядеть по-
разному. На рис. 3.2 изображена Web-страница узла For Dummies, отобра-
женная в окне браузера с другим набором параметров. Как видно, эта страни-
ца отличается от ранее приведенной страницы этого же узла.
Рис. 3.2. Домашняя страница узла For Dummies, отображенная в окне браузера с другими параметрами
шрифтов
Десять основных дескрипторов HTML плюс еще один
В шпаргалке к данной книге приведен пример HTML-документа, представляющего собой
текст с дескрипторами — символами, заключенными в угловые скобки. Если вы hoi о то сих
пор не сделали, вырвите шпаргалку и, читая эту главу, смотрите на образец II ГМ1 lokvMeiua.
В табл. 3.1 описываются дескрипторы, речь о которых идет в этой главе
Таблица 3.1. Основные дескрипторы
Дескрипторы	Размещение дескрипторов
<HEAD>,</HEAD>	Размещаются до и после, соответственно, дескрипторов <title> и </title> в начале документа
<TITLE>, </TITLE>	Между этими дескрипторами размещается краткий заголовок, описывающий документ и отображаемый вверху окна браузера. (Более подробная информация о дескрипторах <head>, </head>, <title> и </title> приведена ниже, в разделе “Заголовки — путь к победе”)
<BODY>, </BODY>	После добавления дескрипторов </title> и </head> в конце названия и области заголовка весь располагающийся под ними документ заключается между дескрипторами <body> и </body>
<H1>, </Hl>, <H2>,	Заголовок верхнего уровня располагается в верхней части документа между дескрипторами <Н1> и </н1>. Дескрипторы заголовков с большими номерами используются для обозначения заголовков соответственно меньших размеров. Вы можете использовать заголовки шести уровней (самый низкий уровень обозначается дескрипторами <нб> и </нб>). Для работы этого вполне хватит — в данной книге, например, используются заголовки только трех уровней. Если этого достаточно для такой большой книги, то вам понадобится создать что-то очень грандиозное, прежде чем возникнет необходимость использовать заголовки пяти или шести уровней
<B>, </B>	Между этими дескрипторами заключается текст, который следует выделить полужирным начертанием
<I>, </I>	Между этими дескрипторами заключается текст, который следует выделить курсивным начертанием
<p>, </p>	Дескриптор конца абзаца не нужно размещать в конце заголовка и в некоторых других местах, например в пределах списка. Но во всех остальных местах документа он необходим. Помимо дескрипторов привязки (<а>, </а>), дескриптор <р> является тем дескриптором, который чаще всего применяют неправильно. Дескриптор конца абзаца, </р>, не является обязательным для начинающих
<HR>	Дескриптор горизонтальной линии применяется при отображении горизонтальной линии, которую удобно использовать для визуального разделения частей документа
<A>, </A>	Дескрипторы привязки определяют гипертекстовые ссылки и содержат гипертекст, в некоторых случаях представляющий собой достаточно сложную информацию о том, куда ведет ссылка. Текст ссылки (тот, который выделяется подчеркиванием и означает гипертекстовую ссылку) заключается между дескрипторами. После щелчка пользователем на подчеркнутой текстовой ссылке, отображенной на Web-странице, открывается Web-страница, на которую указывает гипертекстовая ссылка
Л HREF="http://www.  i.'iite. е<Зи">Узел •i рго	ребенка.  / A>	Пара дескрипторов <а>, </а> определяет якорь, href задает гипертекстовую ссылку. В данном случае это указатель URL Web-узла. Текст ссылки, Узел моего ребенка, выделенный подчеркнутым начертанием, пользователь видит отображенным на Web-странице. Подробная информация о других типах гипертекстовых ссылок приведена в конце этой главы
Окончание гпабп. 3. /
Дескрипторы	Размещение дескрипторов
<img	Дескриптор IMG указывает на изображение в формате, понятном браузеру
src= "BudPic. gif" >	(GIF или JPEG), и отображает его на Web-странице. Часть дескриптора src
сообщает браузеру о том, где следует искать файл изображения. В данном
примере файл изображения имеет имя BudPic. gif и находится в том
же каталоге или в папке, что и HTML-файл, содержащий дескриптор
<img>. (Это можно понять по тому факту, что в начальной части имени
файла не содержится никаких данных о пути, например
\images\BudPic.gif.) Помимо этой главы, в которой описываются
базовые дескрипторы, дополнительную информацию о дескрипторе <img>
можно найти в главе 6 “Заполнение домашней страницы’’
Примеры использования этих дескрипторов приведены в шпаргалке. Полный перечень
основных HTML-дескрипторов приводится в приложении В.
Созаание Web-cfn/ta/tu^bt
Вы уже почти готовы к созданию Web-страницы с HTML-дескрипторами. Однако основной
секрет HTML заключается в том, чтобы знать, когда и какие именно дескрипторы следует при
менять. Теперь, когда вы познакомились с описанием дескрипторов, возникает вопрос, что еще
необходимо о них знать? Дело в том, что дескрипторы можно подразделить на три категории.
J Дескрипторы, содержащие метаданные о документе. Метаданные, такие
как название в области названия документа, не влияют на то, что будет ото
бражаться в теле Web-страницы. Эта информация используется различными
Web-инструментами, например, поисковыми машинами, которые просматри
вают название, чтобы понять, о чем говорится в данном документе.
S Дескрипторы, форматирующие символы в тексте. Эти дескрипторы (такие
как <В>, </В>, <1> и </1>) не выполняют никакой другой функции, кроме
задания внешнего вида текста при его отображении браузером.
J Дескрипторы связывании. Эти дескрипторы “ведут” пользователя к pai
личным данным и даже к другим документам. Подробная информация о деск
рипторах связывания будет представлена далее в этой главе, в разделе “Огня
нитесь в поисках якоря”.
После создания и сохранения HTML-файла, представляющего собой текст с различными
дескрипторами, можете порадоваться за себя. Вы только что создали полный HTML-до
кумент и можете считать себя настоящим маркировщиком (не тем, кто разукрашивает стены
граффити, а тем, кто способен к самовыражению электронным образом, через Web).
Создайте пустой файл HTML
HTML-файл должен содержать только обычный текст, без скрытых кодов форма гиро
вания, которые так любят программы подготовки текстов, а имя файла всегда должно
оканчиваться символами .htm. Поэтому в начале работы создайте простой ickctoiii.h’I
файл, который будет содержать текст Web-страницы и HTMI -дескринюры.
Для создания пустого текстового документа, в который можно вставить HTML-код, вы
полните следующие действия.
1.	Запустите текстовый редактор или программу подготовки документов (тексто-
вый процессор).
2.	Откройте новый документ.
При запуске некоторых программ новый документ открывается автоматически. В этом
случае данный шаг можно пропустить.
3.	Начните процесс сохранения документа, чтобы присвоить ему имя.
При работе в программе подготовки документов воспользуйтесь командой Сохранить
как (Save As) или аналогичной, а в качестве типа файла выберите обычный текстовый
документ (тип файла “только текст”).
Не выбирайте в качестве типа файла “текст с разбиением на строки”, поскольку в этом
случае документ будет сложнее редактировать.
4.	Присвой те нмя документу.
В конце имени должны стоять символы . htm.
5.	Сохраните документ.
В большинстве программ для этого следует щелкнуть на кнопке Сохранить (Save)
или нажать клавишу <Enter>.
Таким образом создается пустой HTML-документ, который, будучи размещенным в Web
п ia ком виде, не будет представлять никакого интереса. Поэтому теперь документ следует
и.нюлнить содержимым, и этот процесс мы начнем с заголовка.
® последних версиях Word и других программах подготовки документов пред
[	) приняты попытки “помочь” вам выполнить то, к чему вы стремитесь. Например,
' г/ если в Word вы выберите команду сохранить документ как текстовый файл, т о
расширение файла автоматически изменится на . txt. Поэтому затем вам придет
ся снова изменить его на . htm.
Заголовки — путь к победе
< начала о грустном. HTML-документы начинаются с дескрипторов, которые не оказывают су-
низ । венного влияния на внешний вид HTML-страницы. Фактически эти дескрипторы добавляю!
। |||||>1шую боль; тогда как вы считаете, что наконец-то начинаете заниматься чем-то реальным.
Теперь о радостном. Эти дескрипторы улучшают Web. Они содержат вводные метадап
ш.к описательную информацию о документе, не влияющую на его внешний вид. Несмотря
п.| то что пользователь не видит эти дескрипторы в действии, они поддерживают инструмси
hi поиска и другие инструменты, позволяющие находить Web-страницу (надеемся, что речь
и i' i о вашей странице) быстро и легко.
J <HTML>, </HTML>. Между этими дескрипторами должен содержаться абсо
лютно весь документ; они идентифицируют его как часть HTML-кода. По
скольку в Web размещают все больше и больше файлов различных типов, ин
дескрипторы приобретают особую важность.
J <HEAD>, </HEAD>. Между этими дескрипторами размещается заголовок до
кумента и вся та информация, которая не отображается на самой Web
странице. На уровне ваших знаний это пока что означает заголовок.
J <TITLE>, </TITLE>. Между этими дескрипторами размещается название
(иногда говорят — шапка) документа, представляющее собой короткую фра-
j, зу, описывающую документ и не отображающуюся в теле Web-страницы. Од-
' нако название отображается в самой верхней части окна документа при про-
смотре Web-страницы.
J <BODY>, </BODY>. Между этими дескрипторами размещается та часть докумен-
та, которая не является заголовком. Дескриптор <BODY> располагается сразу же
после дескриптора < /НЕАО, который следует за дескриптором < /Т1ТЬЕ>.
При работе с инструментом, который создает Web-страницу за вас (например, бес-
платная служба, описанная в главе 2 “Публикация в Web: провайдеры Internet и
бесплатные службы”, или Netscape Composer, о котором речь пойдет далее в этой
главе), вам не нужно вставлять эти вводные дескрипторы, потому что это уже сдела-
но за вас. Но вам может понадобиться вставить дескрипторы <TITLE> и </TITLE>
и самостоятельно разместить между ними название (шапку) документа.
Посмотрите на приведенный ниже благопристойный, хотя и практически пустой HTML-
документ, и уясните, каким образом выглядит его верхняя часть.
<HTML>
<HEAD>
<Т1ТЬЕ>Краткий обзор электрогитар*:/TITLE>
</HEAD>
<BODY>
Небольшая вводная информация об электрогитарах
</BODY>
</HTML>
Популярные Web-инструменты также используют эти дескрипторы. Функции расширен-
ного поиска некоторых поисковых средств (например, AltaVista) позволяют пользователям
выполнять поиск по словам, указанным в шапке документа. Для этого в поле поиска следует
ввести слово titleа за ним указать искомый текст. (Для доступа к поисковой маши-
не AltaVista зайдите на узел www. altavista. com.)
В браузерах Netscape Navigator и Microsoft Internet Explorer шапка документа (фраза меж-
ду дескрипторами <TITLE> и </TITLE>) используется в качестве описания документа в ме-
ню закладок. Кроме того, шапка указывается в строке заголовка окна браузера при отображе-
нии страницы.
Чтобы всякий раз, начиная работать над новым HTML-документом, не забывать
о его заголовке, создайте текстовый документ в программе подготовки документов
или в текстовом редакторе, разместив надлежащим образом дескрипторы заголовка,
шапки и тела документов. Приступая к работе над новым HTML-документом, нач-
ните с копирования этого ранее созданного файла.
Для того чтобы создать текстовый документ, содержащий вводные дескрипторы, выпол-
ните следующие действия.
1.	Откройте новый документ.
2.	Сохраните документ в виде текстового файла и присвойте ему нужное имя,
оканчивающееся символами .htm.
3.	В первой строке документа введите дескриптор <HTML>.
4.	Во второй строке документа введите дескриптор <HEAD».
5.	В третьей строке документа введите дескрипторы <TITLE» и </TITLE».
Пока ничего не вставляйте между дескрипторами <TITLE> и </TITLE». Начав рабо-
тать над новым HTML-документом, вы скопируете данный файл и после этого введете
информацию, которую необходимо использовать в качестве шапки.
При решении, какую информацию следует указывать между этими дескрипторами,
помните о том, что она будет использоваться при поиске документов.
6.	В четвертой строке документа введите дескриптор </HEAD>.
7.	В пятой строке документа введите дескриптор <BODY».
8.	Оставьте шестую строку документа пустой.
Здесь будет располагаться основное содержимое документа.
9.	В седьмой строке документа введите дескриптор < /BODY».
10.	В восьмой строке документа введите дескриптор </HTML».
Ф Каким бы образом вы ни работали с документом, дескриптор </HTML> всегда дол-
жен быть последним.
11.	Сохраните документ.
Придумайте заголовок и введите содержимое в тело документа
После заголовка должно следовать содержимое документа— обычные знакомые слова,
которые при необходимости можно выделить полужирным начертанием или курсивом.
Не переусердствуйте с применением дескрипторов полужирного и курсивного на
। ЛкЛ чертания. На заре использования настольных издательских систем все стремились
помещать три разных начертания в каждой строке текста. Эту ошибку сейчас повто
ряют новички в области HTML, стремящиеся как можно чаще применять в своих
документах полужирное начертание и курсив. В процессе предварительного про
смотра документа в Web-браузере обратите внимание на области, в которых слиш-
ком много полужирного и курсивного форматирования. В случае каких-то сомнений
от этого форматирования вообще лучше отказаться. Посетители Web-страницы
только поблагодарят вас за это.
Рассмотрим, какие действия следует выполнить, чтобы поместить в Web-документ зато
шток верхнего уровня и какой-то текст.
I. После дескриптора <BODY> и перед дескриптором </BODY> поместите заголовок
первого уровня. Заключите его между дескрипторами <Н1> и </Н1>, чтобы
браузер знал: именно этот текст является заголовком первого уровня.
Многие создатели Web-страниц размещают заголовок первого уровня между дсск
| риторами <TITLE> и </TITLE>. Это также допускается.
2. 11осле заголовка введите какой-то текст.
5. В конце каждого абзаца поместите дескриптор <Р».
Для оптимизации работы поисковых средств Web первым абзацем должно быть
I Счу I краткое описание содержимого документа.
Независимо от того, сколько раз вы нажмете клавишу <Enter>, ваш браузер не отреа-
гирует на это. Только увидев дескриптор <Р>, он поймет, что следует закончить один
абзац и начать следующий.
4.	Поместите фрагмент текста между дескрипторами <в> и </в>, чтобы применить
к нему полужирное начертание.
Не переборщите с дескрипторами <В> и </В>! Примените полужирное начертание
только пару раз. Этого будет вполне достаточно.
5.	Поместите фрагмент текста между дескрипторами <1> и </1>, чтобы применить
к нему курсивное начертание.
Не переборщите с дескрипторами <1> и </!>! В первом документе примените его
только раз или два, чтобы набить руку.
6.	Попытайтесь добавить горизонтальную линию.
В одном или двух местах добавьте дескриптор <HR> для создания горизонтальных линий.
Как и в случае с заголовками и другими элементами документа, поместите дескрип-
ИА.4 тор <HR> в отдельной строке, чтобы по необходимости его можно было легко пере-
местить или удалить.
7.	После завершения работы проверьте свои дескрипторы.
Для завершения одного абзаца и начала следующего необходимо использовать деск-
риптор <Р>. Все дескрипторы <В> должны иметь парные дескрипторы </В>, а деск-
рипторы <1> — парные дескрипторы </!>.
Хотите — верьте, хотите — нет, но самый эффект ивный способ проверки дескрипто-
тЛ1 ров заключается в печати документа и вычеркивании пар дескрипторов карандашом.
В старое время упражнение такого рода программисты называли “проверкой за столом”.
8.	Сохраните документ.
Если вы работаете в программе подготовки документов, а не в текстовом редакторе,
обязательно сохраните свой документ в формате “только текст”.
На листе шпаргалки приведен пример простой Web-страницы.
Добавьте небольшой список
Одним из лучших способов визуальной “разбивки” Web-страницы является использование спи
сков. HTML поддерживает маркированные и нумерованные списки, а также списки определений
и описаний. Несмотря на то что процедура создания списков достаточно проста, вы не получите
большой степени контроля за внешним видом списка. Остается только довериться браузеру.
Ненумерованные списки (их часто называют маркированными} отобража
ются в виде списков, рядом с каждым элементом которого стоит символ мар
кера. Элемент списка имеет определенный отступ от маркера (его веиичипа
зависит от типа браузера и его настроек). Список, на который вы смотрин-
в данный момент, является ненумерованным, а в роли маркеров Bi.iciynaioi
обыкновенные галочки.
J Упорядоченные списки (их часто называют нумерованными) похожи на
маркированные, но вместо маркеров (как вы, наверное, догадались) исполь
зуются порядковые номера. Можно по своему усмотрению изменять порядок
расположения элементов нумерованного списка. Браузер при его отображе
нии автоматически расставит правильную нумерацию.
J Списки определений. В этих списках, как правило, чередуются термины и он
ределения. Термин стоит на месте маркера, а рядом или сразу же под ним
представлено определение.
Общая процедура создания списка любого типа такова. Список следует начинать с на-
чального дескриптора, например с дескриптора <UL> для ненумерованного списка. После
>того каждый элемент списка помечается дескриптором, чтобы браузер мог распознать от-
дельный элемент. В начале каждого элемента как ненумерованного, так и нумерованного
списка должен стоять дескриптор <Ы>. Для отдельных элементов списка конечный деск
риптор не используется. Завершать список следует закрывающим дескриптором, таким как
/UL> для ненумерованного списка.
Форматирование HTML-списков не всегда получается таким, каким вам хотелось
бы. Например, многие браузеры отображают маркированный HTML-список с пустой
 строкой перед элементами списка, а не между ними. С помощью стандартных
HTML-команд изменить это форматирование нельзя, а попытка сделать это с помо
щыо каких-либо хитростей является весьма трудной задачей. Поэтому чаще всего
приходится мириться с тем, каким образом отображаются списки HTML.
В приведенной ниже инструкции описывается процедура создания ненумерованного
(маркированного) или упорядоченного (нумерованного) списка.
1.	Введите дескриптор, начинающий список: <UL> — для ненумерованного списка.
<OL> — для упорядоченного списка.
2.	Поместите дескриптор <Ы> для обозначения элемента списка.
3.	В той же строке введите текст элемента списка.
Для начала можно ввести текст Red Hot Chili Peppers.
4.	Для каждого последующего элемента списка введите сначала дескриптор <Ы>,
а за ним текст элемента. В конце каждой строки нажмите клавишу <Enter>, чтобы
визуально отделить друг от друга элементы списка в процессе его редактирования.
Для элементов списка не нужно использовать закрывающий дескриптор. Помните.
( ИЙ 1 что ПРИ нажатии в конце строки клавиши <Enter> курсор переместится на новую стро
(ИРу ку на экране, но в тексте с HTML-разметкой разрыва не будет. Браузер начнет новую
строку только в том случае, если он увидит дескриптор <Ы> или </UL>. Дескриптор
<Ы> относится к гем редким дескрипторам, которые не применяются попарно.
5.	Введите дескриптор для завершения списка: </UL> — для завершения ненуме-
рованного списка и </OL> —для завершения упорядоченного списка.
Дня создания списка определений выполните следующие действия.
I.	Введите дескриптор <DL> для начала списка определений.
2.	Введите дескриптор <DT> для обозначения термина определения.
3.	Введи ге текст термина определения.
4.	Введи ге дескриптор <DD> для обозначения текста определения — описания термина.
5.	Введите текст определения.
6.	Для задания остальных элементов списка введите дескриптор <DT>, за ним —
термин определения и дескриптор <DD>, сопровождаемый описанием термина.
В конце каждой строки нажимайте клавишу <Enter> для визуального отделения
элементов списка на экране в процессе редактирования.
Как и при работе с другими элементами списков, для терминов определения или
текста определения конечные дескрипторы не используются.
7.	Введите дескриптор </DIj> для завершения списка.
На рис. 3.3 продемонстрированы три типа списков. Поскольку люди используют Web для
выяснения чего-то нового или для поиска информации, списки являются одним из самых
важных элементов форматирования в HTML.
UpJ.’Si
fa'iend	|Щ|
* I Jp Л-	Доя» 4	» J g
Addrttes CAWINDOWS\Desktop\lists.htm	Utlks ^|
Here’s a bulleted, or imoi dered, list
lists - Notepad ,	t	_____BLsiЕЭ
•	Ketchup
•	Mustard
e Belish
Here’s an ordered list
1. eat
j 2. drink
3. sleep
And tliis is the rarely-used definition list
j World
I Where a spider weaves
Wide
How a spider weaves
| Web
What a spider weaves
£ile Edit J>eaich 1W i^Send
<h**>Here’s a bulleted, or unordered, list</h>*>	j*]
<ul>
<li>Ketchup
<li>Mustard
<li>Relish
</ul>
<h4>Here*s an ordered list</h>*>
<ol>
<li>eat
<li>drink
<li>sleep
</ol>
<h4>And this is the rarely-used definition list</h>*>
<dl>
<dt>World
<dd>Where a spider weaves
<dt>Wide
<dd>How a spider weaves
<dt>Web
<dd>What a spider weaves
</dl>
lr_..	......... . J
s C.one	|X My Co-nputei
Рис. 3.3. Применение списков на Web-странице
Оглянитесь в поисках якоря
Как вы уже знаете, HTML — это язык гипертекстовой разметки. Следовательно, вес
дескрипторы являются частью разметки. Это, пожалуй, все, что на данном и те
нужно знать о гипертекстовой части. В этом разделе мы расскажем о гом. как не
пользовать гипертекст для создания ссылок между содержимым вашею документ!
и данными других файлов. Сначала вы можете немного путаться, но после того, как
поймете суть процесса, сразу же найдете много способов использования гипертекста
на Web-страницах.
При задании якоря дескрипторы используются для указания:
J текста или изображения, которые выделяют место, на котором нужно щелк-
нуть мышью, чтобы осуществить переход по ссылке;
другого якоря, к которому следует перейти после щелчка на ссылке.
Якоря (дескрипторы привязки) считаются одними из самых сложных дескрипторов базо-
вого HTML-кода. Но без них обойтись нельзя, потому что якоря чрезвычайно расширяют
возможности Web-страницы. Ниже приведен пример якоря.
A HREF="http://www.listentoyourdog.сот">Как дрессировать собак</А>
Якорь состоит из следующих частей.
J <А>, < /А>. Между этими дескрипторами размещается текст, который следует
выделить в качестве гипертекстовой ссылки (в приведенном выше примере
это текст Как дрессировать собак). Постарайтесь, чтобы текст как
можно полнее представлял содержание вашей ссылки, например “Изда-
тельство “Диалектика” или “Мое резюме”. Чем полнее текст будет описывать
ссылку, тем полезнее он будет для пользователя.
J HREF. Эти данные помещаются между дескрипторами <А>. Когда пользова-
тель щелкает на гипертекстовой ссылке, браузер открывает страницу, путь
к которой указан после HREF.
Гипертекстовая ссылка. Эти символы стоят после знака равенства в HREF-часз и
якоря, и их следует заключить в кавычки. Они представляют собой путь к доку-
менту, на который указывает ссылка. В нашем примере гипертекстовой ссылкой
является название Web-узла "http: //www. listentoyourdog.com".
11ри размещении HTML-файла на сервере одни дескрипторы привязки могут указывать на
Web-документы, находящиеся на том же Web-сервере, что и данный файл, а другие — на
Web-документы, расположенные на других Web-серверах. Если документ располагается на
1ругом сервере, то в якоре должен содержаться полный URL этого файла в том же виде, в ка
м>м его следует вводить в адресной строке браузера. Например, якорь, указывающий на изда
1 е иьство “Диалектика”, будет выглядеть следующим образом.
Л HREF=”http://www.dialektika.com”>"Издательство Диалектика"</A>
1;сли якорь указывает на документ, расположенный в той же системе, то в якоре со дер
mi к. я путь к документу, указывающий расположение файла.
Если вы создаете простой Web-узел, поместите все документы в один каталог или
|Л1 папку, и тогда якоря будут проще. В этом случае вам не нужно будет беспокоиться
об указании пути.
Указание пути зависит от того, где располагается второй документ относительно НТМ1
кжумспта, содержащего ссылку на него. Если оба документа находятся в одном каталоге или
пайке, то в качестве пути служит имя файла. Но если второй документ находится в другом ка
11И1О1С, го для указания пути к нему можно применить два способа: абсолютную или относи
iciii.iiyio адресацию. При абсолютной адресации указывается путь от корневого каталorа
11 .iMoi о верхнего уровня) сервера ко второму документу. При относительной адресации nyi ь
начинается с местоположения просматриваемого в данный момент HTML-файла. После этого
указывается путь от данного HTML-файла ко второму документу.
Для указания абсолютного адреса сначала введите символ косой черты (/), который будет
обозначать корневой каталог Web-сервера. Затем укажите полный путь от корневого каталога
к файлу. Ниже приведен пример абсолютного адреса.
/photoshop/samples/sunrise.gif
Для указания относительного адреса начните с каталога, в котором находится HTML-
документ, содержащий якорь, а затем введите путь, который ведет оттуда к нужному файлу.
Парой точек (. .) обозначается каталог, расположенный на один уровень выше текущего.
Например, если в каталоге /mysite/html есть файл sunset.htm, а вам нужно со-
слаться на графический GIF-файл, находящийся в подкаталоге данного каталога, /mysite/
html /pix, го относительный адрес будет выглядеть следующим образом:
pix/sunset.gif
Если вам нужен файл, находящийся в каталоге /mysite/trial/pix, используйте сим-
волы . . для указания подкаталога, который выше данного на один уровень, а затем по дереву
каталогов вернитесь вниз, к нужному файлу После двух точек поставьте символ косой черты.
В данном случае относительный адрес будет выглядеть следующим образом.
../trial/pix/moonrise.gif
Если в начале пути стоят две точки, это означает “каталог, расположенный на один уро-
вень выше данного”. Разделенные косой чертой слова являются именами каталогов и подка-
талогов в которых хранятся файлы. A moonrise .gif — это имя файла.
Как правило, Web-страница создается на одном компьютере, а затем она публикует-
ся, т.е. файлы копируются на другой компьютер — Web-сервер. При этом можно
легко забыть скопировать все нужные файлы. Если хранить все файлы в одной боль-
шой папке (в которой нет других документов, не являющихся частью Web-узла), то
шанс успешного переноса файлов на другой компьютер будет весьма высоким.
В табл. 3.2 приведены примеры использования якорей.
Таблица 3.2. Примеры гипертекстовых ссылок (якорей)
Назначение	Пример якоря
Web-страница, расположенная на том же сервере, в том же каталоге Web-страница, расположенная на том же сервере, в другом каталоге; относительная адресация Web-страница, расположенная на том же сервере, в другом каталоге; абсолютная адресация Web-страница, расположенная на другом сервере	<	А HREF="MyDoc2.html">текст ссылки</А> <	А HREF=" Personal /Resume" >текст ссылки</А> <	А HREF="/Мауа/Personal/ Resume">текст ссылки</А> <	А HREF="http://www.mycorp.com/ Job Requirements">текст ссылки</А>
@ Самая простая адресация, при которой вероятность ошибки наименьшая, будет в том
случае, когда все документы находятся в одном каталоге или папке. Следующим по
простоте способом, который лучше всего использовать при работе с более сложными
Web-узлами или Web-страницами, является относительная адресация. Она облегчает
процедуру связывания всех файлов, необходимых для создания Web-страницы, и их пе-
ремещения на Web-сервер. Абсолютная адресация больше всего подвержена ошибкам.

Х4Ж4 Кавычки и погоня за пространством
^БНО^
Один из часто задаваемых вопросов, относящихся к использованию языка H l ML, таков: в каких случаях
нужно использовать кавычки9 На него можно дать три ра; пичны:; ответа в зависимости от того, что вы
намерены с делать, что вы можете гдел'итъ и что вы должны сделать.
Вы намерены заключать в кавычки каждый аргумент, используемый в HTML— т.е. любые данные,
которые вы вводите в HTML-код, такие как имя файла или число. Но этоде же результата проще
добиться, используг другое стратегии.
Что вы можете сделать, так это це юлььовать кавычки, когда в данных встречается пробел, например
в омени файла. При таком подходе вы никогда не будете заключать в кавычки, напоимер. числа, потому
что они никогда не имеют прооелов.
Но что вы должны всегда делать, так это заключать в кавычки аргументы, такие как имена файлов,
которые иногда имеют пробелы а иногда нет. Благодаря эдему у вас не возникнет проблем при
использовании файлов, в именах которых имеются пробелы.
(Использование коротких имен файлов без пробелоь — идея хорошая во всех отношениях).
Создание внешней ссылки
Ниже описывается пошаговое создание ссылки. Обратите внимание на то, что опиСываст
ся работа с различными типами ссылок.
1.	Откройте существующий HTML-документ.
2.	Перейдите в то место документа, где необходимо вставить ссылку.
3.	Введите открывающий дескриптор и гипертекстовые данные, на которые долж-
на указывать ссылка.
Если ссылка должна указывать на Web-страницу, расположенную в том же каталоге,
деде и ваш документ, введите имя файла и заключите его в кавычки, например <А
HREF=" AnotherDoc . HTM" ></А> (AnotherDoc. ТГТМ — это имя файла).
Ранее уже говорилось о том, что для документа, находящегося в другом каталоге в
пределах данного Web-узла, можно указать относительный или абсолютный адрес.
Для задания ссылки на файл, находящийся в графическом подкаталоге текущего ката
лога, введите путь: <А HREF="graphics/dancers .gif ”>Dancers</A>.
Для задания ссылки на документ, расположенный на другом сервере, введите полны й
URL (например, <А HREF="http: //www. ACoolSi te. com" ></A>).
_Если не указать определенное имя файла, размещенного на другом сервере, браузер
J ЛС» будет искать страницу по умолчанию: index. htrn или index. html.
4.	После о гкрываюшего дескриптора введите текст ссылки.
5.	Не забудьте о закрывающем дескрипторе!
11	осле открывающего дескриптора и текста ссылки введите закрывающий дескриптор
Ссылки в пределах страницы
Осталось учесть еще один момент: что делать, если необходимо создать ссылку на опре-
деленную область в пределах этой же Web-страницы?
Для создания ссылки на определенный участок необходима пара якорей. Один из них распо-
лагается в том месте, где создается ссылка (как описывалось выше). Первый якорь подобен
внешним ссылкам, но он имеет еще один элемент — имя второго якоря. Его следует разместить
на Web-странине в том месте, куда должна вести ссылка. Например, следующий якорь указыва-
ет на область, которая называется “Bebak”, находящуюся в том же файле, что и первый якорь.
<А HREF="#Bebak”>соавтор книги</А>
Символ # обозначает якорь в пределах Web-страницы. Второй якорь, который также на-
зывают ссылкой, располагается в области, на которую указывает первый. Второй якорь суще-
ствует только для указания области и не способствует тому, что на экране пользователя текст
будет выделен подчеркиванием. Ниже представлена ссылка для второго якоря.
<А NAME="Bebak"> </А>Артур Бибек<Р>
Для ссылки не нужно указывать путь, а для якоря, указывающего на нее, это сделать не-
обходимо, но только в том случае, если якорь и ссылка находятся в разных файлах. Между
началом и концом якоря не нужно вводить никакого текста.
Попробуйте создать внутренние ссылки HTML-документа на своем компьютере, а затем
протестируйте их работу в браузере. Поэкспериментируйте с различными типами относи-
тельных адресов или именами путей. Поработав с различными ссылками и путями, вы приоб-
ретете опыт, необходимый для работы с реальными Web-страницами.
© Задание ссылок на какие-то области в пределах Web-страницы является распростра-
ненной практикой. На многих Web-узлах с объемными Web-страницами содержатся
“умные” ссылки, позволяющие пользователю быстро попасть в нужное место стра-
ницы. Задание ссылок на определенные участки в пределах Web-страниц других
пользователей менее распространено, потому что в этом случае труднее контроли-
ровать место, в котором автор другой Web-страницы решит поставить якоря ссылок,
а также нельзя быть уверенным в том, что якорь на другой странице все время будет
действительным. Разве вам понравится, если, к примеру, вы зададите ссылку на
очерк по виноделию, а потом обнаружите, что автор страницы заменил его на рас-
сказ о греческой мифологии?
Просмотр созданной страницы
Наступил момент, которого вы так долго ждали: независимо от того, выполнили вы все
ранее описанные инструкции или только некоторые из них, сейчас у вас есть “готовый к упот-
реблению” небольшой HTML-документ. Чтобы убедиться, что все в документе сделано пра-
вильно, его необходимо протестировать в Web-браузере.
В своем браузере можно не только просмотреть HTML-документ, но также проверить ра-
боту ссылок, указывающих на другие файлы, находящиеся как в вашей системе, так и в Web.
(Подразумевается, что ваш браузер все время подключен к Web. В противном случае провер-
ка ссылки, указывающей на другой Web-документ, закончится очень быстро.) С помощью
команды Назад (Back) браузера можно вернуться к сьоему документу.
В процессе тестирования необходимо учитывать только одно ограничение: ссылки на ваш
HTML-документ, расположенные на других Web-узлах, работать не будут, поскольку ваша
страница пока что сохранена на локальном компьютере, а не на Web-сервере. (Это маленькое
упущение мы наверстаем в главе 11 “Публикация Web-страниц”.)
Сейчас мы выясним, как следует просматривать HTML-документ в своем браузере. При
работе с HTML-документом эта процедура неизбежна. Итак, откройте документ и просмот
рите его в браузере. Измените документ и снова просмотрите его в браузере. И гак далее...
(Может быть, пришло время купить 19-дюймовый монитор, о котором вы давно мечтаете,
чтобы иметь возможность просматривать оба документа на одном экране?)
Возможности браузера
Якорь может связывать текущий документ с другим HTML-файлом или файлом какого-то другого типа
(графическим, звуковым, видеоклипом и т.п.). Зольшинстро браузеров автоматически работает с HTML-
файлами и графическими файлами форматов GIF и JPEG. Браузеры могут работать с другими типами
файлов либо автоматически, либо если пользователь укажет, какую программу следует для этого
использовать. В наших примерах мы ограничимся ссылками только на Н1 ML-файлы и на графические
файлы фор| .атов GIF или JPEG, потому что они поддерживаются практически всеми браузерами.
Для просмотра HTML-документа в браузере выполните следующие действия.
1.	Запустите свой браузер.
2.	В Netscape в меню Файл (File) выберите команду Open Page (Открыть страни-
цу), в Internet Explorer — команду Открыть (Open). В открывшемся диалоговом
окне Открыть (Open) щелкните на кнопке Обзор (Browse).
3.	Найдите свой HTML-документ на жестком диске и откройте его.
4.	Просмотрите свой HTML-документ в браузере.
Можете даже щелкнуть на ссылках и посмотреть, куда они ведут. Чтобы возвратиться
к HTML-документу, щелкните на кнопке Назад 'Back) своего браузера.
5.	Посмотрите, есть ли в HTML-документе какие-то ошибки, и подумайте, хотите
ли вы добавить какие-то элементы.
Вы можете обнаружить, что половина документа выделена курсивным начертанием,
а вторая половина подчеркнута, как ссылка. В чем дело? Быстренько исправьте ошибку!
6.	Откройте HTML-документ в программе подготовки текстов или в текстовом ре-
дакторе и устраните ошибку.
Для редактирования HTML-документа браузер закрывать не нужно. Прочитайте пре
дыдущие разделы главы — они могут вам помочь.
7.	Сохраните измененный HTML-документ.
Если вы забудете сохранить документ, то внесенные изменения не будуг отображаться
при просмотре в браузере.
8.	Для перезагрузки исправленного HTML-документа воспользуйтесь командой
Обновить (Refresh) своего браузера или аналогичной.
Если вы забудете перезагрузить страницу, то внесенные изменения не будут отобра
жаться при просмотре в браузере.
@Если вы забудете сохранить документ после внесения изменений или перезагру ш i ь
документ в браузере, то изменения отображаться не будут. Если это протонию,
вернитесь в текстовый редактор или программу подготовки документа, сохраню с
документ, вернитесь в Web-браузер и перезагрузите страницу.
9.	Повторяйте шаги 5-8 до тех пор, пока не будете полностью удовлетворены уви-
денным.
<^^4 Не забывайте пользоваться командой обновления страницы, когда после завершения
ISM I ее модификации вы захотите снова просмотреть ее в браузере.
Развитие HTML
С тех пор как “всемирная паутина” в середине 1990-х годов получила признание и широкое
распространение, язык HTML пое,ерпел ряд модификаций Все они были внесены на основе
устоявшихся исходных спецификаций с учетом появления новых функциональных возможностей Однако
внесенные уоозершенствования сделали язык HTML более сложным и добавили проблем
разработчикам Web-страниц.
Самым большим изменением стало добавление таблиц, фреймов и динамического HTML. Таолицы
используются не только для представления информации в определенной форме, но и помогают точно
расположить текст и графику Фреймы позволяют подразделить Web-страницу на отдельные, независи-
мо наполняемые информацией области. Они тоже используются достаточно широко хотя и не приоб-
рели такой же популяонссти, как таблицы.
В г.!аве 10 “Разработка красивых страниц” рассказывается о том, как и когда следует использовать эти
новые функции. Но для начала можно вполне успешно пользоваться только базовыми спецификациями
HTML, о которых идет речь в этой книге.
Следующие этапы изучения HTML
В этой главе мы рассмотрели лишь основы HTML. По мере создания тестирования и вне-
дрения Web-страниц вам могут понадобиться более глубокие познания в данной области.
Если вы работаете с Netcsape Composer или пользуетесь бесплатной службой, подобной
тем, которые описываются в главе 2 “Публикация в Web: провайдеры Internet и бесплатные
службы”, то можете избежать необходимости обращения к HTML-коду. Но вы никогда не
'наете, когда наступит тот момент, при котором HTML понадобится для добавления какого-
то элемента или устранения проблемы. Список HTML-дескрип горов можно найти на Web-
ресурсах, в том числе и на узле w3 . org И не забудьте о книге HTML и XML. Профессио-
нальная работа, вышедшей в издательстве “Диалектика”. Она является превосходным ис-
точником информации о языке HTML.
Часть II
Создание страниц

i ( {fAfr/fc
"9h\Oh\ бАикл ИОбВЯи^н ipvjhhf. SaaAIAH AuMUtof.^. Ha
wf.M pA3>Mf.tM,f.HM Би^о^ильмЬ! oSo &6f.y uy
&b!6h\v|hAf.HuAy & KOHUjtptoHbiy ЗАЛАУ, гобклцнцЧНЬ1У
HOMf-рАУ U АЗрОИОрМАУ.w
/3 atnou час/пи...
Пришло время подробно рассмотреть инструменты, позволяющие де-
лать с Web-страницами все что угодно. В части II вы узнаете, как можно
отформатировать свою страницу и разместить на ней ссылки. Кроме то-
го, перестанут быть тайной за семью печатями дескрипторы МЕТА. Они
помогут найти ваше творение другим искателям приключений в Web!
Глава 4
Выбор средств
Ь эгпой главе...
> WYSIWYG или обычный текст?
> Работа с Netscape Composer
> Использование текстового редактора
я в ля создания первоначальной Web-страницы с помощью шаблона можно воспользо-
ваться Web-службами, речь о которых шла в главе 2 “Публикация в Web: провайдеры
Internet и бесплатные службы”. Однако на определенном этапе вы захотите усовершенство
вать свою страницу и выйти за рамки предлагаемого шаблона. Для этого необходимо отка
заться от использования Web-инструментов и создать Web-страницу на жестком диске своею
компьютера. Созданную и протестированную Web-страницу можно разместить на любом и i
Web-хостов, в том числе на Yandex-Народ или Yahoo! GeoCities.
В этой главе вы узнаете о том, как создать Web-страницу локально, на жестком диске сво
его компьютера. В нескольких последующих главах мы расскажем о том, как можно усовер
шенствовать Web-страницу и расширить ее до многостраничного Web-узла. В главе I I
“Публикация Web-страниц” речь пойдет о публикации в Web одной или нескольких страниц,
хранящихся на вашем компьютере.
Данная глава поможет вам выбрать инструмент, который подойдет для создания страницы.
@ Web-служба Yahoo! GeoCities предлагает некоторые сложные средства, предоставляю
щие достаточно широкие возможности для усовершенствования Web-страницы. Однако
эти инструменты привязывают вас к службе, предоставляющей их. Если вы ничего не
имеете против того, чтобы в течение длительного времени размещать свою страницу на
одном и том же хосте, можете воспользоваться ими. Концепция, которую мы описываем
в данной книге, дает гораздо больше возможностей достичь оптимального соотношения
низких затрат и высокой адаптивности созданной таким образом страницы.
WMSJWMQ или обычный rfLeK.crfij
Для создания и редактирования Web-страниц на своем компьютере можно применять ра <
ныс подходы. Одним из них является использование редактора Web-страниц, работающего ни
основе концепции WYSIWYG (что видишь, то и получаешь). Такой редактор подобен про
 рамме подготовки текстов, т.е. то, что вы видите на экране, максимально соответствуе i ю
му, что будет получено при публикации страницы и ее просмотре в Web.
Проблема WYSIWYG заключается в том, что данная концепция не совсем идеально
. (Ж< ) подходит для Web. Как уже говорилось в главе 3 “Введение в HTML”, различные
_ Wcb-браузеры интерпретируют HTML-дескрипторы по-своему. Кроме того, полью
о нагели могут по-разному настраивать свои браузеры, а это означает, что одна и га же
Web-страница будет выглядеть по-разному. Все это требует дополнительных усилий
для того, чтобы страница выглядела строго определенным образом, т.е. так, как хо-
тел бы ее автор. Чтобы обойти эти проблемы и создать Web-страницу, которая бы
идеально отображалась в максимально возможном числе браузеров с самыми раз-
ными настройками, необходимо знать основы языка HTML.
Именно по этой причине многие создатели Web-страниц работают непосредственно с HTML-
[ескрипторами. Можно работать и с редактором WYSIWYG, но при этом приходится часто про-
трать, как будет выглядеть текст с HTML-размегкой, который обычно называют HTML-кодом.
Мы рекомендуем работать либо непосредственно с HTML-кодом, либо с простым инст-
>ументом WYSIWYG, который не пытается выполнять слишком много работы вместо вас
и при этом почаще проверять полученный HTML-код). В качестве такого инструмента мож-
ю порекомендовать Netscape Composer.
1люсы и минусы текстовых редакторов
Ар1ументы в пользу редактирования HTML-кода непосредственно в текстовом редакторе дос-
рочно просты. Вы работает е только с HTML-кодом и ни с чем другим. Вы всегда видите HTML-
1сскрипторы. Если вы захотите добавить на Web-страницу какой-то элемент, то вам придется изу-
1ить соответствующие HTML-дескрипторы и затем использовать их, а это означает, что посте-
1енно вы добьетесь глубокого понимания языка, используемого для создания Web-страниц.
Аргументы против редактирования HTML-кода непосредственно в текстовом редакторе
оже достаточно просты. Глядя только на текст и дескрипторы, непросто представить себе,
ак будет выглядеть Web-страница. Работая непосредственно с дескрипторами, можно легко
опустить ошибки в создании страницы, а при попытке внесения дополнений или изменений
। Web-страницу очень просто запутаться в HTML-коде.
На рис. 4.1 показано, как будет выглядеть простая Web-страница при редактировании
। текстовом редакторе (слева) и в окне редактирования Netscape Composer (справа). Глядя на
тот рисунок, вы сможете определить, в какой среде вам будет легче работать. Если сразу
того сделать не удастся, попробуйте воспользоваться инструкциями, приведенными в дан-
ши главе, и посмотрите, какой способ для вас предпочтительнее.
1люсы и минусы Netscape Composer
Использование редактора WYSIWYG, такого как Netscape Composer, имеет свои “за” и “про-
ив". Редакторы WYSIWYG скрывают от вас HTML-код, и это позволяет увидеть, как будет
ыглядеть страница при ее размещении в Web. Но, поскольку основные HTML-дескрипторы
крыты от вас, вы не знаете, что в точности происходит с кодом. Современные редакторы
VYSIWYG поддерживают некоторые новые функции работы с HTML, что является преиму-
цеством для тех, кто хочет их использовать, но при этом создаются Web-страницы, которые
югут не отображаться корректно во всех Web-браузерах.
Программа Netscape Composer обладает большинством преимуществ HTML-инструмента
। всего лишь несколькими его недостатками. Ниже перечислены шесть основных преимуществ.
С Netscape Composer предоставляется бесплатно. Netscape Composer постав-
ляется бесплатно вместе с Netscape Navigator, одним из самых популярных
Web-браузеров.
С Простота использования. Netscape Composer очень проста в использовании
Преимущество отдается легкости работы за счет отказа от некоторых слож-
ных функций редактирования.
<HTHL>
<HEAD>
<1I TLE>Welcor»e to Netsurfer</TITLE>
</HEAD>
<BODV bgcolor ttQQOGOO>
.i Welcome to Natsurfei Composer
File Edit View Insert Format Talkie Tasks Help
4 d Л	Э
Of Ml|	’«ЦВ	I
[ BodyText % >a в x ц
<CEMTER>
<TABLE>
<TR>
<ID ALIGN=CENTER>
<A HREF="http://www.netsurf.com/nsd/" AL
<IMG BORDER=0 SRC="http://viww.netsurf .coi
<TD>
<A HREF="http://www.netsurf.com/nsd/" AL
<IMG BORDER=B SRC="http://www.netsurf.coi
</lR>
<TR>
HLICH=CEHTER>
;<A HREF="http://www.netsurf.com/nss/" AL'
i<IHG BDRDER=Q SRC="http ://www.netsurf-coi
!<TD>
,<A HREF=~http://www.netsurf .cum/nss/" AL
<IMG B0RDER=6 SRC-"http://www.netsurf.coi
[</TR>
i<TR>
<TD ALIGN=CENTER>
<A HREF--="http://www.netsurf.com/nsb/" AL'
<II1G BORDER=0 SRC="http://www.netsurf.coi
I	----- - I
FN>NETSUHFERDIfiE8T
Й NETSURFER science
й NETSURFEU BOOKS
flETSURFER EDUCATION
NEISUfiFER FGCUS
Net -mH. - <'ontmunicerticms, lfcti
Л Normal Show All Tagsp Soaice |  Pieview
И 0/ . Bone loading page
Рис. 4.1. Страницу можно создать в текстовом редакторе или в программе Composer
•J Функции программы соответствуют таковым, выполняемым с помощью
HTML-дескрипторов. Функции, доступные в Composer, поддерживаются
и в HTML. Поэтому при создании Web-страниц вы не выполните никаких опе-
раций. которые не поддерживались бы Web-браузерами.
J Используется только “стандартный” HTML. В Composer используются толь-
ко те функции, которые поддерживаются во всех широко распространенных
версиях HTML. Созданные с помощью Composer Web-страницы, вероятнее
всего, можно будет просматривать во всех основных Web-браузерах.
J В программе можно увидеть и отредактировать HTML-код. В Netscape
Composer с помощью всего одного щелчка мышью можно получить доступ
к HTML-дескрипторам, определяющим вид Web-страницы. Легкость редак-
тирования обеспечивается в режиме WYSIWYG, но при этом имеется воз-
можность просмотра и редактирования текста с HTML-разметкой.
J Программа является частью Netscape Navigator. Composer поставляется
вместе с Netscape, являющимся вторым по популярности браузером для Web.
В любом случае перед публикацией Web-страниц для их тестирования пона-
добится, чтобы в системе наряду с Internet Explorer был установлен и Netscape.
Поскольку Netscape вам понадобится в любом случае, то наличие Composer
в пакете с Netscape является очень удобным.
1>пагодаря таким полезным особенностям Netscape Composer уверенно занимает нишу
и* iy 1екстовыми редакторами и работой непосредственно с HTML-дескрипторами, которая
tii'BicicH весьма утомительной и чревата появлением ошибок в процессе редактирования
и m.ikciировапия орании. Однако Netscape Composer является более простой программой
по сравнению с пакетами FrontPage и Dreamweaver, которые могут озадачить неискушенного
пользователя обилием функций.
Поэтому большинству новичков в области создания Web-страниц мы рекомендуем поль-
юваться программой Composer и при этом часто проверять HTML-код, чтобы понять, что
с ним происходит в процессе создания страницы. После того как вы побольше узнаете HTML,
вы сможете либо приобрести и использовать более сложный HTML-редактор, либо остане-
тесь приверженцем более простых инструментов.
iA Мы рекомендуем сначала использовать Composer даже в том случае, если у вас есть
более сложный HTML-редактор, такой как Dreamweaver или FrontPage. Дело в том, что
Composer проще, бла, одари чему облегчается процесс изучения основных функцио-
нальных возможностей HTML.
Если на вашем компьютере установлено программное обеспечение Netscape, то, воз-
можно, вы уже являетесь обладателем Netscape Composer. Выберите команду Пуск1*
Программы^ Netscape ^Composer (либо найдите аналогичную папку) и посмот-
рите, установлена ли на компьютере программа Netscape 7.x. Если это так, проверь-
те, установлена ли программа Composer отдельно или в виде модуля браузера
Netscape. Если программа Composer обнаружена, вы можете запустить ее и восполь-
зоваться инструкциями, приведенными в этой главе.
.	с J/etscafze Comfioser
Программа Netscape Composer обладает всеми основными возможностями по созданию
Web-страниц. Она позволяет:
J создавать и редактировать Web-страницы без просмотра HTML-дескрипторов;
J перетаскивать ссылки без указания URL или пути;
J вырезать и размещать на Web-странице графические изображения, изменять
их размеры и добавлять пояснительный текст;
. J создавать и редактировать таблицы;
создавать и редактировать формы — интерактивные поля для ввода данных,
которые часто встречаются на Web-страницах.
Кроме того, на Web-странице можно разместить мультимедийные файлы и компьютерные
программы. Однако эти файлы и программы смогут запустить далеко не все пользователи,
поскольку у них может не оказаться нужной версии браузера или надстройки. Если вы лобан
ляете на Web-страницу сложные элементы, такие как мультимедийные файлы или компью
терные программы, будьте готовы протестировать страницу в нескольких разных браузерах
с гем, чтобы сообщить посетителям, чего им стоит ожидать.
Netscape Composer поддерживает формы, но не предоставляет CGI-сценарии
I (сценарии общего шлюзового интерфейса), необходимые для того, чтобы заставип.
V / формы работать. CGI-сценарии обрабатывают данные, которые пользователь вводи!
%’овно^ в форму. Если вы можете создавать CGI-сценарии, то это означает, что, вероятнее все
го, вы уже готовы к использованию более сложного инструмента, чем Netcsape Com
poser. Но если вы не хотите возиться со сценариями, просто позаимствуйте их в Web
Netscape Composer не поддерживает фреймы— сложные НТМЕ-элсмешы, pavicJiMiouim
Web-страницу на несколько отдельно прокручивающихся частей Разработка Web cipanini
содержащих фреймы, является непростой процедурой, поэтому данная функция вполне обос-
нованно не включена в Netcsape Composer.
Несмотря на то что Netscape Composer не поддерживает фреймы, вы можете доба-
вить на Web-страницу любые необходимые HTML-дескрипторы. Однако смысл ис-
пользования данного инструмента заключается в минимизации работы с HTML-
кодом. Если из-за ограниченных возможностей Netcsape Composer вам приходится
часто работать непосредственно с HTML-кодом, подумайте о приобретении более
мощного инструмента, такого как FrontPage или Macromedia Dreamweaver.
4®^
программное обеспечение Netscape
^'РОВИО’^
Как называть
Если вы предполагаете работать с программным обеспечением Netscape, названия которого менялись
в течение многих лет, имеет смысл познакомиться с историей этой знаменитой компании. Компанию
Netscape основали Джим Кларк (Jim Clark), один из соучредителей фирмы Silicon Graphics, и Марк
Андрисен (Mark Andreesen), ведущий специалист коллектива, создавшего один из первых Web-
браузеров Mosaic. Компания Netscape разработала новый браузер, Netscape Navigator, ставший
удобным средством для работы в Сети и быстро заменивший Mosaic.
Netscape Navigator широко использовался в течение нескольких лет, до тех пор, пока компания Microsoft
не представила на рынке Internet Explorer. Первые версии этого браузера были не очень хороши, но по
мере совершенствования он становился все более популярным. Microsoft удалось заключить со
многими производителями компьютеров чрезвычайно выгодные для них соглашения по
распространению своего браузера.
Компания Netscape превратила Navigator в пакет связанных друг с другом приложений (электронная
почта, адресная книга и календарь), который получил название Netscape Communicator. Последняя
версия этого пакета — Netscape Communicator 4.7. Эта программа в течение некоторого времени была
весьма популярной, но постепенно ведущие позиции на рынке занял браузер Internet Explorer.
В настоящее время Internet Explorer является самым распространенным браузером, которым пользуются
около 90 процентов пользователей всего мира. Оставшаяся часть работает преимущественно с Netscape.
В настоящее время программное обеспечение компании Netscape называется Netscape, после чего
указывается номер версии. Мы рассматриваем версию Netscape 7.1. В программный пакет Netscape
вошли все модули старого пакета Netscape Communicator, за исключением календаря и Netscape
Composer. Пользователь может сам выбрать, с какими модулями он хочет работать. Основой
программного пакета является браузер Netscape, а на момент написания этой книги вместе с ним
w ружалась и Netscape Composer — программа, которую мы рекомендуем для создания Web-страниц.
Если вы услышите, что кто-то произносит слова Netscape, Navigator, Communicator или Netscape 6.1,7.1
или 7.2, знайте, что речь идет об одном и том же: о программном обеспечении браузера Netscape с
дополнительными модулями или без них.
Как запустить Netscape 7.1
На момент написания данной книги последняя версия программного обеспечения
Netscape называлась Netscape 7.1 (ознакомьтесь с врезкой “Как называть программное обег
..сине Netscape”)1. Вы можете сами решить, какие части данного пакета следует загрузни,
па свои компьютер; можно загрузить все модули пакета Netscape (в том числе и почтовое
Ни момент перевода книги на русский язык была уже доступна версия Netscape 8.0. Однако в co-
in in иного браузера программа Composer не входит. Поскольку предыдущая версия Netscape 7.1, вме-
ни I программой Composer, по-прежнему доступна и предоставляется бесплатно, далее будет опи-
лив именно она. Примем, ред.
приложение), только браузер (вместе с Composer) или какие-то другие комбинации. Версию
Netscape 7.1, а также другие версии этой и предыдущих программ можно получить на узле
http://browser.netscape.com/ns8/download/archive.jsp, страница которого
изображена на рис. 4.2.
Рис. 4.2. Все версии Netscape на одной странице
В данной главе мы расскажем о том, как получить основные модули, необходимые для
создания Web-страниц,— браузер Netscape 7.1 и Composer. Вы можете загрузить и другие
модули данного пакета. Для этого следуйте инструкциям, приведенным в следующем разделе.
Для запуска Netscape 7.1 необходимо наличие одной из следующих систем.
J Windows. Netscape 7.1 можно запустить при наличии Windows 98 или любой
последующей версии этой операционной системы (Windows 98SE, Win-
dows Me, Windows NT 4.0, Windows 2000 или Windows XP). Необходим про-
цессор с частотой 233 МГц или более быстрый, 64 Мбайт оперативной памя-
ти и 52 Мбайт свободного пространства на жестком диске. (Фактически
Netscape 7.1 можно запустить и на менее производительной системе; главное,
чтобы на жестком диске было достаточно места для установки модулей
Netscape 7.1. Однако производительность при этом будет страдать.)
S Macintosh. В данном случае необходимо наличие одной из последних версий
этой операционной системы: Mac OS X 10. lx, Mac OS X 10.2х либо более
поздней. Аппаратные требования очень похожи на таковые, предьявлясмые
к платформе Windows: процессор 266 МГц или более быстрый, 64 Мбайт
оперативной памяти и 72 Мбайт свободного пространства на жестком диске.
г J Linux. Netscape 7.1 запускается на компьютерах с архитектурой Intel, рабо-
’ тающих под управлением Linux. Необходимо наличие операционной системы
Red Hat Linux 7.0 или последующих версий либо ядра 2.2.14 с пакетами #glive
2.2.4, gtk+ 1.2.0 (желательна версия 1.2.5 или выше) и Xfree86 3.3.6.6. Anna
ратные требования такие же, как и необходимые для запуска Netscape под
Windows: процессор 233 МГц или более быстрый, 64 Мб:н'и опера питой па-
—... .. so кл^пйт nnntSnniinro nnociпапеina па жепком диске как и и случае
c Windows, программу можно запустить и на более простой системе, но при
этом производительность будет хуже.
v' UNIX. При наличии рабочей станции UNIX (не использующей микропроцес-
сор Intel и Red Hat Linux) вы также можете использовать Netscape 7.1.
Если вам необходимо использовать одну из старых версий Netscape или, наоборот,
новую, 8.0, следуйте появляющимся на экране инструкциям по ее установке. Они
будут очень похожи на инструкции по установке Netscape 7.1, но все же не полно-
стью аналогичными.
Получение Netscape Composer
Возможно, что в вашей системе уже установлена Netscape Composer— бесплатная про
। рамма для создания Web-страниц. У вас может быть установлен старый пакет Communicator,
к состав которого входят Web-браузер Netscape Navigator, почтовое приложение, функции
поддержки обмена мгновенными сообщениями, адресная книга и т.д. Либо на вашем компь-
ютере может быть установлен только браузер Netscape Navigator без других модулей пакета
('ornmunicator. Вы можете обновить свое ПО до версии Netscape 7.1, в версию 8.0 программа
< omposer уже не входит.
В данном разделе подробно описывается, как получить версию 7.1 только программы
Netscape (вместе с Composer), без остальных модулей, входящих в состав пакета Communicator.
>го связано с тем, что загрузка одного лишь модуля Navigator выполняется быстрее. Кроме то-
। о, у вас будет более простой программный пакет, занимающий меньше места на жестком диске.
Мы расскажем также, что нужно сделать, если вы захотите загрузить другие модули.
Обязательно обновите свое программное обеспечение, если у вас установлена версия
(Netscape Navigator 6.0, поскольку она работает медленно и содержит дефекты. В по
чжу следующих версиях, 6.1 и 6.2, эти недостатки были устранены.
Если вы имеете дело с сетевым бизнесом, работаете в крупной организации или
[ j учебном заведении, выясните, какую версию программы Netscape вы можете уста-
кж У новить на своем компьютере. Это поможет избежать конфликтов, которые потении
ально могут возникнуть в связи с взаимодействием программного обеспечения
Netscape и сети.
’ У Процедура загрузки программного обеспечения Netscape может несколько из-
ц№ ) мениться вследствие модификации Web-узла Netscape. Если какие-то шаги при
(0У веденной ниже инструкции не соответствуют тому, что вы видите на экране
своего компьютера, попробуйте загрузить обновленную инструкцию с Web-узла
www. creating-web-pages. com.
Дня того чтобы получить версию 7.1 Netscape Navigator, выполните следующие действия.
I.	Откройте страницу Archived Products (см. рис. 4.2), расположенную по адресу
http://browser.netscape.com/ns8/dovmload/archive.jsp. Если за время
подготовки нашей книги к печати адрес этой страницы изменился, перейдите на нее
с домашней страницы Web-узла Netscape (www.netscape.com). Для этого выполни
ie следующие инструкции.
• Зайдите на Web-узел Netscape ио адресу www.netscape.com.
Откроется начальная страница Web-узла Netscape. Ее загрузка может быть доста-
точно медленной в случае использования низкоскоростного модемного соедине-
ния, поскольку страница эта достаточно сложная и содержит много небольших
графических изображений.
На домашней странице Netscape щелкните на ссылке Netscape 8.0, располо-
женной в области Tools (в левой нижней части окна). Откроется страница The
All New Netscape Browser 8.0.
На странице загрузки щелкните на ссылке Archived Products в области
Downloads (в левой части окна). Огкроется страница Archived Products.
2.	Щелкните на ссылке Versions 7.1 х. Откроется окно, представленное на рис. 4.3.
Здесь можно выбрать версию программы с учетом операционной системы, установ-
ленной на вашем компьютере, и языка интерфейса (английский, немецкий, француз-
ский либо японский). Далее мы будем описывать процедуру установки англоязычной
версии программы на компьютер, работающий под управлением Windows.
Рис. 4.3. Страница Download Netscape 7.1 позволяет выбрать язык интерфейса и версию программы
3.	Щелкните на серой кнопке Download Now!, расположенной ниже надписи 7.1
English — Netscape Windows. Откроется окно загрузки файла с предупреждением cm
темы безопасности о том, что этот исполняемый файл может быть потенциально опасным
4.	Щелкните на кнопке Выполнить. Начнется загрузка файла NSSetup.exe объемом
261 Кбайт; процесс загрузки будет отображаться в обычном для таких случаен окт
Internet Explorer. По завершении загрузки вновь появится окно с предупреждением
г-мг-тамы Рр-зппяснлсти Windows, не обнаружившей цифровую noniimi. и щ.'пеня.
5.	Вновь щелкните на кнопке Выполнить. Откроется окно Netscape 7.1 — Welcome.
6.	Щелкните на кнопке Next (Далее). Откроется окно с лицензионным соглашением.
7.	Щелкните на кнопке Accept, чтобы принять лицензионное соглашение. Откроет
ся диалоговое окно Setup Туре, которое поможет вам выбрать тип установки.
8.	В диалоговом окне Setup Туре выберите тип Custom (Пользовательская)
и щелкните на кнопке Next. Откроется диалоговое окно Create Directory? (Создать
каталог?).
9.	Щелкните на кнопке Да. Откроется диалоговое окно Select Typical Components
(Выбор базовых компонентов) (рис. 4.4).
10.	В диалоговом окне Select Typical Components снимите флажок в поле опции Mail
& Instant Messanging, если хотите загрузить только модули для создания Web-
страниц. В поле опции Spell Checker флажок оставьте. Щелкните на кнопке Next.
11.	Почтовая программа (Mail) и программа мгновенного обмена сообщениями (Instant
Messanging) занимают около 2,5 Мбайт. Модуль Spell Checker, занимающий около
470 Кбайт, поможет избежать грамматических ошибок и опечаток на Web-страницах.
Откроется диалоговое окно Select Additional Components (Выбор дополнительных
компонентов) (рис. 4.5).
В этом диалоговом окне рекомендуется снять флажки с полей всех опций, если только
вы не уверены в том, что они понадобятся вам для посещения Web-узлов с использо-
ванием Netscape Navigator, или если вы не планируете добавлять на свою Web-
страницу мультимедийные файлы, для тестирования которых может понадобиться со-
ответствующий модуль. К дополнительным компонентам относятся следующие.
Irias
fflESBK . " «ЫЯ
Netscape Navigator is	Select tx clear .the
eddlion^ ccwpcnenis you want Ip rstell
Components:
r	—-................ ..........
,И Mail &iipsbyit. Messaging
> Spell Checker
Cf-scnFton
lor using email, newsjyajps. instant messaging (AIM & ICQi
Total devrfoat} size.	Space Avatebfe
26847 KB	С 180728 KB
Select or clear the additional components you war* to instatl
fekMhnal Согфзгй:;
4 Sun Java 2
.7. Quality Feedback Agent
i ) AOt ART Extension!
i , Macromeda Flash Player
I. i McAfee Clinic Activator
I • Viewpoint Media Player
Description
Web development took
Total download size:	Space Available
10966 KB	С: 180720 K8

NHv ф* Z1
< flack |[	. I £ancel j
<	Ц~~^ех1>| Cancel
I'm- 4.4. Выберите загрузку только модулей
Navigator и проверки правописания
Рис. 4.5. Подумайте, стоит ли загружать какие-
то дополнительные компоненты
• Sun Java 2 (9,9 Мбайт). Язык Java все реже используется на Web-узлах из-за про-
] У блем, связанных с безопасностью. Поэтому, если вы не планируете использовать
Java на своем Web-узле, не стоит загружать модуль, размер которого составляет
почти Ю Мбайт.
• Macromedia Flash Player (420 Кбайт). На некоторых узлах используются Rash-
компоненты, поэтому, возможно, вы захотите загрузить этот относительно не-
большой модуль. (Для создания Flash-анимации он не подойдет. Для этого необ-
ходимо загрузить соответствующие средства с Web-узла Macromedia по адресу
www. macromedia. com.)
•	McAfee Clinic Activator (40 Кбайт). Есин ны нольlyeiccb программой McAfee
VinisScan. io, возможно, решите загрузить этот модуль, он поможет вам отслежи-
вать обновления данной программы.
•	Viewpoint Media Player (2,2 Мбайт). Модуль, альтернативный QuickTime или
RealPlayer, о котором мало кто знает; поддерживает новые стили онлайновой рекламы.
•	WinAmp (2,2 Мбайт). Этот модуль хорошо подходит для воспроизведения МРЗ-
файлов. Если вы планируете разместить на своей странице файлы этого формата,
загрузите данный модуль. (Более подробная информация представлена в главе 12
“Анимация и мультимедиа”.)
•	Radio ©Netscape Plus (1,9 Мбайт). Дополнительный модуль, обеспечивающий
воспроизведение программ множества радиостанций.
•	Canadian Region Packs (60 Кбайт). Этот модуль может понадобиться только
в том случае, если им пользуются большинство посетителей вашей Web-страницы,
в этом случае вы можете знать, что именно они просматривают. Но поскольку при
установке этого модуля возникает много проблем, вряд ли ваши посетители поль-
зуются им. Поэтому мы рекомендуем не устанавливать его.
•	Developer Pack (500 Кбайт). Если вы планируете отлаживать сценарии JavaScript,
этот модуль вам пригодится. Если же вы не используете клиент Chatzilla IRC или
DOM Inspector, — а если вы не знаете, что это такое, то. скорее всего, эти про-
граммы вам нс нужны, — то не устанавливайте Developer Pack.
Следующие три компонента в сумме имеют объем около 1 Мбайт. Это следующие
модули:
•	Quality Feedback Agent, который сообщает об ошибках, если они возникают при
использовании Netscape;
•	AOL ART extensions — расширения AOL ART, позволяющие просматривать гра
фику. оформленную в стиле AOL — крупнейшего Internet-провайдера США;
•	Classic Skin, придающий окну браузера старомодный вид.
Сняв все флажки (или оставив некоторые из них), щелкните на кнопке Next. Откроет
ся диалоговое окно Select Program Folder (Выбор программной папки).
12.	В диалоговом окне Select Program Folder оставьте опцию, выбранную по умол-
чанию, и щелкните на кнопке Next. После щелчка на кнопке Next откроется диало-
говое окно Quick Launch (Быстрый запуск).
13.	Активизируйте опцию быстрого запуска, если планируете все время пользовать-
ся Netscape Navigator. В противном случае не устанавливайте флажок в поле
данной опции. Щелкните на кнопке Next. После выбора опции быстрого запуска
часть кода Netscape Navigator переместится в программу автозагрузки компьютера.
Это означает, что часть операций загрузки программы при запуске Navigator уже будет
выполнена, однако на это будет тратится несколько лишних секунд при каждом запус
ке компьютера. Кроме того, будут заняты системные ресурсы, которые могут понадо
биться другим программам, хотя вы сэкономите несколько секунд при каждом запуске
Navigator. На это стоит пойти в том случае, если вы хотите все время пользоваться
Netscape Navigator, а не Internet Explorer или каким-нибудь другим браузером.
Откроется диалоговое окно Additional Options (Дополнительные опции).
14.	В диалоговом окне Additional Options снимите флажок в поле опции Маке
Netscape.com Му Ноте Раде (Сделать Netscape.com моей домашней страницей).
если только вы не хотите, чтобы эта перегруженная информацией и медленно
загружающаяся страница изображалась на экране вашего компьютера каждый
раз, когда вы запускаете браузер Netscape. Не устанавливайте флажок в поле
опции Save Installer Files Locally (Сохранить установочные файлы на моем
компьютере). Щелкните на кнопке Next. Если процедура установки пройдет нор-
мально, то вам не понадобится выполнять ее повторно, поэтому вам не нужны буду г
установочные файлы.
Откроется диалоговое окно Start Install (Начать установку).
15.	В диалоговом окне Start Install просмотрите ранее выбранные опции. Если не-
обходимо внести изменения, щелкните на кнопке Back (Назад) нужное число раз,
внесите изменения и вернитесь к данному окну. После этого щелкните на кнопке
Install (Установить).
После щелчка на кнопке Install откроется диалоговое окно загрузки. Если вы вы-
/ ) брали минимальный набор модулей, подлежащих загрузке (например, только мо-
дули Netscape Navigator и Spell Checker), то размер загружаемых файлов будет
около 11 Мбайт. При наличии быстрого соединения процесс загрузки займет не-
сколько минут, а при наличии модема со скоростью работы 56 Кбит/с или
28,8 Кбит/с он займет соответственно 45 минут или более часа.
По завершении установки на рабочем столе появится папка Netscape 7.1. Как браузер
Netscape Navigator, так и программа Composer будут представлены в меню Пуск ваше
го компьютера.
Если потребуется Internet Explorer
В настоящее время около 90 процентов пользователей работают с браузером Internet Explorer. Но вы
можете оказаться одним из тех, у кого на компьютере данный браузер не установлен или имеется
< гарая версия, подлежащая обновлению. В этом случае зайдите на Web-узел Microsoft по адресу
www.microsoft.ru и щелкните на ссылке Downloads. Следуйте приведенным инструкциям по
мгрузке и установке текущей версии Internet Explorer. Процедуры будут более простыми по сравнению
< теми, которые необходимы для загрузки и установки Netscape Navigator.
Здесь есть один “подводный камень”. Вы можете не захотеть обновлять свою версию Internet Explorer,
если у вас установлена старая версия, в состав которой входит Frontpage Express. Этот редактор Web-
(границ входил в состав старых версий Internet Explorer, а в новых не предлагается. Если в вашей
нерсии Internet Explorer имеется Frontpage Express, то для его сохранения браузер обновлять не следует
(некоторые новые версии Internet Explorer не могут сосуществовать на одном компьютере со старыми).
Использование Netscape Composer
В последующих главах рассказывается о том, как использовать Composer для внесения тех
и» и иных изменений на Web-узле. Но сначала выполните приведенные ниже действия для ia
нм ка Netscape Composer и научитесь ориентироваться в программе.
1.	Запустите Netscape Navigator.
Для этого нужно выбрать команду nycK^riporpaiviMbi^Netscape 7.1 ^Navigator (Start s
Programs^ Netscape 7.1 ^Navigator).
О ткроется окно Navigator. Домашняя страница Netscape показана на рис. 4.6.
Рис. 4.6. Navigator откроет для вас свою насыщенную информацией домашнюю страницу
Вы можете также запустить Composer напрямую, сразу же выполнив шаг 2, но
обычно браузер Netscape все равно запускается одновременно с Composer. Вы
можете воспользоваться им для поиска содержимого или ссылок для своей Web-
страницы и для се тестирования в процессе разработки.
©Когда запускается Netscape Navigator, открывается начальная страница Web-узла
Netscape. Этот процесс будет происходить медленно в случае отсутствия быстрого
соединения, поскольку загружаемая страница сложная и содержит большое количе-
ство графических изображений. Данная страница по умолчанию является домашней
страницей браузера Netscape Navigator. (Вы можете заменить ее на страницу, которая
вам больше нравится. Для этого, открыв эту страницу, выберите команду Edit1^
Preferences. Найдите в области Home раде кнопку Use Current Раде и щелкните
на ней. В поле Location появится адрес открытой в данный момент страницы.)
2.	Запустите Composer с помощью команды Window^Composer.
Откроется окно Composer (рис. 4.7).
3.	Откройте разные меню и посмотрите, какие опции и кнопки в них имеются.
Выполняемые Composer функции полностью соответствуют возможностям HTML, по
этому, ознакомившись с опциями меню, вы получите представление о том, что можно еде
лать на Web-странице. В оставшихся главах данной части будет подробно рассказано о том.
как можно создать Web-страницу с помощью Composer.
использование /пекс/пового ^ес/ак/nofia
Если вы хотите работать с текстовым редактором, то у вас есть следующий выбор.
; J “Чистый” текстовый редактор, такой как Блокнот (Windows) или НИ Edit
(Macintosh). В “чистых” текстовых редакторах к тексту не добавляюзея пика
кие элементы форматирования, поэтому вам не нужно о них беспокой  вся.
Рис. 4.7. Composer помогает создать Web-страницы, достойные внимания
На прилагаемом к этой книге компакт-диске имеется программа NoteTab Lite,
аналог Notepad, но с возможностями HTML, и BBEdit — программа для ре-
дактирования текстов на компьютерах Macintosh, а также ряд ее расширений
для редактирования Web-страниц.
J Пользователи IBM-совместимых ПК могут поискать бесплатные или услов-
но-бесплатные текстовые редакторы с функциями Web-редактирования. На-
чать можно с узла Download.com компании C|Net, расположенного по адресу
www,download.com.
Программа подготовки и редактирования текста. Вы можете воспользо-
ваться текстовым процессором Microsoft Word, WordPerfect или аналогичной
полнофункциональной программой. Однако вы всегда должны сохранять фай-
лы для ваших Web-страниц в формате HTML и добавлять расширение . htm
в конце имени файла. Кроме того, из-за изобилия возможностей форматирования
вашего текстового процессора могут возникнуть проблемы, поскольку многие
из этих возможностей не поддерживаются HTML и соответствующее формати-
рование не будет применено к тексту при размещении его на Web-странице.
'"’"Х При работе с программой подготовки и редактирования текстов или с текстовым ре-
цЛ ] дактором файлы Web-страницы следует сохранять с расширением . htm. Кроме то-
МаРУ го, при использовании программы для подготовки и редактирования текстов следует
дополнительно указать, что файл необходимо сохранить как обычный текст, без ка
кого-либо форматирования.
Выбор программы для подготовки текста всегда является определенным компромиссом.
I лк. при использовании простого текстового редактора к документу не добавляется формати-
poii.niiie. которое присуще программам подготовки текстов,— файл всегда сохраняется как
 <>ычный текст. Помимо этого, текстовые редакторы достаточно просты. В них нет парамет-
p.iii форматирования, которые могут поддерживаться или не поддерживаться в HTML.
Однако программы для подготовки и редактирования текстов хорошо знакомы пользова-
телям. Например, вы точно знаете, как работают такие функции, как проверка правописания,
формат ирование, печать и т.п. Это может стать преимуществом, когда приходится иметь де-
ло с большим и сложным файлом, предназначенным для размещения на Web-странице.
Многие модули проверки правописания не могут надлежащим образом трактовать
[	| HTML-дескрипторы, вследствие чего они не пригодны для Web-страниц. Модуль
/ проверки правописания программы Composer может работать с текстом, размещае-
мым на Web-странице, т.е. эта проблема в данном случае отсутствует.
Вы можете работать как с текстовым редактором, так и с программой подготовки текстов,
но наш опыт показывает, что использовать текстовый редактор предпочтительнее. Практиче-
ски все профессиональные разработчики Web-страниц наряду с эффективными инструмента-
ми для создания Wcb-страниц. такими как FrontPage и Dreamweaver, для выполнения опреде-
ленной части работы используют текстовые редакторы.
Если для редактирования Wcb-страниц вы используете программу подготовки тек-
стов, го можете обнаружить, что в программе имеется опция, позволяющая работать
• непосредственно с Web-страницей. К сожалению, нам кажется, что от данной функ-
ции бывает больше путаницы, чем пользы. Если же вы достаточно хорошо владеете
программой подготовки текстов, попробуйте воспользоваться этой опцией.
Глава 5
Создание домашней страницы
в эгпой главе...
> Что необходимо поместить на домашней странице
е Начинаем создавать страницу
х Дескрипторы МЕТА
*77"
# # роцедура создания домашней Web-страницы доставляет не только удовольствие,
С* в некоторых случаях она является предметом беспокойства. После того как стра-
ница будет опубликована в World Wide Web, вы испытаете такое же чувство, какое могло бы
возникнуть после размещения своего объявления в самом бойком месте города.
Иногда бывает трудно сформулировать мысли, которые вы хотите донести до публики,
поэтому в этой главе мы изложим некоторые идеи по этому поводу. К счастью, механическая
часть работы, т.е. собственно создание страницы и ее размещение в Web, достаточно прост а.
В этой главе мы расскажем о том, как создать саму страницу, а в следующей речь пойдст
о добавлении графики. В последующих главах вы узнаете о том, какие действия следует
предпринять для дальнейшего совершенствования своей страницы. А в главе 11 “Публикация
Web-страниц” мы расскажем о том, как опубликовать страницу в Web.
Ч/но нео&социм) калсес^иигь
на домашней ан/ганлще
Многие считают, что самым важным для публикации Web-страницы является изучение
IITML. Можно записаться на курсы по изучению HTML или купить какую-нибудь умную
книгу, подобную этой, и вы будете считать себя вполне готовым для создания своей первой
Web-страницы. Однако в конце концов вы обнаружите, что настоящая проблема при созда-
нии первой Web-страницы заключается в понимании, что же следует сказать аудитории!
Проблему “что сказать” легче решить, если представить свою Web-страницу в виде
набора блоков содержимого (информации). Каждый блок должен быть посвящен
определенным темам, которые вы хотите описать на своей Web-странице. Напри
мер, одним из блоков могут быть ссылки на ресурсы, относящиеся к вашему хобби,
другим блоком может быть ваше резюме. Определив, какие блоки содержимого
и в каком порядке следует размещать на странице, а также решив, о чем будет сооб
щаться в каждом из них, вы решите главную задачу— поймете, какие блоки нужно
размещать на Web-странице, причем гак, чтобы ими можно было легко управлять.
1 Кпользование концепции блоков содержимого поможет вам плавно перейти о г единим
ной Web-страницы к многостраничному Web-узлу. Ваша первая Web-страница может бып.
iniioin.no объемной и состоя п> из нескольких блоков содержимого. Когда вы fiviicrc тимш
трансформировать ее в многостраничный Web-узел (речь об этом пойдет в главе 14 “Создание
многостраничного Web-узла”), то сможете взять отдельные блоки и перенести их на отдель-
ные Web-страницы.
Одной из самых замечательных особенностей Web-публикации является то, что
Web-страницу можно изменить в любой момент ее существования. Главное— не
останавливаться на достигнутом, а продолжать модифицировать страницу и отобра-
жать на ней то, чем вы по праву можете гордиться.
У вас могут быть свои соображения по поводу того, что именно следует разместить на
своей первоначальной домашней странице, и это прекрасно! Но если у вас есть какие-то за-
1руднения, прочитайте несколько следующих подразделов, чтобы почерпнуть из них какие-то
полезные идеи.
Вы и ваши интересы
11а первой Web-странице проще и интереснее всего разместить описание самого себя и тем,
которые вас интересуют. Web-страницы такого типа вполне могут развлечь посетителей узла
и хорошо подходят для таких вполне определенных целей, как поиск работы. На рис. 5.1 при-
веден пример Web-страницы такого типа.
Рис. 5.1. Представьтесь с помощью Web-страницы
Ниже перечисляются блоки содержимого, которые можно поместить на свою Web-страницу
Z Краткое представление. Кратко опишите себя — назовите свое имя, возрас i
или возрастной диапазон, укажите род занятий, где вы работаете, учитесь
и живете; расскажите немного о своей жизни.
и .	Не слишком вдавайтесь в подробности, потому что в этом случае легко сз a i ь
жертвой разного рода мошенников. (Обязательно прочитайте врезку
F/ “Сохраняйте конфиденциальность”.)
•S Разместите свою фотографию. В качестве дополнения к вреде uibjiciihio можно
разместить на странице свою фотографию В главе S “Создание и доблвпевиг
готовой графики для размещения в Web” мы подробно расскажем о том, ка-
ким образом следует размещать свою фотографию в Web.
Опишите свои интересы. Ваша Web-страница может быть посвящена только
одному из ваших интересов, но гораздо лучше разместить на ней краткий спи-
сок всех своих хобби и пристрастий. Тогда у посетителей вашей страницы
возникнет ощущение, что они хорошо знают вас.
Расскажите о своей работе или об учебном заведении. Если посетитель
вашей страницы узнает о том, чем вы занимаетесь и как проводите свободное
время, у него сложится довольно цельное и интересное представление о вас.
Разместите на своей странице ссылку на Web-узел своей компании или учеб-
ного заведения (если таковые имеются). О том, как это сделать, вы узнаете
в главе 7 “Добавление ссылок на Web-страницу”.
J Разместите ссылки на свои любимые Web-узлы и сгруппируйте их по те-
мам. Это может быть как один, так и несколько блоков содержимого. Ссылки
на своих Web-страницах размещают многие, но очень часто они слишком
очевидны. Ведь узлы, подобные Yandex или Google, и так известны большин-
ству пользователей Сети. Создайте краткий список ссылок на интересные уз-
лы по той или иной теме и сопроводите его кратким описанием причины, по
которой вас интересует эта тема.
•S Подробное описание ссылок. Представьте краткое описание узла, ссылку на
который вы размещаете на своей странице. Укажите, что, на ваш взгляд, явля-
ется самым ценным на нем. Луч иге всего разместить ссылки не на начальную,
а на какие- то определенные страницы узла.
Подобная Web-страница может быть простой по своей структуре — длинной, прокручи-
вающейся, без элементов навигации. Один блок содержимого может следовать за другим.
Дня такой страницы не будет иметь никакого значения наличие замысловатого форматирова-
ния — интересного содержимого будет вполне достаточно для того, чтобы страница была
привлекательной для посетителей.
Вы и ваша семья
Вы можете разместить на странице фотографию своей супруги (супруга), детей, домаш-
них животных, друзей и других людей, играющих важную роль в вашей жизни. (Мы знаем,
IIо очень многие считают домашних животных полноправными членами своей семьи.) Web-
i границы такого рода очень сближают родственников и друзей. В качестве примера посмот-
ри г с на Web-страницу, показанную на рис. 5.2.
11одобные страницы могут перерасти в достаточно большие Web-узлы, содержащие ло-
но пн отельные страницы, на которых запечатлены члены семьи, празднования дней рождения,
р> гюртажи об отпусках и другие памятные события. Однако, создавая простую начальную
границу, разместите на ней такие блоки содержимого.
J Краткое описание себя и членов своей семьи. Пусть каждый член семьи
кратко опишет себя — имя, возраст или возрастной диапазон, укажет какую-
го информацию о своей работе или об учебном заведении, о месте прожива-
ния и немного расскажет о своей жизни.
Во врезке “Сохраняйте конфиденциальность” говорится о том, чего следует
) опасаться, и о том, сколько персональной информации следует размещать на
/ Web-странице.
*?	-1Л».!
Файн Правка &ц умеренное Ogpenc Справке
Назад *		'-Поиск - Избранное ф •	.- » JJ 3
Адрес;	http.//wwAi,teamrloja.org/about_team_rioja.htni	Д1 ГЬрйход (сыпки ’*
About Team Rioja
by1' . •• -
Who are we? Team Rioja is a select
group of aficionados of Spanish wine,
i travel, and medieval music The team was
: formed in August 1997 during a medieval
 Spanish music workshop in northern
- Spam
What do we do? First and foremost, we drink Spanish
wine - mostly Rioja, but also Pnorat. Ribera del Duero,
$0 Ингернет
Рис. 5.2. Сделайте Web семейным предприятием
S Разместите фотографии каждого члена семьи. Разместите групповое фото
или фотографии каждого из членов своей семьи. Не размещайте слишком
много фотографий или фотографий большого размера, поскольку в этом слу-
чае Web-страница будет слишком долго загружаться. Подробная информация
о размещении фотографий и других графических изображений представлена
в главе 8 ‘’Создание и добавление готовой графики для размещения в Web”.
й’ Расскажи те об интересах каждого из членов семьи. Краткий перечень ин-
тересов каждого из членов семьи позволит составить начальное представле-
ние о ней. Кроме того, это подскажет родственникам и друзьям, какой пода-
рок можно сделать на день рождения, не напрашиваясь на прямую подсказку.
Опишите работу или учебное заведение каждою члена семьи. И вам са-
мим, и посетителям вашей страницы будет приятно увидеть, чем вы зани-
маетесь и как проводите свободное время. Добавьте ссылки на Web-узлы
компаний или учебных заведений каждого из членов семьи, если таковые
имеются.
(В главе 7
“Добавление ссылок на Web-страницу”
вы
узнаете
о том.

как это сделать.)
Составьте перечни ссылок на любимые Web-узлы каждого из членов се-
мьи (один блок на человека). Перечень из пяти-семи ссылок даст посетителю
страницы представление об интересах каждого из членов вашей семьи (при
этом страница не будет слишком большой).
Как и персональная страница, семейная страница тоже может быть простой, длинной, про
кручивающейся, без элементов навигации и вычурного форматирования Особого профессии! i.i
лизма в данном случае не требуется. Подобные страницы тем интереснее, чем больше информа
ции на них размещено, а внешнему виду не стоит уделять слишком большого внимания.
Вы и ваша работа
Вы можете создать небольшую Web-страницу, описывающую ваши профессиональные
навыки и интересы. Такая страница станет вашим резюме. Ее предназначением может быть
как освещение ваших профессиональных интересов, так и более специфичных задач, напри-
мер поиска работы.
На профессиональной странице можно разместить такие блоки содержимого.
Кратко опишите себя. Как и в случае персональной страницы, краткое опи-
сание самого себя будет интересно посетителям. Расскажите немного о себе,
а профессиональные интересы вынесите в другой блок.
Размешать ли свою фотографию? Фотография будет прекрасным дополнени-
ем профессионального узла. Если же главной задачей, для выполнения которой
разрабатывается страница, является поиск работы, то, возможно, фотографию
размещать и не стоит. Почему? Дело в том, что в некоторых компаниях на ран-
них этапах резюме с фотографиями не принимаются. Поэтому, если вы ищете
работу, не размещайте фотографию на своей Web-странице.
Опишите свои профессиональные интересы. На профессиональной Web-
странице должны быть освещены основные профессиональные интересы.
О личных интересах, вероятно, лучше говорить на персональной странице,
если только вы не являетесь руководителем общественной организации или
не занимаетесь какой-то другой работой, требующей указания соответст-
вующей информации.
J Разместите ссылки на свои любимые узлы и сгруппируйте их тематиче-
ски (один или несколько блоков содержимого). Хорошо организованный пе-
речень ссылок, систематизированный по областям профессиональных интере-
сов, может послужить хорошим ресурсом для людей с похожими интересами.
Создайте отдельные списки по каждой из областей своих интересов.
Разместите отформатированное резюме, которое можно было бы распе-
чатать. Если вы планируете использовать свой профессиональный узел как
средство поиска работы или хотите, чтобы люди ознакомились с вашими
профессиональными достижениями, добавьте на свою Web-страницу отфор-
матированное резюме.
Профессиональный узел для начала может состоять из одной Web-страницы, но резюме
ш же лучше поместить на отдельную страницу. В главе 14 “Создание многостраничного
W- eh-узла” вы узнаете о том, как добавить дополнительные страницы к своему Web-узлу.
Что касается внешнего вида страницы, то она не должна быть слишком вычурной, но при
чом она не должна производить впечатление убогой. Подробная информация об улучшении
внешнего вида страницы представлена в главе 10 “Разработка красивых страниц”.
Мы предлагаем вам не создавать Web-узел бизнес-направленности в качестве первой
попытки реализации своих талантов Web-разработчика. Для коммерческого узла
очень важен внешний вид и привлекательность, разумное сочетание текста и графи
ки, а также правильное правописание. Этих требований слишком много для реали
зации первой Web-публикации. Для начала мы предлагаем создать персональную
Web-страницу (о себе, о своих интересах или о своей семье). Позднее вы сможете
применить приобретенный опыт для выполнения более сложной задачи по созданию
Web-узла коммерческой направленности (речь об этом пойдет в главе 14 “Создание
многое граничного Web-узла”).
Сохраняйте конфиденциальность
При создании персональной Web-страницы избегайте специфической информации, которая может вам
навредить. Вы не представляете себе, как мало информации нужно какому-нибудь мошеннику для того,
чтобы выдать себя за вас.
Не указывайте никакие специфические имена и цифры. Ни в коем случае не следует указывать на Web-
странице номер своих водительских прав, идентификационный налоговый номер или номер кредитной
карточки. Это наиболее очевидные вещи. Однако не следует указывать и другие цифры, в том числе
номер телефона, свой точный возраст и дату рождения. Эти данные можно даже не указывать
в резюме, размещенном на Web-узле. Достаточно будет указать свое имя и адрес электронной почты.
Для того, кто пожелает познакомиться с вами поближе, этого будет вполне достаточно.
Не приводите слишком подробную информацию о членах своей семьи и, в частности, не указывайте
девичью фамилию своей матери. Этой крохотной информации часто бывает достаточно для
удостоверения личности. Отсутствие точной информации о членах семьи обезопасит их так же, как
и вас самих.
Будьте особенно осторожны, размещая информацию о детях, особенно такую, по которой можно
идентифицировать и найти вашего ребенка. К примеру, если вы решите указать на странице свой адрес
и номер телефона, не размещайте на ней фотографии своих детей и не указывайте их имена, поскольку
это может привлечь внимание мошенников и извращенцев.
Начинаем созе/авсипь сйфанлщц
Итак, вы готовы к созданию своей первой персональной Web-сграницы. Как же это сделать?
Запустите редактор Web-страниц, будь то текстовый редактор или программа редактиро-
вания Web-страниц, и приступайте к подготовке содержимого. При работе в текстовом ре-
дакторе используйте команды HTML, а при работе в редакторе Web-страниц пользуйтесь ко-
мандами форматирования текста.
При создании Web-страниц лучше всего разграничить части работы, касающиеся
продумывания содержимого и относящиеся непосредственно к Web-публикации.
Сначала в текстовом редакторе создайте модель своей страницы: надлежащим обра-
зом расположите текст, вставьте картинки и г.д. После этого наступает время фак-
тического создания Web-страницы, копирования и вставки текста из текстового ре-
дактора в редактор Web-страниц.
При перенесении содержимого из текстового редактора в программу для редактиро-
(	') вания Web-страниц будьте готовы к тому, что придется изменить часть форматиро-
вания и переписать какие-то фрагменты текста для того, чтобы страница приняла
более подходящий для Web вид. Привлекательный текст с заголовками, маркиро
ванными и нумерованными списками будет гораздо лучше смотреться на Web
странице и будет легче восприниматься посетителями, чем простой текстовый блок.
Создание исходной страницы с помощью HTML
В этом и следующих разделах речь пойдет о создании Web-страницы с помощью HTMI
в программе редактирования текста. Это позволит лучше познакомиться с HTML-дескрип i о
рами, поскольку вы будете работать с ними непосредственно
Затем, в других разделах, мы расскажем о выполнении тех же операций в программе Web-
редактирования, такой как Netscape Composer. Это позволит уделить больше внимания со-
держимому, не так сильно отвлекаясь на “механику” HTML.
В данном разделе описывается работа в программе Блокнот, но все действия при-
менимы и к любому другому текстовому редактору и даже к программам подго-
товки текстов. (Помните о том, что файл необходимо сохранять в виде обычного
текста с расширением . htm. Это указывает на то, что в файле используется
HTML-форматирование.)
Ниже очень подробно описывается процедура начала работы с HTML-файлом. Если все
будет сделано правильно, вы существенно облегчите себе дальнейшую работу, но если вы
допустите хотя бы маленькую ошибку, то файл будет трудно просматривать и редактировать.
Итак, для создания первоначальной Web-страницы с помощью HTML выполните сле-
. (ующие действия.
1.	Откройте программу редактирования текста. Например, чтобы в качестве тек-
стового редактора использовать программу Блокнот, выберите команду
Пуск^Программы^Стандартные^ Блокнот
(Starts Programs^ Accessories^ Notepad).
Программа редактирования текстов откроет новый документ.
2.	Добавьте необходимые дескрипторы заголовка и других элементов, такие как
<HTML> II </HTML>, <HEAD> II </HEAD>, <TITLE> И </TITLE>, а также <BODY>
И </BODY>.
В HTML-файл введите следующие строки кода:
<HTML>
<HEAD>
<Т1ТЬЕ>Персональная Web-страница Васи Пупкина
</TITLE>
</HEAD>
<BOEY>
<!--Основное содержимое Web-страницы будет размещено
в этом разделе. -->
</BODY>
</HTML>
Документ приложения Блокнот с указанными HTML-дескрипторами приведен на рис. 5.3.
Основная часть Web-документа будет располагаться между дескрипторами <BODY>
h</BODY>. Дескриптор с восклицательным знаком <!--Основное содержи-
мое. . .--> содержит комментарий. Браузер игнорирует этот дескриптор и его со-
держимое и не отображает его в документе, но это позволит вам создавать заметки по
поводу HTML-текста для личного использования.
Текст, заключенный между дескрипторами <TITLE> и </TITLE>, является названием
(иногда говорят — шапкой) документа. Web-браузср отобразит его вверху своего окна.
3.	Сохраните файл, выбрав команду Файл^Сохранить (File^Save).
Откроется диалоговое окно Сохранить как (Save As).
Диалоговое окно Сохранить как откроется и после выбора команды Сохранить,
и после выбора команды Сохранить как, если данный файл ранее не сохранялся.
Рис. 5.3. Введите HTML-код в свои документ
4.	Создайте новую нанку для файлов своей Web-страницы. С помощью раскры-
вающегося меню, расположенного в верхней части диалогового окна Сохранить
как, укажите место расположения новой папки. Затем щелкните на кнопке
Создание новой папки (Create New Folder), которая имеет вид панки со звез-
дочкой. Присвойте имя новой папке в соответствии с правилами, приведенными
во врезке “Как создавать имена файлов для Web”. После этого откройте новую
папку и сохраните в ней ваш файл.
Во врезке “Как хранить файлы” вы узнаете, почему важно хранить в одном месте все
файлы, составляющие Web-страницу или Web-узел.
5.	Воспользовавшись раскрывающимся списком Тип файла (Save as type), ука-
жите, что данный файл следует сохранить как текстовый документ.
Привыкайте сохранять свои HTML-файлы в виде текстовых документов. Тогда даже
при работе с файлом не в текстовом редакторе, а в программе подготовки документов
файл будет сохранен в текстовом формате без кодов форматирования.
6.	Введите имя файла, сопровождаемое расширением .htm. Например, файл можно
назвать mypage.htm.
Во врезке “Как выбирать имена файлов для Web” говорится о том, почему важно со
хранить файлы как текстовые и в конце ставить расширение . htm. Это позволит легко
открыть файлы в Web-браузере для их просмотра.
7.	Щелкните на кнопке Сохранить (Save).
Программа Блокнот сохранит файл в виде текстового документа с указанным вами
именем, завершающимся расширением . htm.
8.	Для просмотра файла откройте свой браузер, например Internet Explorer.
Привыкайте держать окно браузера все время открытым, чтобы проверять HTMI кот
в процессе его написания. Всякий раз при сохранении HTML-документа его можно oi
крыть в Wcb-браузере и посмотреть, как выглядит реальная Web-страпица.
9.	В Web-браузере выберите команду Файл ^Открыть (File=>Open), чтобы открыть
диалоговое окно Открыть. Щелкните на кнопке Обзор (Browse), чтобы открыть
диалоговое окно выбора файла. Перейдите к нанке, в которой хранится файл, и
щелкните на его имени. После этого щелкните на кнопке Открыть диалогового окна.
10.	Ваш файл откроется в окне браузера. На рис. 5.4 показаны окно текстового фай-
ла и окно браузера. Обратите внимание на то, что на верхней панели окна брау-
зера отображен текст тапки HTML-документа.
Разрабо тчики Web-страниц часто применяют такую методику работы, при которой от-
крыты и окно HTML-документа, и окно браузера. Это позволяет отслеживать измене-
ния, вносимые в документ.
jgm*’ Чтобы просмотреть изменения, внесенные в HTML-документ, HTML-файл необходи-
мо сохранить, а после этого в окне браузера щелкнугь на кнопке Обновить (Refresh).
При обновлении содержимого в окне браузера отобразится новая копия страницы
с Web-сервера или, как в данном случае, с жесткого диска вашего компьютера.
HTM L-документе
Шапка, отображенная в Web-браузере
Рис. 5.4. На данном этапе введена только шапка документа, а сам он остается пустым
Создание исходной Web-страницы с помощью Web-редактора
Работа с текстовым редактором (см. предыдущий раздел) позволяет ближе познакомиться
i I ITML-дескрипторами. В этом разделе мы опишем работу с Web-редактором, таким как
Nelscape Composer. При этом можно меньше беспокоиться о HTML-дескрипторах, а больше
внимания улелять фактическому содержимому страницы. (Не беспокойтесь о том, что вам не
V меня щучить HTML.— мы очень часто будем просить вас просматривать HTML-разметку
n ucia нашего документа.)
Как создавать имена файлов для Web
Присваивая имена файлам, подлежащим размещению в Web, необходимо иметь в виду следующее.
J Если дать Windows команду сохранить файл как текстовый документ, то сохранены будут только
текстовые символы, которые вы видите на экране, без каких-либо элементов форматирования.
Кроме того, Windows назначит для файла расширение . txt, если вы не дадите никакой другой
команды. Расширение имени файла, которое, как правило, скрыто от пользователя, помогает
Windows выяснить, к какому типу относится данный файл. Если для файла назначить расширение
. htm, оно заменит собою расширение . txt.
v' Если имя файла оканчивается символами . htm, то Windows будет распознавать его как HTML-файл.
Это позволит легко открыть файл в программе Web-браузера, например в Internet Explorer.
Благодаря этому вы сможете просматривать файл в процессе работы над ним, и, что более важно,
после того как файл будет помещен на Web-сервер, его смогут в виде Web-страницы просмат-
ривать другие пользователи.
Иногда встречаются Web-страницы с именами файлов, оканчивающимися символами .html; это
расширение предназначено для определенных серверов. Однако не стоит добавлять это расширение
к именам файлов своих Web-страниц, поскольку некоторые программы, с которыми вы можете работать,
при редактировании файлов или их передаче на Web-сервер будут автоматически преобразовывать его
в расширение . htm. В результате будут повреждены ссылки, размещенные в документе, потому
что обращение к .файлу будет выполняться с учетом исходного расширения .html. Чтобы
избежать потенциальных проблем, всегда используйте в своих HTML-файлах расширение . htm.
J Очень важно, чтобы в именах Web-файлов не было символов пробела и чтобы они состояли не бо-
лее чем из восьми строчных символов, поскольку Web-страница может быть опубликована на сер-
вере UNIX или на сервере, работающем под управлением старой версии Windows. Различные
серверы по-разному трактуют имена файлов. Только файлы с именами, не превышающими
8 символов, написанными в нижем регистре и имеющими расширения . htm, гарантированно будут
интерпретированы корректно при размещении Web-страницы на любом Web-сервере.
По этой же причине не должны содержать более восьми символов и должны быть написаны в нижнем
регистре имена всех папок. Если при передаче Web-страницы на сервер имя папки изменится, то
ссылки на содержащиеся в ней Web-страницы и графические файлы могуг стать некорректными. Это не
смертельно, но может повлечь за собой достаточно большой объем кропотливой работы, особенно
в случае создания Web-страницы какой-то крупной компании или организации, когда после
перемещения Web-узла с компьютера в Web перестанут функционировать гиперссылки.
Инструкции, приведенные в данном разделе, описывают работу с Netscape Composer,
но похожие команды используются и в других редакторах Web-страниц, таких как
Microsoft FrontPage или Dreamweaver. В этих полнофункциональных редакторах ис-
пользуются и команды, характерные для Composer, поэтому шаги, описанные в данной
инструкции, можно будет применить и в работе с более мощными программами.
Для создания первоначальной Web-страницы в программе Composer выполните следую-
щие действия.
1. Откройте программу Composer, выбрав команду Пуск^Программьг^Мйзеаре?.!1^
Composer, или вначале запустите программу Navigator (Пуск^Программы^
Netscape 7.1 ^Navigator), а затем выберите команду Window^Composer.
Откроется пустое окно программы Netscape Composer.
СОСЕТЬ
После открытия Composer программу Navigator (если вы вначале запускали именно се)
I1 можно закрыть. При этом окно Composer все равно останется откры i ым.
2.	Задайте шапку документа, выбрав команду Formats Page Title (Формат1^
Шапка страницы).
Откроется диалоговое окно Page Properties (Свойства страницы).
3.	В поле Title диалогового окна Page Properties введите шапку своего документа. (Она
будет отображаться в строке заголовка окна Web-браузера.) Кроме того, в полях
Author и Description можно ввести соответ ственно имя автора и описание с траницы.
Поля Author (Автор) и Description (Описание) особенно полезны, если на одном ком-
пьютере и над одним Web-узлом работают несколько человек. Это поможет иденти-
фицировать, кто из пользователей работал над документом и для чего предназначен
каждый HTML-файл.
4.	Просмотрите HTML-код своего документа, выбрав команду View^HTML Source
(Вид^Просмотр HTML-кода) или щелкнув на вкладке <HTML> Source в ниж-
ней части окна редактирования.
На экране отобразится HTML-код вашего документа (рис. 5.5). Обратите внимание на
то, что в документе пока что нег никакого содержимого, но зато есть почти десяток
HTML-дескрипторов! Не волнуйтесь, начиная с этого момента практически все ре-
зультаты вашей работы будут отображаться непосредственно на Web-странице.
Запомните, что для любого HTML-документа пары дескрипторов <HTML> и </HTML>,
<HEAD> И </HEAD>, <TITLE> И </TITLE>, <BODY> И </BODY> ЯВЛЯЮТСЯ стандарт-
ными и необходимыми элементами.
Обратите также внимание на дескрипторы МЕТА. Их краткое описание приводится да-
лее в этой главе, в разделе “Дескрипторы МЕТА нравятся не всем”.
Основная часть Web-документа будет заключена между дескрипторами <BODY>
и </BODY>. Дескриптор с восклицательным знаком <!-- ... —> содержит ком-
ментарий. Браузер игнорирует данный дескриптор и его содержимое и не отображает
его в документе. Однако при этом данный дескриптор позволит вам создавать заметки
по поводу HTML-текста для личного использования.
Текст, заключенный между дескрипторами <TITLE> и </TITLE>, является шапкой
документа. Web-браузср отобразит его вверху своего окна.
5.	Вернитесь к обычному режиму просмотра Web-страницы, выбрав команду
View^Normal Edit Mode (Вид^Обычный режим редактирования) или щелкнув
на вкладке Normal, расположенной в нижней части окна редактирования.
Снова отроется пустое окно редактирования, но в его верхней части отобразится шап-
ка Web-документа.
СРВЕГ Jr
Если до сохранения документа его шапка не будет введена, то Composer попросит
1 это сделать перед сохранением файла.
6.	Начните процесс сохранения файла с помощью команды File^Save (Файл'Ф
Сохранить).
Откроется диалоговое окно Save As (Сохранить как).
СОВЕТ
Диалоговое окно Save As откроется и после выбора команды Save, и после выбора
команды Save As, если данный файл никогда ранее не сохранялся
Рис. 5.5. Программа Composer позволяет просматривать HTML-код
7.	Создайте новую папку для файлов своей Web-страницы. С помощью раскры-
вающегося меню, расположенного в верхней части диалогового окна Save As,
укажите место расположения новой папки. Затем щелкните на кнопке Create
New Foider (Создание новой папки), которая имеет вид папки со звездочкой.
Присвойте имя новой папке в соответствии с правилами, приведенными во
врезке “Как создавать имена файлов для Web”. После этого откройте новую
папку и сохраните в ней ваш файл.
Во врезке “Как хранить файлы” вы узнаете, почему важно хранить в одном месте все
файлы, составляющие Web-страницу или Web-узел.
8.	Воспользовавшись раскрывающимся списком Save as type (Тип файла), укажи-
те, что данный файл следует сохранить как HTML-файл.
Composer сохранит ваш документ с расширением .htm, указывающим, что данный
файл является HTML-документом. (Как правило, расширение имени файла скрыто, но
оно позволяет Windows “узнать”, какую пиктограмму следует использовать при ото-
бражении файла и какие программы смогут его открыть.) Во врезке “Как выбирать
имена файлов для Web” говорится о том, почему важно в конце имен HTML-файлов
ставить расширение . htm.
9.	Введите расширение .htm в конце имени файла и удостоверьтесь в том, что за-
дано именно расширение .htm, а не .html. После этого щелкните на кнопке
Сохранить (Save).
Программа Composer сохранит ваш файл как HTML-документ. Поскольку в конце
имени файла стоит расширение . htm, то его можно будет легко просмотреть, открыв
в Web-браузере.
Как хранить файлы
Все файлы Web-страницы или небольшого многостраничного Web-узла следует хранить в одной папке
Тогда процесс Web-публикации будет намного проще.
J Для Web-страницы. Очень важно, чтобы HTML-файл Web-страницы и все графические изображения
размещаемые на Web-странице, хранились в одной папке. Почему? Потому что гиперссылки будут
выглядеть гораздо проще, если указывать только имя файла. Если поместить графические файлы в
другую папку, то в гиперссылке (см. главу 3 “Введение в HTML”) необходимо будет указывать имя этой
папки и ее связь с папкой HTML-файла. Поверьте, не стоит создавать себе дополнительные трудности.
Существует еще одна причина, по которой HTML-файл и графические файлы следует хранить
в одной папке. Дело в том, что при публикации Web-страницы вы будете переносить HTML-файл
и файлы изображений на другой компьютер — Web-сервер, на котором размещается Web-страница.
Если хранить все файлы вместе, то процесс переноса пройдет значительно проще и будет меньшая
вероятность ошибок.
J Для многостраничного Web-узла. Будет легче указать гиперссылки на изображения и другие Web-
страницы вашего узла. Кооме того, если хранить все файлы узла вместе, процесс переноса
узла на Web-сервер будет проще.
Принципа хранения файлов в одной папке станет труднее придерживаться, когда Web-узел
разрастется и станет более сложным. Если узел содержит больше двух десятков файлов, то при
хранении всех их в одной папке будет сложнее управлять ими. На этом этапе узел придется разбить на
группу папок, по одной на каждую Web-страницу, а также выделить отдельную папку для общей
графики. После этого необходимо изменить все гиперссылки таким образом, чтобы они
функционировали в пределах всей иерархической структуры папок (подробную информацию
о гиперссылках см. в главе 3 'Введение в HTML”).
Внешние файлы, не являющиеся частью вашей Web-страницы, не нужно хранить в папке Web-страницы.
Дело в том. что тогда при публикации узла эти файлы, вероятнее всего, будут перемещены на Web-
сервер вместе с Web-страницей. А кому нужны лишние файлы?
Если вы хотите, чтобы вашу Web страницу можно было легко найти с помощью по
исковых машин, то в шапке, являющейся первым заголовком вашего документа,
укажите ключевую информацию: полное имя персональной страницы или название
бизнеса (всего не более 20 слов). Эти же данные следует указать в дескрипторах
МЕТА (речь о них пойдет в следующем разделе). Когда программа-робот будет про-
сматривать Web-страницу, она обратит внимание именно на эти места, и люди, ука-
зав в качестве поисковых критериев ваше имя или рот; вашей бизнес-дсятельности.
с большей вероятностью смогут найти данный узел.
BecKfiuntno/iM
Среди HTML-дескрипторов одним из самых интересных и противоречивых является де-
скриптор МЕТА. Это обусловлено тем, что он влияет на то. каким образом будет представлена
Web-страница в поисковых машинах. Некоторые люди тратят чрезвычайно много усилий на
к>, ч тобы в поисковых машинах их страницы имели как можно более высокий рейтинг. Дсск
ритор МЕТА используется для указания метаданных— информации о Web-странице, а не
ши информации, отображаемой на ней.
Дескриптор МЕТА используется только в области заголовка Web-узла. Вся область зато
юнка посвящена метаданным, так что в этом есть смысл. (Дескриптор <TITLE> не относи г
। ч к “чистым” метаданным, хотя он также используется программами-роботами, а Web
op.iv зеры отображают его содержимое в верхней части своего окна.)
Дескриптор МЕТА имеет одно главное предназначение. Он используется для того, чтобы
пр<н рамма робот, собирающая информацию о Web-узлах для поисковых машин, могла iiojiv
। гь как можно больше сведений о вашей Web-странице. Некоторые поисковые машины
/акционируют таким образом, что, для того чтобы определить, как индексировать страницу
результатах поиска и найти описание страницы, которое будет там указываться, они долж-
.1 полагаться преимущественно на содержимое дескрипторов МЕТА.
Например, если пользователь ищет российские футбольные команды, а в дескрипторе
СТА. вашей страницы имеются слова “Российский” и “Футбол”, то во многих поисковых
длинах ссылка на такую страницу будет указываться среди первых. Однако существуют по-
ковые машины, которые игнорируют содержимое дескрипторов МЕТА. Подробная инфор-
щия о том, как повысить рейтинг вашего узла на странице результатов поиска, приведена
главе 14 “Создание многостраничного Web-узла”.
Дескрипторы МЕТА состоят из трех частей: слова МЕТА, поля, описывающего содержи-
те дескриптора МЕТА, и информации, содержащейся в поле. Ниже приведен дескриптор
ЕТА, который программа Composer вставит на все ваши Web-страницы.
r.eta http-equiv="content-type" content=”text/html;
charset=ISO-8859-l">
Что означает этот ужасный набор символов? Не волнуйтесь, это всего лишь три поля дан-
ях. Первое сообщает программе-роботу о том, что это дескриптор МЕТА. Второе говорит
гом, что речь идет о версии дескриптора МЕТА, указывающей на тип содержимого
1 content-type”). Третье свидетельствует о том, что содержимое данной Web-страницы
эедставляет собой текст формата HTML, использующий символы набора ISO-8859-1
гандартный набор ASCII-символов английского языка). Данный дескриптор МЕТА можно
>бавить в любой создаваемый документ.
Существуют три других версии дескриптора МЕТА, которые следует вставлять на Web-
границы: автор, описание и ключевые слова. Ниже приведены их примеры.
' J <meta name="author" content=“BacH Пупкин">
Данная версия дескриптора МЕТА указывает, кто создал страницу. Она чаще
всего используется для внутренних целей. Благодаря этому те, кто вас знают,
или сотрудники вашей организации смогут обратиться к вам с вопросами (или
комментариями) по данной Web-странице.
| (С <meta name="description" contents”Персональная Web-стра-
ница Васи Пупкина“>
Данная версия дескриптора МЕТА представляет собой краткое описание Web-
страницы. Вставьте этот дескриптор на любую Web-страницу, подлежащую ото-
бражению в результате поиска. Некоторые поисковые машины используют вер
сию DESCRIPTION в качестве фактического описания, которое будет отобра-
жаться в листинге результатов поиска. Поэтому вводите содержимое внимательно.
| J <meta name=”keyword" content="BacH Пупкин, страница пер-
 сональная, Web-автор, чайник">
j Данная версия дескриптора МЕТА позволяет ввести перечень ключевых слов,
которые поисковые машины будут связывать с вашей страницей. Результаты
поиска в целом будут лучше, если ключевые слова, перечисленные в дескрип
.« торе МЕТА, будут содержаться и в шапке, т.е. в названии Web-страницы.
Дополнительную информацию о дескрипторах МЕТА можно найти на узле Search Engine
Watch по адресу http://searchenginewatch.com/webmaster/meta.html. I In
этом Web-узле представлена самая свежая информация о поисковых машинах Web
Информация, касающаяся дескрипторов МЕТА, написана понятным языком. Кроме
того, на данном узле содержится огромное количество другой полезной информации
о поисковых машинах.
Добавление дескрипторов мета с помощью
программы Блокнот
Процедура добавления дескрипторов МЕТА в HTML-документ очень проста.
1.	Откройте Web-страницу в программе редактирования текста.
Например, для использования в качестве текстового редактора программы Блокнот
выберите команду Пуск'=>Программыс>СтандартныеоБлокнот (StartoPrograms^
Accessories1^ Notepad). Для того чтобы открыть файл, выберите команду Файл^
Открыть (File^Open).
2.	Добавьте дескрипторы МЕТА (с указанием имени автора, описания и ключевых
слов) в области заголовка документа, между дескрипторами <HEAD> и </HEAD>:
<meta name="author" content=“xxx">
<meta name="description" content="yyy">
<meta name="keyword11 content=”zl”, "z2“, " z3". . .>
Замените xxx вашим именем; yyy— описанием вашей Web-страницы, которое будет
отображаться в листинге результатов поиска; zl, z2, z3 и т.д. -— ключевыми словами,
относящимися к содержимому вашей страницы. Для персональной страницы в качест-
ве ключевых слов хорошо использовать ваше имя, фамилию, полное имя и слова, опи-
сывающие ваши интересы, представленные на странице.
3.	Сохраните документ и закройте программу редактирования текстов.
Вы не сможете увидеть внесенные изменения в Web-браузерс, поскольку дескрипторы
МЕТА на реальной Web-странице не отображаются. Поэтому сохраните документ и за-
кройте программу.
Добавление дескрипторов мета с помощью
программы Composer
Изменения на Web-странице гораздо легче вносить с помощью программы Composer, чем
при работе с HTML-кодом в текстовом редакторе. Но поскольку добавление дескрипторов
I :та заключается в добавлении HTML-кода непосредственно в документ, эта процедура
и программе Composer будет чуть более сложной.
1.	Откройте в окне Composer свою Web-страницу.
Для запуска Netscape Navigator выберите команду Пуск1^ Программы^ Netscape 7.1
Navigator. Затем выберите команду Window^Composer. С помощью команды File1^
Open откройте файл Web-сграницы в окне Composer.
2.	В окне Composer выберите команду Format^ Page Title and Properties (Формат^
Шапка и свойства страницы).
Откроется диалоговое окно Page Properties (Свойст-
ва страницы) (рис. 5.6).
3.	В поля Author и Description введите содержимое
или внесите в него необходимые изменения. Не
бойтесь вводить много текста, даже если
в диалоговом окне для него не хватает места.
( Гакие же действия можно выполнить, если необ-
ходимо откорректировать шапку Web-страницы.)
Щелкни гс на кнопке ОК.	Рис. 5.6. Окно свойств Web-страницы
Composer автоматически создаст дескрипторы МЕТА с указанием автора и описания
и поместил их в область заголовка создаваемого HTML-документа.
Введенный текст будет отображаться в качестве описания вашей Web-сграницы
в результатах поиска.
Хорошо, что все так просто. Плохо то, что вы сделали еще не все. Необходимо ввести
ключевые слова, которые поисковые машины будут связывать с вашей Web-страницей.
Для этого вам придется немного поработать непосредственно с HTML-кодом.
4.	В окне Composer щелкните на вкладке <HTML> Source или выберите команду
View^HTML Source (Вид>> Просмотр HTML-кода).
Откроется страница с HTML-кодом вашей Web-страницы. Обратите внимание на то,
что дескрипторы МЕТА с указанием имени автора и описанием страницы уже стоя! на
своем месте (если, конечно, вы их вводили).
5.	Скопируйте и вставьте дескриптор МЕТА с описанием Web-страницы в окно
с HTML-кодом. (Теперь у вас будут две одинаковые строки дескрипторов.) Во
второй строке измените слово description на keyword. После этого замените
содержимое, указанное после "contentна ключевые слова, которые поиско-
вые машины будут ассоциировать с вашей Web-страницей.
Редактировать копию имеющегося HTML-кода гораздо легче, чем писать его само-
1 стоятельно
6.	Вернитесь к режиму обычного просмотра, щелкнув на вкладке Normal или выбрав
команду View<^>Normal Edit Mode (Вид^Обычный режим редактирования).
Откроется содержимое Web страницы, НТМ1 -дескрипторы будут скрыты.
7.	Сохраните документ и закройте Composer.
Теперь на вашей Web-странице содержатся все надлежащие дескрипторы МЕТА. Такое
встречается далеко не на всех коммерческих Web-узлах. Примите наши поздравления!
Глава 6
Заполнение домашней страницы
/3 эгИой главе...
>	Написание материалов для Web
>	Форматирование Web-текста
>	Использование HTML-списков
>	Ввод текста в HTML
>	Ввод текста в Netscape Compose
предыдущей главе рассказывалось, как начать процесс создания Web-страницы. Ге
перь вы узнаете о том, как на странице следует разместить текст и отформатировй 11.
его так, чтобы он имел привлекательный вид.
Кроме того, мы поговорим о том, как писать для Web. Эта процедура несколько отличат
ся от традиционного написания текстов. Привыкнув к специфике написания материалов для
Web, вы будете получать от этой работы немало удовольствия.
Написание мине/гиалов для Web
Каждая среда требует своего собственного стилевого подхода. Журнальные статьи час го
бывают многословными, и многие из них написаны витиеватым языком. Газетные статьи
краткие, лаконичные и написаны по принципу “пирамиды”, когда сначала указывается самое
1лавное. Web обладает своим собственным стилем, зная который вы сможете сделать свои
страницы более интересными.
Web-реалии
Новый стиль написания материалов для размещения в Web основывается на трех осново
полагающих реальностях.
J Возможности HTML. HTML позволяет применять к тексту простое форма
тирование, создавать заголовки и списки. В новых версиях HTML имсеня
возможность использования различных шрифтов и варьирования их размеров,
однако нс все посетители Web-узлов стремятся их реализовать.
Поэтому не применяйте сложное форматирование и макетирование в ущерб
четкому изложению мыслей. Будьте проще.
J Сложность чтения с экрана компьютера. Компьютерный монитор iimcci
гораздо меньшее разрешение, чем обычная печатная страница (около НИ) н>
чек на дюйм, тогда как печатная страница имеет разрешение 600 точек иа
дюйм и выше). Глаз человека устаег от чтения длинных текстовых блоков с ж
рана. На рис. 6.1 видно, насколько буквы, отображаемые на экране, отличаю!
ся от четкого печатного текста.
Рис. 6.1. Увеличение показывает, насколько сильно
размыты буквы на экране
Поэтому при написании материалов старайтесь избегать длинных текстовых
блоков. Пишите кратко, а содержимое “разбавляйте” заголовками, списками,
кавычками и другими средствами. После написания материала просмотрите
его и постарайтесь написать еще короче.
/ Легкость доступа к материалам. То, что для Web-пользователей является
самым удобным и привлекательным, для Web-авторов является причиной го-
ловной боли. Речь идет о доступе к огромному количеству материалов и пуб-
ликаций посредством нескольких щелчков мышью. Содержимое Web бес-
платно и очень обширно, поэтому пользователи всегда могут уйти с вашей
страницы на какую-нибудь другую.
Поэтому позаботьтесь о том, чтобы текст бы не только кратким и разбитым
на блоки, но еще и интересным. Легкостью доступа к материалам Web можно
воспользоваться, разместив на своей странице интересные гиперссылки.
Чтобы лучше проиллюстрировать сложности восприятия, на рис. 6.2 изображена одна из
страниц Web-узла издательства “Диалектика” (www. dialektika. com). На данной странице
приведена информация о предыдущем издании данной книги. Она очень хорошо скомпоно-
вана, но составляет только половину печатной страницы (помните, что читатель книги может
одновременно видеть две страницы). Сравнение с газетами и журналами, на страницах кото-
рых размещено гораздо больше информации, чем может быть отображено на экране компью-
тера, для Web еще неблагоприятнее.
Рис. 6.2. На странице экрана помещается меньше информации, чем на
обычной печатной странице
Таким образом, читатель ознакомится с большим количеством материалов из печатного
источника, а не из Web. Поэтому при написании материалов для Web стремитесь, чтобы
текст был коротким, его макетирование — простым, а содержание — интересным.
Если ваш материал объемный и очень подробный, то лучше поместить его на от-
дельную страницу и предложить пользователям ее распечатать. Тогда они смогут
внимательно прочитать текст, а не пробежать его глазами, как делает большинство
людей, читая с экрана компьютера.
Web-стиль
Одни особенности написания материалов для Web основываются на физических реалиях,
а другие видоизменяются вместе с Internet, которая первоначально была сетью оперативной
связи между гражданскими и военными учеными и исследователями. По этим причинам ма-
териалам для Web присущи следующие особенности.
J Отсутствие крикливости. В начале существования Web коммерческое ис-
пользование Internet было строго запрещено, однако через Сеть все же под-
держивалась небольшая деловая активность. В начале 1990-х годов Internet
и Web открыли свои двери для коммерческой деятельности. Но даже после
этого Web-материалы остаются выдержанными преимущественно в спокой-
ных, информативных тонах. Энтузиазм поощряется, но крикливость и чрез-
мерная навязчивость считаются в Web неуместными.
J Неформальный тон. Материалы, размещаемые в Web, должны быть выдер-
жаны в дружественном тоне, как если бы вы писали письмо своему другу.
Формальности можно отставить в сторону, как больной палец, и туда же сле-
дует отправить излишнюю заумность. Web является “крутой” и информатив-
ной средой. На рис. 6.3 приведен пример неперегруженной, неформальной
и информативной страницы.
Рис. 6.3. Эта страница неформальна и информативна
J Необходимость корректности и точности. Неформальность отнюдь не оз-
начает небрежность. На заре существования Internet основным предназна-
чением Сети являлось обеспечение связи между научными и военными кру-
гами. На самом деле эти люди являлись своего рода друзьями, поскольку им
приходилось тесно общаться друг с другом на конференциях и посредством
электронной почты. Эти люди были высокообразованными и грамотными.
Если вы хотите, чтобы ваш голос что-то значил для пользователей Сети,
будьте вежливы и точны.
Получайте удовольствие
После того как вы привыкнете к специфике написания материалов для Web, вы будете по-
лучать истинное удовольствие от этой работы. Вы сможете вести себя естественным образом;
вам не нужно будет десятки раз втолковывать что-то тупицам. Просто изложите свои мысли,
добавьте несколько ссылок на Web-узлы, подкрепляющие ваши идеи, и двигайтесь дальше.
Перед публикацией материалов проверьте их. Если текст написан с орфографическими
или грамматическими ошибками либо содержит недостоверную информацию или неточные
данные, посетители вашей страницы посчитают свое время потраченным напрасно. (Если вы
не уверены в точности или достоверности излагаемой информации, обязательно сообщите об
этом читателям.)
Проблемы с абзацами и переносом строк
Одним из самых проблематичных моментов редактирования Web-страницы при работе непосредственно
с HTML-кодом является способ интерпретации символов возврата каретки и символов разрыва строк.
Когда в программе подготовки текстов или в сообщении электронной почты необходимо создать разрыв
строки, мы привычно используем клавишу <Enter> или <Return>. Если необходимо, чтобы между
абзацами были пустые строки, мы нажимаем эти клавиши несколько раз. Но при создании Web-страниц
этот способ не всегда применим.
Первой проблемой является внедрение в документ символа возврата каретки при работе
непосредственно с HTML-кодом. (В программе Netscape Composer и других редакторах Web-страниц
этот вопрос решается автоматически.) При нажатии клавиши <Enter> или <Return> в процессе ввода
текста в формате HTML привычный символ конца абзаца не распознается. Поэтому, если при вводе
текста для его разбиения на несколько абзацев вы будете использовать клавишу <Enter> или <Retum>,
то Web-браузер все равно отобразит текст в виде единого большого блока.
Как решить эту проблему? При работе с HTML-кодом в начале каждого абзаца необходимо вставить
дескриптор <р>, а в конце — </р>. Всякий раз при обнаружении дескриптора <р> программа будет
знать о необходимости начать новый абзац. (Дескриптор </р> в конце абзаца не обязателен, но лучше
подстраховаться и поставить его.)
Нужно ли, чтобы между абзацами было больше места, вставить подряд несколько дескрипторов <р>?
Не совсем так. Дело в том, что разные браузеры по-разному трактуют несколько стоящих подряд
дескрипторов <р>. Большинство из них игнорирует второй и последующий дескрипторы. Независимо
от того, сколько дескрипторов будет вставлено, вы все равно получите только один переход
к следующему абзацу. (Это же касается дескриптора разрыва строки <br>. Данный дескриптор
создает разрыв строки без перехода к новому абзацу. Это может быть полезно, например, при работе
над списком, когда вы хотите вставить символ разрыва строки, не начиная новый абзац с маркера.)
Решить данную задачу можно путем вставки в каждой пустой строке специального символа
неразрывного пробела. Для этого существует дескриптор неразрывного пробела— #nbsp,-. Его
следует вставить после дескриптора <br>, и в большинстве версий основных браузеров вы получите
переход на новую строку.
^о/гма/пи^ование Web-ineicana
Механизм форматирования Web-текста достаточно прост. Далее в этой главе мы расска-
жем о том, как использовать имеющиеся возможности при работе непосредственно с HTML-
кодом в текстовом редакторе или в редакторе Web-страниц, подобном Netscape Composer.
Для начала рассмотрим перечень элементов форматирования текста, которые используются
при создании Web-страниц на основе дескрипторов, поддерживаемых в большинстве наибо-
нсе распространенных версий HTML.
Заголовки. В HTML, можно использовазь заголовки шести уровней. Для за-
дания заголовка самого высокого, первого, уровня используются дескрипторы
<Н1> и </Н1>, для заголовка второго уровня — дескрипторы <Н2> и </Н2>...
шестого — <Н6> и </Н6>.
Заголовки следует использовать последовательно, в соответствии с иерар-
хией текста, начиная с <Н1> и заканчивая <Н6>. Но вы можете обнаружить,
что использованный заголовок кажется слишком крупным по сравнению
с расположенным под ним текстом. Поэтому для задания заголовка второго
уровня многие используют дескриптор <Н4> либо же применяют команды
задания размера текста и полужирного начертания для создания собствен
ных стилей заголовков. Сначала используйте стандартные заголовки и уже
по мере необходимости попробуйте создать собственные стили, применяя
те или иные элементы форматирования.
J Размеры шрифтов. В HTML можно задавать размеры шрифтов, которые
больше или меньше среднего, стандартного, размера. Например, можно за-
дать шрифт на два размера меньше среднего. Это можно сделать даже в том
случае, если при настройке браузера или Windows пользователь указал размер
шрифта или стиля. (По мере старения людей их зрение слабеет, и они прибе-
гают к различным уловкам, которые могут облегчить работу на компьютере.
Один из авторов этой книги знает это по собственному опыту.)
Вы хотите, чтобы ваша Web-страница была удобочитаемой и максимально
информативной? Одним из способов дост ижения этой задачи является приме-
нение шрифтов разных размеров, как крупных, так и мелких (когда на огра-
ниченной площади требуется поместить текст большого объема). Применение
шрифт ов разных размеров является одной из тех уловок, которые часто ис-
пользуют при создании материалов для размещения их в Web.
J Форматирование символов. К тексту можно применить полужирное и кур-
сивное начертание. Для начала и завершения полужирного начертания ис-
пользуются дескрипторы <В> и </В>, а для начала и завершения курсива —
соответственно дескрипторы <1> и </!>. К тексту можно применить и под
черкивание, но мы не рекомендуем этого делать, потому что посетители стра
ницы могут легко перепутать такой текст с гиперссылками, которые в НТМ1
обычно выделяют именно подчеркиванием.
Для расстановки акцентов в тексте можно применять и полужирное, и кур
сивное начертание, но не стоит слишком усердствовать. Разумным будсч
структурированное применение этих стилей (например, в данном списке по
лужирное начертание применено только к ключевым словам). Избегайте при
менения подчеркивания (и синего цвета), потому что пользователи могут пе-
репутать такой текст с гиперссылками. (Подробности приведены ниже, во
врезке “Какого цвета ваша гиперссылка?”).
J Сложное форматирование символов. Применяемые на Web-странице шриф-
ты, равно как и их цвет, можно задать с помощью дескрипторов, которые, од-
нако, поддерживаются не во всех версиях браузеров. При этом возникает мно-
жество проблем. Одни пользователи имеют старые версии браузеров, которые
не поддерживают определенные элементы форматирования. Другие пользова-
тели настраивают свои браузеры таким образом, что они отображают только
какие-то определенные шрифты, независимо от того, какое начертание зада-
дите вы. А некоторые пользователи задают отображение крупных шрифтов
в операционной системе Windows, и в результате всего этого ваша Web-
страница может выглядеть совершенно не так, как вы предполагали.
Мы не рекомендуем применять сложное форматирование символов по двум
причинам. Во-первых, это достаточно непростая работа. Во-вторых, если вы
станете приверженцем такого форматирования, то вскоре обнаружите, что да-
леко не все посетители смогут ознакомиться с вашей страницей. Пользовате-
ли привыкли к тому, что ссылки обозначаются какими-то стандартными
шрифтами и цветами. Поэтому если вы не работаете на профессиональном
уровне и не используете специальные инструменты для тестирования страниц
в разных версиях браузеров, постарайтесь не усложнять жизнь себе и другим.
Какого цвета ваша гиперссылка?
В HTML может быть использован шрифт разного цвета, но мы не рекомендуем этого делать.
Почему? Причина заключается в том, что люди привыкли видеть на Web-страницах одноцветный шрифт
(как правило, черный) на фоне контрастирующего цвета. На Web-странице может быть и шрифт другого
цвета, но, как правило, он используется для обозначения гиперссылок: синим цветом помечаются
ссылки, которые еще не использовались, а фиолетовым — к которым только что обращались.
Некоторые авторы Web-страниц слегка модифицируют эти цвета применительно к цветовой гамме
своих страниц. Однако имейте в виду, что любое изменение этих цветов может запутать пользователей.
Поэтому мы не рекомендуем использовать цветной шрифт, изменять цвета ссылок и применять
подчеркивание к тексту, не являющемуся ссылкой. Тогда для посетителей ваша страница будет иметь
более привычный вид, и они будут уделять внимание ее содержимому, не путаясь в элементах
форматирования.
На рис. 6.4 приведены примеры форматирования Web-текста. Воспользуйтесь этим ри
сунком в качестве справочной информации, когда будете решать, какие опции форматирова
ния следует применить на своей Web-странице.
использование UTUU2-списков
Людям очень нравятся списки. Вопросам их создания и применения посвящено много ма
териалов. Ниже приведены три самые главные причины их столь широкого распространения
; J На списки интересно смотреть. При написании материалов для Web всегда
необходимо иметь в виду, что страница не должна выглядеть, как один нспы
разительный блок текста. Списки решают эту проблему, поскольку позволяю!
“секционировать” текст.
•/ Списки легко просматривать. Ранее мы уже говорили о том, что люди чаще
всего бегло просматривают Web-текст, не особенно вчитываясь в него. Списки
просматривать очень легко. Бегло просмотрев выделенные ключевые слова,
пользователи смогут выбрать наиболее заинтересовавшую их часть страницы
и прочитать ее более внимательно.
Рис. 6.4. Воспользуйтесь возможностями форматирования Web-текста
J Списки позволяют автору более четко выразить свои мысли. При подго
товке списка вам приходится четко и лаконично выражать свои мысли. Стра
ницу нудного текста можно заменить тремя-четырьмя пунктами, оформив их
в виде маркированного списка, который займет всего полстраницы. В резуль-
тате текст, отображаемый на экране, будет легче восприниматься читателем.
В HTML и редакторах Web-страниц, работающих на его основе (таких как Netscape Com
poser), поддерживаются три типа списков, но только два их них получили широкое применение.
J Маркированные списки. На сегодняшний день в Web чаше всего использу-
ются маркированные списки. Почему бы и нет? Ведь они являются удобными
и легкими как для написания, так и, что более важно, для восприятия. Марки-
рованный список начинается с дескриптора <UL>, означающего неупорядо
ценный список, а заканчивается дескриптором </UL>. Перед каждым элемсп
том списка ставится дескриптор <LI>, что означает элемент списка.


У элемента списка нет завершающего дескриптора. Браузер ожидает увиден,
следующий дескриптор <LI> или дескриптор завершения списка, </UL>.
Большинство длинных текстовых блоков можно преобразовать в маркирован
ный список. Это сделает текст более удобочитаемым и легким для воспрн
ятия. Если имеющийся у вас текст необходимо перенести в Web, сделайте ei о
более “дружественным” для этой среды, применив “принцип маркирования”.
✓ Нумерованные списки. В некоторых пршраммах Web-редактирования нуме-
рованные списки в процессе создания выглядят весьма причудливо. Рядом с ка-
ждым элементом списка программа проставляет не номер, а символ #. Фактиче-
ский номер не назначается до тех пор, пока страница не будет отображена.
(В Netscape Composer фактические номера отображаются сразу же.) Нумерован-
ные списки весьма полезны, но в Web они встречаются реже маркированных.
Нумерованные списки начинаются с дескриптора <OL> (упорядоченный спи-
сок), а заканчиваются дескриптором </OL>. Как и в маркированных списках,
перед каждым элементом нумерованного списка ставится дескриптор <LI>.
При работе со списком, элементы которого необходимо расположить в по-
рядке важности, распределить во времени или упорядочить каким-то другим
образом, сделайте его нумерованным. Расположение элементов списка в оп-
ределенном порядке сделает его восприятие более легким, даже по сравнению
с маркированным списком.
J Списки определений. В этих списках сначала указывается термин, а затем
приводится его описание (т.е. дается определение термина). Такие списки ис-
пользуются достаточно редко, хотя они являются хорошим средством подачи
материала на Web-странице. Списки определений начинаются с дескриптора
<DL> (список определений), а заканчиваются дескриптором </DL>. Перед
каждым элементом списка определений ставится дескриптор <DD>, означаю-
щий данные определения.
Списки определений, размещенные на Web-странице, имеют немного своеоб-
разный! вид. Большинство Web-браузеров размещает термин в одной строке,
а его описание, после отступа, в следующей строке. Чтобы посетителю стра-
ницы было легче просматривать такой текст, выделите термины полужирным
начертанием, как это сделано в данном списке. Людям нравятся списки опре-
делений, но их не обязательно форматировать стандартным образом. Исполь-
зуйте как стандартное форматирование списков определений, так и свое соб-
ственное, с применением полужирного начертания, маркеров и нумерации.
Z Списки внутри списков. Вы можете вставить, или вложить, один список
в другой. Вложенные списки могут быть того же типа, что и “родительский”,
либо другого.
Иногда пользователю бывает трудно проследить, просматривает ли он основной
список или уже перешел к вложенному. Мы считаем, что создание вложенных
списков больше продиктовано имеющимися техническими возможностями, чем
потребностями редактирования. (Мы надеемся, что кто-то из вас сможет дока-
зать нам важность и острую необходимость применения вложенных списков.)
На рис. 6.5 представлены различные виды списков. При создании своей Web-страницы
используйте тот, который отвечает текущим потребностям.
/Звос/ tneiccina в Н7~Л1£
Процедура ввода текста в HTML является сложной в первую очередь потому, что прихо
дится уделять много внимания HTML-дескрипторам, в ущерб собственно творческому про-
цессу. Но через некоторое время вы к этому привыкнете, и работа с HTML-дескрипторам и
станет казаться совершенно рутинной. Приятным моментом является то, что вы можете пол
ностыо контролировать внешний вид своей страницы.
В данном разделе говорится о том, как использовать HTML для выполнения перечислен
ных ниже простых задач по созданию Web-страниц и наполнению их содержимым.
J Ввод текст а.
J Форматирование текста.
J Преобразование части текста в список.
J Проверка того, как выглядит текст в Web-браузере.
Ниже описывается, как можно создать HTML-код в программе редактирования текстов
и в программе Netscape Composer.
File Edit View Go Bookmarks Tools Window Help
L^Maif ДА1М. Й Home Radio ^Netscape CUsearch OBookmarks
В нумерованных списках указывается обычный порядок элементов
1 Сначала указываются самые важные вещи
2 Второй элемент
3 Третий элемент
В маркированных списках элементы указываются без всякого приоритета
Нумерованные списки важны
Маркированные списки важны
Списки определений не столь важны
Использование списков определений показывает, что вы
действительно умеете работать со списками
маркированный список
самый распространенный тип
нумерованный список
самый ценный тип
список определений
реже всего использующийся тип

>'ис. 6.5. Посмотрите на все варианты списков и выберите из них нужный
Что выбрать: Netscape Composer или бесплатную пробную версию другой программы?
Как правило, существует возможность бесплатно получить пробную версию превосходной программы
редактирования Web-страниц, например такой как Microsoft Frontpage или Macromedia Dreamweaver. Их
можно загрузить с Web-узлов этих компаний или с узла загрузки программ C|NET Download.com
(v7ww.download.com). Зачем же нужна программа Composer, если можно воспользоваться
неоплатной пробной версией другого, более функционального пакета?
' Всегда бесплатна. Программой Composer можно бесплатно пользоваться так долго, как вы этого
захотите. Не нужно беспокоиться о том, что по завершении срока действия пробной версии за нее
придется платить.
Очень проста. Поскольку программа Composer рассчитана на начинающих Web-дизайнеров, то
в ней имеются только базовые, не слишком сложные функции. Для начала этого вполне достаточно,
и вы не запутаетесь в процессе работы.
у Полностью совместима с HTML. Будучи вводной программой, Composer поддерживает только те
функции, которые совместимы с любым Web-браузером, тогда как при использовании ряда функций
Frontpage или Dreamweaver оказывается, что они не поддерживаются старыми браузерами или
диалоговыми службами, такими как AOL или CompuServe.
Кроме того, вы сможете лучше разобраться с инструкциями, приведенными в данной книге, если будете
работать с тем программным обеспечением, которое в них описывается.
Если вы твердо уверены в том, что вскоре перейдете к использованию программы FrontPage или
Dreamweaver, попробуйте поработать с их бесплатными версиями, чтобы иметь представление, с чем вам
придется столкнуться в ближайшем будущем. Но даже в этом случае для выполнения базовых операций
можно пользоваться программой Composer, а для реализации более сложных опций — полнофунк-
циональной программой. Даже если вы работаете в полнофункциональном редакторе Web-страниц, то
большинство действий, описанных в данной книге применительно к программе Composer, можно
использовать и в другой программе. Необходимо только заменить специфические команды Composer
соответствующими командами другого приложения.
Ввод и форматирование текста с помощью редактора
Чтобы быстрее привыкнуть к работе с HTML, начинайте прямо сейчас.
1.	Откройте или создайте HTML-документ в текстовом редакторе. Создайте шапку
документа и добавьте дескрипторы МЕТА в соответствии с инструкциями, при-
веденными в главе 5 “Создание домашней страницы”.
2.	В окне редактирования введите текст.
В качестве примера рассмотрим следующий текст.
Я только что купил новый ноутбук.
Я исключительно рад этому событию.
Больше всего мне нравится следующее:
Процессор Intel Centrino с частотой 1,4 ГГц
Жесткий диск емкостью 30 Гбайт
256 Мбайт оперативной памяти (хотя мне хотелось бы иметь 512
Мбайт)
Мой новый ноутбук работает гораздо быстрее старого.
3.	Начните с того, что расставьте дескрипторы <Р> и </Р>.
В описываемом примере дескрипторы абзаца начинаю! и заканчиваю! каждую hi
трех первых строк, а также последнюю строку.
4.	Найдите текст, который следует выделить.
В нашем примере выделено слово исключительно (см. вторую строку).
5.	Заключите выбранный текст между дескрипторами выделения особым шриф-
том, например <В> и </В> или <1> и </!>.
При наличии этих дескрипторов выделяемые слова при просмотре в Web-браузере бу
дут отображаться иначе, чем остальные. В нашем примере слово исключительно
будет отформатировано полужирным начертанием.
к! АС/
®Не забывайте там, где это необходимо, поставить закрывающий дескриптор.
Создание списка
Процедура преобразования текста в список выглядит следующим образом.
1.	Найдите строки текста, которые следует преобразовать в список.
В нашем примере в список будуг преобразованы строки текста, в кшорых речь пдг!
о процессоре, диске и оперативной памяти.
2.	Заключите выбранные строки между дескрипторами <UL> и </UL>, если хотите
создать маркированный список, или между дескрипторами <OL> и </ОЬ>, если
хотите создать нумерованный список.
3.	Перед каждым предполагаемым элементом списка поставьте дескриптор <Ы>.
Описываемый в нашем примере текст будет выглядеть следующим образом:
<Р>Я только что купил новый ноутбук.</Р>
<Р>Я <В>исключительно</В> рад этому событию.</Р>
<Р>Болыпе всего мне нравится следующее:</Р>
<UL>
<	Ы>Процессор Intel Centrino с частотой 1,4 ГГц
<	Ы>Жесткий диск емкостью 30 Гбайт
<	Ы>256 Мбайт оперативной памяти (хотя мне хотелось бы иметь
512 Мбайт)
</UL>
<Р>Мой новый ноутбук работает гораздо быстрее старого.</Р>
Текст сразу же отобразится в виде списка.
На рис. 6.6 показано, как будет выглядеть страница с нашим текстом. О том, что нуж-
но сделать, чтобы просмотреть ее на экране, рассказано в следующем разделе.
Подробная информация об основах HTML, в том числе о нумерованных и маркиро-
ванных списках, была представлена в главе 3 “Введение в HTML”. О том, когда сле-
дует использовать такие списки, говорилось в предыдущих разделах данной главы.
Рис. 6.6. Для создания списка используйте надлежащие дескрипторы
Просмотр Web-страницы
1Ipn работе над текстовым документом с помощью HTML-кода (который не позволяет за-
|'| цы। ь об используемых дескрипторах) необходимо почаще просматривать получающуюся в
|ч tyiii.iaie Web-страницу и как можно раньше выявлять потенциальные проблемы. Посмот
I'iim, ч । о необходимо сделать при работе в HTML для просмотра Web-страницы
1.	Выбери ге команду ФайлСохранить (FileTSave), чтобы сохранить документ.
2.	Откройте Web-браузер, например Internet Explorer.
3.	В окне браузера выберите команду ФайлоОткрыть (File^Open) для открытия
файла. В диалоговом окне Открыть укажите местоположение только что сохра-
ненного файла и выберите его. После этого щелкните на кнопке ОК, чтобы от-
крыть документ.
Ваш Web-документ отобразится в окне браузера в виде Web-страницы.
4.	В текстовом редакторе внесите в текст какие-то изменения.
Например, попробуйте добавить новое предложение (с форматированием или без него).
5.	Сохраните файл.
Если файл не будет сохранен на жестком диске, вы не сможете увидеть изменения
при просмотре документа в браузере.
6.	Щелкните на кнопке Обновить (Reload или Refresh) своего Web-браузера.
7.	После просмотра страницы сохраните документ и выйдите из программы Блок-
нот или другого используемого вами текстового редактора.
/Звоу tnetcctna в Netscape Сыи/ioser
Заполнение исходной Web-страницы с помощью Netscape Composer не представляет со
бой никаких проблем. Вы можете выполнять большинство операций, допустимых для Web
страницы, не выходя слишком далеко за рамки базовых действий. Поработав с Netscape Coin
poser, вы поймете, что можете использовать все основные текстовые функции HTML, нс бес
покоясь при этом об HTML-дескрипторах.
В данном разделе говорится о том, как следуег выполнять перечисленные ниже простые
задачи по созданию Web-страниц и наполнению их содержимым.
J Ввод текста.
J Форматирование текста.
J Преобразование части текста в список.
J Просмотр исходного текста с HTML-разметкой.
В данном случае описывается выполнение этих операций с помощью Netscape Compose)
(В предыдущем разделе вы узнали о том, как выполнить эти же задачи, работая непосрсдч
венно с HTML-кодом в текстовом редакторе.)
В главе 4 “Выбор средств” представлена информация о том, как получить Nctsc.ipi
Composer, а в главе 5 “Создание домашней страницы” описаны действия, выполни
мне на начальном этапе создания Web-страницы с помощью Composer.
Работая с Composer, вы сможете достаточно быстро изучить основы HTML. Дня
/Л»! этого следует периодически переходить к вкладке HTML Source (Исходный II ГМ1
код) и смотреть, какие дескрипторы появились на вашей Web-страницс.
Ввод и форматирование текста с помощью Netscape Composer
Редактировать текст Web-страииц в Netscape Composer легко и приятно, поскольку вы без
всяких проблем будете использовать возможности форматирования, пригодные для Web-
с границ, и только такие возможности. При этом у себя на экране вы будете видеть то же самое,
но и посетители вашей страницы, и не будете тратить время, выполняя некорректные для Web-
ораниц операции. Итак, для ввода и форматирования текста выполните следующие действия.
1.	Откройте или создайте Web-документ и придумайте его название (шапку). После
этого добавьте дескрипторы МЕТА в соответствии с инструкциями, представлен-
ными в главе 5 “Создание домашней страницы”.
2.	Введите заголовок, который следует расположить вверху Web-страницы.
В качестве первого заголовка введите, например, Футбольная школа Динамо.
3.	Поместите курсор на строку заголовка.
4.	В левом раскрывающемся меню выберите пункт Heading 1 (Заголовок 1).
Текст заголовка отформагирустся стилем Heading 1.
Любые выбранные вами HTML-стили, относящиеся к форматированию абзаца, по-
влияю! на весь текст абзаца, в котором располагается курсор.
5.	Переместите курсор на новую строку.
6.	Введите текст, описывающий Web-страницу.
При поиске вашей Web-страницы посредством поисковой машины могут отображать-
ся заголовок страницы (см. главу 5 “Создание домашней страницы”) и первые не-
сколько слов самого документа. Поэтому несколько первых предложений, следующих
непосредственно за заголовком, сделайте такими, чтобы они могли дать представле-
ние обо всей странице.
В качестве примера рассмотрим следующий текст:
Футбольная школа Динамо является кузницей юных футбольных талантов
всей Украины. Шанс поступить в эту знаменитую школу есть у каждого
мальчика 1994-1995 года рождения. Находясь в одном сплоченном
коллективе, мальчики вырастают и становятся настоящей командой.
Опыт игры в футбол. Если ваш ребенок раньше играл в детской или
школьной команде, в школе Динамо он может перенести свою игру на
качественно новый уровень. Уровень обучения. Мы гордимся своими
достижениями в спорте, равно как и тем, что наши воспитанники
постигают не только азы футбола, но и успешно осваивают другие
предметы общеобразовательного курса.
7.	Выделите текст, который следует отформатировать.
В нашем примере мы выделили слова Футбольная школа Динамо в начале перво-
ю предложения.
К. 1Целкните на кнопке того стиля форматирования, который вы хотите применить
к данному фрагменту текста: кнопка В соответствует полужирному начертанию,
кнопка I — курсивному начертанию, кнопка U — подчеркиванию.
В нашем примере слова Футбольная школа Динамо мы выделили полужирным
ii.i'iepiaiineM. К выделенному фрагменту будет применено заданное форматирование.
Создание списка
Преобразование текста в список очень похоже на применение форматирования к тексто-
вому абзацу (например. Heading 1). Выделите строки текста и выберите нужную опцию.
1.	Выделите строки, которые следует преобразовать в список.
В нашем примере выделены строки, начинающиеся с следующих слов.
•	1994-1995 года рождения
•	Опыт игры в футбол
•	Уровень обучения
2.	В раскрывающемся меню выберите стиль списка, который следует применить:
Bulleted List (Маркированный список) или Numbered List (Нумерованный список).
Текст мгновенно будет переформатирован в список, как показано на рис. 6.7.
Рис. 6.7. Процедура составления списков в Composer чрезвычайно проста
® Разъяснение терминов HTML, таких как нумерованный или маркированный список,
приводится в главе 3 “Введение в HTML”. В предыдущих разделах данной главы
описывалось, когда следует применять эти списки.
Просмотр HTML-кода
При работе с подобным Netscape Composer WYSIWYG-редактором имеет смысл почаще
просматривать HTML-код документа. Это позволит ознакомиться с самим кодом и посм<п
реть, каким образом его изменения влияют на внешний вид страницы. Для просмотра HTMI
кода в Netscape Composer выполните следующие действия.
1.	Выберите команду View=>HTML Source (Вид^НТМЬ-код) или щелкните пл
вкладке <HTML> Source, расположенной в нижней части окна Composer.
Откроется HTML-код вашей страницы.
2.	Внесите в HTML какие-либо изменения.
Вернувшись к обычному режиму редактирования, вы сразу увидите внесенные и imc
нения.
3.	Выберите команду View^Normal Edit Mode (ВидФОбычный режим редактиро-
вания) или щелкните на вкладке Normal, расположенной в нижней части окна
Composer.
В окне Netscape Composer отобразятся внесенные в HTML-код изменения, влияющие
на визуальное отображение Web-страницы.
4.	Сохраните документ и выйдите из Netscape Composer.
Глава 7
Добавление ссылок на Web-страницу
/3 этой гла£е...
Основы создания ссылок.
Прежде чем с головой погрузиться в мир ссылок, рассмотрим принципы их работы.
Вспомните, что основное назначение HTML-документа, являющегося основой вашей Web-
ораницы, заключается в его связи с другими файлами. Посетитель либо просматривает файл
вашей страницы, либо щелкает в определенной части страницы и покидает ее, переходя по
ссылке к другому документу.
> Основы создания ссылок
> Создание ссылок на Web-страницы
> Создание ссылки mailto
х Одной из самых больших проблем, с которыми сталкиваются пользователи Web, яв-
) ляются неработающие ссылки. Это чрезвычайно раздражает посетителей, но создатель
/ “дефектной” Web-страницы может достаточно долго не знать о наличии этой пробле-
мы. Во избежание появления неработающих ссылок тщательно и регулярно тестируйте их.
Уиперссылки Web — это средства связи, позволяющие переходить с одной Web-стр.)
ницы на другую с помощью одного щелчка мышью. Они являются основным факте
ром, обусловившим популярность Web. Создавать, тестировать и поддерживать ссылки
иногда бывает немного сложно. В этой главе мы расскажем о том. как это делать правильно
и с наименьшими усилиями.
Гиперссылки, которые для краткости называют просто ссылками, имеют долгую и слан
ную историю. Они являются основополагающей концепцией гипертекста, материалом, по
зволяющим связывап, информацию одной страницы с данными, представленными на другой,
которые подкрепляют, детализируют, определяют, описывают, относятся или даже противо
речат той информации, от фрагмента которой ведет первичная ссылка.
Гипертекст был определен и внедрен в небольших системах задолго до появления World
Wide Web. Изобрел этот термин в 1960-х годах Тед Нельсон (Ted Nelson). В течение десяти
летий он пытался продвигать идею гипертекста. Он написал знаменитую книгу Compute/
Lib/Dream Machines (Компьютерная свобода/машины мечты), в которой описываются многие
разновидности гипертекста и примеры их применения.
Идея гипертекста получила популярность в 1980-х годах, когда все большее и большее
число компьютеров стали объединять в сети. Причина возросшего интереса к гипертекст
очень проста: в соответствии с законом Меткалфа значимость сети возрастает по экспонат-
в зависимости от числа объединенных в нее компьютеров'.
Вернемся к гиперссылкам. С их помощью можно связать свою Web-страницу с произвол),
ной информацией, содержащейся на любой другой Web-странице. По мере роста Web росло
и количество имеющихся гиперссылок, причем до такой степени, что в настоящее время их чш
ло может показаться бесконечным. Путешествия по Web с помощью гиперссылок доставляю)
столько удовольствия, что для этого был изобретен специальный термин — Web-серфинг.
Гиперссылки также применяются для “доставки” информации на Web-страницы. Графи
ка, кажущаяся внедренной на Web-страницу, в действительности представляет собой ряд «и
дельных файлов, на которые указывают гиперссылки HTML-документа, определяющего Web
страницу. При работе в Web не имеет значения, располагаются ли графические файлы на пл
пом компьютере или разбросаны по всей Сети (однако, если файлы Web-страницы распило
жены на многих узлах, то время ее загрузки может существенно возрасти).
В этой главе мы рассмотрим разные типы гиперссылок и объясним, как на Web-ci painn >
использовать каждую из них. Кроме того, мы расскажем, как избежать проблем, которые ча
ще всего возникают при использовании гиперссылок на Web-странице.
' Автор не вполне точен. Закон Меткалфа гласит, что полезность сети прио///i/imi тно p.u.mi
квадрату численности пользователей этой сети. Примем, рсд.
Принципы работы ссылок
Основной механизм создания ссылки с одной Web-ст раницы на другую очень прост. Для
начата обозначения ссылки используется дескриптор <А>, который называется дескриптором
привязки. В пределах этого дескриптора можно указать, куда ведет ссылка. Для указания мес-
ia назначения ссылки используется атрибут HREF. Как правило, в документе дескриптор при
вязки сопровождает определенный текст, за которым ставится дескриптор </А>, означаю-
щий конец дескриптора привязки.
Приведем пример типичного дескриптора привязки, связанного с фрагментом текста:
Нисетите <А HREF=”www.dialektika.com">y3en издательства Диалектикас/А>
пня знакомства с деятельностью компании.
В типичном Web-браузере вы увидите следующее:
Посетите узел издательства Диалектика для знакомства с деятельностью
• >мпании.
На типичной Web-странице подчеркнутый текст (называемый текстом гиперссылки, па
котором щелкает пользователь для того, чтобы следовать по ссылке) будет отображаться си
ним цветом с подчеркиванием.
Другим типом ссылок, которые часто создаются на Web-страницах, являются графические
i сылки, т.е. указатели на изображения. Ссылки такого типа начинаются с дескриптора изо-
бражения, <IMG>. Его практически всегда сопровождает атрибут SRC, который указывает
место размещения изображения. При создании простых узлов изображения всегда следует
\ранить в той же папке, что и HTML-файл, который на них указывает. В таком случае атри
। 'V । SRC очень прост:
IMG SRC=''mypicture.jpg">
® следующей главе будет представлено много важной информации о графике и ipa
1 Над ) Фических ссылках. Но в данной главе основное внимание мы уделим тому, как cot
/ дать ссылку на графический файл, независимо от того, располагается ли он на вашем
Web-сервере или на другом компьютере.
Ссылки и адреса URL
( сылки имеют два основных предназначения: помочь пользователю перейти на дру, ую
Web страницу и доставить графический файл и отобразить его на Web-странице. Независимо ог
lima со щаваемой ссылки вы должны знать, каким образом следует указать, куда ведет ссылка.
ч Z Манипуляции мышью
Современные Web-браузеры поддерживают функцию наведения мыши на ссылки, которой чрезвычайно
широко пользуются посетители Web-страниц. При наведении указателя мыши на ссылку в левом нижнем
углу окна браузера указывается местоположение ссылки. (В некоторых версиях Internet Explorer строка
состояния, в которой указывается местоположение ссылки, по умолчанию отключена. Для ее включения
выберите команду Вид^Строка состояния (View^Status Ваг).) Данную функцию можно
использовать для проверки ссылок при тестировании Web-узла как др публикации, так и после. Убедитесь,
что посетители вашей страницы также смогут проверить, куда ведет ссылка, прежде чем щелкнут на ней.
Большинство ошибок, допускаемых при создании ссылок, происходит из-за незнания
принципов работы URL при связывании HTML-файла, являющегося основой одной Web-стра-
ницы, с другой Web-страницей или графическим файлом. Понимание принципов работы URL
поможет' вам создать более интересные Web-страницы и испытать гораздо меньше разочаро-
ваний при тестировании своей страницы. В табл. 7.1 представлена информация о том, как
следует создавать ссылки различных типов.
Таблица 7.1. URL и примеры Web-страниц
Местоположение целевого файла	URL	Пример Web-страницы	Пример графики*
Та же папка	имя_файла	<А HREF= ="myev.html”>текст</А>	<IMG SRC="myface. jpg“>
Другая папка на нижнем путь/ уровне того же пути имя_файла		<А HREF="subpages/ mycv.htm">текст</А>	<IMG SRC= ="grfx/myface.jpg">
Другая папка с другим путем	путь/ имя_файла	<А HREF="другая_стра- ница/другая_страни- ца. htm">текст</А>	<IMG SRC= ="sharegfx/ profa-ce.gfx">
Другой сервер, домашняя страница (index. htm или index. html)	имя_домена	<А HREF-"www.до- мен.сот">текст</А>	<IMG SRC= =" www. домен. с от / goodface.jpg”>
Другой сервер, внутренняя страница	имя_домена / путь	<А HREF="www.до-мен.сот/ files/ bud.html">текст</А>	<IMG SRC= ="www.домен.сот/ gifs/icon27.gif">
Ссылка в пределах страницы	Любой из представленных выше адресов + #имя_якоря	<А паше=”имя_заклад- ки" ></А>;<А HREF= ="www.largess.сот/#имя _закладки">перейдите_к _закладке</А>	He применяется
*В данных примерах не рассматриваются атрибут ALT и другие важные атрибуты графики, кота
рые подробно описываются в главе 8 “Создание и добавление готовой графики для размещения в Web".
Ссылка на файл, расположенный на другом сервере
Легче всего создавать ссылки, указывающие на определенный файл, расположенный на
другом Web-сервере. Это связано с тем, что URL такой ссылки является icm же самым, чк>
и адрес, по которому вы заходите на узел с помощью Web-браузера. При задании ссылки на
файл, расположенный не на том же сервере, что и ваш HTML-документ, можно установить
связь со страницами двух типов.
J Другой сервер, домашняя страница. Это самой простой тип URL. Вам сле-
дует указать только доменное имя, которое используется для открытия до-
машней страницы этого Web-узла. Например, зная, что Web-узел издательства
“Диалектика” имеет доменное имя www.dialektika.com, вы в качестве
гипертекстовой ссылки указываете этот URL.
J Другой сервер, не домашняя страница. Этот тип URL тоже достаточно
прост, но он немного длиннее и включает в себя не только имя домена, но
и путь к определенному файлу. Здесь только один “подводный камень”: при
задании ссылки на файл, расположенный на большом Web-узле, его URL мо-
жет представлять собой целую “гроздь” всякой белиберды.
Ниже приведен пример URL, полученного в результате поиска по запросу
Закон Меткалфа на поисковой машине Google.
http:I/www.google.com.ua/search?num=20&hl=ru&newwindow=l
&q=%D0%97
%D0%B0%D0%BA%D0%BE%D0%BD+%D0%9C%D0%B5%Dl%82%D0%BA%D0%B0%
DO%BB%D1
%84%DO%BO&btnG=%DO%9F%DO%BE%DO%B8%Dl%81%DO%BA&meta=
Полученный URL (его вы можете увидеть в поле Адрес браузера) не всегда
указывает местоположение файла. Иногда (как в приведенном выше примере)
это может быть запрос к базе данных, сохраненный в виде URL, но не стоит
об этом беспокоиться. Просто найдите тем или иным способом нужную вам
страницу, скопируйте ее URL и вставьте его на свою Web-страницу.
На рис. 7.1 изображена страница поиска с полученными результатами. URL
каждого из найденных файлов приводится после фрагмента текста, сопрово
ждающего ссылку, например, URL четвертой найденной ссылки таков:
www.ecsocman.edu.ru/db/msg/89365.html
Скопировав его, вы получите точную ссылку (по крайней мере она будет ра-
ботать до тех пор, пока на узле, на который указывает данная ссылка, не про-
изойдут какие-то изменения).
Если искомый файл имеет имя index. htm или index. html, то в имени пути к дан-
 fSll н°и Web-странице его указывать не нужно. В большинстве случаев такое имя при-
сваивается файлам домашних страниц или страницам навигации Web-узла.
Не волнуйтесь, если при открытии домашней страницы какого-то узла вы не увиди ге
 имени index. htm или index. html. Дело в том, что узел автоматически преобра
зует имя файла, ожидаемое браузером, в то имя, которое он хочет использовать. 11о
пробуйте ввести URL без указания определенного имени файла. Если этот способ
окажется действенным, то имя файла в ссылке указывать не нужно
Ссылка на файл, расположенный на том же сервере
На файл, расположенный на том же сервере, труднее задать ссылку, чем на файл, распо-
юженпый на другом сервере. Это обусловлено двумя причинами. Во-первых, указывая путь
i< цекальному файлу, гораздо легче допустить ошибку, потому что в этом случае вы нс можете
просто скопировать и вставить его URL. Во-вторых, при перемещении Web-узла на Web-
сервер (т.е. при публикации страницы) путь может измениться, что и обнаружится в процессе
тестирования. В результате URL станут неправильными, а ссылки — некорректными.
Рис. 7.1. В результате поиска может быть получен длинный URL
При задании ссылки на файл, расположенный на том же сервере, имя сервера указывать
не нужно. В этом случае Web-браузер будет знать, что файл следует искать па том же сервс
ре, что и Web-страницу.
Существуют три типа URL, на которые можно сделать ссылку в случае, если искомын
файл расположен на том же сервере, что и HTML-файл Web-страницы.
Тот же сервер, та же папка. Если искомый файл расположен на одном сервере
и в одной папке с HTML-файлом, то путь указывать не нужно. Именем пути бу
дет имя файла. Например, при задании ссылки на страницу myresume. htm.
которая располагается в той же папке, что и ваша Web-страница, именем nyi и
будет myresume. htm.
J Тот же сервер, подпапка. Если искомый файл находится в подпапке, уровень
которой ниже папки HTML-файла, то необходимо указать путь от HTMI
файла к папке, в которой содержится другая страница или графический фапл
Например, если ваша Web-страница хранится в одной папке, а графические
файлы— в ее подпапке, имеющей имя grfx, то путь к графическому ф.н1н\
myface. jpg будет следующим: grfx/myface. jpg.
J Тот же сервер, другой пугь. Сложности начинаются в юм случае когда гребу
ется задать ссылку на Web-страницу или графический файл, пахотящисся на юм
же сервере, но по другому пути. В этом случае можно использовать либо абсо-
лютный адрес, описывающий полный пугь к файлу по структуре каталогов сер-
вера, либо относительный путь от Web-страницы к файлу. Например, если
жесткий диск компьютера имеет имя тауа, то абсолютный путь к графиче-
скому файлу будет таким: maya/mypage/grfx/yourface. jpg. Относи-
тельный путь к этому же файлу от HTML-файла maya/mypage/webpages/
index.html будет следующим: . ./grfx/yourface.jpg.
Символы . . / используются для указания перехода на один уровень вверх относи-
тельно текущей папки.
Ссылка в пределах страницы
Есть еще один важный тип ссылок, при создании которых легко допустить ошибку. Можно
задать ссылку на определенное место в пределах той же страницы, а также на начало страницы.
Проблема заключается в гом, что HTML не позволяет задать местоположение в пределах
страницы “нормальным” языком. Вы не можете просто сказать “ссылка на место, располо-
женное прямо под фотографией Бритни Спирс или Мадонны”. Вместо этого в том месте, на
которое указывает ссылка, необходимо создать специальный маркер, называемый якорем2.
Технически любая создаваемая ссылка является якорем, но ссылки на Web-страницу,
Ц GK ) как правило, называют гипертекстовыми, а ссылки на графические файлы — графиче-
скими. Термин якорь (закладка) чаще всего применяется для обозначения специальной
°-й>овнсР метки, создаваемой в HTML-файле, определяющей место, на которое создается ссылка.
Для создания закладки необходимо вставить на Web-страницу дескрипторы <А> и </А>
Например:
<А NAME=aboveMadorma"x/A>
Между дескрипторами <А> и </А> не нужно приводить фрагмент текста Web-страницы,
как в случае гипертекстовой ссылки, гак как создаваемая закладка приводит в начало тексто-
вой строки, расположенной под нею3.
Для задания ссылки на место, отмеченное закладкой, следует вставить символ # и указал ь
имя закладки. Пусть, к примеру, вы вставили на Web-страницу десять закладок, по одной нал
каждым из основных заголовков, и пронумеровали их от 1 до 10. Тогда ссылка на третью за-
кладку в пределах данной Web-сграницы будет выглядеть следующим образом:
Посмотрите, <А HREF="#3">third</А>почему нужно голосовать именно за меня.
Как избежать ошибок
При создании ссылок очень легко допустить ошибку. Кроме того, даже “правильные”
ссылки могут перестать работать из-за того, что на Web-узле, на который они указываю!,
произошли какие-то изменения. Существует несколько способов предотвращения и устрапе
пня таких проблем.
J Храните все файлы Web-страницы в одной нанке. Если весь ваш узел
представляет собой одну Web-страницу, то могут использоваться только ссылки
на графические изображения, отображаемые в виде части этой страницы. 1lo-
ft русскоязычной литературе дескриптор привязки такого типа называют закладка. — Приме*), ред
Атрибут NAME служит для указания имени закзадк . — Примем, ред.
местите графические изображения в ту же папку, что и HTML-файл, описы-
,» вающий Web-страницу. В результате ссылки на графические файлы будут
максимально простыми, представляющими собой только имя файла. В ре-
» зультате при публикации узла вам придется переместить с компьютера на
Web-сервер всего одну папку.
J Храните файлы всего Web-узла в одной папке. Когда ваша Web-страница
разрастется в многостраничный узел, то хранение в одной папке всех HTML-
файлов страниц и графических файлов упростит процедуру задания ссылок. Хо-
тя со временем узел может разрастись так, что одной папки станет недостаточно.
Если ваш узел состоит из нескольких десятков файлов, воспользуйтесь аль-
тернативным способом. Создайте простую иерархическую структуру, сохра-
I няя каждый HTML-файл в папке с тем же именем, что и файл, коллективно
i используемую графику — в отдельной папке, а графические изображения, ис-
пользующиеся только на определенной странице, храните в папке этой же
страницы. Такой принцип хранения все равно достаточно сложен, но по край-
ней мере соблюдаются определенные правила.
} J Избегайте внутренних ссылок на Web-страницы других узлов. Задание
ссылки на определенное место Web-страницы другого узла кажется эффек-
тивным, но при этом вы привязываетесь к закладке, которая при обновлении
Web-страницы может быть удалена. Постарайтесь использовать внутренние
ссылки только в пределах своего узла. По крайней мере вы будете знать, кого
следует винить, если закладка, на которую указывает ссылка, будет удалена
или перемещена.

 J Перед публикацией узла проверьте все ссылки. Перед публикацией Web-
страницы или Web-узла протестируйте каждую страницу и убедитесь в том,
Js что графика загружается надлежащим образом и каждая ссылка работает кор-
(рсктно. При обнаружении проблем сразу внесите необходимые изменения
(пока это легко сделать) и еще раз проверьте, все ли сделано правильно.
/ Проверьте все ссылки после публикации. Вполне возможно, что после пуб-
ликации узла некоторые Web-ссылки работать перестанут. Это относится как
к ссылкам на графику в пределах Web-страницы, так и к ссылкам на другие уз-
лы. Протестируйте свой узел. При обнаружении проблем устраните их, снова
протестируйте узел на локальном компьютере и повторно опубликуйте его.
J Проверяйте все ссылки через каящые несколько недель. Существует боль-
шая вероятность того, что на других Web-узлах, на которые у вас сделаны ссыл-
ки, могуг быть внесены какие-то изменения. Не стоит надеяться на то, что тако-
го не произойдет. Перепроверяйте все ссылки через каждые несколько недель,
чтобы удостовериться, что они работают надлежащим образом. (Кроме того, не
| забывайте обновлять устаревающее содержимое своего собственного узла.)
Создание ссылок на Weh-an/iaHui^iH
В данном разделе мы составим сводку всех типов ссылок, которые можно создавать, и но
кажем, как создавать их в HTML и Netscape Composer. Процедуры добавления ссылок при
работе непосредственно с HTML-кодом и в Netscape Composer существенно отличаются.
Добавление ссылок в HTML
Для добавления ссылки на Web-страницу создайте дескриптор привязки и укажите путь
к нужной странице (или любой нужной закладке на ней). Ниже приведено несколько примеров.
Ссылка на начальную страницу узла, имеющего собственное доменное имя:
<А HREF=“www.dialektika.com">Посетите узел издательства
Диалектика. </А>
J Ссылка на внутреннюю страницу Web-узла с указанием пути и имени файла:
Прочитайте аннотации к <А HREF="www.dialektika.com/reviews/
annotation.html"> книгам издательства Диалектика.</А>
S Ссылка на страницу, находящуюся на том же сервере и в той же папке, что
и ваша Web-страница:
Я создал <А HREF="/opinions/gdlikes.html"> Web-страницу,</А>
с описанием того, что мне нравится на данном узле.
। Ссылка на именованный якорь (закладку) в пределах Web-страницы:
А теперь о том, что мне не нравится <А HREF= "www.dialektika.сот/
news/policies.htm#payupnow">Ha узле издательства Диалек-
тика . </А>
В последнем примере на странице policies .htm, содержащейся в папке News на
j Web-узле www. dialektika. com, должен быть якорь с именем #payupnow. Если
этот якорь (закладка) отсутствует, то посетитель все равно по ссылке попадет на
нужную страницу, но только не на определенное место на ней, а в ее начало.
Если при добавлении гипертекстовой ссылки ввести только доменное имя, то брау-
зер, не увидев имени файла, будет искать страницу index. htm или index. html.
Добавление ссылок в Netscape Composer
Чтобы при работе в Composer создать ссылку и не допустить ошибок, выполните сле-
дующие действия.
1.	Откройте Composer и свою Web-страницу в соответствии с инструкциями, при-
веденными в главе 5 “Создание домашней страницы”.
2.	Выделите на странице текст, который будет использоваться в качестве ссылки.
Не выделяйте пробелы перед используемым фрагментом текста или после него.
Ссылка с пробелами перед и после текста ссылки выглядела бы странно.
3.	Откройте диалоговое окно Link Properties (Свойства ссылки), выбрав команду
Insert^Link (Вставка^Ссылка) или нажав комбинацию клавиш <Ctrl+L>.
Откроется диалоговое окно Link Properties (рис. 7.2). Выделенный текст, который будсг
использоваться в качестве ссылки, отобразится в верхней части окна, в области Link Text.
Рис. 7.2. Для задания ссылки в программе Composer воспользуйтесь диалоговым окном Link Prop-
erties (Свойства ссылки)
Если вы не выделили текст, который следует использовать в качестве ссылки, ю
в диалоговом окне Link Properties его можно ввести вручную в поле Link Text (Тек-1
ссылки). По завершении на вашей странице появится ссылка. Однако все, что вы
введете сразу за ней, тоже станет частью ссылки и создаст для вас проблему.
4.	Если вы залаете ссылку на другой узел, введите URL этого узла. При задании
ссылки в пределах своего узла введите URL вручную или щелкните на кнопке
Choose File (Выбрать файл). Найдите файл, на который следует задать ссылку
и щелкните на кнопке Open (Открыть).
Для большинства ссылок на Web-страницу, расположенную на том же сервере, чы
и содержащая ссылку страница, используется относительная адресация. ПодроМам
информация о том, как задать такой URL, приведена выше, в разделе “Ссылка на фан г
расположенный на том же сервере”.
В зависимости от того, где расположен файл, ссылку на который вы вводите, в но.в
URL is relative to page location (URL относительно местоположения страницы) (>v
дет автоматически установлен или снят флажок. Это поможет подтвердить, что вин
димый адрес ссылки является абсолютным либо относительным (см. главу 1
“Публикация в Web: провайдеры Internet и бесплатные службы”).
5.	Если вы хотите использовать существующий именованный якорь (Закладку)
в файле, на который указывает ссылка, выберите его в списке. Только дли
локальных файлов действует следующее правило: если закладка не существует,
но вы хотите создать ее для заголовка, то в списке следует выбрать заголовок.
Netscape Composer откроет файл и создаст закладку для заголовка.
Бесплатная программа сделает для вас очень многое!
Примечание. Если вы хотите использовать для ссылки дополнительные атрибуты,
щелкните на кнопке Advanced Edit (она станет активной после того, как вы укажете
URL файла, на который должна указывать ссылка, или имя закладки). Откроется диало-
говое окно Advanced Property Editor (см. рис. 7.2). Закончив задание атрибутов,
щелкните на кнопке ОК, чтобы вновь стало активным диалоговое окно Link Properties.
6.	Щелкните на кнопке ОК, чтобы сохранить свойства ссылки.
На Web-страницу будет добавлен соответствующий HTML-код.
7.	Выберите команду View^HTML Source (Bn,lrLПросмотр HTML-кода) или
щелкните на кнопке HTML Source, чтобы просмотреть HTML-код, определяю-
щий Web-страницу.
Откроется HTML-код вашей страницы. Проверьте его, учитывая полученную в этой
главе информацию о ссылках, и убедитесь в том. что все в порядке.
Время от времени сохраняйте страницу на жестком диске, открывайте ее с помощью
Web-браузера и проверяйте работу ссылок. Проверка ссылок — это один из важ-
нейших типов тестирования.
Создание ссылки mail to
Ссылки типа mail to чрезвычайно распространены в Web. Хорошо то, что их легко соз-
ывать и приятно использовать. Плохо то, что они работают не у всех пользователей.
Ссылка mail to— это ссылка, предназначение которой заключается в автоматическом
<>1крытии почтовой программы пользователя и создании нового сообщения, которое надле-
жит отправить по адресу, указанному в ней. Пользователю остается только заполнить поле
1смы, ввести содержимое сообщения и щелкнуть иа кнопке отправки.
Однако при таком подходе у многих пользователей возникают проблемы. Дело в том,
по некоторые старые браузеры не поддерживают ввод адреса при активизации ссылки mail to.
кроме того, у многих пользователей браузеры не настроены так, чтобы ссылка mail to от-
крывала почтовую программу. И наконец, многие пользователи имеют несколько почтовых
программ, связанных с разными учетными записями. При использовании ссылки mail to
может открыться та почтовая программа, которую пользователь совсем не хочет использо-
U.11 ь в данный момент.
Кроме того, есть еще ряд проблем. Спаммеры (люди, рассылающие нежелательную
почту) получают адреса электронной почты, создавая программы-роботы, которые про
 магривают Web-страницы и ищут на них адреса электронной почты. Поэтому любой поч
юный адрес, указанный в ссылке mailto, может быть перехвачен и в дальнейшем исполь
юкап для рассылки спама.
Создайте отдельную учетную запись электронной почты только для получения ео-
f общений со своего Web-узла. В результате ваш личный и профессиональный почго-
вые ящики не будут засоряться спамом и письмами от посетителей узла. Существуй
множество почтовых служб, подобных Hotmail (www.hotmail.com), позволяющих
совершенно бесплатно создавать и использовать учетные записи электронной поч гы.
Пользователи могуг обижаться, если вы не будете отвечать на их сообщения. Возь-
мите за правило проверять почту, поступающую от пользователей, раз или два в день,
даже если для этого вам придется просматривать горы спама.
Радикальное решение всех этих проблем заключается в том, чтобы не использовать ссыл-
ку типа mail to и, следовательно, исключить общение с посетителями своей страницы. Од-
нако есть два альтернативных варианта.
f J Создайте форму. Если вы хотите получать какие-то данные или установить
\ обратную связь с посетителями своей страницы, используйте форму. Она по-
j зволяет по необходимости структурировать данные, вводимые пользователем.
С помощью формы вы все равно будете получать почтовые сообщения, но
пользователю не придется беспокоиться о том, какая почтовая программа от-
кроется у него на компьютере. Кроме того, вам не придется волноваться
о том, что спаммеры узнают ваш адрес электронной почты. (Подробная ин-
формация о формах приводится в главе 9 “Правильное размещение графики".)
J При использовании ссылки типа mailto “расшифруйте” адрес электронной
почты. Пользователи, компьютеры которых настроены так, что ссылка типа
mail to не работает, как правило, знают об этом. Если наряду со ссылкой mailto
вы укажете адрес электронной почты в явном виде, то им смогуг воспользовать
ся те, у кого ссылкаmailto не функционирует (скопировав и вставив ваш адрес
в свою почтовую программу). На рис. 7.3 приведен пример, в котором в ссылке
отправить сообщение зашифрован адрес vasyapupkin@mail.ru. Про
цесс выполнения этой задачи описывается в следующих разделах.
Рис. 7.3 Обратите внимание на реальный адрес ссылки mailto
Создание ссылки mailto в HTML
Процедура создания ссылки mailto в HTML очень проста и похожа на создание обыч-
ной ссылки, но, кроме того, вам не нужно беспокоиться о правильной адресации. Просто до-
бавьте в HTML-код строку, подобную приведенной ниже.
При желании вы можете <а href="mailto:vasyapupkin@mail.ru">
отправить сообщепие</а> Васе Пупкину по адресу
<а href="mailto:vasyapupkin@mail.ru">vasyapupkin@mail.ru</a>
Здесь, как и в обычной гипертекстовой ссылке, используется дескриптор привязки с атри-
бутом HREF. Также, подобно обычным гипертекстовым ссылкам, вы помещаете текст
ссылки между начальным и конечным дескрипторами привязки, но добавляете перед URL
места назначения (в данном случае это адрес vasyapupkinSmail. ru) атрибут mailto :,
после которого следует текст ссылки (в нашем случае это слова отправить сообщение).
Аналогичным способом в ссылку типа mailto превращается и “расшифрованный” адрес
>лектронной почты.
Обратите внимание на то, что в данном примере следом за ссылкой отправить
| ЛС» сообщение адрес электронной почты указывается в явном виде. Это позволит
пользователю не только вырезать и вставить адрес в свою почтовую программу, но
и увидеть, куда он отправляет свое сообщение. В данном случае пользователям мо-
жет понравиться и то, что используется конкретный, а не какой-то абстрактный ад-
рес типа feedback@mai1.ru.
Создание ссылки mailto в Netscape Composer
Создание ссылки mailto в программе Composer еще проще, чем создание обычной
ссылки. Выполните следующие действия.
1.	Откройте Composer и свою Web-страницу в соответствии с инструкциями, при-
веденными в главе 4 “Выбор средств”.
2.	Введите текст, который должен превратиться в ссылку mailto.
Сначала следует ввести текст, а потом преобразовывать его в ссылку.
3.	Выделите текст, который будет использоваться в качестве ссылки mailto.
4.	Откройте диалоговое окно Link Properties (Свойства ссылки), выбрав команду
Insert'bLink (Вставка^Ссылка) или нажав комбинацию клавиш <Ctrl+L>.
Откроется диалоговое окно Link Properties. Выделенный текст будет указан в его
верхней части (в области Link Text) в качестве текста ссылки.
5.	В поле, расположенном в области Link Location, введите mailto: и укажите ад-
рес электронной почты (без пробелов), на который должна указывать ссылка.
Будет создана ссылка на указанный адрес электронной почты.
В данном случае о других свойствах ссылки mailto беспокоиться не нужно. Эн>
| требуется только при задании ссылки на закладку в пределах одного документа.
6.	Щелкните на кнопке ОК, чтобы сохранить ссылку.
11а Web-страницу будет добавлен соответствующий HTML-код.
7.	Выберите команду View^HT NIL Source (ВидФ Просмотр HTML-кода) или
щелкните на кнопке HTML Source, чтобы просмотреть HTML-код, определяю-
щий Web-страницу.
Откроется HTML-код вашей страницы. Проверьте его, учитывая полученную в этой
главе информацию о ссылках, и убедитесь в том, что все в порядке. После этого со-
храните файл страницы и поздравьте себя с успешным созданием ссылки mailto!
Часть III
Быстрее, лучше,
привлекательнее
"Хорошо, йшн! Я ЗНАЮ, ЧМО AHUMAU,Ufl НрОкрЦЧЧВА€М£Я
0Ч4НЬ &?1£МрО, НО, Ч4рм Возьми, HUKAk Hi могц HAUMU
НА Г.АН4ЛЦ иНАМрЦМ^НМОБ кНОИКЦ "бМАМЫЬАМЬАя"!"
i
&э&ой час&и.,.
Графические изображения, предназначенные для размещения в Web, не
додакни §вдь слишком большими, потому что при этом время их загруз-
ки существенно увеличивается. С нашей помощью вы, как настоящий
профессионал, будете размещать ла своих Weo-страннцах оптимальные
графические изображения, красиво обрамляя их текстом. После того как
Страница приобретет безукоризненный вид, мы расскажем, как размес-
тить ее на Wcb-сервере,
Глава 8
Создание и добавление готовой графики
для размещения в Web
в эгИой главе...
>	Использование графики на Web-узле
>	Работа с графикой
>	Использование графики в HTML
>	Работа со сложными GIF-изображениями
настоящее время совершенно невозможно представить себе Web-страницу без гра
фики. Представьте себе, какое впечатление будут производить газеты и журналы, ее
ли убрать из них все фотографии, рисунки и графические элементы дизайна, которые приди
ют каждой странице неповторимый вид. И действительно, размещение графики на Web
странице — это настолько выигрышная стратегия, что один из авторов этой книги, Бад Сми г,
написал книгу, хорошо дополняющую данную, она называется Creating Web Graphics Jot
Dummies (издательство “Willey”).
Однако еще совсем недавно, в 1980-1990-х годах, до появления Web, в Internet размета
лись практически только текстовые материалы. На то время единственными службами Сеги
были электронная почта, конференции сети Usenet и сетевые форумы, которые работали пре
имущественно под управлением текстовых компьютерных систем, таких как UNIX и DOS.
Именно графика послужила основополагающим фактором столь быстрого взлета Web. Ге
можно использовать для передачи общей тематики и направленности, для акцентирования
внимания на определенных темах и даже для выражения основного содержимого Web
страницы. Графика необходима для любого Web-узла, даже для самого прагматичного.
Для того чтобы преуспеть в не очень простой задаче по добавлению графики на
Web-страницы, необходимо знать основы HTML и создания Web-страниц в целом
Прежде чем пристукать к добавлению графики, пусть даже самой простой, необхо
димо создать базовую структуру Web-страницы. Если вы еще не успели ознакомип.
ся с HTML-дескрипторами, прочитайте главу 3 “Введение в HTML”.
использование графики на Web-узле
Графические изображения занимают много места на жестком диске компыошра
(Причины этого описаны ниже, во врезке “Объем текста и графики”.) Когда частью Web
страницы являются графические изображения, их передача с Web-сервера на компьютер
пользователя через Internet занимает достаточно много времени.
Чтобы графика отображалась быстрее, необходимо использовать файлы изображении,
имеющие небольшие размеры Существуют два способа достичь этой цели. Первый in них
ключаетея в использовании изображений, имеющих небольшие размеры при их отображе-
ш на экране. Второй способ заключается в использовании файлов изображений небольших
н>емов. Это означает, что для уменьшения количества битов, необходимых для хранения
юбражения, файл должен быть сжат.
На Web-страницах можно использовать два типа сжатых изображений: в форматах GIF
JPEG. Они подробно описываются ниже.
спользование графических форматов GIF и JPEG
Каждая графическая программа сохраняет файлы в собственном графическом формате,
тедставляющем собой определенную организацию сохраненных данных. Например, попу-
|рная графическая программа Photoshop сохраняет файлы в формате . psd (Photoshop Docu-
ent); еще одна распространенная графическая программа, Paint Shop Pro, сохраняет файлы
формате . psp. (Вы, наверное, догадались, что означает это сокращение.) Как правило,
eb-браузеры не знают, как отображать файлы, сохраненные в названных форматах.
К счастью, при использовании графики в HTML необходимо побеспокоиться только о двух
трматах графических файлов: GIF и JPEG, причем для их использования совсем не обяза-
льно знать какие-то технические нюансы.
1 Z Формат GIF (Graphics Interchange Format— формат обмена графическими
данными) в большинстве случаев используется для обмена графическими изо-
бражениями Будучи разработанным для использования в пределах диалого-
вой службы CompuServe, формат GIF распространился и на друтие сетевые
службы, а затем перешел в Internet и Web. Любой браузер, поддерживающий
| графику, поддерживает и формат GIF.
' -F GIF-изображения могут содержать до 256 цветов. Следовательно, формат такого
типа эффективен для изображений состоящих из нескольких или нескольких
десятков цветов. Такие изображения считаются самыми простыми, и большин-
ство из них создается на компьютерах. Если в формат GIF преобразовать изо-
бражение, состоящее более чем из 256 цветов, то некоторая информация о цвете
будет утрачена. Прежде чем окончательно преобразовать графику в формат GIF,
посмотрите, существенно ли это повлияет на внешний вид вашего изображения.
. -F Формат JPEG (Joint Photographic Experts Group Format — формат Объединен-
ной группы экспертов в области фотографии) используется для сжатия сложных
изображений, имеющих существенные цветовые вариации. Благодаря этому
формат JPEG является приоритетным для отображения на Web-страницах фото-
графий и других естественных изображений. (Изображения выглядят естест-
венно за счет отображения разных оттенков цвета, в соответствии с тем, как
падает свет на различные участки объекта.) При сжатии в формат JPEG такие
изображения не утрачивают своего естественного внешнего вида.
На рис. 8.1 изображена страница Web-узла NASA, графически иллюстрирующая (прости-
ла невольный каламбур) разницу в объемах файлов, содержащих фотографии в форматах
IF и JPEG. Другой узел, на котором различные версии одной и той же фотографии Марка
ндрисена (Marc Andreesen), одного из основателей Netscape, можно найти на странице со
едующим адресом:
j 1.netscape.com/assist/net_sites/impact_docs/e-jpeg.html
Используйте эту страниц}' для проверки скорости своего соединения с Internet. Общий
>ьем страницы с графикой составляет около 70 Кбайт.
Рис. 8.1. Вот как выглядит одно и то же изображение, сохраненное в файлах разных форматов


Объем текста и графики
Текстовые файлы гораздо более “экономичны" с гонки зрения их хранения на компьютерах и передачи
по сетям ло сравнению с графическими. Это связано с тем, что текст очень жестко кодируется. Как
правило, объем обычной Web-страницы, на которой размещен сплошной текст (окилс 1500 текстовых
символов), составляет 1500 байт, или 1,5 Кбайт. Графические изображения занимают гораздо больше
места. Так, объем полноцветного изображения во всю страницу будет составлять около 1.5 Мбайт, что
почти в тысячу раз больше!
Большие объемы данных дольше передаются через Internet, в результате чего Web-страница может
загружаться очень долго Поэтому большинство Weo-страниц состоит из большого количества
текстовой информации, достаточно больших пустых областей и небольших, сильно сжатых графических
изображений. При подключении к 'nternet посредством модема загрузка файла объемом 1,5 Кбайт
займет несколько секунд, но такая страница никому не будет интересной. Однако загрузка
полноцветной страницы займет около 12 минут, а это слишком долго.
Для реализации быстрой передачи по Сети Web-графику, во-первых, делают небольших размеров, а во-
вторых, затем дополнительно сжимают (главным образом используя меньшее количество цветов для визуа-
лизации изображения). Графические пакеты, такие как Photoshop, позволяют сохр; пять изображения
в сжатом формате, используя гораздо меньшее количество цветов по сравнению с исходны,., рисунком.
Разве вы не замечали, что Web-изображения, как правило, имеют небольшие размеры и “рваные" края?
Теперь вы знаете причину этого явления. Web-изобоажения имеют нс самое высокие качество, но лучше
хоть что-то видеть у себя на экране, чем просто сидеть в ожидании завершения загрузки.
Если изображение содержит много участков одного цвета, то размер соответствую-
щего GIF-файла будет небольшим. Именно поэтому формат GIF чаще всего исполь-
зуется при создании баннеров или изображений с большими участками одного цвета,
таких как гистограммы или пиктограммы. Иными словами, для простых изображений,
создаваемых пользователями, лучше всего подойдет формат GIF. Для насыщенной ху-
дожественной графики и фотографий больше подойдет формат JPEG.
Однако иногда и для сохранения фотографий формат GIF может оказаться вполне подхо-
дящим. При работе с GIF-файлами вы получаете такие возможности отображения, которые не
всегда достижимы для файлов формата JPEG. Так, цвета GIF-изображений можно сделать
прозрачными, чтобы отобразить содержимое, находящееся на заднем плане изображения
Кроме того, GIF-изображения можно сохранять в чересстрочном формате. При загрузке со-
храненные таким образом изображения сначала отображаются с очень низким разрешением,
которое постепенно увеличивается до тех пор, пока на экране не появится вся картинка. Эта
особенность позволяет сделать GIF-изображения приоритетными в тех случаях, когда для на-
чала необходимо быстро отобразить ориентировочную картинку, а также для создания ори-
гинальных эффектов. (Чересстрочный формат будет подробнее описан далее в этой главе,
при рассмотрении примеров изображений.)
В прозрачных изображениях объект окружает прозрачная область. Предположим, вы хо-
тите, чтобы при использовании фотографии объекта на Web-странице отображался только
объект, без всякого фона за ним. Для достижения такого эффекта воспользуйтесь прозрачным
GIF-изображением. Тогда через прозрачную область будет виден фоновый цвет Web-
страницы, на котором будет “висеть” искомый объект. (Прозрачные GIF-изображения под-
робно описываются далее в этой главе, при рассмотрении примеров изображений.)
В некоторых случаях преимущества формата GIF компенсируют его недостатки по
сравнению со JPEG. Поэтому пользуйтесь данным форматом, если необходимо реа-
лизовать его специальные возможности. Во всех остальных ситуациях предпочти-
тельнее будет формат JPEG. Когда вы станете более искусны в области дизайна, то
сможете умело комбинировать оба формата и выбирать наиболее подходящий для
той или иной ситуации. Мы также расскажем о том, как можно получить или соз-
дать графические изображения, предназначенные для размещения на Web-странице,
и как сохранить графику в каждом из форматов.
В настоящее время появились новые версии JPEG, поддерживающие функции, присущие
формату GIF. Однако их поддерживает не такое уж большое количество графических средств
и Web-браузеров. Поэтому пока что лучше использовать именно GIF-изображения и накапли-
вать необходимый опыт и навыки.
Использование инвариантных Web-цветов
Одна из самых больших проблем заключается в том, чтобы Web-страница выглядела оди-
наково хорошо на всех компьютерах. При этом наибольшее внимание необходимо уделить
использованию цветов, которые являются наиболее пригодными для размещения в Web.
На некоторых компьютерах используется только так называемое 8-битовое цветовое
представление, под держивающее 256 цветов при каком-либо разрешении, например 800x600.
Практически все использующиеся сегодня компьютерные системы Windows и Macintosh под-
держивают как минимум такое достаточно низкое разрешение и базовую цветовую палитру.
Современные компьютеры имеют более широкие возможности. Они могут одновременно
отображать тысячи и даже миллионы цветов. Кроме того, разрешение при отображении ра
бочего стола может быть более высоким. В настоящее время наиболее распространи иным
является разрешение 1024x768 или 1280x1024. Некоторые компьютеры поддерживают даж<
более высокое разрешение. Однако переход к более высокому разрешению иногда означас t
потерю возможности одновременного отображения большого количества цветов.
стандарты графики
Любой современный Web-браузер может отображать три типа даннж текст с HTML-дескрипторами,
рафию формата GIF и графику формата JPEG. Обычный Web-браузер надлежащим образом отображает
текст с HTML-дескрипторами хотя не все браузеры поддерживают одни и те же дескрипторы. Кроме
того, браузеры отображают GIF- и JPEG-изображения, размещенные на Web-странице Web-стоаница со
встроенной графикой выглядит так же, как и страница обычного печатного издания, когда текст
и изображения образуют единое целоь Однако графические файлы хранятся отдельно от текста с HTML-
разме1кой образующего код Web-страницы. Это способствует лучшей работе в Web в целом, но
приводит к ряду проблем. В частности, возникают сложности при хранении Web-страниц в виде едино о
целого и их надлежащего отображения. 'Этот вопрос рассматриваете?! ниже.)
Даже на очень мощных системах можно задать отображение 256 цветов и разрешение
800x600, причем в таком режиме компьютер будет работать быстрее. Поэтому для оптималь-
ной производительности многие пользователи задают отображение 256 цветов при разреше-
нии либо 800x600, либо 1024x768. При запуске некоторых игр разрешение компьютера меня-
ется автоматически, причем пользователь об этом и не догадывается. После выхода из игры
и возвращения к Windows исходные настройки отображения могут не восстановиться. По-
этому пользователь может работать с более низким разрешением и меньшим количеством
цветов, чем поддерживает его система.
Чтобы убедиться в том, что ваши графические изображения будут одинаково хорошо вы-
глядеть на всех компьютерах, они должны выглядеть хорошо в системе, поддерживающеи
256 цветов, потому что на очень многих компьютерах поддерживается только эта настройка.
А чтобы еще сильнее осложнить вам жизнь, нелишне будет сказать о том, что на компьюте
pax Windows и Macintosh поддерживаются разные 256-цветовые палитры. В обеих системах
в режиме низкого количества цветов поддерживается только 216 общих цветов.
Если вы используете цвета, не относящиеся к Web-инвариантным, то можете обнаружить,
что в некоторых системах ваш цвет будет отображаться некорректно (при отображении цве-
тов, не относящихся к Web-инвариантным, возникают эффекты цветовых переходов, и ино-
гда изображение становится уродливым). Графическое изображение, прекрасно выглядящее
на вашем компьютере, может иметь ужасный вид в другой системе. Если вы будете использо
вать только Web-инвариантные цвета, то с такой проблемой не столкнетесь.
Существуют ресурсы, позволяющие смешивать цвета и образовывать комбинации Web-
инвариантных цветов, наиболее подходящие для той или иной ситуации. Для знакомства с па-
литрой Web-инвариантных цветов зайдите на узел www.bagism. сот/colormaker.
Получение и создание графики
Итак, вы хотите разместить на своей Web-странице какие-то графические изображ! шя.
Прекрасно! Но как их создать или преобразовать в нужный формат (GIF или JPEG)? К сча
с гью, создать или получить нужное графическое изображение совсем не сложно.
Проще всего взять графическое изображение из подборки иллюстративных вставок.
В компьютерных магазинах продаются недорогие компакт-диски с подборками графики для
использования в коммерческих и развлекательных целях. Кроме того, огромное количество
бесплатных коллекций графики представлено в Internet.
Если вы создаете коммерческую или узкоспециализированную Web-страницу, важ-
но, чтобы она имела профессиональный вид. Для этого необходимо использовать
привлекательные графические изображения и уделить особое внимание макетирова-
нию страницы. В главе 10 “Разработка красивых страниц” мы расскажем о том, как
разработать структуру страницы для тех или иных задач.
В поисках графики в Internet можно провести огромное количество времени. Фактически
даже сам поиск может побудить вас к созданию Web-страницы. И даже если за несколько ча-
сов поиска вам не удастся выполнить какую-то часть работы, в порядке компенсации вы по-
лучите массу новых идей.
Для начала можете поискать интересные графические изображения на следующих Web-узлах.
S На узле WebReference представлено большое количество самых разных ре-
сурсов. Его адрес таков: www.webreference. com
V Начать поиск графических изображений можно непосредственно на странице
названного выше узла, имеющей адрес
www.webreference.сот/authoring/graphics/images.htrnl
•	J Если вам необходимо фоновое изображение, зайдите на такую страницу узла
WebReference:
www.webreference.com/authoring/graphics/backgrounds.html
•	S Первый узел, рекомендуемый нами для тех, кому нужны фотографии, —
www.imagestate.com. Второй, популярный среди профессионалов —
www. gettyimages . com (по протоколу http на него можно зайти, введя адрес
http://creative.gettyimages.com/source/home/home.aspx).
	J На узле www. eyewire. com можно найти самую разную графику.
Существует множество других Web-узлов, на которых хранятся графические
изображения. Начните с тех узлов, которые назвали мы, а затем расширьте
круг поиска, пока не найдете нужное изображение.
Во многих поисковых машинах, таких как Google (www. google. com) или AltaVista
(www.altavista.com), имеется функция поиска графических изображений. Од-
нако имейте в виду, что большинство изображений защищено законом об авторских
правах и вы сможете разместить их на своей странице, только заручившись согласи-
ем владельца. Лучше всего пользоваться изображениями, которые можно загружать
без всяких ограничений.
Помимо поиска изображений в Сети, вы можете создавать их самостоятельно, с помощью
любой программы рисования. Например, в состав Windows входит графическая программа
Paint, которую можно использовать для создания исходных графических изображений. Даже
с помощью недорогих программ сегодня можно создавать достаточно интересные изображе-
ния. Здесь вы ограничены только собственным воображением и художественными талантами.
И еще немного о графике
В разделах FAO (Frequently Asked Questions — часто задаваемые вопросы) Web-узлов, посвященных
графическим форматам файлов, можно найти ответ практически на любой интересующий вас
вопрос, связанный с графикой. Самые свежие новости о графических форматах имеются на узле
www.dcs.ed.ac.uk/~mxr/gfx/utils-hi.html. Следуя ссылкам, имеющимся на этой
странице, вы найдете подробную техническую информацию о GIF, JPEG и других графических
форматах. Подробная информация об использовании графических изображений имеется на Web-узле
cgi.netscape.com/assist/net_sites/impact_docs/index.html.
Для работы над крупными коммерческими проектами и художественными произведения
ми, как правило, используются профессиональные программы, такие как Adobe Photoshop
и Adobe Illustrator. Если вам не хватает таланта, вы всегда можете попросить помощи у кого
нибудь из своих друзей с развитыми художественными наклонностями. Можете даже за нс
большую плату нанять студента художественного училища.
Еще один прием заключается в использовании сканера. Может быть, он есть у вас дома или
на работе. Если доступа к сканеру у вас нет, зайдите в ближайшую фирму, занимающуюся кони
рованием, где можно отсканировать нужные изображения за небольшую плату. Сканирование я в
ляется превосходным способом получения изображений для размещения на Web-страницах. После
сканирования графики или фотографии сохраните ее соответственно в формате GIF или JPEG
и разместите на своем Web-узле. Можете также обратиться в ближайший пункт печати фото
। рафий. Как правило, у них есть аппаратура для записи снимков на дискету или компакт-диск.
Еще один способ заключается в фотографировании изображения цифровой камерой.
Большинство цифровых фотоаппаратов комплектуется кабелями для подсоединения к ПК
и загрузки фотографий в компьютер. В комплекте также имеется программное обеспечение,
позволяющее редактировать и сохранять фотографии на ПК, как правило, в формате JPEG.
Но как убедиться в том, что графика сохранена в нужном формате? Это тоже очень про-
сто. Большинство программ рисования и программ сканирования имеет опцию сохранения
графики либо в формате GIF, либо в формате JPEG. Если же таких опций в вашей программе
нет, то причины могут быть следующие.
S В процессе установки программы вы не выбрали опцию установки конверте
ров GIF и JPEG. Возьмите установочный диск и посмотрите, можно ли пере-
установить программу с нужными опциями преобразования.
J Если проблема не связана с установкой конвертеров, обратитесь к производи
телю программного обеспечения или зайдите на его Web-узел и посмотрите,
нет ли там обновлений, позволяющих сохранять изображения в формате Gib
и (или) JPEG. Если компания, у которой вы приобрели программное обеснече
ние, не может предоставить вам программу, поддерживающую GIF или JPEG,
то вы без всяких проблем можете найти другого, более подходящего продавца.
Независимо от того, в каком формате вы получили исходное графическое изображение,
его легко преобразовать в формат GIF или JPEG с помощью программы, которую можно та
трузить из Web. Для преобразования в различные форматы пользователи Macintosh могут
воспользоваться программой GIFConverter (найти ее можно по адресу www.kamit.com/
gif converter/), а пользователи Windows— превосходной программой LView (ее можно
найти на сайте www. Iview. com). Сохранив графику в виде GIF- или JPEG-файла, вы будете
т отовы поместить ее на свою Web-страницу.
Сохраните изображение в формате, являющемся “родным” для используемой про
граммы> а также в формате GIF или JPEG. При сохранении в одном из двух послед
них форматов часть данных изображения может быть потеряна. Если же снова от
крыть GIF- или JPEG-изображение, отредактировать его и снова сохранить файл, то
при этом потеряется еще больше данных. Поэтому для сохранения данных на случай
необходимости последующего редактирования сохраните файл в его исходном фор
мате и создайте отдельные копии в формате GIF или JPEG для использования в Web
Табора с г/гафикой
Самым сложным вопросом, связанным с размещением графики на Web-страницах, явля
стен решение проблем компоновки. Процедура создания эффектных изображений и их пра
ITIIIH.лото размещения относительно текста не так пплстя i-аг мл-ягпт- ...чг-....-. . .-<> .... ..
взгляд. В этой книге не рассматриваются все сложности графического дизайна. Но мы обра-
тим ваше внимание на дополнительные аспекты, возникающие при использовании графики
в Web. Благодаря этому вы сможете максимально эффективно использовать собственные ху-
дожественные таланты или дать важные указания людям, которые работают над графикой,
использующейся на вашей Web-странице.
Ускорение загрузки страниц
Одной из нерешенных проблем Web является скорость загрузки— количество
S' / \ времени, которое проходит до момента появления Web-страницы на экране поль-
J зователя. Особенно велико время загрузки страниц, изобилующих графикой. Не-
смотря на то что такие страницы интереснее просматривать, пользователей может
чрезвычайно раздражать длительное время загрузки. Поиск компромиссного ре-
шения очень непрост; на него оказывают влияние множество факторов.
Скорость доступа. Пользователи работают в Web с разной скоростью подклю-
чения. Кроме того, один и тот же сервер, в зависимости от своей занятости, мо-
жет загружать одну и ту же страницу с разной скоростью. При тестировании на
локальном компьютере вновь созданной страницы, изобилующей графикой, вес
ее содержимое может загружаться очень быстро. Но если вы выгрузите эту же
страницу на сервер и попытаетесь открыть ее при скорости соединения
56 Кбит/с, то обнаружите, что она будет загружаться значительно дольше.
J Хорошая и плохая графика. Если вы рассчитываете на то, что посетители
(страницы будут тратить свое время на загрузку больших графических изобра-
жений, не пожалейте собственного времени и денег для того, чтобы создать
изображение максимально высокого качества. В противном случае посетители
страницы, потратившие время на загрузку изображения, будут чрезвычайно раз
очарованы. Примером хорошей графики может послужить качественный снимок
’ товара, который ищет посетитель страницы. Примером плохой графики окажется
баннер со стандартной фразой типа “Привет! Мы очень рады вас видеть!”.
J Разное настроение. Один и тот же посетитель, еще вчера с удовольствием про
сматривавший вашу страницу, на следующий день может скрежетать зубами oi
ярости при попытке быстрого просмотра этой же страницы (особенно, если он
встал не с той ноги, или его начальник встал не с той ноги, или браузер встал нс
с той ноги). Чем тщательнее будет проведена ваша работа с графикой, тем
больше разработанная вами страница будет радовать посетителей.
Что же нужно сделать для того, чтобы решить все эти проблемы (особенно, если они
встречаются не поодиночке, а все сразу)? Будьте рациональными!
Ограничьте число цветов, использующихся в изображении. В результате фан
лы станут меньше и будут загружаться быстрее.
Посоветуйтесь со специалистами (с теми, кого вы знаете) или посмотрите
ня

размещенные в Сети привлекательные узлы и подумайте, как сделать своп
изображения красивее.
Разместите на странице много маленьких изображений, вместо того чтобы m
громождать ее несколькими, но чрезвычайно большими графическими файлами
В табл. 8.1 указывается время, необходимое для загрузки 60 Кбайт данных. С траница, со
стоящая только из текста, обычно занимает' всего 2-3 Кбайт, тогда как страницы с ipa<|ni
кой— намного больше. К примеру, объем сложного, занимающего полстраницы GIF-
изображения, может составить около 50 Кбайт. Сравните общий объем всех элементов, со-
ставляющих страницу, со временем, указанным в табл. 8.1. Вы получите представление о том.
насколько быстро будет загружаться страница при разных скоростях соединения с Internet.
После этого можете еще раз поразмыслить над дизайном страницы.
Таблица 8.1. Самое медленное время загрузки
Скорость доступа	Описание	Время загрузки файла размером 60 Кбайт
28,8 Кбит/с	Медленный модем	35 с
33,6 Кбит/с	Модем со средней скоростью	30 с
56 Кбит/с	Быстрый модем	20 с
DSL	Специальная телефонная линия, модем	4с
Кабельный модем	Специальное кабельное соединение, модем	1 с
Ethernet	Стандартная сеть	Меньше 1 с
Как избежать трех серьезных ошибок
Не допускайте трех больших ошибок, связанных с размещением графики в Web.
Отсутствие графики. Если на вашей странице совсем не будет графики, она
будет выглядеть убого. Поскольку вы читаете эту главу, подразумевается, что
вы попытаетесь не допустить этой ошибки.
J Слишком много графики. Использование слишком большого количества
графики, что приводит к медленной загрузке страницы, является одной из са
мых распространенных ошибок начинающих Web-дизайнеров (хотя эту
ошибку допускают и многие опытные специалисты).
J Отсутствие альтернативного текста. Браузеры некоторых пользователей мо-
гут вообще не иметь функции поддержки графики. Кроме того, многие пользо-
ватели специально отключают эту функцию и используют ее только в случае
крайней необходимости. Вам необходимо удовлетворить и таких пользователей,
создав страницу, поддерживающую и графический, и только текстовый доступ.
Попытайтесь поэкспериментировать. Откройте браузер, отключите поддержку гра-
| ЛЛ фики и загрузите свою Web-страницу. Если вы не сможете сказать, о чем повествует
ваша страница и куда ведет каждая из ссылок, то дизайн страницы необходимо пе-
ресмотреть. (Затем, для того чтобы просто разрядиться, попробуйте провести тот же
эксперимент над какой-то другой страницей. Можете сообщить ее автору об обна
ружейных проблемах.)
Как правило, при пересмотре дизайна и модификации страницы для возможности только
icKcroBOro доступа на страницу следует добавить текстовое меню, ведущее туда же. куда
и । рафическое. На некоторых узлах имеется целый набор параллельных Web-страниц, пред
и.। шаченных исключительно для текстового доступа. При наличии параллельных страниц по
' с । и гель сможет самостоятельно выбрать, будет ли он ждать, пока загрузится красивая i ра
фпческая страница, или ему будет достаточно быстро загрузить текстовую. Однако практика
показывает, что все меньше пользователей предпочитают только текстовый доступ, по ному
। оманце целого набора текстовых страниц может быть излишним.
Ниже приведены наиболее распространенные правила поддержки текстового и графиче-
ского доступа.
По мере разработки и создания страницы подумайте о том, как будет выгля-
деть страница, если вся графика будет отключена или включена.
Протестируйте страницу при отключенной ( рафике.
J Протестируйте страницу с помощью другого браузера
v' Ко всем изображениям добавьте дескрипторы ALT (точнее, атрибуты ALT для
дескрипторов IMG), чтобы при отключенной графике на экране появлялся по-
яснительный текст. (Подробная информация о HTML-дескрипторах, исполь-
зуемых при работе с графикой, содержится в приложении В.)
Помимо элементов выбора, представленных в виде пиктограмм, и интерак-
тивных карт используйте на своей странице отдельные текстовые меню.
Если вы хотите осчастливить абсолютно всех посетителей страницы, создайте
отдельную текстовую версию своею узла.
Если вы планируете создать Web-узел, доступ к которому будет осуществляться с пор-
[А1 тативных устройств, например с органайзера Palm, то создание отдельной текстовой
версии узла действительно имеет смысл. Она будет хорошей "отправной” точкой
для карманных устройств.
Как быть с авторскими правами?
В книгах, журналах и на Web-узлах имеется множество великолепных графических изображений. Можно
ли отсканировать или каким-то другим образом скопировать их и использовать на своем Web-узле?
Нужно ли это делать?
И да, и нет. Да, вы можете это сделать, но лучше этого не делать. Издатели либо сами являются
владельцами используемых изображений, либо заплатили за право их публикации. Вы не сможете
легальным образом пользоваться большинством изображений, поскольку тоже должны будете
заплатить за использование или купить их.
Если вам понравилось изображение, размещенное на каком-то Web-узле, сообщите об этом Web-местеру
и, возможно, вы получите разрешение на его использование. Но все же разрешение на использование
большинства изображений из Web, а также практически на все печатные изображения получить будет очень
трудно. Гораздо легче создать новое изображение, служащее тем же целям, чем вести длительные
переговоры для получения разрешения. И кроме того, можно заработать немного денег, продавая
созданное изображение другим людям!
использование графики в H7ZUJ2
Дескриптор <IMG>— это HTML-дескриптор, внедряющий изображение на Web-crpa
ницу. (Подробно о HTML-дескрипторах см. в главе 3 “Введение в HTML”.) Ниже предстап
лены HTML-дескрипторы страницы, на которой с помощью дескриптора <IMG> и альтерна
тивного текстового меню представлено изображение MENUGRAPHIC. GIF.
<IMG SRC=”menugraphic.gif” ALT="Menu Graphic"> [
<AHREF="about.html">About</A> |
<AHREF="home.html">Home page</A> |
<AHREF="links.html">Fun Links</A> |
<AHREF=“map.html">Site Map</A> |
cAHREF=“search.html”>Search Map</A> ]
Знание HTML-дескрипторов пригодится и в том случае, когда вы пользуетесь про
граммами создания Web-страниц, позволяющими перетаскивать изображения, ука
зывать параметры сжатия и т.д. Дело в том, что может возникнуть необходимость
внесения в изображение незначительных изменений или задания специфических а г
рибутов, таких как альтернативный текст или указание каталога, в котором хранится
файл. Обладая даже небольшими познаниями о HTML-дескрипторах, вы сможете
в программе создания Web-страниц или в программе редактирования текстов or
крыть HTML-код и быстро и точно внести соответствующие коррект ировки.
Таким образом, на Web-страницах можно применять три полезных графических эффекта.
J Акценты. Небольшие графические изображения, которые служат в качестве
меток или используются для выделения тех или иных элементов (“Новинка”,
“Лучшая десятка” и т.п.).
•С Пиктограммы. Небольшие графические изображения, служащие ссылками
на другие страницы. После щелчка на пиктограмме вы перейдете на другую
Web-страницу.
С Миниатюры. Небольшие графические изображения, которые использую гея
для предварительного просмотра более крупного рисунка. После щелчка на
миниатюре загрузится большое изображение.
В акцентах дескриптор <IMG> используется для задания ссылки на небольшое графине
ское изображение, называемое внутритекстовым и являющееся частью страницы (если ого
бражение 1рафики не отключено).
В пиктограммах и миниатюрах дескриптор <IMG> используется совместно с дескриптором
привязки <А>. Дескриптор привязки задает ссылку на Web-страницу или более крупное графи
чеекое изображение, которое будет загружаться после щелчка на внутритекстовой графике
I йщробно об дескрипторе привязки см. в главе 7 “Добавление ссылок на Web-страницу”.
Ниже описываются процедуры использования дескрип тора изображения, дескрип юра
привязки и атрибута ALT как отдельно, так и совместно. С помощью этих элементов вы смо
*сге комбинировать графику с элементами навигации и создавать всевозможные эффекты.
Прочитайте описание HTML-дескрипторов в приложении В и посмотрите, какие at
| Лк» рибуты им присущи. Можете обратиться также к книге HTML в примерах. Как со<-
дать свой Web-сайт. Самоучитель, вышедшей в издательстве “Диалектика”.
Использование дескриптора <img> для
внутритекстовой графики
Для использования дескриптора <IMG> с атрибутом ALT при задании ссылки на Biiytpn
 снеговое графическое изображение, являющееся частью Web-страницы, выполните следую
I1IIIC действия.
I.	Создайте или найдите графическое изображение, ко торое вы хотите использова 
Внутритекстовые графические изображения, внедренные на страницу, должны б...
небольшими, размером с визитную карточку или меньше. Тогда они буду г быстро
отображаться на странице. Для поиска или создания нужного графического изображе-
ния воспользуйтесь источниками, описанными ранее в этой главе, в разделе “Получе-
ние и создание графики”.
2.	При работе с программой Netscape Composer выберите команду Insert^lmage
(Вставка^ Изображение). В текстовое поле введите URL страницы или изобра-
жения либо щелкните на кнопке Choose File (Выбор файла) и выберите нужный
файл на жестком диске. При работе непосредственно с HTML-кодом добавьте де-
скриптор <IMG> с атрибутом SRC, указывающим путь к файлу изображения.
Если графическое изображение находится в том же каталоге, что и HTML-файл, до-
бавьте дескриптор <IMG> с атрибутом SRC таким образом:
<IMG SRC="new.gif">
Если графическое изображение находится на другом Web-узле, добавьте дескриптор
<IMG> с атрибутом SRC таким образом:
<IMG SRC="http://www.grafixsite.com/new.gif">
3.	Добавьте атрибут ALT и укажите текст, который появится на экране, если про-
смотр 1рафики невозможен (например, если посетитель страницы работает с тек-
стовым браузером или у него отключена графика). При работе с программой
Netscape Composer введите текст в текстовое поле Alternate Text (Альтернатив-
ный текст). При работе с HTML-кодом добавьте атрибут ALT и текст в дескрип-
тор <IMG> следующим образом:
<IMG SRC="http://www.grafixsite.com/new.gif" ALT=“New!">
He рассчитывайте на то, что другой узел все время будет оставаться неизменным. По
возможности скопируйте нужную графику в каталог своего узла и задайте соответ-
ствующую ссылку. Позаботьтесь, однако, о том, чтобы при этом не был нарушен за-
кон об авторских правах.
Добавление якоря <а> для создания графической ссылки
Мы уже упоминали о том, что наилучший способ “безболезненного” (т.е. без замедления
загрузки) отображения страницы — это использование графических элементов в виде пикто-
грамм, являющихся ссылками на внешнюю информацию, такую как более крупное изображе-
ние, или на другую Web-страницу. Данная методика является превосходным способом сде-
лать страницу графически насыщенной, не заставляя пользователей долгое время ожидать
завершения ее загрузки.
Для того чтобы добавить якорь в целях создания графической ссылки, внутри дескрипто-
ра привязки добавьте дескриптор <IMG>. Кроме того, если между начальным и конечным де-
скрипторами привязки введено слово или фраза, то пользователь сможет щелкнуть мышью на
этом элементе. Ниже описывается процедура создания графической ссылки. 1 2
1. В Netscape Composer выберите команду lnsertd>lmage для вставки изображения.
В текстовом редакгоре используйте дескриптор <IMG> для вставки внутритекстовот о
изображения, которое вы хотите использовать в качестве миниатюры (небольшого
изображения, представляющего более крупную картинку) или пиктограммы.
<IMG SRC="minibud.jpg">
2. В Netscape Composer щелкните на изображении и выберите команду Insert1 >Link
(Вставка^Ссылка). В текстовом редакторе для указания ссылки добавьте деск-
риптор привязки (<А>).
Чтобы после щелчка пользователем на маленьком изображении отображалось более
крупное, дополните дескриптор привязки гипертекстовой ссылкой HREF, указываю
щей на файл изображения:
<А HREF= "maxibud.jpg"> <IMG SRC=”minibud.jpg"> </A>
На рис. 8.2 представлен фрагмент Web-узла Boojum Expeditions. Вы видите ерафическую
миниатюру и более крупное изображение, которое открывается после щелчка на ней.
Рис. 8.2. Комбинация мини- и макси-графики
Для задания ссылки на другую страницу используйте дескриптор привязки с атрибу
том HREF, указывающий на HTML-документ:
<А HREF="bebakpg.htm"> <IMG SRC="bebak.jpg"> </A>
Атрибуты HTML позволяют не только изменять размеры графического изображе
ния. но и ускорять отображение страницы. Для указания высоты и ширины изобра
жения в пикселях добавьте соответственно атрибуты HEIGHT= и WIDTH= к деск
риптору <IMG>. При работе в Netscape Composer в диалоговом окне Image'
Properties (Свойства изображения) воспользуйтесь областью Dimensions (Разме
ры). Эти данные браузеры используют для заполнения области вокруг изображения
что позволит пользователю еще до появления графики читать текстовую информа
цию, прокручивая страницу вверх и вниз. По мере загрузки на странице появшея
и само изображение.
®При задании атрибутов ширины и высоты изображение растягивается или сжимается
таким образом, что оно отличается от своих фактических размеров. Однако эти атри-
буты не должны изменять изображения. Атрибуты ширины и высоты следует задавать
пропорционально размерам исходного изображения, иначе оно будет искажено в ка-
ком-то одном направлении. Кроме того, если маленькое изображение разместить на
большой площади, оно будет растянуто, чтобы заполнить собой всю эту область,
и в результате станет искаженным. Если же большое изображение размещается на
маленькой площади, то оно будет выглядеть нормально, но размер файла будет гораз-
до большим по сравнению с тем объемом, которое изображение занимает на экране.
Чтобы избежать этих проблем, воспользуйтесь программой редактирования изображе-
ний, такой как Paint Shop Pro. Лучше отредактировать рисунок с ее помощью, а не
пользоваться атрибутами ширины и высоты для изменения размеров изображения.
Как Для начинающих, так и для опытных Web-дизайнеров одним из самых надеж-
) ных способов компоновки страниц является использование невидимых таблиц для
размещения текста и графики. Краткое описание таблиц будет представлено в гла-
%>овно^ ве ю “Разработка красивых страниц”. Надо сказать, что эта методика таит в себе
достаточно много проблем. Например, страница, скомпонованная с помощью таб-
лицы, может прекрасно выглядеть на одном мониторе и совершенно ужасно на дру-
гом (большего или меньшего размера). Найдите в Internet хорошо скомпонованные
Web-страницы и просмотрите их исходный код, чтобы увидеть, как другие пользо-
ватели работают с невидимыми таблицами. Чтобы увидеть работу специалистов,
зайдите на Web-узел Creating Killer по адресу www. killersites .сот/.
J^arfotna со сложными QJ^-u3od[tajfceHUSiMU
GIF-изображения широко распространены в Web. Поскольку одним из наиболее важных
факторов их использования является время загрузки, при работе с GIF-изображениями ис-
пользуются четыре сложные методики.
'С Прозрачные GIF-изображения. С ними должен быть знаком каждый поль-
зователь. Все GIF-изображения являются прямоугольными, но многие из них
кажугся “плавающими” на каком-то фоне, без явных границ. Такие GIF-
изображения называют прозрачными. Их фон является невидимым и перехо-
дит в фон браузера. На рис. 8.3 показаны непрозрачное и прозрачное GIF-
изображения с Web-узла Dummies.com. Здесь можно видеть два логотипа For
Dummies с темным фоном и один — с прозрачным.
J Чересстрочные GIF-изображения. Об этом типе изображений нужно знать нс
всем пользователям, но мы все же расскажем о нем, потому что эта информация
может оказаться полезной при использовании больших и сложных графических
изображений. Чересстрочные GIF-изображения создаются в результате действия
функции, сначала закрашивающей каждую четвертую строку изображения, за-
тем — каждую вторую строку, и так до тех пор, пока изображение не будет
завершено. Сначала изображение появляется с низким разрешением, которое
постепенно увеличивается до тех пор, пока не будет полностью загружено.
J Анимированные GIF-изображения. Базовая спецификация формата GIF',
GIF89a, поддерживает и статичные изображения, и анимацию. Вам необходимо
создать ряд изображений, которые при последовательном просмотре obpaiyioi
анимацию. Созданные изображения с помощью имеющихся инструментов упа
ковываются в один GIF-файл, который вставляется на Web-страницу. Вуаля'
Анимация готова! (Но простота достигается за счет увеличения размера файла
размер файла, содержащего анимацию, состоящую из четырех изображении,
будет столь же велик, как если бы он содержал четыре отдельных изображения )
J Интерактивные карты. Интерактивные (их еще иногда называют навигаци
онные) карты являются распространенным элементом как крупных, так и не-
больших узлов. Интерактивная карта представляет собой изображение с не-
сколькими активными областями, после щелчка на которых вы перейдете на
другие Web-страницы или на определенные участки той же самой Web
страницы. Такие навигационные карты очень удобны, но процедура их со гда
ния достаточно сложна и требует хороших дизайнерских навыков.
Рис. 8.3. Графика может быть представлена как на фоне какого-то цвета, так и на прозрачном фоне
Работа с графикой отнимает много времени
В этой главе мы много говорили о том, сколько времени может потратить посетитель Web-страницы о
ожидании загрузки изображения. Но каковы требования по времени, затрачиваемому на создание
। рафики вами как Web-дизайнером?
Процедура создания и редактирования графики достаточно занимательна! Но даже создание простого
и юбражения, например столбчатой диаграммы, может отнять очень много времени, учитывая работу со
шрифтами, с цветами и подгонкой размеров картинки. Еще больше времени займет подготовка
изображения для размещения в Web и его последующее тестирование. Работа с графикой легко может
превратиться в наиболее трудоемкую часть создания и обновления Web-узла.
Что же делать? Используйте небольшие изображения и не слишком увлекайтесь графикой, пока не при-
обретете достаточно опыта. Когда вы приобретете побольше опыта или наймете специалиста по работе
с графикой, можете разрабатывать и внедрять сложную графику, которая является отличительной
особенностью лучших Web-узлов.
GIF-изображения
Ниже приведены действия по созданию прозрачных GIF-изображений.
1.	Выберите цвет фона изображения, который необходимо сделать прозрачным.
Каждый пиксель изображения, имеющий выбранный цвет, станет прозрачным. Выберите
цвет, который встречается только в области вокруг изображения, а не внутри самого изо-
бражения. Возможно, понадобится отредактировать область, окружающую рисунок
(которая должна стать прозрачной), так, чтобы ее цвет а отличались от цветов изображе-
ния. Как правило, для создания эффекта прозрачности используется белый или светло-
серый цвет, который применяется в большинстве браузеров в качестве фонового.
Подробная информация о процедуре выбора области, которую следует сделать про-
зрачной, приведена на Web-узле Web 66, фрагмент которого изображен на рис. 8.3
(страница http: / /members . chello . at/michael .donoho/xparent. html).
2.	С помощью своего графического пакета или инструмента сделайте изображение
прозрачным.
Пользователи Macintosh могут воспользоваться утилитой Transparency, которую мож
но загрузить с Web-узла C|Net по адресу www. down load. сот.
Пользователи Windows могут воспользоваться программой Paint Shop Pro. Оцс
ночная версия этой программы имеется на прилагаемом к книге компакт-диске.
Для работы на любой платформе подойдет Web-пакет TransWeb, доступ к которому
можно получить по адресу www.mit. edu/tweb/map.html. Он позволяет считывал,
изображение, преобразовывать его и отображать на экране полученный результат. После
этого на изображении можно щелкнуть правой кнопкой мыши и сохранить его на диске.
Чтобы воспользоваться пакетом TransWeb, изображение следует переместить на Web
сервер (эта процедура описывается в главе 11 “Публикация Web-страниц”). Этот про
цесс может быть частью создания простой Web-страницы на узле GeoCities (см. гла
ву2 “Публикация в Web: провайдеры Internet и бесплатные службы”). После этою
зайдите на узел TransWeb и следуйте приведенным там инструкциям.
3.	Добавьте изображение на Web-страницу, следуя инструкциям, приведенным ра-
нее в данной главе, в разделе об использовании дескриптора <IMG>.
4.	Протестируйте страницу и убедитесь в том, что изображение остается прозрач-
ным при использовании разных фоновых цветов.
Откройте изображение в браузере и измените фоновый цвет браузера, заданный по
умолчанию.
Анимированные GIF-изображения
Процедура создания анимированных GIF-изображсний также поддерживается в Internet.
Воспользовавшись ресурсами Сети, вы сможете использовать такие изображения и разме-
щать их на своей Web-странице. Если вы хотите прочитать правдивую и захватывающую ис-
торию об изобретении анимированных GIF-изображений и найти ссылки на интересные при-
меры и ресурсы, зайдите на следующие Web-узлы.
http://members.aol.com/royalef/gifmake.htm
http://builder.com.com/5100-31-5078158.html
Интерактивные карты
Чтобы создать интерактивную карту, сначала необходимо создать изображение, на
основе которого она будет выполнена (пример яркой, привлекательной интерак-
тивной карты имеется на узле университета штата Калифорния, г. Сан-Диего, по
адресу www.ucsd.edu). После этого следует создать специальный файл, который
связывает различные области изображения с разными URL. На компакт-диске,
прилагаемом к книге, имеется программа Mapedit (о ней рассказывается в прило-
жении Д). Она позволяет создавать активные области карт как при работе на
Macintosh, так и в среде Windows. Загрузите изображение, щелкните мышью и вы
делите нужные места, определяя активные области, а затем введите URL, с кото-
рым вы хотите связать ту или иную область.
Сложности возникают на завершающей стадии процедуры. Исходная форма интерактив-
ных карт, называемая серверной интерактивной картой, требует, чтобы файл карты был
расположен в определенном месте, где его сможет найти сервер. К сожалению, для того что-
бы воспользоваться интерактивной картой такого рода, вы должны обратиться к системному
администратору, потому что не существует общепринятых стандартов по поводу того, где
именно должен находиться файл карты.
Netscape 2.0 и его последующие версии, а также Microsoft Internet Explorer и все остальные
современные браузеры поддерживают клиентские интерактивные карты, которые не требуют
|адействования серверных программ после щелчка на той или иной области карты. В настоящее
время браузеры стали достаточно умны для работы с картами и отображения нужного URL без
обращения к серверу. Если вы хотите ознакомиться с более подробной информацией по этому
вопросу, прочитайте документацию к Netscape 2.0 или зайдите на узел Netscape по адресу
http://wp.netscape.com/assist/net_sites/html_extensions_3.html.
Глава 9
Правильное размещение графики
/3 эгпой главе...
>	Корректировка размеров изображения
>	Обтекание графики текстом
>	Заключение графики в рамку
>	Размещение графики в Netscape Composer
>	Размещение графики в HTML
главе 8 “Создание и добавление готовой графики для размещения в Web” вы узнали
о том, каким образом следует размещать графические изображения на Web-странице.
Но для того чтобы страница выглядела привлекательной, необходимо побеспокоиться нс
только о самом изображении, но и о том, как именно разместить его.
В этой главе мы расскажем о том, как следует компоновать графику на странице, корректируя
ее размеры, размещая рядом текст и выделяя границы изображения. После этого вы научитесь
применять полученные навыки при работе с HTMI .-кодом и программой Netscape Composer.
Корректировка размеров изображения
Размеры изображения можно указать при его вставке на Web-страницу. Для этого в деск-
рипторе IMG указываются два атрибута: WIDTH и HEIGHT. При работе с Netscape Composer
или с другой программой создания Web-страниц, функционирующей на основе принципа
WYSIWYG, ширина и высота изображения вводятся как параметры с помощью используемой
программы. Затем введенные значения применяются к изображению самой программой.
Каждое графическое изображение имеет свои фактические размеры (высоту и ширину),
указываемые обычно в пикселях. При отображении с данными размерами рисунок выгляди)
так, как должен выглядеть оригинал. Однако изображение можно растянуть или сжать таким
образом, чтобы оно поместилось на определенном месте страницы.
Для задания размеров графических изображений существуют две причины, одна из кото
рых бесспорна, а другая сомнительна.
J Для сообщения Web-браузеру размеров изображения. Это — важная при
чина. При указании высоты и ширины изображения на Web-странице Web
браузер пользователя “зарезервирует” соответствующее место и в процессе
загрузки изображения продолжит отображение текста. Поскольку текст затру
жается значительно быстрее графики, это позволит пользователю увиден,
весь текст и начать его чтение, не дожидаясь появления изображения.
Для растягивания или сжатия изображения. Это — сомнительная причина
Если ввести высоту и ширину изображения, отличающиеся от фактических,
то Web-браузер растянет или сожмет изображение так, чтобы оно помсеш
лось в соответствующей области. К сожалению, в результате можно получи и.
весьма искаженное изображение.
Если вы намереваетесь растянуть или сжать изображение, то параметры его ширины и ны
соты можно задать несколькими способами.
✓ Уменьшить размеры изображения. Высоту и ширину изображения можно
уменьшить в равных долях, например задать их на одну треть или на К) про
центов меньшими по сравнению с исходными размерами. Рисунок станс i
меньше, но все равно буде т выглядеть неискаженно. Файл измененного и ю
бражения будет иметь такой же объем, что и исходный, несмотря на то, -по
изображение стало меньше. Поэтому лучше заблаговременно отредактирован,
исходное изображение так, чтобы уменьшить размер его файла, а затем для
размещения на Web-странице указать его фактические размеры. В и пи с
меньший файл будет быстрее загружаться.
J Увеличить размеры изображения. Чтобы растянуть изображение, в равных
долях увеличьте параметры ширины и высоты. Тогда изображение будет рас i я
нуто равномерно и не будет выглядеть слишком искаженным. Но в резульппе
растягивания на изображении могут появиться “разрывы”. Данный прием позволя
ет быстро заполнить маленьким изображением большую область на Web-странице,
но лучше отредактировать изображение заблаговременно и в специально предна
значенной для этого программе, такой как Photoshop, которая позволит сразу ус i
ранить возникающие проблемы. После этого для размещения на Web-страиицс
можно указать фактические размеры отредактированного изображения.
J Задать размеры, не пропорциональные исходным. Самое худшее, что
можно сделать, это задать размеры изображения, не пропорциональные не
ходным. Скажем, имеется изображение размером 50x50, а вам необходимо ы
полнить область размером 100x50 (т.е. высотой 100 пикселей и шириной 50 пн»
селей). Если просто указать параметр высоты 100 пикселей, а ширины
50пикселей, то Web-браузер пользователя соответствующим образом растяпе!
высоту изображения, и оно сильно исказится.
На рис. 9.1 приведены примеры масштабирования изображения до меньших, больших
размеров и непропорционально по отношению к размерам исходного изображения. Эго нс
самая лучшая картинка, с которой стоило бы начинать свою работу, но она позволяет уви
деть, что внесенные изменения ухудшили внешний вид изображения. При необходимости
вы можете применить любой из описанных приемов, но визуальные результаты буду! нс
слишком впечатляющими.
О&пекание г/гафики /пеканом
Одна из самых сложных задач правильной компоновки Web-страницы такова: добиться при
влекательного внешнего вида изображения и окружающего его текста. При размещении ню
бражений можно воспользоваться несколькими приемами, от самых простых до самых сложных.
Расположение текста выше или ниже изображения, но не рядом с ним.
Посредине текста можно оставить свободное место и поместить изображение
в центр этой области (рис. 9.2). Под изображением можно размести!i. иод
пись. Этот прием, позволяющий реализовать простую компоновку страницы,
является самым легким при работе с HTML, но при этом не используется
часть страницы слева и справа от изображения. Зато посетителям страниц..
придется приспосабливаться к визуальным “изгибам” текста на странице.
Рис. 9.1. Масштабированное изображение выглядит не лучшим образом
J Размещение рядом с изображением одной строки текста. Текст можно
расположить рядом с изображением и выровнять строку по верхнему, нижне-
му краям или по середине изображения. Это единственный способ, который
можно использовать в HTML для позиционирования изображения относительно
текста. В таком случае компоновка страницы получается не очень красивой.
J Обтекание изображения текстом. Команда, позволяющая размещать текст
так, чтобы он окружал изображение (подобно тому, как это делается при ма-
кетировании журналов), была добавлена в HTML всего несколько лет назад.
(Она реализуется с помощью атрибута ALIGN дескриптора IMG.) В настоя-
щее время практически все пользователи работают с достаточно новыми вер-
сиями браузеров, поддерживающими эту функцию.
/ Использование таблиц для точного задания расположения элементов стра-
ницы. В результате использования HTML-команды TABLE (таблица) будет соз-
дана сетка, в которую затем можно поместить текст и изображения (как при
макетировании газетной страницы). Это достаточно сложная задача, и вам при-
дется переделывать таблицу всякий раз, даже при внесении совсем незначитель-
ных изменений в текст или изображение. Поскольку данный прием позволяет
с высокой точностью регулировать компоновку страницы, то и результаты он дает
самые лучшие (или самые худшие, если сделать это неквалифицированно).
При работе с современными Web-браузерами самым распространенным приемом счита-
ется обтекание изображения текстом. Далее в этой главе мы расскажем о том, как нужно
применять данный прием при работе непосредственно с HTML-дескрипторами и программой
Netscape Composer.
1 Text example - Composer
> £U® Edit View Incen Format Table Tools Window Help
- J'.i.
Now is the time for all good people to come to the aid of their country. Now is the time for all good people to come to the aid of
their country. Now is the time for all good people to come to the aid of their country Now is the time for all good people to come
to the aid of their country Now is the time for all good people to come to the aid of their country Now is the time for all good
people to come to the aid of their country Now is the time for all good people to come to the aid of their country Now is the time
for all good people to come to the aid of their country Now is the|time for all good people to come to the aid of their country.
Now is the time for all good people to come to the aid of their country Now is the time for all good people to come to the aid of
ow is tiie time for all good people
their country Now is the time for all good people to come to the aid of their country
to come to the aid of their country. Now is the time for all good people to come to the aid of their country. Now is the time for all
good people to come to the aid of their country Now is the time for all good people to come to the aid of their country
ffHorinai
& 1 , ... ... .. -
Рис. 9.2. Размещение изображения в разрыве между строками текста приводит к неэконом-
ному использованию “полезной площади” страницы
Заключение г/гафики в [гамкс/
Одним из важных элементов, оказывающих влияние на внешний вид страницы, являскя
отделение друг от друга различных частей страница!. Если элементы страницы будут расно
ложены слишком близко друг к другу, то страница будет выглядеть хаотичной.
Данный прием особенно важен при обтекании изображения текстом (см. предыдущий
раздел). Вы можете задать прозрачную рамку вокруг изображения или сначала создать нспро
|рачную рамку, а потом сделать ее невидимой.
Большинство фотографий смотрятся значительно лучше, будучи окруженными ion
кой черной рамкой. В следующих разделах вы узнаете, как задать такую рамку при
работе непосредственно с HTML-кодом и в программе Netscape Composer.
^азме1цение графики в J/etsca/ie Cotnftoser
Знание HTML очень полезно, но с графикой гораздо легче работать с помощью рсдакюра
WYSIWYG, такого как Composer. Мы рекомендуем в процессе работы с этой программон
просматривать и изучать исходный HTML-код. Это гораздо удобнее, чем работать нспосрсц
с гвенно с кодом.
Для того чтобы разместить графику с помощью Netscape Composer, указать размеры и ю
Сражения, заключить его в рамку, выполнить обтекание текстом и создать нужные нромежу!
ки, выполните следующие действия.
1.	Откройте Netscape Composer.
2.	Введите какой-то текст или скопируйте и вст авьте его.
Размещать графику будет гораздо удобнее при наличии текста на странице.
3.	Поместите курсор в начало какой-то строки текста. Выберите команду Inserts
Image (Вставка1^ Изображение), чтобы вставить GIF- или JPEG-изображение
в соответствии с инструкциями, приведенными в главе 8 “Создание и
добавление готовой графики для размещения в Web”. Щелкните на кнопке ОК,
чтобы закрыть диалоговое окно свойств изображения (Image Properties).
Если у вас под рукой нет готового изображения, обратитесь к главе 8 “Создание и
добавление готовой графики для размещения в Web”, в которой приведены инструкции по
созданию изображений и указаны ресурсы, с которых можно бесплатно загрузить графику.
На рис. 9.2 показано, как на данном этапе может выглядеть ваш документ.
Обратите внимание на то, что на данном этапе текст еще не обтекает изображение.
4.	Дважды щелкните на изображении, чтобы открылось диалоговое окно Image Prope-
rties. Если слева от области предварительного просмотра изображения (Image Preview)
располагается кнопка More Properties (Другие свойства), щелкнит е на ней, и в диа-
логовом окне отобразятся поля опций всех свойств изображения.
На рис. 9.3 показано, как будет выглядеть диалоговое окно на данном этапе. Чтобы
поменять изображение на другое, следует щелкнуть на кнопке Chose file... (Выбрать
файл). Размеры изображения, другие его параметры и ссылку на него можно задать
с помощью соответствующих вкладок данного окна.
Переместите диалоговое окно Image Properties в такое место экрана, чтобы оно не
закрывало изображение.
Рис. 9.3. В диалоговом окне Image Properties мож-
но задать различные параметры изображения
В Netscape Composer ширину и высоту изображения указывать не нужно. Па основе
фактической ширины и высоты изображения программа автоматически добавит ат
рибуты WIDTH и HEIGHT к дескриптору IMG или добавит соответствующие атрибуты
стиля для выполнения той же самой задачи, используя имеющиеся шачепия высоты
и ширины изображения. Желательно указать альтернативный текст, который будет но
являться вместо изображения; для этого предусмотрено поле Alternalo toxt
5.	Если вы хотите уменьшить или увеличить изображение, то на вкладке Dimensions
(Размеры) окна Image Properties установите переключатель в положение Custom
Size (Настройка размеров). В большинстве случаев флажок Constrain (Принуди
тельно) лучше оставить установленным. Измените значения в полях Height
(Высота) или Width (Ширина) в соответствии со своими потребностями.
После установки флажка Custom Size поля Height и Width активизируются, и значения
в них можно будет изменять. Если оставить установленным флажок Constrain, то параметры
ширины и высоты изображения будут изменяться пропорционально фактическим разме-
рам изображения. Например, при изменении значения ширины изображения его высот
автоматически изменится так, что размеры изображения останутся пропорциональными
Изображение, расположенное в области Image Preview, не изменится сразу в cootbci
ствии с внесенными модификациями. Даже если снять флажок Constrain и увеличить
высоту изображения в два раза, сохраняя при этом неизменной его ширину, то и «»
бражение в области предварительного просмотра не станет в два раза длиннее и уже.
В области Image Preview отображается исходное изображение, а не то, которое будет
отображено на Web-странице. Чтобы увидеть, как изображение будет выглядеть на
Web-странице, в любой момент работы закройте диалоговое окно, и тогда текущие
значения повлияют на внешний вид изображения в окне документа.
После внесения изменений в диалоговом окне Image Properties щелкните на кнопке
ОК, чтобы закрыть его и просмотреть изображение с новыми параметрами. После
двойного щелчка на изображении диалоговое окно Image Properties откроется снова
6.	Щелкните на кнопке раскрывающегося списка Align Text to Image (Выравнива-
ние текста относительно изображения) и укажите, каким образом текст должен
обтекать изображение. Можно выровнять одну строку текста по верхнему, пиж
нему краю или по центру изображения или задать обтекание текстом слева или
справа от изображения.
Если рядом1'с изображением необходимо разместить какую-то надпись, то лучше выбран,
опцию выравнивания одной с троки текста по верхнему, нижнему краю или по центру то
бражения. Во всех остальных случаях лучше выбрать опцию обтекания текстом слева или
справа от изображения. Например, чтобы изображение было сдвинуто вправо на странице,
а текст располагался слева от него, выберите опцию Wrap to the left (Обтекание слева).
7.	В полях группы опций Spacing (Промежуток) укажите число пикселей пустой
области, окружающей изображение.
Как правило, задают равные интервалы слева и справа, а также вверху и внизу и ю
бражения. Для начала можно указать значения 4 пикселя. Завершив работу над тек
стом и изображением, вы можете откорректировать эти значения.
8.	Оставаясь в области Spacing, укажите размер рамки, в которую будет помещено
изображение.
Если изображение заключить в тонкую рамку, оно будет лучше выделяться на фот-
окружающего его текста. Для начала задайте размер рамки равным 2 пикселям, а но
гом можете откорректировать.
Д-гя сохранения целостности стиля страницы поместите все изображения в одинако
вые рамки и задайте одинаковые интервалы. В поисках значений, оптимально под
ходящих для всех изображений, вам придется какое-то время потрудиться, но мира
ченные усилия того стоят. Даже незначительное несоответствие размеров рамок
повлияет на внешний вид страницы.
^азасеш^ние графики в Н7\Я1£
Корректировка расположения графики непосредственно в HTML-коде представляет собой
чрезвычайно сложную задачу, особенно если вы еще не имеете соответствующего опыта. На-
чинающим разработчикам необходимо экспериментировать, и делать это лучше в программе
типа Netscape Composer. Поэтому для надлежащего размещения графики на Web-странице
мы рекомендуем воспользоваться программой Netscape Composer и действовать в соответст-
вии с инструкциями, приведенными в предыдущем подразделе.
Если вы все же предпочитаете (или вынуждены) рабо тать непосредственно с HTML-ко-
дом, применяя для этого HTML-редактор или программу Блокнот, воспользуйтесь инструк-
циями, приведенными в данном разделе. В них будут указаны значения различных парамет-
ров изображения и его компоновки на странице.
Для размещения графики с помощью HTML-кода, а также для указания размеров изобра-
жения, создания рамки, обтекания текстом и промежутков выполните следующие действия.
1.	Откройте документ в текстовом редакторе. Сохраните его с расширением .htm,
чтобы браузер воспринял его как HTML-документ.
2.	Введите какой-то текст или скопируйте и вставьте ею.
Размещать графику при наличии текста на странице будет гораздо удобнее.
3.	Вставьте изображение посередине текста, используя для этой цели дескриптор
IMG. Добавьте альтернативный текст, поясняющий данное изображение.
Правильный синтаксис будет таким: <IMG SRC-url ALT= " текст" >, где url—•
это Web-адрес, а текст — краткое описание изображения. Подробная информация по
этому вопросу приведена в главе 8 “Создание и добавление готовой графики для
размещения в Web”.
4.	Сохраните свой документ и откройте его в Web-браузере, ч тобы посмотреть, как-
ой выглядит на данном этапе.
Документ должен выглядеть примерно так, как было показано на рис. 9.2.
По мере добавления дескрипторов и корректировки параметров документа сохра-
f/М няйте его и просматривайте в Web-браузере после внесения каждого изменения. Эго
позволит вам понять, как будет выглядеть страница после каждого внесенного вами
изменения.
Для обновления Web-страницы и отображения внесенных изменений воспользуй-
тесь кнопкой Refresh (Обновить) или Reload своего браузера.
5.	К дескриптору IMG добавьте атрибуты WIDTH и HEIGHT.
В большинстве случаев следует задавать значения атрибутов, соответствующие фак-
тическим размерам изображения. Если вы хотите изменить размеры изображения или
его пропорции, рассчитайте соответствующие значения атрибутов WIDTH и HEIGHT
и введите их. Просмотрите полученный результат в Web-браузере.
Теперь дескриптор IMG будет выглядеть следующим образом: <IMG SRC=urI
WIDTH=xx HEIGHT=yy>, где xx— ширина изображения в пикселях, а уу— его вы
сота в пикселях.
При задании значений атрибутов WIDTH и HEIGHT, соответствующих факшчсским
размерам изображения, внешний вид страницы не изменится, ио Web-браутсру буде1
легче загрузить остальную часть страницы и расположить ее вокруг изображения. При
использовании других значений атрибутов внешний вид страницы изменится.
©Чтобы выяснить фактические размеры изображения, щелкните правой кнопкой мы
ши на его пиктограмме на рабочем столе Windows. Затем выберите пункт Свойства
(Properties) и просмотрите фактические значения ширины и высоты изображения.
6.	Для того чтобы задать обтекание текстом, к дескриптору IMG добавьте атрибуi
ALIGN.
Чаще всего для данного атрибута используются значения RIGHT (обтекание текстом
справа от изображения) и LEFT (обтекание текстом слева с одновременным смешепи
ем изображения вправо). Можно использовать и другие значения атрибута: ТОР.
CENTER или БОТТОМ. Если атрибут ALIGN не используется, то по умолчанию приме
няется значение БОТТОМ. Это означает, что текст сдвинут вправо и размещен под и «о
бражением, а остальные области вокруг изображения остаются пустыми. Вас вряд ни
устроит такая компоновка. Поэтому начните с атрибута ALIGN=RIGHT, а затем изме
ните его по своему усмотрению.
7.	Для того чтобы задать промежутки вокруг изображения, добавьте к дескрип гору
IMG атрибуты HSPACE (для задания отступа по горизонтали) и VSPACE (для зада-
ния отступа по вертикали).
Атрибут HSPACE задает равный отступ (в пикселях) справа и слева от изображения
а атрибут VSPACE — сверху и снизу от изображения. Для начала можно задать атрп
буты HSPACE=4 VSPACE=4.
8.	Для того чтобы создать черную рамку вокруг изображения, добавьте атрибу i
BORDER. Подходящим будет значение BORDER=2.
После задания всех нужных атрибутов синтаксис дескриптора IMG может выглядеп.
следующим образом:
<IMG SRC=url ALT="текст" WIDTH=xx HEIGHT=yy ALIGN=right HSPACE 4
VSPACE-4 B0RDER=2>.
г Для сохранения целостности стиля страницы поместите все изображения в одинако
ВЬ1е рамки и задайте одинаковые интервалы. В поисках значений, оптимально под
ходящих для всех изображений, вам придется какое-то время поэкспериментиро-
вать, но затраченные усилия того стоят. Даже незначительное отличие размеров
рамок повлияет на внешний вид страницы.
Глава 10
Разработка красивых страниц
/3 э/Иой главе...
>	Три важнейших принципа дизайна
>	Ошибки дизайна, которых следует избегать
>	Безнаказанное нарушение правил
>	Использование таблиц и фреймов
Я я Ри создании и публикации Web-страниц необходимо помнить о том, что каждая
С* страница должна иметь привлекательный внешний вид. Некоторые страницы выгля-
дят великолепно, дру1 ие — просто хорошо, а третьи — любительски. Привлекательность стра-
ницы в значительной степени определяется ее посетителем — красоту оценивает зритель. Но
некоторые страницы настолько очевидно плохи или хороши, что с этим нельзя не согласиться.
При создании первой Web-страницы (речь об этом шла в части I) на ее внешний вид не
стоит обращать большого внимания. Вы просто развлекаетесь и набираетесь опыта. Но если
вы создаете Web-страницу, которую увидят очень много людей, например коммерческой на-
правленности или для продвижения по служебной лестнице, необходимо, чтобы страница вы-
глядела привлекательно. А объяснить, как это сделать, не так просто.
Впечатление, которое производит Web-страница, зависит от многих факторов: от соот-
ношения пустых областей с областями, заполненными текстом и графикой, объема исполь-
зуемого текста, применяемых шрифтов, умелого использования заголовков, надлежащего ис-
пользования маркированных и нумерованных списков, гиперссылок и других бросающихся
в глаза элементов. Каждый из перечисленных компонентов должен бы ть “правильным”, но
эту “правильность” определить бывает трудно. Все применяемые на странице элементы
должны быть гармоничными в целом, а это определить еще сложнее.
Чтобы создать по-настоящему привлекательную Web-страницу, необходимо быть профес-
сионалом в этой области. В конце данной главы мы расскажем о том, как получить необхо-
димую помощь в определении привлекательности вашей Web-страницы. Но для того чтобы
создать просто хорошую страницу или по крайней мере не допустить того, чтобы она выгля-
дела отталкивающе, профессионалом быть совсем не обязательно. В данной главе мы рас-
скажем о том, как этого добиться.
Jftytu важнейи^их принципа дизайна
Термин дизайн Web-страницы проще всего определить как внешний вид страницы и ха-
рактер ее восприятия посетителем (привлекательность или непривлекательность, легкость
или сложность использования). Дизайн — понятие художественное и эстетическое. В основе
овладения навыками дизайна лежит творческая сущность человека, а оценка созданного це-
ликом и полностью зависит от индивидуального вкуса оценивающего. Сложных или простых
правил, позволяющих всегда получать хороший дизайн, не существует. Этот факт некоторых
просто выводит из себя. Однако многие важные аспекты бытия, такие как любовь, вкусная
пища, хорошее вино и т.п., невозможно вписать в рамки каких-либо правил.
За многие годы разработки Web-страниц мы научились многим “трюкам” Web-дизайна.
Мы пришли к выводу, что вместо четких правил в процессе дизайна следует руководство-
ваться общими принципами, которые, как правило, дают хороший результат. Конечно, мы в
значительной степени привязаны к общепринятым моделям восприятия, на основе которых
люди делают вывод о том, что выглядит привлекательно, а что — отталкивающе. Опять же мно-
гим трудно постичь данный факт, но это единственный способ добиться хорошего дизайна.
В основе приведенных в данной главе советов, касающихся дизайна, лежит опыт ав-
(торов и посетителей многочисленных Web-узлов, а не какие-то формальные подхо-
ды. Более того, наши советы касаются только людей, создающих отдельные Web-
страницы или небольшие Web-узлы, содержащие порядка 5-10 Web-страниц. Эти
советы не относятся к крупным узлам, которые необходимо тщательно планировать
с начального этапа их создания. Все это означает, что наши советы вряд ли подой-
дут профессионалам, но окажутся весьма полезными для начинающих разработчи-
ков. Если вас интересуют подробности, касающиеся дизайна Web-страниц, прочи
тайте книгу Web-дизайн для “чайников”, вышедшую в издательстве “Диалектика”.
Тремя важнейшими принципами разработки домашних Web-страниц и небольших Web-
узлов являются простота, предсказуемость и целостность. Ниже мы расскажем о том, как при-
менить эти принципы на практике.
Простота
Простота считается признаком хорошего дизайна. Глаз современного человека привык
искать и по достоинству оценивать простой, без вычурности, дизайн. Используйте самый
простой дизайн, необходимый для реализации поставленной задачи, а потом постарайтесь
определить, как можно упростить его еще больше. Применительно к Web-страницам просто-
та означает использование всего понемногу — элементов дизайна, графики, размеров текста,
гак, чтобы не выходить за пределы разумного.
В области Web-дизайна простота имеет особые преимущества, поскольку на Web
страницы распространяются временные ограничения и отличия настроек компьютеров поль
ювателей. Тот факт, что загрузка каждого элемента занимает определенное время, означает,
ч то Web-страница с простым дизайном, как правило, загружается быстрее сложной, а посетите
лям всегда нравятся быстро загружающиеся страницы. (На самом деле им не нравятся медленно
сгружающиеся страницы, но лучше мы представим эту ситуацию в позитивной форме.)
Различие настроек компьютеров пользователей также говорит в пользу простоты. Один
пользователь может рассматривать вашу страницу на маленьком мониторе, поддерживающем
только 256 цветов, другой — на большом экране с высоким разрешением и миллионами цве-
тов. Чем проще дизайн Web-страницы, тем вероятнее, что на разных компьютерах она будст
выглядеть примерно одинаково.
Для вас, новичка в области создания Web-страниц простота является особенно важным
фактором. У вас пока что нет наработанного многомесячным трудом опыта работы с разлнч
ными элементами, которые подходят или не подходят для той или иной ситуации. У вас iiei
и достаточных технических знаний для того, чтобы все и всегда делать правильно (особенно
но касается новых и сложных операций). Чем проще будет дизайн вашей страницы, (ем
меньше вероятность запутаться.
Простота является самым важным элементом содержимого страниц, т.е. текста, который
читает посетитель, и картинок, которые он рассматривает. На рис. 10.1 и 10.2 показано со
тержимое первого и второго экранов статьи Appreciating HTML Frames на узле For Dummies.
<Обратите внимание на то, как внимание посетителя акцентируется на содержимом страницы.
Рис. 10.1. Верхняя часть страницы For Dummies очень проста; она предлагает посетителям инструменты
навигации и сразу же - содержимое
----------- 7-ЙД1
Файл Правка Вид tJsSpawoe Сервис Справка
ч Назад -	Поиск Избранное
Адресу | > j http ://www. dummies, corri/WileyCDAjDummiesArticle/id-1297,subcat-BLlILDIHG, html
^йЗ Переход Ссылки ** j

Goin* for guidelines
Here’s a list of guidelines to follow when using frames:
Fc«« Now

Don't use ft Aines justfoi the soke of sisiny frames. If you have a compelling reason to use
frames, then create an elegant and easy-to-follow frameset But don’t do it just because
Dreamweaver makes it easy to do.
Limit The use of fi antes and keep files small Rememberthat each frame you create
represents another HTML file Thus, a frameset with three frames requires a browser to display
three Web pages, and that can dramatically increase download time.
@ Start Today'
•	Гшп off fiarne holders. Newer browsers support the capability to turn off the border that
divides frames in a frameset If the section haste be scrollable, the border is visible no matter
what But if you can turn the borders off, your pages look cleaner Frame borders are thick and
an ugly gray in color, and they can break up a nice design Use them only when you feel that
they're really necessary
•	Don't use fi Aines when tables are beftei. Tables are often easier to create than frames and
can provide a more elegant solution to your design needs because they’re less intrusive to the
design
•	Don't place fi Ames withm frames. The windows get too darned small to be useful for much of
anything, and the screen looks horribly complicated. You can also run into problems when your
framed site links to another site that's displayed in your frameset.
•	Put in affei nate <NOFRAMES> content. The number of users surfing the Web with brow • > i
Интернет
Рис. 10.2. Содержимое страницы For Dummies еще проще - ничего кроме текста
Предсказуемость
Понятие предсказуемость означает, что посетитель может легко понять, где находятся i е
или иные компоненты страницы и как они работают. Точнее понятие предсказуемости можно
определить как “предсказуемость содержимого, функций элементов и внешнего вида данной
Web-страницы по сравнению с другими похожими Web-страницами”.
Важной причиной столь высокой популярности Web является то, что практически нес
Web-страницы похожи по своей структуре и принципам работы. Web-страницы, слишком да
леко отошедшие от общепринятых норм, не очень популярны среди посетителей.
Одна из причин, по которым данная книга называется Создание Web-страниц, а не Со <
дание Web-узлов, заключается в том, что она предназначена в первую очередь для начинаю
щих разработчиков, которые, вероятнее всего, сначала будут создавать одну Web-страницу
и только впоследствии, возможно, разработают небольшой узел. Еще одной причиной явля
стоя то, что большинство пользователей, как правило, вообще не задумываются о структуре
Web и даже не подозревают о том, что после щелчка на ссылке они на самом деле переходя!
с одного узла на другой. Люди воспринимают Сеть как одну большую Web-страницу.
Чтобы осознать ценность предсказуемости, представьте себе, как должна выглядеть Web
страница, на которой размещена газетная статья. Наверняка в первую очередь в глаза должна
бросаться фотография, скорее всего одна. Кроме того, вы ожидаете увидеть заголовок, кого
рый дает представление о статье и об имени ее автора.
Вверху экрана или в его левой части должны находиться элементы навигации. Кроме то
го, в верхней части экрана располагается баннер (удивительно, если бы его там не оказалось)
В левом столбце нет ничего, кроме элементов навигации. Правый столбец может быть нус
тым или содержать небольшие рекламные объявления.
На некоторых узлах размещены дополнительные элементы, например кнопка для отпран
ки данной статьи посетителю по электронной почте. На начальной странице также могут рас
полагаться ссылки на другие статьи аналогичной тематики. На рис. 10.3 изображена схема
расположения основных элементов Web-страницы, на которой размешена статья.
Навигация и торговые марки
Навигация
или ?
Статьи
сходной
тематики
Реклама
Рис. 10.3. Схема типичной страницы со статьей
А теперь представьте себе, что случится, если один или несколько элементов такой Web-
страницы будут не такими, какими вы ожидаете их увидеть. Например, кнопка для пересылки
статьи электронной почтой называлась бы “Отправь мне ЭС”. Вы будете удивлены и сбиты
с толку. Человек, разместивший такую надпись на кнопке, неприятно удивил бы вас, потому
что страницу станет труднее воспринимать и использовать.
Теперь вы, надо полагать, понимаете, что означает предсказуемость. Создавая Web-
страницу, найдите в Internet несколько примеров страниц, которые предназначены для той же
цели, что и ваша. Посмотрите, похожим ли образом скомпонована ваша страница, каковы ее
функциональные возможности, и сравните ее с другими примерами. Если ваша страница зна-
чительно отличается от других, подумайте над ее упрощением или минимизацией основных
отличий. В этом и заключается сущность предсказуемости.
Целостность
Помимо того что каждая создаваемая вами Web-страница должна быть “предсказуемой”
по сравнению с другими творениями, размещенными в Web, она также должна быть внутрен-
не целостной. Не стоит существенно менять шрифты, размер текста или макет страницы.
При создании многостраничного Web-узла (речь об этом пойдет в главе 14 “Создание
многостраничного Web-узла”) все его страницы должны быть единообразны. Приложите
максимум усилий для того, чтобы посетители четко понимали, что они находятся на одном
унифицированном Web-узле.
Если ваши страницы просты и предсказуемы для опытных пользователей Web, то вам ос-
тается только соблюсти принцип целостности. Вот две концепции, которыми вы должны ру-
ководствоваться для обеспечения целостности небольшого Web-узла.
J Используйте на каждой Web-странице узла повторяющиеся навигационные
или графические блоки и располагайте их в одном и том же месте.
J Используйте единообразный фоновый цвет и цвет изображения, один и тот же
размер шрифтов текстовых блоков, одинаковую или похожую компоновку
изображений и единый стиль оформления узла.
При создании крупного Web-узла (содержащего более 20 страниц) соблюдение целостно
сти становится более сложной задачей. Единственный способ ее поддерживания заключается
в создании нескольких различных шаблонов для страниц узла разных типов: навигационных,
страниц содержимого (с иллюстрациями и без них), страниц, содержащих формы, и т.п. На
каждой странице следует использовать шаблон, предназначенный для решения определенных
задач этой части узла. На многих действительно крупных узлах, таких как Amazon.com, шаб
лоны часто автоматически заполняются содержимым из баз данных, благодаря чему и созда
ются отдельные Web-страницы.
Оиш&си дизайна, коййЦгых следденг
избега/пь
Путешествуя по Web, особенно по персональным страницам, можно найти множество при
меров плохого дизайна. Но что делает эти страницы плохими? Среди ошибок дизайна три явля
ются наиболее распространенными, особенно ими ipentar новички в этой области. Эго медлен
но загружающиеся страницы, отталкивающее сочетание цветов и маленький размер текста.
Медленно загружающиеся страницы
Это основной недостаток дизайна Web-страниц, создаваемых как любителями, так и про<|кч
сионалами. Люди считают, что они создают обычную журнальную статью и наводняют ее i рафи
кой, разбрасывая по нескольку несжатых файлов на каждой странице. После этого они добавляю!
изящные мелкие элементы дизайна, каждый из которых должен пересылаться Web-сервером как
отдельный файл. По мере поступления каждого из элементов страницы ее дизайн усложняйся
и переполняется, вызывая настоящую морскую болезнь. Если ваша страница загружается мед
денно, это, скорее всего, обусловлено тем, что вы сделали одну из двух основных ошибок.
J Ошибка № 1 состоит в невнимательности по отношению к одному-двум графиче-
ским изображениям. Из-за того что эти файлы слишком большие, вся страница м
гружастся медленно. Чтобы сделать графические файлы небольшими, bociiojii.
зуйтесь приемами, описанными в главе 9 “Правильное размещение трафики"
J Ошибка № 2 заключается в небрежном использовании графики в целом. Cipa
ницы, насыщенные различными элементами дизайна, могут содержать множа. i
во графических компонентов, приводящих к возникновению большого коли
чества отдельных передач файлов по мере загрузки страницы. Если дизайн
страницы плохо продуман, то по мере поступления графики возникает пол
ный беспорядок, а общий результат просто плачевен.
Наличие большого количества графики способствует не только замедлению загрузки cipa
ницы. Создание таких элементов отнимает много времени, вы сталкиваетесь с вопросами
ищиты авторских прав и создаете серьезные проблемы при разработке и макетировании с i ра
ницы. Постарайтесь не перегружать свою страницу графическими элементами, пока не нах
читесь успешно обращаться с ними, или попросите помощи у специалиста.
Отталкивающее сочетание цветов
Многие авторы Web-страниц совершенно не обращают внимание на используемые ими
цветовые комбинации. Другие помнят об этом, но им не хватаег вкуса для того, чтобы криш
чески оценить свою работу и увидеть, насколько отталкивающей и (или) сложной для вое
приятия она получилась.
Большинство людей понимают, что определенные сочетания цветов могут быть вепри
влекагельными, но при чем тут сложность восприятия? Дело в гом, что при работе в Web
цветом обозначаюгся гиперссылки, причем неиспользованные и недавно ........к-
ссылки имеют разные цвета. Стандартными цветами обозначения ссылок являются синий
(неиспользованные ссылки) и фиолетовый (использованные ссылки). Если эти цвета и«ме
нить, то посетители не поймут, какие из ссылок они уже просмотрели, а какие нет.
Если по каким-то причинам вы обязаны изменить цвета ссылок, постарайтесь hciiojii.
АлЛ зовать аналогичные стандартным цветовые сочетания: яркий, бросающийся в гл.иа
цвет — для неиспользованных ссылок и тусклый цвет— для уже просмотренных ' )к>
будет по крайней мере похоже, хотя бы концептуально, на использование стандартых
цветов. Затем попросите протестировать дизайн страницы нескольких людей и но
смотрите, действительно ли они быстро начинают понимать, какая ссылка что означат
Теперь вернемся к уродливому. Не стоит использовать любые возможные сочетания пне
iob только потому, что в Web есть такая возможность. Люди привыкли к черному тексiу на
ослом или светлом фоне. Эго сочетание всегда будет наилучшим. Кроме того, при иснолыо
вании данной цветовой комбинации будут хорошо видны ссылки. Чтобы сделать страницы
красочными без ущерба для их предсказуемости и удобочитаемости, в каком-то определен
ном месте каждой страницы можно расположить графическую панель.
Есть достаточно хорошие для восприятия цветовые комбинации, но многие из них
' цм \ таковыми не являются. Помните также, что многие пользователи работают на мони-
410 ) торах, поддерживающих всего 256 цветов, и что на компьютерах PC и Macintosh оди-
наковыми являются только 216 цветов из 256. Поэтому сочетания цветов, которые
выглядят привлекательно в вашей системе, на компьютере другого пользователя мо-
гут смотреться плохо. Выбирая цвета, используйте Web-инвариантную палитру (см. гла-
ву 8 “Создание и добавление готовой графики для размещения в Web”) или побродите по
Сети, обращая внимание на узлы, использующие привлекательную комбинацию Web-
инвариантных цветов. Вы можете использовать такую же комбинацию и на своей стра-
нице. (Существует очень немного удачных цветовых комбинаций, поэтому не опасайтесь
быть уличенным в плагиате. И если вы позаимствуете такую комбинацию с другого узла,
знайте, что его автор также не занимался изобретением велосипеда.)
Мелкий текст (и крупный тоже)
Очень распространенной ошибкой считается использование на Web-страницах мелкого
текста. Некоторые считают, что мелкий текст' — это хорошо, поскольку он позволяет помес-
тить на странице много информации. Из-за этого заблуждения данную ошибку делают дизай-
неры даже крупных Web-узлов, например она встречалась на ранних версиях узла Microsoft.
Проблема заключается в том, что при просмотре на мониторе с высоким разрешением ма-
ленький текст' становится настолько крошечным, что многие посетители Web-страницы про-
сто не смогут его прочитать.
Не такой распространенной (но от этого не ставшей менее пагубной) является ошибка, за-
ключающаяся в использовании слишком крупного текста. Люди, которым на самом деле
нужно носить очки с толстыми линзами, создают Web-страницы, текст которых можно про-
читать на расстоянии 10 метров. (Люди со слабым зрением для чтения обычного текста могут
перейти в режим его отображения в укрупненном виде, так что необходимости увеличения
обычного размера текста в данной ситуации нет.) В результате страница выглядит просто
ужасно, особенно при ее просмо тре на мониторе с низким разрешением, например 800x600.
Обе эти проблемы усугубляются тем, что в последнее время появилась тенденция отобра-
жать текст в виде графики, т.е. внедрять его в графические изображения. Такой текст всегда
выглядит одинаково, потому что браузер воспринимает его как графическое изображение.
Плохо то, что внедренный текст может быть слишком мелким или слишком крупным, а по-
скольку он внедрен в графическое изображение, то не подлежит изменению в соответствии
с текущими настройками браузера. Поэтому пользователь не сможет устранить проблемы,
связанные с отображением графически представленного текста.
Но что такое текст “нормального размера”? Хороший вопрос. Не существует точного оп-
ределения нормального размера, но можно говорить о диапазоне шрифтов нормального раз
мера. Чтобы выяснить, какой текст можно считать нормальным, подберите для своей страни-
цы шрифт такого размера, который используется на понравившихся вам других Web-
страницах. После этого спросите у нескольких человек (не все из них должны быть молоды-
ми людьми с орлиным зрением, но и не все должны быть подслеповатыми стариками), легко
ли им читать текст на вашей странице. Если нет, устраните проблему, пока она не стала тяж-
ким бременем для посетителей вашего Web-узла.
безнаказанное HafiquteHue н/гавил
Самое большое удовольствие при создании Web-страниц можно получить тогда, когда вы де
лаете то, что хочется, а не то, что нужно. Тем не менее вы хотите, чтобы ваша страница была при
влекательной. Как же создать такую страницу, которая бы нравилась и вам, и другим людям?
Поиск хороших домашних страниц
Ниже перечислено несколько мест, где можно ознакомиться с дизайном домашних страниц.
J Yandex-Народ Пре поставляет услугу бесплатного размещения Web-страниц своим зарегистри-
рованным пользователям. При регистрации на Yandex (wrfw.yandex.ru) вы автоматически
получаете место на Web-сервере службы Yandex. Народ (narod.yandex.ru). Однако здесь нет
никаких рейтингов, позволяющих найти самые лучшие Weo-стргницы Прежде чем удастся найти
лебедя, вам придется познакомиться с огромным количеством гадких утят.
J GeoCities. В главе 2 “Публикация в Web: проьайдерг Internet и бесплатные службы” говооилось о том,
что служба GeoCities является крупнейшим поовайдером, предоставляющим услуги по размещению до-
машних страниц в Web. С начальной страницы GeoCities (ww. geocities, сот) вы сможете
получить доступ к огромному числу Web-страниц всевозможных категорий.
•f Tripod. Эта компания предоставляет услугу бесплатного Wtb-хостинга, которая полдерживается Lycos,
ведущим международным Web-попплом Заедите на узел Tripod по адресу www. tripod.lycos.com.
Чтобы ознакомиться со страницами Lycos, аналогичными по тематике разрабатываемой вами,
выберите в области Check out sites that tripod members are building (она расположена в левой
нижней части начальной страницы Tripoo) похожую тему, а затем просмотрите несколько страниц.
Обратитесь за помощью к профессионалам
Лучший способ работы с профессиональным Web-дизайнером в части размещения на странице
графики (с целью экономии средств) состоит в том, чтобы сначала создать узел самостояге :ьно. После
этого его можно отдать дизайнеру для усовершенствования внешнего вида. Такая работа ь,ожет отнять
у специалиста всего несколько часов и обойдется вам не очень дорого. Деньги стоит тратить в том
'лучае, если ваш Web-узел предназначен для вашего продвижения по службе или для ведения
коммерческой деятельности.
Проблема заключается в том, что для многих дизайнеров привычнее выполнять всю работу целиком'
разработать идею, создать содержимое, отредактировать его в соответствии с вашими потребностями,
опубликовать узел и по необходимости модифицировать его. Такие проекты стоят очень дороге до
нескольких тысяч долларов. Чтобы избежать таких расходов, постарайтесь выполнить большую часть
работы самостоятельно, используя данную книгу в качестве справочно-о руководства. Вам может
понадобиться помещу только при доводке внешнего вида Всю остальную работу можно сделать
амостоятельно, а специалиста следует привлечь только для выполнения графического дизайна.
Мы предлагаем вам выполнить следующий пятиступенчатый процесс.
1.	Создайте Web-страницу.
Создайте Web-страницу в соответствии с инструкциями, приведенными в части 1 мои
книги, и разместите на ней нужное содержимое и иллюстрации. Пока что не беспокой
тесь о том. как выглядит страница.
2.	Найдите в Сети несколько страниц, которые вам нравятся, чтобы испольювап.
их в качестве образца.
Найдите в Web такую страницу, которая была бы похожа на вашу по своему прети.i
значению и содержимому и имела бы простой и привлекательный внешний вид II ш
лите еще несколько подобных страниц. Если вы не знаете, где их искать, npo'iiii.uiic
врезку “Поиск хороших домашних страниц”.
3.	Создайте новую базовую версию своей Web-страницы.
Используя образцы в качестве справочного руководства, создайте новую версию сно< и
Web-страницы. Сначала скомпонуйте главные элементы: основной текст, одно или дни
нюбражения. список и г.и. Добсйгесь привлекательного вида ба юной страницы.
4.	Поочередно добавляйте дополнительные элементы.
Теперь по очереди добавляйте на Web-страницу дополнительные элементы. Работая
таким образом, вы не допустите, чтобы на странице воцарился хаос, и при этом сохра-
ните свой стиль.
5.	Опубликуйте результат и выслушайте комментарии.
Опубликуйте новую, усовершенствованную Web-страницу и сообщите о ней своим
друзьям и коллегам. Спросите, что они думают о вашем творении. На несколько дней
забудьте об узле, а затем посмотрите на него свежим взглядом. Для дальнейшего усо-
вершенствования узла руководствуйтесь собственными свежими впечатлениями и учи-
тывайте полученные замечания.
Этот процесс можно выполнять неоднократно — по мере дальнейшего усовершенствова-
ния узла и добавления на него новых страниц. Отнеситесь к работе добросовестно, и вы по-
лучите одну из самых лучших Web-страниц в мире.
использование tna^uuu, и ф/гейлсов
В течение долгого времени таблицы считались одним из самых “противоречивых” эле-
ментов дизайна Web-страниц. (Естественно, эти противоречия не приводили к возникнове-
нию землетрясений, но какое-то разнообразие в жизни никогда не помешает.) Изначально
таблицы были предназначены для того, чтобы Web-дизайнеры могли создавать таблицы дан-
ных (например, сводку продаж ряда наименований продукции).
В настоящее время т аблицы все чаще используются для макетирования Web-страницы. Ди-
зайнеры обнаружили, что ячейки таблицы можно сделать очень большими и разместить в них
большие графические изображения или текстовые блоки. Таблицы можно использовать даже для
автоматического изменения размеров страницы в соответствии с размерами окна Web-браузера.
В .данном разделе мы лишь вкратце коснемся этого важного аспекта использования таблиц.
Фреймы являются еще более мощным элементом дизайна по сравнению с таблицами, но,
к сожалению, они не пользуются большой любовью дизайнеров. Фреймы позволяют разбить
окно Web-браузера на несколько частей, каждую из которых можно обновлять и прокручи-
вать отдельно. Однако при использовании фреймов часто возникают нежелательные эффек-
ты, поэтому дизайнеры предпочитают работать в едином окне, а не разбивать его на части.
В связи с этим в данной книге мы не часто вспоминаем о фреймах.
Создание простых таблиц
Простые таблицы состоят из строк и столбцов. Каждая область, образованная в результате
пересечения строки и столбца, называется ячейкой таблицы. К каждой ячейке можно приме-
нить свое собственное форматирование, например выровнять данные по левому или правому
краю, по центру ячейки и т.д. Таблицы имеют заголовки, в которых располагаю! названия
столбцов. Предварительно заданное форматирование строк первоначально отсутствует. По
необходимости его можно создать, применяя к строкам то или иное форматирование.
Ниже представлен HTML-код простой таблицы.
<TABLE BORDER=2>
<TH><TD><B>ProduCtion (tons) </Bx/TDXTD><B>% of
goal</Bx/TDx/TH>
<TRxTDxI>North 40</Ix/TD><TD>87</TDxTD>102%</TDx/TR>
<TRxTDxI>South 40</Ix/TDxTD>93</TDxTD>110%</TDx/TR>
</TABLE>
На рис. 10.4 показано, как выглядит данная таблица при просмотре с помощью Inicrnri
Explorer.
Рис. 10.4. Простая Web-таблица и ее исходный HTML-код
Ниже описаны функции различных элементов HTML-кода.
<TABLE BORDER = 2>
<тн>, </тн>
<TR>, </TR>
<TD>, </TD>
Дескриптор table начинает и заканчивает таблицу. Атрибут border
служит для создания вокруг таблицы рамки толщиной 2 пикселя. Не
забывайте о рамке, чтобы остальной текст и графика Web-страницы не
сливались с таблицей
Начало и конец заголовка таблицы (первая ячейка автоматически остается
незаполненной, и сюда впоследствии можно будет внести название строк)
Начало и конец строки таблицы
Начало и конец элемента данных таблицы
Создать таблицу в HTML, с одной стороны, просто, а с другой— утомительно. Вы сот
даете строки и элементы данных. Если все будет сделано правильно, столбцы образуются лк
тематически.
Однако получение правильных элементов данных может оказаться проблематичным Mio
бы таблица выглядела надлежащим образом, необходимо применить ряд опций вырапнппа
ния и форматирования. Допустить ошибку очень просто, а откорректировать внешний вид
таблицы значительно сложнее. Поэтому очень многие создают таблицы с помощью И ГМ1
инструментов, а в коде выполняют лишь окончательную доводку.
Таблицы не являлись частью первоначального стандарта HTML, а были введены в
Ц|ЫЭ ) Netscape Navigator версии 1.1. В результате оказалось, что некоторые старые брау-
зеры вообще не поддерживают таблицы. (Таблицы являются основной причиной, по
-«ровисР которой на некоторых Web-страницах все еще встречается фраза “Лучше всего про-
сматривать в Netscape Navigator”. В свое время это был единственный браузер, под-
держивавший таблицы.) Кроме того, в официальном стандарте HTML и в браузере
Navigator 1.1 используются разные версии одних и тех же дескрипторов. К счастью,
большинство современных браузеров поддерживает обе версии дескрипторов таблиц.
Таблицы как средство макетирования
После того как в HTML были введены таблицы, дизайнеры быстро поняли, как их можно
использовать на качественно новом уровне. Представьте себе, что вся Web-страница пред-
ставляет собой одну большую таблицу. С помощью HTML-атрибутов можно скрыть границы
ее ячеек. Таким образом можно создать большую невидимую сетку и разместить в ней блоки
текста и графики. Это позволит создать макет со столбцами или расположить определенный
блок текста точно рядом с соответствующим изображением даже в том случае, если пользо-
ватель сделает текст большим или очень сузит окно.
Почему использование таблиц в качестве средства макетирования вызывает столько про-
тиворечий? Потому что при исходной разработке HTML предполагалось отображать содер-
жимое практически на любом экране. При использовании страниц, в основе макета которых
лежат таблицы, содержимое отображается надлежащим образом только на экранах, имеющих
определенный минимальный размер. В настоящее время противоречие только усугубилось,
потому что люди, которые платят за разработку Web-узлов, требуют, чтобы они одинаково
хорошо смотрелись как на компьютерах PC, так и на Macintosh, а таблицы являются единст-
венным подходящим способом создания сложных и красиво выглядящих страниц.
В нашем случае ключевым является слово “сложных”. В табличную компоновку необхо-
димо уместить столько разных элементов, что для получения хорошего результата необходи-
мо потратить очень много времени и сил. После этого возникает ряд других проблем, связан-
ных с тем, чтобы таблица одинаково хорошо смотрелась на большинстве основных
компьютерных платформ и при использовании различных Web-браузеров.
На рис. 10.5 изображена начальная страница узла Netsurfer Science, на которой для созда-
ния простого и интуитивно-понятного макета используются таблицы. Столбец в левой части
страницы представляет собой одну большую ячейку таблицы. Содержимое, расположенное
посередине и в правой части страницы, также представляет собой еще одну большую ячейку.
Для просмотра исходного HTML-кода данной страницы воспользуйтесь командой
ВидОПросмотр HTML-кода (ViewOSource) своего Web-браузера или аналогичной опцией.
Создание собственной таблицы в программе Netscape Composer начните с команды Inserts
Table (ВставкаФТаблица). Для эффективного использования таблиц на Web-страницах вам
понадобится более сложная программа, например Microsoft FrontPage или Dreamweaver, ко-
торая позволяет в большей степени контролировать те или иные элементы таблиц. Вам при-
дется достаточно много экспериментировать, пока вы научитесь получать именно те резуль-
таты, к которым стремитесь.
Подробная информация об использовании таблиц для макетирования приводится в статье, раз-
мещенной по адресуhttp://www.101-web-advice.com/html-tables-tutorial.html.
Стоит ли использовать фреймы
Фреймы, как и таблицы, являются изобретением Netscape. Фреймы разделяют Web-cipa
ницы па отдельные области, которые можно обновлять в индивидуальном порядке II (пример.
после щелчка на фрейме нижней части Web-страницы ее содержимое обновится, тогда как ос
тальные части страницы останутся неизменными. Такая возможность кажется весьма перепек
тивной. Тем не менее фреймы не получили столь широкого распространения, как таблицы.
Адрес;. » http://www.netburf.com/n5s/
Netsurfer Science - Microsoft Internet Fwnloreh
Поиск Избранное
Д Переход,; Ссылки
Welcome! Netsurfer Science is an e-zine bringing neat science and technology
I sites directly to your mailbox Subscribe and we will bring you a hot-linked HTML
gateway to a selection of great online science related sites
Ж	.
аайгг i^erss iVolse
файл Правка	Избранное Сервис Справка

iw 'a
Назад *
Search |


; Subscribe Неге
'Free JAMPLE ISSUES are ava'lable
Latest Issue: 12/06/02: Vol. 05, #06
REVIEWERS' CHOICE
' Is there a Mrs Swamp Thing?
i Anatomy: Aristotle to Plastics
«K°™°
^Leonardo da Vinci performed some 30 autopsies in pursuit of knowledge of human ’]
If Интернет
Рис. 10.5. Для компоновки содержимого узла Netsurfer Digest используются таблицы
Почему фреймы не столь популярны? Дело в том, что их трудно создавать, работать с пи
ми не легче, чем с таблицами. Опытные Web-дизайнеры стремятся сделать максимум вог
можного для того, чтобы их Web-страницы были более привлекательными и полезными,
и таблицы дают такую возможность. Что касается фреймов, то польза от них неоднозначнл,
поскольку у пользователей на Web-страницах с фреймами часто возникают проблемы.
Например, при использовании страницы с фреймами пользователям зачастую бывает
сложно определить, где находится курсор. Если пользователь начинает прокручивать стран и
цу, то каких фреймов это будет касаться? Кроме того, процедура перемещения в пределах
фрейма отличается от перемещения по единой (не содержащей фреймов) Web-страницс, чт
может сбить пользователя с толку.
И наконец, фреймы создают целый ряд функциональных проблем. Когда пользовании,
изменяет размер окна браузера, не всегда изменяются надлежащим образом размеры ci ранни
с фреймами. А создать страницу с фреймами, которая одинаково хорошо подходила бы иля
различных размеров экранов, гораздо труднее, чем разработать страницу с таблицами.
Проверка удобства использования показала, что пользователи путаются при работе с френ
мами. Есть узлы с высокой степенью управления фреймами (например, когда прокру шиап.
можно только одно окно), работать с которыми весьма удобно. Но на таких узлах фреймы
предназначены в первую очередь для реализации сложной навигации или размещения ре» ла
мы, л .с. содержимого, которое всегда будет оставаться в поле зрения посети геля В целом при
сощипни первой Web-cipannui»l или простого Web-узла мы рекомендуем не н< нольion.ui.
фреймы (если только у вас нет сложных элементов навигации или рекламы, без которой по-
сетители просто не смогут обойтись).
Тем не менее страницы с фреймами могут быть полезными для отображения сложных наборов
данных и для поддержки элементов навигации. Поскольку работать с HTML-кодом при создании
фреймов гораздо сложнее, чем при создании таблиц, мы не будем говорить об этом в нашей книге.
® Netscape Composer не поддерживает фреймы. Если вы хотите использовать фреймы
на своих страницах, вам придется работать с более сложной программой создания
Web-страниц, такой как Microsoft FrontPage или Macromedia Dreamweaver. (Или
найдите соответствующие HTML-дескрипторы в приложении В и попробуйте пора-
ботать с ними.)
Глава 11
Публикация Web-страниц
/3 эгЯой главе...
р Получение места на Web-сервере
> Передача файлов
> Ввод узла в действие
Самым приятным этапом создания домашней Web-страницы или Web-узла являсн*)
публикация завершенного труда в Сети. После работы со всевозможными инструмсн
тами, HTML-кодом, GIF-файлами и файлами других типов, после того как вы определи ичч.
о чем вы хотите поведать миру и как именно собираетесь это сделать, пришло время "выпи
в эфир” и представить свое творение.
Процедура публикации будет очень простой, если вы собираетесь представить персон.) и i.
ную или тематическую страницу, которую увидят только ваши друзья и сотрудники. 1 Io ecui
вы создаете узел для ведения коммерческой деятельности или впоследствии собираепчт
расширить свою страницу, то процедура публикации должна проходить в несколько эт апов
Первый этап состоит в получении места для размещения страницы на Web-сервсрс. Ди»
этого существует множество возможностей. Можно ли получить место бесплатно или ia пек
необходимо платить? Хотите ли вы иметь собственное имя домена, чтобы адрес вашею у пи
был простым, или предпочитаете разместить свой узел в подкаталоге какого-то другою до
мена? Необходимо найти компанию, которая предоставит вам место на Web-сервере но рл
зумной цене, будет осуществлять поддержку узла и зарезервирует место для его последую) не
го расширения. После этого необходимо переслать файлы и удостовериться, что y>ej
действительно размещен в Сети.
Но это еще не все. Основной целью публикации Web-страницы является ее посещение
другими людьми. Несмотря на огромное количество уже существующих страниц, вам нсоо
ходимо сообщить людям о появлении еще одной и добиться, чтобы они посещали ее. Пост
того как посетители зайдут на ваш узел, следует удостовериться, что это радостное собы ин
произошло, т.е. необходима какого-то рода отчетность. Кроме того, вам необходимо устано
вить обратную связь с посетителями и откликаться на их сообщения.
Готовая публикация
Самый простой способ публикации заключается в том, чтобы не заниматься ею самостоятельно,
а найти тех, кто готов выполнить эту работу за вас. Помочь в этом, по крайней мере на ранних
этапах, могут Web-службы, такие как GeoCities и Yandex, о которых шла речь в главе 2 “Публикация и
Web: провайдеры Internet и бесплатные службы”. Однако по мере роста вашей страницы и превра
щения ее в многостраничный Web-узел вам придется побеспокоиться о таких вещах, как передача
файлов посредством FTP, получение собственного доменного имени и использование дру)их
современных возможностей, а для этого вам нужно будет подыскать другую службу размещения
и поддержки Web-страниц. Поэтому если публикация Web-страниц кажется вам докучливым
занятием, то для начала воспользуйтесь Web-службами, а когда ваш узел достигнет качественно
нового уровня, вернитесь к этой главе.
В данной главе рассматриваются основные этапы публикации: получение места на серве-
ре, передача файлов и т.п. Это — основные шаги, которые нужно будет сделать для публика-
ции как простой Web-страницы, так и многостраничного Web-узла. В главе 14 “Создание
многостраничного Web-узла” описываются более сложные шаги, связанные с публикацией,
такие как получение собственного доменного имени и “раскрутка” узла.
После создания и публикации узла у вас появится возможность отдохнуть и расслабиться.
Но это не продлится долго. Во время своих странствий по Web вы наверняка обнаружите не-
что очень интересное, без чего ваш собственный узел никак не сможет обойтись. Может так-
же случиться, что при внимательном рассмотрении своей страницы вы обнаружите какую-то
проблему или неточность формулировки, описания, опечатку и т.п. На вас может обрушиться
шквал электронных писем с вопросом, который, по вашему мнению, уже освещен на страни-
цах узла. Еще хуже, если вы не будете получать вообще никаких откликов. Все это означает,
что пришло время снова запустить HTML-редактор.
Вообще-то не принято рекламировать книги, написанные одним из соавторов вместе
с другими людьми, но если вам не терпится создать Web-узел для ведения коммер-
ческой деятельности, обратитесь к книге Internet-маркетинг для “чайников", вы-
шедшей в издательстве “Диалектика”. В них подробно рассматриваются вопросы,
связанные с ведением коммерческой деятельности, регистрацией собственного до-
менного имени, “раскруткой” бизнеса в Internet, рассказывается об использовании
других lntemet-служб, помимо Web, для маркетинга и деловой активности.
ТСолцчение мес/па на Weh-ce^efie
Web-сервер — это компьютер, включенный в World Wide Web, на котором установлено
специальное программное обеспечение, позволяющее предоставлять информацию пользова-
телям Web. Web объединяет сотни тысяч серверов. Разместив свою страницу на каком-
нибудь сервере или создав свой собственный Web-сервер и разместив на нем файлы своего
Web-узла, вы сразу же сделаете свое творение частью Сети.
Получить место на Web-сервере очень просто. К примеру, бесплатные Web-службы, о ко-
торых шла речь в главе 2 “Публикация в Web: провайдеры Internet и бесплатные службы”,
предлагают пользователям место на Web-сервере. Вы можете быть в дружеских отношениях
с сотрудником какой-то организации и занимать место на ее Web-сервере. Для домашней
страницы или небольшого узла это вполне подходящие варианты.
Если же возможност ь такого размещения своей страницы вас не устраивает или если ваш
узел имеет ярко выраженную коммерческую направленность, то от предложенных выше воз-
можностей придется отказаться. Большинство Web-служб не предоставляет бесплатно место
для коммерческих Web-узлов или узлов каких-либо организаций. Поэтому если вы собирае-
тесь платить за получение места на сервере, стоит провести небольшое исследование и срав-
нить объем предлагаемых услуг. А для этого необходимо знать, что следует сравнивать.
Эксплуатационные характеристики Web-хостинга
Множество организаций предлагает пользователям услуги Web-хостинга, т.е. место па
своем Web-сервере для размещения Web-узла. Большинство организаций за эту услугу взима
ет оплату, которая варьируется в зависимости от имеющихся возможностей. При выборе компа
нии, предоставляющей услуги Web-хостинга, необходимо учитывать целый ряд аспектов.
Естественно, при выборе услуги Web-хостинга следует в первую очередь поинтсресова i ь
ся стоимостью. Но при этом не следует забывать и о множестве других факторов, которые
в итоге могут оказаться более важными, чем стоимость услуги.
J Структура ценообразования. Помимо оплаты за размещение исходного уt
ла, поинтересуйтесь также, какова будет стоимость поддержки узла по мере
его роста и увеличения числа посетителей, например до нескольких сотен пип
нескольких тысяч в месяц. Некоторые компании взимают совершенно незначи
тельную плату за размещение исходного узла, наращивая ее по мере его рос । а.
Поддержка. Техническая поддержка в области Web-публикации является од
ной из самых сложных и при этом самых важных разновидностей сопровож
дения. Вам необходима поддержка при размещении страниц на сервере, для
ответов на вопросы о своем узле и для решения вопросов, связанных с уско
рением доступа и средним временем неработоспособности (оно определяется
тем, сколько времени сервер по каким-либо причинам не функционирует) и г.д.
Выясните, какую поддержку оказывает провайдер для каждого типа интере-
сующей вас функции Web-хостинга. Спросите у других пользователей, насколь
ко быстро они получают поддержку при возникновении тех или иных проблем
J Консультации, связанные с работой в Web. Некоторые компании, даже ie,
которые предоставляют ряд сервисов бесплатно, также предлагают другие ус
дуги уже за дополнительную оплату. К ним может относиться размещение
коммерческих узлов или координация работы с вашим узлом. Какова сгон
мость этих услуг? Насколько быстро они предоставляются? В принципе
стоимость подобных услуг может быть примерно одинаковой, но при этом
одни провайдеры выполняют свою работу лучше и быстрее других.
J Службы узла. Некоторые компании, предоставляющие услуги Web-хост ши а.
предлагают ряд других полезных сервисов, например размещение на вашем
узле счетчика посещений. Другие провайдеры разрешают пользователям сот
давать и запускать сценарии общего шлюзового интерфейса (CGI — Common
Gateway Interface), выполняющие различные сложные функции. Есть компа
нии, которые не предоставляют никаких дополнительных услуг и не разре
шают пользователям запускать CGI-сценарии. Поищите провайдера, который
предоставляет ряд простых услуг и оказывает поддержку при реализации
пользователями более сложных задач.
Имя домена. Это ваше имя в Сети, которое отчасти совпадает с доменным
именем сервера, на котором размещен ваш узел. (Вообще-то провайдеры мо
гут одному компьютеру дать несколько доменных имен.) В результате, даже
являясь владельцем небольшого узла, вы можете иметь собственное доменное
имя, но при этом провайдер должен его зарегистрировать. Резервирование ы
собой имени стоит от 10 до 30 долларов в год, в зависимости от провайдера
Если провайдер запрашивает значительно большую плату за данную ycnyi у,
не стоит потакать ему. Более подробная информация о доменных именах бу-
дет представлена в главе 14 “Создание многостраничного Web-узла”.
Некоторые организации, предоставляющие услуги Web-хостинга, регистрируют для
вас доменное имя, но при этом оставляют права на владение им за собой. Это можш
привести к возникновению проблем, когда вы решите переместить свой узел на сер
вер другого провайдера.
Выясните, предоставляет ли провайдер право на владение зарегистрированным доменным
именем — немедленно или по прошествии некоторого времени. Если это так, попросиге про
нлйдсра предоставить вам соответствующий документ о том, что вы являетесь владельцем
i.iiiiioro доменного имени и по желанию сможете переместить свой Web-узел на другой сервер.
11ри выборе компании, предоставляющей услуги Web-хостинга, следует учитывать также
ряд других факторов.
J Скорость. Насколько быстро посетители смогут получить доступ к вашему
Web-узлу? Насколько быстро пользователи смогут загрузить файлы, храня-
щиеся на узле? Можете спросить об этом у провайдера, но перепроверьте эту
информацию самостоятельно. Попробуйте получить доступ к нескольким
Web-узлам, хранящимся на сервере данного провайдера, и посмотрите, на-
сколько быстро они работают, особенно в “часы пик”. Сравните эти парамет-
ры с аналогичными, характеризующими услуги другого провайдера.
Время простоя. Всегда ли работает сервер интересующего вас провайдера?
I|	Не думайте, что простоев сервера не будет, -— такое происходит даже у самых
\ЧР^/ крупных провайдеров. Выясните время простоя серверов одного провайдера
и сравните его с аналогичным показателем других компаний.
J Возможность перехода к другому провайдеру. Возможность смены компа-
нии, предоставляющей услуги Web-хостинга, является чрезвычайно важной.
Имея такую возможность, вы сможете избежать многих проблем. Не имея
права ухода от данного провайдера, вы в течение длительного времени будете
вынуждены мириться с плохой работой тех или иных элементов своего Web-
узла. К провайдеру вас могут “привязывать” две вещи: контрактные обяза-
тельства и контроль вашего доменного имени. Не подписывайте контракт,
срок действия которого превышает один год, и не позволяйте провайдеру ре-
гистрировать ваше доменное имя, если он не предоставит письменного под-
тверждения о том, что вы являетесь владельцем своего доменною имени и при
смене провайдера сможете сохранить его за собой.
J Жизнестойкость. Случается, что компании, предоставляющие услуги по ра-
боте в Internet, прекращают свою деятельность (это случается даже с гиганта-
ми, подобными печально известной энергетической компании Enron). Поста-
райтесь выяснить устойчивость положения компании на рынке и реалии ее
существования и деятельности.
J Отчетность. Очень важно, чтобы компания-провайдер бесплат но предостав-
ляла какую-то базовую отчетность относительно функционирования вашего
узла, например число ежедневных посещений. Такие услуги предоставляются
не очень часто, но они весьма ценные. Для многих пользователей при выборе
провайдера этот фактор является решающим.
J Оплата за передачу данных. Это еще один потенциальный “подводный ка
мень”. Когда пользователь открывает страницу вашего узла, все содержащие
ся на ней данные передаются на его компьютер. При загрузке файлов переда
ется еще больше данных. Многие компании Web-хостинга не взимают оплату
за передачу какого-то объема данных, но когда трафик превысит заданное пре
дельное значение, оплата может оказаться очень высокой. Внимательно озна
комьтесь со всеми тарифами и сравните их с тарифами других провайдеров.
J Цена. При прочих равных условиях решающим фактором является цена. По
все остальные услуги редко бывают совершенно идентичными. В первую оче
редь выполните сравнительную оценку различных факторов, но при этом нс
позволяйте провайдеру ободрать себя как липку.
® Основными факторами при выборе компании, предоставляющей услуги Wcb-xoc
тинга, являются свобода смены провайдера по мере необходимости и контроль ено
его доменного имени.
Варианты выбора места на Web-сервере
Теперь, когда вы узнали, какие факторы работы сервера следует оценивать, возникает но
прос о том, где же искать место на Web-сервере. Выбор правильного места размещения сноп о
Web-узла является не такой уж простой задачей. Есть такие основные варианты: узлы, предла
тающие бесплатное место на сервере; Web-хостинг с онлайновыми службами; обычные компа
нии, предоставляющие услугу Web-хостинга и создания собственного Web-сервера. Посеиш
Web-узлы провайдеров, вы сможете ознакомиться с перечнем предлагаемых ими услуг хостинга.

Что делает Web-сервер быстрым
Скорость Web-сервера определяется числом соединений (краткими сеансами связи между двумя
компьютерами), которое может быть установлено за определенный промежуток времени. Число
соединений зависит от того, насколько быстро сервер их устанавливает, декодирует запрос,
отправляет запрошенный файл и прерывает соединение. Большинство людей полагают, что решающим
фактором является скорость передачи файлов. Но это не так. При передаче небольших файлов
самым узким местом является не скорость их передачи, а скорость, с которой аппаратное и программны1
обеспечение сервера устанавливает соединение при каждой передаче, а также скорость разрыва
соединения после ее завершения.
Инженеры и разного рода специалисты, например люди, пишущие книги на компьютерную тематику,
любят называть причину возникновения узких мест ограничивающим фактором. Например, фактором,
ограничивающим завершение данной книги в срок, является скорость, с которой пишет автор
Ограничивающим фактором для обслуживания простых Web-страниц является скорость, с которой
сервер устанавливает и разрывает соединение, а вовсе не скорость, с которой данные можно
передавать по кабелям.
Помимо скорости установления и разрыва соединения с другими компьютерами, скорость соединения
сервера с Internet может существенно варьироваться и по другим причинам, особенно при обращении
к большим файлам, таким как объемные графические изображения. При наличии прямого доступа
к Internet (имеющегося в большинстве крупных компаний и организаций) скорость клиентского
соединения может оказаться выше скорости серверного. Дело в том, что множество персональных
и небольших коммерческих Web-страниц располагается на Web-серверах, для которых соединение
с internet осуществляется посредством обычного модема со скоростью 56 Кбит/с. Поэтому не стой:
ругать свой модем, если полноцветная фотография победителя конкурса вышивания крестиком никак не
может загрузиться. Источник проблемы может находиться на другом конце канала связи.
Независимо от того, каким был ваш первоначальный выбор, оставляйте за собой возмож
иость свободы действий, поскольку ваши потребности могут очень быстро измениться. )ю
может произойти с появлением новых провайдеров, по мере увеличения ваших собственных
шаний и изменения роли Internet в вашей повседневной жизни.
Получение бесплатного места на сервере
Бесплатно получить место на сервере для размещения относительно небольших W< l>
у шов можно несколькими способами (см. главу2 “Публикация в Web: провайдеры Internet и
неоплатные службы”). Подобные узлы являются прекрасным местом для создания небольших
первоначальных Web-страниц, которые помогут ознакомиться со спецификой и оспой и.
принципы создания страниц и Web-дизайна. Однако Web-узлы ярко выраженной коммерче
i кой направленности, как правило, нельзя размещать бесплатно (несмотря на это правило, на
терверах бесплатных служб размещено множество узлов, коммерческая направленность ко
юрых только слегка завуалирована). Кроме того, для получения собственного доменною
имени вам придется либо перейти на другой сервер, либо сочна™. спой	
Если доступ к серверу бесплатного размещения вы осуществляете с компьютера своего
друга или с работы, то для начала такой вариант вам подойдет. Только старайтесь не нару-
шать правила и ограничения, относящиеся к содержимому вашей страницы, которые приняты
на узле данной Web-службы.
Услуги провайдеров Internet
Провайдеры Internet, или поставщики услуг Internet, предоставляют доступ к Сети. Одна-
ко, помимо этого, они предлагают пользователям и ряд других услуг, в том числе консульта-
ционные, услуги хостинга, программирования и многое другое. И если крупные компании
могут успешно существовать только за счет предоставления доступа к Сети, то для процвета-
ния небольших провайдеров им необходимо расширять спек тр своих услуг.
Некоторые провайдеры Internet предлагают своим клиентам бесплатную услугу публика-
ции Web-страниц или бесплатное место на сервере. Кроме того, разные провайдеры взимают
разную плату за разные услуги. Сравните услуги и тарифы основных провайдеров и выберите
наиболее подходящий для себя вариант. Даже если вы уже заключили договор с каким-то
провайдером на доступ в Internet, не думайте, что теперь вы ограничены только его услугами.
Многие провайдеры предоставляют дополнительные услуги даже клиентам других компаний.
Некоторые провайдеры могут предложить вполне привлекательный пакет, в состав которого
входит ряд дополнительных услуг. Но не забывайте: вероятность получить у провайдера бес-
платное место на сервере будет большей, если вы являетесь его клиентом.
Использование оплаченного места на сервере
Существуют тысячи компаний, предоставляющих услуги Web-хостинга. Спектр их услуг,
тарифы и мазериальное обеспечение существенно варьируются. Некоторые компании пред-
лагают только услуги хостинга и взимают оплату за хранящиеся или передаваемые мегабай-
ты. Другие компании предлагают дополнительные услуги, которые могут оплачива ться доба-
вочно или входить в состав пакета услуг хостинга. Рынок провайдеров растет столь быстро,
что за ним бывает трудно уследить. Тем не менее, чтобы не попасть впросак, внимательно
изучите информацию о компаниях и предоставляемых ими услугах. Не забудьте ознакомить-
ся с отзывами клиентов о работе той или иной компании. Начать подобное изучение можно
с узла www. providers . ru.
Руководствуйтесь принципом, который был сформулирован задолго до появления
Internet, еще в древнем Риме: “Покупатель — будь бдителен!”
Создание собственного Web-сервера
Решение о создании собственного Web-сервера, равно как и об использовании любой
другой услуги, связанной с работой в Internet, зависит от того, какую задачу вы стремитесь
выполнить и насколько велик ваш опыт. Если ранее вы работали с Web-серверами или
имеете большой опыт в области компьютеров и коммуникаций, то задача по созданию соб
ственного Web-сервера будет вам по плечу. В противном случае эта процедура грозит пре
вратиться в кошмар.
Многие поборники ведения бизнеса через Internet ратуют за создание собственных
Web-серверов, однако мы не разделяем их точку зрения. Если вы не являетесь специали
стом в этой области, лучше воспользуйтесь услугами провайдера или Web-службы. После
того как вы приобретете достаточный опыт, подумайте о создании собственного сервера,
нс забывая поддерживать связь с людьми, которые смогут оказать вам помощь при во шик
новении каких-либо проблем.
Делайте свой бизнес в киберпространстве
Виртуальные магазины представляют собой специальные Web-узлы, облегчающие продажу товаров
и услуг через Internet. Оператор узла виртуального магазина может предоставить в ваше распоряжение
следующие услуги.
J Исходная постановка задачи для вашего Web-узла.
J Создание самой Web-страницы (для этого вы должны будете предоставить исходные материалы,
такие как описание товаров и услуг, фотографии, прайс-листы и т.п.).
J Реклама и продвижение узла.
J Поддержка интерактивных продаж.
Некоторые узлы предлагают средства раскрутки виртуальных магазинов пользователей. Выбор
правильного провайдера для собственного виртуального магазина может оказаться решающим
фактором, особенно если вы хотите за месяц достичь хорошей посещаемости и продаж. Приготовьтесь
к тому, что за поддержку такого узла вам придется платить несколько сотен долларов в год, а также
выплачивать небольшие комиссионные за выполнение транзакций. Наличие собственного виртуального
магазина дает хорошую возможность получения опыта работы в Web, так что со временем вы сможете
работать самостоятельно. (Главное, чтобы ваш контракт позволял быстро перенести свой магазин
в другое место, если возникнет подобная необходимость.) Ниже приведены адреса наиболее
популярных провайдеров виртуальных магазинов.
J www.amazon.com
Z www.ebay.com
www.yahoo.com
J www.ozon.ru
Запомните две вещи. При создании собственного Web-сервера используйте komiii.ki
тер, который не будет выполнять больше никаких других задач. (Если вы последуете
этому умному совету, то потратите на компьютер, на котором будут храниться мег а
байты ваших Web-данньгх, около 1500 -2000 долларов.) И будьте готовы потратить
время и силы на то, чтобы детально изучить процедуру установки соединения с In
ternet и другие сложные технологии, связанные с работой в Web. Только тогда вы
сможете создать такой сервер, который будет столь же эффективным, как и серверы,
предоставляемые в распоряжение клиентам компаниями Web-хостинга.
Обращение за помощью
После краха в 1999-2001 годах многих Internet-компаний во многих странах мира поянтт
чось множество безработных профессионалов. Кроме того, за 10 лет, прошедших со дня по
явления Web, многие любители набрались опыта работы в Сети и стали знатоками Web
г ехнологий. Поэтому не составит никакого труда найти специалиста, который сможет ока за г г.
вам помощь как на платной основе, так и бесплатно, просто потому что вы с ним дружи ге.
Для того чтобы найти хорошего провайдера Web-хостинга или получить какую-либо дру
। у го помощь, связанную с созданием Web-узла, мы рекомендуем последовать таким сове гам
J Начните с малого. Человеку, не обладающему опытом в области Web-публпка
ций, трудно задавать правильные вопросы, которые помогут найти провайдера
или консульзанта в области Web-хостинга. Прежде чем приступать к созданию
громоздкого и трудоемкого творения, начните с создания и публикации домаш
ней страницы, а затем небольшого тематического узла. Полученный oiii.ii при
годится вам при поисках хорошего провайдера для Гюпыпих ппо.-ккт
J Определите, какие услуги вам необходимы. Собираетесь вы создать про-
стой узел или сложный? Хотите вы создать узел самостоятельно и платить
только за хостинг или хотите поручить выполнение большинства работ треть-
им лицам? Обдумайте свои потребности и найдите людей или компанию,
наиболее подходящих для их реализации.
J Проанализируйте узлы, подобные своему. Найдите Web-узлы, похожие на
тот, что создаете вы сами. Спросите Web-мастеров, как функционируют их
узлы и услугами каких провайдеров они пользуются. Спросите у знакомых
владельцев Web-узлов, удовлетворены ли они получаемыми услугами. При
ознакомлении с деятельностью какого-либо провайдера зайдите на несколько
узлов, которые он поддерживает, и узнайте у их владельцев, довольны ли они
услугами хостинга. Постарайтесь отыскать клиентов, которые довольны по-
лучаемыми услугами, и используйте их в качестве консультантов.
Работайте в своем регионе. Иногда возникает необходимость личной встре-
чи с человеком, которого вы избрали в качестве консультанта. Это означает,
что он должен проживать в одном регионе с вами. (Даже несмотря на квали-
фицированные советы, приведенные в данной книге, беседа с глазу на глаз
с живым человеком поможет лучше и глубже разобраться в интересующих
вас вопросах. Есть только одно исключение: это если вы вдруг почувствовали
антипатию к человеку, с которым встретились.) Несмотря на то что выбор
специалистов в определенном регионе может быть весьма ограничен, вы смо-
жете обзавестись полезными связями.
J Принимайте личное участие в процессе. Ни один консультант или провай
дер не сможет выполнить за вас абсолютно всю работу. Здесь потребуется
ваше активное личное участие, поэтому будьте готовы к тому, чтобы провести
достаточно много времени, работая с консультантом или поставщиком услуг.
Слишком хороший узел
Ваш узел слишком успешен? Хотите — верьте, хотите — нет, но успешное функционирование узла тоже
может стать проблемой. Дело в том, что многие узлы, стоящие высоко в поисковой классификации,
посвященные популярной теме, имеющие интересные ссылки, рекламируемые в прессе, со временем
становятся перегруженными. Поэтому если ваш узел неожиданно стал популярным, будьте готовы
к усовершенствованию спектра услуг по его хостингу. В частности, оговаривая оплату за превышение
трафика, обязательно установите какую-то предельную сумму, которую вы должны будете заплатить
в случае резкого увеличения посещений узла. Если вы не имеете такой возможности, попробуйте
применить какой-либо способ отслеживания количества посещений или оговорите возможность появления
предупредительного сообщения о резком увеличении загрузки узла. Это позволит вам избежать
неприятных сюрпризов в виде огромного счета за услуги.
7le[ieqa4a файлов
Одним из самых замечательных аспектов Web-публикации является возможность на
стройки, тестирования и модификации Web-узла на собственном компьютере. Проблемы n.i
читаются в тот момент, когда файлы требуется передать на Web-сервер. До тех пор пока вы
не станете экспертом в области передачи файлов, вы будете сталкиваться со всевозможными
проблемами, В этом разделе мы попытаемся помочь вам избежать хотя бы некоторых ич них
Упорядочение файлов перед их передачей
Самые сложные аспекты при создании, тестировании и передаче Web-страниц связаны со
структурой каталогов. Например, в ссылке, ведущей от текста с HTML-разметкой к графине
скому изображению, необходимо указать, в какой подпапке находится графический файл
При передаче файлов на другой компьютер имена подпапок меняются, а это приводит к на
рушению ссылок, ведущих с Web-страницы к графическому файлу. Однако можно преднрн
пять меры, позволяющие предотвратить нарушение работы ссылок при передаче Web-файлон
с локального компьютера на Web-сервер.
Для узлов, содержащих пару десятков или меньшее количество файлов, существует про
стое решение: поместить все файлы в одну подпапку. При этом ссылки будут самыми про
стыми— вам необходимо указать только имя файла, без имени папки. В результате при передаче
файлов нс нужно будет беспокоиться о соответствии структур подпапок на разных компыо
терах. Подробная информация по этому вопросу представлена в главе 3 “Введение в HTMI "
и в главе 7 “Добавление ссылок на Web-страницу”.
Если на узле содержится более 20 файлов, постарайтесь использовать как можно более
простую структуру папок, желательно двухуровневую. Помимо этого, при создании ссылок
используйте относительную адресацию. В ней не указывается полный путь от корневого ка
талога, а только относительный путь к файлу, на который указывает ссылка. Относительная a i
ресация позволяет перемещать файлы с одного компьютера на другой без изменения ссылок.
Некоторые пользователи перед передачей файлов предпочитают использовать программу
сжатия, например PKZIP. Прежде чем сжимать файлы, убедитесь, что получатель сможет их
распаковать. Кроме того, имейте в виду, что самыми большими файлами на Web-узлс, как
правило, являются графические файлы GIF или JPEG. А поскольку эти файлы уже являются
сжатыми, то еще больше сжать их с помощью программы сжатия все равно не удастся. 11<>
гато программа сжатия поможет собрать все файлы в один пакет, сохранив при этом от носи
т ельное расположение папок.
Из вышесказанного можно сделать вывод, что основополагающим принципом является
максимально возможное упрощение процесса. После того как вы приобретете достаточно
опыта, можете предпринимать шаги по усложнению структуры своего узла, делая его более
удобным для управления и обновления.
Передача файлов с помощью FTP
FTP (File Transfer Protocol — протокол передачи файлов) — это Internet-служба, вредна
лтаченная для передачи файлов между разными компьютерами. Благодаря FTP сеть Internet
получила популярность еще до появления World Wide Web. FTP является относительно
простым способом передачи файлов с одного компьютера на другой. Большинство польюты
гелей Internet используют именно этот протокол для загрузки файлов с Fl’P-хоста на свой
компьютер. Зачастую пользователи начинают получать файлы с Web-страниц, не вникая
и сущность FTP, и это им вполне удается. Для публикации Web-страниц вам может попади
питься отправить файлы со своего компьютера на хост с помощью FTP. Для больишпептл
пользователей использование FTP для выгрузки файлов является новой операцией, но она г о
т ем не такая сложная, как может показаться на первый взгляд.
Существуют десятки FTP-программ для Macintosh, Windows и Unix, каждая из коюрых
имеет свои плюсы и минусы. В Web можно найти множество бесплатных FTP-kiiiiciiiou
Описанные ниже инструкции можно применять для работы с большинством популярных
I I P-программ, но для выгрузки файлов потребуется “настоящая” FTP-программа.
Многие программы, поддерживающие функцию FTP, могут только загружать фавны
| ||Л j с FTP-узлов, но не выгружать файлы на них. Поэтому убедитесь, что ваша FTP-программа
(ЦЦ J поддерживает функцию размещения (записи), а не только функцию получения (чтения)
фашюв. Хорошие FTP-программы можно найти на Web-узле www. download. com.
Соединение с FTP-узлом
Приведенные ниже инструкции предназначены для работы с программой Fetch (что в пе-
реводе с английского означает выборка), одной из наиболее популярных FTP-программ для
Macintosh, окно которой показано на рис. 11.1. (Обратите внимание на маленькую собачку,
которая собирается выбрать нужный файл!) В целом эти же шаги применимы к любой дру-
гой FTP-программе.
Рис. /1.1. FTP-клиент выборки файлов для Macintosh
Для передачи файлов на Web-узел выполните следующие действия.
1.	Соединитесь с Internet.
2.	Запустите FTP-программу.
3.	Введите имя хоста.
Имя FTP-хоста часто совпадает с URL Web-узла, но только вместо www ставятся сим-
волы ftp. Например, если Web-узел имеет URL www.mysite.com, то, вероятно,
именем FTP-хоста будет f tp .mysite. com.
4.	Введите имя пользователя.
При работе с некоторыми узлами можно вместо конкретного имени пользователя вво-
дить пароль anonymous. Другие узлы предоставляют вам определенные имя пользо-
вателя и пароль для выгрузки Web-файлов.
5.	Введите пароль.
При использовании в качестве пароля имени anonymous можно ничего не вводить
или указать свой адрес электронной почты.
6.	Укажите каталог, в который вы хотите поместить, т.е. записать, файлы.
После установления соединения можно перейти в нужный каталог, но удобнее и пра-
вильнее будет ввести его имя сразу же.
7.	Щелкните иа кнопке ОК, чтобы установить соединение с FTP-узлом.
Если все сделано правильно, соединение будет установлено. На рис. 11.1 показано диа-
логовое окно FTP-программы Fetch, которое откроется после установления соединения.
Выгрузка файлов и завершение соединения
Установление соединения— только половина дела. Помимо этого необходимо размес-
тить файлы в нужном каталоге. Сделать это, как правило, весьма просто.
1.	Выберите нужную опцию для файла, подлежащего записи: Automatic (Автома ги-
чески), Text (Текст) или Binary (Двоичное представление).
Для записи HTML-файлов выберите опцию Text, для графических и мулыимедии
ных— опцию Binary. При наличии и тех и других файлов либо выгрузите по очереди
файлы каждого типа, указав при этом нужные параметры, либо выгрузите файлы нее
вместе, выбрав опцию Automatic. В этом случае сервер самостоятельно попытается
определить необходимый тип выгрузки.
До тех пор пока вы не приобретете опыт работы с конкретным сервером, выгружай
те файлы по одному, указывая соответствующий тип передачи для каждого из них.
2.	Для записи файла щелкните на кнопке Put (Разместить).
Эта опция может называться Send (Отправить), Upload (Выгрузить) или как-то иначе
(в зависимости от конкретной клиентской программы). В некоторых случаях для нача
ла выгрузки необходимо не щелкнуть на кнопке, а выбрать нужную команду в раскры
вающемся списке.
3.	В открывшемся диалоговом окне щелкните на имени файла, подлежащего пши
си, а затем щелкните на кнопке ОК.
Начнется процесс передачи файла. Для каждого файла, подлежащего выгрузке, пошо
рите шаги 1-3.
4.	После того как выгрузка будет завершена, в меню File (Файл) выберите nyiiKi
Quit или Exit (Выход).
Передача файлов с помощью Web-служб
В главе 2 “Публикация в Web: провайдеры Internet и бесплатные службы” мы рассказына
ли о том, как можно использовать Web-службы для создания и публикации домашней етра
ницы. Средства передачи, используемые этими службами, достаточно разнообразны. Тем нс
менее, создав текст с HTML-разметкой и графические файлы с помощью соответствующих
инструментов, вы сможете выгрузить их на сервер с помощью одной из таких служб.
/Звос/ узла в уейапЯие
После размещения своего узла в Web вы, вероятно, сразу же расслабитесь и не будете не-
которое время беспокоиться о своем творении. Однако имейте в виду, что размещение у та
в Web является лишь началом совершенно нового для вас процесса. В приведенных ниже ра ще
лах мы расскажем о том, какие первоначальные шаги необходимо предпринять для того, чтобы
опубликованный узел “твердо стоял на ногах” и соответствовал своему предназначению.
Тестирование узла
После размещения своего узла в Web зайдите на него как обычный посетитель. 1йкм<п
рите, работает ли узел. Проверьте все ссылки и убедитесь, что они работают надлежащим <>о
разом. Убедитесь в том, что вы легко можете переходить со страницы на страницу. Поиро
буйте зайти на свой узел с компьютера с небыстрым модемным соединением и поемен ризе,
насколько хорошо работает узел на низких скоростях. Попробуйте зайти на узел с помощью
и Netscape, и Internet Explorer.
Попытайтесь оценить свои впечатления от узла, как если бы вы действительно были ен>
новым посетителем. Насколько привлекателен узел? Соответствует ли он своему предпазиа
чснию? Во шикают ли какие-то сложности или проблемы в процессе использования узла?
Такой объективный подход к собственному узлу поможет быстро устранить незначительные
проблемы, которые иначе было бы трудно идентифицировать.
Тестирование узла может оказаться несколько утомительной процедурой, поскольку при
этом наверняка обнаружится множество проблем, которые придется устранять, но в результа-
те вы получите гораздо лучший узел. Зафиксируйте свои впечатления, начиная с момента на-
чала первого посещения узла и до его завершения, — впоследствии первые впечатления бу-
дет вспомнить значительно труднее.
С помошью команды печати своего Wcb-браузера распечатайте страницы Web-узла
и прямо на них сделайте свои пометки. Распечатка позволяет легче отслеживать на-
блюдения и вносить нужные корректировки.
Обратная связь с посетителями
На Web-узле можно разместить анкету для отзывов или обратной связи. Кроме того, мож-
но попросить своих друзей и коллег зайти на узел и дать его беспристрастную оценку. Задай-
те им наводящие вопросы типа: “Как вы считаете, для чего предназначен данный узел?”,
“Пожалуйста, сравните его с другими известными вам узлами аналогичной направленности”,
“Что бы вы изменили на данном узле, если бы могли?”
Часть IV
Больше интерактивности!
"^u^uiuvl Я аоз^ал мал<,нькцю ^игцркц
Нр4,Аклцнн1Л1<А, коилОрАЯ Й11АШ ho вобмц 0AuhW( u
ИрЯЧШбЯ ЬА ^AHHipAMU. На НООЛЦН€.Ц 6kApAHuu,4.
НАШ логомии НрИМ^НЯШ К Н4.МЦ HputM ho^
HAibAHUtM "h^V|IuAK)U4,uu ЬАУЬАьЛ и 6ог>Б|7А1и,АШ
<5ан<^Ц|глА НА НАЧАЛЬНОЮ Oh\pAHUl^V|. '
/3 Э1пой 4.OCIHU . ..
Пользователям по душе рассматривать красивые Web-страницы, но еще
больше им понравится, если и для них на странице найдется какая-то ра-
бота. Воспользовавшись широко доступными средствами, добавьте на
свою страницу анимацию, мультимедиа, сделайте ее интерактивной,
а потом превратите в полноценный многостраничный Web-узел.
Глава 12
Анимация и мультимедиа
/3 эгвой главе...
>	Подводные камни мультимедиа
>	Анимируйте свои GIF-файлы
>	Мультимедийные файлы
>	Добавление видеофайлов формата QuickTime
>	Добавление аудиофайла формата MP3
нимация — это очень забавная вещь, которая в настоящее время часто встречается
в Web. Она широко доступна даже для начинающих создателей Web-страниц. Это спя
зано с тем, что в настоящее время существует простой способ создания несложной анимации,
которую называют анимированными GIF-файлами. Их без особых усилий можно найти в Inle.i
net и бесплатно загрузить на свою страницу, не утруждая себя созданием собственной анимации
Но это более чем просто анимация. При существующем уровне технологии вы можете
размещать на своих страницах аудиофайлы, видеофайлы и файлы других типов. В этой главе
рассказывается о вариантах использования мультимедиа, основах существующих технологии
и возможных подводных камнях, которые могут помешать вам использовать новые замена
тельные возможности.
Правильная подготовка собственной страницы за счет использования основных составляю
щих Web — текста и графики — задача сложная, но решать ее приятно. Изучите основы публи
кации в Web, прежде чем использовать мультимедиа. И обратите внимание на проблемы, кого
рые могут возникнуть при использовании мультимедиа, они описаны в следующем разделе.
Однако, если вы достаточно изобретательны, то с успехом сможете использовать информацию
приведенную далее, чтобы украсить с помощью мультимедиа свои Web-страницы.
Лоувы/ные камни м^лыпимес/иа
С мультимедийными файлами не все так просто. Анимационные GIF-изображения дос
тупны, их несложно внедрить в вашу Web-страницу, как и звуковые файлы. На сегодняшний
день аудиофайлы распространены очень широко. Стандарт MP3 радикальным образом рас
ширил рамки существования и использования музыки в Web. (К сожалению, появление дан
кого формата стало самым большим вызовом закону об авторских правах за последние готы
Возможность передачи через Сеть видеофильмов кинематографического качества стала сип
одним поводом для сумятицы.)
Сеть имеет достаточный потенциал для того, чтобы в конце концов превратиться в видео
сеть. Есть только три небольших проблемы, для решения которых, однако, может попади
биться много лет.
Проблема № 1: пропускная способность. Для роста мультимедийных мощностей Web
нуждается в существенном расширении полосы пропускания. Сегодня видеоклипы “виисы
паю г” в небольшие окна, размер которых гораздо меньше экрана обычного телевизора. Пока
по не задействованы возможности телевидения высокой четкости (HDTV) и тругих ci ш
дартов высокого разрешения. Проблема не ограничивается рамками медленных модемных со-
единений, используемых большинством домашних ПК. Даже корпоративные сети и вся гло-
бальная сеть Internet еще не готовы к демонстрации полноэкранного масштабного видео.
Проблема № 2: наличие творческого потенциала. Для создания и трансляции обычных
телепрограмм или работы радиостанции необходимо участие большого количества людей,
начиная от операторов и заканчивая талантливыми ведущими. При самостоятельном созда-
нии мультимедийного файла вам придется взвалить на свои плечи большинство выполняе-
мых ими функций — или пригласить кого-то, кто сделает это за вас.
В чем телевидение превосходит ПК
В качестве среды передачи развлекательной информации телевидение пока что полностью превосходит
ПК, как с точки зрения потребителя, так и с технической стороны.
Почему? Произведем несложные подсчеты. Объем типичной текстовой Web-страницы составляет примерно
2 Кбайт (или две тысячи байтов). Предположим, мы хотим, чтобы пользователь ожидал загрузки страницы
лишь одну секунду. При этом минимальная полоса пропускания, необходимая для эффективной передачи
текста Web-страницы через Internet (с сервера по магистральной линии Internet и до самого ПК), должна
составлять 2 Кбайт/с, что составляет 16 Кбит/с (поскольку байт состоит из 8 бит). Скорость модема
стандарта 56 Кбит/с превышает это значение почти в три раза, поэтому с передачей текстовых Web-
страниц не возникает никаких проблем.
Теперь перейдем к графике. Для быстроты просмотра разработчики стремятся поддерживать объем
своего Web-узла в пределах 50 Кбайт (400 Кбит). Поэтому для достижения эффективного времени
отклика при передаче типичной Web-страницы необходимо соединение на скорости 400 Кбит/с. Это
может быть DSL-соединение или хорошо настроенная корпоративная сеть. Поэтому если мы хотим
просматривать современные Web-страницы на хорошей скорости, имеющиеся технологии должны стать
доступными для рядового пользователя.
Теперь о мультимедиа. Телевизор отображает 25 кадров в секунду при разрешении приблизительно
560x420 пикселей, т.е. необходимо передавать более 200 000 пикселей в секунду (приведенные цифры
зависят от используемого формата передачи сигнала, но порядок величин остается одинаковым). Для
получения такого изображения скорость передачи данных должна составлять 6 Мбайт/с, или 48 Мбит/с.
(Помните, что байт состоит из 8 бит.) При этом речь идет только об изображении — безо всякого звука!
Ни один кабельный модем в ближайшее время не сможет осуществлять передачу данных с такой
скоростью. То же самое можно сказать о большинстве корпоративных сетей и об Internet-магистрали. На
сегодняшний день отображение мультимедиа с таким же высоким качеством, какое присуще
телевизионным трансляциям, находится за пределами возможностей соединений Internet.
Чтобы устранить эти проблемы, необходимо множество хитрых приемов. Так, с помощью процедуры
сжатия звуковые файлы и короткие видеоклипы с малым размером изображения можно будет загружать
и использовать в Internet. Потоковые технологии, реализуемые на серверах, помогают решить вопросы
передачи мультимедийных пакетов (с изображениями небольших размеров) на скорости, доступной для
системы пользователя. При этом “за кулисами” остается непрерывная созидательная работа огромного
количества людей, стремящихся увеличить качество сжимаемых мультимедийных файлов.
Существует множество дизайнеров-самоучек, которым чрезвычайно нравится преодолевать всевозможные
проблемы. В настоящее время мультимедийные технологии Web находятся на такой же ранней стадии раз-
вития, на которой еще несколько лет назад (когда мы работали над первым изданием данной книги)
находилась сама Web. Пока что существует огромное количество технических сложностей создания
и использования мультимедиа, но, вне всякого сомнения, благодаря настойчивому стремлению и жиз-
ненной необходимости они будут преодолены. Поэтому для начала воспользуйтесь информацией,
приведенной в данной книге, и активно развивайте свой потенциал, пока еще не поздно это сделать.
Проблема № 3: авторские права. Находки всех великих артистов заимствуют другие, по
мультимедийные файлы могут иметь высокую степень защиты от копирования. Заимствуя ю,
что создано другими людьми и комбинируя это с собственными данными, вы можете н щдсчь
на себя неприятности. И тем более заимствование результатов чужого труда и распространс
ние их под видом собственных— несомненно, может привести к проблемам. Позабоп.и-ч.
о том, чтобы на вашей странице размещались только материалы, созданные вами, или re, на
использование которых у вас есть письменное разрешение их автора (либо владельца).
В целом открывающиеся возможности просто безграничны. Мультимедиа, начиная с про
стой анимации или аудиороликов и закапчивая полноэкранными фильмами с объемным ту
ком, выходит далеко за рамки возможностей статичного текста и графики. А в настоящее
время появляется все больше и больше решений, позволяющих внедрять мультимедийные
файлы на Web-страницы.
Будьте готовы к тому, что с каждым днем в Internet будет появляться все больше и больше
мультимедийных файлов. Отслеживайте ситуацию, чтобы по необходимости вы в любой мо
мент смогли внедрить их на свои собственные Web-страницы.
свои
Анимация GIF-файлов является самым простым и дешевым способом оживить Web-eipa
ницу. Попробуйте создать анимированные GIF-файлы и разместить их на своем узле, даже
если вашей задачей является добавление мультимедийных файлов другого типа. Опыт , при
обретенный в процессе работы с анимированными GIF-файлами, позволит вам чувст вовап.
себя гораздо увереннее, когда дело дойдет до более сложных технологий.
Большинст во людей знают, что фильм представляет собой ряд фотоснимков (неподниж
ных изображений). Анимированные GIF-файлы подобны короткому фильму. Они представ
ляют собой от нескольких до нескольких десятков GIF-изображений, которые при последона
тельном отображении создают иллюзию движения. Вспомните книжки-листалки своего дст
ства. При быстром перелистывании страниц картинки как бы оживали и становнлш i
похожими на одно движущееся изображение.
Большим преимуществом анимированных GIF-файлов является то, что ни для их р.нмс
щения на Web-сервере, ни для их воспроизведения на компьютере пользователя не грсбуекя
никакого специального программного обеспечения. Вам не нужно обладать особым художе
ственным даром или платить за лицензионное соглашение. А если вы не хотите тратить врс
мя на самостоятельное создание анимированного GIF-изображения, то в Internet имеются i ы
сячи бесплатных файлов.
Существует множество способов создания GIF-анимации и ее внедрения на Web-yicn,
причем далеко не все из них являются очевидными.
А Кнопки и пиктограммы. Кнопки и пиктограммы, расположенные на Web
узле, предназначены для привлечения внимания посетителя. Их анимация
повысит эффективность реализации данной задачи. В Web существует мио
жество ресурсов, с которых можно бесплатно загружать анимированные
кнопки и пиктограммы.
А Заглавные буквы. Вам наверняка известно, что зачастую для привлечения
внимания читателя в начале текстовой статьи ставится большая шляпная
буква, которая на профессиональном языке называется “буквица", iте
сильнее бросается в глаза анимированная буквица. (В зависимости от точки
зрения или настроения посетителя она может не привлекать внимание, а, пао
борот, отвлекать.)
А “Пляшущие человечки”. На Web-страницах можно размещать анимирован
ные пиктограммы с изображением человечков. Изображения люден всегда
привлекают внимание. Если эти изображения анимированные, го оторван.
I взгляд от них просто невозможно. За подробной информацией обратитесь
к врезке “Фотоанимационные GIF-файлы”, приведенной ниже.
J Фотографии товаров. На своих Web-страницах вы можете разместить рисо-
ванные или фотографические изображения продаваемых товаров. Это при-
влечет внимание к товару, а посетители Web-узла получат о нем такое же
представление, как если бы они рассматривали его на витрине магазина.
J Реклама. Для размещения на узле рекламы можно использовать любые из из-
ложенных выше способов. Можно размещать традиционную, оплачиваемую
I рекламу или использовать средства “внутренней” рекламы, привлекая внима-
ние посетителей к тем ссылкам, на которых, по вашему мнению, они обяза-
тельно должны щелкнуть.
* J Чистое творчество. Вы можете реализовать идею, над которой никто до вас
еще не додумался. К примеру, настоящим открытием стал Web-узел, на стра-
ницах которого было полно хомяков и других грызунов, исполняющих мака-
рену (асср. com/hamsterdance. html). Так что дерзайте!
Не перебарщивайте с использованием анимированных GIF-файлов. Если какая-то за-
бавная пиктограмма будет попадаться на глаза не один, а десятки раз, она перестанет
забавлять, а начнет раздражать. Внедряйте анимированные GIF-файлы там, где это
уместно, но если анимации станет слишком много, не колеблясь, удалите часть файлов.
Поиск анимированных GIF-файлов
Существует множество Web-узлов, на которых размещено огромное количество анимиро-
ванных GIF-файлов, полностью готовых к внедрению на вашу Web-страницу. Они хорошо
подойдут для начала использования анимации на своих Web-страницах.
Фотоанимационные GIF-файлы
Технология QuickTime VR (VR — это аббревиатура термина Virtual Reality — виртуальная реальность)
использует изображения для создания в Web подобия трехмерных объектов и трехмерных
интерактивных сцен. Похожего эффекта можно добиться и с помощью GIF-файлов.
Для того чтобы создать анимированное изображение товара или другого объекта (даже головы человека),
возьмите несколько фотографий (например, 8-16), сделанных с разных точек, равномерно размещенных
вокруг объекта съемки. С помощью программы редактирования изображений, например Photoshop,
максимально уменьшите каждое изображение. Затем упорядочьте изображения в анимированный GIF-файл
в соответствии с инструкциями, приведенными в данной главе. Полученную анимацию называют объектом,
; или объектным фильмом. Эффект действительно восхитителен и реалистичен.
Более интересными (хотя и менее очевидными с точки зрения приносимой пользы) являются
анимированные кадры сцен. Для их создания расположите камеру на открытом участке (максимально
< интересном) и сделайте ряд снимков (8, 16 или другое кратное число), поворачивая объектив на рав-
; ноотстоящие углы зрения. Как и в случае с объектами, максимально уменьшите изображения и объе-
дините их в анимированный GIF-файл. Полученное изображение, которое называют панорамой, произ-
водит такое впечатление, как будто пользователь находится внутри сцены и смотрит по сторонам.
Как и любая другая творческая работа, создание анимированных GIF-файлов вообще и фотоаними-
рованных GIF-файлов в частности отнимает много времени. Некоторые люди практически целиком
посвящают свою жизнь интерактивной фотографии.
/............. - . . -... _ -----------------.....
Файлы, расположенные на небольших узлах, вероятнее всего, могут быть предоставлены
в ваше распоряжение безвозмездно. Более крупные узлы, на которых размещены большие
библиотеки изображений, скорее всего, попросят какую-то компенсацию за их использова
ние. Узлы обоих типов можно найти с помощью поисковых машин, выполнив поиск по клю
левым словам “анимированные GIF-файлы”.
Одним из ведущих узлов распространения анимированных GIF-файлов является узел
Animation Factory (www.animationfactory.com), начальная страница которого изобра-
жена на рис. 12.1.
Рис. 12.1. На узле Animation Factory можно получить сотни тысяч анимаций
Здесь за умеренную плату сможете получить доступ к более чем 400 000 файлов. Они включи
ют в себя множество категорий, в том числе кнопки, текст, люди, события, компьютеры и др.
Есть еще один крупный узел с GIF-анимациями — Gifanimations.com (gif animations. com).
Он не такой элегантный, как Animation Factory, но зато на нем имеется около 20 000 бесила ।
ных графических файлов. Единственное ограничение— полученную анимацию нельзя ис-
пользовать в коммерческих целях.
Воспользуйтесь этими и другими, самостоятельно найденными узлами в качестве ресур
сов GIF-файлов. И радуйтесь жизни!
® Подумайте, прежде чем размещать ссылку! Задание ссылки на какую-то интересную
GIF-анимацию или иллюстрацию в Web может показаться очень заманчивым. Одна
ко при задании прямой ссылки на GIF-файл, расположенный на каком-то другом
Web-узле, данный файл будет отображаться так, как если бы он принадлежал ваше-
му узлу. В результате вы доставите хлопоты и владельцу этого Web-узла, и самому
себе. Владелец узла, скорее всего, платит за все ресурсы, необходимые для под-
держки анимированного GIF-файла. А вам придется все время беспокоиться о том,
не перенес ли владелец свой файл в другое место, нарушив тем самым вашу ссылку!
Владелец изображения может даже целенаправленно изменить его на какое-нибудь
другое. А разве вам или посетителям вашей страницы понравится, если вместо таи
цующих хомячков их взору предстанет какое-нибудь неприличное фото?
Добавление анимированных GiF-файлов на Web-страницу
Для добавления анимированного GIF-файла на Web-страницу необходимо выполнить те
же самые действия, что и для добавления обычного GIF-файла. При работе с HTML-кодом
используйте дескриптор изображения — IMG. Например, для отображения анимированного
GIF-файла peace. gif необходимо использовать такой синтаксис:
<IMG SRC="peace.gif" HEIGHT=40 WIDTH=40 АЬТ=“Мир вам, добрые люди!">
Подробная информация о дескрипторе IMG приводится в главе 8 “Создание и добавление
готовой графики для размещения в Web”.
Перед добавлением анимированного GIF-файла на Web-страницу необходимо иметь в ви
ду следующее.
J Размер файла. О размерах файла необходимо беспокоиться и при работе с обыч
ными графическими файлами, и при использовании GIF-апимации. Поскольку
каждый кадр анимации представляет собой отдельный графический файл, то
общий объем вполне может достичь сотен килобайт. В результате зафузка
такого файла посредством модема займет более минуты. Чаще всего сама но
себе анимация не заслуживает того, чтобы ждать ее загрузки так долго. По
этому либо уменьшите размер, редактируя каждый файл анимации и умень
шая число кадров, либо поместите анимацию на отдельную страницу и задай
те на нее ссылку, не забыв при этом указать размер загружаемого файла.
J Скорость воспроизведения. Владельцы автомобилей знают, что расход го
рючего, необходимого для преодоления одного и того же расстояния, можш
варьироваться. То же самое касается и анимированных GIF-файлов. Скорость
загрузки и начала воспроизведения анимированного GIF-файла зависит oi
скорости Internet-соединения пользователя, а быстродействие компьютера
и графической подсистемы пользователя может повлиять на скорость воспрои i
ведения анимации. Попробуйте воспроизвести анимацию при разных настрой
ках системы и убедитесь в том, что она функционирует надлежащим образом.
J Фактор заинтересованности. Все время обновляйте анимацию на своей
Web-странице так, чтобы она не устаревала и не надоедала постоянным посе-
тителям. Если вы сами устали смотреть на свою GIF-анимацию, то и посети
телям вашей страницы она, вероятнее всего, уже наскучила.
Создание анимированных GIF-файлов
©Для создания анимированных GIF-файлов необходима специальная программа, ес-
ли только вы не хотите воспользоваться редактором ресурсов для редактирования
содержимого графического GIF-файла. К счастью, мы смогли включить на прила
гаемый к данной книге компакт-диск пробную версию одной из ведущих программ
GIF-анимации, Ulead GIF Animator.
Для помощи в настройке и изучении программы обратитесь к включенному в нее руково
детву пользователя. Ниже приведена упрощенная инструкция по созданию анимации.
1. Установите Ulead GIF Animator на своем компьютере.
Для установки программы следуйте инструкциям, приведенным на компакт диске.
2.	Создайте несколько GIF-изображений, подлежащих анимации.
Для создания ряда GIF-изображений следуйте инструкциям, приведенным в главе К
“Создание и добавление готовой графики для размещения в Web”. Убедитесь, что все
изображения имеют одинаковые размеры, необходимые для создания анимации.
Если вам не хватает собственных идей, сделайте ряд фотографий своего друга, когда он
поворачивает голову. Получится интересный, хотя и несколько иллюзорный результа!.
3.	Запустите Ulead GIF Animator.
4.	В диалоговом окне Startup Wizard (Мастер запуска) щелкните на кнопке Close,
чтобы данное окно закрылось. Затем для открытия нового файла выберите ко-
манду File^New (Файл^Создать).
Вам необходимо будет указать размер холста, как показано на рис. 12.2.
 Ulead GIF Animator [bud smith »m N 56x64| it 56x64
FileftlitViewObject(чаще FijtetVideo F.X Help
o д ’ сЗ - * й *
Onfei	Alignment
__j ;Т * Mcvc active objects) оф
it
T £
Edit 1 Optimtte J Preview;
Show objects Transpaienq»
Al Objects £jf 33 Й ‘ I®
Obj T
(ОЖ/.5Ш64}
IO
1э: S К'
.* 11
W1
el чЬ ' 

Foi Help. pvese Fl
Рис. /2.2. Программа GIF Animator потрясет вас
5.	В диалоговом окне введите ширину (Width) и высоту (Height) так, чтобы ра «мер
холста соответствовал изображениям. Щелкните на кнопке ОК, чтобы внесенные
изменения вступили в силу.
6.	Па панели кадров, расположенной в нижней части экрана, щелкните на кнопке
Add Frames (Добавить кадры), ч тобы добавить кадры. Чтобы выделит ь нужный
кадр, следует щелкнуть на нем. Для вставки изображения в выбранный кадр
нажмите клавишу <Ins>. В открывшемся диалоговом окне Add Image (Добав-
ление изображения) выберите нужное изображение, подлежащее вставке в кадр.
Добавьте в нужном порядке каждый из кадров анимации.
7.	Щелкните на вкладке Optimize (Оптимизация), чтобы оптимизировать анимацию.
Программа GIF Animator позволяет удалить дублирующуюся информацию из последо-
вательных кадров, уменьшая размер каждого кадра и общий размер файла анимации.
8.	Выберите команду File^Save (Файл^Сохранить), чтобы сохранить анимацию.
В раскрывающемся меню выберите формат GIF и сохраните файл.
9.	Вставьте GIF-файл анимации на Web-страницу и протестируйте ее на своем
компьютере. После этого опубликуйте Web-страиицу и снова протестируйте ее.
В программе GIF Animator имеется ряд других опций, помимо описанных в данной инст-
рукции (каждая из них подробно описывается в руководстве пользователя). Однако описан-
ная выше последовательность действий позволяет получить общее представление о том, как
создавать анимацию для публикации в Web.
Если вам понравилась программа GIF Animator и вы хотите побольше поработать
с графикой на Web-страницах, то имейте в виду, что на узле Ulead имеется ряд дру-
гих инструментов для работы с графикой, которые могут вам пригодиться. Для мно-
гих из них существуют бесплатные пробные версии, которые прекрасно подойдут
для знакомства с новым программным обеспечением. Если вас заинтересовало такое
предложение, зайдите на узел www. unlead. com.
Мцлыпил^ес/ийные файлы.
На заре существования Web для просмотра мультимедийных файлов приходилось загру-
жать их из Internet, сохранять на диске и запускать специальную программу воспроизведения.
В настоящее время мультимедийные файлы внедряются прямо на Web-страницы, и пользова-
тели могут просматривать их “на месте”, с помощью мультимедийных плейеров, таких как
Windows Media Player, RealPlayer и Apple QuickTime.
При использовании мультимедиа возникает несколько больше трудностей по сравнению
с графическими файлами. Многие пользователи не имеют нужных плейеров для просмотра
мультимедиа и не знают, где их можно приобрести. Использование самих плейеров также
может породить ряд проблем, начиная от сбоев и заканчивая необходимостью постоянного
обновления и рассылки зарегистрированным пользователям раздражающей электронной почты.
Отсутствие нужного мультимедийного плейера, незнание того, какая именно про-
(	1 грамма требуется для просмотра того или иного файла, а также процесс загрузки
и установки плейера являются источником раздражения пользователей. При исполь-
зовании мультимедийных файлов на своем Web-узле обязательно сообщите пользо-
вателям, какой плейер требуется для просмотра каждого файла, и разместите ссылку
на ресурс, с которого можно загрузить данную программу.
Быстродействие также является проблемой. Процесс ожидания загрузки короткого видео-
клипа, который может занять от одной до нескольких минут, тоже чрезвычайно раздражает.
Кроме того, во многих видеоклипах очень плохое качество звучания.
Однако правильно функционирующий мультимедийный файл как ничто другое оживит
Web-узел. Вспомните о чрезвычайной популярности формата MP3 для передачи музыки че-
рез Internet. Обладая практически тем же качеством, что и ЕМ-радио, МРЗ-файлы переверну-
ли представление о процессе использования музыки в Internet. (К сожалению, в настоящее
время большинство музыкальных записей в формате MP3 защищено авторскими правами, и их
нельзя бесплатно публиковать в Сети.)
Секрет формата MP3 заключается в широком применении технологии сжатая, пошоляю-
щей при небольших размерах файла добиться хорошего качества воспроизведения Дня ст
дания фильмов, которые воспроизводились бы с тем же качеством, что и па ц-нспн iciuiii, по
требуется разработать технологические средства сжатия нового поколения. В настоящее пре
мя можно ожидать прорыва фильмов и телепрограмм в Сеть, которые по своей важности сш
нут мощным конкурентом формата MP3. Сейчас наиболее распространенными являются га
кие плейеры мультимедийных файлов.
J Real Networks RealPlayer. Это достаточно хорошо работающий дополни
тельный модуль для воспроизведения аудио- и видеофайлов в реальном вре
мени. Для получения аудио- или видеоклипа посетителю Web-узла достаточно
щелкнуть на ведущей к нему ссылке. После этого выдерживается некоторая
пауза, а затем загружается первая часть файла и начинается его воспроизвсде
ние. Звук воспроизводится в реальном масштабе времени, а это означает, что
на жестком диске компьютера пользователя не хранятся большие файны
(использование потокового поступления данных также означает, что более
быстрое Internet-соединение дает звучание лучшего качества). Подробная пн
формация по этому вопросу приводится ниже, во врезке “Раз поток, два поток"
S Проигрыватель Windows Media. Компания Microsoft пытается вернуть себе
лидерство среди поставщиков мультимедийных проигрывателей, которое
сейчас принадлежит Real Networks, предлагая аналогичный продукт. Прош
рыватель Windows Media поддерживает большинство из форматов, характер
ных для RealPlayer, и поставляется вместе чуть ли не с каждым ПК. Однако
RealPlayer пока идет впереди, поскольку компания Real Networks сотруднича
ет с Apple, обеспечивая совместимость с форматом QuickTime.
S Apple QuickTime. Это мультимедийная технология от компании Apple, ставшая
промышленным стандартом редактирования и высококачественного военрон i
ведения видео на компьютерах. QuickTime VR— это “отпочковавшийся огро<
ток” QuickTime, позволяющий с высоким разрешением создавать панорамы
и объекты виртуальной реальности. Большая часть содержимого QuickTime н<
является потоковой. Перед началом воспроизведения пользователи должны до
ждаться загрузки части или всего файла. Это снижает оперативность, ио ин
дает большую гибкость пользователю и обеспечивает лучшее качество данных.
Проигрыватель QuickTime поставляется со многими компьютерами и под
держивает все мультимедийные форматы, в том числе анимацию, тук
QuickTime VR и видеоклипы QuickTime. Большая часть видеофайлов в Wei
представлена в формате файлов QuickTime. QuickTime легко использован, и.
Web-страницах без необходимости оплаты лицензионных или серверных со
глашений. Последние версии QuickTime поддерживают потоковые данные
поэтому вскоре следует ожидать увеличения количества потоковых данны*
в формате QuickTime.
У Macromedia ShockWave/Flash. Дополнительный модуль ShockWave но июля
ет воспроизводить в Web презентации и другие объекты, созданные в npoi рам
ме Macromedia Director. Научиться работать с программой Director несложно
но для того, чтобы использовать ее мошное средство ShockWave, обеспсчп
вающее передачу мультимедиа через Web, изучать всю программу не нужно
Flash — это простой формат передачи анимации на Web-странице, Koiopi.ii
в настоящее время становится все более популярным. Если вы являв! вы
пользователем программы Director или хотите им стать, или интсресускт!
Flash-технологиями, то быстренько отправляйтесь на Web-узел Macromedi
и ознакомьтесь с информацией о ShockWave и Flash.
Если вы хотите получить более подробную информацию об использовании мультимедиа
в Internet, начните с посещения следующих узлов:
www.real.com
www.microsoft.com
www.apple.com/quicktime
www. macromedia. com
Раз поток, два поток
Существуют два типа видеофайлов (имеются в виду файлы со звуком). Первые из них называются
потоковым видео. Потоковое видео во многом напоминает комбинацию телевидения и видео-
магнитофона, только с очень маленьким размером экрана. Через несколько секунд после щелчка на
кнопке Go (Запуск) начинается воспроизведение видео. Пользователь может сделать паузу, выполнить
“перемотку” назад или вперед. С воспроизведением потоковых видеофайлов у пользователей не
возникает никаких проблем, если, конечно, плейер установлен корректно. Пользователи надлежащего
программного обеспечения могут просто щелкнуть на ссылке, подождать несколько секунд, а потом
спокойно смотреть видеоклип.
Для воспроизведения потоковых видеофайлов необходимо, чтобы на Web-сервере было установлено
специальное программное обеспечение, позволяющее синхронизировать передачу и прием каждого
кадра видеофайла. Как правило, за приобретение этого программного обеспечения или аренду места
на сервере для поддержки потокового видео необходимо платить. Например, на момент написания этой
книги несложная версия потокового сервера Real Networks стоила около 2 000 долларов.
Второй тип — загружаемые видеофайлы, при использовании которых весь клип или его часть должен
быть загружен на компьютер пользователя, прежде чем он сможет смотреть видео. Загрузка таких
видеофайлов требует больше времени, однако воспроизведением проще управлять. Кроме того, на
Web-узел не нужно устанавливать специальное программное обеспечение. Однако вам придется
больше платить за хостинг, поскольку с вашего Web-узла будет идти многобайтовый поток данных даже
в том случае, если всего лишь несколько пользователей начнут просматривать видеоклипы.
Чрезвычайно высокая стоимость поддержки собственных потоковых видеофайлов вовсе не означает, что на
Web-страницах нельзя размещать видеоклипы. Можно просто задать ссылку на клипы других
владельцев! (Позаботьтесь о том, чтобы ваша ссылка не привела к возникновению проблемы, связанной
с тем, что кто-то посчитает именно вас владельцем клипа). В частности, особый интерес для
пользователей может представлять ссылка на какой-то перечень интересных видеоклипов. Разместив
краткую информацию о клипах, вы сэкономите своим посетителям довольно много времени.
добавление видеофайлов фофлшлпа
QuickTiHie
Существует большое количест во мультимедийных форматов, каждый из которых имеет свои
сильные и слабые стороны. Но ни один из них не является настолько распространенным и нс
поддерживается столь широко всевозможными инструментами создания Web-страниц, как
формат QuickTime. С помощью QuickTime на Web-страницу можно очень легко добавить мути,
гимедийные файлы, с которыми столь же просто будут работать посетители страницы. Ниже
перечислены элементы, необходимые для успешной публикации файлов формата QuickTime.
J Мультимедийное содержимое. Вам необходим мультимедийный файл фор
мата QuickTime, подлежащий размещению на Web-странице. Создавать фай
лы этого формата можно с помощью самых разных инструментов. Новичкам,
конечно, лучше работать с уже существующими файлами. Когда вы решите
создать собственный файл, поищите соответствующие инструменты на с цы
нице www. apple. com/quicktime.
J HTML-команды. Некоторые Web-инструменты, в частности программ.i
PageMill, поддерживают непосредственно внедрение содержимого QuickTime
Но если такого инструмента у вас нет, необходимо написать специальные
HTML-команды для внедрения HTML-содержимого. К счастью, эти команды
очень простые. Чуть ниже будет рассмотрен соответствующий пример.
J QuickTime и дополнительный модуль QuickTime. И вам, и посетителям ва
шей страницы необходима последняя версия QuickTime и прошрывателя
QuickTime. (В новые версии QuickTime также входит модуля QuickTime VR, ко-
торый позволяет создавать виртуальную реальность при работе с QuickTime.)
У одних пользователей уже может быть установлена последняя версия Quick
Time, а у других — нет. Чтобы помочь пользователям обновить ее, разместите
ссылку на страницу QuickTime (www. apple. com/quicktime).
QuickTime занимает много места! Если пользователям необходимо загрузить Quick-
Time из Web, их может озадачить просьба о загрузке файла объемом несколько мегабай
тов. Однако после этого открывается множество прекрасных возможностей. Просто
имейте в виду, что вам могут поступать вопросы и претензии, связанные с загрузкой.
Перед использованием QuickTime вам не нужно подписывать никакие соглашения или
выплачивать гонорары, что имеет место при работе с конкурирующими технологиями
С практической точки зрения работать с QuickTime так же просто, как и размещать GIF- или
JPEG-изображение на Web-странице. Если вы хотите просмотреть новые клипы QuickTime,
зайдите на страницу www. apple. com/quicktime/player /win.html.
Более подробная информация приводится на домашней странице QuickTime VR и угле
QuickTime по таким адресам:
www.apple.com/quicktime/qtvr
www.judyandrobert.com/quicktime/
Ниже описывается, как добавить фильм QuickTime на Web-страницу.
1.	Установите на своем компьютере QuickTime и дополнительный модуль QuickTime.
Для загрузки этих файлов зайдите на страницу программного обеспечения QuickTime
по адресу www. apple. com/quicktime.
2.	Создайте или получите фильм QuickTime — анимацию, звук, видео или VR.
С помощью поисковой машины найдите бесплатный клип QuickTime (введите f г.
QuickTime или бесплатный QuickTime) или поищите его на yuie
eosweb.larc.nasa.gov/EDDOCS/Teacher_Notes/erbe_video.html). la
кой клип вы сможете загрузить и использовать с минимальными ограничениями пни
вообще без них.
3.	Внедрите фильм па свою Web-страницу. (При работе с Netscape Composer щелк-
ните на вкладке <HTML Sources-, расположенной в нижней части страницы,
чтобы получить возможность вводить HTML-дескрипторы.)
Воспользуйтесь HTML-командой EMBED. Ее синтаксис очень прост, и при внедрении
файла file.mov, расположенного в той же папке, что и Web-страница, данная ко
манда будет выглядеть так:
<EMBED SRC="file.mov">