Пол редакцией 
В.Н. Печникова 


Создание 
Web-страниц и Web-сайтов 


ЩШ 

i //7/4
44I 

«Издательство Триумф» 
Москва 



УДК 004.738.52(075.4) 
ББК 32.973.202я78-1 
С54 

С54 Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие]/ 

под ред. В. Н. Печникова. — М.: Изд-во Триумф, 2006.— 464 с. : ил. + [1] CD. — 

(Серия «Современный самоучитель»). — ISBN 5-89392-143-7. 

I. Печников, В. Н., ред. 
Агентство CIP РГБ 

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

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

Вы станете настоящим Web-дизайнером, способным воплотить все свои творческие 
способности в виде блистательного Web-сайта! 

Посетите наш Интернет-магазин 
«Три ступеньки®»: www.3st.ru 
E-mail: post@triumph.ru 

ISBN 5-89392-143-7 ® ООО «Издательство ТРИУМФ», 2006 

© Обложка ООО «Издательство ТРИУМФ», 2006 

© Верстка и оформление ООО «Издательство ТРИУМФ», 2006 


Краткое содержание 


ГЛАВА 1. Web-странииа изнутри 8 

Краткий экскурс в язык HTML; создание первой Web-страницы; 
форматирование текста, вставка рисунков, таблиц, списков, гиперссылок, 
форм и фреймов. 

ГЛАВА 2. Размещение страниц в Интернете 47 
Размещаем свою Web-страницу на бесплатных серверах в Интернете. 

ГЛАВА 3. Графика для Web-страниц 68 
Форматы рисунков на Web-страницах; выбор оптимального формата 
графического изображения. 

ГЛАВА 4. Подготовка графики с помощью 
Adobe Photoshop и Adobe ImageReady 93 

Подготовка изображений к публикации на Web-страницах: расширение 
тонового диапазона, установка яркости, контрастности, резкости; 
ретуширование изображений; изменение размера изображений; сохранение 
изображений в оптимальном формате; текст в изображениях; создание 
анимационного баннера. 

ГЛАВА 5. Анимация на Web-странииах 234 
Форматы анимационных изображений и программы подготовки анимации. 

ГЛАВА 6. Создаем анимацию с помощью 
Adobe ImageReady 238 
Пошаговое создание анимационных баннеров и изображений. 

ГЛАВА 7. Создание Web-сайта 
с помощью Microsoft FrontPage 2003 252 
Создание макета Web-сайта. Включаем в Web-страницы текст, видео, 
формы, фреймы, счетчики. Проверяем и анализируем структуру сайта, 
просматриваем результаты и выгружаем в Web. 

ГЛАВА 8. Раскрутка вашего Web-сайта в Интернете 386 

Оптимизируем Web-сайт для его раскрутки. Регистрация сайта на поисковых 
машинах и в каталогах. Анализ посещаемости сайта. Обмен баннерами, 
регистрация сайта в баннерной сети и анализ статистики посещаемости. 

Приложение 1. Содержание компакт-диска 460 

Приложения 2 и 3 записаны в формате PDF на CD-ROM-диске. Чтобы прочитать 
приложения, установите программу Acrobat Reader, которая находится в папке 
Acrobat CD-ROM-диска. 

Приложение 2. Краткий справочник по HTML Pril HTML.pdf 

Приложение 3. Краткий справочник по CSS.. Pril CSS.pdf 


Содержание 


ГЛАВ А 1. Web-страница изнутри ........8 
Опыт №1. Смотрим устройство Web-страницы Э 
Опыт №2. Создаем первую Web-страницу 13 
Опыт №3. Задаем стили текста 16 
Опыт №4. Вставляем рисунок 24 
Опыт №5. Создаем список •. 26 
Опыт №6. Создаем форму 29 
Опыт №7. Вставляем гипертекстовые ссылки 32 
Опыт №8. Создаем таблицу 37 
Опыт №9. Создаем страницу с фреймами 42 

ГЛАВ А 2. Размещение страниц в Интернете 47 
Опыт №1. Создание адреса вашего сайта в Интернете 49 
Опыт №2. Размещение Web-страниц с помощью менеджера файлов 
бесплатной службы .3 
Опыт №3. Размещение Web-страниц с помощью Netscape Composer .6 
Опыт №4. Размещение Web-страниц по FTP-протоколу 60 
Опыт №5. Просмотр своих страниц в Интернете .7 
ГЛАВ А 3. Графика для Web-страниц 68 
Цифровые изображения 68 
Особенности Web-графики ' 70 
Графические форматы для Интернета 71 
Какой формат использовать? 74 
Возможности оптимизации 75 
Опыт №1. Вставляем графику в HTML-код 79 
Опыт №2. Графика большого размера 85 
Опыт №3. Графический фон 86 
Опыт №4. «Прозрачная» графика 90 
Графический текст 92 

ГЛАВ А 4. Подготовка графики с помощью 
Adobe Photoshop и Adobe ImageReady 93 
Опыт №1. Знакомство с рабочим окном программы 94 
Опыт №2. Создание нового рисунка 103 
Опыт №3. Рисуем геометрические фигуры 106 
Опыт №4. Удаление объектов и отмена действий 115 


Содержание 5_ 


Опыт №5. Начинаем изготовление баннера 118 
Опыт №6. Текст для баннера 123 
Опыт №7. Создаем новые слои 128 
Опыт №8. Работаем со слоями 137 
Опыт №9. Эффекты тени и выпуклости 141 
Опыт №10. «Живые» кнопки 147 
Опыт №11. Оптимизируем и сохраняем графику 154 
Опыт №12. Обрабатываем фото 165 
Опыт №13. Выполняем тоновую коррекцию 168 
Опыт №14. Повышаем резкость изображения 174 
Опыт №15. Комбинируем фотографии 176 
Опыт №16. Уменьшаем и обрезаем фото 185 
Опыт №17. Сохраняем фото для Web 188 
Опыт №18. Прозрачные изображения 191 
Опыт №19. Бесшовный фон 207 

Шероховатость 214 
Шлифованная плитка 215 
Облицовочная плитка 215 

Опыт №20. Разрезаем изображения и создаем изображения-карты 217 
Опыт №21. Создаем карту навигации ; 228 

ГЛАВА 5. Анимация на Web-страницах 234 

Структура файла GIF89a 235 
Использование GIF-анимации 236 

ГЛАВА 6. Создаем анимацию с помощью Adobe ImageReady 238 
Опыт №1. Знакомство с палитрой «Анимация» 238 
Опыт №2. Сменяющиеся кадры 241 
Опыт №3. Просмотр и настройка параметров «ролика» 243 
Опыт №4. «Бегущие», постепенно появляющиеся и исчезающие рисунки 245 
Опыт №5. Оптимизация и сохранение анимации ...248 

ГЛАВ А 7. Создание Web-сайта 
с помощью Microsoft FrontPage 2003 ..252 
Опыт №1. Знакомство с рабочими окнами программы 253 
Опыт №2. Создаем макет Web-сайта 264 
Опыт №3. Создаем текст и списки. Бегущая строка 275 


6 Создание Web-сайтоЕ 

Опыт №4. Добавляем страницы в макет сайта. 
Структура навигации и общие границы 287 
Опыт №5. Применяем тему для оформления страниц 295 
Опыт №6. Создаем таблицу 302 
Опыт №7. Вставляем рисунки и фото 307 
Опыт №8. Вставляем ссылки 32С 
Опыт №9. Создаем меняющиеся кнопки и динамические эффекты 326 
Опыт №10. Вставляем звук и видео 332 
Опыт №11. Создаем формы 338 
Опыт №12. Добавляем счетчик посещений, поиск по сайту 
и другие компоненты 348 
Опыт №13. Отображаем на странице информацию из базы данных 353 
Опыт №14. Создаем страницу с фреймами 361 
Опыт №15. Использование переменных и формирование оглавления сайта 368 
Опыт №16. Проверяем ссылки и орфографию, анализируем структуру сайта 372 
Опыт №17. Просматриваем Web-сайт в браузере 378 
Опыт №18. Закачиваем Web-сайт на Web-сервер 380 

ГЛАВА 8. Раскрутка вашего Web-сайта в Интернете 386 

Опыт №1. Регистрация в поисковых системах и каталогах 387 

Подготовка к регистрации в поисковой системе 389 
Создаем файл robots.txt 393 
Регистрация сайта в поисковой системе 394 
Регистрация Web-сайта в каталогах 398 

Опыт №2. Регистрация в рейтингах 400 

Установка счетчика 406 

Опыт №3. Анализируем посещаемость сайта 409 
Опыт №4. Баннерный обмен 414 

Создание эффективного баннера 416 
Использовать ли баннеры вообще? 419 
Баннерообменные сети ...420 
Регистрация в баннерной службе 423 
Размещение кода баннеров на страницах сайта 425 
Входим в раздел участника баннерной сети ; 427 
Добавление вашего баннера в систему 428 
Просмотр статистики по баннеру 431 
Другие настройки баннерной системы 433 
Статистика Web-страниц 435 

Опыт №5. Создаем гостевую книгу, форум и чат 435 

Создаем гостевую книгу 437 


Содержание 


Читаем и редактируем гостевую книгу , 442 
Создаем форум 446 
Администрируем форум 451 
Создаем чат 453 

Опыт №6. Делаем сайт популярным 458 

Приложение 1. Содержание компакт-лиска 460 

Приложения 2 и 3 записаны в формате PDF на CD-ROM-лиске. Чтобы прочитать 
приложения, установите программу Acrobat Reader, которая находится в папке 
Acrobat CD-ROM-диска. 

Приложение 2. Краткий справочник по HTML Pril HTML.pdf 

Приложение 3. Краткий справочник по CSS Pril CSS.pdf 


ГЛАВА 1. 

Web-страница изнутри 

Как известно, основной объем информации, доступной в сети Интернет, размещается 
во 
«всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной 
гигантской библиотеке. В этой библиотеке информация представлена в виде 
связанных 
между собой документов, которые называются Web-страницами. Каждая Web-страницд 
может содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие 
страницы 
могут размещаться на компьютерах в любой части света. При подключении к 
WWW вы получаете равный доступ к сведениям, разбросанным по всему миру. 
Собрание 
страниц, объединенных некоторой общей темой и помещенных, как правило, на одном 

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

Просмотреть любую Web-страницу можно с помощью специальных программ - браузеров,
 
наиболее популярные из которых - Internet Explorer, Opera, Mozilla и Netscape. 
На Web-страницах обычно, кроме основного текста, всегда присутствуют выделенные 

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

рассматриваемой или родственной теме, даже если страница помещена на сайте в 
другой 
части планеты. 

Во «всемирной паутине» вы можете найти огромный массив данных - биржевые 
котировки 
и предложения работы, электронные доски объявлений, анонсы новых фильмов, 
литературные, экономические и политические обзоры, игры и многое другое. 
Но WWW - это не только сведения от организаций, компаний или фирм. Поскольку 
информацию 
в Web очень легко опубликовать, многие пользователи создают свои личные 
«домашние» страницы, где помещают информацию о себе, своих интересах, своих 
друзьях с фотографиями и другими сведениями. 

Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, 
достаточно 
поместить файл с этим документом на сервер, постоянно подключенный к Интернету. 

Сервер должен «уметь» общаться с другими серверами с помощью специального 
протокола передачи гипертекста HTTP - HyperText Transfer Protocol. Множество 
таких 
серверов и образует «всемирную паутину» - World Wide Web. 

Разработку Web-документов, однако, можно проводить и на компьютере, не имеющем 
выхода в Интернет. Создать собственную Web-страницу совсем не сложно. Это можно 

сделать или «вручную» или с помощью специальной программы для создания 
Webстраниц. 
О том, как использовать программы, мы поговорим в следующих главах книги, 
а сейчас разберемся с «внутренним устройством» Web-документов и создадим 
собственные 
страницы «вручную». 


Web-страница изнутри 

JV&1. Смотрим устройство Web-страницы 


Чтобы проще было понять, как «устроена» Web-страница, загрузим какой-нибудь 
документ 
из WWW и рассмотрим его строение. Загрузим в качестве примера главную страницу 
сайта www.3st.ru 

>• Установите связь с вашим провайдером Интернета. 

> Загрузите в браузер главную страницу сайта www.3st.ru (Рис. l.l). 

адрес; |;Й Мр:11пш1.3st.ru/ 

ШЕЛКНИ ЗДЕСЬ , чтобы купить км> 
в розницу ПО UEHC НИЖЕ ОПТОВО 

КНИГИ ОТ ИЗДАТЕЛЕЙ 

Телефон для оптовых покупателей (095) 720-07-65 

ff (^ 1JEE S3 

[самоучитель работы на компьютере 

Автор(ы): А. Ю. Гаевский 

Бестселлер -В книге изложены основы работы на 
персональном компьютере. Подробно и доступно описана 
«линейка» операционных систем Windows 9S/98/ME/2000, 

подробнее ... 

Цена 157Р. | 544 стр, | Обложка 

[интернет с нуля! Книга + Видеокурс 

Рис. 1.1. Главная страница сайта www.3st.ru 

> Прервите связь с провайдером. 

Когда вы загружаете из WWW любой документ, то его текст в окне вашего браузера 
отображается 
в хорошо отформатированном, удобном для просмотра виде. Это значит, что 
Web-страницы представляют собой не простой текст, а содержат также некоторую 
вспомогательную 
информацию для управления представлением документа в окне вашего 
браузера. Поскольку при создании документа не известно, на компьютере какого 
типа 
пользователь будет его просматривать, то Web-страницы не могут готовиться и 
храниться 
в формате, разработанном для конкретной компьютерной платформы, например,в 
формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий 
на 
компьютере любого типа, видел документ, отформатированный надлежащим образом, 
используется специально разработанный для этого язык HTML. Что же представляет 
собой язык HTML? 

> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид 
• 
Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом 
этой страницы на языке HTML (Рис. 1.2). 


Создание Web-сайтов 

Файл Правка Формат Вия Справка 

<!— obsolete —> 

<!— # ! include File - "./ADO.Inc.asp" —> 

<scr1pt src-"script. js"x/script> 

ODOCTYPE HTML PUBLIC "-//V3C//DTD HTML 4.01 Tr ansiti onal//EM"> 
<html><!— InstanceBegin template-"Templates/template3st.dwt" 
codeoutsideHTMLlsLocked-"false"s 
<head> 

! — InstanceBeg1nEd1table name-"doct1tle" —> 
title>KHM*Hu(i интернет-магазин три ступены<и<ЛЮе> 
<!— InstanceEndEditabie —> 


<meta http-equ1v-"content-Type" content-"text/html; charset-windows-1251"> 
<!— InstanceBeginEditable name-"head" —> 


<meta name-"vs_targetschema" content-"http://schemas.mi crosoft.
com/1nteTMsense/1e5">


<script Ianguage-"vbscr1pt"> 
sub Document_onReadyStateChangeO 


I f document.readystate - "complete" Then 
w - 400 
h - 200 
1 - (window, screen, width - w) / 2 
t - (window.screen.height - n) / 2 


window.open "popup.asp , "„blank", 'left-" & 1& "px, top-" Л t & "pxl 
End If 

End sub 
</script> 


Рис. 1.2. Код "Web-страницы наязыке HTML 

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

HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собог 

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

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

Язык HTML существует в нескольких вариантах, или спецификациях. Как и версии 
программных 
продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая 
спецификация представляет собой расширение и дополнение предыдущей. В этой 
книге 
мы будем использовать конструкции последней спецификации HTML 4.0, которые 
поддерживаются 
последними версиями большинства распространенных браузеров. 


Web-страница изнутри

Как видите, документ в окне с кодом HTML - это текстовый документ специального 
формата. Все файлы этого формата имеют расширение .html или .htm. В документе 
HTML обычный текст сочетается с элементами разметки, заключенными в угловые 
скобки < и >, например, <html>, <head>, <title>, </title>. Такие элементы 
разметки 
называются тегами. Теги бывают одиночными, открывающими и закрывающими и 
состоят 
из следующих друг за другом в определенном порядке элементов: 

• левой угловой скобки <; 
• необязательного символа слэш /, который означает, что тег является конечным 
тегом, закрывающим некоторую структуру, например, </title>. В этом смысле 
можно читать символ / как конец некоторого элемента разметки, например, 
строки или абзаца; 
• имени тега, например, html; 
• необязательных атрибутов. Тег может быть без атрибутов или сопровождаться 
одним 
или несколькими атрибутами, например, align="center"; 
• правой угловой скобки >. 
Таким образом, открывающий тег <html>, стоящий в начале документа HTML и 
означающий 
его начало, состоит из имени html и двух угловых скобок < >, а тег </html>, 
находящийся в конце Web-документа, кроме указанных элементов содержит также 
символ слэш /, означающий закрывающий тег и указывающий на конец документа. 
Тег <script language=Mvbscript"> означает начало кода встроенной в документ 
программы-сценария. Этот тег содержит, кроме имени script, атрибут language со 
значением "vbscript", означающий, что сценарий написан на языке vbscript. 

В тегах могут использоваться только символы латинского алфавита, а в значениях 
атрибутов 
- любые символы. Если в качестве значений атрибута используются, например, 
символы кириллицы, то они должны быть заключены в кавычки, например, 
nama="Раздел 1". 

Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и 
<Head> 
эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре. 

Большинство тегов являются парными: за открывающим тегом следует 
соответствующий 
ему закрывающий тег, а между ними содержится текст или другие теги, например: 
<Ъз.Ъ1е>Книжный Интернет-магазин Три Ступеньки</Ь1ъ1е> 

В таких случаях два тега и часть документа, заключенная между ними, образуют 
блок, 
называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными 
и для них закрывающий тег не применяется. Такие теги сами по себе являются 
элементами 
HTML. 

Большинство тегов могут иметь один или несколько атрибутов - параметров, дающих 

дополнительную информацию о том, как браузер должен обрабатывать текущий тег. 
Однако 
атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, align,
 
знака равенства = и значения, которое задается строкой символов, например, 
"center": 
align=»"center". Значения атрибутов обычно заключаются в кавычки. Однако если 
эти 


 Создание Web-сайтов 

значения используют только символы латинского алфавита, цифры и дефисы, то 
кавыч 
ки можно опустить, например: align=center. 

Каждый HTML-документ имеет определенную структуру, которая выглядит следующим 
образом: 

<html> 


<head> 


• • • • * 


</head> 


<body> 


</body> 


</html> 


Структура HTML-документа содержит следующие обязательные элементы: 

• теги <html> и </html>, которые отмечают начало и конец документа; 
*^ заголовок, ограниченный тегами <head> и </head>; 

^ тело, ограниченное тегами <body>... </body>. 

В заголовке, ограниченном тегами <head> и </head>, с помощью тегов <title>. 
. .</title> определяется название документа, которое должно описывать его 
содержимое и обычно содержит не более 5-6 слов. Это название отображается 
браузера 
ми в строке заголовка рабочего окна программы, а роботы, составляющие индексы 
для 
поисковых систем, идентифицируют документ, используя его название. 

Кроме элемента <title>.. .</title>, заголовок может содержать элементы <meta> 
...</meta>,например, <meta http-equiv="Content-Type" content="text/html; 
charset=windows-l25l">, для указания информации о документе. Открывающий тег 
<meta> включает пары имя=значение, описывающие свойства документа, например, 
тип 
документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные 
используются 
также поисковыми серверами при индексации документов. 

Файл HTML может содержать комментарии, дающие пояснения человеку, читающему 
HTML-код. Комментарии начинаются с четырехсимвольной последовательности <! — и 
завершаются трехсимвольной последовательностью —>, например: <!—Главная 
страница -->. Комментарии игнорируются браузером и не влияют на представление 
документа на экране. Комментарии желательно использовать в редких случаях, 
когда это 
необходимо, например, для объяснения кода HTML. Следует помнить, что они 
являются 
частью файла и передаются по сети вместе с документом. Большое количество 
комментариев 
может значительно увеличить размер файла и, соответственно, время его загрузки, 

что нежелательно. 

Изучая язык HTML, очень полезно просматривать и анализировать HTML-код 
Webстраниц, 
созданных опытными мастерами. Это помогает быстрее освоить и понять принципы 
и структуру языка. 

> Закройте окно с кодом HTML, нажав кнопку [х] в правом верхнем его углу. 


Web-страница изнутри

>• Закройте также программу-браузер. 

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

€ШУГ/Ш J№2. Создаем первую Web-страницу 

Для создания Web-документов нам понадобится любой браузер - Internet Explorer, 
Opera, 
Firefox или Netscape, а лучше все четыре, так как многие элементы HTML 
по-разному 
отображаются в разных программах просмотра, и весьма желательно контролировать 
эту 
разницу. Браузер Internet Explorer входит в состав операционной системы Windows,
 а последние 
бесплатные версии браузеров Opera, Firefox и Netscape вы найдете в папке 
\Soft\Browsers компакт-диска, прилагаемого к этой книге. Их также можно скачать 
из 
Интернета с сайтов www.opera.com, www.firefox.com и www.netscape.com. 

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

из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы 
доступными 
всему миру. 

В качестве примера подготовим Web-страницы некой фирмы. Назовем ее «Компания 
ГЕОТОН», допустим, что она работает в области автоматизированных систем 
управления. Цель сайта — рассказать миру о компании, сфере ее деятельности, 
найти 
партнеров и заказчиков. 

Для файлов нашего сайта нужна отдельная папка. 

> Создайте папку с именем Web на любом жестком диске вашего компьютера. 

Теперь запустим программу Блокнот (Notepad) и приступим к работе. 

>• Откройте программу Блокнот (Notepad), нажав кнопку Пуск (Start) на Панели 
задач 
(Taskbar) и выбрав из появившегося меню команду Программы • Стандартные • 
Блокнот (Programs • Accessories • Notepad). 

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


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


сторонних символов форматирования. 

Сначала введем в окне программы Блокнот (Notepad) теги, определяющие структуру 
лю


бого HTML-документа. Напомним, что в HTML-коде допускается использовать любой 

регистр символов - верхний или нижний. 

> Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме 
закрывающего тега </title>, в новой строке. 

Для ввода парных тегов вы можете использовать операции копирования и вставки 
через 

буфер обмена Windows с последующим добавлением символа слэш /. 


Создание Web-сайтов 

<html> 


<head> 


<titlex/title> 


</head> 


<body> 


</body> 


</html> 


Напомним, что первый <html> и последний </html> теги означают соответственно 
начало 
и конец документа, элемент <head>.. .</head> определяет заголовок Webстраницы, 
элемент <body>.. .</body> - тело документа, а в элементе <title> 
</title> мы сейчас укажем название Web-страницы. 

>• Между открывающим <title> и закрывающим </title> тегами вставьте название 
документа - Компания ГЕОТОН. Этот элемент должен выглядеть следующим 
образом: 

<ЫЬ1е>Комлания rEOTOH</title> 


Напомним, что название Web-страницы должно быть коротким и в максимальной 
степени 
отображать ее содержание. 

Наша следующая задача - вставить в тело документа между тегами <body>.. .
</body> 
короткий текст-приветствие посетителям Web-страницы. 

>• Вставьте пустую строку между тегами <body> и </body> и введите в ней 
следующий 
текст: 

Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей 
деятельности, о программных продуктах нашей компании и об оборудовании, 
которое мы производим 

Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это 
выполняется 
с помощью атрибутов bgcolor и text открывающего тега <body>. Для определения 
цвета как значения атрибутов существует два варианта: 

• словесное указание имени цвета, например, white (белый). В языке HTML 
предусмотрено 
шестнадцать таких имен; 
i/ цифровое обозначение в шестнадцатеричной записи, например, n#ffffff " - 
белый, 
которое указывает, каким образом цвет формируется из основных цветов - красного,
 
зеленого и синего. 

Конечно, словесное указание цвета более удобно и понятно. С другой стороны, 
числовые 
обозначения дают больше возможностей, так как позволяют указать практически 
любой 
из 16 777 215 оттенков, тогда как словесные обозначения ограничены только 
шестнадцатью 
цветами. 

Полный перечень цветовых имен и их цифровых эквивалентов приведен в Приложении 
2 
«Краткий справочник по HTML» компакт-диска. Здесь же перечислим только 
некоторые 
цветовые имена: blac k (черный), gray (серый), red (красный), green (зеленый), 
aqua 
(голубой). 


Web-страница изнутри 15 

Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а 
для 
текста - желтый (yellow). 

>• Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yellow. Этот 
тег должен принять вид: 

<body bgcolor=blue text=yellow> 

Ваш текстовый файл должен выглядеть примерно так, как на Рис. 1.3. 

Eile Edit Fflrmet fcjelp 

ы

<head> 
<1Ше>Компания ГЕОТОН<ЛШе> 
</head> 
<body bgcolor=blue text=yellowj» 
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей 
деятельности, о программных продуктах нашей компании и об оборудовании, которое 

мы производим 
</body> 
</html> 


в 

Рис. 1.3. Код HTML первой Web-страницы в окне программы Блокнот (Notepad) 

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

Теперь документ следует сохранить. 

> В окне программы Блокнот (Notepad) выберите команду меню Файл • Сохранить 
(File • Save). На экране появится диалог Сохранение (Save As). 

>• Откройте созданную ранее папку Web, в которой должны сохраняться все файлы 
сайта. 

> В поле ввода Имя файла (File name) введите geoton.html - так мы назовем этот 
файл. 

Обратите внимание: вы обязательно должны указать расширение имени файла .html 
или 
.htm, чтобы браузер смог его открыть. 

v Нажмите кнопку Сохранить (Save). Диалог Сохранение (Save As) закроется. Файл 
будет сохранен в указанной папке, и его имя появится в заголовке окна программы 

Блокнот (Notepad). 

Теперь можно просмотреть результаты нашей работы. 

Не закрывая, сверните окно программы Блокнот (Notepad), нажав кнопку | 

| в правом 

верхнем его углу. 

Откройте с помощью программы Проводник (Windows Explorer) папку Web, в которой 
вы сохранили файл geoton.html, и дважды щелкните мышью на его значке. Будет 
запущен браузер, установленный по умолчанию, и в его окне откроется документ 
geoton.html (Рис. 1.4). 


Создание Web-сайтов 

••Back » * » © El <S I QSearch 

Address |f l C:\Wab\Gaolon.hlml 

Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей 
деятельности, о программны* продуктах нашей компании и об оборудовании, которое 
Щ 
мы производим 

. а 

В Done ЩМ у Computer 

Рис. 1.4. Текст Web-страницы в окне браузера 

Как видите, в заголовке окна браузера указывается название документа, которое 
мы ввели 
в элементе <titlex/title>, а цвет фона и текста страницы - такие, как указаны в 

теге <body>. Текст отображается в одном абзаце и выровнен влево. 

Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем 
на 
рисунке. В таком случае выберите команду меню Вид • Размер шрифта • Средний 
(View • Text Size • Medium) в браузере Internet Explorer, чтобы установить 
средний размер 
шрифта. 

Следует иметь в виду, что разные браузеры могут по-разному отображать 
содержимое одного и того же HTML-файла. Поэтому при создании 
Web-страниц желательно всегда просматривать результат во всех 
наиболее популярных браузерах -Internet Explorer, Opera, Mozilla u Net-
scape. В таком случае вы будете уверены, что посетитель вашего сайта 
увидит именно то, что вы хотите ему показать. 

> Просмотрите созданный файл в другом браузере. На этом этапе работы отличия 
будут 
незаметны. 

>- Не закрывая, сверните окна браузеров, воспользовавшись кнопкой [Г] в правом 
верхнем 
углу каждого из них. 

Так как в элементе <bodyx/body> мы ввели текст без разбивки на абзацы, то в 
браузере 
он отображается в виде одного абзаца и выровнен влево. Теперь следует придать 
тексту 
более наглядный вид. 

Jmvr/m JV&3. Залаем стили текста 

Чтобы наша Web-страница выглядела более привлекательно, разделим текст на 
абзацы 
и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, 
пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами,
 
соответствующими уровню, например, <hlx/hl> - заголовок раздела первого уровня, 

a <h6x/h6> - заголовок раздела шестого уровня. От нормального текста заголовки 
отличаются размером и толщиной букв. Заголовок первого уровня Ы отображается 
обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - 
очень 
мелким. 


Web-страница изнутри 17 

Не следует путать заголовки разделов документа с рассмотренным ранее заголовком 
документа, 
определяемым элементом <headx/head>. 

В качестве заголовка текста используем первое предложение - Добро пожаловать на 

страничку компании ГЕОТОН! Для этого достаточно ограничить его тегами <Ы> и 
</М>. 

Окно программы Блокнот (Notepad) с открытым файлом geoton.html свернуто, и его 
кнопка находится на Панели задач (Taskbar). 

v Нажмите кнопку Блокнот (Notepad) на Панели задач (Taskbar), чтобы 
восстановить 
окно текстового редактора. 

>• Вставьте в текст файла geoton.html теги <hl> и </hl> так, чтобы они 
ограничивали 
первое предложение текста, и этот фрагмент кода принял следующий вид: 

<п1>Добро пожаловать на страничку компании ГЕОТОН!</hl> 

Просмотрим полученный результат. 

>• Сохраните файл, выбрав команду меню программы Блокнот (Notepad) Файл • 
Сохранить 
(File • Save). 

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

> Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar). 

> Нажмите клавишу [FSJ ИЛИ кнопку Ja_ - Обновить (Refresh) на панели 
инструментов 

рабочего окна программы Internet Explorer. Файл geoton.html будет перезагружен, 
и 
вы увидите в окне браузера, как выглядит заголовок первого уровня (Рис. 1.5). 

ffl | «USenrch SlFavonle3 OHistory 
| Address |Q C:\Web\GBOton.hlnnl Tj j <»Go |] Links 
Добро пожаловать на страничку ь. 
компании ГЕОТОН! 

Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и 

об оборудовании, которое мы производим 

© Done ;||3 My Computer 

Рис. 1.5. Заголовок первого уровня 

> Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в 
тегах 
номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и 
обновлять изображение в окне браузера. 

> Когда вы закончите эксперименты, снова восстановите в файле geoton.html теги 


Создание Web-сайтов 

Используя шесть уровней заголовков, которые предоставляет в ваше 
распоряжение язык HTML, можно создать легко читаемый документ с 
интуитивно ясной структурой. Помните, что ваш документ всегда будет 
читаться значительно лучше, если в нем будет четкое разделение 
на разделы и подразделы. 

По умолчанию заголовок выравнивается по левому краю страницы. Но его можно 
также 
выровнять по правому краю или центрировать. Для правостороннего выравнивания в 
теге <hl> используется атрибут align=right, а для центрирования - align=center. 

Допускается также явное указание левостороннего выравнивания - align=lef t. 

>• Добавьте в тег <Ы> атрибут align=center, чтобы центрировать заголовок. Этот 
элемент должен принять следующий вид: 

<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</hl> 

Результат будет выглядеть примерно так, как на Рис. 1.6. 

«-Back » •* " & @ !3 Q Search Я Favorites О History 

Добро пожаловать на страничку 
компании ГЕОТОН! 

Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании н 

об оборудовании, которое мы производим 

В Done ЩМуСотрШег 

Рис. 1.6. Заголовок центрирован 

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

Теперь займемся остальным текстом. Увеличим его размер и оформим текст 
полужирным 
курсивным начертанием. Для установки полужирного начертания используются 
парные теги <Ьх/Ь>. 

>- Вставьте в файле geoton.html открывающий <Ь> и закрывающий </Ь> теги так, 
чтобы 
они ограничили текст Здесь вы узнаете... Этот элемент должен принять 
следующий вид: 

<Ь>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей 
компании и об оборудовании, которое мы производим</Ь> 

> Просмотрите результат в браузере (Рис. 1.7). 


Web-страница изнутри 

Edit yiew Favorites lools tjjelp 
| »Back '*'Э В fl ^Search Si Favorites <3>Himory | &-& В ~ 


I Address |flCAWeb\Geolon.html Щ <»Go |] links 

Добро пожаловать на страничку 
компании ГЕОТОН! 

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

Щму Computer 

Рис. 1.7. Полужирное начертание текста 

Курсивное начертание устанавливается с помощью тегов <1></х>. 

> Вставьте в исходный код HTML тег <i> и </i> так, чтобы отредактированный 
элемент принял следующий вид: 

<Ьхх>Здесь Вы узнаете о нашей деятельности, о программных продуктах 
нашей компании и об оборудовании, которое мы производим</1х/Ь> 

Элементы разметки могут быть вложенными, как в данной структуре, где элемент 
<i>.. .</i> вложен в элемент <Ь>.. .</Ь>. Современные браузеры способны 
правильно 
обрабатывать вложенные теги. Поэтому вам необходимо следить за тем, чтобы не 
нарушался порядок вложения. Работа браузера окажется затрудненной, если 
вложенность 
будет нарушена. Например, такая запись будет неправильной: <bxi>.. . 
</Ь></1>. Соблюдение вложенности - очень важная часть общей культуры написания 
HTML-кода. 

С помощью пары тегов <ux/u > можно установить подчеркнутое начертание 
текстового 
фрагмента, ограниченного данными тегами, а с помощью пары тегов <ttx/tt > - 
отобразить 
текст телетайпным шрифтом. 

После того, как вы просмотрите полученный результат (Рис. 1.8), увеличим размер 

шрифта текста. Это можно сделать разными способами. 

«•Воск » •• - О ® <Я I <tS»«tch 3iFavorite» QHistory | $j- & Щ• 

Address в C:\Web\Geolon html 

Добро пожаловать на страничку 
компании ГЕОТОН! 

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

Й Done ~ Щ 

Рис. 1.8. Курсивное полужирное начертание текста 

Теги <Ыя></Ыд> увеличивают размер шрифта текста, заключенного между ними. 

>• Добавьте в начало и конец вышеуказанного фрагмента кода соответственно теги 
<Ыд> и </Ыд> так, чтобы элемент принял следующий вид: 


20 Создание Web-сайтоп 

<bigxbxi>3flecb Вы узнаете о нашей деятельности, о программных продуктах 
нашей компании и об оборудовании, которое мы проиЗводим</1х/Ьх/Ыд> 

Результат будет примерно таким, как на Рис. 1.9. 

I-Bock » >» •» О В <3| ©Search BlFevarite» QHHIoiy [ <&•* <S Ш 

Address |ф C:\Web\Geoton.htmi j t»Go [j Links 

Добро пожаловать на страничку 
компании ГЕОТОН! 

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

^ $ My Computer 

Рис. 1.9. Размер шрифта текста увеличен с помощью тега <Ыд> 

С помощью тегов <small></small> вы можете уменьшить размер шрифта текста по 
сравнению с исходным. 

Другой способ указания размера шрифта - с помощью тегов <fontx/font> с 
атрибутом 
size. В качестве значений этого атрибута используются целые числа от 1 до 7. 
Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 
максимальному. 


>• Используя вместо тегов <bigx/big> теги вида <font size=lx/font>, просмотрит? 

как изменяется размер шрифта текста при разных значениях атрибута size - от 1 
до 7. 

В качестве значения атрибута size можно также использовать числа от 1 до 7 со 
знаком 

+ (плюс) или - (минус). В этом случае размер шрифта соответственно 
увеличивается или 
уменьшается, по сравнению с исходным, например, теги <font size=+lx/font> 
увеличат 
размер шрифта, по сравнению с текущим, на один уровень. Проверьте. 
>• Установите 5 в качестве значения атрибута size для рассматриваемого 
фрагмента 
текста: <font size=5x/font>. HTML-код этого фрагмента должен быть таким: 

<.ont size=5xbxi>3flecb Вы узнаете о нашей деятельности, о программных 
продуктах нашей компании и об оборудовании, которое мы производим< 
/ i х / bx / f ont > 

В тегах <fontx/font> может использоваться также атрибут color для указания 
цвета 
шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и 
для рассмотренных 
ранее атрибутов, описывающих цвет фона и текста документа. Вы найдете 
их в «Кратком справочнике по HTML» в Приложении 2 компакт-диска. 

По умолчанию абзац с текстом Здесь Вы узнаете... выровнен влево. Центрируем его 

по горизонтали с помощью тегов <centerx/center>. Вы можете также выровнять 
абзац по правому краю страницы с помощью тегов <rightx/right> или по левому -с 
помощью тегов <lef tx/lef t>. 

> Вставьте теги <centerx/center>, ограничив ими указанный абзац так, чтобы код 
HTML принял вид как на Рис. 1.10. 


Web-страница изнутри 

ЕНв Edit Format Цв!р 

<html> 
<head> 
«ЧШеЖомпания ГЕОТОН<ЛШе> 
</head> 
<body bgcolor^blue text=yellow> 
«hi align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы> 
<centerxfont size=5xbxi>3flecb Вы узнаете о нашей деятельности, о программных 
продуктах нашей компании и об оборудовании, которое мы 
npoH3BOfliiM<ixb></fontxcenter>] 
</body> 


Рис. 1.10. Код HTML после изменения размера шрифта текста и центрирования 

В окне браузера документ будет выглядеть примерно, как на Рис. 1.11. 

ЛУи 

Eile Edit yiew Favorites Tools Help 
4-Back - •» -О ЕЭ Д | Qsaarch | Ш Favorites QtHistory | %» Ш 
Ajjdress |f i C:\Web\Geoton.h1ml 


Добро пожаловать на страничку 
компании ГЕОТОН! 

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

Й Done Д My Computer 

Рис. 1.11. Вид документа после стилевого оформления 

Обратите внимание, что для центрирования абзаца мы использовали теги <сепterx/
center>, в отличие от атрибута align=center, который использован нами в 
тегах <hlx/hl>. 

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

<dfnx/dfn> - применяется для определения слова. Текст обычно выводится курсивом.
 

<emx/em> - для выделения слов и усиления. Отображается курсивом. 

<citex/cite > - для выделения названий книг, фильмов, спектаклей и т.д. 
Выводится 
курсивом. 


Создание Web-сайтов 

<codex/code> - для фрагментов кода программ. Показывается на экране шрифтом 
фиксированной ширины. 

<kbdx/kbd> - используется для текста, который пользователь вводит с клавиатуры. 

В разных браузерах может отображаться разными шрифтами. 

<sampx/8amp> - служит для отображения сообщений программ. Выводится шрифтом 
фиксированной ширины. 

<strongx/strong> - для особо важных фрагментов. Обычно выделяется полужирным 
начертанием. 

<varx/var> - используется для указания, что часть текста или слово является 
символьной 
переменной, т.е. текстом, который может быть заменен различными выражениями. 
Отображается курсивом. 

Спецификация HTML 4.0 предлагает более прогрессивный способ указания стилей 
текста 
и других элементов - с помощью специального языка каскадных таблиц стилей CSS 
(Cascading Style Sheets). Таблицы стилей - это большое достижение в области 
Webдизайна, 
расширяющее возможности улучшения внешнего вида страниц. Таблицы стилей 
упрощают определение интервалов между строками, отступов, цветов, используемых 
для текста и фона, размера и стиля шрифтов и т.д. Стиль большинства элементов 
HTML 
может описываться с помощью атрибута style, который располагается внутри 
открывающего 
тега элемента. В качестве значения атрибута style используются пары види 
«свойство: значение». Например, во фрагменте кода, описывающего заголовок 
раздела, 
<hl style="color: Ыие"> атрибут etyle=ncolor: blue" определяет, что свойство 
color (цвет) имеет значение blue (синий), т.е. текст заголовка первого уровня 
должен 
отображаться синим цветом. 

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


фрагмента, который начинается словами Здесь Вы узнаете... 

Для указания толщины шрифта используется свойство font-weight со значениями 
lighter (тонкий), bold (полужирный), bolder (жирный), например, 
style="fontweight: 
bold". 

Для определения курсивного начертания применяется свойство font-style со 
значением 
italic. Поэтому, чтобы придать тексту полужирное курсивное начертание, следует 
атрибут style определить так: style=nfont-weight: bold; font-style: italic". 
Обратите внимание: свойства могут располагаться в любом порядке и обязательно 
должны 
разделяться точкой с запятой. 

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

Относительные величины - это проценты, а в качестве абсолютных величин 
используются 
пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). Например: 

style="font-sizes 200%" 

style="font-size: 16pt" 

style="font-size: lOOpx" 


Web-страница изнутри 

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

Для определения способа выравнивания текста по горизонтали используется 
свойство 
text-align со значениями left (влево), right (вправо), center (по центру), 
justify 
(по ширине). Таким образом, чтобы указать, что текст Здесь Вы узнаете... должен 
быть 
оформлен полужирным курсивным начертанием с размером 150% от исходного и 
выровнен 
по центру, следует его стиль определить следующим образом: 

style="font-weight: bold; font-style: italic; font-size: 150%; text-

align: center" 

Этот атрибут мы применим в тегах <р></р>, которые позволяют представить текст в 


виде отдельного абзаца. 

>• Отредактируйте элемент HTML, включающий текст Здесь вы узнаете..., удалив 
теги <centerx/center>, <font size=5x/font>, <Ьх/Ь>, <ix/i> и вставив 
теги <р> и </р> с атрибутом style так, чтобы этот элемент принял следующий вид: 


<р style»"font-weight: bold; font-style: italic; font-size: 150%; 
text-align: center">3десь Вы узнаете о нашей деятельности, о программных 
продуктах нашей компании и об оборудовании, которое мы производим*: 
/р> 

Код HTML в файле geoton.html должен иметь вид как на Рис. 1.12,а результат в 
окне 

браузера практически не будет отличаться от приведенного на Рис. 1.11. 

Edit Format tjelp 

<hhnl> 
<head> 
<Ш1е>Компания ГЕОТОН<ЛШе> 
</head> 
<body bgcolor=blue text=yellow> 
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы> 
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: 
сеп1ег">3десь 
Вы узнаете о нашей деятельности, о программных продуктах нашей компаниии 
об оборудовании, которое мы производим</р> 
</body> 
</html>| 


В 

Рис. 1.12. КодHTML после применения языка каскадных таблиц стилей 

Как видите, язык HTML позволяет использовать разные способы стилевого оформле


ния. Вместе с тем, применение языка каскадных таблиц стилей CSS является более 

предпочтительным. 

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


Создание Web-сайтоз 

Это делается с помощью атрибута style, используемого с большинством стандартных 

тегов HTML. Но есть и другие варианты использования CSS. 

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

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

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

свойства стиля, описанного вами. Удобно, не правда ли? 

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

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

Описание основных элементов языка каскадных таблиц стилей CSS вы найдете в 
Приложении 
3 компакт-диска. 

В настоящее время язык CSS насчитывает довольно большое количество свойств 
элементов 
HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с 
максимальным количеством браузеров элементы CSS - свойства шрифта, цвета 
элементов 
и фона, свойства текста и границ - вы можете значительно облегчить свою работу 
и сделать 
ваши Web-страницы более привлекательными в плане оформления текста. 

€ШУГ/ПЬ JS/Q4. Вставляем рисунок 

На каждую Web-страницу можно поместить любое количество рисунков. Вы можете 
использовать готовые графические изображения или создать их сами. О том, как 
самостоятельно 
подготовить графику, будет рассказано в следующих главах. А здесь мы посмотрим, 

как вставить в Web-документ уже готовый рисунок. 

Графические изображения, которые вы вставляете в свои Web-документы, должны 
быть 
созданы в таком графическом формате, который поддерживается браузером. 
Стандартные 
форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению 

с другими форматами, что значительно сокращает время загрузки из сети. Форматы 
Web-графики подробно описаны в следующей главе. 

Вставим на первую страницу нашего сайта рисунок CLOUD.GIF, который обычно 
находится 
в папке Windows, т.е. той папке, в которой установлена операционная система 
Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы 
созда



Web-страница изнутри 

ли для хранения файлов сайта. Файл CLOUD.GIF можно взять также из папки 
\Web\ChapO1\Web компакт-диска, прилагаемого к этой книге. 

>• Скопируйте файл CLOUD.GIF или любой другой файл с расширением .GIF в папку 
Web. 

Для вставки изображения в Web-документ используется одиночный тег <img> с 
атрибутом 
src, значение которого соответствует имени вставляемого файла или его 
адресу в Интернете. С помощью необязательного атрибута <border> можно включить 
отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст 
рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен 
выглядеть 
следующим образом: • 

<img src=CLOUD.GlF border=l> 

Вставим его после заголовка Добро пожаловать на страничку компании ГЕОТОН! 

Операционная система Windows не различает регистр букв вназваниях 
имен файлов, но операционные системы семейства Unix различают его, 
поэтому следует тщательно следить за тем, чтобы имя файла в теге 
указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто 
недоумевают: почему рисунок был виден на странице при тестировании 
на локальном компьютере и не появляется при загрузке страниц судаленного 
сервера. А все дело втом, что они указали cloud.gif, а на диске 
хранится CLOUD.GIF. 

> Вставьте пустую строку после элемента <hl align=center>Добро пожаловать на 
страничку компании ГЕОТОН! </hl> и введите В ней тег <img src=CLOUD.GIF 
border=l> для включения изображения в документ. 

По умолчанию рисунок выравнивается влево (Рис. 1.13). 

Добро пожаловать на страничку 
компании ГЕОТОН! 

331 Справка 

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

«Done Щ My Computer 

Рис. 1.13. Вставленный рисунок выровнен по левому краю страницы 

Чтобы выровнять рисунок по центру, следует, воспользовавшись тегами <center> 
</center>, записать строку кода HTML, вставляющего рисунок, следующим образом: 


Создание Web-сайтоз 

<centerximg src=CLOUD.GIF border=lx/center> 

> Откорректируйте указанную строку в файле geoton.html. В результате 
Web-страница 
будет выглядеть как на Рис. 1.14. 

«•Back - Ч - 9 3 Й I ©Search CSFovoritim QlHislory 

щ

Добро пожаловать на страничку 
компании ГЕОТОН! 

•ЗВ Справка 
Здесь Вы узнаете о пашей деятельности, о 
программных продуктах нашей компании и об 
оборудовании, которое мы производим 

;ЦД My Computer 

Рис. 1.14. Рисунок выровнен по центру 

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

JV&5. Создаем список 

Для наглядного представления информации на Web-страницах часто используются спи


ски. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу 


нашего сайта, на которой вставим ненумерованный список. 

>• В окне программы Блокнот (Notepad) выберите команду меню Файл • Создать 
(File • New). Окно очистится. Будет создан новый файл. 

>• Создайте структуру Web-документа, напечатав основные теги: 

<html> 


<head> 


<titlex/title> 


</head> 


<body> 


</body> 


</html> 


>• В качестве заголовка документа в теге <titlex/title> введите: Чем мы за 
нимаемся?: 



Web-страница изнутри 

<title>4eM мы занимаемся?</title> 


>• Такой же заголовок для списка введите в теле документа между тегами <body> и 


</body>, использовав для его отображения теги <Ь2х/ЪТ> с атрибутом 

align=center , выравнивающим заголовок по центру страницы: 

<h2 align=center>4eM мы занимаемся?</h2> 

> Самостоятельно подберите цвет фона страницы и цвет текста, указав 
соответствующие значения для атрибутов bgcolor и text в открывающемся 
теге <body>, например, так: 

<body bgcolor=aqua text=navy> 


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

Введенный HTML-код должен иметь вид как на Рис. 1.15. 

<html> 

<head> 

<title>4eM мы занимаемся?<ЛШе> 

</head> 

<body bgcolor=aqua text=navy> 

<li2 align=center>4eM мы занимаемся?</Ь2> 

}=/body> 

</html> 

Рис. 1.15. Код HTML новой Web-страницы 

Теперь вставим на страницу ненумерованный список с информацией о сфере 
деятельности 
компании ГЕОТОН. Ненумерованные списки создаются с помощью пары тегов 
<ulx/ul> , которые ограничивают список. Между ними располагается столько 
элементов, 
начинающихся с тега <li>, сколько элементов в списке. 

>• Вставьте пустую строку под строкой с кодом <h2 align=center> Чем мы 
занимаемся? 
</Ь2> и введите в теле документа следующий код: 

<И>СоЗданием новых и развитием существующих автоматизированных систем 
управления технологическими процессами на промышленных объектах. 

%И>Планированием и установкой "под ключ" локальных и глобальных вычислительных 
систем. 

<11>Раэработкой и внедрением систем корпоративных сетей с построением 
кабельных систем (для офисов), а также систем передачи данных с использованием 
телефонных, оптоволоконных и радиоканалов. 

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

<П>Созданием систем слежения и видеонаблюдения. 


Создание Web-сайтов 

<1х>Создание систем охранной и пожарной сигнализации, включая системы 
пожаротушения и контроля доступа. 

Обратите внимание: тег <li> может использоваться как одиночный, т.е. без 
парного, 
закрывающего тега </li>. 

Полный HTML-код документа должен иметь вид как на Рис. 1.16. 

Eile Edit Farmal Help 

<hhnl> 
<head> 
<title>4eM мы занимаемся?</1Ше> 
</head> 
<body bgcolor=aqua text=navy> 
<h2 align=center>4eM мы занимаемся?</Ь2> 


<u\> 

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


информационных магистралей для обеспечения совместных работ систем связи, 
видеоконференций и мультимедиа. 
<И>Созданием систем слежения и видеонаблюдения. 
<Н>Создание систем охранной и пожарной сигнализации, включая системы 
пожаротушения и контроля доступа. 
</ul> 
</body> 
</html> 


Рис. 1.16. Полный HTML-коддокумента со списком 

> Когда ввод кода будет закончен, сохраните документ в папке Web под именем 
spisok.html. 

>Dack - •* » & Э t3 StSeorch S Favorites О History %• # И " 

Чем мы занимаемся? 

• Созданием новых и развитием существующих автоматизированных систем 
управления технологическими процессами на промышленных объектах. 
• Планированием и установкой "под ключ" локальных и глобальных 
вычислительных систем. 
« Разработкой и внедрением систем корпоративных сетей с построением 
кабельных систем (для офисов), а также систем передачи данных с 
использованием телефонных, оптоволоконных и радиоканалов. 

• Внедрением проектных решений по созданию и использованию глобальных 
информационных магистралей для обеспечения совместных работ систем 
связи, видеоконференции и мультимедиа. 
• Созданием систем слежения и видеонаблюдения. 
• Создание систем охранной и пожарной сигнализации, включая системы 
пожаротушения и контроля доступа. 
.3 Done 
Ум у Computer 

Рис. 1.17. Список в окне программы просмотра 


Web-страница изнутри 

> Воспользовавшись командой меню Файл • Открыть (File • Open) в браузере 
Internet 
Explorer, откройте файл spisok.html из папки Web (Рис. 1.17). 

Как видите, каждый элемент ненумерованного списка выделяется специальным 
маркером. В нумерованном списке каждый элемент будет отмечаться его 
порядковым номером. Для создания нумерованных списков используются теги 
<olx/ol> , между которыми помещаются элементы <li> . 

Отметь JV&6. Создаем форму 

Рассказав на Web-странице о сфере своей деятельности, компания ГЕОТОН 
предполагает, 
что познакомившиеся с этой информацией и заинтересовавшиеся ею посетители сайта 

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

Подобные формы широко используются на Интернет-сайтах для сбора различных 
сведений, 
регистрации пользователя, формирования запроса и т.д. Образец типичной формы 
регистрации пользователя на сайте www.narod.ru показан на Рис. 1.18. Такая 
форма может 
содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и 
переключатели для выбора значений и другие элементы управления. После 
заполнения 
формы пользователем специальная программа-обработчик или, как ее еще называют, 
скрипт, обрабатывает полученные данные и передает их по назначению. 

Файл Правка &НД Избранное С§ремс .правка 

g] [ (g - §Щ D §3, H 

•W»-. |tfj blip /<»paitr»"' p)?lio™-n*io<J4e*>do-iegnlea.elpalh.htip 7/na.od 
yarxto ш ] Q d 
Регистрация: шаг 1 из 2 

Логин: 
должен состоять из символов A-z, 0-9. -. начинаться с 
буквы, заканчиваться буквой или цифрой и содержать 
не более 20 символов 

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

Ваше имя: 

Г 

Фамилия: 

Яндекс охраняет персональные сведения пользователей в 
соответствии с Соглашением о конфиденциальности информации. 

Ш 

Рис. 1.18. Форма регистрации пользователей на сайте www.narod.ru 

Посмотрим, как вставить в Web-документ простую форму, которая позволит 
пользователю 
напечатать свое сообщение прямо на Web-странице и автоматически отправить его 
по электронной почте компании ГЕОТОН. Но сначала вставим в HTML-документ 


Создание Web-сайтов 

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

>• Вставьте пустую строку между закрывающим тегом </ul> и закрывающим тегом 
</body> и введите в этой строке следующий код: 

<р аИдп=сепЬег>Если у Вас есть вопросы или предложения, напишите 
нам:</р> 

Каждая форма начинается тегом <form> и заканчивается тегом </form>. 
HTMLдокумент 
может содержать в себе несколько форм, однако они не должны находиться 
одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений.
 
Открывающий тег <form> должен содержать обязательный атрибут action, который 
определяет, где находится программа-обработчик или адрес сервера, который будет 
обрабатывать 
форму. Так как сообщение, написанное посетителем сайта, будет отправляться 
по электронной почте, то значение этого атрибута должно содержать адрес E-mail 
владельца 
сайта, например: action="mailto: geoton9narod.ru". 

Еще один атрибут тега <form> - method - определяет, каким образом или с помощью 

какого протокола данные из формы будут переданы программе-обработчику. 
Так как будет использована электронная почта, то значение этого атрибута должно 

быть post: method=post. Таким образом, элемент <form>.. .</form> будет иметь 
примерно такой вид: 

<form action="mailto: geoton@narod.ru" method=post > 

</form> 

>• Добавьте в документе spisok.html пустую строку перед закрывающим 
тегом</Ъойу> 
и введите указанный код, вставив в качестве значения атрибута action вместо 
geoton@narod.ru свой адрес электронной почты. 

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода 
сообщения. 
Для этого служат теги <textareax/textarea>. В качестве атрибутов открывающего 
тега <textarea> необходимо указать количество строк (rows) и колонок (cols), 
а также имя (name), под которым содержимое текстового поля ввода будет передано 

программе-обработчику, например: 

•ctextarea rows=5 cols=40 name=Commentsx/textarea> 
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 
символов. 
Введенный посетителем сайта текст будет передан обработчику под именем Comments 

(Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, 
следует 
ограничить его тегами <centerx/center>. 

>• Вставьте пустую строку перед закрывающим тегом </form> и введите следующий 
элемент, создающий текстовое поле: 

<centerxtextarea rows-5 cols-40 name=Comments></textareax/center> 

Здесь для центрирования текстового поля мы использовали теги <centerx/center>, 
а не атрибут align=center тега <р>, так как данный атрибут предназначен 
преимущественно 
для выравнивания текстовых фрагментов, и некоторые браузеры могут игнори



Web-страница изнутри 

ровать данный атрибут для поля формы. Вставленное текстовое поле будет примерно 

таким, как на Рис. 1.19. 

Die Edit View Favorites Iools Help 

в 

4-Back »4'вЙ Й CtSeorch (SFovoriles (^History |6'S| « 
Address |в C:\Web\spisok.hlml Н t*Go fUnks " 

Если у Вас есть вопросы или предложения, напишите нам: - It 

L

В 

©Done viy Corttputer rf 

Рис. 1.19. Текстовое поле формы 

Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то 
элемент управления, например, кнопка. Создать такой элемент управления очень 
легко 
с помощью одиночного тега <input> с атрибутом type. Если нужно создать кнопку, 
то значение этого атрибута должно быть submit (передать): 

<input type=submit> 

Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Submit 
Query (Передать запрос). Чтобы изменить надпись на кнопке, достаточно включить 
в данный тег атрибут value с нужным вам значением, например: value="Отправить". 

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

>• Вставьте пустую строку перед закрывающим тегом </form> и введите в ней 
следующий 
код, создающий кнопку в новом абзаце и выравнивающий ее по центру 
страницы: 

<pxcenterxinput type=submit value="OTnpaBMTb"></center></p> 

В результате элемент <form>... </form> должен принять следующий вид: 

<.orm action="mailto:geoton@narod.ru" method=post> 

<centerxtextarea rows=5 cols«40 name=Cornments></textarea><center> 

<pxcenterxinput type = submit value="Отправить"></center></p> 

</form> 

Напомним еще раз, что в качестве значения атрибута action, в открывающем теге 

<form> следует указать ваш адрес электронной почты. В окне браузера форма будет 


примерно такой, как на Рис. 1.20. 

Работу формы можно проверить. 

> Щелкните мышью на текстовом поле ввода в окне браузера. В этом месте появится 

текстовый курсор. 

>• Введите в текстовом поле несколько слов. 


Создание Web-сайтсв 

г - [Working Ofll 

•1 
Help 

••Bock »4'9Sfl ®Se erch Sfl Favorites О History |% -аи» 

Address |f i C:\Web\spisok.html <>Go IJUnksi 

Если у Вас есть вопросы или предложения, напишите нам: 

Отправить 

В Done My Computer 

Рис. 1.20. Текстовое поле и кнопка в окне браузера 

> Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с 
предупреждением 
о том, что форма передаст ваш адрес E-mail получателю, а данные, содержащиеся 
в форме, будут переданы без шифрования и, если они конфиденциальны, 
это может быть нежелательно для вас (Рис. 1.21). 

Microsoft Internet Exploit?! 

Данная Форма отправляется по электронной почте. 
Это приведет к тому, что адрес электронной почты пользователя 
станет известен получателю, 
а сведения в Форме останутся незашифрованными. 


Можно либо продолжить, либо отменить отправку. 

Отмена 

Рис. 1.21. Диалог-предупреждение 

> Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с 
предупреждением 
закроется. 

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

€ПЛУШЬ J№f. Вставляем гипертекстовые ссылки 

Мы уже упоминали в начале главы, что аббревиатура HTML означает «Язык разметки 
гипертекста». Что же такое гипертекст? 

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

Справочные системы многих программных продуктов построены именно по 
принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном 
цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке 



Web-страница изнутри

происходит переход к заранее назначенному документу или фрагменту документа. 

На Web-страницах гипертекстовые ссылки широко используются для перехода к опре


деленному фрагменту текущей страницы, к следующей или любой странице сайта или 
к 

документу другого сайта. 

Для задания перехода по гиперссылке в языке HTML используются теги <ах/а> с 
атрибутом 
href, значением которого является адрес перехода. В качестве адреса может 
использоваться имя файла другого документа или URL-адрес. 

Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, 
который 
может быть представлен или в числовом виде, например, 204.146.46.133, или 
определенным 
сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер 
имеет свою уникальную структуру каталогов и файлов, то и каждая Web-страница 
также имеет уникальный адрес, называемый URL (Uniform Resource Locator - 
Унифицированный 
указатель ресурсов). Как видно из названия, URL может указывать не только 
на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File 
Transfer 
Protocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде 
URL включает в себя указатель на протокол, который применяется для доступа к 
ресурсу 
- http, ftp и др. -и символьный адрес компьютера в сочетании с именем 
конкретного 
файла в структуре каталогов этого компьютера. Например, URL-адрес 
http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который 
применяется 
для доступа к Web, имени компьютера www.chat.ru и имени файла-документа 
faq.html, который находится в каталоге user. 

Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. 
Однако 
вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, 
http://www.microsoft.com. Тем не менее, в окне браузера все же появляется 
конкретная 
страница. Дело в том, что администраторы Web-серверов могут указать на своих 
узлах 
некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно 

не задано. Обычно эти файлы имеют имена index.html или index.htm. 

Посмотрим, как создать переход по ссылке с конца текущего документа spisok.html 
на 
первую страницу нашего сайта, т.е. к файлу geoton.html. Чтобы сообщить 
посетителю 
сайта о возможности вернуться к первой странице, необходимо предусмотреть между 

открывающим <а> и закрывающим </а> тегами соответствующий текст, например: 

<а href="geoton.html">Ha первую страницу</а> 

Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как 
некото


рые браузеры могут не понять его без кавычек. 

- Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент 

<а>... </а> тегами <center> и </center>. 
>- Вставьте в файле spisok.html пустую строку перед закрывающим тегом </body> и 

введите в ней следующий код: 

<center>-<a href="geoton.html">Ha первую cTpammy</ax/center> 

В окне браузера вы увидите результат примерно такой, как на Рис. 1.22. Ссылка 
На первую 
страницу будет подчеркнута и выделена другим цветом - таким, который 
предусмотрен 
в вашем браузере для непросмотренных ссылок. 


Создание Web-сайтов 

••Воск » •• -О В (Э | ©Search Si Favorites О History % ' 
J C:\Web\spisok.html 


Если у Вас есть вопросы или предложения, напишите нам: 

Отправить 

На первую страницу 

] @ My Compute 

Рис. 1.22. Вставленная ссылка 

> Установите указатель мыши в окне браузера на ссылке На первую страницу. 
Указатель 
мыши, который обычно имеет форму стрелки или текстового курсора, примет 
форму Ъ • 

> Щелкните мышью на этом месте. В окне браузера появится первая Web-страница из 

файла geoton.html. , 

Таким образом, мы осуществили переход по ссылке на другую страницу сайта. 

Теперь создадим гиперссылку для перехода с первой страницы - geoton.html - на 
вторую 
- spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент 
о нашей деятельности, так как список на второй странице раскрывает содержание 
именно этого фрагмента текста. Поэтому нам нужно в файле geoton.html поместить 
открывающий 
тег <а> с атрибутом href ="spisok.html " перед фрагментом текста о нашей 
деятельности, а закрывающий тег </а> - после него. 

>• Откройте в программе Блокнот (Notepad) файл geoton.html. 

> Отредактируйте этот файл, вставив тег <а href = nspisok.html"> перед текстом 
о нашей деятельности, а закрывающий тег </а> - после него. Код HTML в файле 
geoton.html должен принять вид, как на Рис. 1.23. 

file Edit Format Help 

<htral> 
<head> 
<*Ше>Компания ГЕОТОН<ЛШе> 
</head> ( 
<body bgcolor=blue text=yellow> 


<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы> 
<centerximg src=CLOTJD.GIF border=lx/ax/center> 
<p style="font-weight: bold; font-style: italic; font-size: 150%, text-align: 
center">3flecb Вы 
узнаете <a href="spisok.html">o нашей деятельности</а>, о программных продуктах 

нашей компании и об оборудовании, которое мы производнм</р> 
</body> 
</html> 


Рис. 1.23. Код HTML файла geoton.html после вставки ссылки 


Web-страница изнутри 

35 

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

фона вашего документа. В таком случае цвет ссылок следует изменить, 
воспользовавшись 
атрибутами link и vlink тега <body>. Атрибут link определяет цвет 
непросмотренной 
ссылки, a vlink — просмотренной. Еще один атрибут - alink определяет цвет 
ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка. 

Установим для непросмотренной ссылки белый цвет (white), для просмотренной - 
светло-
зеленый (lime), а для ссылки в момент щелчка мышью - красный (red). 

Если выустанавливаете какой-либо изатрибутов: bgcolor, text, link, 
vlink, alink -то устанавливайте их все. Иначе,например, установленный 
вами фоновый цветможет совпасть с цветом текста, установленным 
пользователем в браузере. 

> Отредактируйте файл geoton.html, добавив в тег <body> атрибуты link=white, 
vlink=lime, alink=red так, чтобы этот тег имел следующий вид: 

<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red> 

Теперь в программе просмотра ссылка четко видна (Рис. 1.24). 

- IWorkinq Olllmol 
Eile Edit View Favorites lools Help 
«•Back » •• » О Э tf! I ©Search Si Favorites <3 History | ft» 

Address I© C:\Web\Geoton.htinl | j &Ga 

Добро пожаловать на страничку 
компании ГЕОТОН! 

ЗЙСправка 

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

|Н My Computer 

Рис. 1.24. Ссылка на первой Web-странице 

> Щелкните мышью на ссылке о нашей деятельности. В окно браузера будет загружен 

файл spisok.html. 

> Перейдите в конец этой страницы, чтобы отобразить на экране ссылку На первую 
страницу. 

Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> 
атрибуты 
link, vlink и alink с подходящими значениями цветов. 

2* 


Создание Web-сайтов 

>• Щелкните мышью на ссылке На первую страницу. В окне браузера опять появится 
документ geoton.html. 

Вставить переход в документе можно не только с текстовой ссылки, но также и с 
рисунка. 
Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите 
внимание: пока 
переход не вставлен, указатель мыши при установке на рисунке имеет форму 
стрелки 1л^. 

Для создания такой ссылки достаточно в файле geoton.html вставить открывающий 
тег 
<а href=11spisok.html11> перед тегом <img src=CLOUD.GiF border=l> и закрывающий 

тег </а> после него. 

>• Отредактируйте файл geoton.html так, чтобы окончательный HTML-код документа 
имел вид, как на Рис. 1.25. 

iij&qeoton.html - Notepad 
Eile Edit Fflrmal Help 


<html> 
<head> 
«ЗШеЖомпания rEOTOH</title> 
</head> 
<body bgcolor=blue text=yellow link=white vlink=yellow alink=red{> 
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы> 
<centerxa href="spisok.html"ximg src=CLOUD.GIF border=lx/ax/center> 
<p style-'font-weight: bold; font-style: italic; font-size: 150%; text-align: 
center">3flecb 
Вы узнаете <a href="spisok.html">o нашей деятельности</а>, о 
программных продуктах нашей компании и об оборудовании, которое мы 
производим</р> 
</body> 
</html> 


Рис. 1.25. Окончательный HTML-код файла geoton.html 

В окне браузера вокруг рисунка вы увидите тонкую рамку. 

>• Установите указатель мыши на рисунке. Теперь указатель мыши примет форму ^ , 
и 
это явно указывает на то, что рисунок является ссылкой. В строке состояния 
браузера 
появляется адрес, на который ссылается рисунок (Рис. 1.26). 

4-Back '*'JBl!l | ® Search S Favorites 0 History 
Address |g] C:\Wub\Geolan html И «*Go Links ' 

Добро пожаловать на страничку 
компании ГЕОТОН! 

^Справка 

Здесь В» узнаете о нашей деятельности, о 
программных продуктах нашей компании и об 
оборудовании, которое мы производим 

Ы file:///C:Web/spisok.htlm \Щ My Computer 

Рис. 1.26. Переход с рисунка создан 


Web-страница изнутри

>• Щелкните мышью на рисунке. В окне браузера откроется документ spisok.html. 

>- Перейдите к ссылке На первую страницу и щелкните на ней мышью. В браузер 
снова 
будет загружена страница geoton.html. 

Создавая в этом опыте ссылки на страницы нашего сайта, мы использовали в 
качестве 
адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем 
каталоге. 
Если бы нужный файл - spisok.html - находился, предположим, в подкаталоге Doc 
текущего каталога, то в адресе необходимо было бы указать путь к нему от 
текущего 
каталога: <а href="Doc\spisok.html">. Такая ссылка, в которой адрес указывается 

относительно текущего каталога на том же компьютере, называется относительной. 

Вы можете также использовать в ссылках полный URL-адрес, указывающий на файл, 
находящийся в определенном каталоге определенного компьютера в сети, например: 
http://www.intel.com/help/index.html. Такая ссылка называется абсолютной. В то 
время 
как относительные ссылки указывают на файлы, расположенные на том же самом 
компьютере, 
абсолютные ссылки служат для представления адресов документов на других 
компьютерах в Интернете. 

Предположим, файл с именем price.xls находится на сайте www.3st.ru в каталоге 
uploads/price., Тогда абсолютная ссылка на этот файл будет такой: http://www.
3st.ru/ 
uploads/price/price.xls 

<а href="http://vn7w.3st.ru/uploads/price/price.xls"> 

При щелчке мышью на такой ссылке браузер подключится к указанному сайту, найдет 

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

JV&8. Создаем таблицу 

До сих пор мы создавали документы, в которых текст располагался в одной колонке.
 
На практике иногда бывает необходимо расположить текст в двух или трех колонках.
 
Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, 
может 
эффектно выделить фрагмент текста, на который вы хотите обратить внимание 
читателя. 
Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, 
таблица 
нужна для отображения информации в табличном виде. Часто таблица используется 
для 
представления меню. 

Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, 

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

> Создайте новый текстовый файл, выбрав в меню программы Блокнот (Notepad) 
команду Файл • Создать (File • New). 


Создание Web-сайтов 

>• Введите основные теги, создающие структуру документа. В заголовке документа 
укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, 
чтобы 
ссылки были хорошо видны: 

<html> 
<head> 


<title>Merao</title> 

</head> 

<body bgcolor=silver> 
</body> 
</html> 


Каждая таблица начинается тегом <table> и заканчивается тегом </table>. Строки 
таблицы образуются парой тегов <trx/tr>, между которыми располагаются пары 
тегов 
<tdx/td>. Каждая пара этих тегов образует один столбец. Между открывающим 
<td> и закрывающим </td> тегами помещается текст или любое другое содержимое 
ячейки. 

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

<table> 

<trxtd>r^iasHaH CTpaHHua</tdx/tr> 
<trxtd>4eM мы занимаемся?</tdx/tr> 
<trxtd>0 нашей KOMnaHmi</tdx/tr> 

<trxtd>06opyflOBaime</tdx/tr> 

<trxtd>Cne«. no</tdx/tr> 

<trxtd>Hanoi napTHepbi</tdx/tr> 

<trxtd>Ilpaue^jicT</tdx/tr> 

<trxtd>CBHSb с KOMnaHMeu</tdx/tr> 

</table> 

Главная страница 

> Вставьте пустую строку между открывающим <body> и 

Чем мы занимаемся? 

закрывающим </body> тегами и, начиная с нее, введите 

О нашей компании 

указанный код. 

Новости 

>• Сохраните документ в папке Web под именем menu.html, 

Оборудование 

выбрав из меню программы Блокнот (Notepad) команду 

Спец. ПО 

Файл • Сохранить (File • Save). 

Наши партнеры 
>• Откройте в окне браузера файл menu.html. Таблица будет Прайс-лист 
иметь примерно такой вид, как на Рис. 1.27. Связь с компанией 

Созданная нами таблица располагается у левого края экрана. 
Это положение можно изменить, использовав в открываю-Рис. 1.27. Созданная 
щем теге <table> атрибут align=center для выравнивания таблица 


Web-страница изнутри 

таблицы по центру или атрибут align=right - для выравнивания по правому краю 
окна 
браузера. Пункты меню расположены один под другим, а края таблицы и ячеек 
не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не 
показываются. 
Чтобы включить их отображение, следует использовать в теге <table> атрибут bor


der, указав в качестве его значения толщину рамки в пикселах. 

> Добавьте в тег <table> атрибут border=l, чтобы показать 
рамку и ячейки таблицы толщиной 1 пиксел: 

<table border=l> 

Теперь таблица отображается с рельефными границами 
(Рис. 1.28). 

Размер таблицы обычно устанавливается браузером автоматически 
так, чтобы отображалось все ее содержимое. Однако вы 
можете установить фиксированную ширину таблицы в пикселах 
с помощью атрибута width. 

>• Установите для таблицы ширину 140 пикселов, добавив 
атрибут width=140 в открывающий тег <table> так, чтобы 
он принял вид: 

<table border=l width=140> 

В окне браузера ширина таблицы уменьшится так, что в большинстве 
ячеек текст будет отображаться в двух строках (Рис. 1.29). 

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

Наше меню будет выглядеть лучше, если его пункты будут 
центрированы в ячейках и выделены полужирным шрифтом. 
Поэтому заменим в HTML-коде элементы <tdx/td > элементами 
<thx/th>. 

>• Отредактируйте файл menu.html, заменив теги <td> и 
</td> соответственно тегами <th> и </th>. Код 
HTML должен принять вид, как на Рис. 1.30, а таблица как 
на Рис. 1.31. 

Главная страница 
Чем мы занимаемся? 
О нашей компании 
Новости 
Оборудование 
Спец. ПО 
Наши партнеры 
Прайс-лист 
Связь с компанией 

Рис. 1.28. Рельефные 
границы таблицы 

Главная 

страница 
Чем мы 
занимаемся? 

О нашей 
компании 
Новости 
Оборудование ! 

Спец. ПО 
Наши 
партнеры 


Прайс-лист 
Связь с 
компанией 


Рис. 1.29. 
Ширина таблицы 
зафиксирована 


40 .
Создание Web-сайтов 

\\Щ menu.html - Notepad 

Главная 

File Edit Format Help 

страница 

<head> 

Чем мы 

<title>Memo</title> 

</head> занимаемся? 
<body bgcolor=silver> 


О нашей 

<table border=l width=140> 
<&хЙ1>Главная страница</Лх/1г> компании 
<trxth>4eM мы занимаемся?<ЛЬхЛг> 


Новости 

<trxth>0 нашей компании<ЛЬх/1г> 
<trxth>HoBocTH</thx/tr> 


Оборудование 

<trxth>O6opyflOBaHJie</thx/tr> 
<trxth>Cneq. IIO</thx/tr> Спец. ПО 
<trxth>HaiiiH партнерькЛЬхЛг> 


Наши 

<trxth>IIpauc^HCT</thx/tr> 
<1гхЛ>Связь С компанией</Й1Х/й-> партнеры 
</'table> 


_ 

Прайс-лист 

</body> 
</html> 


Связь с

Е 

компанией 

Рис. 1.30. HTML-код таблицы 
с элементами <th> Рис. 1.31. Таблица с элементами <th> 

В тегах <td> и <th> вы можете использовать следующие атрибуты: 

^ align - для горизонтального выравнивания содержимого ячеек по центру (center),
 
левому (left) и правому (right) краям ячейки; 

%/ width - для указания ширины ячейки в пикселах; > 

• height - для определения высоты ячейки; 
• valign - для вертикального выравнивания данных в ячейке по верхнему (top) и 
нижнему (bottom) краям и середине (middle) ячейки; по умолчанию 
valign=middle. 
> Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее 
состояние. 


Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, 
вставив 
атрибут bgcolor соответственно в тег <th>, <tr> или <table>. 

>• Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, 
для 
таблицы. 

Нам осталось теперь создать ссылки из двух первых пунктов меню на 
соответствующие 
страницы нашего сайта. Так как остальные страницы еще не созданы, то 
ограничимся 
этими двумя ссылками. Как и прежде, воспользуемся тегами <ах/а> с атрибутом 
href. 
В качестве значения этого атрибута для первого пункта меню - Главная страница - 
следует 
указать файл geoton.html, т.е. href="geoton.html", а для второго - Чем мы 
занимаемся? 
- файл spisok.html. т.е. href =•• spisok.html". 

В следующем опыте мы разделим экран по вертикали на два окна так, чтобы у 
левого 
края экрана постоянно отображалась таблица с меню, а справа от нее - страницы 
нашего 


Web-страница изнутри 

сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по 
ссылке 
новый документ отображается в том же окне, что и исходный, в котором была 
ссылка. 
Чтобы отобразить его в другом окне, необходимо в открывающем теге <а> 
использовать 
атрибут target, параметром которого должно быть имя того окна, в которое будет 
загружен 
документ. В следующем опыте мы подробнее поговорим об этом и присвоим 
соответствующему окну имя "frame", а сейчас укажем это имя как значение 
атрибута 
target в ссылке: target=Hframe". Еще раз подчеркнем, что в этом опыте 
Webстраница 
будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут 
target позволит загружать документ в другое окно, которое мы создадим в 
следующем 
опыте. 

>• Отредактируйте в файле menu.html строки кода, содержащие названия пунктов 
меню 
Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки 
соответственно 
на файлы geoton.html и spisok.html так, чтобы эти строки приняли следующий 
вид: 

<trxthx a href ="geoton.html" target="frame">rnaBHaH 
cipaHraia</ax/thx/tr> . 

•ctrxthxa href= "spisok.html" target="frame">Чем мы занимаемся?</а> 
</thx/tr> 
Окончательный вид файла menu.html с HTML-кодом показан на Рис. 1.32, а таблицы 
в 
браузере - на Рис. 1.33. Теперь первые два пункта меню выделены цветом и 
подчеркнуты 
как ссылки. Проверим, как работают эти ссылки. 

Главная 
.html - Notepad страница 

.ile Edit Fsrmat Help 

<html> Чем мы 
<head> 


занимаемся? 

<М]е>Меню<ЛШе> 
</head> О нашей 
<body> 


компании 

•stable border=l width=140> 
<trxthx a href="geoton.html" target="frame">rinaBHaH страница</ах/Й1хДг> 
Новости 
<trxthx a href="spisok.html" targeH'frame">4eM мы занимаемся?</ахЛ11хЛг> 
(<trXth>0 нашей компании</Й1Х/й-> Оборудование 
<trxtli>HoBOCTH</thx/tr> 
Спец. ПО 

<Ь-хЛ>Оборудование</и1хЛг> 
<1гхЛ>Спец. nO</thx/tr> 


Наши 

<Ь-хЛ>Наши napTHepbi</thX/tr> 

партнеры 

<1гХш>Связь с компанией</тх/1Р» 

Прайс-лист 

</table> 
«^body> 


Связь с 

</html> 

компанией 

Рис. 1.32. Окончательный вид файла menu.html Рис. 1.33. Ссылки 
с HTML-кодом таблицы в меню созданы 

> Щелкните мышью на первой ссылке - Главная страница. В зависимости от версии 
браузера, файл geoton.html будет загружен либо в новое отдельное, либо в то же 
самое 
окно браузера. 


Создание Web-сайтов 

>• Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад 

(Back) на панели инструментов или просто закройте окно, если файл был загружен 
ъ 

новое окно. На экране снова отобразится файл menu.html. 

>• Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера 
появится 
файл spisok.html. 

Итак, на основе таблицы мы создали меню и убедились, что ссылки в нем работают. 


JV&9. Создаем страницу с фреймами 

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


На Рис. 1.34 приведен типичный пример применения фреймов. Окно браузера разбито 
по 
вертикали на два фрейма. В левом отображается диалог поисковой системы, а 
справа наша 
первая Web-страница. Размер фрейма может изменяться пользователем прямо на 
экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет 
отображать 
его независимо от других фреймов, и собственное имя, позволяющее переходить 
к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном 
фрейме информацию, которую автор считает необходимым постоянно показывать 
пользователю. 
Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д. 
С помощью фреймов можно создавать также окна запросов, когда в одном фрейме 
находится 
собственно запрос, а в другом - его результаты. 

Add rags fej C:\Web\geoton.htm 

Search 

<X Mew Добро пожаловать на 

Выберите квтегорис поиске: 
f* Поиск вей


страничку компании 

О Предыдущий поиск 

Поиск веб-страницы. ГЕОТОН! 
содержащей 

с 

Предоставлено ГПоиск" 

Yandex ________ 

Здесь Вы узнаете о нашей 
деятельности, о программных 
продуктах нашей компании и об 

Q2Q00 MtcrosoH Corporation AJl rights 
reserved. Усрдрия использования 


оборудовании, которое мы 

Т 1[ 113 "У Compute 

Рис. 1.34. Окно браузера с фреймами 

Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на 

другие страницы сайта и сами страницы. 


Web-страница изнутри

Для описания фреймов используется специальный HTML-файл. 

> В окне программы Блокнот (Notepad) создайте новый файл. 

>• Введите основные теги, кроме тегов <bodyx/body>, которые в файле, описываю


щем фреймы, не используются. В тегах <titlex/title> заголовка укажите - ком


пания ГЕОТОН: 

<html> 


<head> 


<title>KoMnatu«i rEOTOH</title> 


</head> 


</html> 


Вместо тегов <body></body> в файле, описывающем фреймы, используется пара тегов 

<framesetx/frameset> с атрибутами rows или cols, определяющими, как делится 
экран - по горизонтали или по вертикали. В качестве значений этих атрибутов 
можно 
использовать числовое значение высоты или ширины фрейма в пикселах или в 
процентах 
от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали 
на два равных по размеру фрейма, то код HTML должен быть таким: 

<frameset rows="50%,50%"> 

Обратите внимание: значения атрибутов отделяются один от другого запятой. 

Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 й 600 
пикселов, 
следует написать: 

<frameset cols="200,600"> 

Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения 
монитора. Поэтому, если у пользователя установлено разрешение, например, 
1024x768 пикселов, т.е. ширина экрана - 1024 пиксела, то часть экрана может 
остаться 
незаполненной. Поэтому рекомендуется задавать размеры фреймов в процентах 
так, чтобы их сумма была равна 100%. Если все же необходимо для одного из 
окон указать фиксированный размер в пикселах, то размер другого окна можно не 
указывать, заменив его значение символом *. В этом случае браузер сам подберет 
нужный размер для второго окна. 

Создадим для отображения нашего сайта два вертикальных фрейма. Для первого 
фрейма, 
в котором будет выводиться меню, установим фиксированную ширину - 160 пикселов, 

а размер второго предоставим определить браузеру, заменив его звездочкой *. 

>- В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего 

тега < /head> и введите следующий код: 

<frameset cols="160,*"> 


</frameset> 


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


Создание Web-сайтов; 

который должен находиться в данном фрейме. Так как в первом фрейме будет 
находиться 
файл menu.html, то данный тег следует записать так: 

<frame src="menu.html"> 

>• Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего 

тега <.rameset> и введите указанный тег. 

Во второй фрейм должен загружаться файл geoton.html, поэтому второй тег <frame> 

будет таким: 

<frame src="geoton.html"> 

Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта 
spisok.
html и другие, которые, возможно, будут созданы, - необходимо с помощью 
атрибута 
name присвоить данному фрейму имя, которое, будучи указано в ссылках любого 
документа в качестве значения атрибута target , определит, в какой именно фрейм 
следует 
загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый 
документ открывается в том же окне. Именно для того, чтобы при переходе по 
ссылкам 
нашего меню страницы открывались не в первом фрейме, в котором расположено меню,
 
а во втором, мы использовали в предыдущем опыте в ссылках меню атрибут target 
со значением "frame": target="frame", где "frame" - это имя второго фрейма. И 
теперь 
имя "frame" следует присвоить второму фрейму, в котором должен открываться 
файл geoton.html. Поэтому второй тег <frame> в окончательном виде должен быть 
записан 
так: 

<frame src="geoton.html" name="frame"> 

> Введите этот код, вставив пустую строку перед закрывающим тегом </f rameset>. 


>• Сохраните файл в папке Web под именем index.html. 

Окончательный код файла index.html в окне программы Блокнот (Notepad) должен 
быть 
таким, как на Рис. 1.35. 

«index.html - Notepad 
File Edit Format Help 

<head> 
<Й1е>Компання ГЕОТОН<ЛШе> 
</head> 

<frameset cols=160,*> 

<frame src="menu.html"[> 
<frame src="geoton.html" name="frame"> | 
</frameset> . I 
</html> 

Рис. 1.35. Окончательный код файла index.html 


Web-страница изнутри 

Имя index.html должно обязательно присваиваться файлу с главной 
страницей каждого сайта. Именно этот файл открывается по умолчанию 
при обращении к Web-узлу,если не указано другое имя файла. На некоторых 
сайтах имя главной страницы может быть index.htm, 
a index.html отображается не как страница, а как папка с именами файлов. 
Этонадо уточнять у администратора узла. 

Теперь можно просмотреть, как выглядят созданные фреймы. 

>• Откройте в браузере файл index.html из папки Web. Вы увидите, что окно 
программы 
просмотра разделено по вертикали на два фрейма. В левом фрейме отображается 
меню, 
а в правом - файл geoton.html (Рис. 1.36). 

File Edit .iew Favorites Joels IJalp 

«- Back » •* » <S | CtSearch IS Favorites Э History 

I Address |g | CAWetrtindex. html 

Добро пожаловать на 
Чем мы j страничку компании ГЕОТОН! 

занимаемся?; 

О нашей 

компании ЗЙСправка 

Новости 

(оборудование 

ЗдесьВы узнаете о нашей деятельности,

Г Спец. ПО i 
Няши о программных продуктах нашей 

партнеры компании и обоборудовании, которое мы 
Прайс-лист ! 

производим 

Связь с 
компанией \ 


I 

в 

Рис. 1.36. Фреймы созданы 

Проверим, как работают ссылки меню. 

> Щелкните мышью на ссылке меню Чем мы занимаемся? В правом фрейме будет 
открыт файл spisok.html. 

>- Щелкните мышью на ссылке меню Главная страница. В правом фрейме снова 
появится 
файл geoton.html. 

Обратите внимание, что каждый фрейм имеет свои полосы прокрутки. При 
необходимости 
их отображение можно отменить. Для этого достаточно в теге <frame> указать 
атрибут 
scrolling=no. 

>• Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no: 

<frame src="menu.html" scrolling=no> 

В окне браузера Web-страница примет вид примерно как на Рис. 1.37. 


Создание Web-сайтом 

File Edit View Favorites Tools Help 

<-Back " * - Q|B||ffl | QSearch SlFavoril»» (^History | Щ,- Ш Щ •


Address |<g) C:\WabMndeichtinl J i^Go |] Links 

Главная 

Добро пожаловать на 

страница 
Чем мы страничку компании ГЕОТОН! 


занимаемся? 

О нашей 
компании 


ЗЦ Справка 

Новости 

[Оборудование 

ЗдесьВы узнаете о нашей деятельности,

Спец. ПО 
Наши о программных продуктах нашей 

партнеры компании и об оборудовании, которое мы 
Прайс-лист 

производим 

Связь с 
компанией 


В Done |fc$ My Computer 

Рис. 1.37. Вертикальная полоса прокрутки выключена 

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

Итак, первый этап нашей работы закончен - мы создали сайт из двух Web-страниц 
Теперь, чтобы он стал доступен всем, его необходимо поместить в Интернете на 
один из 
серверов World Wide Web. 


Г Л А В А 2. 

Размещение страниц в Интернете 

Разместить свой сайт в Интернете очень просто. Для этого достаточно скопировать 
файлы, 
из которых он состоит, на один из серверов WWW. Созданный нами сайт пока 
находится 
в папке Web одного из дисков вашего компьютера и содержит четыре HTMLфайла 
- index.html, geoton.html, spisok.html и menu.html, а также рисунок CLOUD.GIF. 
Все эти файлы, включая файл с рисунком, мы и должны поместить на сервер WWW. 
Если вы забудете скопировать какой-либо файл или рисунок, на который есть 
ссылка 

на одной из Web-страниц, то, естественно, браузер посетителя не сможет их найти 
и 
отобразить. 

Для передачи файлов на сервер WWW существует несколько возможностей. Вы можете 
использовать специальные программы, например, Издатель Web (Web Publishing 
Wizard), Netscape Composer или интерфейс загрузки - файловый менеджер сервера 
бесплатной 
службы, на котором собираетесь поместить сайт. Для передачи файлов все эти 
варианты используют протокол HTTP - HyperText Transfer Protocol (Протокол 
передачи 
гипертекста), который обеспечивает возможность обмена информацией между 
передающей 
программой и Web-сервером. Всемирная паутина WWW объединяет десятки, а 
может быть, и сотни миллионов компьютеров самых разных типов, не обязательно 
совместимых 
между собой, использующих разные операционные системы и разные коммуникационные 

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

Еще один вариант передачи файлов использует доступ по протоколу FTP - File 
Transfer 
Protocol (Протокол передачи файлов). Основное назначение этого протокола - 
пересылать 
файлы в Интернете с одного компьютера на другой. Кроме того, с помощью 
протокола 
FTP можно работать с файлами на удаленном компьютере: копировать, перемещать, 
удалять, создавать каталоги. Чтобы воспользоваться протоколом FTP, понадобится 
специальная программа, так называемый FTP-клиент. FTP-клиентом может служить, 
например, программа управления файлами FAR или Total Commander, программа 
CuteFTP и другие. Следует иметь в виду, что способ передачи файлов на сервер 
определяет 
владелец сервера. 

Где же можно поместить ваш сайт? Возможны два варианта: либо на сервере своего 
про


вайдера, либо на сервере одной из бесплатных служб. 

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

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


48 Создан

Создание Web-сайтов; 

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

Существенным может быть вопрос •*• какую информацию администрация сервера 
бесплатной 
службы не разрешает помещать на сайте. Так, некоторые бесплатные службы не 
разрешают помещать коммерческую информацию. 

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

вступают в силу. При выборе сервера обратите внимание на то, чтобы обновление 
было для вас в максимальной степени удобным. 

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


своит сайту. Большицы и произвести действия по 
управлению сайтом (Рис. 2.9). 

Выберите в меню ссылку Загрузка Файлов на сайт. На экране появится страница 
Мастерская /Управление файлами /Загрузка файлов (Рис. 2.10). 


Создание Web-сайтов 

[Jfodffl-Wi'Fi 

Мастерская Проект: Gfoton.itaiod.ni 

• Статистика посещений •

• Главная страница 
• Управление файлами и
• Про меня 
HTML-редактор» 

• Фотоальбом 
• Загцучка файлов на 
• Резюме 
сайт »

• Любимые ссьши! 
• Доступ к файлам по FTP 
поклонников 
• Дпя фанатови 
• Индексирование в 
поисковых системах 
> Объявление или • Отключение баннера 

Рис. 2.9. Страница Мастерская 

flndex"JrgVHapofl 

Мастерская / Управление файлами / Загрузка файлов Проект: Gcoioiiuainil m 

Загрузка в папку «Корневая пяпка» Выбрать папку 

Обзор.. Обэор.


Обзор,. Обэор... 

Обэор... Обэор.. 

Обзор... Обзор... 

Обэор... Обэор... 

Объём кал даго файла не должен прев яша гь 5 Мб! 

Загрузить файлы | \ Очистит 

Проверка свободного места 

Рис. 2.10. Раздел Загрузка файлов 

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

>• Нажмите левую верхнюю кнопку Обзор (Browse). На экране появится диалог Выбор 

файла (Choose file), который ничем не отличается от стандартного диалога 
открытия 
файла. 

> Перейдите в папку Web, в которой вы сохранили файлы сайта, и щелчком мыши 
выберите 
файл index.html. 

> Нажатием кнопки Открыть (Open) закройте диалог Выбор файла (Choose file). 
Полное 
имя выбранного файла появится в верхнем левом поле ввода, слева от кнопки 
Обзор (Browse). 

> Выберите остальные файлы сайта - geoton.html, spisok.html, menu.html, 
CLOUD.GIF - нажимая поочередно каждую следующую кнопку Обзор (Browse). 


Размещение страниц в Интернете 

> Когда все пять файлов будут выбраны, нажмите кнопку Загрузить файлы. Через 
некоторое 
время, после того как файлы будут загружены, появится страница с сообщением 
об этом (Рис. 2.11), а затем вы возвратитесь к странице загрузки файлов (Рис. 2.
10). 

Файл index.htinl загружен в корневую папку ! 
Файл CLOUD.GIF загружен в корневую папку ! 
Файл 2coton.html загружен в корневую папку ! 
Файл meini.htmi загружен в корневую пяпку ! 
Фяйл spisok.html загружен в корневую папку! 

Начал 

Поубивал бы, 

да мшмгат» самому возиться. •иды сплма I 

Рис. 2.11. Файлы загружены на сервер 

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

>• На странице Загрузка файлов (Рис. 2.10) щелкните мышью на ссылке Управление 
файлами и перейдите на соответствующую страницу (Рис. 2.12). 

Мастерская /Управление файлами Проект: Gtoton.liигоtl.i 

Создать палку | Создать страницу по шаблону | Создать html-фаГш! 
Загрузить файлы | Настройки |; 

Ш index.html 

Ш menu.html 

html 

Отмеченное: | Копировать ] [ Переместить] [ У 

Рис. 2.12. Страница Управление файлами 

> Разорвите связь с провайдером. 

На странице Управление файлами вы можете создать папку или html-файл, 
отредактировать, 
скопировать, переместить, переименовать и удалить файл. Подсказку о назначении 
каждой кнопки вы увидите, если установите на ней указатель мыши. Для выполнения 

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


Создание Web-сайтов 

Несмотря на то, что стандартной кодировкой русскоязычного текста для 
Web-страниц 
является кодировка Winl251, некоторые бесплатные службы используют на своих 
серверах 
другие кодировки. По данным статистики, русскоязычная часть Интернета 
использует 
на 95% кодировку Winl251 и на 5% - кодировку КОИ-8. Это, однако, не создаст 
для пользователей никаких препятствий или проблем, если загрузка выполняется с 
помощью 
файлового менеджера. При пересылке ваших Web-страниц на этот сервер менеджер 
файлов службы спросит у вас, в какой кодировке составлены документы. Если вы 
использовали текстовый редактор в Windows, то кодировка документа Win1251, если 
в 
DOS, то кодировка DOS, если в Unix, то кодировка КОИ-8, если в Macintosh, то 
кодировка 
Мае. На основании вашего ответа файловый менеджер автоматически перекодирует 
ваши страницы. 

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


Как выглядят наши страницы в Интернете, мы увидим в дальнейшем, а сейчас 
рассмотрим 
другие способы пересылки файлов на сервер. 

3. Размещение Web-страниц с помощью 
Netscape Composer 
Еще одну возможность опубликования Web-документов обеспечивает браузер Netscape,
 
вернее, не сам браузер, а программа Netscape Composer, поставляемая вместе с 
браузером. 

> Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося меню 
выберите 
команду Программы • Netscape 7.1 • Composer (Programs • Netscape 7.1 • Coin-
poser). Программа будет запущена, и на экране появится ее рабочее окно (Рис. 2.
13). 

ь .ile Edit Xiew Jn»e»l Format Table loot» Window Help 

ы ^. а Ф # ^ * a ^ # 

OptK Save Publish 3.am. Print Unk |гаЧ« ТаЫ* Spell 

-• «а В / У := |= m л Це ш Ш Ш 

. -I v> J I •.'• IS v.», 

H<BDl 

Рис. 2.13. Рабочее окно программы Composer 

Программу Composer можно также запустить из рабочего окна браузера Netscape 
Navigator, 
выбрав команду меню File • Edit Page (Файл • Редактировать страницу). Данная 


Размещение страниц в Интернете 

программа предназначена для создания Web-страниц. Но сейчас мы воспользуемся ею 

для публикации уже готовых документов. 

Так как нам нужно переслать на сервер пять файлов из папки Web, то удобнее 
будет открыть 
один из файлов в рабочем окне программы Netscape Composer. 

Нажмите кнопку на панели инструментов в верхней части рабочего окна программы 
и в появившемся диалоге Open (Открыть) выберите папку Web, а в ней файл 
index.html. Однако рабочее окно останется пустым, так как код HTML данного 
файла 
не содержит тегов <bodyx/body>. 

> Нажмите кнопку на панели инструментов в верхней части рабочего окна программы.
 
Если в программе Composer еще не был определен ни один сайт, то на экране 
появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой 
Publish 
(Опубликовать), на которой необходимо определить параметры доступа к сайту 
(Рис. 2.14). 

Server Information 

Sile Name: Г 

Publishing address (e.g.: "ftp://ftp. myisp.com/myuftername'): 

HTTP address of your homepage (e.g.: 'http://www.myisfxcorn/myusername'): 

I Login Information 

j User name: [ 

i Password: [_| Save Password 

Рис. 2.14. Вкладка Publish (Опубликовать) диалога 
Publish Page (Опубликовать страницу) 

Если же в программе Composer был определен хотя бы один сайт, то на экране 
сразу 
появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой 
Settings 
(Установки) (Рис. 2.16). 

> В поле ввода Site Name (Имя сайта) введите краткое имя или придуманный вами 
псевдоним сайта, на котором вы хотите опубликовать страницу, например, narod.ru.
 

> В поле ввода Publishing address (Адрес для публикации) нужно набрать адрес 
для 
доступа к сайту по протоколу FTP в виде Яр://ваш_логин:ваш_пароль@Нр.narod.ru. 

Например, если ваш логин в Яндексе - myname, а пароль к нему - 12345, то адрес 
должен 
быть таким: ftp://myname:12345@ftp.narod.ru. 


Создание Web-сайтов 

>• В поле ввода HTTP address of your homepage (Адрес HTTP вашей домашней 
страницы) 
введите адрес, который указал вам провайдер, или который вы получили в 
бесплатной 
службе, например, http://geoton.narod.ru. 

>• В полях ввода User name (Имя пользователя) и Password (Пароль) введите 
соответствующую 
информацию для доступа к серверу, которую вы получили от провайдера 
или в бесплатной службе. 

>• Убедитесь, что установлен флажок Save password (Сохранить пароль). Это 
позволит 
сохранить ваш пароль и избавит от необходимости в дальнейшем каждый 
раз вводить его. 

> Нажмите кнопку Publish (Опубликовать). На экране появится диалог, 
предупреждающий 
о том, что имя файла еще не определено (Рис. 2.15). 

Please enter a filename lor the cuuenl page 

Puc. 2.15. Диалог с предложением ввести имя файла 

> Нажмите кнопку ОК. На экране появится диалог Publish Page (Опубликовать 
страницу) 
с открытой вкладкой Settings (Установки). 

Publish Page 

PublithfSetting.sj 

Site Name: http://www.naiod.iu •_Q \ NawSite I 
Page Title: 1 e.g.: "My Web Page" 
Filename: "2 e.g.: "mypage.html" 

Site subdirectory for this page:: 

•) Include images and other files 
© Use same location as page 
Q Ute this site subdirectory: 
Puc. 2.16. Вкладка Settings (Установки) диалога Publish Page (Опубликовать 
страницу) 

Если в открывающемся списке Site Name (Имя сайта) нет требуемого сайта, то 
необходимо 
нажать кнопку New .Site (Новый сайт), чтобы перейти На вкладку Publish 
(Опубликовать) 
диалога Publish Page (Опубликовать страницу) (Рис. 2.14) и определить параметры 

доступа к сайту. 


Размещение страниц в Интернете 

> В поле ввода Page Title (Заголовок страницы) укажите название страницы, 
например, 

Компания ГЕОТОН, а в поле ввода Filename (Имя файла) - имя, под которым файл 

должен быть записан на сервере. 

i 

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

Прежде чем продолжить, необходимо подключиться к Интернету. 

>• Не закрывая диалог Publish Page (Опубликовать страницу), установите 
соединение с 
провайдером. 

>• Нажмите кнопку Publish (Опубликовать). На экране появится диалог с 
предложением 
ввести пароль для доступа к сайту (Рис. 2.17). 

Enter password for geoton on ftp://geoton@ftp.narod.ru 

г ; 

Q Use Password Manager to save this password 

{ OK I I Cancel Г 

Рис. 2.17. Диалог с предложением ввести пароль для доступа к сайту 

>• Введите пароль и нажмите кнопку ОК. На экране появится диалог, отображающий 
процесс публикации файла на сервере (Рис. 2.18). 

Publishing: Компания ГЕОТОН 

Publishing to Site: http://www.narod.iu 
Site URL: 
ftp://geoton5.narod.ru/ 

Publishing Status 

Publishing... 

index, html 

CD Keep this window open after publishing is complete. 

Cancel 

Puc. 2.18. Диалог, отображающий процесс публикации файла 

По окончании процесса публикации файла этот диалог исчезнет, а в заголовке окна 
программы 
Composer появятся название документа Компания ГЕОТОН и имя опубликованного 
файла index.html (Рис. 2.19). 


Создание Web-сайтов 

•Я Компания ГЕОТОН Ihllp:/.../inde».hlmll - Composi 
. File Edil View jnleit Fomat Table Icioli Window Help 
Ш 


J [ Bndy Тек! 1^1 If-if '•'-• «а В / У := ;S "if 

Рис. 2.19. Рабочее окно программы Composer 
с названием документа и именем файла в заголовке 

> Отключитесь от Интернета и закончите работу с программой Netscape Composer, 
закрыв ее рабочее окно. 

Для пересылки файлов по протоколу FTP удобнее использовать специальные 
программы, 
о чем будет рассказано в следующем опыте. 

JV&4. Размещение Web-страниц по FTP-протоколу 

Мы уже упоминали о том, что FTP - это протокол, который позволяет пересылать 
файлы 
по сети. Причём не только текстовые файлы, но и двоичные, т.е. любых-форматов. 
Кроме пересылки файлов с Web-документами, этот протокол используется для 
переписывания 
файлов с дистрибутивными копиями программ с FTP-серверов, на которых они 
хранятся, на компьютер пользователя. Для работы с FTP-серверами удобна условно 
бесплатная 
программа CuteFTP. В течение 30 дней вы можете работать с ней бесплатно, 
чтобы оценить ее возможности, а после этого оплатить стоимость программы или 
отказаться 
от ее использования. 

Если у вас нет программы CuteFTP, то загрузить ее последнюю версию можно с 
сайта 
www.cuteftp.com. Версии программы CuteFTP 6 Home и CuteFTP 6 Professional 
содержатся 
в папке \Soft\FTP компакт-диска, прилагаемого к данной книге. После загрузки 
программу следует установить. Для этого достаточно дважды щелкнуть мышью на 
значке 
загруженного файла в окне программы Проводник (Windows Explorer) и следовать 
указаниям 
программы установки. После завершения установки программы CuteFTP с ней 
можно работать. 

>• Подключитесь к сети Интернет. 


Размещение страниц в Интернете 

>• Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося меню 
выберите 
команду Программы • GlobalSCAPE • CuteFTP Home • CuteFTP Home (Programs 
• CuteFTP • CuteFTP). 

При первом запуске программы появится окно приветствия, в котором вам 
напоминают 
о количестве оставшихся дней бесплатного использования программы (Рис. 2.20). 

Welcome to CuteFTP Home! 

Welcome to CuteFTP Home 

This software was installed on 15.07.2004 and will 
continue to function until 14.08.2004. You have 30 
days remaining. 

If you have already purchased CuteFTP Home and 
you have a serial number, click Enter Serial Number 
below to activate it. Click Continue Trial to proceed 
with the evaluation. 

Knowledge Base 

Lost Serial Number 

© 2004 GlobalSCAPE Texas, LP 

|[|ntet J [ Continue 

Рис. 2.20. Окно приветствия программы CuteFTP 

Если вы купили программу, то можете ввести ее серийный номер, нажав кнопку 
Enter 
Serial Number (Введите серийный номер). 

> Если у вас серийного номера еще нет, то нажмите кнопку Continue (Продолжить). 
На экране 
появится первый диалог мастера подключения CuteFTP, в котором необходимо ввести 

адрес сайта, на который вы будете передавать файлы по протоколу FTP (Рис. 2.21).
 

CuteFTP Connection Wizard 

Every FTP site you connect with has a unique address 
assigned to it. This address is known as the Host 
Address. 

Enter the Host Address or FTP URL provided to you by 
the administrator of the site you want to connect with. 
The address will typically resemble something like 
ftp.hometown.aol.com or ftp://ftp.yourdomain.com or 
home.satx.rr.com 

If you are not sure what your FTP Host Address is, then 
you will need to contact the administrator of the FTP site 
or visit the support section of your FTP Host provider's 
Web site for more information. 

< Цазад J Дадео > j Отмена | Справка 

Рис. 2.21. Первый диалог мастера подключения CuteFTP 


Создание Web-сайтов 

В поле ввода следует ввести FTP-адрес, который вы получили от вашего провайдера 
или 
бесплатной службы. Если вы размещаете Web-страницы на сервере www.narod.ru, то 
FTP-адрес будет таким: ftp://Baui_norwH:Bauj_naponb@ftp.narod.ru. 

Например, если ваш Логин в Яндексе - myname, а пароль к нему - 12345, то адрес 
должен 
быть таким: ftp://myname:12345@ftp.narod.ru. 

>• В поле ввода введите FTP-адрес вашего сайта и нажмите кнопку Далее (Next). 
На экране 
появится второй диалог мастера подключения CuteFTP (Рис. 2.22). 

CuteFTP Connection Wn 

Enter the assigned username and password for this site. 

The password is usually case sensitive and is provided by 
your system administrator or web hosting provider. 
Every FTP site you connect with, requires a Username and 
a Password which were assigned when the account was 
created. If you are not sure what your Username 
and Password are, then you will need to contact the 
administrator of the FTP site or visit the support section of 
your FTP Host provider's Web site for more information. 

Username: (geoton 

Password; 

| _J 

< Назад \ Далее > 

Рис. 2.22. Второй диалог мастера подключения CuteFTP 

> В полях ввода Username (Имя пользователя) и Password (Пароль) введите 
соответственно 
логин и пароль, которые вы получили у провайдера или при регистрации в 
бесплатной службе. 

> Нажмите кнопку Далее (Next) На экране появится третий диалог мастера 
подключения 
CuteFTP (Рис. 2.23). 

CuteFTP Connection Wizard 

When connecting to this FTP site, CuteFTP wil 
automatically set the local and remote folders to what is 
specified below. 

Files or folders that you upload or download when 
connected to this FTP site wili appear in these folders by 
default. You can change these settings at any time. If 
you are not sure what to enter here, then click on 
"Next". 

default Local Folder: 

Default Remote Folder; 

i 

< Надад I Дал» > \ | Отмена | | Справка \ 

Рис. 2.23, Третий диалог мастера подключения CuteFTP 


Размещение страниц в Интернете 

> В поле Default Local Folder (Локальная папка по умолчанию) укажите путь к 
папке 
Web, в которой находятся файлы нашего сайта. Эта папка будет автоматически 
открываться 
на локальном жестком диске nnii подключении к FTP-серверу. 

Для указания папки можно воспользоваться кнопкой . 2|, расположенной справа от 
поля 
Default Local Folder (Локальная папка по умолчанию). 

В поле Default Remote Folder (Удаленная папка по умолчанию) можно указать, 
какая 
папка будет автоматически открываться на FTP-сервере. В нашем случае это поле 
заполнять 
не нужно. 

>• Нажмите кнопку Далее (Next) На экране появится заключительный диалог мастера 

подключения CuteFTP (Рис. 2.24). 

CuteFTP Connection Wizaid 

You have entered all the information needed to connect 
to your FTP site. Simply click'Finish' to connect to your 
FTP site! 

Your site information is automatically stored in the Site 
Manager, which is like an address book. From the Site 
Manager, you can edit site properties, browse sites 
offline and much more. 

To access this wizard again, click on File | Connection | 
Connection Wizard from the main menu bar. 

gftoal* 

OSCAPIII: 

I < Назад |[ ""r9TPI?pZ..j I Отмена I Справка I 

Puc. 2.24. Заключительный диалог мастера подключения CuteFTP 

>• Нажмите кнопку Готово (Finish) На экране появится рабочее окно программы 
CuteFTP (Рис. 2.26), а поверх него - диалог Tip of the Day (Совет дня) (Рис. 2.
25). 

lip ol the Day 

Did you know... 

Welcome to CuteFTPI We have a lot of great tips for 
getting the most out of CuteFTP. Leave "Tip of the 
Day" turned on for a while to familiarize yourself with 
CuteFTP and learn valuable tips and tricks. 

Ш Show tips on start up. ["""Next TIP I 

Puc. 2.25. Диалог Tip of the Day (Совет дня) 


Создание Web-сайтов 

Если в диалоге Tip of the Day (Совет дня) сбросить флажок Show tips on the 
start up 
(Показывать советы при запуске), то этот диалог больше появляться не будет. 

-CuteFTP ВО -[naiod.ru -ftp.nafod.iu. Status:Connected] Я-JQ 
File Edit View Took Window Help 
U D:\Web J3t* _33i 
_ index.htmlt / Size! Type la182 b... HTMLDocu... 
/ Na 
Й CLOUD.GIF 
\ Size I Type 
11.03... PHCJHOKGIF 
Modi 
ю.о; 
|.}menu.html 505 Ь... HTML Docu... 0 $|j geoton.html 517 b... HTMLDocu... ю.о; 
||J geolon.html 517 b... HTMLDocu... 0 . ) index,html 271 b... HTML Docu... i5.
o; 
©jpitok.html 1.23 KB HTMLDocu... 0 ЩЦ menu, html 505 b... HTML Docu... 10.0; 
gjCLOUD.GIF 11.03... Рисунок GIF 0 ^ j spisok.html 1.23 KB HTMLDocu... ю.о; 

1

IE J_ 

/ ttj Item Name | Address \ <-> | SizeTProgfett 

. • •

J_ r;

I. 
For Help, press F1 ;|Hp.narod.ru. 5 obiect(s). 13.52 KB 

Puc. 2.26. Рабочее окно программы CuteFTP 

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

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

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

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

на панели инструментов, 
отредактировать, нажав кнопку 

переименовать, нажав кнопку уда


лить, нажав кнопку X 

Удалим загруженные ранее файлы нашего сайта, чтобы затем переслать их снова с 
помощью 
программы CuteFTP. Для этого их нужно сначала выделить. 

>-Щелчком мыши выделите на правой панели первый файл. 

Нажмите и удерживайте клавишу I 
II shift |. 


Размещение страниц в Интернете 

> Не отпуская клавишу \\sm\. щелкните мышью на последнем файле на правой панели.
 
Все файлы текущей папки будут выделены. 

> Отпустите клавишу | 
Теперь выделенные файлы можно удалить. 
"1

>• Нажмите клавишу I0"'8]. На экране появится диалог с требованием подтвердить 
ваше 
намерение удалить пять файлов (Рис. 2.27). 

Are you sure you want to delete these 5 items? 

Puc. 2.27. Диалог с требованием подтвердить удаление файлов 

> Нажмите кнопку Да (Yes), чтобы закрыть этот диалог. Файлы будут удалены и их 
имена исчезнут с правой панели окна программы CuteFTP. 

Чтобы одной командой переслать на сервер все файлы папки Web, их необходимо 
предварительно 
выделить. 
>• Щелкнув мышью на первом и последнем файлах папки Web на левой панели окна 
программы CuteFTP при нажатой клавише lShml, выделите их. 

Отправим эти файлы на сервер. 

Нажмите кнопку & на панели инструментов рабочего окна программы CuteFTP. 
На нижней панели рабочего окна программы CuteFTP отобразится процесс пересылки 
файлов (Рис. 2.28). 

'т GlobalSCAPE - CuteFTP 6.0 - Inaiodiu - llp.naiod.iu. Status: Xfei using 
cunent session...! 1 
File Edit View Tool» Window Help 

ЁЭ DAWeb 

id a 1 |a/ 

I / Size I Type I Name [ Size | Type | Modif 
index, hlml 182 b... HTMLDocu... 
menu.html 505 b... HTMLDocu... 
geoton.html 517 b... HTMLDocu... 
spisuk.html 1.23 KB HTMLDocu... 

11.03... Рисунок GIF 

J 

Hem Nan I Address \ <-> t SizeTProgress ! Local 
И index.html flp.nar... 182 by... 0% J DAWebVindex.html 
О menu.html ftp.nar... 0 bytes J O:\Web\menu.html 
0 geoton.html ftp.nar... I D:\Web\geoton.html 
О spisok.html ftp.nar... j DAWeb\spisok.html 
Q CLOUD.GIF ftp.nar... 0 bytes DAWeb\CLOUD.GIF 

For Help, press F1 1(iifunarod.ru, 0 objecl(s). 0 byles 

Puc. 2.28. Процесс пересылки файлов 

3-1210 


Создание Web-сайтов 

Когда пересылка файлов будет закончена, их список отобразится на правой панели 
рабочего 
окна программы CuteFTP (Рис. 2.29), а в строке состояния будет показано общее 
количество перемещенных файлов и их суммарный размер (Рис. 2.29). 

I H GlobalSCAPE - CuteFTP 6.0 - [naiod.iu - ftp.naiod.iu. Status: Enoil 

Щ

File Edit View Tool» Window Help 

D:\Web 
Name [ / Size) Type I Name Size [ Type I Modi! 
_index.html 182 b... HTML Docu... Й | CLOUD.GIF] 11.03... Рисунок GIF io.os; 
|pnienu.Jitml 505 Ь... HTML Docu... Щ geoton.html 508 Ь... HTML Docu... 10.08 
'Щ geoton.html 517 b... HTML Docu... ф inden.html 173 b... HTML Docu... 10.08 
Ю spisok.html 1.23 KB HTML Docu... <ф[ menu.html 487 b... HTML Docu... 10.08 
g) CLOUD.GIF 11.03... Рисунок GIF @ spisok.html 1.21 KB HTML Docu... io. oa 

j 

a 

UemName I Adflre»! | <-> [ Size! Ргоцгёй" 

For Help, piess F1 jplp.natodtu. 5 objeclls). 13.38 KB" 

Puc. 2.29. Пересылка файлов выполнена 

> Нажмите кнопку на панели инструментов, чтобы прервать связь ссервером. 

>• Прервите связь с провайдером и закройте программу CuteFTP, нажав кнопку \х\ 
в 
правом верхнем углу ее окна. 

Когда вам в следующий раз потребуется обновить файлы сайта, достаточно будет 
нажать 
кнопку ^&_ на панели инструментов и в диалоге Site Manager (Менеджер сайга) 
(Рис. 2.30) выбрать имя сайта и нажать кнопку Connect (Подключиться). 

В 6Э General FTP Site» 
GlobalSCAPE Texas. LP. 
narod.ru 

Site Manager. Click on 'New' to create/add a, new site. 

Puc. 2.30. Диалог Site Manager (Менеджер сайта) 


Размещение страниц в Интернете 67^ 

Ф JV&5. Просмотр своих страниц в Интернете 

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

> Установите связь с провайдером. 

>• Загрузите в окно вашего браузера первую Web-страницу, указав адрес сайта в 
адресной 
строке браузера. 

>• Когда страница загрузится, просмотрите ее, устанавливая в браузере разные 
размеры 
шрифта. 

> Просмотрите также ваши Web-страницы при различных разрешениях монитора. 

Следует отметить, что просматривать свои страницы при разном разрешении экрана, 

лучше всего до отправки их на сервер, так как при ином разрешении экрана ваши 
оформительские 
идеи могут сильно исказиться. Разрешение монитора можно изменить на 
вкладке Параметры (Settings) диалога Свойства: Экран (Display Properties), 
доступ к 
которому осуществляется при щелчке правой кнопкой мыши на Рабочем столе 
(Desktop) и выборе команды контекстного меню Свойства (Properties). 

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

экрана и разных размерах шрифта. 

Иногда при загрузке Web-страниц могут возникнуть некоторые проблемы. Если ваша 
страница, находящаяся на сервере www.narod.ru, не загружается, и в окне 
браузера появляется 
сообщение типа: «Извините, запрошенный Вами документ не найден. Попробуйте 
начать с главной страницы» или «Невозможно отобразить страницу» (The page 
cannot be displayed), то это значит, что адрес сайта введен вами неправильно. 
Проверьте 
указанный вами адрес. Если же появляется сообщение «Не найден файл index.html 
или 
доступ к каталогу запрещен», то это означает, что страница не Помещена на 
сервер или 
среди посланных вами файлов отсутствует файл index.html. Содержащаяся в этом 
файле 
страница всегда выводится как первая. 

Итак, мы прошли основные этапы создания собственных Web-страниц и размещения их 

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


ГЛАВА 3. 

Графика для Web-страниц 

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

Цифровые изображения 

Изображение, которое вы видите на экране компьютерного монитора, строится из 
мелких 
точек, называемых пикселами. Слово пиксел - это сокращение английских слов 
picture 
element (элемент изображения). Другими словами, экран монитора - это большая 
матрица, каждый пиксел которой, независимо от другого, излучает определенный 
цвет, 
а все пикселы вместе образуют один кадр изображения. 

Каждое точечное изображение содержит фиксированное количество пикселов, поэтому 

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

15-дюймовый монитор SVGA способен показать 800 пикселов по горизонтали и 
600 по вертикали; современные мониторы, как правило, допускают возможность 
настройки 
экранной матрицы от 800x600 - при этом пикселы будут достаточно большими 
- до 1600х 1200 - в этом случае пикселы будут очень малы. 

Независимо от заданного размера печатного оттиска, размер изображения на экране 
определяется 
количеством содержащихся в нем пикселов, а также размером монитора и 
заданными для него параметрами. Большой монитор, экранная матрица которого 
настроена 
на разрешение 800x600, будет использовать более крупные пикселы, чем маленький 
монитор с таким же разрешением. В большинстве случаев мониторы настраиваются 
таким образом, чтобы они могли отображать приблизительно от 72 до 120 пикселов 
на один дюйм. 

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

Разрешение изображения или графическое разрешение определяет плотность пикселов 
в 
изображении и измеряется в пикселах на дюйм (ppi). Чем выше разрешение, тем 
больше 
пикселов содержится в изображении и тем меньше размер этих пикселов. Например, 
изображение размером 1x1 дюйм с разрешением 72 ppi будет содержать 5184 пиксела 
72 
пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изображение, но с 
разрешением 
300 ppi, будет содержать 90000 значительно более мелких пикселов. Благодаря 
использованию большего числа пикселов, высокое разрешение позволяет получать 
в изображении более мелкие детали и более тонкие цветовые переходы. 

Выбор оптимального разрешения для изображения зависит от того, каким образом вы 

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

разрешения для книжной или журнальной иллюстрации неизбежно приведет к резкому 


Графика для Web-страниц 

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

Размер файла, содержащего оцифрованное изображение, пропорционален размерам и 
графическому разрешению изображения и задается в байтах, килобайтах (Кб) или 
мегабайтах 
(Мб). Более тесное расположение пикселов, то есть более высокое разрешение, 
позволяет воспроизводить более мелкие детали изображений. В то же время это 
ведет к 
увеличению размера файла. Например, объем файла для изображения размером 
1x1 дюйм с разрешением 200 ppi будет в четыре раза больше, чем для изображения 
того 
же размера с разрешением 100 ppi. 

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

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

Число экранных пикселов на единицу длины определяет разрешающую способность 
монитора: 
она зависит от размера экрана и от заданной размерности экранной матрицы. 
При переводе печатных оригиналов в экранные образы и расчете их размеров в 
пикселах 
следует иметь в виду, что разрешающая способность большинства мониторов для 
Macintosh 
по умолчанию составляет 72 точки на дюйм (dpi), a PC-совместимые мониторы могут 

иметь разную разрешающую способность, но обычно она составляет 96 dpi. 

На экране монитора все пикселы изображения представляются с помощью 
определенного 
числа экранных пикселов. Размер экранного изображения определяется разрешающей 
способностью монитора, и ее не следует путать с графическим разрешением, 
характеризующим 
плотность пикселов в изображении. Например, размер изображения с разрешением 
144 ppi на экране монитора с разрешающей способностью 72 ppi будет вдвое 
превышать 
реальный размер, поскольку в каждом дюйме экрана могут быть отображены 
только 72 из 144 пикселов. При выводе на монитор с разрешающей способностью 
120 dpi то же самое изображение будет лишь незначительно больше оригинала, так 
как 
в этом случае в каждом дюйме экрана смогут уместиться уже 120 из 144 пикселов. 

Другим важным параметром точечного изображения является глубина цвета, или 
битовое 
разрешение - величина, которая определяет количество бит информации на один 
пиксел. Битовое разрешение характеризует объем цветовой информации, 
используемой 
для описания каждого пиксела изображения. Чем больше глубина цвета, тем шире 
диапазон 
доступных цветов и тем точнее их представление в оцифрованном изображении. 
Например, пиксел с битовой глубиной, равной единице, имеет лишь два возможных 
состояния 
- два цвета: черный или белый. Пиксел с битовой глубиной в 8 единиц имеет 28, 
или 256 возможных значений цвета. Пиксел же с битовой глубиной в 24 единицы 
имеет 

, или 16,7 миллионов возможных значений. Считается, что изображения, содержащие 

16,7 миллионов цветов, достаточно точно передают краски окружающего нас мира. 
Как правило, битовое разрешение задается в диапазоне от 1 до 48 бит/пиксел. 

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


Создание Web-сайтов 

называются первичными цветами, являются красный, зеленый и синий цвета. Они 
образуют 
цветовую модель RGB - Red, Green, Blue (Красный, Зеленый, Синий) - в которой 
на каждый пиксел отводится 24 бита (по 8 бит на каждый цвет), что дает 
возможность 
закодировать 16,7 миллионов оттенков. Как мы увидим в дальнейшем, RGB -(не 
единственная 
цветовая модель, но в мониторах и телевизорах используется именно она. Монитор 
вашего компьютера воспроизводит все цвета спектра на основе сложения трех 
перечисленных цветов. При смешивании первичных цветов образуются вторичные 
цвета: голубой, пурпурный, желтый. Чем выше интенсивность цвета, тем ближе он к 

чистому тону, а чем меньше - тем ближе он к черному цвету. Если сложить все три 

основных цвета с максимальной интенсивностью, равной 255, получится чисто белый 

цвет. И наоборот, если просуммировать три цвета нулевой интенсивности, 
получится 
чисто черный цвет. 

Объем файла, содержащего изображение, зависит не только от его размеров и 
графического 
разрешения, но также и от глубины цвета. Учитывая, что каждый пиксел 
изображения 
может описываться различным количеством бит - от 1 до 24 и более, можно сделать 

вывод, что чем больше цветовая глубина, тем больше должен быть объем файла 
с изображением. 

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

F = (A/25,4xB/25,4)xD2xC/8, 

где 
F - размер файла без сжатия в байтах; 
А - ширина исходного изображения в мм; 
В - длина исходного изображения в мм; 
D - графическое разрешение изображения в dpi; 
С - глубина цвета в битах. 
Таким образом, если вы хотите отсканировать для своей Web-страницы фотографик! 
размером 10x15 см с разрешением 150 dpi и глубиной цвета 24 бита, то 
результирующий 
файл будет иметь размер 1569378 байт или 1,49 мегабайта. 

Особенности Web-графики 

Оформление Web-страниц подразумевает необходимость размещения максимально 
возможного объема информации на сравнительно небольшом пространстве. Вы должны 
исходить из того, что среднестатистический пользователь работает в Интернете 
с разрешением экрана не более 800x600. Область, которая отображается в окне 
браузера 
при таком разрешении экрана, составляет примерно 790x430 пикселов. Чтобы 
представить величину этой области, вспомните, что значки на рабочем столе 
Windows 
имеют размер 32x32 пиксела. 

Подготавливая графику для Web-страницы, необходимо помнить о небольших размерах 

области, с которой вы должны работать. Изображение не должно превышать 700 
пикселов 
по ширине и 400 пикселов по высоте. Но файл даже такой картинки может оказаться 

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


Графика для Web-страниц

24-битная графика, способная обеспечить 16,7 миллиона оттенков цвета, не сможет 
быть 
оценена некоторой частью зрителей. При этом пользователи не только не смогут 
увидеть 
на своих мониторах всей заложенной вами цветовой гаммы, но, кроме того, 
изображение 
может оказаться худшего качества, чем в случае использования 8-битной графики, 
отображающей 
256 цветов. К тому же файл окажется в три раза больше по размеру, так как, 
напомним, его размер пропорционален глубине цвета, и, соответственно, будет 
требовать 
большего времени для загрузки на экран. 

Использование корректной цветовой гаммы важно при разработке любого 
графического 
проекта. Для графики Web-страниц необходимо применять цвета модели RGB. Так как 

для Web-страниц устройством вывода графики является экран монитора, то здесь, 
как 
правило, соблюдается условие WYSIWIG - What You See Is What You Get (Что видишь,
 
то и получаешь). Говоря «как правило», мы имеем в виду небольшие индивидуальные 

отличия мониторов пользователей. 

На вопрос «Каков должен быть размер графического файла?», предназначенного для 
Web, трудно ответить однозначно. Давайте попробуем представить себе, что 
пользователь, 
обращающийся к вашему сайту, имеет модем с пропускной способностью 
14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими. При использовании 
такого модема передача блока данных объемом 1 килобайт занимает примерно 1 
секунду, 
так что при объеме графики в 30 килобайт для ее передачи по сети потребуется 
приблизительно 
30 секунд. После таких, расчетов возникает следующий вопрос: как долго 
посетитель, обратившийся к вашему сайту, готов ждать появления на экране 
загружаемого 
изображения? Если вы сможете ответить на этот вопрос, то сразу же определите и 
максимальный размер файла с графическим изображением. Считается, что файл 
должен 
иметь такой размер, при котором время его загрузки по сети не превышает одной 
минуты, 
что выражается в ограничении размера величиной примерно 60 килобайт. 

Графические форматы для Интернета . 

Любая компьютерная информация может храниться только в определенном формате. 
Каждый вид информации имеет собственные форматы. Для текста используются одни 
форматы, для электронных таблиц - другие, для графики - третьи. Формат 
графической 
информации обычно определяется программой, в которой она создана. Для 
Web-графики 
стандартными считаются форматы JPEG, GIF и PNG. 

Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспертов 
фотографии) 
- самый популярный формат для хранения фотографических изображений. 
JPEG является стандартом в Интернете и предназначен для сохранения растровых 
или 
точечных изображений со сжатием, уменьшающим размер файла от десятых долей 
процента 
до 100 раз, за счет отбрасывания избыточной информации, не влияющей на 
отображение 
документа. Но практически диапазон сжатия значительно уже: от 5 до 15 раз. 
Хотя алгоритм сжатия изображения этого формата и ухудшает качество, он может 
быть 
легко настроен на минимальные, практически незаметные для человеческого глаза, 
потери. 
Распаковка JPEG-файла происходит автоматически, во время его открытия. Между 
качеством изображения и степенью уплотнения существует обратная зависимость: 
чем 
более высокую степень сжатия для результирующего изображения вы зададите, тем 
хуже 
будет его качество. 


Создание Web-сайтов 

Существует разновидность формата JPEG, именуемая «прогрессивный JPEG» (p-JPEG). 

Прогрессивный JPEG отличается от обычного тем, что при выводе на экран 
изображение 
появляется почти сразу, но плохого качества, а по мере загрузки качество 
улучшает 
ся. В формате JPEG можно хранить только полноцветные изображения с глубиной 
цвета 
24 бит/пиксел. Существует также версия JPEG для 32-битных изображений, но она 
пока 
мало распространена. Следует отметить, что файлы изображений, сохраненные в 
формате 
JPEG с небольшим сжатием, вполне подходят для использования в полиграфии 
Но для создания полиграфической продукции файл в формате JPEG лучше преобразо 
вать в другой формат и далее редактировать только этот преобразованный файл, 
так как 
при каждом сохранении JPEG-файла будет происходить новое сжатие, все более 
ухудшающее 
его качество. Обычно формат JPEG рекомендуют использовать для фотографий, 
на которых снижение качества, сопутствующее сжатию по этой технологии, наиме


нее заметно. 

Формат GIF (Graphics Interchange Format - Формат для обмена графической 
информацией) 
был разработан специалистами компьютерной сети CompuServe в 1987 году с целью 
ускорения пересылки файлов по телефонным линиям. Требовалось создать такой 
формат, 
который бы содержал достаточно хорошо упакованные данные. Алгоритм распаковки 
должен был быть при этом встроен во все программы, которые будут работать 
с этим форматом: утилиты просмотра, графические редакторы и т.п. Именно такой 
подход 
и реализован в формате GIF. 

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

второй план. Web-страница, которая со всем своим текстом и графикой занимает 
свыше 
40-50 килобайт, уже считается «большой» - и далеко не каждый посетитель 
дождется, 
пока она целиком загрузится в его браузер. Профессионализм Web-дизайнера как 
раз и 
заключается в том, чтобы отыскать должный баланс между художественностью, 
информативностью 
страницы и ее объемом. Вот почему формат GIF, главным достоинством: 
которого является малый размер файлов, до сих пор сохраняет свое значение 
основного 
графического формата World Wide Web. Из распространенных графических форматов 
GIF однозначно уступает по степени сжатия только формату JPEG. 

Конечно, GIF - не единственный формат, позволяющий сжимать графические данные; 
кое-какие способности к сжатию есть у форматов BMP, PCX, TIFF и многих других 
Однако GIF - один из немногих форматов, использующих алгоритм сжатия, почти не: 

уступающий по эффективности программам-архиваторам. Иными словами, GIF-файл не 
нужно архивировать, так как это редко дает ощутимый выигрыш в объеме. 

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

В отличие от формата JPEG, который позволяет достичь серьезного выигрыша в 
размере 
при минимально заметных для глаза потерях в качестве, формат GIF пользуется 
обычным 
сжатием без потерь. С другой стороны, преимуществом JPEG по сравнению с GIF 
является возможность хранить полноцветные изображения с 16 миллионами цветов, 
то 
гда как GIF ограничен лишь 256-цветной палитрой. 


Графика для Web-страниц

В 1989 году появилась новая, усовершенствованная версия формата GIF, в которой 
используется 
«постепенный» показ изображения по мере его загрузки из сети. Эта технология 
заключается в том, что при показе специально записанных GIF-файлов строки 
изображения 
выводятся на экран не подряд, а в определенном порядке: сначала каждая 8-я, 
затем 4-я и т.д., то есть полностью изображение показывается в четыре прохода. 
Такая 
система показа позволяет понять, что изображено на картинке еще до того, как 
она полностью 
загрузится, что очень важно на медленных линиях связи. Нечто подобное 
используется 
в телевидении для передачи одного полного кадра за два прохода луча - так 
называемая «чересстрочная развертка». Поэтому такие изображения были названы 
чересстрочными 
(interlaced). Приняв из сети очередной проход чересстрочного GIF-файла, 
браузер не только рисует каждую его строку на своем месте, но и заполняет 
копиями 
предыдущей строки все промежутки между строками, иначе после первого прохода 
изображение было бы почти невидимым. Поэтому сначала чересстрочный GIF состоит 
из 
широких горизонтальных полос, которые постепенно сужаются по мере проявления 
изображения. > 

В этой же версии, которую обозначают GIF89a в отличие от первой - GIF87a, 
появились 
и другие важные усовершенствования, а именно, возможность указывать прозрачный 
цвет, который позволяет, по сути, создавать GIF-изображения не только 
прямоугольной, 
но и произвольной формы - пикселы рисунка, имеющие этот цвет, при просмотре 
в браузере будут невидимы. 

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

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

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

В 1994 году стало известно, что американская фирма Unisys владеет патентом на 
алгоритм 
сжатия, используемый форматом GIF, и это дает ей законное право требовать 
выплаты 
отчислений у производителей всех коммерческих программных продуктов, 
использующих 
данный формат. Такое положение стало причиной начала постепенного 
вытеснения GIF с арены популярных графических форматов. На смену GIF приходит 
формат PNG. Однако способность GIF содержать анимацию все еще держит его на 
поверхности: 
анимационные GIF-файлы широко используются в Интернете.для создания 
рекламных баннеров. 

Формат PNG (Portable Network Graphics - Переносимая сетевая графика) 
поддерживается 
поздними версиями браузеров, например, Netscape Navigator, начиная с версии 4, 
но широкого 
распространения пока не получил. Этот формат, основанный на вариации алгоритма 
сжатия без потерь качества, в отличие от GIF сжимает растровые изображения и 
по горизонтали, и по вертикали, что обеспечивает более высокую степень сжатия; 
кроме 
того, он поддерживает цветные графические изображения с глубиной цвета до 48 
бит 
включительно. 

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


Создание Web-сайтов 

не одну восьмую исходного файла, как в GIF, а всего лишь одну шестьдесят 
четвертую 


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


Чтобы сгладить различия в яркости дисплеев, существующие между разными типами 
компьютеров и, соответственно, между создаваемыми на них изображениями, PNG 
позволяет 
хранить в файле исходный коэффициент яркости того дисплея, на котором 
изображение было создано. Это дает возможность программам просмотра перед 
выводом 
на экран регулировать яркость изображения, приспосабливая ее к особенностям 
данной видеосистемы - так называемая гамма-коррекция. 

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

PNG - формат MNG (Multiple Network Graphics - Множественная сетевая графика). 
В настоящее время разработчики формата PNG работают над новым форматом PNP 
(Portable Network Photography - Переносимая сетевая фотография), произносится 
«пинап
», который предназначен для хранения фотографических изображений и обладает 
мощным алгоритмом сжатия с потерей качества. 

Какой формат использовать? 

Вопрос о том, в каком формате хранить нужное вам изображение, не так прост, как 
кажется. 
Очень часто можно прочитать, что фотографические изображения, поскольку они 
имеют более 256 цветов, следует хранить в формате JPEG, а рисунки в формате GIF.
 Это 
правило действительно верно в большинстве случаев. Однако могут быть и 
исключения. 
В ряде случаев, если вам требуется особое качество изображения, следует 
предпочесть 
GIF. Дело в том, что главной помехой в использовании JPEG является то, что 
изображения, 
сохраненные в этом формате, в отличие от GIF имеют визуально заметные искажения.
 
Они тем заметнее, чем больше величина сжатия и Меньше геометрические размеры 
деталей изображения. Считается, что если исходный размер файла сжимается до 10 
раз, 
то искажения будут не очень заметны. В то же время, если в достаточно 
«интеллектуальной
» программе уменьшить количество цветов фотографии до 256, этих 256 цветом 
в большинстве случаев хватит на то, чтобы изображение не проиграло в визуальном 

восприятии. 

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

Во всяком случае, имейте в виду следующие обстоятельства: 

• Чем больше на рисунке мелких и контрастных деталей, тем сильнее будут заметны 

искажения, вносимые при сжатии в формате JPEG. 
• Чем крупнее геометрические размеры изображения в пикселах и чем ниже 
контрастность 
снимка, тем искажения JPEG будут меньше заметны. 
• Чем больше на рисунке контрастных и мелких деталей, тем более крупный размер 
файла получится при Сохранении в формате GIF. 

Графика для Web-страниц

• Чем большую площадь занимают однородно окрашенные участки и чем большую 
горизонтальную протяженность имеют детали рисунка, тем меньший размер займет 
на диске файл GIF. 
• Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессивном 
формате JPEG, то есть так, чтобы изображение «проявлялось» постепенно, будут, 
при 
прочих равных условиях, иметь больший размер. 
Но есть две области, где GIF - вне .конкуренции. Первая - это создание 
анимированных, 
то есть движущихся изображений. На самом деле анимированный GIF - это несколько 

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

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

GIF с прозрачным фоном может любой профессиональный графический редактор, 
например, Adobe Photoshop. 

Возможности оптимизации 

Чтобы любое изображение можно было использовать на Web-странице, его необходимо 

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

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

• использование прогрессивной развертки; 
• оптимальный коэффициент сжатия. 
Использование прогрессивной развертки не сказывается на размере изображения, но 

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

разверткой. Последние версии Photoshop умеют это делать. 


Создание Web-сайтои 

Оптимальный коэффициент сжатия. Это - другая возможность оптимизации 
изображения 
в формате JPEG. Для осуществления такой оптимизации нужен графический пакет 
или утилита, которая позволяет регулировать степень сжатия изображения. Adobe 
Photoshop позволяет выполнить такую регулировку. Другие программы, например, 
Photo-
Paint и PaintShopPro, также позволяют плавно регулировать степень сжатия в 
интервале 
значений от 1 до 255. 

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

Формат GIF сильно отличается от JPEG и использует совершенно другие методы 
оптимизации. 
Он предназначен для хранения изображений с количеством цветов не более 256 
и использует сжатие без потерь по методу LZW, который применяется в 
программахархиваторах. 
Методы оптимизации можно разделить на следующие типы, исключая оптимизацию 
файлов с анимацией: 

• уменьшение количества цветов; 
•/ оптимизация палитры изображения; 
i/ стилизация изображения; 
^ изменение размеров изображения; 
• фрагментарная оптимизация; 
v' оптимизация «прозрачных» изображений; 
• использование чересстрочной развертки. 
Теперь разберемся по порядку с этими методами и приемами оптимизации. 

Уменьшение количества цветов. Для большинства изображений, не являющихся 
фотографическими, количество необходимых для воспроизведения цветов часто 
меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его 
размер. Это возможно потому, что формат GIF поддерживает размер палитры меньше 
256 цветов. Теоретически мы можем задать любое число цветов палитры от 2 до 256,
 
например, 45 цветов или 99. Практически же количество цветов в изображении 
выбирается 
из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для 
представления 
цвета используется всегда целое число бит, а приведенный выше ряд является 
рядом 
максимального количества цветов при использовании от 1 до 8 бит на пиксел. 
В случае, ерли вы используете в рисунке, допустим, только 97 цветов, для 
сохранения 
одного пиксела все равно будет использовано 7 бит, как и при использовании 
128 цветов. Поэтому при оптимизации количества цветов нужно ориентироваться на 
приведенный выше ряд. Это позволит получить более качественную картинку. 
Уменьшив количество цветов с 256 до 32, можно иногда добиться уменьшения 
размера файла в 2 раза без заметной потери качества. 


Графика для Web-страниц

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

Палитра конечного изображения может быть либо фиксированной, либо 
оптимизированной. 
В первом случае графический редактор просматривает каждую точку изображения и 
подбирает ближайшую ей по цвету из палитры. Этот способ дает самые худшие 
результаты 
с точки зрения правильности воспроизведения цветов. Попробуйте, например, 
преобразовать 
фотографию красной розы в индексное изображение, используя палитру, содержащую 
оттенки зеленого. Это, конечно, крайний случай, но даст вам возможность 
оценить качество преобразования с использованием фиксированной палитры. Тем не 
менее, данный способ применяется в основном для того, чтобы изображения 
приемлемо 
выглядели на мониторах с малым количеством цветов - 16 или 256. Обычно в этом 
случае 
пользуются так называемой безопасной палитрой, состоящей из набора часто 
используемых 
цветов и их оттенков. Безопасная палитра гарантирует, что изображения, 
использующие эту палитру, будут одинаково показаны всеми браузерами. 

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

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

и именно его следует применять, если у вас нет причин для использования 
фиксированной 
палитры. 

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать 
оптимальное 
количество цветов в палитре. Здесь уместно сказать о способе увеличения 
количества 
используемых цветов при их недостатке - так называемом смешивании (dithering). 
При этом области, которые в оригинале были залиты однородным цветом, после 
преобразования 
заполняются смесью пикселов разных цветов, разбросанных по случайному закону. 
Как правило, каждый отсутствующий в редуцированной палитре цвет передается 
пикселами 
двух самых близких к нему цветов новой палитры. В результате изображение 
приобретает 
характерную зернистую, шероховатую фактуру. Очень часто смешивание является 
единственным способом хоть сколько-нибудь адекватно передать исходные цвета с 
помощью 
палитры, в которой этих цветов уже нет. Например, у нас есть 16 стандартных 
чистых 
цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае можно 
составить 
его из красных и желтых точек, разместив их в шахматном порядке. Издалека будет 
казаться, 
что это сплошной оранжевый цвет. Это классический пример смешивания. Его 
использование 
при преобразовании изображений может дать очень хорошие результаты. Но с 
точки зрения оптимизации размеров файла происходит совсем обратное. Смешивание 
может 
увеличить размер файла, причем довольно существенно - он может стать больше, 
чем 
до оптимизации. А все дело в способе хранения изображения форматом GIF. 
Изображение 
перед сохранением на диске подвергается сжатию методом LZW, а основная 
особенность 
этого метода заключается в том, что сжатию лучше всего поддаются области, 
заполненные 
однородным цветом, и хуже всего - области, состоящие из набора разноцветных 
точек. 
Смешивание же как раз основано на том, что получает недостающие цвета путем 
«перемешивания
» точек разных цветов. 


Создание Web-сайтсш 

Все существующие ныне Web-браузеры, включая Netscape Navigator и Microsoft 
Internet Explorer, вынуждены при выводе графических файлов на экран изменять их 

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

но его палитра почему-либо не может быть отображена напрямую, то в браузере это 


изображение неизбежно станет шероховатым. 

Однако для очень многих изображений, составляющих нередко основу дизайна 
страницы, 
смешивание крайне нежелательно. Что же делать? Выход, хоть и не самый лучший, 
есть. Оказывается, существует набор из 216 цветов, которые с гарантией никогда 
не подвергаются 
смешиванию ни в Netscape Navigator, ни в Internet Explorer, ни в Windows, ни в 
Macintosh. Если ваше изображение будет содержать только цвета из этого набора 
или, по 
крайней мере, к этому набору будут относиться цвета, занимающие наибольшую 
площадь, 
в браузере оно будет выглядеть намного чище и привлекательнее. Эту палитру 
часто называют безопасной (browser-safe palette). О ней мы уже упоминали выше. 

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

Стилизация изображения. Для уменьшения количества используемых цветов в 
изображениях, 
содержащих фотографические сюжеты, возможно применение стилизации фотографии. 
Для этого можно воспользоваться такими приемами, как тонирование изображения 
и применение художественных фильтров, имитирующих рисунки. Фотографии, 
обработанные 
таким способом, будут сжиматься лучше и требовать палитру, содержащую 
менее 256 цветов. 

Изменение размеров изображения. Этот метод оптимизации основан на изменении 
размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо 
подходит 
для рисунков, состоящих из элементов типа линий и однородных областей. Допустим,
 
нам понадобился рисунок, представляющий собой черный квадрат размером 
100x100 пикселов. Для уменьшения размера файла достаточно сделать так 
называемый 
однопикселный, т.е. размером 1x1 пиксел, рисунок GIF черного цвета и, как 
обычно, 
вставить его в HTML-файл, но размеры картинки указать те, что нужны нам - ЮОх 
100. 
О том, как указывать размеры рисунка, мы поговорим в следующих опытах. Браузер 
сам 
растянет наш пиксел до нужных размеров, и, таким образом, будет достигнута 
значительная 
экономия в объеме файла. Подобным же образом можно использовать однопикселные 
рисунки других цветов, но наибольшую пользу может принести прозрачное 
однопикселное 
изображение GIF. С его помощью удобно задавать «пустышки» на страницах, 
абзацные отступы, фиксировать минимальную ширину или высоту таблицы и делать 
другие полезные вещи. 


Графика для Web-страниц _ _

Методом изменения размеров очень удобно создавать графические разделительные 
линии. 
Достаточно нарисовать ее сечение в виде квадрата со стороной в один пиксел, а в 

HTML-документе указать нужную ширину линии или высоту, если линия вертикальная. 


Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если 

у вас есть некоторое большое изображение, содержащее сильно отличающиеся по 
количеству 
цветов области. В этом случае изображение можно разрезать на фрагменты и 
поместить 
их в таблицу, тогда в браузере оно будет выглядеть как единое целое. Теперь 
каждый фрагмент исходного рисунка оптимизируется отдельно. Для фрагментов, 
содержащих 
мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых 
цветами 
фрагментов можно использовать полную палитру в 256 цветов или сохранять их 
в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый исходным 
файлом, 
примерно раза в 2-3, в зависимости от конкретного изображения. Кроме того, 
изображение будет появляться на экране более равномерно, так как все фрагменты 
будут 
загружаться параллельно. Однако, если количество фрагментов превысит 10, то 
возможного 
выигрыша не получится, так как каждый фрагмент должен будет хранить свою копию 
палитры и служебной информации. 

Оптимизация «прозрачных» изображений. Формат GIF позволяет сохранять так 
называемые 
«прозрачные» изображения. На самом деле, GIF не поддерживает прозрачность в 
изображениях - альфа-канал - он лишь позволяет назначить одному любому цвету в 
палитре 
атрибут прозрачности. Если браузер рисует на экране такое изображение, то, 
встречая «прозрачный» пиксел, он просто игнорирует его и не показывает на 
экране. 
Само по себе это хорошо, но в случае использования метода сглаживания краев 
изображения 
(anti-aliasing) и последующего сохранения в формате GIF, возникает проблема 
появления ореола вокруг прозрачного изображения в случае, если GIF показывается 
на 
фоне, отличном of того, на котором происходило сглаживание и который стал 
прозрачным. 
Единственным способом уменьшения проявления этого эффекта является назначение 
прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, 
и 
проведение сглаживания на этом же фоне. 

Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы 
с использованием чересстрочной развертки. При использовании этого способа 
строчки, 
составляющие изображение, перемежаются, и при загрузке браузер вначале 
показывает 
каждую 8 строчку, потом каждую 4, каждую 2, и, наконец, загружается полное 
изображение. 
При этом посетитель вашей Web-страницы сможет понять, что же нарисовано на 
данной картинке, не дожидаясь ее полной загрузки. Это очень удобно. 

J\@1. Вставляем графику в HTML-кол 

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

Напомним, что, вставляя рисунок в код HTML, мы использовали его относительный 
адрес, 
т.е. адрес, который определяется относительно текущей папки данного компьютера. 

Но в ссылке на рисунок можно указать также и абсолютный адрес, т.е. адрес файла 
с 
изображением, который находится на любом Web-узле в Интернете. Посмотрим, как 
вставить в HTML-код файла geoton.html абсолютную ссылку на рисунок CLOUD.GIF, 
хранящийся не в папке Web вашего компьютера, а в каталоге вашего сайта в WWW. 


Создание Web-сайтоЕ: 

>• Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web. 

Нам нужно в теге <img>, вставляющем рисунок на Web-страницу, изменить атрибут 
src, 
который имеет вид src=CLOUD.GiF, на URL-адрес этого же рисунка, но находящегося 

на вашем сайте. 

> Отредактируйте тег <img> файла geoton.html так, чтобы значением атрибута src 
был 
адрес файла CLOUD.GIF, находящегося на вашем сайте, например 
src="http://geoton.narod.ru/CLOUD.GIF". 

Напомним, что URL-адрес файла включает протокол доступа к WWW - http://, имя 
сайта 
в Интернете, например, geoton.narod.ru и имя файла - CLOUD.GIF, отделенное от 
имени 
сайта косой чертой /. В общем случае перед именем файла могут присутствовать 
также; 
имена каталогов. 

Отредактированный файл будет иметь примерно такой вид, как на Рис. 3.1. 

Правка Формат Вид Справка 
<html> 
<head> 
-с-МтТежомпания r.OTOH</title> 
</head>
<body bgcolor-blue text-yellow link-white, vlink-iime, alink«red> 
<hl align=center>flo6po пожаловать на страннику компании ГЕОТОН!</П1> 
<centerxa href="sp1$ok. html "ximg src= http://geoton. narod. ru/CLOUD.GiF" 
DO!"der=l></ax/center> 
<p 5tyle="font-weight: bold; font-style: italic; font-size: 150.36; 
text-align: center >здесь вы узнаете <а href="sp1sok.html">o нашей 
деятельности</а>, о программных продуктах нашей компании об оборудовании, 
которое мы производим</рх/Ьос!у> 
</html> 

Рис. 3.1. Абсолютная ссылка на рисунок 

> Сохраните файл geoton.html, выбрав команду меню программы Блокнот (Notepad) 
Файл • Сохранить (File • Save). 

>• Загрузите браузер и откройте в его окне файл geoton.html из папки Web (Рис. 
3.2). 

- (Workinq Offline] 
Edit »ew Favorites louls Help 

ck - •»•* & SiFavorites ^Hislory \%w < 

Address МЦ C:\Web\geoton.html 

Добро пожаловать па страничку 
компании ГЕОТОН! 

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

| й "У Computer 

Рис. 3.2. Отображение рисунка сабсолютной ссылкой 
при отсутствии подключения к Интернету 


Графика для Web-страниц

Как видите, пока ваш компьютер не подключен к Интернету, рисунок в окне 
браузера не 
отображается. Вместо .него выводится только рамка, толщина которой определена 
атрибутом 
border. Чтобы увидеть рисунок, необходимо подключиться к Интернету. 

>- Не закрывая окно браузера, установите связь с провайдером. 

> Когда связь будет установлена, нажмите кнопку El - Обновить (Refresh) на 
панели 

инструментов браузера Internet Explorer или кнопку Обновить текущую страницу 

(Reload Current Page) на той же панели браузера Netscape. Браузер подключится к 


вашему сайту и загрузит рисунок CLOUD.GIF. 

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

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


> Прервите связь с Интернетом. 
Таким образом, мы вставили изображение на Web-страницу, указав в теге <img> в 
качестве 
значения атрибута src абсолютный адрес файла с рисунком. 


Для тех браузеров, которые не могут отображать рисунки, в языке HTML 
предусмотрен 
для тега <img> специальный атрибут alt, определяющий альтернативный текст, 
который 
будет выводиться вместо рисунка. Этот текст должен отображать смысл рисунка, 
заменяя собой изображение. Атрибут alt желательно использовать еще и потому, 
что 
многие пользователи отключают в браузере функцию отображения рисунков, чтобы 
ускорить 
загрузку Web-страниц. В таком случае пользователь должен видеть альтернативный 
текст, заменяющий рисунок. Кроме того, существуют специальные речевые браузеры 
для незрячих, в которых текст выводится голосом. 


Вставим в тег <img> файла geoton.html атрибут alt со значением "Область нашей 
деятельности11, которое в данном случае раскрывает смысл рисунка и ссылки. 
Значение 
атрибута alt должно быть заключено в кавычки. Этот текст будет появляться в 
браузерах, 
не позволяющих показывать изображения на месте рисунка. 


> Отредактируйте файл geoton.html, вставив в тег <img> относительную ссылку на 
файл с рисунком CLOUD.GIF, находящий в папке Web вашего компьютера, и атрибут 
а^="Область нашей деятельности11 так, чтобы элемент, содержащий указанный 
тег, принял следующий вид: 

<centerxa href=spisok.htmlximg src=CLOUD.GIF border=l а^="Область 
нашей деятельности"></ax/center> 

Теперь, когда относительный адрес рисунка указывает на файл CLOUD.GIF, 
находящий


ся в папке Web вашего компьютера, рисунок сразу показывается в окне браузера 
после 

обновления изображения. 


Создание Web-сайтов 

>- Установите указатель мыши на рисунке в окне браузера так, чтобы указатель 
мыши 
принял форму \). Под ним появится рамка с текстом, определенным в качестве 
значения 
атрибута alt (Рис. 3.3). 

••Back » •> » Ш Ш <й I ©Search SFavorites ^History | % • Я Ш 


Добро пожаловать на страничку 
компании ГЕОТОН! 

h 

• |Обпасть нашей деятельности! 
Здесь Вы узнаете о нашей деятельности, о 
программных продуктах нашей компании и об 
оборудовании, которое мы производим 

^ file:///C /Web/spisok html Щ My ComputBi 

Рис. 3.3. Отображение альтернативного текста 

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

данного атрибута можно также определять подписи для рисунков. 

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

> В браузере Internet Explorer выберите команду меню Сервис •Свойства 
обозревателя 
(Tools • Internet Options). На экране появится диалог Свойства обозревателя 
(Internet Options). 

> В браузере Internet Explorer щелкните мышью на ярлыке Дополнительно 
(Advanced), 
чтобы перейти на соответствующую вкладку. 
>• В браузере Internet Explorer сбросьте флажок Отображать рисунки (Show 
pictures). 
Чтобы найти его, воспользуйтесь вертикальной полосой прокрутки (Рис. 3.4). 

>• В браузере Internet Explorer нажмите кнопку Применить (Apply). 

> Нажатием кнопки ОК закройте диалог Свойства обозревателя (Internet Options) 
или 
Параметры (Preferences). 

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

> Обновите изображение в окне браузера, нажав соответствующую кнопку на панели 
инструментов. Вы увидите, что вместо рисунка в рамке отображается текст, 
который 
определен атрибутом alt (Рис. 3.5). 


Графика для Web-страниц 

Свойства обозревателя 

Общие Безопасность конфиденциальность 
8 Содержание Подключения I Программы j Дополнительно 

Параметры: 

0 Проверять аннулирование сертификатов издателей 

• Проверять аннулирование сертификатов серверов (требуе! 
[ 3 Удалять все файлы из папки временных Файлов Интернет; 
^ Мультимедиа 
0 Включить автоматическую подгонку размеров изображена! 
0 Включить панель изображений (требуется перезапуск) 
0 Воспроизводить анимацию на веб-страницах 
0 Воспроизводить видео на Беб-страницах 
0 Воспроизводить звуки на веб-страницах 

• Не отображать оперативное медиа-содержимое на панели 
П Показывать рамки рисунков 
0 Улучшенная передача цветовых оттенков 

| Настройка HTTP 1.1 
0 Использовать HTTP 1.1 
Q Использовать HTTP 1 1 через прокси-соединения 

nF 

.Восстановить значения по умолчанию 

ОК [ Отмена*"] \ Применить | 

Рис. 3.4. Вкладка Advanced (Дополнительно) диалога Internet Options 
(Свойства обозревателя) программы Internet Explorer 

«•Back » •* - 8 3 fl aSonrcli aFnvoriles ЦчЫшу fife» # ® Address 
|fi C:\Wab\qeolon hlml 2\ &Go j Links ' 

Добро пожаловать на страничку 
компании ГЕОТОН! 

| В 06л:эстъ нашей деятельной 

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

В Done У Щ My Computer 

Рис. 3.5. Текст, отображаемый вместо рисунка 

Специальные атрибуты width (ширина) и height (высота) тега <img> позволяют 
программам 
просмотра зарезервировать место на экране для рисунка еще до того, как он 
будет передан по сети. Это дает возможность пользователю начать чтение 
документа, 
пока передача данных еще продолжается. 

Добавим в тег <img> атрибуты width=6l3 и height=60, значения которых 
соответствуют 
фактической ширине и высоте рисунка в пикселах. Размеры изображения можно 
определить с помощью графического редактора, например, Adobe Photoshop. Об этом 

мы поговорим в одной из следующих глав. 


~ Создание Web-сайтсв 

>- Отредактируйте в файле geoton.html тег <img>, добавив указанные атрибуты так,
 
чтобы этот элемент принял следующий вид: 

<centerxa href = "spisok.htmlMximg src=CLOUD.GXF alt=" Область нашей 
деятельности" border=l width=613 height=60x/a></center> 

В окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено 
столько места, 
' сколько указано значениями атрибутов width (ширина) и height (высота) (Рис. 3.
6). 

«-Back --» -<Q й гЗ IФ Search GBFnvohtes WHistory ! Щ- S И


Добро пожаловать на страничку 
компании ГЕОТОН! 

Щ Область нашей де> 

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

й ">• Computer 

Рис. 3.6. Место для рисунка зарезервировано 

> Восстановите отображение графики в окне программы просмотра Web-страниц. 

Многие браузеры, хотя и не все, могут масштабировать изображение в соответствии 
с 
атрибутами width и height. Проверим это, уменьшив значения данных атрибутов! в 
шесть раз. Соответственно должен измениться и размер рисунка на экране. 

>• Отредактируйте элемент HTML, содержащий тег <img>, изменив в нем значения 
атрибутов: 
width=102 height=io так, чтобы данный элемент принял следующий вид: 

<centerxa href="spisok.html"xiing src=CLOUD.GZF аЗ^="Область нашей 
деятельности" border=l width=102 height=10x/ax/center> 

Когда вы обновите изображение в браузере, то увидите примерно то же, что и на 
Рис. 3.7. 

Добро пожаловать на страничку 
компании ГЕОТОН! 

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

а Done вд My Computel 

Рис. 3.7. Размер рисунка уменьшен в шесть раз 


Графика для Web-страниц 

Однако такое масштабирование не имеет особого смысла и не рекомендуется, так 
как 
при уменьшении значений атрибутов width и height размер файлов с графикой не 
уменьшается, и время их загрузки не изменяется. Уменьшать размеры изображения 
нужно 
в графическом редакторе. При увеличении же масштаба рисунка его качество обычно 

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

J№2. Графика большого размера 

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

Такой рисунок большого размера BG.JPG вы можете найти на прилагаемом к книге 
компакт-
диске в папке \Web\ChapO3\web. Вставим этот рисунок в документ geoton.html, 
поместив его в начале Web-страницы. 

>• Установите связь с Интернетом и скопируйте рисунок BG.JPG с компакт-диска в 
каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2 
этой книги. 

>• В файле geoton.html, открытом в окне программы Блокнот (Notepad), вставьте 
пустую 
строку после открывающего тега <body> и введите следующий код HTML: 

<img src=s"http://geoton.narod.ru/BG.JPG"> 

> Сохраните файл geoton.html на диске. 
>• Обновите изображение в окне браузера. Начнется загрузка файла, которая 
займет 
некоторое время, в зависимости от качества вашей линии связи. 

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

Когда загрузка файла закончится, вы увидите, что изображение, представляющее 
собой 
фотографию девушки на сером фоне, занимает почти все окно браузера в начале 
Webстраницы 
(Рис. 3.8), а текст документа и рисунок CLOUD.GIF располагаются в нижней 
части страницы. 

>• Прервите связь с провайдером. 


Создание Web-сайтов 

Загруженный рисунок понадобится нам в следующем 
опыте. Хотя его можно быстро скопировать в папку Web 
с прилагаемого компакт-диска, мы воспользуемся другим 
способом. 

>• Щелкните правой кнопкой мыши на рисунке в окне 
браузера и из появившегося контекстного меню выберите 
команду Сохранить рисунок как (Save Picture 
As) (Save Image As). В появившемся диалоге Сохранение 
рисунка (Save Picture) откройте папку Web, a 
затем нажмите кнопку Сохранить (Save). 

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

<а href="Aflpec_URL">3flecb</a>Bbi 

можете увидеть 
фотографию Рис. 3.8. Загруженный 

рисунок

В этом случае пользователь сам решает - смотреть или 
не смотреть данный рисунок. 

Мы уже отмечали, что для файлов, подобных загруженному, т.е. сохраненных в 
формате 
JPEG, основной способ оптимизации - сжатие. Только таким способом можно 
уменьшить 
объем файлов данного формата. Однако следует помнить, что сжатие JPEG ведетк 
потере качества. При каждом сохранении файла этого формата происходит новое 
сжатие 
и качество снова ухудшается: Вместе с тем, технология JPEG замечательна именно 
тем, 
что позволяет достичь серьезного выигрыша в сокращении размера при минимально 
заметных для глаза потерях в качестве. 

Еще один способ ускорения загрузки графики большого размера - нарезать 
изображение 
на части и поместить отдельные фрагменты в HTML-таблицу, где они будут 
восприниматься 
как единое целое. Каждый такой фрагмент можно оптимизировать индивидуально, 
применив наиболее подходящие для него параметры. При этом размер 
фрагментированного 
рисунка станет меньше, чем неразрезанного, что значительно ускорит его 
появление 
на экране. Для графики, сохраняемой в формате GIF, можно также оптимизировать 
палитру каждого фрагмента, что иногда позволяет уменьшить объем файла в 2-3 
раза. 

€п4уг.т JV&3. Графический фон 

Создавая наши первые Web-страницы, мы использовали для них однотонный фон, 
указывая 
его цвет в теге <body> с помощью атрибута bgcolor. Однако фон может быть не 
только однотонным, но также в виде рисунка или фотографии. В этом случае, как и 
любое 
другое изображение, рисунок фона должен быть представлен в формате GIF, JPEG 
или NPG. Для указания фонового рисунка в теге <body> используется атрибут 
background, 
значение которого - имя или URL-адрес файла с рисунком. 

Вставим в файл geoton.html в качестве фона Web-страницы рисунок BG.JPG, который 

мы сохранили в папке Web в предыдущем опыте. 


Графика для Web-страниц 87 

>• В файле geoton.html, открытом в программе Блокнот (Notepad), удалите 
HTMLэлемент 
<img src="http://geoton.narod.ru/BG.JPG">. 

>• Добавьте в конец открывающего тега <body> атрибут background=BG.JPG так, 
чтобы 
тег <body> принял следующий вид: 

<body bgcolor=blue text=yellow link=white vlink=yellow alink=red 
background=BG.JPG> 

i 

После такого редактирования код HTML в файле geoton.html должен принять вид как 
на 
Рис. 3.9. В окне браузера вы увидите, что теперь фон этой страницы не 
однотонный синий, 
как прежде, а изображение из загруженной нами фотографии, записанной в файле 
BG.JPG. И на этом новом фоне отображается текст документа и рисунок CLOUD.GIF 
(Рис. 3.10). Однако напомним, что мы не удалили атрибут bgcolor в теге <body>. 
В таких 
случаях, когда в теге <body> указываются оба атрибута - bgcolor и background 
браузер 
обычно отдает предпочтение атрибуту background, но, если изображение фона 
загрузить невозможно, используется атрибут bgcolor. 

файл Правка формат Вид Справка 

<html> 

:head> 

tit1e>K0MnaHHfl rE0T0H</t1tle> 

</head>

<body bgcolor-blue text-yellow link-white vlink-yellow al1nk-red 

Dackground^BG.JPG> 

;hl align^centers-добро пожаловать на страничку компании ГЕОТОН!</П1> 

<centerxa href-"sp1sok. htmTV<1mg src-CLOUD.GIF alt-" область нашей 

деятельности" border-1 w1dth=-lO2 he1ght>=10></a></center> 

<p style-'Tont-weight: bold; font-style: Italic; font-size: 150&; 

text-align: center >здесь вы узнаете <а href-"spisok.html">o нашей 

деятельности</а>, о программных'продуктах нашей компании об оборудовании, 

(оторое мы npoH3BOAHM</px/body> 
/html> 


Рис. 3.9. Файл geoton.html после указания фонового рисунка 

>Bnck '«'88Д 1 Qsenrch SlFnvofilea 3Hi8loiy 

Добро пож^ГЦцаТь на страничку 
компШшрГЕОТОН! 

Здесь Вы д Пашей деятельности, о 
программы с нашей компании и об 
оборуд мы производим 

| Щ My Computer 

Рис. 3.10. Фон ввиде рисунка 


Создание Web-сайтов 

Еще один способ определения фона - с помощью языка каскадных таблиц стилей CSS. 

Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц 
значительно 
больше возможностей управления фоновым изображением. Чтобы удобнее было 
знакомиться с ними, вставим рисунок BG.JPG в качестве фонового изображения 
второй 
Web-страницы нашего сайта, сохраненной в файле spisok.html, воспользовавшись 
языком 
каскадных таблиц стилей. 

В опыте со стилями первой главы мы определили вид текста на первой 
Web-странице: с 
помощью языка каскадных таблиц стилей, указав нужные стили как значения 
атрибута 
style в теге <р>. Но есть другой, более предпочтительный вариант определения 
стилей, 
при котором описание стилей располагается внутри заголовка Web-документа 
<head> </head> в открывающем теге <style>. В таком случае вы можете 
использовать 
описанные стили для HTML-элементов всей страницы. 

В теге <style> обязательно должен присутствовать атрибут type=ntext/cssn, 
который 
служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким 
образом, элемент <style>... </style> должен иметь следующий вид: 

<style type="tejct/css"> 

</style> 

Вставим этот тег в код HTML файла spisok.html. 

> Вставьте пустую строку в файле spisok.html после элемента <title>4eM мы зани


, маемся?</ь1Ь1е> и введите теги <stylex/style>, как указано выше. Код HTML 

заголовка Web-страницы, заключенный между тегами <head>.. .</head>, должен 

иметь такой вид: 

<head> 

<title>4eM мы занимаемся?</title> 


<style type="text/css"> 


</style> 


</head> 


Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем 
случае 

присвоение стиля элементу выглядит так: 

название_элемента { свойство: значение }, 

где наэвание_элемента - это имя HTML-тега, например, hi, p, body, а параметры в 

фигурных .скобках - перечень свойств элементов и присвоенных им значений. 
Например, 
чтобы указать, что все абзацы, описываемые тегами <р>...</р> текущего 
Webдокумента, 
должны иметь полужирное курсивное начертание шрифта с размером 150%и 
выравнивание по центру, следует присвоить этому элементу стили следующим 
образом:: 

<style type="text/css"> 

р { font-weight: bold; font-style: italic; font-size: 150%; text-

align: center } 

</style> 

Напомним, что такие стили мы присвоили элементу <р>.. .</р> на нашей первой Web


странице - geoton.html - и сделали это с помощью атрибута style. При этом стили 
бы


ли присвоены только данному элементу <р>...</р>. Если же стили определяются 


Графика для Web-страниц

в заголовке документа указанным выше способом, то они присваиваются всем 
элементам 
<р>.. . </р> данной страницы. 

Но нам требуется вставить рисунок, который будет служить фоном Web-страницы. 
Для 
этого в теге <style> элементу body должно быть присвоено свойство 
background-image, 
значением которого должен быть URL-адрес файла с изображением. Этот адрес в 
языке 
таблиц стилей указывается в скобках после символов url так: url ( -BG. JPG" ). 
На основании 
сказанного, элементу body в теге <style> нужно присвоить следующий стиль: 
body { background-image: url("BG.JPG") } 

> Вставьте пустую строку между открывающим тегом <style> и закрывающим тегом 
</style> и введите указанный код, определяющий стиль элемента body. 

Элемент HTML <style>... </style> должен выглядеть следующим образом: 

<style type="text/css"> 

body { background-image: url("BG.JPG") } 

</style> 

>- Сохраните файл spisok.html и откройте его в программе-браузере. Вы увидите, 
что 
установленный вами ранее цветной фон заменен изображением из файла BG.JPGи 
текстовое содержимое документа отображается теперь на новом фоне. 

>• Если текст плохо виден на новом фоне, измените его цвет с помощью атрибута 
text 
тега <body>, например, <body text="black">. 

Когда вы просмотрите текущий документ, воспользовавшись вертикальной полосой 
прокрутки, 
то увидите, что в нижней части страницы фоновое изображение повторяется. 
Если у вас установлено разрешение монитора 1024x768 или выше, то повторение 
будет и 
справа. Во всех случаях, когда размер фонового рисунка меньше размера текущей 
страницы, 
браузер по умолчанию повторяет рисунок по вертикали и по горизонтали. Но вы 
можете указать программе просмотра не повторять рисунок, т.е. выводить его 
только 
один раз. Для этого используется свойство background-repeat со значением no-
repeat: background-repeat: no-repeat. 

>• Вставьте указанное свойство в код HTML файла spisok.html так, чтобы элемент 
<style>... </style> принял следующий вид: 

<style type="text/css"> 

body { background-image: urlp'BG.JPG"); background-repeat: no-repeat } 

</style> 

Теперь в окне браузера фоновый рисунок занимает только верхнюю часть документа. 


Нижняя и, возможно, правая часть, в случае высокого разрешения монитора, 
заполнена 

однотонным фоном, который вы установили ранее. 

Свойство background-repeat может иметь также следующие значения: 

• repeat - фон повторяется как по горизонтали, так и по вертикали; это значение 
устанавливается 
по умолчанию; 
• repeat-х - фон повторяется только по горизонтали; 
^ repeat-у - фон повторяется только по вертикали. 


Создание Web-сайтов 

Положение фонового рисунка на странице можно изменить с помощью свойства 
background-
position. В качестве значений этого свойства указываются ключевые слона, 
характеризующие положение изображения по вертикали - top (вверху), center (по 
центру), 
bottom (внизу) - и по горизонтали - left (слева), center (по центру), right 
(справа). Первым должно указываться вертикальное положение. Например, код 
background-
position: center center выровняет рисунок по центру страницы как по 
горизонтали, так и по вертикали. 

>• Добавьте в описание свойств элемента body файла spisok.html свойство 
background-
position: center center. Элемент <style>.. .</style> в этом файле 
должен принять следующий вид: 

<style type="text/ess"> 

body { background-image: url("BG.JPG"); background-repeat: no-repeat; 

background-position: center center } 

</style> 

Фоновый рисунок будет помещен в центре страницы, при этом нижняя и верхняя 
части 

страницы, а также правая и левая при разрешении монитора 1024x768 и выше, будут 


заполнены сплошным цветом. 

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

Вы можете, однако, фиксировать изображение так, чтобы при прокрутке фон 
страницы 
оставался неподвижным, а текст перемещался относительно фонового изображения. 
Для этого в элементе body следует использовать свойство background-attachment 
со 
значением fixed: background-attachment: fixed. 

> Вставьте указанное свойство в описание стиля элемента body. Элемент 
<style>... </style> HTML-кода файла spisok.html должен принять следующий вид: 

<style type="text/css"> 

body { background-image: url("BG.JPG"); background-repeat: no-repeat; 

background-position: center center; background-attachment: fixed } 

</style> 

Теперь вы увидите, что при прокрутке страницы фоновое изображение остается 
непод


вижным, а текст и другие элементы Web-страницы перемещаются относительно фона. 

Как видите, использование языка каскадных таблиц стилей предоставляет больше 
воз


можностей для представления фонового изображения на Web-странице, чем 
применение 

атрибута background в теге <body>. 

Изображения для использования в качестве фона и рисунков в своих Web-страницах 
вы 

можете свободно загрузить со следующих Web-сайтов: 

http://www.abcgiant.com/ 

http://barrysclipart.com/ , 

http://www.arttoday.com/ 


Графика для Web-страниц

€пы/пь J№4. «Прозрачная» графика 

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

того, как ее поддержка появилась в браузерах. 

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

Посмотрим, как можно использовать изображение с прозрачным цветом. Такое 
изображение 
BG.GIF вы можете найти на предлагаемом с книгой компакт-диске в папке 
\Web\ChapO3\web. Вставим в Web-документ geoton.html рисунок с прозрачным цветом.
 
В файле BG.GIF в указанной папке хранится та же фотография, что и в файле BG.
JPG, с 
которым мы работали до сих пор, но записанная в формате GIF таким образом, что 
серый 
цвет фона припросмотре в браузере становится прозрачным. 

>- Откройте в программе Блокнот (Notepad) файл geoton.html. 

>• Отредактируйте код HTML файла, использовав в качестве значения атрибута 
background 
открывающего тега <body> адрес файла BG.GIF на вашем сайте так, чтобы 
этот элемент принял примерно такой вид: 

<body bgcolor=blue text=yellow link=white vlink=yellow alink=red back-
ground="http://geoton.narod.ru/BG.GlF"> 

>- Сохраните файл geoton.html и откройте его в браузере. 
Пока нет подключения к Интернету фон открытого документа - однотонный синий, 
как 
это определено атрибутом bgcolor. 

> Установите связь с Интернетом и скопируйте рисунок BG.GIF с компакт-диска в 
каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2 
этой книги. 

> Обновите изображение в окне браузера. Браузер подключится к указанному в 
адресе 

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

> Прервите связь с Интернетом. 
>• Сохраните рисунок фона в папке Web, щелкнув правой кнопкой мыши на рисунке в 

окне браузера и выбрав команду контекстного меню Сохранить фон как (Save 
Background 
As). 
>- Закройте программу просмотра и редактор Блокнот (Notepad). 


Создание Web-сайтов 

Итак, мы познакомились с возможностями использования «прозрачной» графики GIF. 
О том, как ее создавать, мы поговорим в следующих главах. 

Графический текст 

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

фон и используется в качестве заголовков, названий, 
логотипов, кнопок и т.д. На Рис. 3.11 показаны 
примеры таких надписей. Хотя подобная графика ЙНФШРМ 
и увеличивает объем Web-страниц и время их загрузки, 
разумное ее использование придает сайту 
привлекательный профессиональный вид. 

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

Internet by 

результате чего очертания символов кажутся не


ровными, особенно в наклонных и закругленных ЗогШпа 

элементах (Рис. 3.12, вверху). I 

С помощью специального эффекта сглаживания Рис. 3.11. Графический текст 

(anti-aliasing) можно минимизировать контраст на 

границах символов. В результате их очертания ста


нут более мягкими и надпись будет выглядеть бо


ТРИУМФ 

лее элегантно (Рис. 3.12, внизу). Однако в тех слу


чаях, когда надпись создается мелким шрифтом, 

использование сглаживания нежелательно, так как 

ТРИУМФ 

текст может стать плохо читаемым. 

С приемами и способами создания графики и, в Рис. 3.12. Графический текст 

частности, графического текста мы познакомимся в несглаженный (вверху) 

следующей главе. • и сглаженный (внизу) 


ГЛАВА 4. 

Подготовка графики 
с помощью Adobe Photoshop 
и Adobe ImageReady 

Внешний вид и привлекательность вашего сайта в значительной мере« зависят от 
наполняющей 
его графики. Графика - это визуальное средство подчеркивания и выделения 
информации, раскрываемой текстом Web-страницы, которое в то же время не должно 
отвлекать внимание посетителя сайта от самого текста. Поэтому подготовке 
графики 
следует уделить самое серьезное внимание. 

В настоящее время существует множество программных продуктов, позволяющих 
готовить 
рисунки для Web; наиболее популярными из них являются Macromedia Fireworks и 
Adobe ImageReady. Компания Macromedia стала пионером в области создания 
программ 
подготовки Web-графики, когда выпустила свой продукт Macromedia Fireworks, 
специально 
предназначенный для этой цели. Вслед за ним появилась аналогичная программа 
компании Adobe System Incorporated - Adobe ImageReady. 

Среди программ профессиональной подготовки растровых изображений, пожалуй, нет 
программы более совершенной и более популярной, чем Adobe Photoshop. За 
последние 
несколько лет в связи с тем, что требования к Web-графике значительно 
повысились, 
дизайнеры и разработчики ориентируются именно на Adobe Photoshop, как на одно 
из 
основных средств создания графики для World Wide Web. До появления версии Adobe 

Photoshop 5.5 программа Adobe ImageReady, ранее распространявшаяся отдельно, 
считалась 
неким придатком Adobe Photoshop с очень ограниченным набором функций подготовки 

изображений для Web. Однако, учитывая возрастающие требования, компания 
Adobe System решила отказаться от дальнейшего раздельного распространения этих 
двух продуктов и слить их в один пакет - Adobe Photoshop. Новая концепция «два 
в одном
» гарантирует совместимость программ, знакомый интерфейс и, в конечном счете, 
значительное сокращение времени подготовки графики. По сути, это - единый 
комплекс, 
разделенный на две программы только для гибкости. Обе программы имеют 
одинаковые 
рабочие окна и предлагают много одинаковых инструментов. Между программами 
легко переключаться с помощью специальной кнопки и, таким образом, быстро 
переходить от создания и обработки изображений к их подготовке и оптимизации 
для 
Web. Все операции, выполненные в каждой из программ, сохраняются и, при 
необходимости, 
их можно отменить после переключения. 

Adobe Photoshop и Adobe ImageReady хорошо дополняют друг друга. И мы будем 
рассматривать 
эти программы совместно: обрабатывать фотографии, создавать графические 
кнопки, баннеры и другие изображения для Web-сайта в Adobe Photoshop, а затем 
переключаться 
в Adobe ImageReady, чтобы оптимизировать полученные изображения, разрезать 
их на фрагменты, «оживлять графику» и т.п. 

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


Создание Web-сайтов 

Опыты этой главы предполагают использование последних версий программ - Adobe 
Photoshop CS2/CS и Adobe ImageReady CS2/CS. Сокращение CS означает Creative 
Suite Творческий 
набор. 

Архивы AdobePhotoshopCS2.zip и AdobePhotoshopCS.zip с файлами для установки 
пробных (trial) 30-дневных версий программ Adobe Photoshop и Adobe ImageReady 
версий 
CS2 и CS соответсвенно, вы можете найти на прилагаемом к книге компакт-диске, в 

папке Soft. Для установки программ достаточно распаковать нужный архив во 
временную 
папку на жестком диске, запустить на выполнение файл setup.exe и следовать 
инструкциям 
программы установки. • 

Версии CS2 и CS отличаются незначительно, причем программа Adobe ImageReady 
неизменилась 
совсем, но новая версия Adobe Photoshop пока не сильно распространена и 
работает не очень стабильно, поэтому мы приняли решение посторить изложение на 
основе версии CS - останавливаясь на отличиях в работе различных версий. 

(Отьмт J№1. Знакомство с рабочим окном программы 

Начнем работу с Adobe Photoshop. 

> Для запуска программы нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и 
из 
появившегося главного меню Windows выберите команду Программы • Adobe 
Photoshop CS (Programs • Adobe • Adobe Photoshop CS). 

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

При запуске программы Adobe Photoshop версии CS2 диалоги, которые могут 
появляться на экране будут другими. Но все эти диалоги никак не 
влияют на последующую работу с программой. 

Рис. 4.1. Начальный диалог пробной версии программы Adobe Photoshop CS 


Подготовка графики 

> Нажмите кнопку Try (Попробовать). При первом запуске программы на экране 
появятся 
диалоги о настройках Adobe Photoshop CS (Рис. 4.2 и Рис. 4.3). 

В первом диалоге сообщается, что первичный виртуальный диск программы Photoshop 
и 
файл подкачки Windows находятся в одном и том же разделе жесткого диска и 
предлагается 
назначить для первичного виртуального диска Photoshop другой раздел жесткого 
диска или, еще лучше, другой физический жесткий диск (Рис. 4.2). 

Adobe Photoshop 

You currently have Adobe Photoshop's primary Scratch and Windows' 
primary paging file on the same volume, which can result in reduced 
performance. It is recommended that you set Adobe Photoshop's primary 
Scratch volume to be on a different volume, preferably on a different 
physical drive. 

Рис. 4.2. Диалог с предложением назначить другой жесткий диск 
для первичного виртуального диска Photoshop 

Виртуальные диски программы Photoshop (Scratch disks) используются тогда, когда 
для 
выполнения операции не хватает оперативной памяти. В диалоге Preferences 
(Настройки), 
который вызывается с помощью команды меню Edit • Preferences • Plug-Ins & 
Scratch Disks (Правка • Настройки • Плагины и виртуальные диски) можно 
назначить 
до 4-х виртуальных дисков. Их рекомендуется назначать на наиболее свободных и 
нефрагментированных 
жестких дисках. 

> Нажмите кнопку О К, чтобы закрыть диалог. 

Adobe Photoshop 

На экране появится диалог-запрос Adobe Color settings for Photoshop б will be 
configured using default 
settings. 

Photoshop о настройке параметров цвета 

Do you wish to customize your color settings now? 

(Рис. 4.3). 

В этом диалоге программа сообщает, что цветовая 
конфигурация будет установлена по 


Рис. 4.З. Диалог-запрос о настройке 

умолчанию. Задача настройки цветовой кон


параметров цвета 

фигурации состоит в том, чтобы, по возможности, 
сохранить идентичность цвета на всех стадиях его обработки и приблизить 
видимые на экране цвета к тем, которые будут напечатаны принтером. Если вы 
желаете 
выполнить собственную настройку цвета, то следует нажать кнопку Yes (Да), а 
чтобы принять установки по умолчанию - кнопку No (Нет). При необходимости вы 
сможете выполнить настройку цвета позднее, выбрав команду меню Edit • Color 
Settings (Правка • Настройка цвета). 

>- Нажмите кнопку No (Нет), чтобы закрыть диалог о настройке параметров цвета. 
На экране появится диалог, из которого вы можете перейти к руководствам по 
использованию программы, настройке цвета и узнать о новых возможностях 
программы 
(Рис. 4.4). 

Если сбросить флажок Show this dialog at startup (Показывать этот диалог при 
запуске), 
то диалог больше появляться не будет. 

>- Нажмите кнопку Close (Закрыть). На экране появится рабочее окно программы 
Photoshop (Рис. 4.5). 


Создание Web-сайтов 

Tutorials S3 
Learn the Basics 

h. 
Advanced Techniques (Online) 

Working With What's New 

1

Tips and Tricks 

Tips and Tricks From the Experts 

Q. 
Color Management Setup 
Setting Up Color 

What's New 
Т|!§ New Features At A Glance 

^ ) New Feature Highlights 

t& What's New Movie (Online) 

Г7 Show Wi d*log *t s I ii tup 

Puc. 4.4. Диалог для знакомства с программой 

Первая строка рабочего окна программы Adobe Photoshop - строка заголовка. В ней 
отображается 
название программы и слева от него значок системного меню, команды которого 
предназначены для перемещения, изменения размеров и представления окна, а также 

для его закрытия. У правого края строки заголовка располагаются три кнопки: [Г] 
- для 
сворачивания, [Н] - для разворачивания и [х] - для закрытия окна программы. 

Кнопка 


Значок Кнопка 

Кнопка 


системного Заголовок Полоса разворачивания закрытия 

сворачивания окна 


меню окна меню 
4 


Fjfe У * Image Uyer Select Filter Y«w Window Help 

Feilher; I Op; ! D Anli-jlijs«dj Sty»: [Ham»! 

Панель параметров 
(Option Bar) 

Рис. 4.5. Рабочее окно программы Adobe Photoshop 


Подготовка графики 97 
Под строкой заголовка расположена полоса меню, содержащая 
группы команд управления программой. Для выбора какой-либо 
команды меню следует щелкнуть мышью на названии группы, а 
затем в появившемся подменю - на имени нужной команды. 
Ниже полосы меню расположена панель параметров (Options Bar), 
на которой в процессе работы будут отображаться доступные для 
изменения параметры выбранного инструмента. 
Основную часть рабочего окна Adobe Photoshop занимает рабочая 
область, у левого края которой находится панель инструментов 
(Tools) (Рис. 4.6). Инструменты этой панели предназначены для создания, 
редактирования и обработки изображения. Каждая кнопка 
этой панели представляет или отдельный инструмент, например, 
[•*]- Move Tool (V) (Инструмент «Перемещение» (V)1), \\\ Magic 
Wand Tool (W) (Инструмент «Волшебная палочка» (W)) или несколько 
инструментов, например, [О] - Rectangular Marquee Tool (M) (Инструмент 
«Прямоугольная область» (М)), [.^] - Lasso Tool (L) (Инструмент 
«Лассо» (L)). В последнем случае в правом нижнем углу 
кнопки инструмента находится маленький черный треугольник. 
Здесь и далее английские названия кнопок и других элементов 
управления это 
всплывающая подсказка, которая появляется на 
экране при установке указателя мыши на кнопке, а английская буква 
в скобках рядом с названием инструмента - это клавиша, которая 
включает данный инструмент при включенном английском языке 
Рис. 4.6. Панель 
инструментов 
клавиатуры. (Tools) 

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

Большинство инструментов панели привычны для художника: кисть (Brush Tool (В)), 

карандаш (Pencil Tool (В)), ластик (Erazer Tool (E)). Но есть и такие, которые 
обычно 
используют фотографы, например, размытие/резкость/палец (Blur/Sharpen/Smudge 
Tool (R)), осветлитель/затемнитель/губка (Dodge/Burn/Sponge Tool (О)). 

Инструменты левого ряда панели Tools имеют следующее назначение: 

[ГГЦ - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)) 
создает 
выделенную область прямоугольной формы. Этой же кнопкой включаются 
и другие инструменты, создающие области правильной формы: [О] - Elliptical 
Marquee Tool (М) (Инструмент «Эллиптическая область» (М)) - создает область 
эллиптической формы; Single Row Marquee Tool (Инструмент «Однострочная 
область») и Single Column Marquee Tool (Инструмент «Одноколоночная область
») - позволяют выделить соответственно строку или колонку высотой или 
шириной в 1 пиксел. 

1 Здесь и далее: латинская буква рядом с названием, в данном случае (V) - это 
клавиша быстрого 
выбора инструмента. 


Создание Web-сайтов 

- Lasso Tool (L) (Инструмент «Лассо» (L)) - выделяет область произвольной формы.
 
Этой же кнопкой включаются инструменты [§ ] - Polygonal Lasso Tool (L) 
(Инструмент 
«Многоугольное лассо» (L)), создающий выделенную область в форме многоугольника 

и |^ J - Magnetic Lasso Tool (L) (Инструмент «Магнитное лассо» (L)), 
создающий выделенную область посредством привязки к резким границам 
изображения. 
- Crop Tool (С) (Инструмент «Рамка» (С)) - позволяет кадрировать изображение, 
обрезав его края. 
- Healing Brush Tool (J) (Инструмент «Лечащая кисть» (J)) - позволяет исправить 

дефекты изображения, делая их неотличимыми от окружающих частей картинки. 
Этой же кнопкой включаются инструменты [©] - Patch Tool (J) (Инструмент 
«Заплатка
» (J)), который позволяет заменить выбранную область пикселами из другой 
области, и \W\ - Color Replacement Tool (J) (Инструмент «Замена цвета» (J)), 
который 
упрощает замену указанного цвета. В версии CS2 в этой группе появилось два 
новых иструмента: ly^j - Spot Healing Tool (J) (Инструмент «Кисть лечащая 
пятна» 
(J)) и 15 ] - Red Eye Tool (J) (Инструмент «Красный глаз» (J)), а иснтрумент 
Color 
Replacement Tool (J) (Инструмент «Замена цвета» (J)) перенесен в группу выбора 
кистей и обзначается кнопкой [§f}- 
Clone Stamp Tool (S) (Инструмент «Штамп» (S)) - позволяет воспроизводить точные 

или модифицированные копии элементов изображения и цветовых образцов в 
том же изображении или в другом документе. Щ$\ - Pattern Stamp Tool (S) 
(Инструмент 
«Штамп узора» (S)), который позволяет рисовать выбранным узором. 
| - Erazer Tool (Е) (Инструмент «Ластик» (Е)) - подобно ластику, стирает 
изображение. 
Этой кнопкой включается также инструмент |&?| - Magic Erazer Tool (E) 
(Инструмент 
«Волшебный ластик» (Е)) - позволяющий, указав любую точку на рисунке, сделать 
прозрачными остальные области с таким же цветом и \&.\ - Background Erazer 
Tool (E) (Инструмент «Фоновый ластик» (Е)), который определяет цвета в том 
месте, 
где прошла кисть, ищет аналогичные цвета по всему изображению и удаляет их. 

- Blur Tool (R) (Инструмент «Размытие» (R)) - позволяет смягчать слишком резкие 

границы или области в изображении, уменьшая контраст между пикселами. 
Включающийся 
этой же кнопкой инструмент | Д] - Sharpen Tool (R) (Инструмент «Резкость
» (R)) повышает четкость изображения, делая слишком мягкие границы более 
резкими, а инструмент [.] - Smudge Tool (R) (Инструмент «Палец» (R)) - 
имитирует 
размазывание пальцем свежей краски. 
| - Path Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяет 
выбирать 
контуры. Этой же кнопкой включается инструмент | ^ J - Direct Selection Tool 
(A) 
(Инструмент «Прямой выбор» (А)), который позволяет выбирать сегмент контура. 

- Pen Tool (Р) (Инструмент «Перо» (Р)) - создает контур любой формы. Этой 
кнопкой 
включаются также инструменты, позволяющие добавлять и удалять точки привязки 
на линии и преобразовывать плавные кривые в ломаные и наоборот. 
] - Notes Tool (N) (Инструмент «Комментарии» (N)) - создает текстовые 
комментарии, 
которые могут быть добавлены к изображению. Этой кнопкой включается 


Подготовка графики 

также инструмент |Ф)] - Audio Annotation Tool (N) (Инструмент «Аудиокоммента


рий» (N)), позволяющие добавлять к изображению аудиокомментарий. 

[^1 - Hand Tool (Н) (Инструмент «Рука» (Н)) - применяется для перемещения 
изображения, 
которое не умещается в рабочем окне. 

В правом вертикальном ряду панели Tools содержатся следующие инструменты: 

[К{Г| - Move Tool (V) (Инструмент «Перемещение» (V)) - позволяет перемещать 
выделенные 
области и слои. 

\\\ - Magic Wand (W) (Инструмент «Волшебная палочка» (W)) - выделяет фрагменты 
изображения с учетом сходства цветов соседних пикселов. 

\^\ - Slice Tool (К) (Инструмент «Фрагмент» (К)) - позволяет разрезать 
изображение на 
фрагменты для ускорения их загрузки в браузер. При помощи другого инструмента — 

|У ] - Slice Select Tool (К) (Инструмент «Выбор фрагмента» (К)), который 
включается 
этой же кнопкой, можно изменять размеры фрагментов и перемещать их. 

\t/\ - Brush Tool (В) (Инструмент «Кисть» (В)) - используется для наложения 
мягких 
цветовых мазков. Этой же кнопкой включается инструмент \j?\ - Pencil Tool (В) 
(Инструмент «Карандаш» (В)), который позволяет рисовать произвольные линии с 
жесткими границами. 

\Ш\ - History Brush Tool (Y) (Инструмент «Кисть событий» (Y)) - создает копию 
или снимок 
изображения и затем закрашивает ею текущее изображение или его часть. Этой 
же кнопкой включается инструмент \W\ - Art History Brush (Y) (Художественная 
кисть событий (Y)), который позволяет рисовать стилизованными мазками, 
используя 
указанное предыдущее состояние изображения в качестве исходных данных. 

|3 j - Gradient Tool (G) (Инструмент «Градиент» (G)) - используется для 
создания плавных 
переходов от одного цвета к другому. Такой плавный переход художники называют 
растяжкой. Этой кнопкой включается также инструмент |<$»j - Paint Bucket 
Tool (G) (Инструмент «Заливка» (G)), который используется для заливки цветом 
выделенной области. 

[*Q - Dodge Tool (О) (Инструмент «Осветлитель» (О)) - осветляет отдельные 
участки 
изображения. Включающийся этой же кнопкой инструмент \Ф\ - Burn Tool (О) 
(Инструмент «Затемнитель» (О)) затемняет отдельные области, а инструмент |^jlj 
— 
Sponge Tool (О) (Инструмент «Губка» (О)) изменяет насыщенность цветов. 

)TJ - Horisontal Type Tool (T) (Инструмент «Горизонтальный текст» (Т)) - 
инструменты, 
которые включаются этой кнопкой, создают горизонтальные и вертикальные надписи, 

а также маски текста на изображении. 

\Ш\ - Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) - позволяет рисовать 
фигуры 
прямоугольной формы. Этой же кнопкой включаются инструменты: |Q ] Rounded 
Rectangle Tool (U) - для рисования прямоугольников со скругленными 
углами, j О j - Ellipse Tool (U) - для создания эллипсов и окружностей, [О] 
Polygon 
Tool (U) - для рисования многоугольников, |\ j - Line Tool (U) (Инструмент 
«Линия» (U)) - для создания прямых линий любой толщины со стрелками 

4* 


Создание Web-сайтов 

на концах, |^j - Custom Shape Tool (U) (Инструмент «Заказная форма» (U) - для 

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

\^\ - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цвета 
на рисунке 
и переопределения основного и фонового цветов. Этой же кнопкой включаются 
инструменты \t?\ - Color Sampler Tool (I) (Инструмент «Образец цвета» (I)), 
который позволяет перемещать/удалять образцы цвета и l^ l - Measure Tool (I) 
(Инструмент 
«Измеритель» (I)), который позволяет определять размеры линий и углов. 

[Щ] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) - используется для увеличения и 
уменьшения изображения на экране. 

Под указанными кнопками на панели инструментов (Tools) расположены два квадрата 
с 
образцами цвета. Левый верхний служит для установки и отображает цвет переднего 
плана 
(Set foreground color), а правый нижний - цвет фона (Set background color). 
Значок 
*\- Switch Foreground and Background Colors (X) (Переключатель цветов переднего 

плана и фона (X)) позволяет менять местами эти цвета. С помощью значка Щ - 
Default 
Foreground and Background Colors (D) (Цвета переднего плана и фона по умолчанию 
(D)) 
вы можете быстро выбрать черный цвет для переднего плана и белый - для фона. 

Под образцами цвета находятся две кнопки: Edit in Standard Mode (Q) 
(Редактирование 
в стандартном режиме (Q)) и Щ ] - Edit in Quick Mask Mode (Q) (Редактирование в 

режиме «Быстрая маска» (Q)) - соответственно для выключения и включения режима 
быстрой маски, позволяющего предохранить фрагменты изображения от изменения в 
процессе редактирования. 

Еще ниже располагаются три кнопки, предназначенные для быстрого переключения 
режимов 
просмотра рисунка: [S] - Standard Screen Mode (F) (Стандартный режим (F).|, 
[В] - Full Screen Mode with Menu Bar (F) (Полноэкранный режим с полосой меню 
(F)), 
[О]- Full Screen Mode (F) (Полноэкранный режим (F)). 

У нижнего края панели инструментов (Tools) расположена кнопка Edit in 
ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)), 
позволяющая 
быстро переключиться в программу Adobe ImageReady. 

Мы предполагаем, что все параметры программы Adobe Photoshop установлены по 
умолчанию, Т.е. так, как определили разработчики. Это возможно лишь в том 
случае, 
если после установки программы с ней еще не работали, так как в процессе работы 

программа запоминает все изменения параметров. Если же с программой уже 
работали 
и изменяли значения ее параметров, то перед выполнением дальнейших опытов 
целесообразно 
переустановить Adobe Photoshop или удалить все файлы настроек из папки 
Adobe Photoshop CS Settings (или Adobe Photoshop CS2 Settings), которую следует 

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

При первом запуске программы у правого края рабочей области находятся еще три 
небольших 
вспомогательных окна, в которых отображаются группы палитр (Palettes). 
В программах компьютерной графики значение слова «палитра» несколько расширено 
по сравнению с традиционным его толкованием - плоскостью для смешивания красок. 

В Adobe Photoshop содержатся различные палитры, имеющие самое разнообразное 
назначение: 
они позволяют выбирать цвета и стили, устанавливать параметры текста, 


Подготовка графики

перемещаться по изображению и получать необходимую информацию о размерах, 
положении, 
цветах объектов, работать со слоями, контурами, каналами и т.п. 

В процессе создания или редактирования изображения в рабочем окне программы 
Adobe Photoshop постоянно находятся панель инструментов (Tools) и необходимые 
для работы палитры. Их можно разместить рядом с обрабатываемым изображением, 
поверх него, если оно велико, или свернуть и поместить на краю рабочей области. 

Все операции с окнами палитр осуществляются обычными, принятыми в Windows, 
способами. Перемещение палитры выполняется посредством перетаскивания мышью 
заголовка окна. Для сворачивания палитры достаточно нажать кнопку [Г] в правом 
верхнем углу окна палитры, для разворачивания свернутой палитры - кнопку [О]. 
С помощью кнопки [х] вы можете закрыть палитру, если она не нужна, чтобы 
освободить 
место на экране. Вызвать закрытую палитру на экран можно с помощью 
соответствующей 
команды меню Window (Окно). 

Каждая палитра имеет собственный ярлык с названием, который располагается во 
второй 
строке окна палитры. Основные палитры Adobe Photoshop по умолчанию 
располагаются 
группами в трех окнах у правого края рабочей области. В верхнем окне слева 
направо находятся палитры Navigator (Навигатор), Info (Информация) и Histogram 
(Гистограмма); 
в среднем - Color (Цвет), Swatches (Каталог), Styles (Стили); в нижнем Layers 
(Слои), Channels (Каналы), Paths (Контуры), History (События), Actions 
(Действия). 
В каждом из окон отображается активная в данный момент палитра. Названия 
активных 
палитр выделены полужирным начертанием. Чтобы включить другую, неактивную 
в данный момент палитру, следует щелкнуть мышью на ее ярлыке. Любую палитру 
можно выделить из группы и поместить в отдельном окне. Для этого достаточно 
перетащить 
ярлык этой палитры в нужное место. Возможна также и обратная процедура 
совмещение 
палитр. 

У нижнего края рабочего окна находится строка состояния (Status Bar), 
предназначенная 
для отображения информации о текущем документе, рабочих дисках, активном в 
данный момент инструменте. Здесь могут появляться некоторые подсказки. 

Теперь, когда мы познакомились с рабочим окном Adobe Photoshop, переключимся в 
Adobe ImageReady и посмотрим, чем отличаются эти программы. 

>• Нажмите кнопку |_Ы§*НжО ~ ^i t in ImageReady (Shift+Ctrl+M) (Редактировать в 

ImageReady (Shift+Ctrl+M)) на панели инструментов (Tools). Будет запущена 
программа 
Adobe ImageReady, и на экране появится ее рабочее окно (Рис. 4.7). 

Как видите, элементы рабочего окна Adobe ImageReady аналогичны уже 
рассмотренным 
элементам рабочего окна Adobe Photoshop. Набор инструментов на панели 
инструментов 
(Tools) практически такой же, как и в Adobe Photoshop. Но, кроме того, имеются 
новые 
кнопки для работы с картами навигации, которых нет в Adobe Photoshop: |Ц*У| 
Rectangle 
Image Map Tool (P) (Инструмент «Прямоугольная область карты навигации» 
(Р)) и \*$*)\ - Image Map Select Tool (J) (Инструмент «Выбор области карты 
навигации» 
(J)). Кнопкой [§ ] включаются также инструменты [^j] - Circle Image Map Tool 
(P) (Инструмент 
«Круглая область карты навигации» (Р)) йц ] - Polygon Image Map Tool (P) 
(Инструмент «Многоугольная область карты навигации» (Р)) - для указания формы 
участка 
карты навигации. 


102 Создание Web-сайт :i; 

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

2 - Toggle Image Maps Visibility (А) (Выключение/включение отображения 
навигационных карт (А)); 

Щ - Toggle Slices Visibility (Q) (Выключение/включение отображения фрагментов 
(Q)) 

Вл Edit Image Lsyei SliEe< Safect R M yiew »ndo« Help 
[о7« ID „|| |н»ак.|; |


И 

».У. 

т а. 

\ я. 

ИЗ 

из

еш на 

\ Wtb C 

h». 

aaa 

i о. о i m a a 

Рис. 4.7. Рабочее окно программы Adobe ImageReady 

|ffi)|- Rollover Document (Y) (Предварительный просмотр документа (Y)); 

[Ml - Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в 
браузере по 
умолчанию (Ctrl+Alt+P)). 

С помощью кнопки [fjl^yfl - Edit in Photoshop (Shift+Ctrl+M) (Редактировать в 
Photoshop) 
(Shift+Ctrl+M)) у нижнего края панели инструментов (Tools) вы можете 
переключиться в 
Adobe Photoshop. 

У правого края экрана в Adobe ImageReady располагаются 11 палитр в четырех 
окнах. 

После того как мы познакомились с рабочим окном программы Adobe ImageReady, его 

можно закрыть, так как очередные опыты мы будем выполнять в Adobe Photoshop. 

>• Выберите команду меню File • Exit (Файл • Выход). Программа Adobe ImageReady 

закроется. Вы возвратитесь к рабочему окну Adobe Photoshop. 

Основная часть рабочей области Adobe Photoshop пока ничем не заполнена. Это, 
однако, 
не значит, что на ней можно что-либо нарисовать. У вас не будет работать ни 
один инструмент, 
пока не будет создан новый документ или же открыт существующий. 


Подготовка графики 

шА®2. Создание нового рисунка 


При создании нового документа необходимо определить его параметры: имя, размеры,
 
цветовой режим, цвет фона. 
>• Выберите команду меню File • New (Файл • Новый) или нажмите комбинацию кла


виш ir^n+liNl. На экране появится диалог New (Новый) (Рис. 4.8). 

Name: |untitted-l| 

г Beset: | Clipboard 

Width: 1800 II pixels 

Ы 

Height: 1600 

||pw* Ы 

&esdution:|72 11 pixeWlnch 

Ы 

Color Mode: iRGBColorJ i t 1В bit 

hi 

Image Size: 

Background Contents: | White 

1,37M 

(.} Advanced 

Рис. 4.8. Диалог New (Новый) 

В поле ввода Name (Имя) в верхней части диалога можно указать имя создаваемого 
документа. 
По умолчанию предлагается Untitled-1 (Без имени-1). Не будем пока изменять 
его. Мы сможем сделать это в дальнейшем, при сохранении рисунка. 

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

В следующих опытах этой главы мы подготовим баннер - рекламный рисунок - для 
рекламы 
в Интернете сайта, созданного нами в первой главе. Как правило, баннер - это 
графическое изображение прямоугольной формы в формате GIF или JPEG. Баннер 
помещается 
на Web-странице и имеет ссылку на сайт рекламодателя. В последнее время в 
связи с бурным развитием баннерной рекламы в Интернете, предпринимаются попытки 

стандартизировать размеры баннеров. Первым шагом стандартизации стали 
рекомендации 
по размеру баннеров, предложенные Internet Advertising Bureau (Бюро рекламы 
в Интернете) (http://www.iab.net/) совместно с CASIE (The Coalition for 
Advertising 
Supported Information & Entertainment) (Коалиция рекламной поддержки информации 
и 
развлечений), приведенные в таблице ниже. 

Размер баинера Тип баннера 

в пикселах 

468x60 Full Banner (Стандартный баннер) 

234x60 Half Banner (Баннер половинного размера) 

88x31 Micro Bar (Микро полоса) 

120x90 Button 1 (Кнопка 1) 


104 .Создание Web-сайтов 
Размер баннера 
в пикселах 
120x60 
120x240 
125x125 
Тип баннера 
Button 2 (Кнопка 2) 
Vertical Banner (Вертикальный баннер) 
Square Banner (Квадратный баннер) 

728x90 Leaderboard («Перетяжка» вверху страницы) 

Воспользовавшись этими рекомендациями, создадим стандартный баннер размером 
468 х 60 пи кселов. 

Напомним, что пикселы -это точки, из которых строится растровое 
изображение. Размеры рисунка определяются количеством пикселов по 
горизонтали (Width) и вертикали (Height). Плотность пикселов в изображении 
характеризует графическое разрешение, которое измеряется в 
пикселах на дюйм или в пикселах на сантиметр. Чем больше графическое 
разрешение, тем выше качество изображения. Число экранных пикселовна 
единицу длины определяетразрешающую способность монитора, которая 
зависит от размера экрана и от заданной размерности экранной матрицы. 
Подробнее об этом читайте в главе «Графика для Web-страниц». 

В Adobe Photoshop предусмотрена возможность указания размера рисунка в 
различных 
единицах: сантиметрах (cm), дюймах (inches), пикселах (pixels) и др. Эти 
единицы можно 
выбрать в открывающихся списках, расположенных справа от полей ввода Width 
(Ширина) и Height (Высота). По умолчанию предлагается измерять размеры в 
сантиметрах (cm). 

>• В поле ввода Width (Ширина) введите ширину стандартного баннера - 468 
пикселов. 

>• В открывающемся в строке Width (Ширина) выберите pixels. 

>• В поле ввода Height (Высота) введите высоту стандартного баннера - 60 
пикселов. 

>• В открывающемся в строке Height (Высота) выберите pixels. 

Параметр Resolution (Разрешение) определяет разрешение создаваемого рисунка - 
количество 
пикселов на дюйм. . 

В открывающемся списке Color Mode (Режим цвета) программа предлагает выбрать 
цветовой 
режим изображения, определяемый глубиной цвета или битовым разрешением, т.е. 
количеством бит на один пиксел. По умолчанию предусмотрен режим RGB Color (Цвет 

RGB), в котором на каждый пиксел отводится 24 бита (по 8 бит на каждый из трех 
цветов), 
что дает возможность закодировать 16,7 миллиона оттенков. Этот режим иногда 
называют 
TrueColor (Истинный цвет), так как он достаточно точно отображает цветовое 
многообразие 
нашего мира. Именно данный режим наиболее пригоден для изображений, 
предназначенных 
для показа на экране монитора. В соседнем открывающемся списке для режима 
RGB можно выбрать 16 бит на каждый из трех цветов, т.е. 48 бит на один пиксел. 

Открывающийся список Background Contents (Содержимое фона) позволяет указать 
цвет фона создаваемого рисунка: White (Белый), Background Color (Цвет фона) т.е.
 цвет, 
установленный на образце Background Color (Цвет фона) панели инструментов 
(Tools), 
или Transparent (Прозрачный). 


Подготовка графики 10Е 

Убедитесь, что в открывающемся списке Background Contents (Содержимое фона) 
выбрано значение White (Белый), чтобы создать новый рисунок с белым фоном. 

Нажатием кнопки ОК закройте диалог New (Новый). В рабочей области программы 
появится окно нового документа с именем Untitled-1 (Без имени-1) с белым цветом 

фона и заданного размера - 468 х60 пикселов. 

Если окно Untitled-1 частично перекрыто панелью инструментов (Tools), 
перетащите 
его вправо, чтобы оно было видно полностью (Рис. 4.9). 

Eile EcH Image Layer Select Filler View Window Help 

\\r I Style: |Norrnd 

tl A 

i +• ?.: 

Ф 
A 


w. 
m 

k «.. 
\ T 


4 

a 
i/ 


ч 

»: шиш 

•IB 
ESQ 

©>(* 

р. аЗ а С в! ЗГI 

• Drew м!«с1юп from ctnUr of subtract from existing i«l«clion. 
PMC. 4.9. Новый документ создан 

В Adobe Photoshop каждый рисунок имеет свое собственное отдельное окно. Это 
позволяет 
работать одновременно с несколькими изображениями. 

В заголовке окна созданного документа, кроме его имени - Untitled-1, указан 
масштаб 
изображения, вероятней всего - 66,7%, который зависит от установленного в 
данный 
момент разрешения видеокарты вашего компьютера, а в скобках - цветовой режим 
RGB/
8 (RGB, по 8 бит на каждый цвет). Текущий масштаб изображения - 66,67% - вы 
можете видеть также в левом нижнем углу строки состояния (Status Bar). 

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

Чтобы с документом было удобно работать, увеличим масштаб отображения до 100%. 

>• Дважды щелкните мышью на поле с отображением текущего масштаба - 66,67% в 
левом нижнем углу строки состояния (Status Bar). Это значение будет выделено 
темным цветом. 


Создание Web-сайтов 

> Введите с клавиатуры новое значение масштаба отображения документа - 100 - и 
на


жмите клавишу [[Enter]. Масштаб отображения увеличится, и в окне документа 
появятся 

i 

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


части рисунка, не помещающиеся в окне. 

Но использовать полосы прокрутки для созданного документа малого размера 
нецелесообразно. 
Удобнее будет увеличить размеры окна документа. Это выполняется так же, 
как обычно изменяется размер окна в Windows. 

> Установите указатель мыши на правом нижнем углу рамки окна документа так, 
чтобы 
указатель мыши принял форму двунаправленной стрелки \ . 

Нажмите и удерживайте левую кнопку мыши. 

Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз при


мерно на расстояние, равное одной третьей части ширины и высоты окна документа. 


Размер окна увеличится. 

Отпустите левую кнопку мыши. 

Если необходимо, повторно откорректируйте размер окна так, чтобы полосы про


крутки отсутствовали (Рис. 4.10). 

fdUntitled 1 & 1003: (RGB/0) 

Рис. 4.10. Размер окна документа увеличен 

Справа от значения масштаба - 100% - в строке состояния (Status Bar) выводится 
информация 
о текущем документе: Doc: 82,ЗК /0 bytes. Первое число - 82.3К - объем 
документа 
в килобайтах. Этот объем программа вычисляет как произведение размеров 
документа 
в пикселах и глубины цвета. Второе число, после дробной черты - это объем 
оперативной памяти, занимаемой неуплотненным файлом, с учетом дополнительных 
слоев и альфа-каналов. Пока изображение в документе отсутствует, это число -0 
bytes 
(0 байт). Подробнее о слоях и альфа-каналах мы поговорим позднее. Правее 
информации 
о размере документа выводятся сведения о выбранном в данный момент инструменте 
на панели инструментов (Tools). 

€<пл*т, J№3. Рисуем геометрические фигуры 

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

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


Подготовка графики 

области с последующей заливкой или обводкой контура цветом. Это позволит 
быстрее 
освоить весь арсенал инструментов Adobe Photoshop. 

Сначала нарисуем прямоугольник, воспользовавшись для этого инструментом |[~].| 
Rectangular 
Marquee Tool (М) (Инструмент «Прямоугольная область» (М)). 

>• Убедитесь, что на панели инструментов (Tools) выбран инструмент |[llj 


Rectangular Marquee Tool (M) (Инструмент «Прямоугольная область» (М)): его 

кнопка должна быть нажата. В противном случае -нажмите эту кнопку. 

>• Установите указатель мыши в окне документа Untitled-1 вблизи левого верхнего 
его 
края. Указатель мыши примет форму крестика + . 

>• Нажмите и удерживайте левую кнопку мыши. 

Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз, примерно 

к середине нижней стороны окна документа. В окне рисунка появится прямоугольная 

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

> Отпустите левую кнопку мыши. На рисунке будет создана прямоугольная область 
выделения (Рис. 4.11). 

Рис. 4.11. Прямоугольная область выделения создана 

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

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


И 1 

удерживать нажатой клавишу I 
IIAlt I. Чтобы нарисовать квадрат с равными сторонами, 
следует при перемещении указателя мыши удерживать нажатой клавишу 

Для окончания создания прямоугольной фигуры следует обвести контур выделения 
или 
заполнить выделенную область цветом. Но предварительно цвет нужно выбрать. 
Adobe 
Photoshop располагает несколькими способами выбора цвета. Наиболее простой 
-выбор 
из образцов палитры Swatches (Каталог). 

> Щелкните мышью на ярлыке Swatches (Каталог) в среднем окне палитр у правого 
края 
экрана. Если данный ярлык отсутствует, выберите команду меню Window • Swatches 
(Окно • Каталог). На экране появится палитра Swatches (Каталог) (Рис. 4.12). 


Создание Web-сайтов 

[—|x 

jLColor 1 Swalchej\Sty!es ^t 

ИИ 

f 
f 
•I 

i •1

Ml 

9R 

Ш1

в t 

Pz/e. 4.72. Палитра Swatches (Каталог) 
Выберем в этой палитре цвет для заливки прямоугольника. 
> Установите указатель мыши на четвертом слева в верхнем ряду образце голубого 
цвета. При этом указатель мыши примет форму пипетки fi, и вы увидите 
всплывающую 
подсказку с названием цвета - RGB Cyan (Голубой RGB). 
> Щелкните мышью в этом месте. Цвет будет выбран и появится на образце цвета 
переднего 
плана (Set foreground color) панели инструментов (Tools). 

Чтобы выбрать цвет для фона, следует щелкнуть мышью на образце палитры 
Swatches; 

(Каталог) при нажатой клавише I! А^ I. 

Теперь можно с помощью инструмента \&\ - Paint Bucket Tool (G) (Инструмент 
«Залив 

ка» (G)) залить выбранным цветом выделенную прямоугольную область. 
>- Нажмите и удерживайте кнопку |ClJ - Gradient Tool (G) (Инструмент «Градиент» 
(G)) 
на панели инструментов (Tools). Появится дополнительная панель с перечнем 
инструментов, 
которые включаются данной кнопкой. 
>• Щелчком мыши выберите инструмент |<$»J - Paint Bucket Tool (G) (Инструмент 

«Заливка» (G)). Его значок отобразится на кнопке, а кнопка будет нажата. 
Теперь можно выполнить заливку. 
>• Установите указатель мыши, который примет форму <J>, внутри прямоугольной об


ласти выделения. 
>• Щелкните мышью в этом месте. Выделенная область будет залита выбранным 
цветом 
(Рис. 4.13). 

filUntitled-1 @ 100% (RGB/8) 

11 

i 

ii 

Рис. 4.13. Область выделения залита цветом 

Теперь обведем контур прямоугольника, но другим цветом, для выбора которого 
воспользуемся 
палитрой Color (Цвет), предоставляющей более широкие возможности указания 
цвета. 


Подготовка графики 

> Щелкните мышью на ярлыке Color (Цвет) в среднем окне палитр. Вместо палитры 
Swatches (Каталог) появится палитра Color (Цвет) (Рис. 4.14). 

Рис. 4.14. Палитра Color (Цвет) 

На данной палитре представлены цветовые полоски с ползунковыми регуляторами в 
соответствии 
с действующим цветовым режимом RGB. Напомним, что в цветовой модели RGB 
любой цвет образуется смешиванием трех основных компонентов - красного, 
зеленого и 
синего. Каждый ползунковый регулятор позволяет управлять одной из составляющих 
цвета: 
R - красной, G - зеленой, В - синей. Количество каждой цветовой составляющей в 
цвете 
определяется целым числом от 0 до 255 и отображается в полях ввода справа от 
ползунковых 
регуляторов. Минимальное значение -0 - означает полное отсутствие составляющей, 
а 
максимальное - 255 - максимальную ее яркость. Цвет, все три составляющие 
которого равны 
нулю, является абсолютно черным. Если же все три составляющие равны 255, то 
цвет белый. 


Для заливки прямоугольника мы выбрали в палитре Swatches (Каталог) голубой цвет,
 и 
теперь этот цвет отображается в палитре Color (Цвет) на квадрате образца цвета 
переднего 
плана, обведенном двойной рамкой, слева от ползунковых регуляторов. Второй 
квадрат, правее и ниже, отображает цвет фона. Голубой цвет переднего плана, как 
это 
видно в палитре Color (Цвет), состоит из 255 частей зеленого, такого же 
количества синего 
и полного отсутствия красного цвета. Числовые значения его цветовых 
составляющих 
отображаются в полях ввода справа от соответствующих ползунковых регуляторов. 

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

составляющих которого равны нулю. 

>• Переместите ползунковые регуляторы G (Зеленый) и В (Синий) влево так, чтобы 
в 
полях ввода отобразились значения 0 (ноль). На образцах цвета переднего плана 
(Set 
foreground color) на панели инструментов (Tools) и в палитре Color (Цвет) вы 
увидите 
выбранный черный цвет. 

Выбрать цвет вы можете также, щелкнув мышью, указатель которой примет форму 
пипетки, 
на цветовой полосе в нижней части палитры Color (Цвет). 

Установить черный цвет переднего плана и белый цвет фона, т.е. цвета по 
умолчанию, 
можно также щелкнув мышью на значке Щ - Default Foreground and Background 
Colors (D) (Цвета переднего плана и фона по умолчанию) панели инструментов 
(Tools). 

Теперь можно выполнить обводку контура выделения черным цветом. 


Создание Web-сайтов 

> Выберите команду меню Edit • Stroke 
(Правка • Обвести). На экране появится диа


г Stroke

лог Stroke (Обводка) (Рис. 4.15). 

Width: llpx 

В поле ввода Width (Толщина) следует указать 
толщину обводки. Оставим предлагаемое Color: 
по умолчанию значение 1 рх (1 пиксел) без 

i— Location

изменения. 

1 С Inside ©Center О Outside 

В поле Color (Цвет) указан черный цвет передне


~ Blending

го плана, который будет использован для обвод


Mode: [Normal

ки. При необходимости вы можете выбрать дру


гой цвет, щелкнув мышью на этом поле. 

Opacity: 1100 | % 

Группа переключателей Location (Положение) О ЕДОЮ»Тгагерашх* 
позволяет выбрать положение линии обводки 
относительно контура выделения: Inside (Внут


Рис. 4.15. Диалог Stroke (Обводка) 

ри), Center (По центру), Outside (Снаружи). 

Открывающийся список Mode (Режим) поз-воляет выбрать режим наложения пикселов. 

В поле ввода Opacity (Непрозрачность) можно указать уровень непрозрачности 
цвета 
Значение 100% означает полную непрозрачность. 

>• Оставив все значения, предлагаемые по умолчанию, закройте диалог Stroke 
(Обвод 
ка) нажатием кнопки ОК. 

> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что 

бы снять выделение. Изображение в окне документа примет вид как на Рис. 4.16. 

" К Unfitted 1 @ 100% (RGB/8) 

Рис. 4.16. Обводка прямоугольника выполнена 

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

эллипса или круга используется инструмент (О] ~ Elliptical Marquee Tool (M) 
(Инструмент 
«Эллиптическая область» (М)). Предварительно его следует выбрать. 

> Установите указатель мыши на кнопке [П]] —Rectangular Marquee Tool (M) 
(Инструмент 
«Прямоугольная область» (М)) на панели инструментов (Tools). 

> Нажмите и удерживайте клавишу li Ai l I. 

>• Не отпуская клавишу l 
ll А" I. щелкните мышью на кнопке []Д] -Rectangular Marquee 
Tool (М) (Инструмент «Прямоугольная область» (М)). Будет выбран инструмент |Q,| 
-
Ellipticaf Marquee Tool (M) (Инструмент «Эллиптическая область» (М)), и вы 
увидите 
его нажатую кнопку. 


Подготовка графики 

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


• бы появившаяся пунктирная эллиптическая область выделения расположилась в 
правой 
части окна документа. 
>• Отпустите левую кнопку мыши. Эллиптическая область выделения будет 
закреплена 
(Рис. 4.17). 

Рис. 4.17. Эллиптическая область выделения создана 

Чтобы нарисовать выделенную область в виде круга, следует при перемещении мыши 
удерживать нажатой клавишу l[shlttl. Для рисования эллиптической области от 
центра 
необходимо при перемещении указателя мыши удерживать нажатой клавишу l 
ll Al t I. 
Для выбора цвета заливки эллипса воспользуемся еще одним, новым способом. 
>• Щелкните мышью на образце цвета переднего плана (Set foreground color) на 

панели инструментов (Tools). На экране появится диалог Color Picker (Палитра 
цветов) (Рис. 4.18). 

Select foreground color: OK J 

Cancel ] 

®H:

 l. _j° ®l-|° 

OS: l._J% Oa; |° 

OB: |0 [% Ob: \0_ 

OR: [Я__ С175 j % 

OG: [0 M:|68 j % 

OB: [.__ Y:|67 J% 

О Only Web Colors 

Рис. 4.18. Диалог Color Picker (Палитра цветов) 


Создание Web-сайтсш 

112 

Этот диалог предоставляет самые широкие возможности по установке цвета. 
Определять 
цвет можно визуально по спектральной шкале и цветовому полю или с помощью ввода 

числовых значений составляющих любой из используемых цветовых моделей. 
Спектральная 
шкала и цветовое поле выводят на экран цвета в двух моделях - RGB и HSB. 

В цветовой модели HSB цвет описывается тремя составляющими - цветовым оттенком 
Н (Hue), насыщенностью S (Saturation) и яркостью В (Brightness). 

Спектральная шкала - узкая вертикальная полоса в центральной части диалога - 
отображает 
цветовой диапазон включенной цветовой составляющей: Н (Цветового оттенка), 
S (Насыщенности), В (Яркости), R (Красной), G (Зеленой), В (Синей). По 
умолчанию 
включена составляющая Н (Цветовой оттенок). 

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

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

>- Установите переключатель S (Насыщенность). Вертикальная полоса отобразит 
насыщенность 
в диапазоне от 0% внизу до 100% вверху. 

>• Переместите ползунок регулятора вертикальной полосы максимально вверх. 
Теперь 
цветовое поле отображает по горизонтали спектр цветовых оттенков, а по 
вертикали 
- яркость. 

>• Установите переключатель R (Красный), включив таким образом красную 
составляющую. 
На спектральной шкале будет представлен цветовой диапазон красной составляющей 
от 0 в нижней точке до 255 - в верхней, а в цветовом поле - соответственно 
диапазон синей составляющей по горизонтальной оси и зеленой - по вертикальной. 

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

>• Выберите указанным способом любой цвет для заливки эллипса. 

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

Если выбранный цвет не входит в палитру Web, то справа от этих полей появится 
предупреждающий 
значок в виде куба ЕЙ, а под значком - образец ближайшего цвета из 
Web-палитры. Чтобы выбрать безопасный цвет Web, достаточно щелкнуть мышью на 
образце 
или на значке ©. Но сейчас этого делать не следует. Цвета будут заменены в 
процессе оптимизации. Напомним, что безопасная Web-палитра содержит 216 цветов, 

которые гарантировано отображаются всеми браузерами во всех операционных 
системах. 

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


Подготовка графики 

CMYK-эквивалентом выбранного цвета. Этот эквивалент можно принять, если 
щелкнуть 
мышью на треугольнике или образце. 

В цветовой модели CMYK цвет определяется четырьмя основными составляющими: 
голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (Black). Эта 
модель 
используется преимущественно для создания изображений, предназначенных для 
полиграфического 
исполнения. Ее цветовой охват значительно меньше, чем цветовой охват 
модели RGB. Если изображение создается для Web, т.е. для просмотра на экране 
монитора, 
то использовать цвета, входящие в охват модели CMYK нет необходимости. 

После выбора цвета в поле ввода # в нижней части диалога отобразится его 
шестнадцатеричное 
числовое значение, каждые два символа которого слева направо характеризуют 
значения соответственно красной, зеленой и синей RGB-составляющей. 

Если установить флажок Only Web Colors (Только цвета Web), то на спектральной 
шкале 
и в цветовом поле будут отображаться только безопасные цвета Web. Подробно о 
назначении этих цветов мы уже говорили в предыдущей главе. 

Нажатие кнопки Custom (Пользовательские) вызовет на экран диалог Custom Colors 
(Пользовательские цвета) (Рис. 4.19), в котором вы можете выбрать подходящий 
цвет из 
различных цветовых библиотек. 

Custom Colors 

Book: [PANTONE®_soMco3ted_ 

ZJd 

~СапсёГ~| 

PANTONE 7401 С 

PANTONE 7402 С 

PANTONE 7403 С 

PANTONE 7404 С 

Type a color name to 
select it in the color list. 

Рис. 4.19. Диалог Custom Colors (Пользовательские цвета) 

> Нажав кнопку ОК, закройте диалог Color Picker (Палитра цветов). Выбранный 
цвет 
отобразится на образцах в палитре Color (Цвет) и на панели инструментов (Tools).
 

Зальем цветом выделенную эллиптическую область следующим образом. 

Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог 
Fill 
(Заливка) (Рис. 4.20). 

В открывающемся списке Use (Использовать) вы можете выбрать, какой цвет 
использовать 
для заливки: Foreground Color (Цвет переднего плана), Background 
Color (Цвет фона), Black (Черный), 50% Gray (50% серого), White (Белый) и 
другие 
возможности. 


Создание Web-сайтов 

Г Contents 
Use: | Foreground Color 

Custom Pattern: 

- Blending • 
Mode: | Normal E l 

Opacity: 1100 | % 

D Besafye Ti areparercy 

Puc. 4.20. Диалог Fill(Заливка) 

>• Оставив установленный по умолчанию цвет переднего плана (Foreground Color), 
закройте диалог Fill (Заливка) нажатием кнопки ОК. Выделенная область будет 
заполнена 
выбранным цветом. 

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

залить ее цветом фона. Посмотрим, как это выполнить практически. 

Не отменяя выделения эллиптической облас


Contract Selection 

ти, выберите команду меню Select • Modify • 
Contract (Выделение • Модификация • Contract By: | l j pixels 
Сжать). На экране появится диалог Contract 
Selection (Сжатие выделения) (Рис. 4.21). 


Puc. 4.21. Диалог Contract

В поле ввода Contract By (Сжать на) введи


Selection (Сжатие выделения)

те 16 пикселов. 

> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения). 
Эллиптическая 
область выделения будет сжата на 16 пикселов. 

Чтобы расширить область выделения следует выбрать команду меню Select • Modify 
• 
Expand (Выделение • Модификация • Расширить). 

Зальем сжатую выделенную область белым цветом фона. 

>• Выберите команду меню Edit • Fill (Правка • Залить). На экране появится 
диалог 
Fill (Заливка). 

>• В открывающемся списке Use (Использовать) выберите Background Color (Цвет 
фона). 

> • Закройте диалог Fill (Заливка), нажав кнопку ОК. Сжатая эллиптическая 
выделенная 
область будет заполнена белым цветом фона (Рис. 4.22). 

"KUntilled I @ 1002 (RGB/8) 

Рис. 4.22. Кольцо нарисовано 


Подготовка графики 115 

> Нажмите комбинацию клавиш I 
IIС1г| 1+||Р|, чтобы снять выделение. 

Данная комбинация и все другие комбинации буквенных клавиш работают в Adobe 
Photoshop только, если включен язык клавиатуры Английский (США) (English (USA)).
 

В этом опыте мы рассмотрели приемы создания областей выделения правильной формы.
 
Области выделения неправильной формы можно получить с помощью инструмента 
[?^1 -Lasso Tool (L)(Инструмент «Лассо» (L)), перетаскивая указатель мыши так, 
чтобы 
создать замкнутый контур. Многоугольную область выделения легко построить с 
помощью 
инструмента [§ ] -Polygonal Lasso Tool (L) (Инструмент «Многоугольное лассо» 
(L)), щелкая мышью в вершинах предполагаемой фигуры. Если же требуется создать 
контур неправильной формы с высокой точностью, например, выделить на фотографии 

фигуру человека, то наилучший результат можно получить с помощью инструмента 
Щ -PenTool (Р)(Инструмент «Перо» (Р)). 

J№4. Удаление объектов и отмена действий 

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

Отменить последнюю выполненную операцию можно, воспользовавшись командой меню 
Edit •Undo (Правка • Отменить). 

>• Выберите команду меню Edit • Undo Deselect (Правка • Отменить снятие выделе


[ctr l

ния) или нажмите комбинацию клавиш | l+ij Z]. Последняя выполненная команда 

снятия выделения будет отменена, и выделение будет восстановлено. 

В Adobe Photoshop имеется специальная палитра History •i-iji

швшшшшшш

| Laytj Char] Path] History Npn

(События), в которой записываются все операции, выпол-\A> 

p 
p 
Paint Bucket •i

ненные в окне документа. 

Г Strokem 

> Щелкните мышью на четвертом слева ярлыке History P [=» Deselect —1 
Elliptical Marquee

(События) в нижнем окне палитр. Если этот ярлык от-P /л 

sFill

сутствует, выберите команду меню Window • History Г 

Contrict

(Окно • События). На экране появится палитра History PЩ 

(События). иЗУ! •• 

9 •

m m 

> Увеличьте высоту окна палитры History (События), 

Рис. 4.23. Палитра

чтобы увидеть всю информацию, содержащуюся вней 

History (События)

(Рис. 4.23). 

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

Каждая операция обозначена миниатюрой и названием. Последняя выполненная 
операция 
-Fill (Заливка) -выделена темным цветом. Любую из операций можно отменить 
несколькими способами. 

>• Чтобы отменить последнюю операцию заливки сжатой эллиптической области 
цветом 
фона, перетащите значок этой операции -Fill (Заливка) -на кнопку с изображением 

корзины | Ш | -Delete current state (Удалить выделенную операцию) в нижней 
части палитры History (События). Заливка сжатой эллиптической области белым 


Создание Web-сайтов 

цветом на рисунке будет удалена, а в палитре History (События) будет выделена 
операция 
Contract (Сжатие). 

Отменим также и эту операцию. 

>• Нажмите кнопку I Ш \ - Delete current state (Удалить выделенную операцию) в 
нижней части палитры History (События). На экране появится диалог с запросом 
подтверждения удаления выделенной операции (Рис. 4.24). 

Adobe Photoshop 

Рис. 4.24. Диалог с запросом подтверждения удаления выделенной операции 

> Нажмите кнопку Yes (Да), чтобы закрыть этот диалог и подтвердить 
необходимость 
отмены операции Contract (Сжатие). Данная операция будет отменена и 
эллиптическая 
область выделения примет свои прежние размеры, а в палитре History (События) 
будет выделена операция Fill (Заливка). 

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

> Щелкните мышью на операции Deselect (Отмена выделения). Следовавшие за ней 
две операции Elliptical Marquee (Эллиптическая область) и Fill (Заливка) будут 
отменены 
и выделенный эллипс исчезнет с рисунка. 

Любой объект рисунка можно удалить также с помощью инструмента |<.?| - Eraser 
Tool (E) (Инструмент «Ластик» (Е)). Его действие подобно ластику и заключается 
в закрашивании 
рисунка цветом фона. 

Удалим оставшийся на рисунке прямоугольник. 

> Нажмите кнопку \&\ - Eraser Tool (E) (Инструмент «Ластик» (Е)) на панели 
инструментов 
(Tools), чтобы выбрать этот инструмент. 

> Установите указатель мыши у левого верхнего угла прямоугольника в окне 
документа. 
Указатель мыши примет вид круга. 

Форма этого круга и его диаметр - 13 пикселов - соответствуют установленной по 
умолчанию 
кисти, которая будет закрашивать рисунок цветом фона. Но такой маленькой кистью 

работать будет неудобно, поэтому увеличим размер кисти. 

Обратите внимание, что после выбора инструмента \&\ - Eraser Tool (E) 
(Инструмент 
«Ластик» (Е)) на панели параметров (Options Bar), находящейся под полосой меню, 

отображаются параметры этого инструмента (Рис. 4.25). У левого края панели вы 
видите 
значок выбранного инструмента. Слева от этого значка находится поле Brush 
(Кисть) с 
образцом активной кисти. 

Mode: (Brush_ Opacity; П5°% | > I Flow; | |0<И»ТП #&• С Erase to History 

Q 

Рис. 4.25. Панель параметровинструмента Eraser Tool (Е)(Инструмент «Ластик» 
(Е)) 


Подготовка графики 

>• Нажмите кнопку [ j справа от поля образца Brush 

(Кисть) на панели параметров (Options Bar). 
На экране появится палитра кистей (Рис. 4.26). 
Master Diameter © 
в 
В этой палитре представлены образцы готовых 
кистей различной формы и размеров. Для выбора 
любой кисти достаточно щелкнуть мышью на ее 
образце. Однако если нужной нам кисти среди образцов 
нет, то кисть можно изготовить. Для этого 
существует несколько способов: модифицировать 
существующую кисть, определить в качестве кисти 
фрагмент рисунка или создать новую кисть. 
Воспользуемся последним способом. 

>• В поле ввода Master Diameter (Основной диа


Рис. 4.26. Палитра кистей

метр) введите новое значение этого параметра 


50 пикселов. Одновременно в палитре кистей 

увеличится размер кисти на образце. 

Поле ввода Hardness (Жесткость) и соответствующий ему ползунковый регулятор 
определяет 
размер жесткого центра кисти и задается в процентах от ее диаметра. Он 
позволяет 
приблизительно имитировать реальную кисть с мягкими краями. 

> Нажмите кнопку 0 в правом верхнем углу палитры кистей. На экране появится 
меню. 

>• Выберите в появившемся меню команду New Brush Preset (Новая кисть). На 
экране 
появится диалог Brush Name (Имя кисти) (Рис. 4.27), в котором следует указать 
имя 
новой кисти. 

Name: | Hard Round 50 1 

Cancel | 

Рис. 4.27. Диалог Brush Name (Имя кисти) 

На образце в левой части диалога отображаются текущая форма и размер кисти. Ее 
название 
- Hard Round 50 1 (Жесткая, круглая, 50 1) - указано в поле ввода Name (Имя). 

>- В поле ввода Name (Имя) укажите имя Новая кисть и нажмите кнопку ОК, чтобы 
закрыть диалог Brush Name (Имя кисти). 

Созданная кисть и ее размер отобразятся в палитре Brushes (Кисти) в конце 
перечня 
образцов. Ее имя появляется во всплывающей подсказке при наведении указателя 
мыши 
на кисть. 

> Щелкните мышью на свободном пространстве рабочего окна, чтобы закрыть палитру 

кистей. 

Теперь можно с помощью инструмента | ] - Eraser Tool (E) (Инструмент «Ластик» 
(Е)) 
удалить прямоугольник на рисунке. 


 Создание Web-сайтов 

>• Установите указатель мыши на прямоугольнике в окне документа. Вы увидите, 
что 
теперь размер указателя мыши - круглой кисти - значительно больше, чем прежде. 

>* Нажмите и удерживайте левую кнопку мыши. 

>• Не отпуская левую кнопку мыши, перемещайте указатель мыши по прямоугольнику 
вправо и влево, пока весь объект не будет закрашен белым цветом фона. 

> Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален. 

Итак, мы познакомились с приемами рисования и удаления простых объектов. Теперь 

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

JV&5. Начинаем изготовление баннера 

Баннер, который мы создадим, будет состоять из простого логотипа компании 
ГЕОТОН и двух сменяющих друг друга анимированных надписей, приглашающих 
посетить сайт компании. Начнем с подготовки логотипа, который, в свою очередь, 
будет 
состоять из трех объектов, размещенных один внутри другого: 
текста, эллипса и прямоугольника (Рис. 4.28) Для объектов 
логотипа установим синий цвет. ^JncOlTOinr__ 

> Выведите на экран палитру. Color (Цвет), щелкнув мышью на 
ее ярлыке. Рис. 4.28. Логотип 

> С помощью ползунковых регуляторов палитры Color (Цвет) установите значения 
красной (R), зеленой (G) и синей (В) составляющих цвета соответственно 32, 112, 


239. Выбранный синий цвет отобразится на образцах цвета переднего плана палитры 

Color (Цвет) и панели инструментов (Tools). 
Обратите внимание, что после установки цвета в палитре Color (Цвет) под 
образцами 
появился треугольный значок с восклицательным знаком /Ь,- Warning: out of gamut 
for 
printing (Предупреждение: выход за пределы цветового охвата для печати), 
предупреждающий 
о том, что выбранный цвет не входит в цветовой диапазон модели CMYK. 
Справа от треугольного значка отображается поле с ближайшим CMYK-эквивалентом 
выбранного цвета. Напомним, что для Web-графики цветовой охват CMYK не имеет 
значения, 
так как Web-изображения не предназначены для полиграфического исполнения. 

Нарисуем в левой части окна документа прямоугольную область размером 150x50 
пикселов, 
которую затем заполним выбранным цветом. 

>• Удерживая нажатой клавишу и Alt I. три раза нажмите кнопку [Су - Elliptical 
Marquee 
Tool (M) (Инструмент «Эллиптическая область» (М)) на панели инструментов 
(Tools). Будет выбран инструмент [О] - Rectangular Marquee Tool (M) (Инструмент 

«Прямоугольная область» (М)). 

Adobe Photoshop позволяет создавать области выделения заранее заданных размеров,
 
для указания которых и определения других свойств объекта используется панель 
параметров 
(Options Bar) (Рис. 4.29). Панель с параметрами каждого инструмента всегда 
открывается при выборе инструмента. Элементы управления этой панели зависят от 
выбранного 
инструмента. 


Подготовка графики 

CS ArtMm d Style: [Norrrijl__ 33 *•*• I I <* Height; | 

Рис. 4.29. Панель параметров инструмента Rectangular Marquee 
Tool (M) (Инструмент «Прямоугольная область» (M)) 

> В открывающемся списке Style (Стиль) панели параметров (Options Bar) выберите 

Fixed Size (Фиксированный размер), чтобы создать прямоугольную область 
определенного 
размера. 

Теперь в полях ввода Width (Ширина) и Height (Высота) следует указать размеры 
области 
выделения. 

> Дважды щелкните мышью в поле ввода Width (Ширина), чтобы выделить числовое 
значение в нем. 

>• Введите с клавиатуры значение ширины прямоугольной области -150 рх (150 
пикселов). 

> В поле ввода Height (Высота) введите высоту прямоугольника - 50 рх (50 
пикселов), 
предварительно выделив двойным щелчком мыши находящееся там число. 

Установка параметра Feather (Растушевка) создает плавный переход между 
пикселами 
выделенной области и пикселами, окружающими ее. Это делает края выделенной 
области 
расплывчатыми и исключает резкий переход. 

Установка флажка Anti-aliased (Сглаживание) позволяет свести до минимума 
контраст 
на границах между пикселами и создает более мягкие переходы между объектами. 

Следует следить за тем, чтобы у инструментов выделения и заливки 
всегда был установлен флажок Anti-aliased (Сглаживание). Это позволит 
исключить резкие контрасты в изображении. 

Чтобы точнее расположить создаваемую область выделения, воспользуемся палитрой 
Info (Информация). 

• Щелкните мышью на ярлыке Info (Информация) в верхнем 
окне палитр. Если этот ярлык отсутствует, выберите HE3I 

| Navigator J Info \ Histogram ^ " О 

команду меню Window • Info (Окно • Информация). 

R : С : 
На экране появится палитра Info (Информация) (Рис. 4.30). 

Л у | 

*1\ К : 
Эта палитра является своеобразным информационным таб


ло, отслеживающим ваши действия и дающим им точное +• ?: 1"; Н : 

числовое соответствие. По умолчанию палитра отображает 
параметры цвета пикселов, по которым перемещается 

Рис. 4.30. Палитра Info 
указатель мыши, координаты курсора X и Y, ширину W и (Информация) 
высоту Н создаваемого объекта. Параметры цвета пикселов 
отображаются в моделях RGB и CMYK 

> Переместите указатель мыши в окно документа. Вы увидите, что в палитре Info 
(Информация) 
появились числовые значения - 255 - для RGB-составляющих и 0% - для 
CMYK-составляющих, которые соответствуют белому цвету фона. 

При перемещении указателя мыши в окне документа также постоянно изменяются 
координаты 
указателя мыши X и Y, отслеживая его текущее положение. Эти координаты 


Создание Web-сайтов 

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

> Нажмите кнопку 0 в правом верхнем углу 
палитры Info (Информация) и в появившемся 
меню выберите команду Palette 
Options (Параметры палитры). На экране 
появится диалог Info Options (Параметры 
палитры «Информация») (Рис. 4.31). 

Second Color Readout • 

Mode: [CMYK Color 

Два верхних открывающихся списка иден


тичны и определяют отображение в опреде


Mouse Coordinates 

ленной цветовой модели цветовых составляющих 
пикселов, по которым перемещается Ruler Units: | Centimeters 
указатель мыши. 

П Show 16 bit values 

Установка флажка Show 16 bit values (Показывать 
16-битные значения) требуется только Рис.4.31. Диалог Info Options 
тогда, когда для рисунка выбрана цветовая (Параметры палитры «Информация») 
модель RGB с 16 битами на каждый цвет. 


> В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels (Пикселы).
 


>• Закройте диалог Info Options (Параметры палитры «Информация»), нажав кнопку 
ОК. 


Теперь в палитре Info (Информация) координаты указателя мыши и размеры объектов 

будут отображаться в пикселах. 


Создадим прямоугольную область выделения заданного размера и зальем ее цветом. 


>• Установите указатель мыши у левого верхнего угла окна документа так, чтобы в 
палитре 
Info (Информация) отобразились его координаты: Х:5, Y:5. 

> Щелкните мышью в этой точке. В окне документа появится прямоугольная область 
выделения, а в палитре Info (Информация) отобразятся ее размеры: W: 150, Н: 50. 


>• Залейте созданную прямоугольную область выделения выбранным ранее цветом, 
воспользовавшись 
инструментом [<j§]- Paint Bucket Tool (G) (Инструмент «Заливка» (G)). 

>• Выберите команду меню Select • Deselect (Выделение • Отменить выделение), 
чтобы 
снять выделение области. 

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

И Alt

Удерживая нажатой клавишу"АИ I. нажмите кнопку |[I],| - Rectangular Marquee 
Tool (M) (Инструмент «Прямоугольная область» (М)) на панели инструментов 
(Tools). Будет выбран инструмент \Q} - Elliptical Marquee Tool (M) (Инструмент 
«Эллиптическая область» (М)), а на панели параметров (Options Bar) появятся 
соответствующие 
элементы управления. 


Подготовка графики 121 
v Убедитесь, что в открывающемся списке Style (Стиль) панели параметров 
(Options 
Ваг) выбрано Fixed Size (Фиксированный размер). 
> В полях ввода Width (Ширина) и Height (Высота) панели параметров (Options 
Bar) 
введите соответственно размеры горизонтальной - 140 рх - и вертикальной - 40 рх 
осей 
эллипса. 
Нарисуем эллиптическую область выделения заданного размера внутри 
прямоугольника. 
>- Установите указатель мыши у левого верхнего угла прямоугольника так, чтобы в 

палитре Info (Информация) отобразились координаты указателя мыши: X: 10, Y: 10. 

> Щелкните мышью в этой точке. Внутри прямоугольника будет создана 
эллиптическая 
выделенная область, размеры которой вы увидите в палитре Info (Информация). 
Зальем область выделения белым цветом фона. 
>• Выберите команду меню Edit • Fill (Правка • Залить). На экране появится 
диалог Fill 
(Заливка). 
> Убедитесь, что в открывающемся списке Use (Использовать) выбрано Background 
Color (Цвет фона). 
> Закройте диалог Fill (Заливка) нажатием кнопки ОК. Эллиптическая область 
выделения 
будет залита белым цветом. 
>• Отмените выделение, выбрав команду меню Select • Deselect (Выделение • 
Отменить 
выделение). Изображение примет вид, как на Рис. 4.32. 

Рис. 4.32. Прямоугольник и эллипс созданы 

Так как наш баннер создается на белом фоне, то можно сделать по его периметру 
тонкую 
рамку, чтобы границы баннера были видны, если фон Web-страницы будет белым1. 
Для этого следует выделить весь рисунок. 

>• Выберите команду меню Select • All (Выделение • Все). Весь рисунок в окне 
документа будет выделен, и вдоль его краев появится рамка выделения. 

Обведем контур выделения цветом переднего плана. 

> Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится 
диалог 
Stroke (Правка • Обводка). 

>• Не изменяя предлагаемых параметров, закройте этот диалог нажатием кнопки ОК. 


>• Отмените выделение документа, нажав комбинацию клавиш l! ctrl |+|[DI. Вы 
увидите, 
что вокруг рисунка появилась тонкая рамка. 

Следует отметить, что рамку вокруг рисунка на Web-странице можно создать 
средствами HTML. 


Создание Web-сайтов 

Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не потерять гго 

при возможных сбоях в работе компьютера или отключении электропитания. Мы уже 
говорили о том, что для использования изображения на Web-странице оно должно 
быть 
сохранено в одном из Web-форматов: GIF, JPG или PNG. Однако промежуточные 
сохранения 
следует выполнять в собственном формате Adobe Photoshop - PSD, так как только 
в данном формате можно сохранить изображение без потери качества. Это позволит 
при 
необходимости вернуться к редактированию отдельных объектов. 

>• Выберите команду меню File • Save (Файл • Сохранить). На экране появится 
диагсог 
Save As (Сохранить как) (Рис. 4.33). 

Имя файла; |UntHled-1 

Foimat | Photoshop ('.PSD.-'.PDP) 
r- Save Options 


Save: D•
П1»! 
As a Cop* 
Abfcj Channels: 
D fenratatons 
Dsoot colors 
Color: D0 
Use Proof Setup: Waking a-f(К 
ICC Profile: sRGB IEC61966-2.1 
BThumbnsf Ш yse Lower Case Extension 

Рис. 4.33. Диалог Save As (Сохранить как) 

> Откройте папку, в которой вы хотите сохранить рисунок. 

> В поле ввода Имя файла (File name) удалите имя, предлагаемое по умолчанию, и 
введите Geoton - так мы назовем этот документ. Расширение имени файла указывать 

не обязательно. Оно будет добавлено автоматически. 

> Нажмите кнопку Сохранить (Save), чтобы закрыть диалог Save As (Сохранить как).
 
Рисунок будет сохранен в файле с указанным именем и это имя - Geoton.psd - 
появится 
в заголовке окна документа. 

При последующих периодических сохранениях рисунка командой меню Fije • Save 
(Файл • Сохранить) диалог Save As (Сохранить как) уже появляться не будет, а 
файл 
будет сохраняться в той же папке и под тем же именем. Если же потребуется 
сохранить 
файл на другом диске, в другой папке или под другим именем, то для этого нужно 
будет 
воспользоваться командой меню File • Save As (Файл • Сохранить как). 

Для закрытия текущего документа используется команда меню File • Close (Файл • 
Закрыть) или кнопка [х] в правом верхнем углу окна документа. Открыть ранее 
сохраненный рисунок можно с помощью команды меню File • Open (Файл • Открыть) 


Подготовка графики 

ненный рисунок можно с помощью команды меню File • Open (Файл • Открыть) или 
комбинации клавиш 1 

JV&6, Текст для баннера 

Наша следующая задача - добавить в создаваемый логотип надпись ГЕОТОН. Когда в 
рисунок добавляется текст, он помещается на новый отдельный слой. Слои дают 
возможность 
редактировать отдельные элементы изображения независимо друг от друга. 
Вы можете рисовать, редактировать, вклеивать и перемещать содержимое любого 
слоя, 
не изменяя при этом объекты, расположенные на других слоях. Управление слоями 
осуществляется с помощью специальной палитры Layers (Слои). 

>• Щелкните мышью на первом слева ярлыке Layers (Слои) 

на 

в нижнем окне палитр. Если такой ярлык отсутствует, 
выберите команду меню Window • Layers (Окно • Слои). 
На экране появится палитра Layers (Слои) с перечнем 
имеющихся в документе слоев (Рис. 4.34). 


В данный момент наш документ состоит из одного основного, 
слоя, который называется Background (Фон). Этот слой 
создается при создании нового документа. В палитре Layers 
(Слои) каждому слою соответствует миниатюра и имя. 
Миниатюра слева от имени слоя в уменьшенном виде ото


Рис. 4.34. Палитра 

бражает его содержимое. Все миниатюры динамически об


Layers (Слои)

новляются в процессе редактирования слоев. 

Значок в виде открытого глаза 3$ у левого края строки с названием слоя 
позволяет выключить 
отображение этого слоя, чтобы оно не мешало работе с другими слоями. 

Остальные элементы управления палитры Layers (Слои) мы рассмотрим позднее, 
а сейчас добавим в логотип надпись — название компании ГЕОТОН. Все надписи на 
рисунках выполняются с помощью инструмента |T J - Horisontal Type Tool (T) 
(Инструмент 
«Горизонтальный текст» (Т)). 

>- Нажмите кнопку |T J - Horisontal Type Tool (T) (Инструмент «Горизонтальный 
текст» (Т)), чтобы включить этот инструмент. На панели параметров (Options Bar) 

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

D 

Рис. 4.35. Панель параметров инструмента Horisontal Type Tool (T) 
(Инструмент «Горизонтальный текст» (Т)) 

Кнопки [Щ]- Change the text orientation (Изменить ориентацию текста) позволяет 
изменить 
ориентацию текста с горизонтальной на вертикальную и наоборот. 

>-В первом слева открывающемся списке Set the font family (Установка семейства 
шрифтов) на панели параметров (Options Bar) выберите один из имеющихся на вашем 

компьютере шрифтов, лучше из группы Arial. 


 Создание Web-сайтов 

> Установите указатель мыши на рисунке в центре эллипса. Указатель мыши примет 
Форму Ц]. 

>• Щелкните мышью в этой точке. Появится текстовый курсор. Вид панели 
параметров 
(Options Bar) изменится (Рис. 4.36). 

|| |[ X | Ш | О v4 

Рис. 4.36. Панель параметров инструмента Horisontal Type Tool (T) 
(Инструмент «Горизонтальный текст» (Т)) 

> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет помещено 
в 
точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так как по умолчанию 
на 
панели параметров (Options Bar) нажата кнопка \Ш\ - Left align text 
(Левостороннее 
выравнивание текста). 

Теперь выделим введенный текст и изменим начертание, размер и другие параметры. 


> Нажмите и удерживайте клавишу !lShittl. 

>• Не отпуская клавишу ilShml. нажмите 6 раз клавишу |^J, чтобы выделить 
введенную 

надпись. 

> Отпустите клавишу |[Shifl I. 

Теперь, когда текст выделен, можно изменить его параметры. 

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

>- Во втором слева открывающемся списке Set the font style (Установка 
начертания 
шрифта) выберите начертание шрифта Bold Italic (Наклонный полужирный). Перечень 

доступных начертаний зависит от выбранной гарнитуры. 

> В третьем слева открывающемся списке Set the font size (Установка размера 
шрифта) 
выберите 18 pt или 20 pt в зависимости от шрифта. 

Три кнопки в правой части панели параметров (Options Bar) позволяют определить 
положение 
текста относительно точки вставки: \т\ - Left align text (Левостороннее 
выравнивание 
текста) - устанавливает левый край текста в точку вставки; \Ш\ - Center text 
(Центрирование текста) - центрирует текст относительно точки вставки; [Я] - 
Right 
align text (Правостороннее выравнивание текста) - устанавливает текст так, что 
его конец 
оказывается в точке вставки. 

> Нажмите кнопку \Ш\ - Center text (Центрирование текста) на панели параметров 
(Options Bar). Надпись ГЕОТОН будет центрирована на рисунке относительно точки 
ввода. 

Щелкнув мышью на поле с образцом цвета Set the text color (Установка цвета 
текста) 
вы вызовете на экран диалог Color Picker (Палитра цветов), в котором сможете 
выбрать 
цвет для текста. По умолчанию для надписи предлагается цвет переднего плана. 



Подготовка графики 

В четвертом слева открывающемся списке Set the anti-aliasing method (Установка 
способа сглаживания) на панели параметров (Options Bar) можно выбрать один из 
вариантов сглаживания шрифта: None (Нет) - сглаживание не применяется; Sharp 
(Резкий) - текст выглядит наиболее резким; Crisp (Четкий) - текст выглядит 
резким; 
Strong (Средний) - небольшая степень сглаживания; Smooth (Сглаженный) - 
максимальная 
степень сглаживания. Напомним, что сглаживание позволяет уменьшить контраст 
на границах символов и сделать их очертания более плавными. Благодаря 
использованию 
нескольких уровней сглаживания в некоторых случаях можно добиться 
хорошей читаемости текста даже малого размера. 

> Выбирая из открывающегося списка Set the anti-aliasing method (Установка 
способа 
сглаживания) различные значения, просмотрите, как изменяются очертания символов 

надписи на рисунке при разных уровнях сглаживания и при отсутствии сглаживания. 

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

С помощью кнопки|Х[- Create warped text (Размещение текста вдоль кривой) на 
панели 
параметров (Options Bar) вы можете расположить введенный текст вдоль кривой, 
а кнопка |Q | - Togglt the Character and Paragraph palletes (Показать/скрыть 
палитры 
символов и абзацев) позволяет вызвать на экран дополнительные палитры для 
настройки 
параметров текста. 

>• Нажмите кнопку [EDj - Togglt the Character and Paragraph 
palletes (Показать/скрыть палитры символов и абзацев) на 
панели параметров (Options Bar). На экране появится со


[Аги1_ 

вмещенная палитра Character/Paragraph (Символ/Абзац). 

Палитра Character (Символ) будет активной (Рис. 4.37). тГ |.22 р' ill 

Палитру Character (Символ) можно вызвать на экран также 

командой меню Window • Character (Окно • Символ), а 

палитру Paragraph (Абзац) - командой меню Window • 

Г ТТ Тг

Paragraph (Окно • Абзац). Т Т1 Т, Т 

|EnglishMJSA_ 

В палитре Character (Символ) так же, как и на панели пара


метров (Options Bar), вы можете установить гарнитуру, на


Рис. 4.37. Палитра 

чертание, размер и цвет шрифта. Но кроме того, можно за


Character (Символ)

дать еще ряд специфических параметров. 

В открывающемся списке Set the leading (Установка промежутка) можно определить 
расстояние между строками текста. 

В открывающемся списке Set the kerning between two characters (Установка 
промежутка 
между двумя символами) задается расстояние между двумя соседними буквами. 
Перед выбором значения из списка следует установить текстовый курсор в нужном 
месте. 

В открывающемся списке Set the tracking for the selected characters (Установка 
слежения 
для выбранных символов) можно выбрать расстояние между буквами в определенном 
слове или текстовом блоке, который предварительно следует выделить. 

В полях ввода Vertically scale (Вертикальный масштаб) и Horizontally scale 
(Горизонтальный 
масштаб) определяется соответственно вертикальный и горизонтальный масштаб 
текста. 


Создание Web-сайтов 

В поле ввода Set the baseline shift (Установка сдвига базовой линии) вы можете 
указать 
сдвиг базовой линии, определяющий начальное смещение текста. Положительное 
значение 
сдвигает текст вправо и вверх, отрицательное -влево и вниз. 

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

В левом нижнем углу палитры расположен открывающийся список Set the language on 

selected characters for hyphenation and spelling (Установить язык для выбранных 
символов 
для целей переноса и проверкиорфографии). 

В меню палитры Character (Символ), которое открывается при нажатии кнопки ©, 
доступны 
дополнительные команды форматирования, среди которых отметим следующие: 

Faux Bold (Имитация полужирного) и Faux Italic (Имитация курсива) -позволяют 
установить 
соответствующее начертание даже для семейств шрифтов, которые не содержат 
эти стили; 

Fractional Width (Дробная ширина). При включенном режиме расстояние между 
символами 
текста измеряется не в целых пикселах, а в дробных. Это позволяет в большинстве 

случаев придать тексту более привлекательный вид и улучшить его читаемость. 
Однако 
применение дробной ширины для шрифтов малого размера, менее 20 пунктов, может 
ухудшить их представление и затруднить чтение. Для таких шрифтов режим 
Fractional 
Width (Дробная ширина) лучше отменить. 

В палитре Paragraph (Абзац) определяются параметры абзаца: выравнивание, 
отступы, 
пробелы до и после абзаца, расстановка переносов. 

г 

> Закройте совмещенную палитру Character/Paragraph (Символ/Абзац), нажав кнопку 

jx] в правом верхнем углу ее окна. 

>-Для окончания ввода текста нажмите кнопку \у/\ у правого края панели 
параметров 
(Options Bar). Надпись на рисунке будет закреплена (Рис. 4.38). 

fEGeotonpsd & 100% (ГЕОТОН. RGB/8) 

нна 

Рис. 4.38. Надпись введена 

Для отмены ввода текста достаточно нажать на панели параметров кнопку -Cancel 
any current ededits (Отменить все текущие правки). 

Закончить ввод текста можно также, нажав клавишу ||Enter| на цифровой 
клавиатуре или 

комбинацию клавиш I 
IIctr l 1+lfEnter)Ha основной клавиатуре. 

Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой, 
которому 
по умолчанию присвоено имя, соответствующее введенной надписи. Этот слой 
помечен 
символом Т -текстовый -и выделен темным цветом, что означает, что в данный 
момент слой активен, т.е. именно к нему будут относиться все ваши действия. На 
то, что 
слой активен, указывает также имя слоя, появившееся в заголовке окна документа. 



Подготовка графики 

Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа имя 
слоя 
отображается неправильно. Это связано с тем, что Adobe Photoshop не всегда 
правильно 
отображает русские шрифты. В таком случае, чтобы в дальнейшем было удобно 
работать, 
слою нужно присвоить английское имя и порядковый номер. 

>• Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся 

меню выберите команду Layer Properties (Свойства слоя). На экране появится 
диалог 
Layer Properties (Свойства слоя) (Рис. 4.39). 

=s 

Layer Properties 

X 

Name: [ ГЕОТОН 1 I OK 1 

Color: | • None P | j Cancel 

! 

Puc. 4.39. Диалог Layer Properties (Свойства слоя) 

> В поле ввода Name (Имя) введите новое название слоя - Layer 1 (Слой 1). 

> Нажав кнопку ОК, закройте диалог Layer Properties (Свойства слоя). В 
заголовке 
окна документа и в палитре Layers (Слои) отобразится новое имя слоя (Рис. 4.40).
 

Теперь нам нужно переместить надпись ГЕОТОН в центр 
эллипса. Перемещение слоев и выделенных областей в 

на 

Lay»" 

Adobe Photoshop выполняется инструментом [•*] - Move 
Tool (V) (Инструмент «Перемещение» (V)). 

Нажмите кнопку [Ку - Move Tool (V) (Инструмент 
«Перемещение» (V)) на панели инструментов (Tools), 
чтобы выбрать этот инструмент. 


Установите указатель мыши, который примет форму •*, 
в окне документа на надписи ГЕОТОН. 


Нажмите и удерживайте левую кнопку мыши. 

Рис. 4.40. Текстовый слой 

переименован

Не отпуская левую кнопку мыши, переместите над


пись ГЕОТОН так, чтобы она была расположена в центре 
эллипса. 


Отпустите левую кнопку мыши. Новое положение надписи будет закреплено 
(Рис. 4.41). 

"Й Beoton psd <а 100% ILayei 1. RGB/8) 

Рис. 4.41. Надпись центрирована 

Для точного перемещения слоя или выделенной области используйте клавиши 
управления 
курсором Ijjj, JTTJ, Q , (О - Каждое нажатие одной из этих клавиш при выбранном 

инструменте [К*] - Move Tool (V) (Инструмент «Перемещение» (V)) перемещает 
объект 


Создание Web-сайтов 

на один пиксел в соответствующем направлении. Если при нажатии одной из этих 
клавиш 
удерживать нажатой клавишу llShitll, то объект будет перемещаться на 10 
пикселов. 

> Сохраните рисунок, выбрав команду меню File • Save (Файл • Сохранить). 
При этом может появиться информационный диалог (Рис. 4.42), в котором говорится 

о том, что если вы сбросите флажок Maximize compatibility (Максимизировать 
совместимость), то у вас могут возникнуть проблемы при использовании файлов 
*.psd в других программах. 

Photoshop Format Options 

0 Maximize compatibility 

Turning off Maximize Compatibility may interfere with the use of PSD files in 
other applications or with future versions of Photoshop, 

This dialog can be turned off in Preferences > File Handling > File 
Compatibility. 

Рис. 4.42. Информационный диалог 

Текстовый слой, а также выделенную область можно подвергать всевозможным 
трансформациям: 
масштабировать, поворачивать, сжимать и растягивать, деформировать, 
зеркально отражать. Все эти операции выполняются командами Free Transform 
(Произвольное 
преобразование) и Transform (Преобразование) из меню Edit (Правка). 

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

| TJ и активном текстовом слое, который нужно редактировать. 

JV§7. Создаем новые слои 

Создадим еще два текстовых слоя с надписями «Вам нужна локальная сеть?» и 
«Заходите 
СЮДА!», расположенными на рисунке справа от логотипа, одна под другой так, 
чтобы 
они могли сменять друг друга. 

> Нажмите кнопку [Т ] - Horisontal Type Tool (T) (Инструмент «Горизонтальный 
текст» (Т)) на панели инструментов (Tools), чтобы выбрать этот инструмент. 

> Щелкните мышью в окне документа, справа от созданного логотипа. В этом месте 
появится 
текстовый курсор. В палитре Layers (Слои) появится новый текстовый слой 
Layer 2. 

Введите первую надпись: Вам нужна локальная сеть?. 

Нажмите кнопку Щ в правой части диалога, чтобы поместить текст справа от 
точки ввода. 

Выделите введенный текст в окне документа, протащив по нему указатель мыши. 

> 

>• 
В первом слева открывающемся списке Set the font family (Установка семейства 
шрифтов) на панели параметров (Options Bar) выберите для надписи подходящую 
гарнитуру шрифта из установленных на вашем компьютере. 


Подготовка графики 

>• Подберите также начертание и размер шрифта примерно 16-18 пунктов, в 
зависимости 
от выбранной гарнитуры. 

>• Нажмите кнопку V у правого края панели параметров (Options Bar). Надпись 
будет 
закреплена. В палитре Layers (Слои) изменится имя нового текстового слоя. 

Восстановим прежнее имя нового слоя - Layer 2 (Слой 2). 
>- Выберите команду меню Layer • Layer Properties (Слой • Свойства слоя). На 
экране 
появится диалог Layer Properties (Свойства слоя) (Рис. 4.39). 

> В поле ввода Name (Имя) введите Layer 2 и закройте диалог Layer Properties 
(Свойства 
слоя) нажатием кнопки ОК. Новое имя отобразится в заголовке окна документа 
и в палитре Layers (Слои). 

> С помощью инструмента [К*] - Move Tool (V) (Инструмент «Перемещение» (V)) или 

клавиш управления курсором выровняйте надпись в свободном пространстве окна 
рисунка по вертикали и горизонтали (Рис. 4.43). 

\У, Geoton psd & ЧШХ (Layer 2. RGB/8) 

Вам нужна локальная сеть? 

Рис. 4.43. Надпись выровнена 

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

> Нажмите кнопку I В I - Create a new Layer (Создать новый слой) у нижнего края 
палитры 
Layers (Слои). В палитре появится и станет активным новый слой, которому 
по умолчанию будет присвоено имя Layer 3 (Слой 3). Название нового слоя вы 
увидите 
также в заголовке окна документа. 

>• Выберите инструмент [TJ - Horisontal Type Tool (T) (Инструмент 
«Горизонтальный 
текст» (Т)) на панели инструментов (Tools) и щелкните мышью в окне документа у 
правого края логотипа. В палитре Layers (Слои) появится отметка в виде символа 
Т 
о том, что текущий слой Layer 3 - текстовый. 

> Введите с клавиатуры надпись: Заходите СЮДА! 

> Выделите надпись, протащив через нее указатель мыши, и выберите для нее 
гарнитуру 
шрифта, начертание, а также размер приблизительно 20 пунктов. 

Изменим цвет надписи на коричневый. 

> Щелкните мышью на поле с образцом цвета Set the text color (Установка цвета 
текста) 
панели параметров (Options Bar). На экране появится диалог Color Picker 
(Палитра цветов). 


Создание Web-сайтов 

Выберем цвет путем ввода числовых значений RGB-составляющих. 
> Дважды щелкните мышью в поле ввода R (Красный), чтобы выделить его числовое 
значение. 
>• В поле ввода R (Красный) введите 142. 

> Нажмите клавишу F»Tabl. чтобы переместить фокус в поле ввода G (Зеленый) и 
выделить 
его числовое значение. 

>• В поле ввода G (Зеленый) введите 90 и нажмите клавишу PTabl. Фокус 
переместится 
в поле ввода В (Синий), числовое значение в котором будет выделено. 

>• В поле ввода В (Синий) введите 52. 

>• Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК. Заданный 
цвет отобразится 
на образце в поле Set the text color (Установка цвета текста) панели параметре 
в 
(Options Bar). Надпись в окне документа будет окрашена в заданный коричневый 
цвет. 

Нажмите комбинацию клавиш I 
IIctr l |+j[Enter|T чтобы завершить ввод текста. В окне рисунка 
добавленная надпись будет расположена на новом слое, поверх предыдущей 
надписи. Название нового слоя в палитре Layers (Слои) будет изменено в 
соответствии 
с введенным текстом. 

Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога Layer Properties 

(Свойства слоя) щелкните правой кнопкой мыши на названии вновь созданного слоя 
в палитре Layers (Слои) и в появившемся контекстном меню выберите комавду 
Layer Properties (Свойства слоя). 

Воспользовавшись клавишами управления курсором при включенном инструменте 
[К{Г| -Move Tool (V) (Инструмент «Перемещение» (V)) совместите начало верхней 
надписи с началом нижней и выровняйте верхнюю надпись по вертикали (Рис. 4.44) 

V , Geolon.psd & 1002 (Layei 3. RGB/8) 

^ сеть? 

Рис. 4.44. Надпись на слое Layer 3 выровнена 

Кроме уже рассмотренного способа создания нового слоя с помощью кнопки [~Д~| 
Create 
new Layer (Создать новый слой) у нижнего края палитры Layers (Слои), создать 
новый слой вы можете и другими способами, например: 

> Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся 
меню выберите команду New Layer (Новый слой). На экране появится диалог New 
Layer (Новый слой), в поле ввода которого Name (Имя) для нового слоя 
предлагается 
имя Layer 4 (Слой 4) (Рис. 4.45). 


Подготовка графики 

> Нажмите кнопку ОК, чтобы закрыть 
этот диалог и принять предлагаемое 
имя. В палитре появится и станет активным 
новый слой, которому будет D Use Previous Layer to Create CliDping Mask 
присвоено имя Layer 4 (Слой 4). 
Название нового слоя вы увидите также 
в заголовке окна документа. D

 (bio neutial color exfcts for Normal mode,) 

Еще один способ создания слоя - коман


Рис. 4.45. Диалог New Layer (Новый слой)

дой меню. 

> Выберите команду меню Layer • New • Layer (Слой • Новый • Слой). На экране 
появится диалог New Layer (Новый слой) (Рис. 4.45), в поле ввода которого Name 
(Имя) предлагается имя - Layer 5 (Слой 5). 

> Закройте этот диалог нажатием кнопки ОК. В палитре Layers (Слои) появится и 
будет выделен новый слой Layer 5 (Слой 5). Его имя вы увидите также в заголовке 

окна документа. 

Если какой-либо слой не нужен, то его можно легко удалить, 
предварительно сделав активным. Удалим слой 

Layer 5. 

>• Убедитесь, что слой Layer 5 активен. В палитре Layers 
(Слои) он должен быть выделен темным цветом. 

Рис. 4.46. Запрос подтвер


>• Нажмите кнопку I ШI - Delete layer (Удалить слой) 

ждения удаления слоя

в нижней части палитры Layers (Слои). На экране 
появится запрос подтверждения удаления (Рис. 4.46). 


> Нажмите кнопку Yes (Да), чтобы санкционировать удаление. 
Выбранный слой исчезнет из палитры Layers (Слои). Активным 
станет слой Layer 4. 

Создадим на активном слое Layer 4 у его правого края рисунок открытой 
двери (Рис. 4.47), чтобы посетителю сайта, увидевшему баннер, было Рис. 4.47. 
понятно, куда нужно заходить. Сначала нарисуем залитый прямо-Открытая 
угольник размером 63x50 пикселов, который будет символизировать дверь 
фрагмент некоторой стены. 

>• Нажмите кнопку [ГП] - Rectangular Marquee Tool (M) (Инструмент 
«Прямоугольная 
область» (М)) на панели инструментов (Tools), чтобы выбрать этот инструмент и 
включить панель параметров (Options Bar). 

> В открывающемся списке Style (Стиль) на панели параметров (Options Bar) 
выберите 
Fixed Size (Фиксированный размер). 

> В полях ввода Width (Ширина) и Height (Высота) панели параметров (Options 
Bar) 
введите значения соответственно 63 рх (63 пиксела) и 50 рх (50 пикселов). 

>• Выведите на экран палитру Info (Информация), щелкнув мышью на ее ярлыке. 

>- Установите указатель мыши в области рисования, в точке с координатами X: 400,
 

Y: 5. Эти координаты должны отобразиться в палитре Info (Информация). 

132 Создание Web-сайтов 

>• Щелкните мышью в указанной точке. На рисунке появится прямоугольная область 
выделения, размеры которой вы увидите в палитре Info (Информация). 

Зальем созданную область выделения коричневым цветом. Для этого установим цвет 
переднего плана. 

v Щелкните мышью на инструменте \.\ - Eyedropper Tool (I) (Инструмент «Пипетка» 
(Г)), 
чтобы выбрать его. 

> Для выбора коричневого цвета на рисунке щелкните мышью на букве Ю. 

>• Щелчком мыши выберите инструмент \^i\ - Paint Bucket Tool (G) (Инструмент 
«Заливка» (G)) на панели инструментов (Tools). 

>- Установите указатель мыши, который примет форму <Jt, внутри выделенной 
области 
и щелкните мышью. Прямоугольник будет залит (Рис. 4.48). 

fffi Geotonpsd & 1002 (Layei 4. RGB/8) 

Рис. 4.48. На слое Layer 4 создан прямоугольник 

> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), 
чтобы 
снять выделение объекта. 

Теперь внутри прямоугольника-«стены» нарисуем прямоугольник меньшего размера 
30x40 
пикселов - «дверную коробку». 

> Щелчком мыши на кнопке |[1],| - Rectangular Marquee Tool (M) (Инструмент 
«Прямоугольная 
область» (М)) панели инструментов (Tools) выберите инструмент и откройте 
панель параметров (Options Bar). 

> В полях ввода Width (Ширина) и Height (Высота) панели параметров (Options 
Bar) 
введите значения соответственно 30 рх и 40 рх. 

> Установите указатель мыши внутри нарисованного прямоугольника, в точке с 
координатами 
X: 419, Y: 14. Эти координаты должны отобразиться в палитре Info 
(Информация). 

>• Щелкните мышью в указанной точке. На рисунке появится выделенная 
прямоугольная 
область заданного размера. 

Вновь созданную область выделения следует залить белым цветом фона. 

> Щелкните мышью на значке *\ - Switch Foreground and Background Colors (X) 

(Переключение цвета переднего плана и фона (X)) на панели инструментов (Tools), 

чтобы поменять местами образцы цвета. 

> Нажмите кнопку [^] - Paint Bucket Tool (G) (Инструмент «Заливка» (G)) на 
панели 
инструментов (Tools) и щелкните мышью внутри выделенной области. Она будет 
залита 
белым цветом фона (Рис. 4.49). 


Подготовка графики 

% Geolon.psd <a 100% (Layer 4. HGB/8) 

Рис. 4.49. Внутренняя выделенная область залита цветом фона 

Наша следующая задача -преобразовать выделенную область так, чтобы после 
заливки 
и обводки она выглядела как открытая дверь. Чтобы точнее выполнить эту операцию,
 
следует увеличить масштаб отображения рисунка. Текущий масштаб -100% -вы видите 

в заголовке окна документа и в строке состояния (Status Bar). Изменить масштаб 
можно с помощью инструмента\*К\ — Zoom Tool (Z) (Инструмент «Масштаб» (Z)). 

> Нажмите кнопку [QTJ -Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели 
инструментов 
(Tools), чтобы выбрать этот инструмент. 

Установите указатель мыши на рисунке, внутри выделенной области. Указатель мыши 

примет форму <*^. 

4 

> Щелкните мышью в этом месте. Масштаб отображения рисунка увеличится на 100% 
и новое значение масштаба -200% -отобразится в заголовке окна документа и в 
строке состояния. 

>• Нажмите кнопку Q3] в правом верхнем углу окна документа, чтобы развернуть 
его на 
весь экран. 

>• Щелкните еще несколько раз мышью, установив ее указатель на рисунке. Каждый 
щелчок мышью будет увеличивать масштаб изображения на 100%. 

Уменьшить масштаб отображения документа можно следующим способом: 

Нажмите и удерживайте клавишу I 
II А11 I. Указатель мыши, установленный на рисунке, 
примет форму €^. 

Не отпуская клавишу I 
IIAl t I. щелкните несколько раз мышью на рисунке. Каждый 
щелчок мыши будет уменьшать масштаб на 100%, и новое значение масштаба будет 
отображаться в заголовке окна документа и в строке состояния (Status Bar). 

Отпустите клавишу li Al t I. 

Установите масштаб изображения 400%. 

Нажмите клавишу Р>т»ь|. чтобы скрыть все палитры, закрывающие увеличенное 
изображение. 

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


Создание Web-сайтон 

Рис. 4.50. Изображение увеличено и перемещено 
Теперь можно выполнить преобразование области выделения. 
>• Выберите команду меню Edit • Transform • Skew (Правка • 
Преобразование • Скос). В углах и серединах прямоугольной 
области выделения появятся 8 квадратных маркеров, а в 
центре области - маркер центра вращения (Рис. 4.51). 
Для преобразования формы объекта достаточно перетащить 
мышью его угловые маркеры. Перетаскивание боковых маркеров 
наклоняет объект. 
Сначала изменим положение левого нижнего углового маркера, 
перетащив его на середину нижней стороны белого 
прямоугольника. 
Рис. 4.51. Маркеры 
преобразования 
>- Установите указатель мыши на левом нижнем угловом 
маркере так, чтобы указатель мыши принял форму серой 
стрелки $~. 
> Нажмите и удерживайте левую кнопку мыши. 
v Не отпуская левую кнопку мыши, переместите квадратный 
маркер вправо, примерно к середине нижней стороны 
белого прямоугольника. 
>• Отпустите левую кнопку мыши. Новое положение маркера 
будет закреплено. Форма выделенной области станет 
трапециевидной (Рис. 4.52). 
Рис. 4.52. Левый нижний 
угловой маркер 
перемещен 


Подготовка графики 

Обратите внимание: в том месте, где область выделения 
сжата, на рисунке стала частично видна надпись, находящаяся 
на нижележащем слое Layer 2. 

>• Подобным же образом переместите верхний левый угловой 
маркер вправо, примерно на середину верхней стороны 
белого прямоугольника так, чтобы левая сторона выделенной 
прямоугольной области стала вертикальной 
(Рис. 4.53). 

> Переместите левый нижний квадратный маркер верти- Рис. 4.53. Левый верхний 
кально вверх на расстояние, примерно равное одной чет-угловой маркер 
верти высоты области выделения (Рис. 4.54). 

перемещен 

>• Нажмите клавишу [Enter]. Маркеры преобразования исчезнут. 
Форма преобразованной выделенной области будет 
закреплена. 

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

> Выберите команду меню Window • Tools (Окно • Инструменты), 
чтобы отобразить панель инструментов. 

>- Щелкните мышью на значке +}. - Switch Foreground and puc. 4.54. Левый нижний 

Background Colors (X) (Переключение цвета переднего угловой маркер 
плана и фона (X)) на панели инструментов (Tools), что-перемещен повторно 
бы поменять местами образцы цвета. 

>• Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится 
диалог 
Stroke (Обводка). 

> Установите флажок Outside (Снаружи), чтобы выполнить обводку по наружному 
краю контура выделения. 

>• Нажатием кнопки ОК закройте диалог Stroke (Обводка). Контур выделения будет 
обведен коричневым цветом переднего плана. 

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

> Нажмите клавишу РТаЬ1. чтобы отобразить все палитры. 

>• В полях ввода R (Красный), G (Зелёный) и В (Синий) палитры Color (Цвет) 
введите 
значения цветовых составляющих соответственно 234, 201 и 176. Светлый оттенок 
коричневого цвета вы увидите на образцах цвета переднего плана палитры Color 
(Цвет) и панели инструментов (Tools). 

>• Щелчком мыши выберите инструмент j^ ] - Paint Bucket Tool (G) (Инструмент 
«Заливка» (G)) на панели инструментов (Tools) и залейте выделенную область, 
предварительно 
скрыв все палитры с помощью клавиши Р*ТгЬ\. 

> Отмените выделение объекта, нажав комбинацию клавиш I ctr l 1+||D|. 


136 Создание Web-сайтов 

Нарисованной двери не хватает только дверной ручки. Но прежде чем ее изобразит.,
 
установим в качестве цвета переднего плана темно-коричневый цвет, которым 
залита 
«стена». Воспользуемся для этого инструментом \j?\ -Eyedropper Tool (I) 
(Инструмент 
«Пипетка» (I)). 

> Нажмите кнопку [fij] в окне документа и измените размеры окна документа так, 
чтобы 
оно не пересекалось с палитрами, прокрутите изображение в окне, чтобы 
отобразить 

дверь, и нажмите клавишу Р1*"!. чтобы отобразить все палитры. 

>• Нажмите кнопку \]Р\ -Eyedropper Tool (I) (Инструмент «Пипетка» (I)) на 
панели инструментов 
(Tools), чтобы выбрать этот инструмент. 

v Установите указатель мыши, который примет форму пипетки f, на изображении 
темно-коричневой «стены». 

у Щелкните мышью в этом месте. Цвет переднего плана будет выбран и появится на 
соответствующем образце панели инструментов (Tools). 

Теперь в том месте открытой двери, где обычно находится дверная ручка, нарисуем 
с 
помощью инструмента \#\ -Pencil Tool (В) (Инструмент «Карандаш» (В)) короткий 
вертикальный отрезок толщиной 1 пиксел и длиной 5-6 пикселов. 

> Удерживая нажатой клавишу il Alt I. нажмите кнопку y/j -Brush Tool (В) 
(Инструмент 
«Кисть» (В)) на панели инструментов (Tools). Будет выбран инструмент |^/] 
Pencil 
Tool (В) (Инструмент «Карандаш» (В)). 

Этот инструмент позволяет рисовать произвольные линии -прямые и кривые. 
Для рисования горизонтальной или вертикальной прямой следует удерживать нажатой 

клавишу |shift|. 

> Установите указатель мыши примерно у середины левого 
края «двери». 

> Нажмите и удерживайте клавишу llShiftl. 

lShitt

>• Не отпуская клавишуl. нажмите и удерживайте левую 
кнопку мыши. 

>• Не отпуская левую кнопку мыши и клавишу llShiftl. пере


местите указатель мыши вниз на 5-6 пикселов, р д ГС 
> Отпустите левую кнопку мыши. «Дверная ручка» 
7=7=) нарисована 
> Отпустите клавишу !Shift l. Будет нарисована тонкая вертикальная 
линия (Рис. 4.55). 

Напомним, что если с первого раза линия желаемого размера не получилась, вы 
можете 
отменить выполненную операцию и повторить ее сначала. 
>-Уменьшите масштаб изображения до 100%, щелкнув три раза на рисунке 
инструментом 
|Ц,| -Zoom Tool (Z) (Инструмент «Масштаб» (Z)) при нажатой клавише I 
IIAlt I. 
Изображение примет вид как на Рис, 4.56. 


Подготовка графики 

"В Geoton.psd @ 100% (Layei 4. RGB/8) 

Рис. 4.56. Дверь нарисована 

> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). 

Итак, мы создали рисунок, состоящий из основного слоя Background (Фон) и 
четырех 
слоев - Layer 1, Layer 2, Layer 3, Layer 4. Посмотрим теперь, что можно делать 
со 
слоями. 

JV&8. Работаем со слоями 

Слои в изображении располагаются стопкой, один на другом. Основной слой 
Background (Фон) всегда находится внизу. На нем располагаются остальные слои в 
том 
порядке, в котором они были созданы. В таком же порядке слои расположены в 
палитре 
Layers (Слои). 

>• Увеличьте размер палитры Layers (Слои), перетащив 
ее верхнюю границу вверх, чтобы отобразить в палитре 
все имеющиеся слои (Рис. 4.57). 

Порядок расположения слоев рисунка легко изменить, 
перетащив миниатюру слоя в палитре Layers (Слои) в 
нужное место. Посмотрим, как это сделать, переместив 
слой Layer 2 наверх. 

>- Установите указатель мыши на миниатюре слоя Layer 2 
в палитре Layers (Слои). Указатель мыши примет 

форму fy. 

> Нажмите и удерживайте левую кнопку мыши. Слой 
будет выделен темным цветом. 

Рис. 4.57. Палитра Layers 
> Не отпуская левую кнопку мыши, переместите указа


(Слои) со всеми слоями 

тель мыши на миниатюру слоя Layer 4. Вместе с ним 
переместится значок слоя. 


> Отпустите левую кнопку мыши. Новое положения слоя Layer 2 вверху группы слоев 

будет закреплено (Рис. 4.58). В окне документа надпись Вам нужна локальная 
сеть? 
теперь будет расположена поверх надписи Заходите СЮДА!, а не под ней, как 
прежде, 
и поверх рисунка двери, находящегося на слое Layer 4 (Рис. 4.59). 


Создание Web-сайто з 

Рис. 4.58. Слой Layer 2 перемещен 

*R Geoton psd & 100% {Layei 4. RGB/8) 

Рис. 4.59. Положение слоя на рисунке изменено 

В процессе редактирования слоев часто бывает необходимо выключить отображение 
какого-либо слоя или нескольких слоев, чтобы сосредоточиться на обработке 
других. 
В крайнем левом столбце палитры Layers (Слои), напротив видимых слоев 
выставляется 
специальный значок в виде открытого глаза f. - Indicates layer visibility 
(Индикация 
видимости слоя). 

> Щелкните мышью на значке с изображением глаза ф - Indicates layer visibility 
(Индикация 
видимости слоя) в палитре Layers (Слои) слева от миниатюры слоя Layer 2. 
Значок глаза исчезнет. Одновременно на рисунке исчезнет надпись Вам нужна 
локальная сеть?, находящаяся на слое Layer 2, - слой будет выключен (Рис. 4.60).
 

" К Geolon.psd & 100% (Layel 4. RGB/8) 

Заходите СЮДА! 

Рис. 4.60. Слой Layer2 выключен 

> Повторно щелкните мышью в том же месте. В палитре Layers (Слои) появится 
значок 
глаза ф , а на рисунке - надпись Вам нужна локальная сеть? 

>• Просмотрите, как выглядит каждый слой в отдельности, выключая отображение 
остальных слоев; после чего включите все слои. 

После перемещения слоя Layer 2 наверх активным по-прежнему остался слой Layer 4.
 
Он выделен в палитре Layers (Слои) темным цветом. И все операции редактирования 

будут выполняться только для этого слоя. Чтобы перейти к редактированию другого 

слоя, достаточно щелкнуть мышью на строке с его именем. 


Подготовка графики 

>• Щелкните мышью на строке слоя Background (Фон) в палитре Layers (Слои). 
Строка 
будет выделена темным цветом. Данный слой станет активным, и информацию об 
этом вы увидите в заголовке окна документа. 

Другой способ активизации слоя позволяет выбирать его из контекстного меню. 

>- Установите указатель мыши в окне рисунка на надписи Вам нужна локальная 
сеть? 

>• Нажмите и удерживайте клавишу I cw |. Указатель мыши примет форму Kj.. Это 
значит, 

что при включенном инструменте [•*]- Move Tool (V) (Инструмент «Перемещение» 

(V)) клавишу Si ctr ! I можно не нажимать. 

1 ctr l

> Не отпуская клавишу , 1. щелкните правой кнопкой 

Layer 2 

мыши. На экране появится контекстное меню с перечнем 

Layer 3 

доступных в данной точке слоев (Рис. 4.61). 

Background 

> Выберите из контекстного меню слой Layer 3. Этот 
Рис. 4.61. Контекстное

слой станет активным и будет выделен в палитре 

меню слоев

Layers (Слои). 

>• Отпустите клавишу [fctrT | 

Обратите внимание, что между значком с изображением глаза §5 и миниатюрой слоя 
в 
палитре Layers (Слои) имеется еще одно поле, в котором для активного слоя 
отображается 
значок кисти ^ - Indicates painting on layer or layer mask (Индикация рисования 
на слое 
или слой-маске). Этот значок указывает, что только данный слой доступен для 
рисования 
и редактирования. Соответствующие поля остальных слоев - Indicates if layer is 
linked 
(Индикация связанного слоя) - пока пустые. Если же нужно связать несколько 
слоев для 
их совместного перемещения, поворота или масштабирования, то следует щелкнуть 
мышью 
в этих полях против каждого слоя, который нужно связать с активным слоем. 

6 версии CS2поля Indicates painting on layer or layer mask (Индикация 
рисования на слое илислой-маске) и Indicates if layer is linked (Индикация 
связанного слоя) остутсвуют. 

> Щелкните мышью в поле Indicates if layer is linked (Индикация связанного 
слоя) 
слева от миниатюры слоя Layer 4. В этом поле появится значок в виде цепи §., 
указывающий 
на то, что теперь этот слой связан с активным. 

Чтобы связать слои в версии CS2, надо сначала выделить всенужные 

слои в палитре слоев при нажатой клавише [[shift] или[[ ш ] м щелк


t a зате

нуть мышью назначке цепи в нижней части палитры слоев. 

Проверим это, перемещая активный слой Layer 3. 

> Нажав кнопку |К}.|- Move Tool (V) (Инструмент «Перемещение» (V)), выберите 
этот 
инструмент. 

> Установите указатель мыши, который примет форму Kj., на надписи Заходите 
СЮДА! 


Создание Web-сайтов 

> Нажмите и удерживайте левую кнопку мыши. 

>• Не отпуская левую кнопку мыши, перемещайте изображение. Вы увидите, что 
вместе 
с активным слоем Layer 3 перемещается связанный с ним слой Layer 4. Остальные 
слои останутся на своих местах. 

>• Отпустите левую кнопку мыши. 

> Отмените выполненную операцию перемещения слоев, выбрав команду меню Edii • 
Undo Move (Правка • Отменить перемещение). 

В процессе редактирования рисунка может возникнуть необходимость объединить два 

или несколько слоев в один, если они в дальнейшем будут обрабатываться 
совместно. 
Объединение нескольких слоев позволяет сохранять оптимальный объем файла, что 
особенно важно при обработке больших документов. Объединим связанные слои 
Layer 3 и Layer 4. 

> Выберите команду меню Layer • Merge Linked (Слой • Объединить связанные). 
Слои Layer 3 и Layer 4 будут объединены в один слой Layer 3, а миниатюра и 
название 
слоя Layer 4 исчезнут из палитры слоев. 

> Чтобы убедиться в том, что слои объединены, щелкните мышью на значке с 
изображением 
глаза •§? слева от названия слоя Layer 3. Слой будет выключен, и надпись 
Заходите СЮДА! с рисунком двери исчезнет с экрана. На ее месте останется только 

надпись Вам нужна локальная сеть?, находящаяся на слое Layer 2. 

> Повторно щелкните мышью в том же месте, чтобы включить отображение слоя 

Layer 3. 

>• Выберите команду меню Edit • Undo Merge Linked (Правка • Отменить 
объединение 
связанных слоев). Слой Layer 4 снова появится в палитре Layers (Слои). 

> Щелкните мышью на значке в виде цепи §Ц в поле Indicates if layer is linked 
(Индикация 
связанного слоя) слева от миниатюры слоя Layer 4. Значок исчезнет. Связь 
слоев будет прервана. 

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

Для объединения всех видимых слоев изображения нужно оставить видимыми только 
те 
слои изображения, которые должны быть объединены (невидимые слои не будут 
удалены 
в результате объединения), и выбрать команду меню Layer • Merge Visible (Слой • 

Объединить видимые слои). 

Переместим слой Layer 3 на передний план рисунка, воспользовавшись следующим 
способом. 

> Выберите команду меню Layer • Arrange • Bring to Front (Слой • Порядок • 
Переместить 
на передний план). Положение активного слоя в пачке слоев изменится. Он 
будет перемещен наверх. 

Подобным же образом переместим на передний план слой Layer 4. 


Подготовка графики

> Щелкните мышью на миниатюре слоя Layer 4 в палитре Layers (Слои), чтобы 
выделить его. 

>• Выберите команду меню Layer • Arrange • Bring to Front (Слой • Порядок • 
Переместить на передний план). Слой Layer 4 будет перемещен наверх. 

>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). 

Созданные нами слои полностью непрозрачны. Однако ничто не мешает вам изменить 
непрозрачность активного слоя с помощью элемента управления Opacity 
(Непрозрачность) 
палитры Layers (Слои). По умолчанию значение Opacity (Непрозрачность) для 
каждого слоя равно 100%, т.е. слои абсолютно непрозрачны. 

>• Щелкните мышью на кнопке [•] у правой границы поля ввода Opacity 
(Непрозрачность) 
в палитре Layers (Слои). Под полем ввода появится ползунковый регулятор. 

> Перемещайте ползунок регулятора Opacity (Непрозрачность) влево и наблюдайте, 
как на рисунке постепенно уменьшается непрозрачность активного слоя Layer 4 и 
сквозь него становится видна надпись нижележащего слоя Layer 2. Когда 
ползунковый 
регулятор достигнет своего крайнего левого положения, слой Layer 4 станет 
абсолютно 
прозрачным. 

> Восстановите для слоя Layer 4 значение Opacity (Непрозрачность), равное 100%. 


Для каждого слоя изображения может быть задано собственное значение 
непрозрачности. 

В открывающемся списке Set the blending mode for the layer (Установка режима 
наложения 
для слоя) в верхней части палитры Layers (Слои) можно выбрать один из 
многочисленных 
режимов наложения текущего слоя. Режим наложения определяет, каким 
образом пикселы активного слоя взаимодействуют с пикселами других слоев, 
расположенных 
под ним. Применяя различные режимы на отдельных слоях, можно получить 
интересные изобразительные эффекты. Например, если вы выберете режим Darken 
(Замена 
темным), то в изображение будут включены только те его пикселы, которые 
окажутся 
темнее пикселов, расположенных на более низких слоях. 

С помощью четырех флажков Lock (Блокировать) в верхней части палитры Layers 
(Слои) вы можете блокировать от изменения при редактировании отдельные элементы 

активного слоя. Можно блокировать прозрачные пикселы активного слоя (Lock 
transparent pixels), пикселы изображения (Lock image pixels), положение (Lock 
position), весь слой (Lock all). 

€my(/m JV&9. Эффекты тени и выпуклости 

Чтобы придать создаваемому баннеру большую выразительность и привлекательность, 

можно применить к каждому слою различные эффекты. Посмотрим, какие эффекты 
предлагает Adobe Photoshop для слоев и как их применить. Предварительно следует 
сделать 
активным нужный слой. Создадим эффекты для слоя Layer 1 с надписью ГЕОТОН. 

> Щелкните мышью на слое Layer 1 в палитре Layers (Слои), чтобы сделать его 
активным. 

> Выберите команду меню Layer • Layer Style (Слой • Стиль слоя). На экране 
появится 
меню с перечнем команд, управляющих применением эффектов к выбранному 
слою (Рис. 4.62). 


Создание Web-сайтоз 

Blending Option!... 

Diop Shadow... 

Inner Shadow... 

Dulei Glow... 

Inner Glow... 

Bevel and Emboss... 

Satin... 

Color Overlay... 
Gradient Overlay... 
Pattern Overlay... 
Stroke... 

Copy Layer Stylo 
Potto La»« Style 
Paste Layer Slyie (o Linked 
Cleat Layer Style 

Global Light... 
Create Layet 
Hide All Eflecls 
Scale Effects... 

Рис. 4.62. Менюэффектов 

Команды этого меню, начиная со второй, создают следующие эффекты: 

Drop Shadow (Тень снаружи) - добавляет тень, которую отбрасывает содержимое 
слоя; 

Inner Shadow (Тень внутри) - добавляет тень, которая лежит внутри слоя, 
создавая 
ощущение его отодвинутости или приподнятости; 

Outer Glow (Свечение наружу) - добавляет свечение, исходящее от слоя наружу; 

Inner Glow (Свечение внутри) - добавляет свечение внутри слоя; 

Bevel and Emboss (Скос и рельеф) - дает возможность добавить различные 
комбинации 
подсветки и затенения слоев, которые создают эффекты рельефности и скошенных 
кромок; 

Satin (Атлас) - добавляет затенение внутри слоя, создавая эффект изменения 
формы слоя; 

Color Overlay (Наложение цвета) - заполняет слой цветом; 

Gradient Overlay (Наложение градиента) - заполняет слой градиентом; 

Pattern Overlay (Наложение текстуры) - заполняет слой узором; 

Stroke (Обводка) - обводит контур объекта на текущем слое, используя цвет, 
градиент 
или узор. Обычно используется для объектов с жесткими границами, таких как 
текст. 

Применим к активному слою Layer 1 эффект Bevel and Emboss (Скос и рельеф). 

> Выберите из меню Layer • Layer Style (Слой • Стиль слоя) команду Bevel and 
Emboss 
(Скос и рельеф). На экране появится диалог Layer Style (Стиль слоя) (Рис. 4.63).
 

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


Подготовка графики 

Layei Style 

— Bevel and Embofs
Styles OK 

[— Structure 

Blending Options; Default Style: |Inner Bevel Reset 
Г^ Drop Shadow Technique: |Smooth_ 

New Style,,, 

Г" Inner Shadow 

[ 3 Preview 

Direction: ©U p О Down 

• Outer Glow 
Sj:e: 

Г" Inner Glow 
Soften: /V 

- Shading 
В Use Global Light 
H Satin 

Altitude: >•— ^ | 30 |° 
Г" Color Overlay 
Г" Gradient Overlay 
Gloss Contour: Anti-a|iased 
Г" Pattern Overlay Highlight Mode: [Sc_reen__ 
Г Strok» 
2paci'v' ' — л—' IS. l % 
Shadow Mode: |Multiply jfjM 
Opacity: 

Puc. 4.63. Диалог Layer Style (Стиль слоя) с элементами управления 
эффекта Bevel and Emboss (Скос и рельеф) 

Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) 
отмечено 
флажком и выделено название выбранного эффекта - Bevel and Emboss (Скос и 
рельеф). 
На этой же панели вы можете выбрать, установив флажок, другие доступные эффекты 

из перечисленных выше. 

При установленном слева от названия эффекта флажке данный эффект будет применен 
к 
слою после закрытия диалога кнопкой ОК. Чтобы отменить эффект, достаточно, 
вызвав 
диалог, сбросить соответствующий флажок. 

> Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажок Preview 
(Предварительный просмотр). При этом все изменения параметров, сделанные в 
диалоге, будут сразу же отображаться на рисунке. 

Следует отметить, однако, что значения параметров, заданные по умолчанию, 
являются 
оптимальными и в большинстве случаев создают наиболее яркие эффекты. На рисунке 
в 
окне документа вы можете видеть, как будет выглядеть надпись ГЕОТОН при 
значениях 
параметров эффекта, определенных по умолчанию. 

Эффект рельефности надписи создается комбинацией подсветки (Highlight) и 
затенения 
(Shadow), параметры которых определяются соответствующими элементами управления.
 
В каждой из групп можно выбрать цвет тени или свечения, щелкнув мышью на 
образце, 
степень непрозрачности этого цвета (Opacity) и режим наложения пикселов 
(Mode). Значения, установленные по умолчанию, обычно дают наилучший результат. 

В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вариантов 
данного 
эффекта. 


Создание Web-сайтов 

> Просмотрите различные варианты эффекта, выбирая их из открывающегося списка. 
Style (Стиль), после чего выберите стиль Inner Bevel (Скос внутри). 

> Выбирая из открывающегося списка Technique (Технология) различные варианты, 
просмотрите возможные способы формирования кромок, после чего выберите вариант 
Smooth (Сглаженный). 

Параметр Depth (Глубина) позволяет изменить степень затенения. Параметр Size 
(Размер) 
управляет размером скоса, а параметр Soften (Смягчение) закруглением кромок. 

>• Проверьте, как изменяется эффект при изменении параметров Depth (Глубина), 
Size 
(Размер) и Soften (Смягчение) и выберите наилучшие значения этих параметров. 

Переключателями Up (Вверху) и Down (Внизу) определяют положение подсветки по 
отношению к содержимому слоя. 

>• Посмотрите, как изменяется эффект при установке переключателя Down (Внизу), 
после чего установите переключатель Up (Вверху). 

Параметр Angle (Угол) определяет угол, под которым падает свет из слоя или на 
слой. 
Если установлен флажок Use Global Light (Использовать глобальный свет), то 
используется 
глобальный угол, определяющий угол падения света на все изображение. Если 
данный 
флажок сброшен, то применяется локальный угол, который задает угол падения 
света на активный слой. Для установки глобального угла следует использовать 
команду 
меню Layer • Layer Style • Global Light (Слой • Стиль слоя • Глобальный свет). 

>• Щелкайте мышью в разных местах круговой шкалы 
Angle (Угол) и наблюдайте на рисунке, как изменяется 
характер эффекта при разных углах падения света. геогон 
Выберите наиболее оптимальный, с вашей точки зре


Рис. 4.64. К текстовому 

ния, угол. 

слою применен эффект 

Bevel and Emboss

> Изменяя параметр Altitude (Высота), проверьте, как из


(Скос и рельеф)

меняется эффект при изменении высоты источника света 
и выберите подходящее значение этого параметра. 


> Нажав кнопку О К, закройте диалог Layer Style (Стиль 
слоя). Выбранный эффект будет применен к слою 
Layer 1. Надпись ГЕОТОН на изображении будет выглядеть 
примерно как на Рис. 4.64. 


Lock; D J 

Обратите внимание, что после применения эффекта в 
палитре Layers (Слои), под строкой с активным слоем 
Layer 1 появилось название примененного к слою эффекта, 
а справа от имени слоя -значок в виде буквы f внутри 
белого круга, который означает, что к слою применен 


Effects

эффект (Рис. 4.65). Слева от этого значка находится тре-I* 
Q Bevel and Emboss


угольный переключатель v , позволяющий выключить и 
снова включить отображение названий эффектов, приме-BID г • 
•• i Background an: 
ненных к слою. Слева от названия эффекта -Bevel and 

o.
Emboss (Скос и рельеф) -находится значок в виде от


Рис. 4.65. Слой с эффектом

крытого глаза ф , с помощью которого можно выключить 

в палитре Layers (Слои)

и включить отображение эффекта в окне документа. 


Подготовка графики 

К одному слою можно применить одновременно несколько эффектов. Добавим к слою 
Layer 1 еще один эффект - Drop Shadow (Тень снаружи). Для вызова диалога Layer 
Style (Стиль слоя) воспользуемся другим способом. 

> Нажмите кнопку 3|] - Add a layer style (Добавить стиль слоя) в нижней части 
палитры Layers (Слои) и в появившемся меню с перечнем эффектов выберите 
Drop Shadow (Тень снаружи). На экране появится диалог Layer Style (Стиль 
слоя) (Рис. 4.66). 

Layei Style 

Styles OK 

Blending Options: Default 

Щ Preview 

— Quality 
Contour: П Anll-ateed 

Noise: л 

[vj] Layer Knocks Oyt Drop Shadow 

Рис. 4.66. Диалог Layer Style (Стиль слоя) с элементами управления 
эффекта Drop Shadow (Тень снаружи) 

На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи) и 
справа 
отображаются элементы управления эффектом. 

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

Элементы управления Blend Mode (Режим наложения) и Opacity (Непрозрачность) 
определяют 
соответственно режим наложения пикселов и степень непрозрачности тени. 
Применяемая по умолчанию тень создается черным цветом. Однако для выбранного 
объекта такой цвет тени не является наилучшим. Выберем другой цвет тени, более 
близкий 
к цвету надписи. 

> Щелкните мышью на поле с образцом цвета справа от открывающегося списка Blend 

Mode (Режим наложения). На экране появится диалог Color Picker (Палитра цветов).
 

>• Если этот диалог перекрывает окно документа, переместите его в сторону, 
чтобы 
видеть на рисунке результат выбора цвета. 


Создание Web-сайтов 

>• Щелкните мышью на спектральной шкале - узкой вертикальной полосе - в области 

оттенков синего. В цветовом поле слева отобразится цветовое пространство 
выбранного 
оттенка. 

> Щелкая мышью в разных местах цветового поля, наблюдайте, как изменяется цвет 
тени на рисунке. Подберите оттенок светло-синего, наиболее подходящий, с вашей 
точки зрения, для тени. 

>• Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК. 

Параметр Angle (Угол) определяет угол, под которым свет падает на слой, а 
параметр 
Distance (Расстояние) - расстояние, на которое отбрасывается тень. Эти два 
параметра 
можно изменять интерактивно, прямо на рисунке. . 

>- Установите указатель мыши, который примет форму Kf, в окне документа на тени,
 
которую отбрасывает надпись ГЕОТОН. 

>• Нажмите и удерживайте левую кнопку мыши. 

> Не отпуская левую кнопку мыши, перемещайте указатель мыши вблизи надписи. 
Вместе с ним будет перемещаться и тень от надписи. В процессе перемещения 
текущие 
значения угла (Angle) и расстояния (Distance) будут отображаться в 
соответствующих 
полях ввода диалога Layer Style (Стиль слоя). 

>• Добейтесь наиболее оптимального положения тени и отпустите левую кнопку мыши 


Параметр Spread (Размытие) определяет степень четкости тени. 

>• Перемещая ползунок Spread (Размытие), установите наиболее подходящую степень 

четкости тени. 

С помощью ползункового регулятора Size (Размер) настраивается размер тени. 

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

В открывающемся списке Contour (Контур) можно выбрать форму контура тени. Если 
установить флажок Anti-aliased (Сглаживание), то контур будет сглажен. 
Ползунковь и 
регулятор Noise (Шум) позволяет добавить к тени шум. 

>• Закройте диалог Layer Style (Стиль слоя), нажав кнопку ОК. В палитре Layers 
(Слои) 
появится название второго эффекта - Drop Shadow (Тень снаружи), примененного к 
слою Layer 1. В окне документа эффект будет выглядеть примерно как на Рис. 4.67.
 

\% Geoton.psd @ 1002 (Layei I . RGB/8) 

Рис. 4.67. Эффект Drop Shadow (Тень снаружи) применен 

> Выберите команду меню File • Save (Файл • Сохранить), чтобы сохранить 
документ. 

В следующей главе мы продолжим работу над баннером и «оживим» его, создав 
анимацию. 
А пока рисунок Geoton.psd можно закрыть. Этот рисунок вы можете найти на 
прилагаемом 
к книге компакт-диске в папке \Web\ChapO4\Web. 

>• Нажав кнопку [xj в правом верхнем углу окна документа, закройте текущий 
документ. 


Подготовка графики 

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

Фгьмт JS@1O: «Живые» кнопки 

Вы, вероятно, помните, что в одном из опытов первой главы, на второй 
Web-странице 
нашего сайта, в файле spisok.html мы создали форму для отправки сообщения. В 
этой 
форме автоматически была сгенерирована кнопка Отправить. Для кнопки также 
автоматически 
был создан анимационный эффект нажатия. 

В дальнейшем на своих Web-страницах вы будете использовать разнообразные кнопки 

для самых различных целей с любыми анимационными эффектами. Посмотрим, как 
создаются 
такие кнопки. Для иллюстрации процесса создания и «оживления» графической 
кнопки превратим ссылку На первую страницу из файла spisok.html в кнопку, 
которая 
становится рельефной при установке на ней указателя мыши и имитирует нажатое 
состояние, 
когда нажимается левая кнопка мыши. Изображение кнопки подготовим в программе 
Adobe ImageReady, чтобы ближе познакомиться с ее особенностями и отличиями 
от Adobe Photoshop. 

> В программе Adobe Photoshop нажмите кнопку - Edit in ImageReady 
(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)). Будет запущена 
программа 
Adobe ImageReady, и на экране появится ее рабочее окно. 
Изготовление кнопки начнем с создания нового документа размером 250x100 
пикселов 
и прозрачным фоном. 
> Выберите команду меню File • New (Файл • Новый)- На экране появится диалог 
New 
Document (Новый документ) (Рис. 4.68). 

е: |UnlMed-l 

Image Ste


: [custom 

Sffldth: 1539 | pixels 

115 | pixels 

Contents of Hrst layer 
©wtxte 
О BackgrCKjnci Color 
О transparent 

Рис. 4.68. Диалог New Document (Новый документ) в Adobe ImageReady 

Этот диалог несколько отличается от аналогичного диалога Adobe Photoshop. В нем 

отсутствует возможность выбора цветового режима документа. Все новые документы 
в Adobe ImageReady создаются в цветовом режиме RGB. 

> В полях ввода со счетчиками Width (Ширина) и Height (Высота) введите размеры 
документа - 250 и 100 пикселов. 

>• Установите переключатель Transparent (Прозрачный), чтобы создать документ с 
прозрачным фоном. 


148 Создание Web-сайтов 

> Закройте диалог New Document (Новый документ) 
нажатием кнопки ОК. В рабочем окне программы 

raUnlitled-i @ 100% (Original) | 

появится окно документа указанных размеров, в 
котором прозрачный фон условно показан в виде 
серой шахматной мозаики (Рис. 4.69). 


Новый документ состоит из одного прозрачного 
слоя Layer 1. 

Установим для создаваемой кнопки желтый цвет 
переднего плана, выбрав его из палитры Swatches 
(Каталог). 

Рис. 4.69. Окно нового документа 

> Щелкните мышью на ярлыке Swatches (Каталог) 

с прозрачным фоном 

во втором сверху окне палитр у правого края рабочего 
окна, чтобы вывести на экран эту палитру. 


> Щелчком мыши выберите в палитре Swatches (Каталог) седьмой слева в первом 
ряду желтый цвет. Этот цвет отобразится на образце цвета переднего плана 
(Set foreground color) панели инструментов (Tools). 

Нарисуем с помощью инструмента |D ] - Rectangle Tool (U) (Инструмент 
«Прямоугольник
» (U)) кнопку в виде прямоугольника размером 230x35 пикселов, залитого желтым 
цветом переднего плана. 

v Щелкните мышью на кнопке [Dj - Rectangle Tool (U) (Инструмент «Прямоугольник» 

(U)) на панели инструментов (Tools). Данный инструмент будет выбран, а на 
панели 
параметров (Options Bar) появятся элементы управления данного инструмента 
(Рис. 4.70), с помощью которых следует определить параметры фигуры. 

Рис. 4.70. Панель параметров инструмента Rectangle Tool (U) 
(Инструмент «Прямоугольник» (U)) 

> Установите флажок Fixed Size (Фиксированный размер), чтобы создать 
прямоугольник 
определенного размера. 

>• В полях ввода Width (Ширина) и Height (Высота) введите размеры кнопки 235 
рх и 35 рх. 
>• Нажмите кнопку [и] - Create filled region (Создать заполненную область) на 
панели 
параметров (Options Bar), чтобы создать залитую цветом фигуру. 

Теперь, когда параметры прямоугольника заданы, его можно нарисовать. 
>- Установите указатель мыши в окне документа, у его левого края 
>• Нажмите и удерживайте левую кнопку мыши. В окне документа появится рамка 
пр;ь 

моугольника заданного размера. 
> Не отпуская левую кнопку мыши, переместите указатель мыши так, чтобы 
переместившийся 
вместе с ним прямоугольник расположился в центре окна документа. 
>• Отпустите левую кнопку мыши. Прямоугольник будет закреплен и залит желтым 
цветом переднего плана (Рис. 4.71). 


Подготовка графики 

Применим к слою Layer 1, на котором расположен 
прямоугольник, эффект Bevel and Emboss (Скоси 

"rjUnlitledi @ 1002 (Original) HEII3 

рельеф), создающий иллюзию рельефности кнопки. 

>- Чтобы видеть в палитре Layers (Слои) все эффекты 
и слои, которые мы создадим, переместите эту 
палитру вверх, расположив ее справа от окна документа 
так, чтобы она не перекрывала другие палитры, 
и увеличьте ее высоту примерно в 2 раза. 

!| .. /•• sec @ 28.8 Kbps •»; 

> Нажмите кнопку fjg - Add a layer effect (Добавить 
эффект к слою) в нижней части палитры Layers 

Рис. 4.71. Залитый цветом 

(Слои). На экране появится меню эффектов. 

прямоугольник 

Это меню содержит перечень тех же эффектов, что 
и аналогичное меню в Adobe Photoshop. 

> Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф). На 
экране 
появится диалог Layer Style (Стиль слоя) с элементами управления эффекта 
Bevel and Emboss (Скос и рельеф) (Рис. 4.72). 

Layer Style 

Styles 3evel and Emboss 

Blending Options! Default i- Structure 

Reset 
Drop Shadow Style: 1 Inner Bevel I* I 

Inner Shadow j~New Style... 
Technique: [SmoothT-J 

Outer Glow 

E Preview 
f~J Inner Glow Qepth: >— | 100 ]% 

Direction: ©Up О Down 
|~J Contour 
px


Size: 

[ j Tenture GLZ j 

П Satin Soften: i l |o p

j* 

П Color Overlay 

• Gradient Overlay Shading П 
Pattern Overlay 

• Stroke 
Gloss Contoui 

Highlight Mode: |Screen 

Opacity: —i»i^)— | 

Shadow Mode: |Multiply 

Opacity i »— ищщ|ц.|...ццф—» | 75 

Рис. 4.72. Диалог Layer Style (Стиль слоя) с элементами управления 
эффекта Bevel and Emboss (Скос и рельеф) 


Создание Web-сайтоз 

Данный эффект с параметрами по умолчанию будет применен к активному слою 
(Рис. 4.73). В диалоге Layer Style (Стиль слоя) вы можете изменить параметры 
эффекта. 
Но мы делать этого не будем, а используем эффект* 
создаваемый по умолчанию. 

"EjUntilledi @ 1002 (Onginol) И El 13 

Обратите внимание, что после применения эффекта 
в палитре Layers (Слои) справа от имени слоя появился 
значок в виде буквы f внутри белого круга, 
который означает, что к слою применен эффект. 

Нам осталось только написать на кнопке текст. 
Но предварительно установим для надписи синий цвет. 

| 100% •»][_.;.. se ( ф 28.8 Kbps 

>• Выберите из палитры Swatches (Каталог) синий 

Рис. 4.73. Эффект 

цвет - такой, чтобы текст был хорошо виден на 

Bevel and Emboss 

желтой кнопке. 

(Скос и рельеф) применен к слою 

Нажмите кнопку [Т ! - Type Tool (T) (Инструмент 
«Текст» (Т)) на панели инструментов (Tools). На панели параметров (Options Bar) 

появятся элементы управления параметрами инструмента - такие же, как и в Adobe 

Photoshop. 

В открывающихся списках Set the font family (Установка семейства шрифта) и 
Set the font style (Установка начертания шрифта) панели параметров (Options 
Bar) выберите гарнитуру и начертание шрифта из числа установленных на вашем 
компьютере. 

Щелкните мышью у левого края желтого прямоугольника в окне документа. В этом 
месте появится текстовый курсор. 

Введите с клавиатуры надпись: На первую страницу. Эта надпись появится в окне 
документа в точке ввода. 

Выделите введенный тест, протащив через него 

raUnlitled-1 @ KHR (Oiiginal) НЕ Ю 

указатель мыши. 

В открывающемся списке со счетчиком Set the 
font size (Установка размера шрифта) панели па


Иалераую страницу 

раметров (Options Bar) подберите для текста такой 
размер, чтобы надпись полностью поместилась 
на кнопке. 


100% ••/••setU28.8Kbps V 

С помощью инструмента [•*] - Move Tool (V) (Ин


Рис. 4.74. Надпись центрирована

струмент «Перемещение» (V)) отцентрируйте надпись 
на желтом прямоугольнике (Рис. 4.74). 


Изменим название созданного текстового слоя на Layer 2 (Слой 2). Это можно 
сделать в 
диалоге Layer Options (Параметры слоя). 

>• Щелкните правой кнопкой мыши на имени текстового слоя На первую страницу и 
выберите команду Layer Options (Параметры слоя) из появившегося контекстного 
меню. На экране появится диалог Layer Options (Параметры слоя) (Рис. 4.75). 


Подготовка графики 151 

> В поле ввода Name (Имя) диалога Layer 
Options (Параметры слоя) выделите назва


|Цате; | На первую страницу 

J

ние слоя, протащив по нему указатель 

D Use Previous Layer to Create clipping Mask 

мыши. 

>• Введите с клавиатуры новое название слоя 


Bend Mode: |№»mal Д Qpaor*. [ I'm, E] 

Layer 2-й нажмите клавишу jfenter]. Lock: В Iransoarancy D Eosition 
Blmagt D У 


Текстовый слой будет переименован, и его 
новое имя появится в палитре Layers 
(Слои). Рис. 4.75. Диалог Layer Options (Пара


метры слоя) 

Обрежем изображение в окне документа, оставив 
только ту его часть, на которой находится рисунок кнопки. Для этого 
предварительно 
следует выделить обрезаемый объект. Чтобы легче было выполнить выделение, 
нужно сделать активным слой Layer 1 с изображением желтого прямоугольника и 
выключить отображение остальных слоев и эффектов. 

>• Щелкните мышью на миниатюре слоя Layer 1 в палитре Layers (Слои), чтобы 
сделать 
его активным. 

>-В палитре Layers (Слои) щелкните мышью на треугольнике, расположенном между 
именем слоя Layer 1 и значком © , чтобы отобразить названия эффектов, 
примененных 
к слою. 

> Выключите отображение слоя Layer 2 и эффекта на слое Layer 1, щелкнув мышью 
на 
значках с открытым глазом ф в палитре Layers (Слои) против названия слоя Layer 
2 
и эффекта Bevel and Emboss (Скос и рельеф). 

Для выделения обрезаемого объекта воспользуемся инструментом \\\ - Magic Wand 
(W) 
(Инструмент «Волшебная палочка» (W)), с помощью которого легко выделяются 
области 
одного цвета или близких цветов. 

>• Выберите инструмент|\| - Magic Wand Tool (W) (Инструмент «Волшебная палочка» 

(W)) из всплывающего меню, которое появляется, если нажать и удерживать кнопку 
[О] - Marquee Tool (M) (Инструмент «Выделение» (М)) на панели инструментов 
(Tools). 

> Установите указатель мыши, который примет форму \ , в окне документа на 
рисунке 
желтого прямоугольника. 

> Щелкните мышью в этом месте. Контур желтого 

|'.jUntitled-1 @ 100% (Original) 1

прямоугольника будет выделен. 

| OHfl»al\Optimiztd \2-Up \-4-Up 

0 

Теперь можно обрезать рисунок по контуру выделения. 


>• Выберите команду меню Image • Crop (Изображение 
• Обрезать). Рисунок будет обрезан по ШШШшШШШШВЯШШ 
контуру выделения. | 100% • j -- /« s*c ф 28.8 Kbps * 

l[ctrl Рис. 4.76. Рисунок обрезан

>• Нажмите комбинацию клавишчтобы 

по размеру кнопки

отменить выделение объекта (Рис. 4.76). 


Создание Web-сайтов 

Кнопка готова. Теперь мы должны «научить» ее реагировать на различные события, 
связанные 
с действиями мыши - нажатиями, щелчками и т.д. Для этого используется спе 

циальная палитра Web Content (Содержимое Web). 
> Щелкните мышью на ярлыке Web Content (Со


держимое Web) в третьем сверху окне палитр. 
Если такого ярлыка нет, выберите команду меню 
Window • Web Content (Окно • Содержимое 
Web). Палитра отобразится в рабочем окне 
(Рис. 4.77). 

Эффект Rollover (Наведение) создается из отдельных 
кадров-состояний изображения, для каждого из которых 
определяется то или иное событие, связанное с 
мышью. При просмотре в браузере эти кадры изображения 
будут изменяться в зависимости от действий 
мыши. 

В палитре Web Content (Содержимое Web) по умолчанию 
уже создан первый кадр эффекта для состояния 
изображения Normal (Нормальное), при котором 
указатель мыши находится за пределами объекта, т.е. 
за пределами кнопки. На миниатюре этого кадра отображается 
видимый в данный момент слой Layer 1 без 
примененного к нему эффекта. 

> Включите также отображение надписи, которая 
находится на слое Layer 2, чтобы и она отображалась 
на первом кадре-состоянии. 

Таким образом, при нормальном (Normal) состоянии 
изображения, когда мышь находится за пределами 
объекта, кнопка с надписью будет выглядеть как плоский 
прямоугольник. 

Создадим новый 

кадр для следующего состояния 

рисунка. . 

> Нажмите кнопку I И | - Creates rollover state (Создать 
состояние) в нижней части палитры Web 
Content (Содержимое Web). В этой палитре появится 
и будет выделен двойной рамкой следующий 
кадр для состояния Over (Над) (Рис. 4.78), при котором 
указатель мыши перемещается по объекту или 
находится над ним, и кнопки мыши не нажаты. 

Состояние Over (Над) программа предлагает для второго 
кадра по умолчанию. Но вы можете выбрать для 
этого и всех последующих кадров любые другие 
состояния. 

; Web Content \Color Table ©

В 1•


Image Maps 

Slices 

* | a a | a » л 
Рис. 4.77. Палитра Web Content 
(Содержимое Web) 

Web Content% 

'•"'—' Normal 

ч ,• 

Puc. 4.78. Добавлено состояние 
Over (Над) 


Over 
Down 


Selected 

Out 
Up 
Click 

Custom... 

None 

Puc. 4.79. Меню состояний 

>• Щелкните правой кнопкой мыши на имени состояния Over (Над). На экране 
появится 
меню состояний (Рис. 4.79). 


Подготовка графики 

Из этого меню, кроме Over (Над), вы можете выбрать одно из следующих состояний 
изображения, связанных с действиями мыши. 

Down (Нажатие) - состояние изображения, при котором нажимается и удерживается 
левая кнопка мыши в то время, когда указатель мыши находится над объектом. Это 
состояние 
сохраняется так долго, как долго удерживается нажатой кнопка мыши. 

Selected (Выбрано) - определяет состояние, когда кнопка выбрана. 

Out (Наружу) - определяет состояние, при котором указатель мыши удаляется за 
пределы 
объекта. Такому событию обычно соответствует состояние Normal (Нормальное). 

Up (Отпускание) - определяет состояние изображения, когда после отпускания 
кнопки 

мыши указатель мыши находится в пределах объекта. Такому событию обычно 
соответствует 
состояние Over (Над). 

Click (Щелчок) - определяет состояние, когда выполняется щелчок мышью на 
объекте. 

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

Custom (Пользовательское) - создает новое состояние изображения. 

None (Нет) - сохраняет текущее состояние изображения для дальнейшего 
использования 

в качестве одного из состояний эффекта. Данное состояние не будет отображаться 
на 

Web-странице. 

>- Щелкните мышью за пределами меню состояний на свободном пространстве 
рабочего 
окна, чтобы закрыть это меню и оставить для второго кадра состояние Over (Над). 


Теперь мы должны определить, как будет выглядеть рисунок кнопки при состоянии 

Over (Над), т.е. когда на ней находится указатель мыши и кнопки мыши не 
нажимаются. 

При этом событии изображение кнопки должно становиться рельефным. 

>• Включите отображение эффекта Bevel and Emboss (Скос и рельеф), щелкнув мышью 

в палитре Layers (Слои) в крайнем левом поле строки с названием этого эффекта 
так, чтобы в этом поле появился значок с изображением открытого глаза ф. 

Таким образом, мы определили изображение на втором кадре эффекта для состояния 

Over (Над). 

Создадим новый кадр-состояние эффекта Rollover (Наведение). 

>• Нажмите кнопку I В I - Creates rollover state (Создать состояние) в нижней 
части 
палитры Web Content (Содержимое Web). В этой палитре появится новый кадр для 
состояния Down (Нажатие). 

Для вновь создаваемых кадров Adobe ImageReady по умолчанию предлагает состояния 
в 

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

вы можете выбрать из меню другое состояние. 

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

эффекта Bevel and Emboss (Скос и рельеф). 


Создание Web-сайтов 

 Дважды щелкните мышью на названии эффекта 
Bevel and Emboss (Скос и рельеф) в палитре '{jUnlitlcdi <a>1002l0ngiruil| HE3 E 

Layers (Слои). На экране появится диалог Layer 1.4-Up 
Style (Стиль слоя) с элементами управления эффекта 
Bevel and Emboss (Скос и рельеф). 

шрвую страницу 

>- Установите переключатель Down (Вниз) в диалоге 
Bevel and Emboss (Скос и рельеф) и нажмите 
кнопку ОК. Диалог Layer Style (Стиль слоя) за-i 100% <r II ..(..net 28.8 Kbpl 
кроется, и вид кнопки на рисунке изменится, 

Рис. 4.80. Нажатое 

имитируя ее нажатое состояние (Рис. 4.80). 

состояние кнопки 

Созданный эффект можно просмотреть. 

> Нажмите кнопку |<|S| - Preview Document (Y) (Предварительный просмотр 
документа 
(Y)) на панели инструментов (Tools), чтобы включить режим предварительного 
просмотра. 

>• Установите указатель мыши в окне документа, за пределами изображения кнопки. 

Кнопка примет вид плоского прямоугольника. 

> Переместите указатель мыши на изображение кнопки. Кнопка станет рельефной. 

>- Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое состояние 

кнопки. 

>• Отпустите левую кнопку мыши. Изображение кнопки вновь станет рельефным. 

>• Удалите указатель мыши за пределы изображения кнопки. Это изображение станет 

плоским. 

>• Выключите режим предварительного просмотра эффекта, нажав кнопку \Щ\ Preview 

Document (Y) (Предварительный просмотр документа (Y)) на панели инструментов 
(Tools). 

> Сохраните документ в формате PSD под именем Knopka.psd, выбрав команду меню 
File • Save (Файл • Сохранить). 

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

Фммт J№n. Оптимизируем и сохраняем графику 

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

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

Для полного контроля над процессом оптимизации вы можете использовать 
специальные 
режимы просмотра. В процессе создания изображения мы работали с неоптимизи



Подготовка графики 

155 

рованной, оригинальной (Original) его версией, которая и сейчас отображается в 
окне 
документа. В нижней части этого окна в двух открывающихся списках отображается 
информация о документе: размер оптимизированного файла и длительность его 
загрузки 
992 bytes / 1 sec, оригинальный размер файла и размер оптимизированного 
GIF-файла 
314К / 992 bytes (Рис. 4.81). В этих открывающихся списках вы можете выбрать 
другую 
информацию для вывода. 

1jKnopka.psd @ 100% (Qiiginal) \'7j Knopka.psd& 100* (Optimized) 
Original Ч Opti .Q 2-Up -J.4-UP 


РШГ первую страницу первую страницу 

•""iub^fc ' V f«2byi«7iMt'»inJ>"'.'.''"'i iT«7SIbv«seiF "»' 
31«/S32 byres GIF • 

Рис. 4.81. Окно документа с исходным 

Рис. 4.82. Изображение 
изображением и информацией о нем 


оптимизировано 

v Щелкните мышью на ярлыке Optimized (Оптимизированный) в верхней части окна 
документа. На этой вкладке отображается оптимизированное изображение с 
параметрами, 
установленными по умолчанию (Рис. 4.82). 

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

В двух открывающихся списках в нижней части окна документа можно выбрать для 
отображения 
другую информацию о рисунке: оптимизационная информация (Optimized 
Information), размеры изображения (Image Dimensions), наличие водяного знака на 
изображении 
(Watermark Strength), размер в байтах оригинального (Original in Bytes) и 
оптимизированного изображения (Optimized in Bytes), размер файла и время его 
загрузки 
(Size/Download Time) разными модемами и др. 

> Просмотрите, воспользовавшись левым открывающимся списком, сведения об 
оптимизированном 
изображении, которые сообщает Adobe ImageReady, после чего выберите 
Original/Optimized File Sizes (Оригинальный/Оптимизированный размеры файлов). 

В режиме 2-Up (2 варианта) вы можете увидеть одновременно оригинальный и 
оптимизированный 
рисунки, чтобы иметь возможность сравнить их. 

fjKnopka psd @ 100% (2 Up) ' 3 Knopka psd @ 100% (2 Up) 

Original 4. Optimized 4{~2rUp Ч •>-ЦР~ 

•

первую страницу 

Origirni: "Knopka.psd" 

314К первую страницу 

Та первую страницу 

GIF 100% diihtr 

первую страницу 

992 byles Selective palette 
1 sec @ 28.8 Kbps 1в colors 


100% -r ;992 by»! Л sec @ 28.8 ...•» | 3I4K/9S2 byl«s GIF •» 100% •» |992 
by«s/l isc 9 28.8 ...• | 31*: / 992 byl« GIF 

Рис. 4.83. Режим 2-Up (2 варианта) Рис. 4.84. Режим 2-Up (2 варианта) 
с отображаемой информацией со скрытой информацией 


Создание Web-сайтов 

Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. 

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


нии, внизу - об оптимизированном (Рис. 4.83). 

Выберите команду меню View • Hide Optimization Info (Вид • Скрыть оптимизаци


онную информацию). Эта информация будет удалена из окна документа, и вы увиди


те оба варианта рисунка (Рис. 4.84). 

Как видите, различия между этими вариан


fg| Knopka psd @ 100Х (4-Up) 

тами практически не заметны. 

Original'" r6pFi'r(ii!ed"'


В режиме 4-Up (4 варианта) в рабочем окне 
документа отображаются четыре вер


первую страницу 

сии рисунка. 

> Щелкните мышью на ярлыке 4-Up (4 

варианта), чтобы переключиться в этот 

режим (Рис. 4.85). первую страницу 

По умолчанию в данном режиме в верхней 
части окна документа отображается ориги


гга первую страницу 

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


первую страницу 

ванными текущими установками. 
По умолчанию в окне документа выделен 

992 byles/I sec <§> 28.8 ...v| 314K/ 992 bytes OIF 

жирной рамкой второй оптимизированный 
вариант изображения, и информация о нем 


Рис. 4.85. Режим 4-Up (4 варианта)

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

> Переключите окно документа в режим 2-Up 
(2 варианта), щелкнув мышью на этом ярлыке в 


Ц Info ^ J Optimize "BJnEHki'JOj 

верхней части окна. 

Preset: (Суплмт»^ 

>• Выберите команду меню View • Show Optimization 

Format: [GIF 

Info (Вид • Показать оптимизационную информа


^ Color Table 

цию), чтобы отобразить в окне документа необходи-\> Dither 

мые сведения. ^ Transparency 

]/ Options 

Параметры оптимизации можно настроить с помощью 

палитры Optimize (Оптимизация) (Рис. 4.86), которая по Puc. 4.86. Палитра 
Optimize 

умолчанию находится в верхнем окне палитр у правого (Оптимизация) 

края рабочего окна. 

>• Если эта палитра отсутствует в рабочем окне, выберите команду меню Window • 
Optimize (Окно • Оптимизация). 


Подготовка графики 

В открывающемся списке Preset (Предварительные установки) в верхней части 
палитры 
Optimize (Оптимизация) можно выбрать одну из многочисленных заготовок 
стандартных 
параметров для сохранения графики в различных форматах и с различным качеством. 

В зависимости от выбранной заготовки изменится и набор параметров, которые 
можно изменить. Для формата GIF в расширяемой части Color Table (Таблица 
цветов) 
можно установить количество цветов 2, 4, 8,16, 32, 64, 128, 256 с различными 
методами 
смешивания (в расширяемой части Dither). Для формата JPEG в расширяемой части 
Quality (Качество) можно выбрать качество оптимизированного изображения: Low 
(Низкое), Medium (Среднее), High (Высокое), Very High (Очень высокое), Maximum 
(Максимальное). Также большой выбор параметров для форматов PNG-8 и PNG-24. 
Кроме того, можно добавить в меню собственный набор установок и дать ему имя по 

своему усмотрению. 

В открывающемся списке Format (Формат) предлагается выбрать один из 
Webформатов: 
GIF, JPEG, PNG-8, PNG-24 или WBMP. О критериях выбора формата мы уже 
подробно говорили в главе «Графика для Web-страниц». Напомним кратко, что 
формат 
файла, который выбирается для сохранения изображения, зависит от его цветовых, 
тоновых 
и графических характеристик. В общем случае многотоновые полноцветные 
изображения, такие, как фотографические, должны сохраняться в формате JPEG. Для 

рисунков с ограниченным количеством цветов, четко прорисованными деталями и 
границами 
объектов, таких, как текст, больше подходят форматы GIF или PNG-8. Изображения 
с анимацией должны сохраняться в формате GIF. Формат PNG-24 подходит для 
фотографических изображений. Однако размер файла в этом формате значительно 
больше, чем размер файла с тем же изображением в формате JPEG. Формат PNG-24 
рекомендуется 
применять только для полноцветных изображений, содержащих многоуровневую 
прозрачность, которую не поддерживает формат JPEG. Следует также помнить, 
что PNG-файлы поддерживаются не всеми популярными Web-браузерами. 

Формат WBMP является стандартным для оптими


зации изображений для мобильных устройств, та-шшшшшшшш 

| Info^ t Optimize \L a yer Comps \ , 

ких, как сотовые телефоны. Формат WBMP под


Preset: ([Unnamed] 

держивает 1-битный цвет, т.е. WBMP-изображения El 

являются черно-белыми. 

Format: [GIF 

V^ Color Table 

> Щелкните мышью на треугольнике ^ слева от 

Reduction: iGrayscale _Xf|IQI 

строки Color Table (Таблица цветов). Эта часть 

Colors: |_^_JjJ •

палитры Optimize (Оптимизация) будет развер-

WebSnjp: [o%_ [j | 

нута (Рис. 4.87). 

& Dither 

Чтобы вновь свернуть часть палитры, достаточно 

[> Transparency 

щелкнуть мышью на треугольнике "7 слева от на-1> Options 

звания развернутого раздела. Чтобы развернуть все 

разделы палитры Optimize (Оптимизация), надо Рис. 4.87. Элементы управления 

нажать кнопку 0 в правом верхнем углу палитры Color Table (Таблица цветов) 

и в появившемся меню выбрать команду Show палитры Optimize (Оптимизация) 

Options (Показать параметры), а чтобы свернуть 


команду Hide Options (Скрыть параметры). 

Одним из лучших способов уменьшения размеров GIF или PNG-8 файлов при 
сохранении 
качества является максимально возможное сокращение количества цветов в 
изображении. 
В открывающемся списке Reduction (Уменьшение) расширяемой части Color 


Создание Web-сайтов 

158 

Table (Таблица цветов) (Рис. 4.87) вы можете выбрать одну из предложенных 
цветовых 
палитр или таблиц для преобразования изображения из полноцветного в 256-цветное.
 

Напомним, что такое преобразование необходимо, так как формат GIF поддерживает 
не 
более 256 цветов. Палитры отличаются способом их формирования: 

Perceptual (Воспринимаемая) - формирует пользовательскую палитру из цветов, к 
которым 
наиболее чувствителен глаз человека; 

Selective (Выборочная) - создает палитру, подобную предыдущей, но содержит 
также 
Web-цвета. Выбирается по умолчанию; 

Adaptive (Адаптивная) - формирует таблицу цветов путем взятия проб в тех 
участках 
спектра, которые наиболее активно использованы в изображении. Например, при 
обработке 
RGB-изображения в зелено-голубых тонах таблица будет составлена преимущественно 

из оттенков зеленого и голубого цветов. Этот вариант может оказаться достаточно 

удобным, поскольку во многих случаях цвета, использованные в изображении, 
сконцентрированы 
в определенных участках спектра. Если до начала преобразования вы выделите 
в изображении области, содержащие те цвета, которые вам хотелось бы включить в 
адаптированную палитру, то Adobe ImageReady будет формировать таблицу на основе 

выделенного диапазона цветов; 

RestrictiMy (Web) (Ограниченная (Web)) - использует стандартную Web-палитру из 
216 цветов, общих для палитр Windows и Мае, использование которой гарантирует, 
что 
цвета не будут подвергаться смешиванию в браузере. Эту палитру также называют 
безопасной 
(Web-safe palette); 

Custom (Пользовательская) - сохраняет текущую Perceptual (Воспринимаемая), 
Selective (Выборочная) или Adaptive (Адаптированная) палитру как фиксированную, 

которая не обновляется для каждого изображения; 

Black & White (Черно-белая); 

Grayscale (Градации серого) - использует 256 градаций серого; 

Mac OS - использует стандартную 256 цветную палитру операционной системы 
Macintosh, 
также основанной на равномерной выборке RGB-цветов по всей длине спектра; 

Windows - использует стандартную 256 цветную па


литру Windows, которая основана на равномерной, с 1 ai 

j_Wjb Content4] Color Table\ __(.) 

постоянным интервалом, выборке RGB-цветов по всей 

длине спектра. i 

Набор цветов каждой из перечисленных таблиц вы мо-1i. 

i t-z

жете увидеть в палитре Color Table (Цветовая таблица). мяв 

• 

_ 

> Выберите из открывающегося списка Reduction 
(Уменьшение) значение Grayscale (Градации серого). 


о 

> Щелкните мышью на ярлыке Color Table (Цветовая 

:

таблица) в третьем сверху окне палитр у правого 

256 i e> a i в в л

края рабочего окна или выберите команду меню 
Window • Color Table (Окно • Цветовая таблица), color Table

 Рыс 48 8 Палитра

чтобы вывести на экран эту палитру (Рис. 4.88). (Цветовая таблица) 


Подготовка графики

В палитре Color Table (Цветовая таблица) отображаются образцы 256 градаций 
серого 
цвета. 

> Выбирая из открывающегося списка Reduction (Уменьшение) палитры Optimize 
(Оптимизация) различные цветовые таблицы, просмотрите, как при этом изменяется 
оптимизированное изображение, его параметры, а также набор цветов таблицы 
(Color Table), после чего снова выберите таблицу Selective (Выборочная). 

Используя все доступные средства, вы можете добавлять, удалять, редактировать 
или 
блокировать некоторые цвета в палитре Color Table (Цветовая таблица). 
Блокирование 
цветов гарантирует, что цвет останется нетронутым, когда вы выбираете другие 
цвета 
или преобразовываете их в Web-безопасные цвета. Для выбора любого цвета 
достаточно 
щелкнуть на нем мышью; для выбора группы цветов - щелкать мышью при нажатой 

клавише !!Sh'"l. Блокирование выбранных цветов выполняется нажатием кнопки с 
изображением 
замка | а I - Locks / Unlocks selected colors to prohibit being dropped 
(Блокирует / Разблокирует выбранные цвета) в нижней части палитры Color Table 
(Цветовая таблица). При этом в правом нижнем углу образца цвета появляется 
миниатюрный 
квадрат. 

Для преобразования выбранных цветов в Web-безопасные следует нажать кнопку | е 
| Shifts 
/ Unshifts selected colors to Web palette (Сдвигает / Отменяет сдвиг выбранных 
цветов к Web-палитре) в нижней части палитры. В центре образца цвета появится 
значок 
в виде миниатюрного ромба. 

Добавление цвета возможно только, если в палитре присутствует менее 256 цветов, 
и осуществляется 
нажатием кнопки I S | - Adds foreground color to palette (Добавить цвет в 
палитру), 
а удаление выделенных цветов - нажатием кнопки [ В | - Deletes selected colors 
(Удалить 
выбранные цвета) в нижней части палитры Color Table (Цветовая таблица). 

В меню палитры Color Table (Цветовая таблица) Adobe ImageReady предлагает 
команды 
для быстрого выбора всех цветов (Select All Colors), всех цветов из выделенной 
части 
рисунка (Select АН From Selection), всех Web-безопасных цветов (Select All Web 
Safe 
Colors) или всех не Web-безопасных цветов (Select All None-Web Safe Colors). Вы 
можете 
создавать также собственные группы манипуляций с цветами. Можно, например, 
выбрать нужный набор цветов или все цвета, а затем автоматически преобразовать 
их в 
Web-безопасный эквивалент. Вы также можете непосредственно из палитры Color 
Table 
(Цветовая таблица) открыть диалог Color Picker (Палитра цветов) двойным щелчком 
на любом 
из цветов для выбора нового текущего цвета. Выбирая новый цвет, вы тем самым 
редактируете цвет, выделенный в палитре. Напомним, что диалог Color Picker 
(Палитра 
цветов) содержит флажок, который позволяет отображать только набор 
Web-безопасных 

цветов. _ . /тт . 
СГ помощью элемента управления Colors (Цвета) вы можете указать максимальное 
количество цветов в палитре. Если изображение содержит меньшее количество 
цветов, 
чем вы определили, цветовая палитра будет содержать только цвета изображения. 
В поле ввода со счетчиком Colors (Цвета) можно ввести любое значение в 
диапазоне от 
2 до 256 или выбрать в открывающемся списке одно из фиксированных значений: 2, 
4, 8, 
16, 32, 64, 128, 256. Напомним, что для представления цвета используется целое 
число 
бит и указанный ряд чисел - это максимальное количество цветов при 
использовании от 
1 до 8 бит на 1 пиксел. Поэтому предпочтительнее выбрать фиксированное значение.
 


Создание Web-сайтов 

> Выбирая из открывающегося списка Colors (Цвета) различные значения 
максимального 
количества цветов в палитре и просматривая полученный результат в окне 
документа, 
найдите минимальное значение параметра, при котором качество изображения 
остается удовлетворительным. Вероятно, таким значением будет 16. 

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

(Colors), меньших 16. 

С помощью ползункового регулятора Web Snap (Привязка к Web) можно автоматически 

конвертировать цвета палитры в Web-цвета и, таким образом, исключить смешивание 

в браузере. Числовое значение этого параметра в процентах определяет количество 

цветов, которые будут преобразованы. Чем больше значение, тем больше 
цветов будет преобразовано. 

Применение любой из перечисленных выше палитр для уменьшения цветов из 
открывающегося 
списка Reduction (Уменьшение) - Selective (Выборочная), Adaptive (Адаптивная) 
и других - может привести к тому, что цветовая 
таблица не сможет вместить все цвета, использованные 
в изображении. Для имитации цветов, Jjnfo^Oplimue4ij^yer Сотр5"\_(Г| 
не оказавшихся в цветовой таблице, можно задать Preset: |[Unnsmed] 
один из способов смешивания, выбрав его из от


Format! I GIF 

крывающегося списка Method (Метод) расширяе-ы 

t> Color Table 

мой части Dither (Смешивание) (Рис. 4.89). 

7 Dither 
Method: [Diffusion 

Смешивание подразумевает комбинирование пик


селов, окрашенных в доступные цвета, случайным Amount: ) 100% т | 

образом или в виде узора (Pattern) таким образом, [> Transparency 

чтобы получить иллюзию отсутствующего цвета. ^ Options 

Например, комбинация красного и желтого цветов, 

Рис. 4.89. Элементы управления

размещенных в виде мозаичного узора, может ими


Dither (Смешивание)

тировать оранжевый цвет, отсутствующий в палит


палитры Optimize (Оптимизация)

ре. Вам предлагаются четыре варианта: 

No Dither (Без смешивания) - не выполняет никакого смешивания. Вместо 
отсутствующих 
цветов подставляются их ближайшие аналоги из числа доступных. В результате в 
изображении могут образоваться слишком резкие цветовые переходы; 

Diffusion (Диффузия) - выполняет смешивание, добавляя в изображение пикселы, 
расположенные 
случайным образом, без какой-либо закономерности, создавая эффект диффузии 
между соседними пикселами. В результате изображение приобретает характерную 
зернистую, 
шероховатую фактуру, но с минимальными искажениями цвета. Применяется по 
умолчанию; 

Pattern (Узор) - для имитации отсутствующих в палитре цветов смешивает пикселы, 

располагая их в виде шахматной мозаики; 

Noise (Шум) - применяет случайное размещение пикселов, подобно методу Diffusion 

(Диффузия), но без диффузии между соседними пикселами. При этом методе на 
изображении 
не возникают шероховатости. 


Подготовка графики 

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

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

>• Щелкните мышью на треугольнике $ слева от 
строки Transparency (Прозрачность). Эта часть 
палитры Optimize (Оптимизация) будет развернута 
(Рис. 4.90). 

^J 

> Color Table 

Если вам заранее известен цвет фона Web-

t> Dither 

страницы, на которую будет помещено создавае


^Transparency 

мое изображение, вы можете указать программе 

p; Transparency Made: 

окрасить прозрачные пикселы изображения цве


Dither: [No Dither—| 

том, соответствующим фону Web-страницы. Это 
можно сделать двумя способами. При установ


Amount: 1100% 

ленном по умолчанию флажке Transparency t> Options 
(Прозрачность), а этот флажок установлен, так 

Puc. 4.90. Элементы управления

как изображение создано на прозрачном фоне, 

Transparency (Прозрачность)

сохраняется прозрачность всех абсолютно про


палитры Optimize (Оптимизация)

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


j Optimize \Layar Comps\ i 

ленным параметром Matte (Подложка). При 

Preset: ([Unnamed] 

сброшенном флажке Transparency (Прозрач


Format: |GIF 

ность) абсолютно и частично прозрачные пикселы 

> Color Table 

заполняются цветом, который выбирается из от


l> Dithe 

крывающегося списка Matte (Подложка). 

t> Transparency 

V Options 

Параметр Lossy (Потери) в расширяемой части 

О Interlaced Lossy: ( 1 Jj J [

Options (Параметры) (Рис. 4.91) позволяет ука


|~: Use Unified Color Table 

зать значение в процентах, на основании которого 

J7; Add Metadata | Settings.*" I

в процессе сжатия из изображения будут удалены 

пикселы и, соответственно, уменьшен размер 

файла. Применение значения Lossy (Потери) Puc. 4.91. Элементы управления 

в пределах 5-10%, а иногда и до 50%, заметно не Options (Параметры) 

сказывается на качестве. Используя этот параметр, палитры Optimize 
(Оптимизация) 

часто можно уменьшить размер файла на 5-40%. 

Указанный параметр не может использоваться совместно с методами смешивания 
Noise 
(Шум) и Pattern (Узор), а также при установленном флажке Interlaced 
(Чересстрочная 
развертка). 

> Установите флажок Interlaced (Чересстрочная развертка), чтобы сохранить файл 
с 
использованием чересстрочной развертки. 

При этом в процессе загрузки изображения браузер показывает сначала каждую 
восьмую 
строку пикселов, затем - каждую четвертую, далее - каждую вторую и, наконец, 
все изображение. Это позволяет пользователю понять содержание рисунка еще до 
окончания 
его полной загрузки. Обратите внимание, что использование чересстрочной раз



162 Создание Web-сайтов 

вертки для данного изображения не увеличивает размер файла, а даже 
незначительно 
уменьшает его с 992 до 987 байт (при 256 цветах). 

> Установите флажок Use Unified Color Table (Использовать унифицированную 
цветовую 
таблицу). Это позволит использовать единую цветовую таблицу для всех состояний 
эффекта Rollover (Наведение). 

Adobe ImageReady обеспечивает цветовой контроль на таком уровне, что можно 
дала: 
увидеть, как будет выглядеть 8-битное, 256-цветное изображение в различных 
браузерах 
и в различных операционных системах. Чтобы проверить отображение графики в 
браузере, 
достаточно выбрать команду меню View • Preview • Browser Dither (Вид • 
Предварительный 
просмотр • Смешивание в браузере) при активном оптимизированном варианте 
изображения в окне документа. Или можно изменить настройки дисплея на 
8-битный режим - 256 цветов, а затем просмотреть оптимизированное изображение в 

различных браузерах, которые можно вызвать непосредственно из Adobe ImageReady 
командой меню File • Preview In (Файл • Предварительный просмотр в) или 
нажатиегл 
кнопки \Щ\ - Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр 
в 
браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools). 

Операционные системы Macintosh и Windows используют различные цветовые гаммы 
для 
отображения графики на экране, и обычно в системе Windows изображения кажутся 
несколько 
темнее. Adobe ImageReady имитирует этот эффект, когда пользователь выбирает 
команды меню View • Preview • Standard Windows Color (Вид• Предварительный 
просмотр 
• Стандартные цвета Windows) или View • Preview • Standard Macintosh Color 
(Вид • Предварительный просмотр • Стандартные цвета Macintosh), что позволяет 
на глаз 
оценить, как будет выглядеть графика. Adobe ImageReady выводит в палитре Info 
(Информация) 
значения цветов как в десятичной, так и в шестнадцатеричной системе счисления в 

тот момент, когда курсор указывает на соответствующий цвет в окне документа или 
палитре 
Color Table (Цветовая таблица), что очень удобно для Web-дизайнеров. 

Оптимизированное изображение необходимо сохранить в папке Web, в которой 
сохранены 
файлы сайта, и в том числе, файл spisok.html. 

>• Выберите команду меню File • Save Optimized (Файл • Сохранить 
оптимизированный 
документ). На экране появится диалог Save Optimized (Сохранение 
оптимизированного 
документа) (Рис. 4.92). 

>• Откройте для сохранения файла папку Web, в которой сохранены HTML-файлы 
сайта 

v Убедитесь, что в открывающемся списке Тип файла (File type) выбрано HTML and 
Images (*.html) (HTML и изображения (*.html)), чтобы сгенерировать HTML-код 
созданного 
эффекта и сохранить изображения. При этом кадры каждого состояния эффекта 
Rollover будут сохранены как отдельные файлы в папке images, которая будет 
помещена в ту папку, где будет находиться HTML-файл, т.е. в папку Web. 

В поле ввода Имя файла (File name) для сохраняемого документа предлагается имя 
Knopka.html. Оставим его без изменения. 

> Нажмите кнопку Сохранить (Save). Диалог Save Optimized (Сохранение 
оптимизированного 
документа) закроется. Adobe ImageReady создаст и сохранит на диске 
файл Knopka.html с HTML-кодом эффекта. 


Подготовка графики 

Save Optimized 

Папка: [ l ^ Мои рисцнки 

jjjj О Ф <& 0' 

ItCnopka Id 
|HTML end Images ("Wml) 
|DelaJ Sellings Id 
|All Slices LTJ 

4.92. Диалог Save Optimized (Сохранение оптимизированного документа) 
Мы познакомились с возможно$тями оптимизации и сохранения графики для Web в 
программе Adobe ImageReady. Такую же оптимизацию вы можете выполнить в Adobe 
Photoshop. Особенности оптимизации в Adobe Photoshop мы рассмотрим в дальнейшем.
 
А сейчас программу Adobe ImageReady можно закрыть. 

> Выберите команду меню File • Exit (Файл • Выход). На экране появится запрос о 

необходимости сохранения документа Knopka.psd (Рис. 4.93). 

Adobe ImageReady 

f \ Save changes to document "Knopka.ptd" before quitting? 

| &* | Нет |j Отм.нГ"] 

Рис. 4.93. Запрос о необходимости сохранения документа Knopka.psd 

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

>• Нажмите кнопку Нет (No). Программа Adobe ImageReady закроется. Вы 
возвратитесь 
к программе Adobe Photoshop. 

Посмотрим, что представляет собой созданный файл. 

• Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web. 
В этом файле записана автоматически созданная на языке JavaScript программа, 
изменяющая 
состояние изображения кнопки при различных действиях, выполняемых мышью. 
Сами изображения находятся в папке images. Такая программа обычно состоит из 
команд (операторов) и команд вызова функций. В нашем случае функции находятся в 

заголовке HTML-документа между тегами <head> и </head>, а команды, их 
вызывающие, 
- в его теле, между тегами <body> и </body>. 


Создание Web-сайтс в 

Теперь мы должны скопировать код программы из файла Knopka.html в файл 
spisok.html так, чтобы вставить в последнем документе вместо текстовой ссылки 
На первую страницу графическую кнопку. Сделаем это следующим образом: 

>- Откройте файл spisok.html в новой копии программы Блокнот (Notepad). 

>• Скопируйте через буфер обмена в заголовок файла spisok.html функции, начиная 
с 
комментария <!-- ImageReady Preload Script (Knopka.psd) --> и заканчивая 
<!-- End Preload Script —>, 

> В открывающий тег <body> файла spisok.html добавьте команду вызова функции 
предварительной загрузки изображений ONLOAD-"preloadimages О ;", скопировав 
ее из файла Knopka.html так, чтобы этот тег имел следующий вид: 

<body bgcolor=blue text=yellow link=white vlink=yellow 
ONLOAD="preloadImages();"> 

>• На место строки, в которой определяется ссылка На первую страницу файла 
spisok.html скопируйте из файла Knopka.html текст программы, начиная с <! — 
ImageReady 
Slice s {Knopka.psd) -->и заканчивая <!-- End ImageReady 
Slices -->. 

> В файле spisok.html в ссылке A HREP="#" СИМВОЛ # замените именем файла 
geoton.html, чтобы эта ссылка имела следующий вид: 

A HREF="geoton.html" 


> Сохраните файл spisok.html, выбрав команду меню программы Блокнот (Notepad) 
Файл • Сохранить (File • Save). 

> Закройте обе копии программы Блокнот (Notepad). 

Проверим, как работает созданная нами кнопка. 

> Откройте документ spisok.html из папки Web в программе просмотра Web-страниц. 


> Перейдите в конец страницы, где находится вставленная кнопка. 

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

> Установите указатель мыши на желтой кнопке с надписью На первую страницу. 
Кнопка станет рельефной. 

>- Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое состояние 

графической кнопки. 

>• Отпустите левую кнопку мыши. Произойдет переход по ссылке, и в окно браузера 

будет загружен файл geoton.html. 

Если у вас что-либо не получается, проверьте, правильно ли вы скопировали 
программу 
в файл spisok.html. 

>• Закройте окно браузера, нажав кнопку [х]в правом верхнем его углу. 

Таким образом, мы убедились, что созданный нами эффект Rollover (Наведение) 
работает. 
Подобным образом вы можете создавать большое количество разнообразных эффек



Подготовка графики 

тов. Кроме того, каждое состояние эффекта может быть анимировано, например, так,
 
чтобы при нажатии кнопки буквы «убегали» с нее. Можно придумать множество 
интересных 
и необычных эффектов. 

Обрабатываем фото 

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

Одно из существенных преимуществ цифровой фотографии, помимо оперативности и 
удобства, - широкие возможности редактирования изображений. Ретушь, фотомонтаж, 

всякого рода художественные эффекты на цифровых фото осуществляются значительно 

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

>• С помощью программы Проводник (Explorer) перепишите файлы Ozero.jpg и 
Samolet.jpg с компакт-диска на жесткий диск. 

>• Откройте в программе Adobe Photoshop с помощью команды меню File • Open 
(Файл 

• Открыть) загруженный файл Ozero.jpg (Рис. 4.94). 
Рис. 4.94. Фотография из файла Ozero.jpg 


Создание Web-сайтов 

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

На открытой в Adobe Photoshop фотографии Ozero.jpg вы видите африканский пейзаж.
 
Причем все изображение сильно затемнено так, что в его нижней части практически 
ничего 
не видно. Кроме того, фотография расфокусирована, а в ее центре находится белый 

блик. Попробуем, по возможности, исправить все эти изъяны. 

Прежде чем мы приступим к работе, следует сохранить этот файл в формате Adobe 
Photoshop. 
Напомним, что недостатком JPEG-формата, в котором сохранен файл Ozero.jpci, 
является то, что его алгоритм уплотнения приводит к частичной потере данных. 
Если вы 
упакуете изображение в процессе сохранения, а затем вновь распакуете его, то 
результат 
не будет полностью идентичен оригиналу. При постоянном открытии и сохранения 
JPEG-файла можно сильно испортить изображение. Формат Adobe Photoshop лишен 
этого 
недостатка и, кроме того, позволяет хранить слои и другие атрибуты изображения, 

которые не доступны в формате JPEG. Поэтому до полного окончания работы с 
изображениями 
их нужно сохранять в формате PSD. 

> Выберите команду меню File • Save As (Файл • Сохранить как). На экране 
появится 
диалог Save As (Сохранить как). 

> Выберите папку, в которой будет сохранен документ. 

>• В открывающемся списке Format (Формат) выберите формат Photoshop (*.PSD; *.
PDD). 

>• В открывающемся списке Имя файла (File name) укажите имя сохраняемого файла 
Ozero.
psd. 

> Нажмите кнопку Сохранить (Save). Файл будет сохранен на диске в выбранной 
папке 
под указанным именем. 

Ретуширование фотографии начнем с блика. Коррекция подобных погрешностей 
выполняется 
посредством клонирования, которое заключается в замене дефектного участка 
образцом из близлежащих областей. Эта операция выполняется с помощью 
инструмента 
\Щ - Clone Stamp Tool (S) (Инструмент «Штамп» (S)). 

>• Нажмите кнопку [j y - Clone Stamp Tool (S) (Инструмент «Штамп» (S)) на 
панели 
инструментов (Tools). Инструмент будет выбран. На панели параметров (Options 
Bar) вы увидите элементы управления параметрами инструмента (Рис. 4.95). 

Mod»; iNormal ',-| Opacity! Пор% I > I Flow: | 100% P;A«gn«d Г) Use AI Ljytrs 

Рис. 4.95. Панель параметров инструмента Clone Stamp Tool (S) 
(Инструмент «Штамп» (S)) 


Подготовка графики

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

> Нажмите кнопку Q) справа от образца текущей кисти Brush (Кисть) на панели 
параметров (Options Bar), чтобы открыть палитру кистей. 

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

> Выберите кисть Soft Round 35 pixels (Мягкая круглая 35 пикселов), щелкнув на 
ней 
мышью. 

> Щелкните мышью на свободном пространстве рабочего окна. Палитра кистей 
закроется. 

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

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

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


>• Нажмите и удерживайте клавишу цА'' I. Указатель мыши примет форму @. 

> Не отпуская клавишу |ГА" I. щелкните мышью в этом месте. 

>• Отпустите клавишу lAit I. 

Таким образом, мы зафиксировали центр клонируемой области. 

Нажав клавишу !l Ai l I. вы можете взять образец для инструмента у у в любом 
открытом 
окне документа программы Adobe Photoshop, не меняя при этом активного окна. 

Теперь можно перенести образец на блик и, таким образом, ликвидировать его. 

>- Установите указатель мыши, который примет форму круга диаметром 35 пикселов, 

на белый блик так, чтобы блик находился в центре круга. 

>• Щелкните мышью в этом месте. В момент щелчка справа от указателя мыши-круга 
появится крестик, обозначая центр клонируемой области. Белый блик исчезнет - на 

него будет наложен клонированный образец. 

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

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



Создание Web-сайтов 

JV&13. Выполняем тоновую коррекцию 

Качество любого изображения, особенно фотографического, во многом зависит от 
его 
тона. Если в изображении правильно определены самые светлые и самые темные 
области, 
а также сбалансированы средние тона, то оно воспринимается как «живое». Опытные 

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

Однако очень часто изображения, особенно сканированные, имеют дефекты в темных, 

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

Фотография Ozero.jpg затемнена и выглядит «тусклой». Причиной этого является 
нарушение 
тонового баланса. Поэтому наша очередная задача - повысить яркость и 
контрастность 
изображения, выполнив тоновую коррекцию. Это можно сделать с помощью 
диалога Levels (Уровни). 

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

под корректирующим. 

Создадим корректирующий слой. 

>- Убедитесь, что палитра Layers (Слои) видна на экране и не перекрывается 
другими 
палитрами. В противном случае выберите команду меню Window • Layers 
(Окно • Слои). 

> Выберите команду меню Layer • New Adjustment Layer • Levels (Слой • Новый 
корректирующий слой • Уровни). На экране появится диалог New Layer (Новый 
слой) (Рис. 4.96). 

Цате: [Levels 1 

П Use Previous Layer to Create Cltpng Mask 

Color: I D None 

Mate: | Normal E ] Opacity: 1100| 

Рис. 4.96. Диалог New Layer (Новый слой) 

В поле ввода Name (Имя) этого диалога по умолчанию предлагается имя слоя - 
Levels 1 
(Уровни 1). Данный тип корректирующего слоя настраивает уровни яркости и 
контрастности 
изображения. Это то, что нам нужно. 


Подготовка графики 169 
Установка флажка Use Previous Layer to Create Clipping 
Mask (Использовать предыдущий слой для создания 
маски) позволяет применить коррекцию яркости и 
контрастности только к одному нижележащему слою. 
Параметры Opacity (Непрозрачность) и Mode (Режим) 
позволяют сразу же определить степень непрозрачности 
и режим наложения пикселов. Корректирующие 
слои приобретают такие же характеристики непрозрачности 
и режима наложения, что и реальные слои. 
>• Нажатием кнопки ОК закройте диалог New Layer (Новый 
слой). В палитре Layers (Слои) появится и станет 
Рис. 4.97. Корректируслой создан 
ющий 

активным новый слой Levels 1 (Уровни 1) (Рис. 4.97). 

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

Одновременно с созданием корректирующего слоя на экране появился диалог Levels 
(Уровни) (Рис. 4.98). 

Рис. 4.98. Диалог Levels (Уровни) 

> Переместите этот диалог так, чтобы он не закрывал окно документа.. 

Тоновая коррекция изображения выполняется с помощью гистограммы в диалоге 
Levels 
(Уровни). Гистограмма - это графическое представление уровней яркости в 
изображении. 
Горизонтальная ось гистограммы отображает значения яркости от 0 до 255. 
Значение 
яркости 0 (ноль) у левого края графика соответствует самым темным тонам, а 
значение 
яркости 255 у правого края графика - самым светлым. По вертикальной оси 
гистограммы 
отображается количество пикселов, имеющих данное значение яркости. 

С помощью гистограммы вы можете определить, содержит ли изображение достаточное 

количество деталей яркости, которое обеспечило бы хорошие результаты настройки: 

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

в результате уже выполненной обработки изображения. 


Создание Web-сайт ся 

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

центре, белый - справа. Черный и белый бегунки указывают значения яркости, 
которые 
отображаются соответственно в левом -0 - и правом - 255 - полях ввода Input 
Levels 
(Входные уровни). Серый треугольник-бегунок управляет настройкой гаммы 
изображения 
или коэффициента контраста в средних тонах. Соответствующее его положению 
значение - 1.0 - отображается в среднем поле ввода. 

Если черный треугольный бегунок под гистограммой перемещать вправо, то все 
значения 
яркости пикселов слева от него станут равны 0 (нулю) или черному цвету. 
Например, 
когда при перемещении треугольника значение в левом поле ввода Input Levels 
(Входные уровни) повысится до 50, то все пикселы, имеющие в исходном 
изображении 
уровень яркости 50 и ниже, станут черными. Это приведет к затемнению 
изображения. 

Если белый треугольный бегунок двигать влево, то все значения яркости пикселов 
справа 
от него будут равны 255 или белому цвету. Например, когда при перемещении 
бегунка 
значение в правом поле ввода Input Levels (Входные уровни) понизится до 200, 
все 
пикселы изображения с уровнями яркости 200 и выше станут белыми. Это приведет к 

осветлению изображения. 

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

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

При установленных по умолчанию в полях ввода Input Levels (Входные уровни) 
значениях 
яркости 0,1.0, 255 коррекция исходного изображения не выполняется. 

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


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

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

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


Подготовка графики

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

яркости всех остальных пикселов корректируются пропорционально, что позволяет 
сохранить 
в изображении общий цветовой баланс. 

Переопределим значение яркости для самого темного пиксела изображения. 

> Убедитесь, что в диалоге Levels (Уровни) установлен флажок Preview 
(Предварительный 
просмотр). Это позволит наблюдать в окне документа все изменения 
изображения. 

> Переместите черный треугольный бегунок у левого края гистограммы вправо, к 
границе 
тонового интервала изображения, т.е. к первой слева группе полутонов так, 
чтобы в левом поле ввода Input Levels (Входные уровни) появилось значение 18. 

В результате такой коррекции значения яркости пикселов на гистограмме слева от 
черного 
треугольника станут равны 0 (нулю) или черному цвету, а значения яркости всех 
остальных пикселов изображения будут уменьшены на указанное число, и 
изображение 
в окне документа станет темнее. Соответственно, если двигать влево белый 
треугольный 
бегунок, то значения яркости всех пикселов справа от него будут равны 255 или 
белому 
цвету. Таким образом, информация, которая была на краях тонового диапазона, 
потеряется, 
но если ее не было, все значения яркости будут перераспределены, и качество 
изображения 
улучшится. 

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

>• Перемещайте серый треугольный бегунок под гистограммой влево, в область 
теней, 
на небольшие интервалы и наблюдайте, как при этом увеличивается яркость средних 

тонов. Установите этим бегунком значение гаммы приблизительно 1.30. Это 
значение 
должно отобразиться в среднем поле ввода Input Levels (Входные уровни). 

Поля ввода Input Levels (Входные уровни) и треугольники-бегунки, расположенные 
непосредственно под гистограммой, используются также для усиления контраста в 
изображении. Черный треугольный бегунок, как указывалось выше, управляет тенями,
 
белый - светом, а серый - настройкой гаммы или коэффициента контраста в средних 

тонах. Вы также можете указывать входные значения в явном виде. 

Предположим, что вы хотите повысить контраст в изображении, пикселы которого 
охватывают 
весь диапазон цветовых значений от 0 до 255. Если переместить белый треугольник 

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


Создание Web-сайтов 

Поля ввода Output Levels (Выходные уровни) и шкала под ними в нижней части 
диалога 
Levels (Уровни) используются для снижения контраста в изображении. Черный 
треугольник 
управляет тенями, а белый - светлыми областями. Вы также можете вводить 
выходные значения в явном виде. Если в параметре Input Levels (Входные уровни) 
участок 
гистограммы справа от светлого треугольника соответствует белому цвету, то в 
параметре Output Levels (Выходные уровни) этот же участок соответствует 
текущему 
уровню, на который указывает треугольный бегунок. 

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

>• Закройте диалог Levels (Уровни) нажатием кнопки ОК. Установленные параметры 
коррекции будут применены. Изображение примет вид примерно как на Рис. 4.99. 

Рис. 4.99.-Тоновая коррекция выполнена 

 Выключайте и включайте отображение корректирующего слоя Levels (Уровни) в 
палитре Layers (Слои), чтобы оценить различие в изображении до и после тоновой 
коррекции. 

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

> Выберите команду меню Layer • Merge Down (Слой • Объединить с нижележащим). 
Корректирующий слой будет объединен с нижележащим слоем Background (Фон). 

>• Повторно откройте диалог Levels (Уровни), выбрав команду меню Image • 
Adjustments 
• Levels (Изображение • Коррекции • Уровни). 

Вы увидите, что гистограмма несколько «выровнялась», растянулась на всю ширину 
шкалы яркостей, уменьшилась концентрация полутонов в области теней, однако при 
этом в ней появились «пробелы» (Рис. 4.100). 


Подготовка графики 

Input Levels: |0 J11,00 J [255 | 

Puc. 4.100. Гистограмма после тоновой коррекг/ж 

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

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

 Нажав кнопку ОК, закройте диалог Levels (Уровни). 

> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). Так 
как 

фотография сохраняется в формате Adobe Photoshop, а не JPEG, то потери качества 


не будет. 

Таким образом, смысл тоновой коррекции заключается в «вытягивании» имеющегося 
тонового диапазона как в сторону светлых участков, так и в сторону теней и 
выполняется 
путем переопределения крайних точек тонового диапазона и перераспределения всех 

остальных уровней в новом диапазоне. При необходимости выполняется также 
коррекция 
значений яркости в средней части полутоновой шкалы. Все эти операции 
выполняются 
в диалоге Levels (Уровни). 

Кроме команды Levels (Уровни), в Adobe Photoshop имеется еще несколько 
возможностей 
для тоновой коррекции. Принцип работы всех инструментов тоновой коррекции 
программы Adobe Photoshop одинаков: существующие диапазоны значений пикселов 
преобразуются в новые диапазоны. Различие между этими инструментами 
определяется 
разными возможностями настройки значений. Например, команда Brightness/Contrast 

(Яркость/Контраст) выполняет одинаковую коррекцию всех пикселов изображения или 

выделенного фрагмента по всему тоновому интервалу. Иными словами, если вы 
увеличите 
значение яркости на 20, то эта величина будет добавлена к значению яркости 
каждого 
пиксела. Команда Curves (Кривые), напротив, позволяет разбить всю полутоновую 
шкалу на 16 интервалов и выполнить очень точную настройку, не уступающую по 
качеству 
профессиональным системам цветокоррекции. 


Создание Web-сайтс в 

J№14. Повышаем резкость изображения 

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

В программе Adobe Photoshop имеется специальный инструмент Sharpen Tool (R) 
(Инструмент 
«Резкость» (R)) и несколько фильтров, которые осуществляют усиление резкости. 
Эти фильтры вызываются из меню Filter • Sharpen (Фильтр • Резкость). 

>• Выберите команду меню Filter • Sharpen (Фильтр • Рез


Sharpen 

кость). Вы увидите подменю с перечнем фильтров, по


Sharpen Edges 

вышающих резкость (Рис. 4.101). 

Sharpen More 

Unsharp Mask... 

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

Рис. 4.101. Фильтры,

Sharpen (Резкость) и Sharpen More (Резкосты-) фокусируют 

повышающие резкость 

изображение или выделенную область, повышая ее четкость. 
Разница между ними состоит лишь в том, что фильтр Sharpen More (Резкосты-) дает 

более выраженный эффект. Из четырех фильтров первые три - это фильтры прямого 
действия: они не требуют дополнительных установок. Фильтры Sharpen Edges 
(Резкость 
по краям) и Unsharp Mask (Контурная резкость) отыскивают в изображении границы 
цветовых переходов и повышают их резкость. 

Фильтр Unsharp Mask (Контурная резкость) обычно используется для аккуратной 
коррекции 
изображений. Этот фильтр подчеркивает контуры предметов и основан на тем 
эффекте, что человеческий глаз воспринимает повышение контрастности на границах 

областей с различными яркостями как увеличение резкости. 

>• Выберите в подменю с перечнем фильтров команду Unsharp Mask (Контурная 
резкость). 
На экране появится диалог Unsharp Mask (Контурная резкость) (Рис. 4.102). 

Puc. 4.102.Диалог Unsharp Mask (Контурная резкость) 


Подготовка графики 

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

Параметр Amount (Эффект) определяет степень усиления контраста пикселов. 
Для изображений с высоким разрешением рекомендуется задавать его значение в 
пределах 
от 150% до 200%. 

Параметр Radius (Радиус) определяет ширину границы действия фильтра - 
количество 
пикселов вокруг краевых пикселов элементов изображения, которые подвергаются 
воздействию 
фильтра. Для изображений с высоким разрешением рекомендуется использовать 
значения в пределах от 1 до 2. 

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

появления дополнительных шумов, старайтесь использовать для этого параметра 
значения в пределах от 2 до 20. Значение, принятое для параметра Threshold 
(Порог) по 
умолчанию - 0, повышает резкость всех пикселов изображения. 

> Перемещайте ползунковый регулятор Amount (Эффект) вправо до тех пор, пока 
изображение в окне документа не станет достаточно резким. Мы использовали 
значение 
200%. 

> Закройте диалог Unsharp Mask (Контурная резкость), нажав кнопку ОК. 
Изображение 
в окне документа примет вид примерно как на Рис. 4.103. 

Рис. 4.103. Резкость изображения повышена 
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). 


Создание Web-сайтс а 

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

JV&15. Комбинируем фотографии 

Adobe Photoshop располагает поистине неисчерпаемыми возможностями в области 
фотомонтажа 
и комбинирования изображений. Трудно представить себе задачу из этой 
области, с которой не справился бы Adobe Photoshop. 

Если изображение на откорректированной фотографии Ozero.psd кажется вам слишком 

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

>• Не закрывая файл Ozero.psd, откройте в рабочем окне программы Adobe 
Photoshop: 
файл Samolet.jpg (Рис. 4.104), который вы скопировали с компакт-диска, прилагае 

мого к книге. 

Рис. 4.104. Фотография из файла файл Samolet.jpg 

На этой фотографии мы выделим изображение самолета, находящегося на переднем 
плане, 
скопируем его в буфер обмена, а затем вставим в документ Ozero.psd. 

Чтобы точнее выполнить выделение, увеличим масштаб отображения до 300%. 

> Выберите инструмент [ЧГ| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели 

инструментов (Tools) и два раза щелкните мышью на изображении самолета на 
переднем 
плане фотографии Samolet.jpg. 


Подготовка графики

> Нажмите кнопку [В] в правом верхнем углу окна документа Samolet.jpg, чтобы 
развернуть 
его на весь экран. 

>• Воспользовавшись полосами прокрутки, поместите изображение в центре экрана 
(Рис. 4.105). 

Рис. 4.105. Масштаб изображения увеличен * 

>• Переместите панель инструментов (Tools) и палитры, предварительно свернув их,
 
так чтобы они не перекрывали изображение самолета. 

Точнее всего выделить объект такой сложной формы, как самолет, можно, если 
обвести 
его контур с помощью инструмента [jjf] - Pen Tool (P) (Инструмент «Перо» (Р)). 
Чтобы 
сделать это как можно правильнее, увеличим резкость изображения фильтром 
Sharpen 
Edges (Резкость по краям). 

> Выберите команду меню Filter • Sharpen • Sharpen Edges (Фильтр • Резкость 
по краям). Фильтр будет применен, и изображение самолета станет более четким 
(Рис. 4.106). 

Рис. 4.106. Применен фильтр Sharpen Edges (Резкость по краям) 

Теперь можно приступить к выделению. 

> Нажмите кнопку [§ ] - Pen Tool (P) (Инструмент «Перо» (Р)) на панели 
инструментов 
(Tools), чтобы выбрать этот инструмент. * 

Данный инструмент позволяет создавать контур произвольной формы. Контуром 
называется 
любая линия или кривая, построенная в программе Adobe Photoshop с помощью 
инструмента |jfj. Для работы с контурами используется специальная палитра Paths 

(Контуры), которая содержит список всех созданных контуров. Пока эта палитра 
пуста 
(Рис. 4.107). 


Создание Web-сайтов 

2JJJE[:VKf!3Sb. 

ш 

9 О О XX ы а Ь 

Рис. 4.107. Палитра 
Paths (Контуры) 

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


ских объектов контуров. 
Контур состоит из одного или нескольких сегментов. 
Начало и конец каждого сегмента определяют специальные 
точки привязки или узлы (Рис. 4.108). Контуры 
могут быть прямолинейными и криволинейными, 
замкнутыми и открытыми. Криволинейный контур 
имеет направляющие, с помощью которых можно настраивать 
его форму. Замкнутый контур не имеет начальной 
и концевой точек; например, окружность Рис 
-4J08 -Сегменты иузлы 
это замкнутый контур. Открытый контур имеет кон(
точки привязки) 

цевые точки; примером открытого контура является S-образная кривая. 

 Выберите команду меню Window • Paths (Окно • Контуры). На экране появится 
палитра 
Paths (Контуры) (Рис. 4.107). Пока контуры не создавались, эта палитра пуста. 

> Переместите эту палитру так, чтобы она не перекрывала изображение самолета. 

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

> Нажмите кнопку | Я | - Creates new path (Создать новый 
контур) в нижней части палитры Paths (Контуры). 
В палитре появится и будет выделена строка с миниатюрой 
и именем созданного контура, предлагаемым по 
умолчанию - Path 1 (Контур 1) (Рис. 4.109). 

Теперь можно приступить к рисованию контура. 
Построение прямолинейных контуров заключается в том, 
что концевые точки всех его сегментов, которые называ-хх а а 
ются точками привязки, опорными точками или узлами, Рис. 4.109. 
последовательно обозначаются щелчками мыши. В ре-Новый контур создан 
зультате Adobe Photoshop соединяет каждую пару точек 
прямой линией. 


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


Подготовка графики 

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

>• Переместите указатель мыши вертикально вверх, к 
левому краю верхней плоскости крыла самолета, и Рис. 4.110. Первая точка 
щелкните в этой точке мышью. Обе точки будут привязки создана 
соединены отрезком прямой - первый прямолинейный 
сегмент будет создан. 

Чтобы провести линию вертикальную, горизонталь


ную или под углом, кратным 45°, удерживайте нажатой 
клавишу КShifll. 

Когда вы укажете вторую точку привязки, на месте 

Рис. 4.111. Первые 

первой точки останется пустой квадратик вместо за


три точки контура 

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


крыла самолета и щелчком мыши создайте следующую точку привязки (Рис. 4.111). 

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

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

Если вы по ошибке поставите точку привязки не в том месте, где хотелось бы, то 
удалить 
ее можно, щелкнув на ней мышью и нажав клавишу I0*1*1*]. Но точки можно и не 
удалять. В дальнейшем мы увидим, как легко можно изменить их положение в 
процессе 
редактирования контура. 

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

Рис. 4.112. Часть контура из прямолинейных сегментов 


180 ' Создание Web-сайтов 

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

>• Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши, пере 
местите указатель мыши вправо на расстояние, примерно равное радиусу колеса. 

>• Отпустите левую кнопку мыши. В этой точке появится направляющая линия. 

Нажав клавишу i!Shiftl, вы можете ограничить наклон направляющих линий углами, 
кратными 
45°. 
> Переместите указатель мыши в нижнюю точку окружности левого колеса, лежащую 
на противоположном конце диаметра. 

> Нажмите и удерживайте левую кнопку мыши. 

> Не отпуская левую кнопку мыши, переместите указатель мыши влево. Появятся две 

направляющие линии, длина и наклон которых определяют длину и наклон 
криволинейного 
сегмента. 

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

>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо справа, 

зафиксируется (Рис. 4.113). 

Рис. 4.113. Первый криволинейный сегмент 

> Чтобы закончить построение огибающей, установите указатель мыши в верхней 
части 
окружности колеса. 

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

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

>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо слева, 
зафиксируется (Рис. 4.114). 

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


Подготовка графики 

Рис. 4.114. Огибающая вокруг колеса создана 

1 Alt

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

Продолжайте рисование контура, щелчками мыши создавая прямолинейные сегменты, 
пока не дойдете до второго колеса. 

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

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

Щелкните мышью в этом месте. Контур замкнется (Рис. 4.115). 

Рис. 4.115. Построение контура завершено 

Для завершения рисования не замкнутого, а открытого контура следует щелкнуть 
мышью 
на значке инструмента | ф.| на панели инструментов (Tools). 

Если вас не устраивает форма получившегося контура, то ее можно отредактировать.
 
Инструменты для построения контуров, доступные в панели инструментов (Tools), 
позволяют легко редактировать любые контуры. Вы можете перемещать точки 
привязки 
и направляющие линии, удалять и добавлять новые точки привязки, а также 
заменять 
гладкие точки привязки угловыми и наоборот. 

Чтобы удалить или добавить новую точку привязки, воспользуйтесь, соответственно,
 
инструментами | ф~| и |ф*|- Выбрать эти инструменты в панели инструментов 
(Tools) 
можно из дополнительной панели инструментов, нажав и удерживая кнопку мыши на 
кнопке | &]. Для добавления точки привязки, выбрав инструмент \W\ установите 
указа



Создание Web-сайтов 

тель мыши на контуре в нужном месте. При этом рядом с указателем мыши появится 
знак +. Щелкните мышью в этой точке. 

Чтобы удалить точку привязки, выберите инструмент (Jf] и установите указатель 
мыши 
в той точке привязки, которую вы хотите удалить. При этом рядом с указателем 
мыши 
появится знак -. Щелкните мышью. Точка будет удалена, а форма кривой изменится 
в 
соответствии с оставшимися точками привязки. 

Для перемещения всего контура используйте инструмент [\J. Вы можете изменять 
форму 
контура, перемещая его сегменты, точки привязки и направляющие'линии 
инструментом 
QT], который можно выбрать на дополнительной панели, нажав кнопку | ^.|. 

Изменить гладкую точку на угловую и наоборот можно с помощью инструмента [7~]. 
Для изменения гладкой точки на угловую без направляющих линий достаточно просто 

щелкнуть инструментом [К] на нужной точке. Если вы хотите заменить гладкую 
точку 
угловой с направляющими линиями, нажмите кнопку мыши и слегка сместите 
указатель 
мыши, чтобы получить направляющие линии; после этого переместите одну из 
направляющих 
точек - концевую точку направляющей линии. Направляющие линии станут 
независимыми. 

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

>• Нажмите кнопку Г~о1 - Loads path as a selection (Загрузить контур, как 
выделенною 
область) в нижней части палитры Paths (Контуры). Вокруг изображения самолета 
появится 
бегущая рамка выделения, а сам контур будет выключен и исчезнет с экрана. 

Уменьшим масштаб отображения документа до 100%. 

>• Щелчком мыши выберите инструмент |^ | - Zoom Tool (Z) (Инструмент «Масштаб» 
(Z)) на панели инструментов (Tools) и два раза щелкните мышью на изображении 

при нажатой клавише il Alt I. Масштаб отображения документа уменьшится. 

> Выберите команду меню File • Save As (Файл • Сохранить как) и сохраните 
фотографию 
в формате Adobe Photoshop - .psd. Это позволит в дальнейшем, при необходимости, 

редактировать контур и использовать фотографию в следующих опытах. 

Теперь скопируем выделенную область в буфер обмена, чтобы затем вставить ее в 
документ 
Ozero.psd. 

>• Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область 
будет скопирована в буфер обмена. 

> Нажмите кнопку \§] в правом верхнем углу окна документа, чтобы вернуться к 
его 
исходнбму размеру. 

Файл Samolet.psd можно закрыть. 

> Нажмите кнопку [х] в правом верхнем углу окна документа, чтобы закрыть его. 

В рабочем окне программы снова станет активным документ Ozero.psd. Вставим в 
него 
изображение из буфера обмена. 

>• Выберите команду меню Edit • Paste (Правка • Вставить). В центре фотографии 
появится изображение самолета, вставленное из буфера обмена (Рис. 4.116). 


Подготовка графики 

Рис. 4.116. Изображение самолета вставлено из буфера обмена 

Вставить выделенную область из другого документа можно также, переместив ее 
инструментом 
[Kf] - Move Tool (V) (Инструмент «Перемещение» (V)). 

Обратите внимание, что в палитре Layers (Слои) появился и стал активным новый 
слой 
Layer 1 (Слой 1), на который помещено изображение самолета. Этот слой 
расположен 
непосредственно на слое Background (Фон), который перед этим был активным. При 
вставке из буфера обмена или при перемещении выделенной области из другого 
документа 
вставляемое изображение всегда помещается на новый слой, и этот слой 
располагается 
над тем, который был активным. 

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

у Выберите команду меню Layer • Matting • Defringe 
(Слой • Обработка краев • Устранить кайму). На экране 
появится диалог Defringe (Устранить кайму) 
(Рис. 4.117). 

Данная команда перекрашивает все «посторонние» 

Рис. 4.117. Диалог Defringe

пикселы в цвета соседних пикселов, не содержащих 

(Устранить кайму)

примесей фонового цвета. В поле ввода Width (Ширина) 
следует указать расстояние, в пределах которого программа будет осуществлять 
поиск 
пикселов для замены цвета. В большинстве случаев для эффективной работы команды 

достаточно задать значение, равное 1 или 2 пикселам. Оставим предлагаемое по 
умолчанию 
значение 1 без изменения. 

>• Нажав кнопку ОК, закройте диалог Defringe (Устранить кайму). Команда будет 
применена, 
и ореол вокруг объекта исчезнет. 


Создание Web-сайтов 

Если вклеенное изображение было создано на черном фоне, то черную кайму вокруг 
его 
границ можно удалить командой меню Layer • Matting • Remove Black Matte (Слой • 

Обработка краев • Удалить черный ореол), а если на белом фоне, то белая кайма 
удаляется 
командой меню Layer • Matting • Remove White Matte (Слой • Обработка краев • 
Удалить белый ореол). 

Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе». 

>• Выберите команду меню Edit • Transform • Scale (Правка • Преобразование • 
Масштаб). 
Вокруг изображения самолета появится прямоугольная рамка с маркерами в 
углах и серединах сторон, а на панели параметров (Options Bar) - элементы 
управления 
преобразованием объекта (Рис. 4.118). 

Х:| 229,5 рх] Д Vi | 166,5 рх j El W;) 100,0% ~\ Ц Н: [ToM%j| Л I 0,0 |° СГ Н: 
| 0,0 \" Ц11 0,0 [° 

Рис. 4.118. Панель параметров команды Transform (Преобразование) 

Эти элементы управления дают вам возможность выполнить преобразование 
выделенной 
области или слоя на основе точных числовых значений. 

> Нажмите кнопку Щ - Maintain aspect ratio (Сохранить пропорции) на панели 
параметров 
(Options Bar). 

>• В поле ввода W (Ширина) на панели параметров (Options Bar) введите 50 
процентов. 
Такое же значение автоматически появится в поле ввода Н (Высота), так как 
включен 
режим сохранения пропорций. 

> Нажмите кнопку [V] на панели параметров (Options Bar), чтобы закончить ввод 
параметров. 
Размер самолета на фотографии уменьшится в два раза. 

Теперь переместим самолет туда, где он должен находиться. 

у Выберите инструмент [Kf] - Move Tool (V) (Инструмент «Перемещение» (V)) на 
панели 
инструментов (Tools) и переместите изображение самолета в правый верхний 
угол фотографии (Рис. 4.119). 

Рис. 4.119. Изображение самолета перемещено 


Подготовка графики 185 

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

v Убедитесь, что все слои являются видимыми. Невидимые слои при сведении будут 
удалены. 

> Нажмите кнопку ® в правом верхнем углу палитры Layers (Слои) и в появившемся 

меню выберите команду Flatten Image (Выполнить сведение). Слои будут совмеще


ны. В палитре Layers (Слои) останется только один слой - Background (Фон). 

>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). 

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

JV&16. Уменьшаем и обрезаем фото 

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

соображений, такая обрезка или, как ее еще называют, кадрирование, необходима 
для 
уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и 
тем быстрее оно загружается на Web-страницу. 

Посмотрим, как выполняется кадрирование практически, удалив узкую темную полосу 
у 
нижнего края фотографии, которую не удалось в достаточной степени осветлить. 
Кадрирование выполняется специальным инструментом \%\ - Crop Tool (С) 
(Инструмент «Рамка» (С)). 

> Нажмите кнопку \%\ - Crop Tool (С) (Инструмент «Рамка» (С)) на панели 
инструментов 
(Tools), чтобы выбрать этот инструмент. 

> Установите указатель мыши, который примет форму "fc^, в левом верхнем углу 
изображения. 

>• Нажмите и удерживайте левую кнопку мыши. 

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

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

будет затемнена, указывая, таким образом, отсекаемую часть фотографии. 

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



Создание Web-сайтов 

ремещении удерживать нажатой клавишу liShiftl, то будут сохранены пропорции 
области. 
Для поворота кадра следует установить указатель мыши, который примет 
форму изогнутой стрелки, за пределами области выделения и, перемещая мышь, 
добиться 
нужного положения рамки. Чтобы отменить кадрирование, достаточно нажать 
клавишу l| Es c I. 

> Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамка 
включала 
все изображение, кроме узкой темной полосы у нижней границы фотографии 
(Рис. 4.120). 

Рис. 4.120. Кадрирующая рамка указывает границы обрезки 

> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавишу jiEnteJ. 
Фотография будет обрезана по установленной границе. 

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

>- Выберите команду меню Image • Image Size 
(Изображение • Размер изображения). На 
экране появится диалог Image Size (Размер Рис. 4.121. Диалог Image Size 
изображения) (Рис. 4.121). (Размер изображения) 


Подготовка графики

В верхней части диалога, в группе элементов управления Pixel Dimensions 
(Размерность 
в пикселах) указан текущий размер файла в формате PSD - 400,ЗК, а также текущие 

ширина (Width) и высота (Height) изображения в пикселах. У вас эти значения 
после 
кадрирования могут быть несколько иными. 

В группе элементов управления Document Size (Размер документа) указаны размеры 
документа в сантиметрах и его графическое разрешение (Resolution). При 
установленном 
флажке Constrain Proportions (Сохранить пропорции) программа автоматически 
сохраняет пропорции изображения при изменении одного из размеров - ширины или 
высоты. 

При изменении размеров изображения в группе элементов управления Pixel 
Dimensions 
(Размерность в пикселах) соответственно изменяются его характеристики для 
документа 
- либо его размеры, либо графическое разрешение, в зависимости от того, 
установлен 
или сброшен флажок Resample Image (Изменить размер). Если этот флажок 
установлен, 
то изменяется размер документа и, соответственно, объем файла с изображением. 
Если 
же флажок сброшен, то можно изменить только размеры документа. При этом, 
соответственно, 
будет изменяться его графическое разрешение, а размеры изображения в пикселах 
и объем файла останутся без изменения. 

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

можно выбрать в открывающемся списке Resample Image (Изменить размер). 

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

> Убедитесь, что установлен флажок Resample Image (Изменить размер), чтобы 
сохранить 
графическое разрешение изображения и изменить его размер. 

>• Установите флажок Constrain Proportions (Сохранить пропорции). 

>• В поле ввода Width (Ширина) группы элементов управления Pixel Dimensions 
(Размерность 
в пикселах) введите новое значение ширины изображения в пикселах*- 300. 
Автоматически изменится значение высоты изображения в поле ввода Height 
(Высота), 
а также размер документа в группе элементов управления Document Size (Размер 
документа). В верхней части диалога вы увидите также новое, уменьшенное 
значение 
объема файла и рядом с ним, в скобках прежний объем. 

> Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. 
Установленные 
параметры будут применены, и размер изображения в окне документа уменьшится. 

Как уже указывалось, уменьшение размерности изображения удаляет из него 
избыточную 
информацию, что приводит к некоторому снижению резкости. Применение фильтра 
Unsharp Mask (Контурная резкость) может в известной степени восстановить 
резкость 
изображения. 

> Выберите команду меню Filter • Sharpen • Unsharp Mask (Фильтр • Резкость • 
Контурная 
резкость). На экране появится диалог Unsharp Mask (Контурная резкость). 

> Перемещая ползунковый регулятор Amount (Эффект), восстановите резкость 
фотографии. 
Значение этого параметра должно быть в пределах 50-60%. 


Создание Web-сайтов 

> Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость). 
Резкость 
изображения усилится. 
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). 

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

Сохраняем фото для Web 

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

>- Выберите команду меню File • Save for Web (Файл • Сохранить для Web). На 
экране 
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122). 

Save For Web - Powered By ImageReady 

1ЮН Edit in ImageReady 

Puc. 4.122. Диалог Save For Web (Сохранить для Web) 

Этот диалог совмещает в себе уже знакомые вам по Adobe ImageReady элементы: 
окно 
просмотра, позволяющее выбирать различные режимы просмотра оптимизированного 
изображения; элементы управления оптимизацией - справа вверху и цветовую 
таблицу 
(Color Table) - справа внизу, используемую при оптимизации изображений в 
форматах 
GIF и PNG-8. Кроме того, здесь же присутствует вкладка Image Size (Размер 
изображения), 
элементы управления которой позволяют изменить размер изображения так же, 


Подготовка графики 

как и элементы управления диалога Image Size (Размер изображения), 
рассмотренного в 
предыдущем опыте. 

В открывающемся списке со всплывающей подсказкой Zoom Level (Уровень 
масштабирования) 
в левом нижнем углу диалога вы можете выбрать масштаб для отображения в 
окне просмотра диалога. Масштаб можно изменить также с помощью инструмента |Ц,[ 
Zoom 
Tool (Z) (Инструмент «Масштаб» (Z)), который включается кнопкой в левом верхнем 

углу диалога. Включенный по умолчанию инструмент [Ц] - Hand Tool (H) 
(Инструмент 
«Рука» (Н)) позволяет перемещать изображение в окне просмотра, если его размеры 

превышают размеры окна. С помощью кнопки 0 - Select Browser Menu (Меню 
выбора браузера) в нижней части диалога вы можете открыть меню, из которого 
выбрать 
браузер для просмотра оптимизированного изображения. Можно также нажать кнопку 
слева от 0 , чтобы загрузить программу просмотра, определенную по умолчанию, 
в которой автоматически откроется оптимизируемое изображение. 

Специальное поле под окном просмотра диалога информирует о цветовых координатах 

пиксела изображения или цветовой таблицы (Color Table), на котором установлен 
указатель 
мыши. Эти координаты указываются как RGB-составляющие в десятичном формате. 

Кнопка ® - Preview Menu (Меню предварительного просмотра) над окном просмотра 
справа открывает меню, команды которого позволяют имитировать отображение 
документа 
в операционных системах Macintosh (Standard Macintosh Color) и Windows 
(Standard Windows Color), а также увидеть, как будет выглядеть 8-битное 
изображение 
в браузере (Browser Dither). Кроме того, в этом меню можно выбрать скорость 
модема, 
для отображения информации о времени загрузки (Download Rate) оптимизированного 

изображения. 

> Щелкните мышью на ярлыке 2-Up (2 варианта), чтобы увидеть в окне просмотра 
оригинальный 
и оптимизированный варианты фотографии. 

>• В открывающемся списке со всплывающей подсказкой Optimized file format 
(Формат 
оптимизированного файла) в правой верхней части диалога выберите формат JPEG. 

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

В открывающемся списке со всплывающей подсказкой Compression quality (Качество 
сжатия) или в поле ввода с ползунковым регулятором Quality (Качество) вы можете 
выбрать 
качество компрессии. Высокие (High, Very High) и максимальные (Maximum) 
значения 
этого параметра сохраняют при сжатии больше цветовой информации, но и создают 
файлы большего объема. 

>• Просмотрите оптимизированное изображение при различных значениях этого 
параметра 
и выберите наиболее оптимальное, при котором снижение качества визуально 
не заметно. Очевидно, таким значением будет Maximum (Максимальное) или 80. 

> Убедитесь, что установлен флажок Optimized (Оптимизированный). Это позволит 
получить оптимальное качество цветов и уменьшить размер формируемого файла. 
Однако некоторые старые браузеры не поддерживают эту особенность. 

> Убедитесь, что установлен флажок Progressive (Прогрессивный). 


Создание Web-сайтов 

При установке флажка Progressive (Профессивный) в процессе загрузки изображения 

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

В поле ввода или с помощью ползункового регулятора Blur (Размытие) можно 
указать 
степень размытия изображения в пределах от 0 до 2.0 для легкого размытия границ 

цветовых областей. Данный параметр всегда следует использовать применительно к 
изображениям 
с глубиной цвета 8 бит на пиксел. Для изображений с глубиной цвета 24 бита 
на пиксел потребность в таком сглаживании невелика. Размытие оказывается 
особенно 
полезным для изображений, имеющих большие участки фона однородной окраски. Если 

в изображении имеется текст, то величину сглаживания нужно уменьшить, иначе 
текст 
будет трудно прочесть. Этот параметр уменьшает размер файла, но в то же время 
размывает детали изображения, действуя подобно фильтру Gaussian Blur (Размытие 
по 
Гауссу). Рекомендуется использовать значения от 0.1 до 0.5. 

Установка флажка ICC Profile (Профиль ICC) позволяет сохранить в файле профиль 
ICC, 
который используется некоторыми браузерами для цветовой коррекции. Данный 
флажок 
доступен только для изображений, созданных в формате Adobe Photoshop. 

Если исходное изображение содержит прозрачные области, то в открывающемся 
списке 
Matte (Подложка) можно выбрать цвет для имитации цвета фона Web-страницы, на 
которую 
будет помещено изображение. 

Если при создании рисунка на прозрачном фоне использовалось сглаживание 
(Anti-Aliasing), то изображение будет иметь светлый ореол, который 
улучшит качество на светлом фоне, но будет плохо смотреться на пестром. 
Чтобы избавиться от этого ореола, следует перед сохранением 
перевести документ в режим индексированных цветов с помощью команды 
меню Image + Mode * indexed Color (Изображение • Режим •Индексированные 
цвета). 

> Закройте диалог Save For Web (Сохранить для Web), нажав кнопку ОК. На экране 
появится диалог Save Optimized As (Сохранить оптимизированный документ как), 
в поле ввода которого Имя файла (File name) уже указано имя сохраняемого файла 
-
Ozero. 

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

> Нажатием кнопки Сохранить (Save) закройте диалог Save Optimized As (Сохранить 

оптимизированный документ как). Файл будет сохранен на диске в указанной папке 

>• Закройте документ Ozero.psd, выбрав команду меню File • Close (Файл • 
Закрыть). 
Если появится запрос о необходимости сохранения документа, ответьте 
отрицательно. 

Мы познакомились с принципами оптимизации изображений в программе Adobe Photo-
shop. Как вы могли заметить, они практически не отличаются от оптимизации в 
Adobe 
ImageReady. 


Подготовка графики 

J№/8. Прозрачные изображения 

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

Формат GIF хотя и не сохраняет прозрачность, но позволяет присвоить в 
изображении 
атрибут прозрачности выделенной области; все пикселы в пределах этой области в 
браузере 
показываться не будут, т.е. станут невидимыми. Для примера создания изображения 

с прозрачным фоном воспользуемся фотографией из файла Samolet.psd. 

>- Откройте файл Samolet.psd, который вы сохранили в опыте о комбинировании 
фотографий. 


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

Сначала нужно выделить изображение самолета, преобразовав контур, который мы 
нарисовали 
вокруг самолета, в выделение. Этот контур автоматически сохранен в палитре 
Paths (Контуры). 

>• Щелкните мышью на ярлыке Paths (Контуры) в третьем сверху окне палитр, чтобы 

открыть эту палитру. 

Make Selection 

> Щелчком мыши на имени контура Path 1 
(Контур 1) в палитре Paths (Контуры) выде-Г Rendering 
лите его. В окне документа вокруг изображе-

Eeather Radius: 10 | pixels Cancel 

ния самолета появится контур. 

0 Anll-aliased 

Создадим выделенную область, ограниченную 

- Operation 
контуром. 

© [Jew Selection 

О add to Setectfcfi 

Нажмите кнопку 0 в правом верхнем углу 

О Subtract torn Selection 

палитры Paths (Контуры) и в появившемся 

О intersect with Setecttai 

меню выберите команду Make selection (Соз


дать выделенную область). На экране появит


ся диалог Make selection (Создать выделен-Рис. 4.123. Диалог Make selection 

ную область) (Рис. 4.123). (Создать выделенную область) 

В поле ввода Feather Radius (Радиус растушевки) 
следует указать величину радиуса растушевки выделения в пикселах. Растушевка 
делает края выделенной области более расплывчатыми благодаря созданию «зоны 
перехода
» между пикселами выделенной области и окружающими пикселами. В этой зоне 
происходит постепенное смешивание цветов. В результате растушевки может 
произойти 
потеря четкости изображения вблизи границы выделенной области. По умолчанию для 

этого параметра предлагается значение 0 (ноль) пикселов. Оставим его без 
изменения. 

Обратите внимание, что по умолчанию установлен флажок Anti-aliased 
(Сглаживание). 
Сглаживание границ происходит за счет частичного наполнения цветом граничных 
пикселов 
и делает границы выделенных областей более плавными, поэтому Оно особенно 
эффективно при создании сложных изображений из отдельных фрагментов с использо



Создание Web-сайтов 

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

> Нажав кнопку ОК, закройте диалог Make selection (Создать выделенную область). 

Изображение самолета будет выделено движущейся пунктирной границей. 
Автоматически 
будет сброшено выделение контура. 

Удалим все изображение за пределами выделенной области'. Для этого выделение 
следует 
предварительно инвертировать или обратить. 

> Выберите команду меню Select • Inverse (Выделение • Обратить выделение). 

Теперь все изображение за пределами самолета стало выделенным, а изображение 
самолета 
- невыделенным. Удалим выделенную область. 

> Нажмите клавишу М0""»!. Вся выделенная область будет очищена и окрашена в 
белый 
цвет фона (Рис. 4.124) - тот цвет, на котором создавалось изображение. 

Рис. 4.124. Выделенная область очищена 

Таким образом, ту область, которая должна стать прозрачной, мы перекрасили в 
белый 

цвет фона. Очистка нажатием клавиши И0"1"1") - это самый простой способ 
закрашизания 
цветом фона, который применим только к выделенной области. Для закрашивания 
фоновым цветом невыделенных фрагментов изображения можно использовать 
инструменты 
\Ё2>\ - Magic Erazer Tool (Е) (Инструмент «Волшебный ластик» (Е)) и ЦР] 
Background 
Erazer Tool (E) (Инструмент «Фоновый ластик» (Е)). 

Теперь можно создать GIF-файл так, чтобы выделенный белый фон изображения стал 
прозрачным. 

> Выберите команду меню Help • Export Transparent Image (Справка • Экспортиро


вать прозрачное изображение). На экране появится первый диалог Export 

Transparent Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 4.125). 


Мастером называется специальная программа, которая с помощью ряда 
последовательных 
диалогов позволяет выполнить некоторую задачу. В первом диалоге мастер 
предлагает 
указать метод создания прозрачности. 


Подготовка графики 

Export Transparent Image Wizard 

This wizard will help you to export an hiage with transparency. 

Which option best describes your image? 

© My image is on a transparent background 
О I bave selected the area to be made transparent 
О I need lo select the area to be made transparent 

Cancel 

Puc. 4.125. Первый диалог Export Transparent Image Wizard 
(Мастер экспорта прозрачных изображений) 

Если изображение было создано на прозрачном фоне, то при установленном по 
умолчанию 
переключателе My image is on a transparent background (Мое изображение создано 
на прозрачном фоне) мастер создаст прозрачный GIF-файл таким образом, что 
прозрачность 
фона сохранится. 

Если вы выделили ту область, которая должна стать прозрачной, то следует 
установить 
переключатель I have selected the area to be made transparent (Я выделил 
область, которая 
должна быть прозрачной). Прозрачность будет создана из выделенной области. 

Если же фон рисунка не прозрачный и перед вызовом Мастера область не была 
выделена, 
то остается только установить флажок I need to select the area to be made 
transparent (Я должен выбрать область прозрачности). В таком случае Мастер 
предложит 
закрыть диалог и выделить нужную область. 

> Установите флажок I have selected the area to be made transparent (Я выделил 
область, 
которая должна быть прозрачной). 

>• Нажмите кнопку Next (Далее). На экране появится следующий диалог Export 
Transparent Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 4.126), 

в котором необходимо указать мастеру, для чего предназначается создаваемое 
прозрачное 
изображение: для печати (Print) или для Web-страницы (Online). 

Export Transparent Image Wizard 

What will this imaoe be used for? 

©Erint 
О Qnline 

Back 

Puc. 4.126. Второй диалог Export Transparent Image Wizard 
(Мастер экспорта прозрачных изображений) 


Создание Web-сайтов 

> Установите переключатель Online (Web-страница) и нажмите кнопку Next (Далее). 

Появится третий диалог Export Transparent Image Wizard (Мастер экспорта 
прозрачных 
изображений) (Рис. 4.127). 

Export Transpaient Image W^ard 

Which image format would you like? 

©GIF 

О PNG 

p Description 
GIF format only supports 8 bit color but is widely accepttd in browstrs. 

i Cancel 

Рис. 4.127. Третий диалог Export Transparent Image Wizard 
(Мастер экспорта прозрачных изображений) 

Здесь следует определить, в каком формате нужно сохранить изображение - GIF или 

PNG. По умолчанию установлен переключатель GIF. Согласимся с этим предложением, 


• Нажмите кнопку Next (Далее). Вы увидите следующий диалог Export Transparent 
Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 4.128) с сообщением 

о том, что формат GIF поддерживает 8-битные изображения, и поэтому на следующем 

шаге необходимо будет уменьшить количество цветов в изображении с помощью 
диалога Indexed Color (Индексированные цвета). 
Export Transparent Image Wizard 

The GF format only supports 8 bit images. The next step will be to 
reduce the number of colors in your image by using the Indexed 
Cotor dialog. 

Cancel gack 

J 

Puc. 4.128. Четвертый диалог Export Transparent Image Wizard 
(Мастер экспорта прозрачных изображений) 

> Нажмите кнопку Next (Далее). На экране появится диалог Indexed Color 
(Индексированные 
цвета) (Рис. 4.129). 


Подготовка графики 

г Рфпе: | Web 

Colors: 217 

Васе* {More 

M 

0 Iransparency 

p Options 
tJatte: | None 

Bther: | Diffusion . ] 

Amount: 175 | % 
D Preserve Exact Colors 

Рис. 4.129. Диалог Indexed Color 

(Индексированные цвета) 

Изображения с индексированными цветами используют цветовые таблицы, содержащие 
256 цветов, В процессе преобразования Adobe Photoshop формирует таблицу цветов, 

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

Для преобразования изображения вы можете выбрать из открывающегося списка 
Palette (Палитра) одну из предложенных палитр, которые отличаются способом 
формирования цветов. Особенности каждой из палитр описаны в опыте 
«Оптимизируем и сохраняем графику». По умолчанию предлагается палитра Web. 

При выборе некоторых палитр будет доступно поле ввода Colors (Цвета), в котором 

можно указать количество отображаемых цветов - от 2 до 256. 

Параметр Forced (Дополнительно), который доступен не для всех палитр, позволяет 
добавить 
в цветовую таблицу некоторые дополнительные цвета: чистый белый и чистый 
черный (Black and White); первичные (Primaries) - красный, зеленый синий, 
голубой, 
пурпурный, желтый, черный, белый; Web-цвета (Web); цвета, определенные 
пользователем 
(Custom). r 

Установка флажка Transparency (Прозрачность) предохраняет прозрачные области 
изображения 
в процессе преобразования. Если этот флажок сбросить, то прозрачные области 
будут заполнены цветом, определенным в открывающемся списке.Matte (Подложка), 
или белым цветом, если для параметра Matte (Подложка) выбрано None (Нет). 

Для имитаций цветов, не вошедших в цветовую таблицу, в открывающемся списке 
Dither (Смешивание) можно выбрать один из способов смешивания. Возможные 
варианты 
описаны в опыте «Оптимизируем и сохраняем графику». 

В поле ввода Amount (Эффект) указывается числовое значение параметра Dither 
(Смешивание) 
в процентах. Высокие значения смешивают больше цветов, но и могут увеличить 
размер файла. 

Установка флажка Preserve Exact Color (Сохранить точные цвета) предохраняет 
цвета 
таблицы от смешивания. 

> Закройте диалог Indexed Color (Индексированные цвета), нажав кнопку ОК. 
Изображение 
будет преобразовано в режим индексированных цветов с параметрами, предложенными 

по умолчанию. Появится диалог Save As (Сохранить как). 


Создание Web-сайтов 

Откройте в этом диалоге папку Web, чтобы 
сохранить в ней файл. 


GIF Options 

• Row Order — 
В поле ввода Имя файла (File name) вместо © Normal OK 
предлагаемого по умолчанию имени, укажите 

О Interlaced Cancel 

имя сохраняемого файла - Samolet. 

Нажмите кнопку Сохранить (Save). Диалог 

Puc. 4.130.Диалог GIF Options

Save As (Сохранить как) закроется. На экране 

(Параметры GIF)

появится диалог GIF Options (Параметры GIF) 
(Рис. 4.130). 


> Установите переключатель Interlaced (Чересстрочная развертка) и нажмите 
кнопку 
ОК. Файл будет сохранен в указанной папке. На экране появится последний, пятый 
диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений) 

(Рис. 4.131) с сообщением о том, что изображение с прозрачным фоном создано. 

Export Transparent Image Wizard 

You have now completed the Export Image with Transparency 
Wizard. 

Your image is now ready to be used online. 

Cancel 

Back ГШП 

Puc. 4.131. Пятый диалог Export Transparent Image Wizard 
(Мастер экспорта прозрачных изображений) 

> Нажмите кнопку Finish (Готово), чтобы закрыть этот диалог. В рабочем окне 
программы 
Adobe Photoshop появится окно документа Samolet.gif, в котором прозрачный 
фон условно обозначен шахматной мозаикой. 

Созданное таким образом прозрачное изображение перед использованием в Web 
должно 
быть еще оптимизировано. 

>• Закройте окно рисунка Samolet.gif, нажав кнопку [х] в правом верхнем его 
углу. 

Посмотрим теперь, как выглядит изображение самолета на Web-странице. Вставим 
файл 
Samolet.gif в конец документа geoton.html. 

> Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web и 
вставьте 
перед закрывающим тегом </body> строку со следующим кодом HTML: 

<centerximg src = Samolet .gif border=lx/center> 

> Откройте в браузере файл geoton.html. 

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


Подготовка графики 

сквозь него виден синий фон Web-страницы. Мы умышленно включили в HTML-код 
атрибут border=l, чтобы видеть в браузере границы фотографии. 

Как видите, описанный способ экспорта прозрачного изображения достаточно прост. 

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

> Не закрывая, сверните окно браузера, нажав кнопку [Г] в правом верхнем его 
углу, 

чтобы вернуться к программе Adobe Photoshop. Программу Блокнот (Notepad) мож


но закрыть. 

>• Отмените выделение, выбрав команду меню Select • Deselect (Выделение • 
Отменить 
выделение). 

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

> Выберите команду меню Select • Color 

Select: | S Sampled Colors Ц

Range (Выделение • Цветовой диапазон). 

Euzzlness: 

На экране появится диалог Color Range 

(Цветовой диапазон) (Рис. 4.132). 

Этот диалог используется для выделения в пределах 
некоторой области или всего изображения 

пикселов заданного цвета. Для выделения нужных 
оттенков можно выбрать цвет из предла-© Sanction О Image 
гаемого в открывающемся списке Select (Выде


Selection PrevBw: |мопе 

ление) диапазона цветов или сформировать выделенную 
область на основе «проб» цвета, взя


Рис. 4.132.Диалог Color Range

тых пипеткой непосредственно на изображении 

(Цветовой диапазон)

(Sampled Colors). 

При установленном по умолчанию переключателе Selection (Выделение) вы сможете 
наблюдать за формированием выделенной области. Если же установить переключатель 

Image (Изображение), то в окне просмотра диалога будет отображаться все 
изображение. 
Такой режим удобен, например, при сильном увеличении, когда область, в которой 
вы хотите взять «пробу» цвета, не видна в окне документа. 

> Чтобы взять «пробу» цвета, установите указатель мыши, который примет форму 
пипетки 
#, на белом цвете фона изображения в окне документа и щелкните мышью. 
«Проба» будет взята, и таким образом будет отмечена область с белым цветом фона,
 
которая должна быть выделена. 

В окне просмотра диалога Color Range (Цветовой диапазон) черный цвет фона 
изменится 
на белый, так как в этом диалоге область, которая должна стать выделенной, 
отмечается 
белым цветом, а не выделенная - черным, и появится черно-белое изображение 
самолета. 
В окне документа выделенная область будет создана после закрытия диалога 
нажатием кнопки ОК. 


Создание Web-сайт о з 

>• Установите флажок Invert (Обратить выделение). Теперь в окне просмотра 
диалога 
черным цветом окрасится фон, а белым, соответствующим выделенной области, 
изображение 
самолета. 

Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать в 
диалог е 
Color Range (Цветовой диапазон) инструмент |Д ] и щелкнуть на нужном цвете в 
окне 
документа или в поле просмотра диалога. 

Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в 
диалоге 
инструмент |^ | и щелкнуть мышью на исключаемых цветах. 

Для временной активизации инструмента [^+] нужно нажать клавишу 

а инструмента 
\#\ - клавишу 

Вы можете изменить диапазон выделяемых цветов с помощью ползункового регулятора 

Fuzziness (Разброс). 

> Перемещайте ползунковый регулятор Fuzziness (Разброс) влево и наблюдайте в 
окне 
просмотра диалога Color Range (Цветовой диапазон), как при этом сужается 
диапазон 
выделенных цветов и заливается белым цветом контур самолета. Установите 
значение 
этого параметра 0 (ноль). 

В открывающемся списке Selection Preview (Предварительный просмотр выделения) 
можно выбрать один из вариантов просмотра выделенной области в окне документа: 

None (He задан) - исключает возможность просмотра; 

Grayscale (Черно-белое) - выделенная область отображается черным цветом, а 
невыделенная 
- белым; 

Black Matte (Черная подложка) - выделенная область отображается в цвете на 
черном фоне; 

White Matte (Белая подложка) - выделенная область отображается в цвете на белом 
фоне; 

Quick Mask (Быстрая маска) - выделенная область отображается с использованием 
текущих 
установок режима «Быстрая маска». Данный режим обеспечивает возможность 
одновременного 
просмотра маски и изображения. Подробнее об этом мы поговорим ниже. 

>• Просмотрите выделенную область в окне документа в различных режимах, выбирая 

их из открывающегося списка Selection Preview (Предварительный просмотр 
выделения). 

>• Закройте диалог Color Range (Цветовой диапазон), нажав кнопку ОК. 
Изображение 
самолета в окне документа будет выделено. 

Но в пределах этого выделения вы увидите также множество мелких областей 
выделения, 
окрашенных в белый цвет - такой же, как и цвет фона. И выделение этих мелких 
областей теперь следует исключить. Удобнее, точнее и быстрее всего это можно 
сделать 
в режиме «Быстрая маска» (Quick Mask). 

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


Подготовка графики 

часть изображения становится недоступной для редактирования - маскируется. При 
необходимости 
можно создавать полупрозрачные маски, которые обеспечивают частичное 
применение эффектов преобразований к определенным участкам изображения. Режим 
«Быстрая маска» обеспечивает возможность одновременного просмотра маски и 
изображения 
и редактирования маски. 

> Нажмите кнопку О - Edit in Quick Mask Mode (Q) (Редактирование в режиме 
«Быстрая 
маска» (Q)) на панели инструментов (Tools), чтобы включить этот режим. 

Все изображение в окне документа, за исключением выделенных - незащищенных от 
изменения - областей, будет маскировано с помощью своего рода «пленки», по 
умолчанию окрашенной в красный цвет и имеющей 50-процентную непрозрачность 
(Рис. 4.133). Теперь все, что окрашено красным цветом, - это маска - защищенная 
от 
изменения область. 

Рис. 4.133. Включен режим Quick Mask (Быстрая маска) 

Наша следующая задача - отредактировать маску, удалив в пределах незащищенной 
области с изображением самолета мелкие красные маскирующие пятна, 
соответствующие 
выделенным участкам в стандартном режиме. Для этого можно использовать любой 
рисующий или стирающий инструмент: кисть, карандаш, ластик. По умолчанию в 
режиме 
«Быстрая маска» рисование черным цветом приводит к расширению маски, а 
рисование 
белым цветом - к ее сужению. Рисование серым или любым другим цветом делает 
соответствующие участки маски полупрозрачными. 

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

> Выбрав инструмент |Оу| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели 
инструментов 
(Tools), увеличьте масштаб отображения до 300%. 

>• Разверните окно документа на весь экран, нажав кнопку [В] в правом верхнем 
его 
углу, и переместите с помощью полос прокрутки изображение в окне так, чтобы оно 

не перекрывалось панелью инструментов (Tools) и палитрами. 


200 Создание Web-сайтов 

При включении режима «Быстрая маска» на панели инструментов (Tools) 
автоматически 
устанавливаются белый цвет переднего плана и черный цвет фона. 

v Щелкните мытью на значке *\ - Switch Foreground and Background Colors (X) 
(Пгреключатель 
цветов переднего плана и фона) на панели инструментов (Tools), чтобы 
поменять местами цвета переднего плана и фона. Теперь цветом переднего плана 
будет 
белый. 

> Нажмите кнопку [ Д - Paintbrush Tool (В) (Инструмент «Кисть» (В)) на панели 
инструментов 
(Tools), чтобы выбрать этот инструмент. 

>• Откройте палитру Brush (Кисть) на панели параметров (Options Bar) и выберите 

жесткую кисть малого диаметра - Hard Round 3 Pixels (Жесткая круглая 3 пиксела).
 

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

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

Если вы где-то допустите ошибку и выйдете за пределы контура самолета, отмените 
i oследнее 
действие командой меню Edit • Undo (Правка • Отменить) или воспользуйтесь 
палитрой History (События). 

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

Следующее, что нужно сделать - это скрыть ореол. 

> Выберите на панели инструментов (Tools) инструмент [jT] - Pencil Tool (В) 
(Инструмент 
«Карандаш» (В)), аккуратно закрасьте теперь уже черным цветом белый 
ореол вокруг шасси самолета, крыльев, фюзеляжа, хвоста - везде, где этот ореол 
хорошо виден. Это расширит маскирующую область и скроет ореол. 

Когда редактирование в режиме «Быстрая маска» будет закончено, переключитесь в 
стандартный режим. 

>• Нажмите кнопку |ЕЕ| - Edit in Standard Mode (Q) (Редактирование в 
стандартном 
режиме (Q)) на панели инструментов (Tools). Программа переключится в 
стандартный 
режим. 

>• Просмотрите внимательно выделенную область и убедитесь, что вы правильно 
отредактировали 
ее в режиме «Быстрая маска». При необходимости можно снова включить 
этот режим и выполнить необходимую корректировку. 


Подготовка графики ,201 

>• С помощью инструмента (^] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) 
уменьшите 
масштаб отображения документа до 100%. 

Теперь мы должны сохранить выделенную область в альфа-канале. 

Каждый документ Adobe Photoshop содержит один или несколько каналов, в которых 
хранится информация о цветовых элементах изображения. Например, изображение в 
цветовом формате RGB содержит три канала: красный (Red), зеленый (Green) и 
синий 
(Blue). Цветовые каналы создаются автоматически при создании нового документа. 
Управлять каналами можно с помощью специальной палитры Channels (Каналы). 

>• Щелкните мышью на ярлыке Channels (Каналы) 
в третьем сверху окне палитр. Если этот ярлык 
отсутствует, выберите команду меню Window • 
Show Channels (Окно • Показать палитру «Каналы
»). На экране появится палитра Channels 
(Каналы) (Рис. 4.134). 

Палитра Channels (Каналы) содержит список всех 
цветовых каналов данного изображения. В ней отображаются 
миниатюры и имена трех каналов - Red 
(Красный), Green (Зеленый), Blue (Синий) - в соот


Рис. 4.134. Палитра Channels 

ветствии с действующим цветовым режимом. Кроме 

(Каноны)

того, в программе создается еще и совмещенный 
канал - RGB, отображающий результирующее изображение, который занимает в 
палитре 
верхнюю строку. Палитра Channels (Каналы) позволяет также управлять 
отображением 
отдельных каналов на экране с помощью значка •§?, делая их видимыми или 

невидимыми. 

> Просмотрите, как выглядит каждый канал, включая и выключая его отображение с 
помощью значка 1$. 

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

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

Создадим из выделенной области альфа-канал. 

>• Нажмите кнопку | Kg | - Save selection as channel 
(Сохранить выделение как канал) в нижней части 
палитры Channels (Каналы). В палитре появится 

Рис. 4.135. Альфа-канал создан

новый канал — Alpha 1 (Альфа 1) (Рис. 4.135). 

> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), 
чтобы 
снять выделение объекта в окне документа. 


Создание Web-сайтов 

Созданный альфа-канал можно просмотреть. 

> Щелкните мышью в палитре Channels (Каналы) на крайнем левом поле - Indicates 
channel visibility (Индикация видимости, канала), слева от миниатюры канала 
Alpha 1, чтобы включить отображение альфа-канала. В окне документа изображение 
будет представлено так же, как и в режиме «Быстрая маска», с помощью 
полупрозрачного 
красного цвета. 

> Щелкните мышью в палитре Channels (Каналы) на значке ф слева от миниатюры 
совмещенного канала RGB, чтобы выключить его. В окне документа вы увидите, как 
выглядит альфа-канал (Рис. 4.136). 

Рис. 4.136. Альфа-канал 

Обратите внимание, что белый участок альфа-канала создан из выделенной области 
а 
черный - из невыделенной. При экспорте в формат GIF89a участки изображения, 
соответствующие 
черным областям альфа-канала, станут прозрачными, а белым - останутся 
непрозрачными. 

>• Если в пределах белой области альфа-канала еще остались мелкие черные 
«пятни», 
закрасьте их белым цветом, предварительно щелчком мыши выделив альфа-канал в 
палитре Channels (Каналы). После редактирования снова сделайте активным 
совмещенный 
канал RGB. 

>• Включите отображение совмещенного канала, щелкнув мышью в палитре Channels 
(Каналы) в поле Indicates channel visibility (Индикация видимости канала) слева 
от 
миниатюры канала RGB, и отключите отображение альфа-канала, щелкнув мышью 
на значке ф слева от миниатюры канала Alpha 1. 

В любой момент из альфа-канала можно создать выделенную область. 

Выберите команду меню Select • Load Selection (Выделение • Загрузить выделение).
 
На экране появится диалог Load Selection (Загрузить выделение) (Рис. 4.137). 

В поле открывающегося списка Document (Документ) этого диалога указано имя 
активного 
документа; в поле Channel (Канал) - имя альфа-каыала, из которого будет создано 

выделение. Если установить флажок Invert (Инвертировать), то выделенной будет 
защищенная 
область альфа-канала. 


Подготовка графики 

Load Selection 

Document: | Samotetpsd H 

Channel: | Alpha 1 ill 
П Insert 

- Operation —^——— 
© ijew Selection 
О &dd to Selection 
О subtract from Setectton 
О internet wtth Selection 
Рис. 4.137. Диалог Load Selection (Загрузить выделение) 

> Закройте диалог Load Selection (Загрузить выделение), нажав кнопку ОК. 
Изображение 
самолета в окне документа вновь будет выделено. 

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

зальем его синим цветом и вставим из буфера обмена выделенную область. 

> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область 
будет скопирована в буфер обмена. 

>• Щелкните мышью на ярлыке Layers (Слои), чтобы показать эту палитру. 

> Нажмите кнопку | S | - Create new layer (Создать новый слой) в нижней части 
палитры 
Layers (Слои). Новый слой - Layer 1 - будет создан и станет активным. 

>• Откройте палитру Swatches (Каталог) и щелчком мыши выберите пятый слева в 
верхнем ряду синий цвет для заливки слоя. 
>• Выберите команду меню Select • All (Выделение • Все), чтобы выделить весь 
документ. 
>• Воспользовавшись инструментом \^\ - Paint Bucket Tool (G) (Инструмент 
«Заливка» 
(G)), залейте активный слой выбранным цветом. 

>• Выберите команду меню Edit • Paste (Правка • Вставить). Изображение из 
буфера 
обмена будет вставлено на новый слой Layer 2, и в окне документа вы увидите 
изображение 
самолета на синем фоне. 

Скорее всего, на синем фоне все еще хорошо видны резкие границы, особенно в 
области 
крыльев и фюзеляжа самолета. Эти края можно растушевать инструментом |^,[ 
Smudge 
Tool (R) (Инструмент «Палец» (R)). Но сделать это нужно на основном слое 
Background (Фон). 

> Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку | В | - 
Delete 
current layer (Удалить активный слой) в нижней части палитры Layers (Слои). 
Активным станет слой Background (Фон). 

> Восстановите выделение, выбрав команду меню Select • Load Selection 
(Выделение 
• Загрузить выделение) и в появившемся диалоге Load Selection (Загрузить 
выделение) 
нажав кнопку ОК. 


Создание Web-сайтов 

> Увеличьте масштаб отображения до 300%. 

>• Нажав и удерживая кнопку [5 ] - Blur Tool (R) (Инструмент «Размытие» (R)) на 
панели 
инструментов (Tools), выберите из появившейся дополнительной палитры инструмент 

[р] - Smudge Tool (R) (Инструмент «Палец» (R)). 

Этот инструмент имитирует смазывание пальцем свежей краски. Цвет, «взятый» в 
начале 
каждого штриха, смазывается в направлении перемещения указателя мыши. 

>• Откройте палитру Brush (Кисти) на панели параметров (Options Bar) и выберите 

кисть малого диаметра Hard Round 3 Pixels (Жесткая круглая 3 пиксела). 
> Сбросьте флажок Finger Painting (Рисование пальцем) на панели параметров 
(Options Bar). 

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

> Уменьшите масштаб изображения до 100%. 

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

> Выберите команду меню Edit • Paste Into (Правка • Вставить в). Изображение из 

буфера обмена будет вставлено в выделенную область и помещено на новый слой 
Layer 1. Этот слой появится в палитре Layers (Слои). 

>. Выключите отображение слоя Background (Фон) в палитре Layers (Слои), щелкнув 

мышью на значке ф против названия этого слоя. 

Обратите внимание, что весь слой Layer 1, за исключением изображения самолета, 
прозрачен 
- он отображается, как все прозрачные области, в виде серой шахматной мозаики. 

Для сохранения прозрачного слоя Layer 1 в формате GIF воспользуемся командой 
меню 
Save for Web (Сохранить для Web). В процессе сохранения вся информация, которая 
не 
отображается в окне документа - слой Background (Фон), будет отброшена. 

> Выберите команду меню File • Save for Web (Файл • Сохранить для Web). На 
экране 
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122). 

В этом диалоге для формата JPEG прозрачный фон слоя по умолчанию отображается 
белым цветом. 

> В открывающемся списке Optimized file format (Формат оптимизированного файла) 

выберите GIF. 

> В открывающемся списке Colors (Цвета) подберите оптимальное количество цветов,
 
при котором качество изображения заметно не изменится. 

> Убедитесь, что установлен флажок Transparency (Прозрачность). 

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



Подготовка графики 205 

прозрачных пикселов. Если же флажок сбросить, то прозрачные пикселы будут 
окрашены 
цветом, определенным параметром Matte (Подложка). 

v Нажмите кнопку О К, чтобы закрыть диалог Save For Web (Сохранить для Web). 

У В появившемся диалоге сохранения Save Optimized As (Сохранить оптимизирован


ный документ как) откройте папку Web и нажмите кнопку Сохранить (Save), чтобы 

сохранить файл под прежним именем - Samolet.gif. 

v В появившемся диалоге Replace Files (Замена файлов) с запросом о 
необходимости 
замены существующего файла с таким же именем (Рис. 4.138) нажмите кнопку 

• Replace (Заменить). Файл будет перезаписан. 
Some of the specified files already exist in the target location. The files 
marked below w l be replaced: 

S Samolet.gif 

Cancel [ Replace | 

Рис. 4.138.Диалог Replace Files (Замена файлов) 

В описанной методике для создания прозрачного слоя мы использовали выделение, 
полученное 
с помощью маски, сохраненной в альфа-канале, а для создания маски сформировали 
выделенную область, воспользовавшись командой Color Range (Цветовой диапазон) 
с последующим редактированием в режиме «Быстрая маска». Конечно, создать 
выделенную 
область для маски можно было значительно проще, без использования этой 
команды и режима, а простым выделением фона инструментом \\\ - Magic Wand (W) 
(Инструмент «Волшебная палочка» (W)) с последующим инвертированием выделения. 
Но рассмотренные приемы дали нам возможность глубже познакомиться с 
возможностями 
программы Adobe Photoshop и практически освоить новые инструменты. 

Просмотрим полученный результат в браузере. 

>• Разверните свернутое окно программы просмотра Web-страниц, щелкнув мышью на 
его кнопке на Панели задач (Taskbar). 

> Обновите Web-страницу, нажав соответствующую кнопку на панели инструментов 
браузера. 

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

достаточно резкие. И главная причина заключается в том, что сглаживание 
выполнялось 
на фоне, отличающемся от фона Web-страницы. 

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


206 Создание Web-сайтов 

> Не закрывая, сверните окно браузера, нажав кнопку [Г] в правом верхнем его 
углу. 

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

>• Выберите команду меню File • Save for Web (Фарш •Сохранить для Web). На 
экране 
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122). 

В этом диалоге сохранены параметры оптимизации, применявшиеся последний раз. 

При установленном флажке Transparency (Прозрачность) частично прозрачные 
пикселы, 
которые обычно присутствуют по краям сглаженного изображения, заполняются 
цветом, определенным параметром Matte (Подложка). Установим синий цвет подложки,
 
соответствующий цвету фона Web-страницы geoton.html. 

>• Щелкните мышью на поле открывающегося списка Matte (Подложка). На экране 
появится 
диалог Color Picker (Палитра цветов). 

> В полях ввода R, G, В введите значения, соответственно, 0, 0, 255 и нажатием 
кнопки 
ОК закройте диалог Color Picker (Палитра цветов). Заданный синий цвет 
отобразится 
в поле открывающегося списка Matte (Подложка). На образце в диалоге вокруг 
изображения 
самолета появится тонкая линия такого же цвета. 

>• Нажмите кнопку ОК. Диалог Save For Web (Сохранить для Web) закроется. На 
экране 
появится диалог Save Optimized As (Сохранить оптимизированный документ как). 

v Откройте папку Web и нажмите кнопку Сохранить (Save). 

> В появившемся диалоге Replace Files (Замена файлов) с запросом о замене 
существующего 
файла с именем Samolet.gif нажмите кнопку Replace (Заменить). Файл будет 
перезаписан. 

Посмотрим, как будет выглядеть изображение в программе просмотра Web-страниц. 

>• Разверните свернутое окно браузера и обновите документ HTML. 

Теперь, после того как частично прозрачные пикселы по краям сглаженной области 
окрашены 
в цвет фона Web-страницы, изображение смотрится вполне профессионально. 

>• Закройте браузер, нажав кнопку [х] в правом верхнем его углу. 

> Удалите из файла geoton.html тег, загружающий фотографию Samolet.gif. 

>• Закройте документ Samolet.psd в программе Adobe Photoshop, нажав кнопку [х] 
в 
правом верхнем углу его окна, и на предложение сохранить файл ответьте 
отрицательно. 


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


Подготовка графики

€ JV&-J9. Бесшовный фон 

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

Изображение для фона можно взять в одной из многочисленных бесплатных библиотек 

в WWW. Но можно изготовить рисунок и самостоятельно. Посмотрим, как это сделать 

на примере создания простой фоновой текстуры. Начнем с создания нового 
документа 
размером ЮОх 100 пикселов с черным цветом фона и белым цветом переднего плана. 

> Щелкните мышью на значке Щ- Default Foreground and Background Colors (D) 
(Цвета переднего плана и фона по умолчанию) на панели инструментов (Tools) 
программы 
Adobe Photoshop, чтобы установить цвета по умолчанию. 

> Поменяйте местами цвета переднего плана и фона, щелкнув мышью на значке *\ 
Switch 
Foreground and Background Colors (X) (Переключатель цветов переднего 
плана и фона) на панели инструментов (Tools). Цвет фона на образце станет 
черным. 

> Выберите команду меню File • New (Файл • Новый). На экране появится диалог 
New 
(Новый). 

>• В полях ввода Width (Ширина) и Hight (Высота) введите значения ширины и 
высоты 
документа - 100 пикселов. 

> В открывающемся списке Color mode (Цветовой режим) выберите RGB Color 
(Цвет RGB). 

>-В открывающемся списке Background Contents (Содержимое фона) выберите 
Background Color (Цвет фона). 

>- Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программы Adobe 

Photoshop появится окно нового документа с размерами ЮОх 100 пикселов и черным 
цветом фона. 

С помощью фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) 
создадим 
мягкий узор в виде «облаков». Эти фильтры генерируют узор с помощью случайных 
величин, которые изменяются в диапазоне от основного цвета к фоновому, в нашем 
случае от белого к черному. 

>• Выберите команду меню Filter • Render • Clouds (Фильтр • Рендеринг • Облака).
 
Фильтр будет применен, и на изображении появится узор в виде «облаков». 

Теперь применим к изображению фильтр Difference Clouds (Облака с наложением). 

> Выберите команду меню Filter • Render • Difference Clouds (Фильтр • Рендеринг 

• Облака с наложением). Узор на изображении изменится. 

Повторное многократное применение этого фильтра создает эффект «прожилок», кото


рый напоминает текстуру мрамора. Для повторного применения последнего использо


вавшегося фильтра достаточно нажать комбинацию клавиш I С1г | |+1ГП. 


Создание Web-сайт о i 

> Нажмите несколько раз комбинацию клавиш И Ctr l I+1IF I. 
При каждом нажатии этой комбинации клавиш фильтр будет 
применяться повторно, а изображение в окне документа 
- изменяться. В результате должно получиться что-то 
вроде Рис. 4.139. 
Далее применим к изображению фильтр Glowing Edges 
(Свечение краев) из группы фильтров Stylize (Стилизация). 
Все фильтры этой группы создают ярко выраженные эффекРис. 
4.139. Результат 
ты очерчивания за счет смещения пикселов и повышения применения фильтра 
контрастности изображения и особенно полезны при обраDifference 
Clouds 
ботке черно-белых изображений. Фильтр Glowing Edges (Облака с наложением) 
(Свечение краев) отыскивает границы цветовых областей и 

добавляет свечение, подобное неоновому. 

Выберите команду меню Filter • Stylize • Glowing Edges (Фильтр • Стилизация 
• Свечение краев). На экране появится диалог Glowing Edges (Свечение краев) 
(Рис. 4.140), в котором следует определить параметры эффекта. 

Рис. 4.140.Диалог Glowing Edges (Свечение краев) 

> Переместите ползунковый регулятор Edge Width (Ширина границ) влево так, чтобы 
в 
поле ввода над ним появилось значение 1. 

>• Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому 

краю так, чтобы значение этого параметра стало равно 20. 

>• Для параметра Smoothness (Сглаженность) установите значение 1. 


Подготовка графики 

>• Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК. 

После применения этого фильтра изображение будет затемнено. Поэтому 
воспользуемся 
командой Brightness/Contrast (Яркость/Контраст) для увеличения яркости и 
контраста. 

>• Выберите команду меню Image • Adjustments • Brightness/Contrast (Изображение 
• 
Коррекции • Яркость/Контраст). На экране появится диалог Brightness/Contrast 
(Яркость/
Контраст) (Рис. 4.141). 

>• Переместите ползунковыи регулятор Brightness (Яркость) вправо так, чтобы в 
поле 
ввода над ним отобразилось значение +50. 

> Переместив ползунковыи регулятор Contrast (Контраст) вправо, установите 
значение 
этого параметра +30. 

>• Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Контраст). 
Документ 
примет вид примерно как на Рис. 4.142. 

Brightness/Contrast 

Brightness: |5 | 
I Reset | 
Contrast: 
13 Preview 

Рис. 4.141. Диалог Brightness/Contrast 
(Яркость/Контраст) 

Рис. 4.142. Изображение после применения 
фильтра Glowing Edges (Свечение краев) 
и настройки яркости и контраста 

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

>• Выберите команду меню Image • Adjustments • Hue/Saturation (Изображение • 
Коррекции • Цветовой тон/Насыщенность). На экране появится диалог 
Hue/Saturation (Цветовой тон/Насыщенность) (Рис. 4.143). 

Рис. 4.143.Диалог Hue/Saturation (Цветовой тон/Насыщенность) 


Создание Web-сайтов 

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

> Убедитесь, что установлен флажок Preview (Предварительный просмотр), чтобы 
иметь возможность наблюдать в окне документа результаты изменения параметров. 

>• Установите флажок Colorize (Тонирование). В диалоге изменится положение 
ползунковых 
регуляторов, а в окне документа изображение будет тонировано - приобре тет 
красный оттенок. 

Чтобы лучше понять закономерности настройки цветовых 
компонентов, следует представить себе, что все видимые 
человеческим глазом цвета спектра, располагаются 
на цветовом круге (Рис. 4.144). Каждый цвет на этом 
круге характеризуется тремя базовыми параметрами: 
цветовым тоном (Hue), насыщенностью (Saturation) и 
яркостью (Lightness). Такое представление соответствует 
уже рассмотренной нами ранее цветовой модели HSB. 

Для описания цветового тона обычно используется на


звание цвета: красный, оранжевый, желтый, зеленый и 

т.д. Каждый цветовой тон занимает определенное поло


жение на цветовом круге и характеризуется величиной Рис. 4.144. Цветовой круг 

угла от 0° до 360°. 

Насыщенность - это степень чистоты цвета, которая определяется соотношением 
серого 
цвета и данного цветового тона. Насыщенность выражается в процентах от 0% серый 

- до 100% - полностью насыщенный. На цветовом круге насыщенность увеличивается 
от центра к краю. 

Яркость характеризует относительную освещенность или затемненность цвета и 
измеряется 
в процентах в диапазоне от 0% - черный - до 100% - белый. 

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

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

>• Перемещайте ползунковый регулятор Saturation (Насыщенность) вправо и 
наблюдайте 
в окне документа, как при этом повышается насыщенность красного цвета. 
Напомним, что на цветовом круге это соответствует движению от центра к краю. 
Установите значение этого параметра - 100%. 

Изменим цветовой тон изображения на синий. 

> Перемещайте ползунковый регулятор Hue (Цветовой тон) вправо и наблюдайте, как 

изменяется цветовой тон изображения в окне документа. Изменяющееся при этом 


Подготовка графики 

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

> Установите значение параметра Hue (Цветовой тон) - 210. Такое значение 
отражает 
тот факт, что на цветовом круге синий цвет, которым тонировано изображение, 
смещен 
относительно красного на 210°. 

>• Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность). 

Установленные цветовые параметры будут закреплены. 

>• Сохраните документ в папке Web, в файле Fon.psd в формате Adobe Photoshop. 

На этом создание фоновой текстуры можно считать законченным. Но, так как 
рисунок 
будет повторен на Web-странице много раз, между фрагментами фона будут видны 
швы. 
В Adobe ImageReady имеется специальный фильтр - Tile Maker (Конструктор 
повторений), 
который позволяет удалить швы, создавая таким образом бесшовный фон. 

>• Нажмите кнопку VJ) - Edit in ImageReady (Shift+Ctrl+M) (Редактировать в 
ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). Будет 
запущена 
программа Adobe ImageReady, и в ее рабочем окне откроется документ Fon.psd. 

> Выберите команду меню Adobe ImageReady Filter • Other • Tile Maker (Фильтр • 
Другие • Конструктор повторений). На экране появится диалог Tile Maker (Конст


руктор повторений) (Рис. 4.145). 
JTile Maker xW 
© Blend Edges 
Width: |1O | percent 
|L OK 
• Resize Tile to Fill Image I Resst I 
О Kaleidoscope Tile 

Рис. 4.145.Диалог Tile Maker(Конструктор повторений) 

Данный фильтр смешивает пикселы на краях изображения для создания бесшовного 
фона. При установленном переключателе Blend Edges (Размытие краев) будет 
выполняться 
размытие краев рисунка для исключения швов между плитками при повторении 
изображения на Web-странице. 

В поле ввода Width (Ширина) следует указать ширину полосы у края изображения, 
в пределах которой должен происходить плавный переход. Обычно используются 
значения 
от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра, 
предлагаемым по умолчанию, -10 процентов. 

При установленном флажке Resize Tile to Fill Image (Изменить размер плитки для 
заполнения 
изображения), размер плиток подгоняется под размер изображения. Если данный 
флажок сбросить, то плитки будут меньше размера изображения на величину, 
определенную 
параметром Width (Ширина), и на Web-странице они не будут вплотную прилегать 
друг к другу. 

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде 
калейдоскопа, 
в котором изображение отражается по горизонтали и вертикали, создавая таким 
образом оригинальный узор. 


Создание Web-сайтов 

> Установите флажок Resize Tile to Fill Image (Изменить размер плитки для 
заполнения 
изображения). 

> Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. 
Установленные 
параметры будут применены. 

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

> Выберите команду меню File • Output Settings • Background (Файл • Параметры 
вывода • Фон). На экране появится диалог Output Settings (Параметры вывода) 
(Рис. 4.146). 

Output Sellings 

Preset: |Default Settings 

[Background | Cancel 

Г 
Г 
View Document As 


I Era» | 

©image О Background 

1 Next | 
|- Background Image 


I Save.,, j 

Рис. 4.146. Элементы управления Background (Фон) 
диалога Output Settings (Параметры вывода) 

> Установите переключатель Background (Фон), чтобы использовать активное 
изображение 
в качестве фона Web-страницы. 
>• Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК. 
Теперь можно просмотреть фон в браузере. 

>• Выберите команду меню File • Preview in (Файл • Предварительный просмотр в) 
и в появившемся подменю - программу просмотра Web-страниц. Будет запущен 
выбранный браузер, и в его окне вы увидите созданный бесшовный фон. 

Для запуска браузера, установленного по умолчанию, вы можете нажать кнопку \Щ\ 
Preview 
in Default Browser (Ctrl+AIt+P) (Предварительный просмотр в браузере по 
умолчанию 
(Ctrl+Alt+P)) на панели инструментов (Tools). 


Подготовка графики 

Кроме фонового рисунка в окне программы просмотра выводится информация о 
формате 
изображения (Format), его размерах (Dimensions), размере файла (Size) и 
параметрах 
оптимизации (Settings), а ниже - HTML-код автоматически сгенерированного файла 
(Рис. 4.147). 

^ 

.айл Правка Вид Избранное Сервис .правк 

^Избранно* 

• 

: | g С:\РосидвМк and SeltingtWatHyVLocalj&»ing^\Te^P^^^R? j ^ ЕЗ Перепоя j 
Links 

omat:GIF 

imencwns: lOOwxiOGh 
in : 4.82Ж 
*ttir^s: Selective, 16 Colors, 100% Diffusion Dither, Transparency on. No 
Transpaiercy Dither, Interlaced, 0% Web Snap 


html» 
body bgcolor-" 
/body> 


Рис. 4.147. Фоновый рисунок в браузере 

> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу. 

Чтобы изготовленное изображение можно было использовать как фон Web-страницы, 
его необходимо оптимизировать и сохранить в Web-формате. 

> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. 
Будет выполнена оптимизация с последними установленными параметрами, и вы 
увидите оригинальное и оптимизированное изображения. 

>• Подберите наилучшие, с вашей точки зрения, параметры оптимизации в формате 
GIF. 

>• Сохраните оптимизированный документ в папке Web под именем Fon.gif, выбрав 
команду меню File • Save Optimized (Файл • Сохранить оптимизированный документ).
 


>• Закройте программу Adobe ImageReady без сохранения документа Fon.psd, нажав 
кнопку [х] в правом верхнем углу ее окна. 

Посмотрим теперь, как будет выглядеть изготовленный фон на Web-странице 

geoton.html. 

>• Откройте файл geoton.html из папки Web в программе Блокнот (Notepad) и 
вставьте 
в открывающий тег <body> атрибут background=Fon.gif. 


Создание Web-сайтов 

> Откройте в браузере файл geoton.html. 

Как видите, Web-страница с изготовленным фоном выглядит значительно интереснее, 

чем с однородным. Обратите внимание также, что швы между плитками практически 
незаметны. 

>• Закройте программу просмотра Web-страниц, 

>• Удалите из HTML-кода файла geoton.html вставленный атрибут backgroundFon.
gif. 

> Закройте программу Блокнот (Notepad). 

Мы познакомились со способом создания бесшовного фона на основе фоновой 
текстуры, 
полученной с помощью фильтров Clouds (Облака) и Difference Clouds (Облака с 
наложением). Применяя различные эффекты к одноцветным или полутоновым 
изображениям, 
вы можете создавать самые разнообразные текстуры. Ниже кратко описаны еще 
некоторые способы изготовления фоновых текстур. Причем указанные параметры 
фильтров не являются строго обязательными. Вы можете варьировать их в широких 
пределах, получая каждый раз новый эффект. 

Шероховатость 

В программе Adobe Photoshop создайте новый документ размером 100x100 пикселов с 

белым цветом фона и черным цветом переднего плана. 

> Залейте изображение черным цветом. 

> Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter • Noise 
• 
Add Noise (Фильтр • Шум • Добавить шум) с установленным переключателем 
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром 
Amount (Эффект) равным 400 (Рис. 4.148). 

> Примените фильтр Emboss (Рельеф), воспользовавшись командой меню Filter • 
Stylize • Emboss (Фильтр • Стилизация • Рельеф), с параметрами: Angle 
(Угол)==45, 
Height (Высота)=2, Amount (Эффект)=30 (Рис. 4.149). 

ШшШг 

Рис. 4.148. Применен фильтр Add Noise Рис. 4.149. Применен фильтр Emboss 
(Добавить шум) (Рельеф) 

Тонируйте изображение, выбрав команду меню Image • Adjustments • Hue/ 
Saturation (Изображение • Коррекции • Цветовой тон/Насыщенность). 


Подготовка графики 

Шлифованная плитка 

> Создайте новый документ размером ЮОх 100 пикселов и с белым цветом фона. 

> Примените фильтр Add Noise (Добавить шум) с установленным переключателем 
Gaussian (По Гауссу), флажком Monochromatic (Сохранить оттенки) и параметром 
Amount (Эффект) равным 125 (Рис. 4.150). 

>• Примените фильтр Motion Blur (Размытие в движении), воспользовавшись 
командой 
меню Filter • Blur • Motion Blur (Фильтр • Размытие • Размытие в движении), с 
параметрами: 
Angle (Угол)=-45, Distance (Расстояние)=100 (Рис. 4.151). Последний 
параметр должен быть не меньше размера изображения. 

у Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height 
(Высота)=
2, Amount (Эффект)=35 (Рис. 4.152). Обратите внимание, что параметр Angle 
(Угол) 
должен отличаться от того же параметра фильтра Motion Blur (Размытие в 
движении). 

Рис. 4.150. Применен Рис. 4.151. Применен Рис. 4.152. Применен 
фильтрAdd Noise фильтр Motion Blur фильтр Emboss 
(Добавить шум) (Размытие в движении) (Рельеф) 

> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой 
тон/Насыщенность), применив следующие параметры: флажок Colorize (Тонирование) 
- установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10, 
Lightness (Яркость)=+20. 

Облицовочная плитка 

> Создайте новый документ размером ЮОх 100 пикселов и с белым цветом фона. 

>• Примените фильтр Add Noise (Добавить шум) с установленным переключателем 
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром 
Amount (Эффект) равным 120 (Рис. 4.153). 

>• Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height 
(Высота)^ 
, Amount (Эффект)=30 (Рис. 4.154). 

Рис. 4.153. Применен фильтр Add Noise Рис. 4.154. Примените фильтр Emboss 
(Добавить шум) (Рельеф) 


Создание Web-сайтов 

> В палитре Channels (Каналы) создайте новый канал Alpha 1, нажав кнопку | В | 
Create 
new channel (Создать новый канал). 
> Выделите изображение альфа-канала в окне документа командой Select • All 
(Выделение 
• Все) и создайте рамку выделения толщиной 3 пиксела командой Select • 
Modify • Border (Выделение • Модификация • Граница). 
> Инвертируйте выделение командой Select • Inverse (Выделение 
• Обратить выделение) и залейте выделенную область 
белым цветом. Отмените выделение. 
> Примените к альфа-каналу фильтр Gaussian Blur (Размытие 
по Гауссу), воспользовавшись командой меню Filter • 
Blur • Gaussian Blur (Фильтр • Размытие • Размытие по 
Гауссу) с параметром Radius (Радиус)=2,0 пиксела, чтобы 
размыть границу (Рис. 4.155). 
Рис. 4.155. Рамка 
в альфа-канале 
> В палитре Layers (Слои) выделите слой Background (Фон) и создайте эффект трех 

мерности с помощью фильтра Lighting Effects (Эффекты освещения), воспользовав 
шись командой меню Filter • Render • Lighting Effects (Фильтр • Рендеринг • Эф 
фекты освещения). Установите параметры эффекта как на Рис. 4.156. Результат 
будет 
примерно такой, как на Рис. 4.157. 
Lighting Effects 

Intensity: Ne 9 ativ e 
Focus: Narrow Wide 
Properties: 
Gloss: Matte •79 Shiny 
Material: Metallic 
,Exposure: Under Over 
Ambience: . Ne 3 ativ e 32 Positive 
Texture Channel: [Alpha 1 hi0 
White is high 
E l Preview 
Height: Flat 50 Mountainous 

Puc. 4.156. Диалог Lighting Effects (Эффекты освещения) 
с установленными параметрами фильтра 

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/ 
Насыщенность). 


Подготовка графики

Для создания фоновых текстур, кроме описанных фильтров, 
попробуйте использовать фильтры Colored Pencil (Волшебный 
карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Кракелюры), 
Chalk & Charcoal (Мел и уголь), Mezzotint (Меццотинто), 
Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), 
Note Paper (Почтовая бумага), Pointillize (Пуантилизм), 
Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Текстуризатор), 
Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile ' < I 
(Цветная плитка). Заметим, что применение некоторых фильт-рименен фильтр 
ров, например, Glass (Стекло), к сплошному цветуJ дает очень ,„ , , , 

„ „ V, ' (Эффекты освещения)

незначительный или нулевой эффект. 

(ЗШУШЬ JV&20. Разрезаем изображения 
и создаем изображения-карты 

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

применив к нему эффект Rollover (Наведение). При просмотре в браузере, в 
зависимости 
от действий мыши, состояние этого фрагмента будет изменяться. 

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

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

из таблицы HTML и сохранили ее в файле menu.html. Теперь в программе Adobe 
ImageReady создадим для этого сайта простую графическую навигационную панель. 

>• Убедившись, что в программе Adobe Photoshop закрыты все документы, перейдите 
в 
программу Adobe ImageReady, нажав кнопку "Е^ВД - Edit in ImageReady 
(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) на панели 
инструментов 

(Tools). 

> Установите на панели инструментов программы Adobe ImageReady белый цвет 
переднего 
плана и синий цвет фона с RGB-составляющими цвета R=0, G=0, B=255 или 
в шестнадцатеричном формате - OO00FF. 

> Создайте в программе Adobe ImageReady новый документ с размерами 160x400 
пикселов 
и цветом фона - Background Color, т.е. синим. 

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


Создание Web-сайтов 

> Сохраните документ под именем menu.psd. 

| !-t-Up~. ©

Теперь можно приступить к нарезке изображения. 

Главная 

Эта операция выполняется с помощью инструмента 

• страница 
\jf\ - Slice Tool (К) (Инструмент «Фрагмент» (К)). 
', 'НемМЫ 
занимаемся? 

> Нажмите кнопку \j?\ - Slice Tool (К) (Инструмент 
«Фрагмент» (К)) на панели инструментов (Tools), 
чтобы включить этот инструмент. 

Фрагменты могут быть двух типов: автоматически 
Оборудование 

созданные и пользовательские. По умолчанию каждый 
документ содержит один автоматически создан-Спец. ПО 
ный фрагмент, включающий все изображение и зани


Наши партнеры 

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

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

п Асо п
v v v


" ^ _ Рис. 4.158. Графическое меню 
автоматически созданные. При необходимости вы можете 
преобразовать автофрагменты в пользовательские. К каждому пользовательском}' 
фрагменту можно применять индивидуальнью установки оптимизации. Можно также свя 
• 
зать несколько пользовательских фрагментов, чтобы применить к ним одинаковые 
оптимизационные 
параметры. Ко всем автоматически созданным фрагментам применяются 
единые установки оптимизации. 
Вырежем в изображении первый пользовательский 
фрагмент, включающий название пункта меню Главная 
страница. Главная 

страница 

> Установите указатель мыши, который примет фор


Чет ты

му ft, в левом верхнем углу окна документа. 

занимаемся? 

Нажмите и удерживайте левую кнопку мыши. В левом 
верхнем углу фрагмента появятся два серых значкаиндикатора 
|о1|в|. Левый значок означает порядковый 
номер фрагмента, а правый - его тип - изображение. 

Оборудование.

Фрагменты нумеруются по порядку слева направо и 
сверху вниз. 

Спец. ПО 

зши партнеры

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

>- Отпустите левую кнопку мыши. Первый пользовательский 
фрагмент будет вырезан и окружен Рис. 4.159. Первый фрагмент 
рамкой выделения с квадратными маркерами в уг


создан 

лах и серединах сторон (Рис. 4.159). 

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


Подготовка графики 

фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент 
будет отличаться от выделенного пользовательского фрагмента оттенком. В его 
левом 
верхнем углу, кроме значков-индикаторов номера и типа, появится значок g], 
означающий, 
что данный автофрагмент связан с пользовательским. 

Если размер вырезанной части изображения вас не 
устраивает, то его легко можно изменить, переместив 
маркеры выделения с помощью инструмента |У ] Slice 
Select Tool (О) (Инструмент «Выбор фрагмента» 
(О)). Этим же инструментом можно выделить фрагмент 
и переместить его. Для удаления выделенного 

фрагмента достаточно нажать клавишу I0*1"8! или воспользоваться 
командой меню Slices • Delete Slice 
(Фрагменты • Удалить фрагмент). 

> С помощью инструмента 1<J - Slice Tool (К) 
(Инструмент «Фрагмент» (К)) вырежьте второй 
фрагмент с надписью Чем мы занимаемся?, а затем 
- все остальные фрагменты с названиями пунктов 
меню. Всего должно получиться 9 пользовательских 
фрагментов (Рис. 4.160). 

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

>• Нажмите кнопку ||Л | - Toggle Slices Visibility (Q) (Выключение/включение 
отображения 
фрагментов (Q)) на панели инструментов (Tools). Разметка фрагментов будет 
скрыта. 

>• Чтобы показать скрытую нарезку, повторно нажмите кнопку [Ш| - Toggle Slices 
Visibility (Q) (Выключение/включение отображения фрагментов (Q)) на панели 
инструментов 
(Tools) или просто щелкните мышью в окне документа при выбранном инструменте 
\^\ или |У]. 

Нарезать изображение можно и другим способом - создав выделенную область и 
выбрав 
команду меню Select • Create Selection from Slice (Выделить • Создать выделение 
из 
фрагмента). 

Для каждого полученного фрагмента документа создадим эффект Rollover 
(Наведение) 
таким образом, чтобы при установке указателя мыши в браузере на каждом из 
пунктов 
меню цвет фона этого фрагмента изменялся с синего на темно-синий. Начнем с 
первого 
фрагмента. Предварительно его следует выделить. 

> Нажмите кнопку |1У| •*• Slice Select Tool (О) (Инструмент «Выбор фрагмента» 
(О)) на 
панели инструментов (Tools), чтобы выбрать инструмент. 

> Установите указатель мыши, который примет форму >р, в окне документа на 
фрагменте с надписью Главная страница. 



Создание Web-сайтов 

> Щелкните мышью в этом месте. Фрагмент будет 
выделен. 

Web Content'4.<:°br Т»Ы« 

_ 0 

>• Щелкните мышью на ярлыке Web Content 

Normal 

(Содержимое Web) в нижнем окне палитр, 

чтобы отобразить палитру на экране. 

Image Maps 

Slices 

> Увеличьте высоту окна палитры, чтобы были 
видны все фрагменты (Рис. 4.161). 

В палитре Web Content (Содержимое Web) уже 

i

создан первый кадр эффекта для состояния Normal 
(Нормальное), при котором указатель мыши находится 
за пределами выбранного фрагмента. 
Фрагмент menu_01 выделен. Имя фрагмента со


ntenu_O& 

стоит из имени файла без расширения и порядково


го номера фрагмента. 

menu_05 

1 

—' 

> Нажмите кнопку | И I - Creates rollover state 
(Создать новое состояние) в нижней части палит-menu_04 
ры Web Content (Содержимое Web), чтобы создать 
кадр для следующего состояния - Over (Над). menu_03 

js 

Теперь нам нужно определить, как будет выглядеть 

! menu_02 

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

L-S&J menu_01 

над фрагментом. При этом цвет фона должен ме-ш 
няться на темно-синий. Для этого, создадим из 
фрагмента выделенную область, поместим ее на 
новый слой над слоем Layer 1 и зальем темно-Рис. 4.161. Палитра Web Content 

синим цветом. (Содержимое Web) 
с первым кадром эффекта 

> Выберите команду меню Select • Create Selection 

для первого фрагмента 

from Slice (Выделить • Создать выделение из 

фрагмента). Выделенная область будет создана. 

> Щелчком мыши выделите в палитре Layers (Слои) слой Background (Фон). 

> Нажмите кнопку | В j - Create a new layer (Создать новый слой) в нижней части 
палитры 
Layers (Слои). Над слоем Background (Фон) появится новый слой Layer 1. 

> Установите темно-синий цвет переднего плана, выбрав в открывающихся списках 
R (Красный) и G (Зеленый) палитры Color (Цвет) значения 00, а в открывающемся 
списке В (Синий) - значение СС. 

>• С помощью команды меню Edit • Fill (Правка • Залить) заполните выбранным 
цветом 
переднего плана выделенную область активного слоя Layer 1. 

Таким образом, мы определили сбстояние Over (Над) эс] [)екта Rollover 
(Наведение) для 
фрагмента изображения с надписью Главная страница. 

Обратите внимание на то, что для состояния Normal (Нормальное) фрагмента 
menu_CI1 
флажок видимости слоя Layer 1 должен быть сброшен, чтобы убедиться этом 
выполните 
следующие шаги. 


Подготовка графики

> Щелкните на имени фрагмента menu_01 в палитре Web Content (Содержимое Web). 

>• Если флажок видимости слоя - значок глаза присутсвует напротив слоя Layer 1 
в палитре 
Layers (Слои), сбросьте данный флажок щелчком мыши. 

>• Щелкните мышью на строке Over (Над) под фрагментом menu_01 в палитре Web 
Content (Содержимое Web), чтобы выделить состояние эффекта Rollover (Наведение) 

для этого фрагмента, 

> Если флажок видимости слоя - значок глаза отсутсвует напротив слоя Layer 1 в 
палитре 
Layers (Слои), установите данный флажок щелчком мыши. 

Таким образом мы убедились, что изображение слоя Layer 1 будет появляться на 
экране, 
только при наведении указателя мыши на фрагмент menu_01. 

Создадим такой же эффект для второго фрагмента с надписью Чем мы занимаемся? 

>• Выберите следующий фрагмент - menu_02, щелкнув на нем мышью в палитре Web 
Content (Содержимое Web). Второй фрагмент с надписью Чем мы занимаемся? будет 
выделен в окне документа. 

Фрагмент можно выбрать также щелчком мыши в окне документа при активном 
инструменте 
^F\ - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)). 

>• Создайте состояние Over (Над), нажав кнопку | В | - Creates new rollover 
state (Создать 
новое состояние) в нижней части палитры Web Content (Содержимое Web). 

> Создайте выделенную область из фрагмента с помощью команды меню Select • 
Create Selection from Slice (Выделить • Создать выделение из фрагмента). 

>- Создайте новый слой - Layer 2 -в палитре Layers (Слои) и залейте выделенную 
область 
темно-синим цветом. 

Убедитесь, что видимось слоя Layer 2 отсутсвует при выборе фрагмента menu_02 в 
па


литре Web Content (Содержимое Web) и присутсвует при выборе состояния Over 
(Над) 

для фрагмента menu_02 в палитре Web Content (Содержимое Web). 

Будет определен эффект Rollover (Наведение) для второго фрагмента. 

>• Действуя описанным способом, создайте эффект Rollover (Наведение) для 
остальных 
фрагментов изображения. 

После того как изображение нарезано и для фрагментов создан эффект Rollover 
(Наведение), 
у вас есть два варианта дальнейших действий. Можно сохранить готовые фрагменты 
изображения и затем вручную в текстовом редакторе вставить ссылки на них в код 
HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe 
ImageReady и сохранить вместе с нарезанными частями изображения также и 
HTMLфайл, 
который будет создан автоматически с уже готовым меню. Назначение ссылок 
фрагментам изображения выполняется с помощью палитры Slice (Фрагмент). 

>• Щелкните мышью при выбранном инструменте |У] - Slice Select Tool (О) 
(Инструмент 
«Выбор фрагмента» (О)) в окне документа на первом фрагменте изображения с 
надписью 
Главная страница, чтобы выделить его. 


Создание Web-сайтов 

> Выберите команду меню Window • Slice (Окно • 
Фрагмент). На экране появится палитра Slice 
(Фрагмент) (Рис. 4.162). 

Тур»: |Imjg« ^ J 

В поле ввода Name (Имя) указано имя фрагмента, 

Names [menujn 

предлагаемое по умолчанию - menu_01, состоящее из 

URLi |~ 

имени файла и порядкового номера. Под этим именем 

Target: [~ 

фрагмент будет сохранен. При необходимости имя 
можно изменить. «• L_ 

t DinensiMS 
В открывающемся списке Туре (Тип) вы можете вы-l> Cell Alignment 
к Background 

брать тип фрагмента из трех вариантов: Image 

b Status Bar Message 
(Изображение), No Image (He изображение) и Table ^ 

(Таблица). По умолчанию тип всех фрагментов - Image 

Рис. 4.162. Палитра Slice

(Изображение), т.е. содержащий графические данные. 

(Фрагмент)

Для фрагментов, содержащих не графику, а только 
сплошной цвет или текст, следует устанавливать тип No Image (He изображение). 
При этом вид палитры Slice (Фрагмент) изменится, и вы сможете ввести нужный 
текст в 
специальном поле ввода, а в расширяемой части Background (Фон) выбрать цвет 
фона 
для текстового фрагмента из открывающегося списка Color (Цвет) (Рис. 4.163). 
Текст, 
который вы введете, в окне документа не отобразится. Его можно будет увидеть 
только 
в браузере. 

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

> В поле открывающегося списка URL введите имя файла geoton.html. 

Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологию 
фреймов, 
разделив экран по вертикали на два окна: в левом отображается меню из файла 
menu.html. а в правом - страницы сайта. Правому фрейму присвоено имя frame. 
Чтобы 
определить, в какой фрейм должна загружаться Web-страница, следует указать его 
имя 
в поле открывающегося списка Target (Цель). 

>• В поле открывающегося списка Target (Цель) введите имя правого фрейма - 
frame. 

Список Target (Цель) станет доступным после того, как вы введете информацию 
в поле URL и перейдете в любое другое попе палитры. 

В поле ввода Alt (Альтернативный) вы можете указать значение атрибута alt тега 
<imo>. Введенный текст будет отображаться вместо графического фрагмента в 
текстовых 
браузерах, а также, если функция загрузки графики выключена, в некоторых 
браузерах в процессе загрузки изображения и как всплывающая подсказка. 

В поле ввода Alt (Альтернативный) введите Главная. 

Нажмите кнопку 0 в правом верхнем углу палитры Slice (Фрагмент) и в появившемся 

меню выберите команду Show Options (Показать параметры). Палитра развернется, 
и вы увидите дополнительные элементы управления (Рис. 4.163). 


Подготовка графики 223 

С помощью элементов управления Dimensions 
(Размеры) можно указать точные координаты X и Y 

f t iJkT4jabfe4j.T^e Мар\ц__ (T) 

левого верхнего угла фрагмента, а также изменить 

Typ*i I Image •; •»• |

его ширину (W) и высоту (Н). Чтобы сохранить про


Name; | m#nu_01 

порции фрагмента при изменении одного из парамет


URL: | geotonhrfnl 

ров - ширины или высоты, следует установить флажок 
Constrain Proportions (Сохранить пропорции). Targets [(тэте 

В поле ввода Status Bar Message (Сообщение в строке 
состояния) можно ввести текст, который будет отображаться 
в строке состояния (Status Bar) браузера при 
установке указателя мыши на данном фрагменте. Если Wi 1160 [pixels 

• •им m * nil in «• « 

это поле ввода оставить пустым, то по умолчанию, в 

f~i Comtrwn Proportions 

строке состояния браузера отображается адрес URL 
связанного с фрагментом документа. ^7 Cell Alignment 

Horiii |Default 

Подобным же образом определим ссылку для вто-

Utrt: (Default 


рого фрагмента изображения с надписью Чем мы 

v Background 

занимаемся? 

Color: | None 

v Щелкните мышью в окне документа на фрагмен


Status Bar Message 

те 02 с текстом Чем мы занимаемся?, чтобы выделить 
его. В палитре Slice (Фрагмент) отобразятся 
параметры этого фрагмента. 


Рис. 4.163. Развернутая палитра 

>• В поле открывающегося списка URL введите имя 

Slice (Фрагмент)

файла - spisok.html, на который фрагмент должен 
ссылаться. 


> В поле открывающегося списка Target (Цель) введите имя правого фрейма - frame,
 
в который должен загружаться файл spisok.html. 

>• В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся? 

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

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

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

> Отпустите клавишу ([sjjjjj. 

Для выделения всех фрагментов вы можете также воспользоваться командой меню 
Select • All Slices (Выделение • Все фрагменты). 

> Выберите команду меню Slices • Link Slices for Optimization (Фрагменты • 
Связать 
фрагменты для оптимизации). Все части изображения будут связаны и в левом 
верхнем 
углу каждой из них появится дополнительный значок-индикатор Щ, указывающий 
на связь. Все значки-индикаторы окрасятся в красный цвет. Это помогает 
идентифицировать 
все связанные фрагменты. 


Создание Web-сайтоз 

224 

Теперь можно выполнить оптимизацию всех фрагментов одновременно. 

> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. 
Будет выполнена оптимизация документа с параметрами, применявшимися при 
последней 
оптимизации. 

v В палитре Optimize (Оптимизация), которая по умолчанию находится в правом 
верхнем 
углу окна, рядом с палитрой Info (Инофрмация) выберите формат GIF. 

> В открывающемся списке Colors (Цвета) палитры Optimize (Оптимизация) выберите 
16. 

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

>- Выберите команду меню File • Output Settings • Background (Файл • Параметры 
вывода • Фон). На экране появится диалог Output Settings (Параметры вывода) 
(Рис. 4.146). 

> Установите переключатель Image (Изображение). 

>• В открывающемся списке BG Color (Цвет фона) выберите Foreground Color (Цвет 
переднего плана). В поле этого списка отобразится синий цвет переднего плана. 

>- Нажатием кнопки ОК закройте диалог Output Settings (Параметры вывода). 

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

> Прежде чем сохранить оптимизируемый документ, переименуйте или переместите из 

папки Web файл menu.html. Если это не сделать, то автоматически созданный при 
сохранении оптимизированных фрагментов HTML-файл с таким же именем будет 
записан поверх существующего файла. 

Сохраним оптимизированные фрагменты изображения. 

>• Выберите команду меню File • Save Optimized (Файл • Сохранить 
оптимизированный 
документ). На экране появится диалог Save Optimized (Сохранение 
оптимизированного 
документа) (Рис. 4.92). 

> Откройте папку Web. 

В процессе сохранения будет автоматически создан HTML-документ, имя которого 
menu 
- предлагается по умолчанию в поле ввода Имя файла (File name). Одновременно 
с файлом HTML будут сохранены также нарезанные фрагменты, так как в 
открывающемся 
списке Тип файла (List files of type) автоматически выбрано HTML and Images (*.
html) 
(HTML и изображения (*.html)). В том случае, если вам нужны только нарезанные 
фрагменты, чтобы вставить их в существующий файл HTML вручную, следует в этом 
открывающемся списке выбрать Images Only (*.gif) (Только изображения (*.gif)). 

В открывающемся списке Slices (Фрагменты) у нижнего края диалога по умолчан ию 
установлено All Slices (Все фрагменты). При этом будут сохранены все нарезанные 

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

> Чтобы настроить параметры создаваемых файлов, выберите значение Other 
(Другие) 
из открывающегося списка Settings (Параметры). На экране появится диалог Output 

Settings (Параметры вывода) (Рис. 4.164). 


Подготовка графики 

• Output XHTML 
г Formatting ———————————————— 

Tags Case: |Lowercase (body) 

S 

Attribute Case: |Lowercase (rowspan) 

и 

Indent; |fate 

и 

Line Endings: |AutQmatic 

—га 

EncodinQ: (Automatic (windows-1251) 

—и 
E Incbde Comments 

И Always Add Alt Attribute 

E Always Quote Attributes 

П Close Al Tags 

E Include Zero Margins on Body Tag 

Рис. 4.764. Диалог Output Settings (Параметры вывода) 
с набором элементов управления HTML 

Во втором сверху открывающемся списке без названия можно выбрать один из 
наборов 
элементов управления: HTML - для форматирования файлов HTML; Saving Files 
(Сохранение 
файлов) - для сохранения файлов изображений; Slices (Фрагменты) - для 
определения 
имен фрагментов, image Maps (Карты навигации), Background (Фон) - для 
установки параметров фона, Saving Files (Сохранение файлов) и Metadata 
(Метаданные) 
— для сохранения метаданных. При выборе каждого набора вид диалога будет 
изменяться, 
отображая соответствующие элементы управления. По умолчанию в диалоге 
отображается набор элементов для форматирования HTML-файлов. 

В открывающихся списках Tags Case (Регистр тегов) и Attribute Case (Регистр 
атрибутов) 
можно выбрать регистр символов для кода HTML: все прописные, все 
строчные, начальные прописные. Это помогает при копировании фрагментов кода в 
другие документы отличать автоматически созданный код от написанного вручную. 

Открывающийся список Indent (Отступы) позволяет определить способ создания 
отступов в строках HTML-кода: используя установки табуляции программы (Tabs), 
с помощью определенного количества пробелов (Spaces) или же, не используя 
отступы 
(None). 

В открывающемся списке Line Endings (Концы строк) выбирается платформа для 
настройки 
совместимости концов строк: Windows (Win), Macintosh (Mac), Unix. 

Установка флажка Include Comments (Включить комментарии) позволяет добавить 
поясняющие 
комментарии в HTML-код. 

При установленном флажке Always Quote Attributes (Использовать кавычки для 
атрибутов) 
значения атрибутов всех тегов будут заключаться в кавычки. 

Нарезанные фрагменты можно поместить в таблицу HTML или разместить их 
в документе, используя язык каскадных таблиц стилей. Если во втором сверху 
открывающемся 
списке без названия выбрать набор элементов управления Slices 
(Фрагменты) (Рис. 4.165) и установить переключатель Generate CSS (Генерировать 
CSS), 

8-1210 


Создание Web-сайтои 

то будут создаваться каскадные таблицы стилей. При этом в открывающемся списке 
Referenced (Ссылка) следует выбрать тип ссылки в коде HTML, определяющей 
положение 
фрагмента. 

Spacer Celt: |Auto (Bottom) 
О Generate CSS 


Рис. 4.165.Диалог Output Settings (Параметры вывода) 
с набором элементов управления Slices (Фрагменты) 

Для использования таблиц HTML следует установить флажок Generate Table 
(Генерировать 
таблицу) и в открывающемся списке TD W&H указать, включать ли в код HTML 
атрибуты ширины и высоты ячеек таблиц: Always (Всегда), Never (Никогда), Auto 
(Автоматически). 
С помощью открывающегося списка Empty Cells (Пустые ячейки) можно 
определить, как заполняются пустые ячейки. 

Туре 
© Client-Side 


О NCSA Server-Side 
О CERN Server-Side 
О dent-Side and NCSA Server-Side 
О Chsnt-Slde and CERN Server-Side 


f
f
Placement О 
Top О Body ©Bottom 

Рис. 4.166.Диалог Output Settings (Параметры вывода) с набором 
элементов управления Image Maps (Навигационные карты) 


Подготовка графики 

Для набора элементов управления навигационных карт (Image Maps) (Рис. 4.166) 
можно 
выбрать тип карты, а с помощью переключателей Placement (Положение) - 
определить 
в каком месте HTML-кода должен быть помещен тег <тар>. Подробнее о картах 
навигации 
будет рассказано в следующем опыте. 

>• Для настройки параметров файлов сохраняемых изображений во втором сверху 
открывающемся 
списке без названия выберите Saving Files (Сохранение файлов). 
В диалоге отобразятся соответствующие элементы управления (Рис. 4.167). 

Output Selling: 

Preset: [Custom 

JJ 

|savlng Files 

Optimized Files 


И Put Images in Folder: [images 

• Use Long Чепзгпе Extensions (Jpeg, .wbmp) 
E3 Copy Background Image when Saving 
•File Naming 
| slice name |»Jj + | hyphen bJ+ | trigger name [» J + 
| underscore |»| + | rollover state |none ц | + 
|none 13 + |none N+ l-ext E| 
Example: MySlice-MyTrigger_over.gif 
- Filename Compatibility -
BWMcws В Mac OS 9 0 Unix 

Рис. 4.167. Диалог Output Settings (Параметры вывода) 
с элементами управления Saving Files (Сохранение файлов) 

При установленном флажке Put Images in Folder (Поместить изображения в папку) 
все 
фрагменты будут сохранены в папке, имя которой указано в поле ввода справа, по 
умолчанию 
- images. Вы можете указать другую папку или же сбросить флажок, чтобы 
сохранять 
изображения в той же папке, что и HTML-файл. 

Установленный флажок Copy Background Image when Saving (Скопировать фоновое 
изображение при сохранении) дает указание программе в процессе сохранения 
скопировать 
также фоновое изображение, определенное в наборе установок Background (Фон). 

Открывающиеся списки File Naming (Именование файлов) позволяют выбрать элементы,
 
комбинация которых составит имена по умолчанию для всех файлов. Эти элементы 
включают: имя документа (doc. name), имя фрагмента (slice name), состояние 
эффекта 
Rollover (rollover state), дату создания файла в различных форматах (date), 
номер 
фрагмента (trigger no.), расширение имени файла (.ext), знаки пунктуации - 
дефис 
(hyphen), символ подчеркивания (underscore), пробел (space) и др. Пример 
составленного 
имени (Example) приведен под открывающимися списками. 

Установка флажков Filename Compability (Совместимость имен файлов) делает имена 

файлов совместимыми с операционными системами Windows, Macintosh (Mac OS) и 
UNIX. 

> Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК. 
Программа 
возвратит вас к диалогу Save Optimized (Сохранение оптимизированного документа).
 


Создание Web-сайтов 

>• Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут 
сохранена 
в указанных папках с установленными параметрами. 

>• Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом верхнем 

углу его окна. 


Проверим созданное меню. 

> Откройте в программе просмотра Web-страниц файл index.html из папки Web. 

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

> Устанавливайте указатель мыши на разных пунктах меню. При этом будет 
изменяться 
цвет фона соответствующей надписи. 

> Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм будет 
загружен файл spisok.html. 

> Щелкните мышью на пункте меню Главная страница. В правый фрейм будет загружен 

файл geoton.html. 

В автоматически созданном программой файле menu.html таблица с фрагментами 
изображения находится Между комментариями <l— ImageReady Preload Script 
(menu.psd) --> и <!-- End ImageReady Slices -->. При необходимости этот 
фрагмент кода можно скопировать в буфер обмена и затем вставить в любой 
HTMLдокумент. 
Меню будет работать. 

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

В этом опыте мы создали навигационную панель, разрезав изображение на фрагмен~
ты, применив к ним эффект Rollover (Наведение) и поместив фрагменты в ячейки 
автоматически созданной HTML-таблицы. Но создать карту навигации можно и дру


гим способом. 

JV&2.1. Создаем карту навигации 

Кроме рассмотренных в предыдущем опыте, применяются карты навигации иного типа, 

так называемые Image Map, - изображения, не разрезанные на части, но отдельные 
элементы которых содержат ссылки на другие Web-страницы. Подобные навигационные 

карты (Image Map) для больших изображений в настоящее время применяются реже, 
чем 
фрагментированные, так как время загрузки таких изображений достаточно велико. 
Предпочтительнее использовать для ссылок фрагментированные изображения. Вместе 
с тем, навигационные карты (Image Map) удобно использовать для организации 
ссылок 
с фрагментов изображения сложной формы. Например, так можно делать ссылки с 
изображений отдельных деталей машин или узлов механизмов. Если требуется 
назначить 
ссылки с участков изображения не прямоугольной, а круглой или неправильной 
формы, 
то следует отдать предпочтение навигационной карте (Image Map). 


Подготовка графики 229 

Adobe ImageReady предлагает два способа создания навигационных карт: с помощью 
специальных инструментов, в частности, Щ ] - Rectangle Image Map Tool (P) 
(Инструмент 
«Прямоугольная область карты навигации» (Р)), или же из слоев изображения. 
Используя инструменты, вы просто рисуете, так же, как и инструментами выделения,
 
область определенной формы: прямоугольной, круглой или многоугольной, а 
затем назначаете этой области адрес URL. 

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

Создадим практически навигационную карту из слоев, воспользовавшись для этого 
фотографией 
Samolet.psd 

> Откройте файл Samolet.psd в программе Adobe Photoshop. 

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

>• Щелчком мыши на ярлыке Paths (Контуры) откройте эту палитру. 

>• Щелкните мышью на контуре Path 1 в палитре Paths (Контуры), чтобы выделить 
его. 
На изображении вокруг самолета появится контур. 

> Нажмите кнопку | о | - Loads path as a selection (Загрузить контур, как 
выделенную 
область) в нижней части палитры Paths (Контуры). Будет создана выделенная 
область. 

Скопируем выделенную область в буфер обмена и затем вставим содержимое буфера 
обмена в эту же область на новый слой. 

v Щелкните мышью на ярлыке Layers (Слои), чтобы отобразить эту палитру. 

>• Выберите команду меню Edit • Сору (Правка • Копировать). Выделенный фрагмент 

будет скопирован в буфер обмена. 

>• Выберите команду меню Edit • Past Into (Правка • Вставить в). Изображение из 
буфера 
обмена будет вставлено в выделенную область и помещено на новый слой. Этот 
слой - Layer 1 - появится в палитре Layers (Слои). Выделение будет отменено. 

Напомним, что созданный таким образом слой Layer 1 почти полностью прозрачен, 
за 
исключением изображения самолета. Чтобы убедиться в этом, выключите, а затем 
снова 
включите отображение слоя Background (Фон). 

Для карты навигации нам нужен еще один слой, такой же, как и слой Background 
(Фон) 
т.е. его копия. Создадим этот слой следующим образом: 

>- В палитре Layers (Слои) щелчком мыши выделите слой Background (Фон). 


Создание Web-сайтои 

Нажмите кнопку 0 в правом верхнем 
углу палитры Layers (Слои) и в поя


Duplicate: Background 

вившемся меню выберите команду 

As: [Background copy 

Duplicate Layer (Дублировать слой). 
На экране появится диалог Duplicate 


Document: j Samolet.psd 

Layer (Дублировать слой) (Рис. 4.168), в 
поле ввода которого As (Как) предлага-J 
ется имя для слоя - Background copy 
(Копия Background). 


Puc. 4.168.Диалог Duplicate Layer (Дубли


Нажав кнопку ОК, закройте диалог ровать слой) 
Duplicate Layer (Дублировать слой). В палитре Layers (Слои) над слоем 
Background 
(Фон) появится новый слой - Background copy (Копия Background). 

Теперь, когда необходимые слои имеются, можно переключиться в программу Adobe 
ImageReady и создать карту навигации. В общем случае все операции подготовки 
слоев для карты навигации можно выполнять и в Adobe ImageReady. Но, к сожалению,
 
в этой программе отсутствуют средства для работы с контурами. Поэтому для 
создания выделенной области из контура мы вынуждены воспользоваться программой 
Adobe Photoshop. 

Нажмите кнопку Edit in ImageReady (Shift+Ctrl+M) (Редактировать в 
ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). На 
экране 
появится рабочее окно Adobe ImageReady, и в нем откроется документ Samolet.psd. 


Теперь необходимо назначить каждому слою ссылку 
на Web-страницу. Эта операция выполняется с помощью 
палитры Image Map (Карта навигации). 

Щелкните мышью на ярлыке Image Map (Карта на


_ш

вигации) в окне палитр в левом нижнем углу рабочей 
области. Палитра Image Map (Карта навигации) 
появится на экране (Рис. 4.169). 

U Dimensions 

Создадим сначала ссылку на Web-страницу для слоя 
Layer 1. 

Puc. 4.169. Палитра Image Map 
>• В палитре Layers (Слои) щелкните мышью на (Карта навигации) 
слое Layer 1, чтобы выделить его. 

>• Выберите команду меню Layer • New Layer 
Based Image Map Area (Слой • Новая область 
карты навигации из слоя). Элементы управления 
палитры Image Map (Карта навигации) станут активными, 
и в нижней части палитры, в ее расширяемой 
части, Layer Based Settings (Параметры АН: 
слоя), появится открывающийся список Shape 

^9Layer Based Sellings 

(Форма) (Рис. 4.170). 

Sh»p«: 

В открывающемся списке Shape (Форма) следует 
выбрать форму участка изображения, которому будет 
назначена URL-ссылка. В отличие от нарезанных 

Puc. 4.170. Развернутая палитра

фрагментов, форма которых может быть только пря


Image Map (Карта навигации)

моугольной, карты навигации, кроме прямоугольной 


Подготовка графики 

(Rectangle), могут иметь также участки круглой (Circle) и многоугольной 
(Polygon) 
формы. Причем форма и размер этих участков, реагирующих на щелчок мыши и 
называемых 
«горячими зонами» (hotspots), автоматически подбирается так, чтобы они в 
максимальной 
степени соответствовали непрозрачной части слоя. При выборе многоугольной 
(Polygon) формы Adobe ImageReady создает контур в виде многоугольника вокруг 
непрозрачной области. Если же вы выберете прямоугольную (Rectangle) или круглую 

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

Для выбранного прозрачного слоя Layer 1 с непрозрачным изображением самолета 
лучше 
всего подойдет форма области ссылки в виде многоугольника, который оконтурит 
фигуру самолета. 

> В открывающемся списке Shape (Форма) выберите 
Polygon (Многоугольник). Под этим списком 
появится поле ввода с ползунковым регулятором 
Quality (Качество) (Рис. 4.171). В окне документа 
форма области, окружающей изображе-Targiti (_ 
ние самолета, станет многоугольной. 

Alii Г 

Параметр Quality (Качество) позволяет указать сте


^Layer Based Settings 

пень отклонения формы многоугольника от формы 

непрозрачной части слоя. 

>• Нажмите кнопку |Т| у правого края поля ввода 
Quality (Качество) и с помощью появившегося Рис. 4.171. Для области ссылки 
ползункового регулятора установите значение 

выбрана форма 
этого параметра 100, указав таким образом, что Polygon (Многоугольник) 
форма многоугольника должна точно соответствовать 
форме непрозрачного участка слоя, т.е. форме самолета. Щелкните мышью на 
поле ввода Quality (Качество), чтобы закончить ввод параметра и скрыть 
ползунковый 
регулятор. 

Теперь форма области в окне документа точно повторяет контур самолета. 

Изображению на выбранном слое должна быть сопоставлена ссылка на Web-страницу, 
адрес которой следует ввести в поле открывающегося списка URL. 

> В поле открывающегося списка URL введите имя файла geoton.html. 

Открывающийся список Target (Цель) предназначен для указания имени фрейма, в 
который 
будет загружаться документ, адрес которого указан параметром URL. 

В поле ввода Alt (Альтернативный) можно указать альтернативный текст, который 
будет 
отображаться в текстовых браузерах и как всплывающая подсказка при установке 
указателя 
мыши на области карты навигации, которой сопоставлен URL. 

> В поле ввода Alt (Альтернативный) введите текст: Главная страница. 

> Теперь установим параметры для следующего слоя - Background copy. 


232 Создание Web-сайтов 

>• Щелкните мышью на слое Background copy в палитре Layers (Слои), чтобы 
выделить 
его. 

>• Выберите команду меню Layer • New Layer Based Image Map Area (Слой • Новая 
область карты навигации из слоя). В палитре Image Map (Карта навигации) 
отобразятся 
элементы управления для новой области карты навигации. 

Для выбранного слоя лучше всего подойдет прямоугольная форма области ссылки, т.
е. 
вся область документа за пределами изображения самолета. 
> Убедитесь, что в открывающемся списке Shape (Форма) палитры Image Map (Карта 
навигации) выбрано Rectangle (Прямоугольник). 

>• В поле ввода URL палитры Image Map (Карта навигации) введите имя файла 
spisok.html. Это имя появится в палитре Layers (Слои) под названием слоя 
Background copy. 

> В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся? 
Так как область карты навигации для слоя Background copy создана после области 
для 

слоя Layer 1, имеет большие размеры и перекрывает последнюю, то ее - область 
карты 
навигации для слоя Background copy - нужно переместить на задний план. 
> В палитре Web Content (Содержимое Web) перетащите мышью слой с одним само


летом на самый верх. Его имя изменится на lmageMap_02. 
Подготовленную таким образом карту навигации следует оптимизировать. 
> Если палитра Optimize (Оптимизация) отсутствует на экране, выберите команду 
ме


ню Window • Optimize (Окно • Оптимизация). 

>• В открывающемся списке Settings (Установки) палитры Optimize (Оптимизация) 
выберите набор параметров JPEG (JPEG). Параметры, соответствующие этому набору, 

отобразятся в палитре. 

>• В открывающемся списке Quality (Качество) выберите High (Высокое). 
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. 
Будет выполнена оптимизация с выбранными параметрами. 
>• Сравните оригинальное и оптимизированное изображения и, если считаете нужным,
 

откорректируйте параметры оптимизации. 
Сохраним оптимизированное изображение. 
>• Выберите команду меню File • Save Optimized (Файл • Сохранить оптимизирован


ный документ). На экране появится диалог Save Optimized (Сохранение 
оптимизированного 
документа) (Рис. 4.92), в поле ввода Имя файла (File name) которого указано 
имя сохраняемого документа - Samolet.html. 

> Откройте папку Web для сохранения файла. 
> Убедитесь, что в открывающемся списке Тип файла (List files of type) выбрано 
HTML 
and Images (\html) (HTML и изображения (*.html)), чтобы сохранить HTML-код с 
картой навигации. 

>- Закройте диалог Save Optimized (Сохранение оптимизированного документа), 
нажав 
кнопку Сохранить (Save). В папке Web будет сохранено изображение Samolet.jpg и 
файл Samolet.html с HTML-кодом карты навигации. 

v Закройте программы Adobe ImageReady и Adobe Photoshop. 


Подготовка графики

Проверим теперь, как работает карта навигации. 

>• Откройте в программе просмотра Web-страниц файл Samolet.html из папки Web. 

>• Перемещайте указатель мыши по фотографии. В зависимости от положения 
указателя 
мыши - на изображении самолета на переднем плане или вне его, в строке 
состояния 
(Status Bar) будет отображаться адрес URL, сопоставленный данному участку 
карты навигации. Вблизи указателя мыши будет появляться всплывающая подсказка. 

>• Щелкните мышью на изображении самолета. Это изображение будет выделено 
многоугольным 
контуром, произойдет переход по ссылке, и в окно браузера будет загружен 
файл geoton.html. 

>• Нажмите кнопку Back (Назад) на панели инструментов программы просмотра. 
Программа возвратит вас к предыдущему документу - Samolet.html. 

>• Щелкните мышью за пределами изображения самолета. Теперь будет выделен 
прямоугольный 
контур всей фотографии, и в окно браузера загрузится файл spisok.html. 

> Как видите, карта навигации работает правильно. Посмотрим теперь, как 
выглядит 
автоматически созданный документ Samolet.html. 

>• Откройте в программе Блокнот (Notepad) файл Samolet.html из папки Web. 

Обратите внимание, что код карты навигации располагается между комментариями 
<!— ImageReady Slices (Samolet.psd) —>и<! — End ImageReady Slice s —>. 

HTML-код навигационной карты включает элемент <IMG>, загружающий изображение 
Samolet.jpg, который с помощью атрибута USEMAP связывается с навигационной 
картой, 
определяемой элементом <МАР>. .,</МАР>. ИМЯ карты задается атрибутом NAME. 
Для указания областей, реагирующих на щелчок мыши, используются два элемента 
<AREA>, в которых атрибут SHAPE определяет форму области, ALT - альтернативный 
текст, который появляется в неграфических браузерах и как всплывающая подсказка 
при 
установке указателя мыши на области изображения, которой сопоставлен URL, 
COORDS координаты 
области, HREF — адрес URL ссылки. 

>• Закройте программу Блокнот (Notepad). 

> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу. 

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

В серверных навигационных картах координаты точки щелчка передаются серверу, 
определенному 
с помощью атрибута href тега <а>. После обработки координат сервер 
выполняет предусмотренные действия. 

Клиентские навигационные карты более удобны, так как доступны пользователям 
неграфических браузеров и при отключенной загрузке графики. По умолчанию 
Adobe ImageReady создает клиентскую навигационную карту. Изменить тип 
создаваемой 
карты можно с помощью переключателей Туре (Туре) группы элементов 
управления Image Maps (Карты навигации) диалога Output Settings (Параметры 
вывода) 
(Рис. 4.166), который вызывается из диалога Save Optimized (Сохранение 
оптимизированного 
документа) или командой меню File • Output Settings • HTML 
(Файл • Параметры вывода • HTML). 


ГЛАВА 5. 

Анимация на Web-страницах 

Для пользователей Интернета уже давно стали привычными появляющиеся почти на 
каждой 
Web-странице «живые» мультипликационные картинки. Именно такими, анимационными, 

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

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

ним кадра. Каждый кадр отображается в течение определенного промежутка времени. 

Если кадров достаточное количество и время их отображения невелико, то 
создается 
иллюзия движения. 

В прошлом, в традиционной анимации кадры рисовались «вручную». В последние годы 

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

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

В настоящее время существует несколько технологий создания анимации для WWW: 
анимационный (animated) GIF, Flash, Java и JavaScript. Из этих технологий 
анимационный 
GIF является, пожалуй, самым простым в создании, и практически любой совреме 
нный 
браузер может его показать. Формат GIF позволяет размещать в одном файле 
несколько 
кадров или фреймов (frames) с изображениями для их последовательного вывода 
на экран. В отличие от обычного фильма, где длительность анимации определяется 
скоростью 
воспроизведения, для каждого кадра GIF-анимации может быть задана длительность 
его показа на экране, а для всей анимации может быть указано количество 
повторений. 
Кроме того, в отличие от обычного фильма, изображения, содержащиеся в кадрах 
GIF-анимации, не обязательно должны быть одного размера. Для изображения 
каждого 
кадра или слоя анимации вы можете установить индивидуальный размер и 
расположить 
его по своему усмотрению, независимо от других слоев. Анимационные GIF-файлы 
могут 
быть легко подготовлены в программе Adobe ImageReady. Увидеть анимацию такого 
типа можно, например, на сайте по адресу http://acidic-gif.narod.ru/ и на 
многих других 
сайтах, адреса которых вы можете узнать, задав поиск фразы «GIF-анимация» на 
любом 
из поисковиков в Интернете (Яндекс, Google и т.п.). 


Анимация на Web-страницах

 235 

В отличие от GIF-анимации, которая позволяет размещать в файле только 
изображения, 
Flash-технология предоставляет возможность объединить в одном формате анимацию, 

звук, текст, графику и, кроме того, элементы интерактивности, которые дают 
возможность 
пользователю или посетителю сайта определенным образом изменять данные на 
Web-странице, превращая его из наблюдателя в активного участника. 
Интерактивными 
элементами сайта могут быть игры, например: карточные, рулетка, тир, 
крестики-нолики, 
«морской бой», онлайновые обучающие программы, викторины, тесты, калькуляторы и 

т.п. Примеры такой анимации вы увидите на сайтах www.legus.ru/, www.flasher.ru/,
 
www.avestadesign.ru/. Создается подобная анимация с помощью программы 
Macromedia 
Flash. К сожалению, для просмотра Flash-анимации вам, скорее всего, придется 
установить 
дополнительный подключаемый модуль (Plug-in) для вашего браузера. Именно по 
этой причине не имеет смысла использовать Flash-анимацию при создании серьезных 

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

Еще один способ создания анимации - посредством программирования на языках Java 
и 
JavaScript. Эти языки позволяют разрабатывать программы, встроенные в документы 

HTML и называемые апплетами, которые выполняются браузерами на компьютерах 
пользователей. И, конечно же, возможности Java и JavaScript значительно шире, 
чем подготовка 
анимационных картинок. Они позволяют создавать масштабные Интернетприложения. 
Примеры Java-апплетов можно увидеть на сайтах http://reality.sgi.com/, 
www.bulletproof.com/. Создание анимации с помощью Java и JavaScript также 
нельзя 
назвать подходящим для серьезных сайтов, так как пользователи очень часто 
отключают 
поддержку Java и JavaScript в своих браузерах по соображениям безопасности. Так 
как с 
помощью программ на указанных языках можно скопировать или испортить файлы на 
вашем компьютере. 

Учитывая все вышесказанное, можно с уверенностью сказать, что самый простой, 
надежный 
и эффективный способ разместить анимацию на своих Web-страницах - это 
использовать 
формат GIF. 

Структура файла GIF89a 

Чтобы лучше понять, как работает GIF-анимация, следует представлять структуру 
фор


мата GIF89a. Файл формата GIF89a состоит из блоков, расположенных в 
определенной 

последовательности. Выделяют блоки трех типов: 

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

палитры; 
• специальные блоки - содержат комментарии и прикладные расширения, которые 
никак 
не влияют на изображение, но могут обрабатываться прикладными программами 
по их усмотрению. Среди подобных блоков особо следует выделить прикладной блок 
Netscape Loop. Он присутствует практически в каждой анимации. Если браузер, 

Создание Web-сайтов 

не только Netscape Navigator, видит этот блок, он проигрывает анимацию не один 
раз, 

а столько, сколько указано, или бесконечно. 
Общая схема следования этих блоков приблизительно такова: 

• заголовок - GIF87a или GIF89a - определяет формат файла; 
• описание логического экрана - задается размер экрана, на котором будет 
проигрываться 
анимация; 
• описание глобальной палитры - необязательно, но крайне желательно; 
• произвольное количество блоков изображения, в том числе текстовых, или пар 
блоков: 
управление графическими расширениями - изображение. Блок управления графическим 

расширением может содержать в себе указание на локальную палитру, расположение 
на логическом экране, задержку и способ удаления изображения и оказывает 
влияние только на следующий непосредственно за ним блок изображения; 
^ завершитель - признак конца. 
Комментарии и специальные блоки, если они есть, могут располагаться в любом 
месте 
файла, но только после описания глобальной палитры или после описания 
логического 
экрана. Блок расширения Netscape Loop должен следовать непосредственно за 
глобальной 
палитрой. 

Использование GIF-анимации 

В следующих главах вы узнаете, как создавать анимацию в различных форматах, в 
том 
числе и GIF-анимацию. Здесь же отметим, что если у вас уже есть готовая 
GIF-анимация, 
то процедура помещения ее на Web-сайт ничем не отличается от помещения туда же 
простого, 
не анимированного GIF-файла. Она выполняется с помощью тэга <img> и подробно 
рассмотрена в предыдущих главах. 

К несомненным достоинствам GIF-анимации можно отнести следующие ее особенности: 


•/ небольшой размер файла за счет оптимизации; 
• не требуется специальных программ для просмотра; 
• для проигрывания не требуется постоянной связи с сервером; 
• простой способ помещения на Web-страницу. 
Но у GIF-файлов есть и недостатки: 
• палитра не превышает 256 цветов; 
• сжатие фотографических изображений гораздо ниже, чем в формате JPEG 
Стандарт GIF89a - весьма мощный инструмент для создания Web-анимаций, однако 
необходимо 
учитывать тот факт, что если некоторые специальные графические программы 
и поддерживают этот стандарт в полном объеме, то это не относится к некоторым 
браузерам, 
поэтому, применяя динамические GIF-файлы для Web, лучше ориентироваться не 
на сам стандарт, а на возможности браузеров по его поддержке. 

Учитывая проблемы совместимости программ просмотра, при создании анимационных 
GIF-файлов рекомендуется соблюдать следующие правила: 

• желательно не использовать локальные палитры: в некоторых случаях это 
приводит 
к неправильному отображению цветов; 

Анимация на Web-страницах

• прозрачный цвет следует определять глобально; локальный прозрачный цвет не 
поддерживается; 
i/ не всеми браузерами поддерживается замена изображения предыдущим; 

• если изображение не умещается на логическом экране, то может произойти 
аварийное 
завершение работы браузера; 
^ в некоторых версиях браузеров кадры проигрываются не быстрее, чем с задержкой 

0,34 секунды; 

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

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

идет об анимации в одном файле нескольких объектов. 

Готовые бесплатные анимационные картинки для использования на своих 
Web-страницах 
вы можете найти, например, по адресам: 

http://www.free-clip-art.net 
http://www.free-graphics.com 
http://www.animation-central.com 

http://www.animationlibrary.com 

http://www.animationcity.net 


ГЛАВА 6. 

Сйзлаем анимацию с помошью 
Adobe ImageReady 

Создание анимации в Adobe ImageReady базируется на использовании слоев. Каждый 
элемент анимации помещается на собственный слой. Это позволяет изменять 
положение 
и вид элемента в серии кадров, используя команды и параметры палитры Layers 
(Слои). 
Для создания кадров анимации из оригинального многослойного изображения 
совместно 
с палитрой Layers (Слои) используется палитра Animation (Анимация). С ее 
помощью 
вы можете назначать каждому кадру время задержки, создавать новые кадры, 
автоматически 
генерировать промежуточные состояния на основании начального и конечного 
изображений, определять количество повторений анимации и др. 

Следует отметить, что в программе Adobe Photoshop версии CS2 также 
можно пользоваться палитрой анимации, не переходя в программу 
ImageReady. Тем не менее в программе Adobe ImageReday версии CS2 
палитра анимации также присутсвует. 

i. Знакомство с палитрой «Анимация» 
С программой Adobe ImageReady мы уже достаточно подробно познакомились в опытах 

предыдущей главы. Рассмотрим теперь процесс подготовки в ней анимации. И в 
качестве 
примера «оживим» баннер, который мы создали в предыдущей главе и сохранили в 
файле 
Geoton.psd. Но прежде всего запустим программу Adobe ImageReady. 

>• Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и в появившемся 
главном 
меню Windows выберите команду Программы • Adobe ImageReady CS (Programs 

• Adobe ImageReady CS). Программа будет запущена, и на экране появится ее 
рабочее 
окно. 
Как уже отмечалось, подготовка анимации выполняется с помощью палитры Animation 

(Анимация). 

>• Выберите команду меню Window • Animation (Окно • Показать Анимация). В 
нижней 
части рабочего окна появится палитра Animation (Анимация) (Рис. 6.1). 

_*}•** <\ •• 

Рис. 6.1. Палитра Animation (Анимация) 

Пока в программе Adobe ImageReady не будет создан новый или открыт существующий 

документ, элементы управления данной палитры будут недоступны. Поэтому сразу 
откроем 
файл Geoton.psd. 


Создаем анимацию с помощью Adobe ImageReady 

> Выберите команду меню File • Open (Файл • Открыть). На экране появится диалог 

Открытие файла (Open) (Рис. 6.2). 
• Откройте папку,
выделите его. 
в которой вы сохранили файл Geoton.psd, и щелчком мыши 

^ Camtasia Studio 
s a Filet 
Books 
eceived Files 
.ЭМ» Virtual Machines 

^ аталог CD 

3 Мои внаеозапмси 
MOM рисунки 
Мои рисинки 
Моя музыка 

Имя файла; J-jj | Открыть 

Inn »ай/кж [д! Readable Fonnals Отмена 

В 

Рис. 6.2. Диалог Открытие файла (Open) 

Нажмите кнопку Открыть (Open). Диалог Открытие файла (Open) закроется. 
В рабочем окне программы Adobe ImageReady появится окно документа Geoton.psd 
(Рис. 6.3). 

Рис. 6.3. Окно документа Geoton.psd 
:ВНН шшяшш•Е 

| | Aninutioi 

1 
1 
. (ч 
[• Forever ч 

«If 1 %. I 5J 9 Ih. 

Рмс. 6.4. Палитра Animation (Анимация) с первым кадром анимации 


Создание Web-сайтов 

Мы уже говорили, что подготовка анимации в Adobe ImageReady заключается в 
создании 
последовательности кадров, для каждого из которых определяется изображение, 
время: 
задержки и другие параметры. Первый кадр этой последовательности создается про 
граммой автоматически и уже находится в палитре Animation (Анимация) с 
миниатюрой 
и ярлыком 1 в левом верхнем углу (Рис. 6.4). Этот кадр включает все видимые 
слои активного 
рисунка. 

У нижнего края палитры Animation (Анимация) расположены кнопки, управляющие 
созданием 
и проигрыванием анимации. Эти кнопки имеют следующее назначение. 

"г - Selects looping options (Выбор параметров повторения) - открывает меню, с 
помощью 
которого вы можете выбрать количество повторений анимации. Выбранный параметр 
отображается слева от значка -г. По умолчанию это - Forever (Непрерывно), 
т.е. проигрывание анимации повторяется без перерыва. 

R<| - Selects first frame (Выбор первого кадра) - переход к первому кадру 
анимации. 

RJT]- Selects previous frame (Выбор предыдущего кадра) - переход к предыдущему 
кадру 
анимации. 

П>~1- Plays/Stops animation (Проигрывание/Остановка анимации) - включает 
проигрывание 
анимации. После начала воспроизведения изображение кнопки | > | меняется на 
[~Н~|, нажатие которой прерывает воспроизведение анимации. 

Щ>1 - Selects next frame (Выбор следующего кадра) - переход к следующему кадру. 

I«у I- Tween (Создание промежуточных кадров) - автоматически генерирует 
промежуточные 
кадры между двумя указанными. 

I 5) | - Duplicates current frame (Дублирование текущего кадра) - создает копию 

выбранного кадра. 

I 9 | - Deletes selected frames (Удаление выбранных кадров) - удаляет выбранные 
кадры. 

В правом верхнем углу палитры Animation (Анимация) находится кнопка 0 , 
открывающая 
доступ к меню палитры (Рис. 6.5). С помощью команд этого меню можно создавать, 
удалять, копировать, вставлять и выделять кадры, генерировать промежуточные 
кадры, оптимизировать анимацию и выполнять некоторые другие операции. 

Dock (о Palette Well 

New Frame 

D*M*FI*M 
DoMtt АммЫйт 

Copy Frame 
Past* Fram... 

SchctMFtMM* 

Tmn.. 

R*vwt* FIMM* 

Optimize Animation... 

Make Flames From Layers 
Flatten Frame* Into Layers 

Create Layer for Each New Frame 

• New Layers Visible in All States/Fra mes 
Palette Options... 

Рис. 6.5.Меню палитры Animation (Атшация) 


Создаем анимацию с помощью Adobe ImageReady 

Процесс подготовки анимации в Adobe ImageReady очень прост. В палитре Animation 

(Анимация) последовательно создаются кадры. Графическое содержимое каждого 
кадра 
определяется с помощью палитры Layers (Слои). При этом вы можете использовать 
все 
доступные средства редактирования. Для каждого кадра устанавливается 
длительность 
отображения на экране, которую можно изменять в широких пределах. При 
необходимости 
между двумя любыми кадрами автоматически генерируется любое количество 
промежуточных 
кадров для создания эффекта постепенного изменения. Причем такое постепенное 
изменение можно создавать для прозрачности, эффектов и положения объектов. 
И наконец, указывается количество повторений проигрывания анимации в браузере, 
которое 
определяется целым числом или может быть непрерывным. На заключительном 
этапе анимация оптимизируется и сохраняется в формате GIF. 

€mvr.<m J№2. Сменяющиеся кадры 

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

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

Напомним, что анимационные GIF-файлы - это последовательность кадров с заданной 
длительностью. 
Эти кадры в Adobe ImageReady создаются из слоев. Слои же, в свою очередь, 
следует предварительно подготовить в самой программе или же в Adobe Photoshop. 

Создадим эффект анимации баннера из файла Geoton.psd таким образом, чтобы 
надписи 
Вам нужна локальная сеть? и Заходите СЮДА! последовательно сменяли друг друга 
через определенные промежутки времени и чтобы рисунок открытой двери появлялся 
после надписи Заходите СЮДА!. 

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

Lock. 

>• Увеличьте высоту палитры Layers (Слои), чтобы в 

! Layer 4 

ней были видны все имеющиеся слои (Рис. 6.6). BID 
BIG 


Благодаря наличию значков с изображением открытого 

Ff] Layer 2

глаза -§5, вы можете выключить и включить отображение BID 
слоев и эффектов на рисунке и текущем кадре анимации [flLayer 
Effects 

и таким образом указать, программе, что должно отобра


U Drop Shadow 

жаться на данном кадре. Для первого кадра мультиплика


Q Bevel and Emboss 

ции следует выключить отображение слоя Layer 3 с над


'™— i Background Q Г^" 

писью Заходите СЮДА! и слоя Layer 4 с рисунком две-SID 
-«1 © . IE S ^g 

ри, оставив остальные слои включенными. 

Рис. 6.6. Слои в палитре 
^ слева от миниатюры слоя Layer 3. Этот значок Layers (Слои) 
исчезнет. Указанный слой на рисунке и первом кадре 
анимации станет невидимым. 

> Щелкните мышью на значке с изображением глаза 


Создание Web-сайтоз 

> Подобным же образом, щелчком мыши, выключите отображение слоя Layer 4. 

Включенными должны остаться только слои Background, Layer 1, Effects (Эффекты) 
и 

Layer 2. Эти слои и будут отображаться на первом кадре мультипликации. 

Теперь, когда мы определили изображение для первого кадра анимации, следует 
создать 

следующий, второй кадр. 
>• Нажмите кнопку I 60 | - Duplicates current frame (Дублирование текущего 
кадра) 
в нижней части палитры Animation (Анимация). В ней появится и будет выделен 
темной 
рамкой второй кадр (Рис. 6.7). Темное выделение указывает на то, что теперь 
этот 
кадр активный, и к нему будут относиться все операции редактирования. 

Рис. б. 7. Второй кадр анимации 

Изображение на втором кадре полностью совпадает с первым, так как был создан 
дубликат 
кадра. И теперь это изображение следует изменить. Для текущего кадра выключим 
отображение слоя Layer 2 с текстом Вам нужна локальная сеть? и включим 
отображение 
слоя Layer 3 с надписью Заходите СЮДА! 

>• Щелкните мышью на значке .5 слева от миниатюры слоя Layer 2. Этот значок 
исче$нет. 
Указанный слой будет выключен и надпись Вам нужна локальная сеть? на рисунке 
и первом кадре анимации исчезнет. 

>• Щелкните мышью в палитре Layers (Слои) в крайнем левом пустом поле Indicates 

layer visibility (Индикация видимости слоя), слева от названия слоя Layer 3. В 
этом 
поле появится значок с изображением открытого глаза ф . Слой Layer 3 будет 
включен, 
и надпись Заходите СЮДА! отобразится на рисунке в окне документа и на миниатюре 

второго кадра. 

Добавим еще один кадр анимации. 

>• Нажмите кнопку 0 в правом верхнем углу палитры Animation (Анимация) и в 
появившемся 
меню выберите команду New Frame (Новый кадр), В палитре Animation 
(Анимация) появится и станет активным третий кадр, который представляет собой 
копию второго (Рис. 6.8). 

Рис. 6.8. Создан новый кадр 


Создаем анимацию с помощью Adobe ImageReady _^ _ 243 

Для текущего кадра включим дополнительно отображение слоя Layer 4 с рисунком 
двери. 

> Щелкните мышью в поле Indicates layer visibility (Индикация видимости слоя) 
слоя 
Layer 4 палитры Layers (Слои), чтобы включить его отображение. 

Теперь в окне документа и на третьем кадре анимации должны отображаться все 
слои, за 
исключением слоя Layer 2. 

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

Удалить любой кадр или группу кадров из палитры Animation (Анимация) можно с по


мощью кнопки | V 1 -Deletes selected frames (Удаление выбранных кадров), 
предвари


тельно выделив их щелчками мыши при нажатой клавише liShiftl, если кадры 
смежные 

(в этом случае достаточно щелкнуть мышью только на крайних кадрах), или при 
нажатой 

клавише li ctr 4 , если кадры несмежные. Удалить выбранные кадры можно также 
коман


дой меню Delete Frame (Удалить кадр) палитры Animation (Анимация). 

J\@3. Просмотр и настройка параметров «ролика» 

Время задержки на экране каждого кадра по умолчанию равно 0 (ноль) секунд. И 
это 
значение -0 sec. -отображается в палитре Animation (Анимация) под миниатюрой 
каждого кадра. Если воспроизводить анимацию с такой задержкой, то кадры 
анимации 
будут сменять друг друга слишком быстро. Но время задержки можно легко изменить.
 
Посмотрим, как изменить этот параметр одновременно для всех кадров. 
Предварительно 
кадры анимации нужно выделить. Выделение любого кадра осуществляется 
простым щелчком мыши на кадре. Чтобы выделить несколько кадров, следует 
удерживать 
нажатой клавишу I 
IIClr l I. 

> Нажмите и удерживайте клавишу I 
IIС1г| I. 

>• Не отпуская клавишу 1 
11 С1г | I. щелкните мышью в палитре Animation (Анимация) пооче


редно на не выделенных темным цветом кадрах анимации. Эти кадры будут выделены. 


>-Отпустите клавишу I 
IICtr l I. No delay 

0.1 seconds 
Выделить все кадры анимации в палитре Animation (Анимация) 0.2 

можно также с помощью команды меню палитры Animation (Ани-0.5 

мация) Select All Frames (Выделить все кадры). 1.0 

2.0
Теперь, когда все три кадра анимации выделены, установим для 

5.0 
каждого из них время задержки, равное 1 секунде. 10.0 

>• Щелкните мышью в палитре Animation (Анимация) на миниа-Other. 
тюрном значке-треугольнике w -Selects frame delay time 

</ 0 second: 

(Выбор времени задержки кадра) справа от надписи 0 sec. под 

миниатюрой первого кадра. На экране появится меню времени Рис. 6.9. Меню 

задержки (Рис. 6.9). времени задержки 


Создание Web-сайтов 

>• В появившемся меню выберите 1.0 (1 секунда). Это значение --1 sec. - 
отобразится в 
палитре Animation (Анимация) под миниатюрами всех трех кадров. 

Просмотрим полученный результат. 

>• Нажмите кнопку П>~] - Plays/Stops animation (Проигрывание/Остановка 
анимации) 
в нижней части палитры Animation (Анимация). Начнется проигрывание эффекта. 
Изображение кнопки П>Л изменится на | D |. 

В окне документа вы увидите, как периодически сменяются надписи Вам нужна 
локальная сеть? и Заходите СЮДА! Причем после появления надписи Заходите 
СЮДА! появляется также рисунок открытой двери. В процессе проигрывания в 
палитре 
Animation (Анимация) будет перемещаться выделение, отмечая текущий кадр. 

> Нажмите кнопку I D | - Plays/Stops animation (Проигрывание/Остановка 
анимации) 
в нижней части палитры Animation (Анимация), чтобы прекратить проигрывание 
эффекта. 

Увеличим время показа на экране первого кадра анимации до 1,5 секунд. 
Предварительно 
этот кадр нужно выделить. 

> Нажмите кнопку |« | - Selects first frame (Выбрать первый кадр) в нижней 
части палитры 
Animation (Анимация). Кадр станет активным. 

Перейти к следующим кадрам палитры Animation (Анимация) можно, нажимая кнопку 
П>~1 - Selects next frame (Выбрать следующий кадр), а к предыдущим - нажимая 
кнопку 
КН - Selects previous frame (Выбрать предыдущий кадр) в нижней части палитры 
Animation (Анимация). 

Значение 1,5 секунды в меню времени задержки отсутствует. Поэтому для указания 
времени 
следует воспользоваться специальным диалогом. 

> Щелкните мышью в палитре Animation (Анима


Set Flame Delay 

ция) на треугольном значке -г - Selects frame 
delay time (Выбор времени задержки кадра) под 
миниатюрой первого кадра и в появившемся меню 
времени задержки выберите Other (Другое). 


На экране появится диалог Set Frame Delay 6 Диалог Set Frame Delay

Рис.Ж

(Установка времени задержки кадра) (Рис. 6.10). 

(Установка времени задержки 
> В поле ввода Set Delay (Установить задержку) кадра) 
введите 1,5. 

> Нажав кнопку ОК, закройте диалог Set Frame Delay (Установка времени задержки 
кадра). Указанное время задержки - 1,5 sec. - отобразится под миниатюрой 
первого 
кадра. 

> Просмотрите анимацию, нажав кнопку П>П - Plays/Stops animation (Проигрывание/
Остановка анимации) в палитре Animation (Анимация). 

Вы увидите, что теперь надпись Вам нужна локальная сеть? сохраняется на экране 
дольше чем прежде, а затем, после ее исчезновения появляется надпись Заходите 
СЮДА! и через секунду после нее - рисунок открытой двери. 

>- Остановите проигрывание анимации нажатием кнопки | D |. 


Создаем анимацию с помощью Adobe ImageReady 

Вы, вероятно, уже заметили, что проигрывание мультипликации повторяется 
беспрерывно, 
до остановки кнопкой | о |. Так предусмотрено по умолчанию, и информация об 
этом 
режиме проигрывания - Forever (Непрерывно) - выводится у левого края нижней 
строки 
палитры Animation (Анимация). 

> Щелкните мышью на треугольном значке •*• 

•BBH 
справа от надписи Forever (Непрерывно). На эк


ране появится меню повторений, из которого вы Play; 1 ~^2 times OK |

I

можете выбрать значение Once (1 раз) или Other 

Cancel 

I

(Другое). В последнем случае на экране появится 

диалог Set Loop Count (Установка числа повто


Рис. 6.11. Диалог

рений) (Рис. 6.11), в котором следует указать ко


Set Loop Count 

личество повторений анимации. 

(Установка числа повторений) 

> Щелкните мышью на свободном пространстве 
рабочего окна, чтобы скрыть меню повторений. 

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

€ШУГ/Ш J№4. «Бегущие», постепенно появляющиеся 
и исчезающие рисунки 

В предыдущих опытах мы создавали и изменяли каждый кадр анимации вручную. 
Но Adobe ImageReady позволяет автоматически сгенерировать последовательность 
кадров 
между двумя указанными и отличающимися друг от друга кадрами, которые в 
совокупности 
создадут плавный переход от первого кадра к последнему. Для автоматически 
созданных кадров можно также определить, что именно должно изменяться: 
положение^ 
объектов, их прозрачность или эффекты, или же все эти три атрибута одновременно.
 

Изменим анимацию таким образом, чтобы надпись Заходите СЮДА!, конкретизируя 
приглашение, двигалась в направлении постепенно появляющейся открытой двери и 
«заходила
» в нее. Но сначала изменим время задержки второго и третьего кадров на 
0,2 секунды. 

> Щелкните мышью на втором кадре в палитре Animation (Анимация), чтобы выделить 

его. 

> Нажав и удерживая клавишу liShif| I 

щелкните мышью на третьем кадре анимации. 
Оба кадра будут выделены. 

>• Отпустите клавишу 11st1itt 

>• Щелкните мышью в палитре Animation (Анимация) на треугольном значке т 
Selects 
frame delay time (Выбор времени задержки кадра) под миниатюрой третьего 
кадра и в появившемся меню времени задержки выберите 0.2. Это время - 0,2 sec. 
отобразится 
под миниатюрами второго и третьего кадров. 

Теперь для третьего кадра анимации следует изменить положение слоя Layer 3 так, 
что


бы правый край надписи Заходите СЮДА! на этом слое «входил» в открытую дверь. 


Создание Web-сайтов 

>• Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным, а 
выделение 
второго кадра будет снято. 
Переместим слой Layer 3 в окне документа вправо, предварительно выделив его. 
> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слой будет 
выделен. 
>• Нажмите кнопку \*+\- Move Tool (V) (Инструмент «Перемещение» (V)) на панели 
инструментов (Tools), чтобы выбрать данный инструмент. 

>• Нажмите и удерживайте клавишу !lShiftl. 

> Не отпуская клавишу \\sm\. нажмите несколько раз клавишу j^j . Каждое нажатие 

этой клавиши будет перемещать в окне документа надпись Заходите СЮДА! на 
10 пикселов вправо. Расположите надпись так, чтобы последний ее символ 
находился 

«в открытой двери» (Рис. 6.12). 
\\2 Geoton.psd @ 100% (Original) Ham! 
о! 

ГЕОТОН 

Рис. 6.12. Слой Layer 3 перемещен 

> Отпустите клавишу IIShifl I. 

>• Откорректируйте положение слоя Layer 3 с помощью клавиш ( Q и |Q , не 
нажимая 

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

> Нажмите клавишу llShlftl. 

>• В палитре Animation (Анимация) щелкните мышью на миниатюре второго кадра, 
чтобы выделить его вдобавок к третьему, уже выделенному кадру. 

> Отпустите клавишу lShiftl. 

Теперь между вторым и третьим кадрами можно автоматически сгенерировать 
последовательность 
кадров, которые создадут эффект плавного перехода. 

> Нажмите кнопку | «ч. 1 - Tween (Создание промежуточных кадров) в нижней части 
палитры 
Animation (Анимация). На экране появится диалог Tween (Промежуточные 
кадры) (Рис. 6.13). 


Создаем анимацию с помощью Adobe ImageReady 

Tween With:|Selection 

frames to Add: П Г | Cancel 

Layers 


©A I Layers 
О Selected Layers 

Parameters 0 
Position 
0 Opacity 
0 Effects 

Рис. 6.13. Диалог Tween 
(Промежуточные кадры) 

Этот диалог можно вызвать также командой Tween (Промежуточные кадры) из меню 

палитры Animation (Анимация). 

В данном диалоге переключатели Layers (Слои) позволяют указать, должны ли 
присутст


вовать в добавленных кадрах все видимые слои (All Layers) или только активный 
слой 

(Selected Layer). 

>• Убедитесь, что установлен переключатель All Layers (Все слои). 

Группа элементов управления Parameters (Атрибуты) позволяет определить, какие 
атри


буты слоев будут изменяться в добавляемых кадрах: Position (Положение), Opacity 
(Не


прозрачность) или Effects (Эффекты). ч 

>• Убедитесь, что установлены флажки Position (Положение) и Opacity 
(Непрозрачность) 
Состояние флажка Effects (Эффекты) для нашей анимации значения не имеет, 
так как этот атрибут на выбранных кадрах не используется. 

>- Убедитесь, что в открывающемся списке Tween with (Промежуточные кадры между) 

выбрано Selection (Выделение). При этом эффект плавного перехода будет создан 
между выделенными кадрами. 

В поле ввода Frames to Add (Добавить кадров) по умолчанию предлагается добавить 

5 кадров. Увеличим количество промежуточных кадров до десяти. 
>• В поле ввода Frames to Add (Добавить кадров) введите 10. 


> Нажатием кнопки ОК закройте диалог Tween (Промежуточные кадры). В палитре 
Animation (Анимация) между вторым и третьим будет добавлено еще 10 кадров 
(Рис. 6.14) и, таким образом, создан плавный переход изображения. 

Рис. 6.14. Промежуточные кадры созданы 


Создание Web-сайтов 

>• Нажмите кнопку [Т>] - Plays animation (Проигрывание анимации) в нижней части 

палитры Animation (Анимация) и просмотрите созданный эффект. 

Вы увидите, что теперь, после исчезновения надписи Вам нужна локальная сеть?, 
возникает надпись Заходите СЮДА!, которая движется в направлении постепенно 
появляющейся 
«открытой двери» и «заходит» в нее. 

> Остановите проигрывание анимации нажатием кнопки | а |. 

Анимация готова. Теперь ее нужно оптимизировать и сохранить в формате GIF. 

€тьь4/пь J№5. Оптимизация и сохранение анимации 

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

Web. А теперь остановимся на специфических приемах оптимизации анимации. 

Как мы уже не раз подчеркивали в предыдущих главах, оптимизация призвана 
обеспечить 
наименьший размер файла при минимальных потерях качества. Размер анимационного 
файла зависит от количества кадров в нем. Чем больше кадров, тем больше будет 
размер файла. К счастью, существует способ значительно уменьшить размер файла 
посредством удаления избыточной информации, то есть такой информации, которая 
повторяется 
в каждом кадре. Если созданная мультипликация представляет собой 
лишьпоследовательную 
демонстрацию не связанных между собой картинок, то объем избыточной 
информации будет минимальным, и каждый кадр придется почти полностью сохранить 
в анимационном файле. Если же анимация - это последовательное преобразование 
изображения, как в нашем случае, то в каждом последовательном кадре изменяется 
лишь 
небольшая часть рисунка, и нет никакой необходимости в полном сохранении всех 
кадров 
анимации. Избыточную информацию можно смело отбросить и этим значительно 
уменьшить размер файла. 

> Нажмите кнопку 0 в правом верхнем углу палитры 
Animation (Анимация) и в появившемся 
меню выберите команду Optimize Animation 

0 Bounding Box 
(Оптимизация анимации). На экране появится В bedundant Pixel Removal 
диалог Optimize Animation (Оптимизация анимации) 
(Рис. 6.15), в котором определяются па


Рис. 6.15. Диалог

раметры оптимизации анимации. 

Optimize Animation 

При установленном по умолчанию флажке Bounding (Оптимизация анимации) 
Box (Граничные области) Adobe ImageReady в каждом 
кадре удаляет те фрагменты изображения, которые присутствовали в предыдущем 
кадре, и сохраняет только измененные, по сравнению с предыдущим кадром, области.
 

При установленном флажке Redundant Pixel Removal (Удаление избыточных пикселов) 

удаляются все пикселы каждого кадра, которые не изменены по сравнению с 
предыдущим 
кадром. Этот флажок, как и предыдущий, устанавливается по умолчанию и таким 
образом Adobe ImageReady автоматически подбирает наилучшие параметры 
оптимизации 
анимации. 

>- Закройте диалог Optimize Animation (Оптимизация анимации), нажав кнопку ОК. 
Установленные параметры будут применены. 


Создаем анимацию с помощью Adobe ImageReady 

Теперь необходимо оптимизировать изображение. 
>• Убедитесь, что на экране присутствует палитра Optimize (Оптимизация). В 
противном 

случае выберите команду меню Window • Optimize (Окно • Оптимизация). 
> В открывающемся списке Format (Формат) палитры Optimize (Оптимизация) 
выберите 
GIF. 
> В открывающемся списке Colors (Цвета) этой же палитры выберите 32. 
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. 
Будет 
выполнена оптимизация документа с установленными параметрами. 

Специфика оптимизации изображения, содержащего анимацию, заключается в том, что 

необходимо проверить, все ли кадры анимации оптимизированы корректно. 

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

Созданную мультипликацию можно просмотреть в браузере. 

>- Выберите команду меню File • Preview In (Файл • Предварительный просмотр в) 
и в 
появившемся меню выберите программу просмотра, в которой вы хотите открыть 
рисунок. Будет запущен выбранный браузер, в его рабочем окне откроется баннер и 

сразу же начнется проигрывание анимации (Рис. 6.16). 

| Geoton - Miciosoft Internet Explorer 

Bel a 

Файл Правка Вид Избранное Сервис Справка 

Q 

Адрес: Щ C:\Documentt and Setting*\VasilyU_ocal 
Settingi\TempMmageReady\TargetPreview4\Ge Q Q Перекод Link 

Вам нужналокальная сеть? 

Format: GIF 
Dimensions: 468wx601i 
Size; 22,43K 
Setting?: Selective, 32 Cobrs, 100% Diffusion Dither, 13 frames, Transparency 
on, No Transparency Dither, Interlaced, 0% 
Web Snap 

<head> 
<ticle>Gaoeon</title> 
:»eta hctp-ecruiv«" Content-Type" content* "text /htul; char set« 


<body bgcolor 3 "tfFFFFFF" leftM.argin*"Q" topawfcrgin""Q" toarginwidth« 
<\--laageReady Slices iCeocon.psd) --> 

g srca"images/Ceoton.gif" width*"468" height»"60" alt»""> 
<!-- End ImageReady Slices --> 
</body> 

E 

I Готово J g M)iCcmputoi 

Puc. 6.16. Предварительный просмотр анимации в браузере 

Просмотреть анимацию в браузере, установленном в операционной системе по 
умолчанию, 
можно, нажав кнопку |HPj - Preview in Default Browser (Ctrl+Alt+P) 
(Предварительный 
просмотр в браузере по умолчанию (Ctrl+Alt+P)). 


Создание Web-сайтов 

Под рисунком в окне программы просмотра выводится информация о формате 
изображения 
(Format), его размерах (Dimensions), размере файла (Size) и параметрах 
оптимизации 
(Settings), а ниже - HTML-код автоматически сгенерированного файла. 

> Нажмите кнопку Stop (Стоп) на панели инструментов программы просмотра. 
Проигрывание анимации прекратится. 
>• Нажмите кнопку Refresh (Обновить) или Reload (Обновить) на панели 
инструментов 
браузера. Проигрывание анимации возобновится. 

>• Закройте программу просмотра, нажав кнопку [х] в правом верхнем углу ее окна.
 
Чтобы в дальнейшем иметь возможность редактировать созданную анимацию, документ 

следует сохранить в формате Adobe Photoshop. 

> Выберите команду меню File • Save (Файл • Сохранить). Файл будет сохранен на 

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

И, наконец, оптимизированное изображение необходимо сохранить для Web в формате 
GIF. 
> Выберите команду меню File • Save Optimized (Файл • Сохранить 
оптимизированный 
документ). На экране появится диалог Save Optimized (Сохранение 
оптимизированного 
документа) (Рис. 6.17). 

Папка: 

в? о


CLOUD 
Fon 


Samolet 

Им я Файла: (Geoton Id [Сохранить | 
1ип файла: | Images Oniy(".gif) Ы Отмена 
Sellings: | Default Settings _ И 
SSces: [AlSfcet 

Рис. 6.17. Диалог Save Optimized (Сохранение оптимизированного документа) 


Создаем анимацию с помощью Adobe ImageReady

>- Откройте папку Web, в которой сохранены файлы сайта. 

>• Убедитесь, что в поле ввода Имя файла (File name) по умолчанию предлагается 
имя 
сохраняемого файла - Geoton.gif. 

> Убедитесь, что в открывающемся списке Тип файла (List files of type) 
автоматически 
выбрано Images Only (*.gif) (Только изображения (*.gif)). При этом в указанной 
папке 
будет сохранен только файл GIF, без HTML-кода. 

> Закройте диалог Save Optimized (Сохранение оптимизированного документа) 
нажатием 
кнопки Сохранить (Save). Файл будет сохранен в указанной папке. 
Программу Adobe ImageReady можно закрыть. 
> Выберите команду меню File • Exit (Файл • Закрыть). На экране может появиться 

запрос о сохранении файла Geoton.psd. 

>• Нажмите кнопку No (Нет) в этом запросе. Окно документа закроется без 
сохранения 
файла. 

> Просмотрите, как выглядит баннер на первой Web-странице вашего сайта, вставив 

в теге <img> файла geoton.html вместо ссылки на файл CLOUD.GIF ссылку на файл 
Geoton.gif. 

Программа Adobe ImageReady предоставляет очень простой и удобный инструмент для 

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

фильтров Adobe ImageReady. Вы можете самостоятельно поэкспериментировать 
с фильтрами, применяя к кадрам различные команды из меню Filters (Фильтры). 


ГЛАВА 7. 

Создание Web-сайта 
с помощью Microsoft FrontPage 2003 

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

Одним из редакторов для визуального проектирования Web-сайтов1, обладающим на 
сегодняшний 
день, наверное, самым широким спектром возможностей, является программа 
FrontPage [Франт Пейдж] компании Microsoft, входящая в состав пакета MS Office 
System Professional 2003. Редактор FrontPage содержит большой набор шаблонов и 
мастеров 
для создания сайтов по различной тематике. Для форматирования текста можно 
использовать все возможности, предусмотренные в основном стандарте HTML, а 
также 
применять специальные динамические эффекты и анимацию. Редактор имеет удобшле 
инструменты для работы с таблицами, встроенные средства для обработки 
изображений, 
позволяет легко размещать на страницах различные мультимедиа-объекты: рисунки, 
видеофильмы, 
анимацию, звуковые фрагменты. Тесная интеграция с пакетом MS Office позволяет 
отображать на страницах документы MS Word, таблицы и графики MS Excel, 
динамически 
получать данные из MS Access, использовать язык VBA, средства проверки 
орфографии и десятки готовых тем для оформления страниц сайта. В программе 
Front-
Page реализована поддержка современных Web-технологий, таких, как каскадные 
таблицы 
стилей (CSS), динамические эффекты (DHTML), фреймы, активные страницы (ASP), 
элементы ActiveX и Java-апгатеты. Если Web-сервер поддерживает технологии 
FrontPage и 
SharePoint, то появляются дополнительные возможности при создании страниц - 
формы 
поиска, счетчики посещений, оглавление сайта и другие. Программа FrontPage 
является не 
только редактором Web-страниц, но и содержит средства управления сайтом, такие, 
как 
схема навигации по страницам, анализ сайта с помощью различных отчетов, 
коллективная 
разработка, настройка на определенные браузеры, загрузка сайта на Web-сервер по 
протоколам 
HTTP и FTP. Все эти возможности позволяют создавать с помощью FrontPage 
полноценные 
Web-сайты, такие, например, как электронные магазины или игровые сайты. 

К недостаткам редактора FrontPage можно отнести его преимущественную ориентацию 

на браузер Internet Explorer, поэтому следует проверять работу готового сайта в 
других 
браузерах. А также некоторую избыточность готового кода HTML. Редактор 
отслеживает 

1 Здесь мы часто будем называть Web-сайты Web-узлами и наоборот. Эти два 
понятия являются 
синонимами. 



Создание Web-сайта с помощью Microsoft FrontPage 2003 

изменения в коде страниц и упорно восстанавливает теги, удаленные Web-мастером. 

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

Требования к компьютеру для установки и работы редактора FrontPage такие же, 
как у 
других приложений MS Office. Для загрузки сайта на Web-сервер понадобится 
доступ в 
Интернет и модем для передачи данных либо сетевая карта. Для проверки страниц, 
содержащих 
звук или видео, потребуется звуковая карта. 

Если вы уже знакомы с другими программами из пакета MS Office, вам будет проще 
освоить 
возможности FrontPage. 

Заказать компакт-диск с пробной 30-дневной версией программы FrontPage 2003 
можно 
на странице http://www.microsoft.com/office/frontpage/prodinfo/trial.mspx - 
надо будет 
заплатить только за пересылку компакт-диска. 

J№1. Знакомство с рабочими окнами программы 

Программа FrontPage входит в состав пакета MS Office System Professional 2003, 
поэтому 
ее можно установить вместе с другими приложениями MS Office или отдельно. Мы не 

будем описывать процесс инсталляции и будем считать, что вы уже установили 
FrontPage 
на ваш компьютер. 

> Чтобы запустить программу FrontPage, нажмите кнопку Пуск (Start) на Панели 
задач 
(Taskbar) Windows и выберите в появившемся меню команду Программы • Microsoft 
Office • Microsoft Office FrontPage 2003 (Programs • Microsoft Office • 
Microsoft Office 
FrontPage 2003). 

При первом запуске программы на экране появится диалог, в котором сообщается, 
что 
программа FrontPage не является редактором Web-страниц по умолчанию и 
предлагается 
сделать ее таковой (Рис. 7.1). 

Microsoft Office FrontPage не является редактором 
веб-страниц, используемым по умолчанию. 
Назначить эту программу редактором по умолчанию? 

[*3 выполнять эту проверку при запуске FrontPage 

и :ж ) Нет 

Рис. 7.1. Диалог с предложением назначить программу 
FrontPage редактором Web-страниц по умолчанию 

> Нажмите кнопку Да (Yes). На экране останется только рабочее окно программы 
(Рис. 7.2). 


Создание Web-сайтов 

Правки Вид Вставка формат Сервис Табямцп Данные Рамки Цкно 

Обычный • Tines New ROB . 3 (12 ml . | ж к н I ff 2 3 В | А ** I != := 

юе_стр_1.Мт \^ • Приступая к работе 

BSBB 
Office в Интернете 

• Подключиться к веб-узлу 
Microsoft Office Crime 
• Последние сведения об 
использовании FrontPage 
• Автоматически обновлять 
этот список из Веба 
Д4гю.' 

Пример: "Печать нескольких 
копий" 

Открыть 

Веб-узлы 
{ ^ Открыть узел... 

Страницы 
.gr Открыть... 

Q Создать страницу или узел. 

|[0:01 при 56кв;<гАГ])ЭБ7и 373 ||по ^молчаниюП|настройка j 

Puc. 7.2. Рабочее окно программы FrontPage 

В заголовке окна расположен значок системного меню, название программы с именем 

редактируемого в данный момент документа и стандартные кнопки для сворачивания 
и 
закрытия окна программы. Ниже находится меню, содержащее команды управления 
программой. 
Во время работы редко используемые пункты меню могут быть скрыты, и, чтобы 
их выбрать, нужно дополнительно щелкнуть на стрелке « в нижней части меню 
второго 
уровня (Рис. 7.3). 

Под меню расположены две панели инструментов: Стандарт


Вид1 Вставка Формат Сю 

ная (Standard) для быстрого вызова наиболее часто используе-•Страница 
мых команд и Форматирование (Formatting) для форматиро-Папки 

ш
ш
Удаленный веб-чэел 

вания текста. Как и другие программы из пакета MS Office, 

Итчеты >

редактор FrontPage позволяет отображать или скрывать опре-ш 

Переходы 

деленные панели инструментов, а также менять набор кнопок * 

Гиперссылки 

А

на панелях. 

Задачи 

Линейка и сетка »

Основную часть рабочего окна занимают вкладки редактируе


Область задач CUI+F1 

мых документов. Текущий документ - нов_стр_1 .htm В 

Панели инструментов »

(new_page_l.htm). 

И Обновить F5 

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

Рис. 7.3. Сокращенный 

программы, выполнять различные действия - поиск, работу 

вид меню 

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

> Закройте область задач, нажав комбинацию клавиш IС1г| 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Чтобы вновь показать область задач, нужно опять нажать комбинацию клавиш 

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

В Microsoft FrontPage существует несколько способов просмотра содержимого 
Web-узла, 
облегчающих разработку, публикацию и управление им. Работать с Web-страницами 
можно, используя одно из следующих представлений: 

Страница (Page). 
Папки (Folders). 
Удаленный Web-узел (Remote Web Site). 
Отчеты (Reports). 


Переходы (Navigation). 
Гиперссылки (Hyperlinks). 
Задачи (Tasks). 

Представление Страница (Page) показано на Рис. 7.2. В этом представлении можно 
использовать 
один из четырех режимов представления страницы: 

• Конструктор (Design) - режим по умолчанию. В этом режиме можно разрабатывать 
и 
редактировать Web-страницы, используя практически все возможности концепции 
WYSIWIG 
• Код (Code). Позволяет самостоятельно просматривать, записывать и 
редактировать 
теги HTML. Используя средства оптимизации кода в Microsoft FrontPage, можно 
создать 
чистый код HTML; также упрощается процедура удаления ненужного кода. 
• С разделением (Split). В этом режиме можно проверять и редактировать 
содержимое 
Web-страницы в формате с разделением экрана, предоставляющем одновременный 
доступ к режимам Код (Code) и Конструктор (Design). 
• Просмотр (Preview). Позволяет просматривать внешний вид страницы в 
Webобозревателе, 
не сохраняя ее. Этот режим используется для проверки страницы перед 
сохранением после внесения небольших вызывающих сомнения изменений. 
В представлении Страница (Page) режим ее представления выбирается в левой 
нижней 
части рабочего окна программы FrontPage (Рис. 7.2). 

В представлении Папки (Folders) можно использовать папки для непосредственной 
работы 
с файлами и папками, а также для организации содержимого Web-узла. В этом 
представлении 
папки можно создавать, удалять, копировать и перемещать, как и в Проводнике 
(Explorer) Microsoft Windows. 

Представление Удаленный Web-узел (Remote Web Site) можно использовать для 
публикации 
всего Web-узла или выборочной публикации отдельных файлов. Также можно 
синхронизировать 
файлы в двух или нескольких расположениях, чтобы обеспечить своевременное 
обновление узлов с одинаковым содержимым. В представлении можно выполнить 
отбор для отображения содержимого папки, файлов для публикации, файлов не для 
публикации и конфликтующих файлов. 


Создание Web-сайтов 

Представление Отчеты (Reports) позволяет анализировать содержимое Web-узла 
после 
выполнения запроса отчета. Можно рассчитывать полный объем памяти, занимаемой 
файлами на узле, отображать файлы, не связанные с другими файлами, обнаруживать 

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

С помощью представления Переходы (Navigation) можно отображать иерархическую 
структуру Web-страниц. Это представление позволяет изменять расположение 
страниц на 
узле при помощи простых перемещений мышью. 

В представлении Гиперссылки (Hyperlinks) отображается состояние гиперссылок 
Webузла 
в виде списка. Этот список включает внутренние и внешние гиперссылки и 
использует 
значки для обозначения проверенных или неработающих гиперссылок. 

Представление Задачи (Tasks) отображает все задачи Web-узла в формате столбца и 
содержит 
текущие сведения о каждой задаче под соответствующими заголовками. 

Любое из перечисленных представлений можно включить с помощью команд меню Вид 
(View). Чтобы лучше понять назначение различных представлений, мы загрузим в 
редактор 
FrontPage готовый сайт, воспользовавшись операцией импорта. 

>• Выберите в меню команду Файл • Импорт (File • Import). На экране появится 
диалог 
Мастер импорта Web-узлов: начало (Import Web Site Wizard - Welcome), в котором 
требуется определить способ получения файлов и их местоположение (Рис. 7.4). 

Можно импортировать файлы с существующего веб-узла или из папки на компьютере 
или в сети. 

Способ получения файлов 

О Серверные расширений FrontPage или службы SharePoint Services 

Передача файлов с помощью серверных расширений FrontPage или служб SharePoint 
Services 

О Протокол WebDAV 

Передача файлов по протоколу WebDAV 

О Протокол FTP 

Передача файлов по протоколу FTP 
О Файловая система 
Импорт файлов из исходного каталога на локальном компьютере или в локальной 
сети 
© Протоко{Г|тГТр| 

• •III 

Импорт файлов с веб-узла в Интернете 
Расположение веб-узла (например: http://example.com): 
|nttp:f/ 

J 

L 

ГЛ Вкпочить дочерни» узлы 
d Использовать пассивный FTP 
П Требуется шифрованное подключение SSL 

Рис. 7.4. Диалог Мастер импорта Web-узлов: начало 

(Import Web Site Wizard — Welcome) 

Вы можете импортировать сайт, находящийся на локальном диске, например взять 
сайт, 
созданный нами в предыдущих главах. Для этого нужно установить переключатель 
Файловая 
система (File System) в группе переключателей Способ получения файлов 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

(How do you want to get the files?) и указать папку с файлами сайта в поле 
ввода 
Расположение Web-узла (Web Site Location). 

При установленном по умолчанию переключателе Протокол HTTP (HTTP) вы можете 
импортировать готовый сайт прямо из сети Интернет. 

>• Чтобы импортировать сайт из Интернета, в поле ввода Расположение Web-узла 
(Web Site Location) укажите адрес сайта, например http://www.gov.ru. 

>• Нажмите кнопку Далее (Next). На экране появится диалог Мастер импорта 
Webузлов: 
выбор расположения конечного Web-узла (Import Web Site Wizard - Choose 
your destination web location) (Рис. 7.5). 

юрта веб чэлов: выбор расположения конечного веб узла 

Укажите место для создания локальной копии. Оно может находиться на локальном 
компьютере, е локальной 
сети или на любом сервере, выполняющем серверные расширения FrontPage или 
службы SharePoint Services. 

Расположение локальном копии: 
[C:\Documents and 5etcings\Vasily\My Docu№ents\Mon веб-узлы\мой_узел| 

О Добавить не текущий м&умл 
П Требуется шифрованное подключение S5L 

Рис. 7.5. Диалог Мастер импорта Web-узлов: выбор расположения конечного 

Web-узла (Import Web Site Wizard — Choose your destination web location) 

В поле Расположение локальной копии (Local copy location) можно указать папку 
на 
вашем жестком диске, в которую будут скопированы импортируемые файлы. Оставим в 

этом поле имя папки, предлагаемое по умолчанию. 

>• Нажмите кнопку Далее (Next). На экране появится диалог Мастер импорта 
Webузлов: 
задание ограничений на импорт (Import Web Site Wizard - Set import limits), в 
котором можно ограничить размер загружаемого сайта (Рис. 7.6). 

>- Установите флажок Импортировать доменную страницу и (Import the home page 
plus 
linked pages) и в поле ввода со счетчиком справа от этого флажка введите 5, 
чтобы ограничить 
вложенность в структуре папок и файлов сайта пятью уровнями. 

> Установите флажок Импортировать не более (Import a maximum of) и в поле ввода 

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

файлов в 1000 килобайт. 


Создание Web-сайтов 

зшыние ограничений на и 

FrontPage импортирует веб-узел H3"http;//www.gov.ru"j загрузив домашнюю 
страницу и все страницы, на 

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

загруженные. Можно ограничить число загружаемых страниц одним из следующих 
способов: 

П 5^ТЖМ5'#2'91Й^^НЙ*ЙЗ I' 1"Н аослвДУюЩ"'' Уровней связанных с ней страниц 

• Имгюртировать не более | "| № 
• Импортировать 1олько файлы HTML и изображений 
• ••••••••••им 

Рис. 7.6. Диалог Мастер импорта Web-узлов:задание ограничений на импорт 
(Import Web Site Wizard— Setimport limits) 

> Установите флажок Импортировать только файлы HTML и изображений (Import 
only HTML and image files). 

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

> Нажмите кнопку Далее (Next), чтобы перейти к заключительному диалогу мастера 
импорта. 

>• Нажмите кнопку Готово (Finish) в заключительном диалоге мастера. Будет 
установлено соединение с Интернетом, и на экране появится диалог Ход импорта 
Web-узла (Import Web Site Progress), в котором будет отображаться процесс 
загрузки файлов сайта (Рис. 7.7). 

Импорт 1<n-dk_.ipg' ив 
T*tp://www.gov.ru/' 
в 'C/Documents and Settings/Vasily/My 
Documents/Мои веб-узлы/мой_уэел' 


Рис. 7.7. Диалог Ход импорта Web-узла 
(Import Web Site Progress) 


Создание Web-сайта с помощью Microsoft FrontPage 2003

В процессе загрузки файлов сайта может появиться диалог Подтвердите замену 
файла 
(Confirm File Replace) (Рис. 7.8). 

Подтверждение замены Файла 

Этот веб-узел уже содержит документ 'inctex.htm1. 

Заменить существующий файл? 

fla I Да для gcex j : Нет Отмена 

Рис. 7.8. Диалог Подтвердите замену файла (Confirm File Replace) 

> В случае появления диалога Подтвердите замену файла (Confirm File Replace) 
нажмите 
кнопку Нет (No), чтобы не заменять уже скопированный файл. 

Импорт будет завершен после загрузки всех файлов или при достижении 
установленного 
предела размера сайта. 

В процессе импорта программа FrontPage копирует файлы сайта с удаленного 
сервера на 
локальный диск и размещает их в отдельной папке. Фактически сайт представляет 
собой 
набор файлов, содержащихся в определенной папке и вложенных папках. Обычно 
Front-
Page размещает сайты в папке Мои Web-узлы (My Web Sites), которая создается в 
папке 
Мои документы (My Documents). Если для сайта не указано имя, ему по умолчанию 
присваивается 
имя мой_узел (mywebl) или похожее. 

После завершения импорта сайт будет загружен в редактор FrontPage, и в 
заголовке окна программы 
рядом с названием приложения появится путь к папке сайта на локальном диске. 
Программа 
переключится в представление Папки (Folders). В левой части рабочего окна 
программы 
будет показано дерево папок, а в правой части появится новая вкладка со списком 

папок и файлов сайта (Рис. 7.9). 

>• Щелкните правой кнопкой мыши на вкладке нов_стр_1.Мт (new_page_l.htm) и в 
появившемся контекстном меню выберите команду меню Закрыть (Close), чтобы 
закрыть 
пустую страницу, созданную при запуске программы. 

В представлении Папки (Folders) все страницы, рисунки и другие файлы, 
составляющие 
сайт, представлены так же, как и в программе Проводник (Explorer) операционной 
системы 
Windows. Слева выводится дерево папок, справа - содержимое выбранной папки. 
В этом режиме вы можете перемещать, удалять или переименовывать файлы в ходе 
работы 
над сайтом. Двойной щелчок на имени файла страницы открывает ее для 
редактирования. 
Обычно файл главной страницы сайта называется index.htm или default.htm. 

>• Найдите файл с таким именем в списке файлов и дважды щелкните на нем мышью. 
В 
правой части рабочего окна появится новая вкладка index.htm, и на ней будет 
показана 
выбранная страница в режиме Конструктор (Design) представления Страница 
(Page) (Рис. 7.10). 


Создание Web-сайтов 

| й Miciosofl FiontPage - C:\Documents and SeltingsWasilySMy Documents\MoH ввв 
<|злы\иой_9зел Я-IQ! 
Файл Правка &нд Вставка Формат Сервис Хаблица Данные Еамки Окно Справка 

3 ж к Н I№ в = S | А **11= := '=МРЧ В • Е-; 

Список папок Р) f^ii x 
Содержимое 'C:\Documents and Settings\Vasay\My Documents\MoM веб-узлы\мой_узел" 
DEI 


:t ЁЗ „private 

Г Название Размер 1 Тип [ Изменен | Кем изменен 

SB Ё З image» 
Щ index,htm ^ 
maln fllndex.htm СЕРВЕРОРГАНОВГОСУ... 23.08.2004 23:24 VAS\Vasily 


Ш ЁЭ

1Ё8Удаленный веб-узел ВОтчеты ^Переходы йГиперссылки 9Задачи

m 

1 [по умолчанию ||настройка_! 

Рис. 7.9. Представление Папки (Folders) импортированного сайта 

Н Miciosofl FiontPage - CADocumenlt and Setlings4Vasiln\My DocumenlsVMoH в 

Файл Правка В ид В ставка Ф ормат Сервис 1а6яица Данные .амки Дкно Справка 

; Обычный - [шрифт по умолчанию) * 

I A **I i= i= * * I Ш • 

Список папок Q 

СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ 

российской 'ОРГАНЫ ВПАСТЬ 
ФЕДЕРАЦИИ 

ИСПОЛНИТЕЛЬНОЙ РОССкЙСКОИ РОССИЙСКОЙ 
ВЛАСТИ ФЕДЕРАЦИИ ФЕДЕРАЦИИ 

^3 ^3 Вко д ^Просмотр I i I 

-nain/symbols/gstt3 2 html j[0:21 при 56 кбитУс J618 x 37 3 [noу мо лчаникГ] j 
настройка

Рис. 7.10. Режим Конструктор (Design) представления Страница (Page) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В меню Вид (View) представление Страница (Page) выделено, а режим Конструктор 
(Design) этого представления выделен в нижней части вкладки index.htm. 

Режим Конструктор (Design) представления Страница (Page) предназначен для 
редактирования 
и просмотра текущей страницы сайта. Это основной рабочий режим, в котором 
доступны команды вставки элементов, форматирования текста, работы с таблицами и 

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

В режиме С разделением (Split) представления Страница (Page) можно проверять и 
редактировать 
содержимое Web-страницы в формате с разделением экрана, предоставляющем 
одновременный доступ к режимам Код (Code) и Конструктор (Design) (Рис. 7.11). 

И Microsoft FrontPage - C:\Documenls and SettingsWasily\My Documents\MoM 
ееб-узлы\мой_ ysenSinde 

: Ф_аЙл Правка Йнд Вставка Формат Сервис Хаблица Данные Рамки Окно Справка 

Обычный (шрифт по умолчанию) •I ж к н II И A A'I IE •= * tie | и -•* • 

Список папок О ЕЗ х fgg ееб-узел I! indeH.htm 

а [«ЧТИ „T.i.m.i.-.^,!.-. 

i<body> :< 

; . з „private 

. .Э images 

1 <hml> 

• <head> 
-:: <meta http-equiv-"Content-Type" coftt«rit-"text/htal"> 
4 <meta пате-''descEifition" content*"Rus3ian Government official inforaation, 
offic: 
5 <meta nane="keywotd3" content="Russia, russian goverraient^ official news, 
decree 
€ <meta naae="author" content="design: Babenko Vladimir, redesign: Davidov 
Denis,Hc 
? <title>CEPBEP ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ POCCJGK/titlO 
'"• </head> 

• <body bsrcolor=''|FFFFFr" text="#000000" link=-"#000000" vlink»"#000000" eJ.
ink-"#0C 
<div aligiiB"cent-er"><cente.> 1 
, Stable border="0" celiuaddinci»"3rr се11зоас1п.а="0">. . 1 

ОФИЦИАЛЬНАЯ 

РОССИЯ 

СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ 

ш 

а к.!омструктор fflЕЗКод ^Просмотр[и! 

STlepexout 

|[0:21 прн56кбнтУс ![Б18 к 135 ![по умолчанию {[настройка j 

Рис. 7. П. Режим С разделением (Split) представления Страница (Page) 

Режим Код (Code) представления Страница (Page) позволяет самостоятельно 
просматривать, 
записывать и редактировать теги HTML (Рис. 7.12). 

В этом и двух предыдущих режимах в верхней части вкладки index.htm расположена 

панель для быстрого выбора тега, которую можно скрыть или показать с помощью 
команды 
меню Вид • Быстрый выбор тега (Quick Tag Selector). 

Режим Просмотр (Preview) представления Страница (Page) позволяет просматривать 

внешний вид страницы в Web-обозревателе, не сохраняя ее (Рис. 7.13). 


Создание Web-сайтов 

Miciosoft FiontPage - C:\Documents and SetttngsWasilyVMy DocumentsVMoH ьеб 
уэльЛмой yiieflWidt-x him 

: 5.айл Правка В_мд Вставка Формат Сервис 1аблица Данные Рамки .кно Справка 

! Обычный (шрифт по умолчанию) 

Список папок П С%1 Si веб-уаел ||indeMAtm\ 

;<body> ; 

• .5 „private 
2 <head> 
3 <»eta http-equiv-"Content-Type" content*"text/htil"> 
t^J hdex.htm 

4 <neta name»"desci:iption" content-"Russian Government official information, 
offic 
5 <meta name-"keywords" content«"Russia, russian governnent, official news, 
decree 
6 <neta nane="author" content*"design: Babenko Vladimir, redesign: Davidov 
Denis,H 
7 <title>CEPBEP ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ POCCMM</title> 
в </head> 
Э <body bgcolor-'-IFFFFFF" text->"#000000" lin)t="#000OOO" vlink = "#000000" 
elink-"#OC 

10 <div align»"center"xcenter> 
11 <table border="0" cellpatiding»"3" cell3pacing»"0"> 
12 <trxt d aiign«"centec" colspan«"2"ximg align»"top" src«"main/img/blanlt.gif" 
w; 
13 <i—<SCRIPT LAHGUAGE-JavaScriptl.l> 
14 
15 v*r HH_contentVersion - 5; 
16 var plugin • (navigator.»1меТуреэ «& navigator.
ml»eTypefl["application/x-shocltwave-i 
17 if ( plugin ) { 
18 var words « navigator.plugins["5hoc)rwave Flash"].description.split(" ") ; 
19 Cor (var i « 0; i < words.length; ++i) 
20 
21 if (isBaNtparseInt(word3[i]))) 
22 continue; 
23 var HH_PluginVersion • voids[i]; 


24 
25 var HH_FlashCanPlaY - HH_PluginVersion >• HH_contentVersion; 


СЗКонструктор В С разделением О!Я д QПросмотр Л*\ 

J[no умолчанию .. 

Рис. 7.12. Режим Код (Code) представления Страница (Page) 

.ч] Miciosoft FiontPage - CADocuments and SellingsWasiiyVMy Documents\Mou 
веб-чзлыЧмой уз 

Дравка В на В стдокэ Ф ормат Сервис Хаблнца Данные Еамки QKHO ^правка 

31 ж ^ н I ш ш т ш | А *' 11= ;= i* ?е | ш• Е • ! 

х 9| веб-узел 

ffi . 3 mages 

ОФИЦИАЛЬНАЯ 

Й Index.htm 

РОССИЯ 

СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ 

t 

ОРГАНЫ 6ЛАСП» 
ИСПОЛНИТЕЛЬНОЙ РОССИЙСКОЙ 
ВЛАСТИ ФЕДЕРАЦИИ 

^Конструктор В с разде 

|[635хЗЭ8 

Рис. 7.13. Режим Просмотр (Preview) представления Страница (Page) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Закройте страницу index.htm, нажав комбинацию клавиш В Ctrl I-HIF4I. Мы снова 
вернемся 
на вкладку Web-узел (Web Site) в представлении Папки (Folders) (Рис. 7.9). 

Нажмите кнопку Отчеты (Reports) в нижней части вкладки Web-узел (Web Site). 
В правой части окна будет отображен отчет Сводка по узлу (Site Summary), 
содержащий 
общие сведения о структуре сайта: количество файлов, рисунков, ссылок и 
другую информацию (Рис. 7.14). 

isoft FiontPage - C:\Documents and Set tings WasilyVMy Documenls\MoM веб 
чзяьЛмой чзел 
Файл Правка Дня Вставка Формат Сервис Хаблица Данные Еамки Дкно Справка 


ж к з | щ т т т | 1= 1= * iw I ш - . • 

Список папок 

>П1"|'УППГ1Т-УГСводка по узлу* 

И & .private 

Имя Размер I Описание 

36 й ) Images 

 main 

,t .3

US Рисунки 91 271КБ Файлы рисунков на текущей веб-узле (GIF, JPG, BMP и т.п.) 

<JJ index.htm 

Несвязанные Ф. П 8 7КБ Файлы на текущем веб-узле, которых нельзя достигнуть, 
начав с до... 
Связанные файлы 117 671КБ Файлы не текущем веб-узле, которых можно достигнуть, 
начав с дом... 
Медленные СТР.,. 0 ОКБ Страницы на текущем веб-узле, у которых время загрузки 
превышав... 

дыс файлы 0 ОКБ Файлы на текущем веб-узле, не изменявшиеся в течение 72 дней 
Последние лоб,.. 125 678КБ Файлы на текущем веб-узле, созданные за последние X 
дней 
Гиперссылки 1762 Все гиперссылки текущего веб-узла 

? Непроверенные.., 105 Гиперссылки, указывающие на неподтвержденные файлы 
«»Неработающие ... 40 Гиперссылки, указьеающие на недоступные файлы 
[З^Внеи^ниегиперс.,,, 105 . Гиперссылки, указывающие на файлы вне текущего 
веб-узла 
[|.Внутренние гид,,, 1657 Гиперссылки, указывающие на файлы на текущей веб-уэле 

( D Ошибки крилон.,. 0 Файлы на текущем веб-узле с компонентами, сообщающими об 
ошибке 

рг Незавершенные.., 0 Задачи на текущем веб-узле, не помеченные как завершенные 


(jr* Неиспользуемы... 0 Темы на текущем веб-узле, не примененные ни к одному 
файлу 
Связи с таблиц,.. 0 Все связи с таблицами стилей текущего веб-уэла. 
Динамические в.., О Все файлы, объединенные с динамическим веб-шаблоном. 

Г П & Папки ©Удаленный ееб-узел ^Ш ЯЯЗ° Переходы йГиперссылки (^Задачи 

Л iwnofljw • клавишу F1 1|по умолчанию ([настройка j 

Рис. 7.14. Отчет Сводка по узлу (Site Summary) представления Отчеты (Reports) 

Представление Отчеты (Reports) позволяет получать и просматривать 
статистическую 
информацию о Web-сайте и проводить анализ с целью выявления потенциальных 
проблем 
и ошибок, допущенных при разработке. Редактор FrontPage предлагает различные 
отчеты, собирающие информацию о размере'сайта, количестве страниц и рисунков, 
недоступных 
страницах, разорванных ссылках, «медленных» страницах и другие сведения. 
Эти отчеты можно выбрать из открывающегося списка в верхней части вкладки 
Webузел 
(Web Site). 

> Выберите команду меню Вид • Переходы (View • Navigation). 

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

Подробнее о структуре навигации мы поговорим в отдельном опыте. 


Создание Web-сайт эв 

>• Выберите команду меню Вид • Гиперссылки (View • Hyperlinks) и щелкните мышью 

на элементе index.htm в левой части рабочего окна программы, чтобы 
переключиться 
в представление Гиперссылки (Hyperlinks) (Рис. 7.15). 

By Microsoft FrontPage - C:\Documenls and SettingsWasilyVMy Documents\Mtm 
веб-уэпыЧмий «JJ 
Правка Дид Вставка Формат Сервис 1абяи*а Данные Панки Окно Справка 


о I * * « if i« iiB п о в % \%\ i em 

м т ив-1 

41х к ч I * » • • I »* I {= В I Ш* К ' 

Список папок 

(Й1 веб-узея I 

О C:\Documents and Setting 

Гиперссылки для "index.htm1 

main/5ymbot;/gsrf2_2.html Lt 

^j images 
"*| mam >^]main;symbtjls/g5rf3_2.httiil 

main/pages.html 

, mairVpage3.html 

,mahVmintelry/i5p-vtart«.html 

age! 0. html 

•—•—*^|l http://w-vvw.scrf.gov.iu/ 

http://www. cikrF.ru/ 

http: //www. ach, gov. ru/ 

main/regions/regioni-44. html 

jmain/symbols/gsrf 1 .html 

maki/page4.html 

СЭПапки ©Удаленныйвеб-узел ©Отчеты 5°Переходы 
C:\Documenls and SeitingsWasilyVMy DocumenlsVMon веб узпы\мой ч.чел\|п<]ек Ы 
|по умолчанию |настройка 

Рмс. 7,75.Представление Гиперссылки (Hyperlinks) 

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

Представление Задачи (Tasks) предназначено в основном для планирования 
коллективной 
работы над проектом сайта. В этом режиме можно запланировать задачи, закрепить 
их за отдельными разработчиками и следить за ходом их выполнения. 

/ПЯУГ/ПЪ J№2. Создаем макет Web-сайта 

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

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


Создание Web-сайта с помощью Microsoft FrontPage 2003

> Закройте текущий сайт, выбрав в меню программы 

; Создание 

команду Файл • Закрыть узел (File • Close Web). 

Создать страницу 

>- Выберите команду меню Файл • Создать (File • New). 

D Пустая страница 

В правой части рабочего окна программы появится 

Ш Текстовый файл 

Область задач (Task Pane) с активной задачей Созда-j§} Из имеющейся страницы... 


ние (New) (Рис. 7.16). Другие шаблоны страниц... 

Создать веб-узел 

В Области задач (Task Pane) мы можем выбрать различ-(Ж| Одностраничныйвеб-узел..
. 

ные варианты создания страниц и Web-узлов, среди кото-§ ] Веб-узел группы 
SharePoint... 
S J Веб-пакеты... 

рых находятся Web-узел группы SharePoint (SharePoint 

Другие шаблоны веб-узлов... 

team site) и Web-пакеты (Web package solutions). 

Шаблоны 

Поиск в сети: 

При создании Web-узла с помощью программы Microsoft 

Найти 

FrontPage можно включить или отключить возможности, Шаблоны на узле Office 
Online 
требующие службы SharePoint (SharePoint Team Services 
версия 1.0 корпорации Майкрософт или Microsoft Windows 
SharePoint Services). Некоторые возможности, такие как 
поиск в Интернете и т.п., доступны только при включенной 
поддержке служб SharePoint. 

Web-пакеты - это связанные наборы файлов, импорти


Рис. 7.16. Задача Создание 

руемые или экспортируемые для использования в Web


(New) в Области задач 

узле. Web-пакеты могут содержать Web-страницы, 

(Task Pane) 

шаблоны, Web-компоненты, темы, графику, таблицы 
итдргейш дрфяша-нлементы. 

Microsoft FrontPage содержит встроенные решения в виде Web-пакетов - 
независимые, 
управляемые данными Web-узлы, созданные на базе Microsoft Windows Share-
Point Services. Также можно создать Web-пакеты, используя файлы уже 
существующего 
Web-узла. 

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

В Microsoft FrontPage содержатся два встроенных решения в виде Web-пакетов. 

• Узел новостей и обзоров. С помощью узла новостей и обзоров можно развернуть 
управляемый данными Web-узел новостей на базе Windows SharePoint Services, 
поддерживающий 
проведение обзоров, обсуждений и другие возможности интерактивного 
Web-узла. 
\/ Журнал Web-узла. С помощью журнала Web-узла можно развернуть управляемый 
данными 
Web-журнал на базе Windows SharePoint Services, поддерживающий поиск, 
обсуждение 
каждой записи в журнале, избранные ссылки и другие средства создания отчетов. 

Мы воспользуемся мастером для создания нового сайта, на примере которого мы 
будем 
рассматривать возможности редактора FrontPage в этой главе. Допустим, что 
требуется 
создать Web-сайт для некоторого туристического агентства. Чтобы охватить больше 
возможностей 
программы, мы не будем наполнять сайт реальным содержанием, а покажем 


Создание Web-сайтов 

лишь упрощенные примеры использования различных элементов и средств для 
оформления 
страниц. 

>• Щелкните мышью на ссылке Другие шаблоны Web-узлов (More Web site template к).
 
На экране появится диалог Шаблоны Web-узлов (Web Site Templates) (Рис. 7.17). 

Шаблоны веб узлов 

Общие ртакеты | sharePoint Services | 

Параметры 
укажите расположение нового веб-узла: 
p\Oocuments and Settlngs\Vasily\|v[^J 
Личный Мастер Мастер Мастер Обзор,,. | 
веб-узел веб-узла... импор... интерфейс.. 
D Да6»иты« текущий веб-умп 
D 1р*6у*та подключение SS. 
Описание 
Мастер 
корпбрати.. 
Пустой 
веб-умл 
Создание веб-узла с одной пустой 
страницей. 

ОК [ Отиеиа 

Рис. 7.17. Диалог Шаблоны Web-узлов (Web Site Templates) 

В поле ввода Указать расположение Web-узла (Specify the location of the new Web 
site) 
можно указать папку, отличную от предложенной по умолчанию. 

> Среди шаблонов диалога Шаблоны Web-узлов (Web Site Templates) выберите значок 

Мастер создания корпоративного Web-узла (Corporate Presence Wizard) и нажмите 
кнопку ОК. На экране появится первый диалог мастера, содержащий текст о его 
назначении 
(Рис. 7.18). 

Мастер создания корпоративного ьеб-чз! 

Этот мастер поможет создать корпоративный 
веб-уэел для Интернета. 

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

Рис. 7.18. Первый диалог Мастер создания корпоративного Web-узла 

(Corporate Presence Web Wizard) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

> Нажмите кнопку Далее (Next). На экране появится второй диалог мастера, в 
котором 
выбираются основные страницы сайта (Рис. 7.19). 

В качестве основы для построения веб-узла бупут 
испольювамы ДОМАШНЯЯ страница и несколько 
других распространенных страниц. 
Выберите основные страницы для включения 
в веб-узел: 

ЕЗ дсмашняя (обязательная) 

ЕЗ продукты и услуги 

[Э оглавление 

0 обратная ;Свяэь 

0 Форма поиска 

| < Назад [ Далее > | 

Рис. 7.19. Второй диалогМастер создания корпоративного Web-узла 

(Corporate Presence Web Wizard) 

Вы можете указать мастеру, что в состав сайта нужно включить определенные 
страницы, 
установив следующие флажки: новости (What's new), продукты и услуги (Products/
Services), оглавление (Table of Contents), обратная связь (Feedback Form) и 
форма 
поиска (Search Form). 

> Сбросьте все флажки, кроме домашняя (обязательная) (Home (required)) - мы 
потом 
самостоятельно создадим страницы с формами и оглавлением. Нажмите кнопку Далее 
(Next). На экране появится следующий диалог мастера (Рис. 7.20). 

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

Выберите разделы для размещения на 

домашней странице: 

О профиль организации 

0 контактные сведения 

Рис. 7.20. Третий диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

В этом диалоге с помощью флажков можно выбрать условные разделы для первой 
(домашней) 
страницы сайта. На домашнюю страницу можно поместить выбранную информацию, 
установив следующие флажки: вступление (Introduction), предназначение (Mission 
Statement), профиль организации (Company Profile), контактные сведения (Contact 

Information). 


Создание Web-сайт оз 

>• Сбросьте все флажки. Нажмите кнопку Далее (Next). На экране появится 
четвертый 
диалог мастера (Рис. 7.21). 

Выберите элементы для верхней чести страницы 

Г_] gMu'it-M.-, opf анизацйй 

[7] название страницы 
ЕЗ ссылки на основные страницы узла 

Выберите элементы для нижней части страницы: 

FJ ссылки на основные страницы узла 

ЦТ] адрес электронной почты веб-мастера 

( 3 уведомление об авторском праве 

|*3 дата последнего изменения страницы 

| < Назад) Далее > | 

Рис. 7.21. Четвертый диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

Здесь можно определить, какие элементы будут присутствовать в верхней и нижней 
области 
каждой страницы сайта. Это может быть эмблема организации (Your company's 
logo), название страницы (Page title), ссылки на основные страницы узла (Links 
to 
your main web pages), адрес электронной почты Web-мастера (E-mail address of 
your 
webmaster), уведомление об авторском праве (Copyright notice), дата последнего 
изменения 
страницы (Date page was last modified). 

> Оставьте предложенный вариант и нажмите кнопку Далее (Next). На экране 
появится 
следующий диалог мастера, в котором можно указать, будет ли на страницах сайта 
отображаться значок В стадии разработки (Under Construction) (Рис. 7.22). 

Мастер создания корпоративного веб-узла 

Многие разработчик предпочитают обозначать 
незавершенные страницы. Пометить каждую 
незавершенную страницу значком "В стадии 
разработки"? 

О Нет 

Отмена] ] < Назад \ Лалее > | | Готово | 

Рис. 7.22. Пятый диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

> Установите переключатель Нет (No) и нажмите кнопку Далее (Next). На экране 
появится 
шестой диалог мастера (Рис. 7.23). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Мастер создания веб-узла использует полное имя 
организации (например, [Форма регистрации] 
[название]) и сокращенный вариант [например, 
[название]] в различных элементах вей-страниц. 

Полное название организации: 

[Туристическое агентство . ! 

Краткий вариант названия: 

ТА 

Почтовый адрес организации: 

[Москва, уп. Космонавтов, д 999 

Отмена | [ < Назад f Далее > | | Готово | 

Рис. 7.23. Шестой диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

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


низации, ее краткое название и почтовый адрес. Эти сведения будут сохранены в 
пере


менных и могут затем использоваться во многих местах на страницах сайта. 

> Заполните поля так, как показано на рисунке и нажмите кнопку Далее (Next). 
На экране появится седьмой диалог мастера, в котором нужно ввести телефон 
компании, 
номер факса и адреса электронной почты для обращений к Web-мастеру и по 
общим вопросам (Рис. 7.24). / 

Следующие контактные сведения организации 
б^а'т доступны на любой странице веб-узла. 

Отмена | { < Назад | Далее > | | Готово 

Рис. 7.24.Седьмой диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

> Заполните поля, как показано на рисунке, и нажмите кнопку Далее (Next). На 
экране 
появится заключительный диалог мастера, в котором сообщается об успешном 
завершении 
работы (Рис. 7.25). 


Создание Web-сайтов 

_• Мастер созданий корпорсливного ееб-чэл 

Мастер получил ответы на все вопросы, 

необходимые для создания корпоративного 

веб-уэла, 

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

В Доказать "Задэ^н" после за! 

Рис. 7.25. Заключительный диалог Мастер создания корпоративного Web-узла 
(Corporate Presence Web Wizard) 

> Сбросьте флажок Показать "Задачи" после загрузки Web-узла (Show Tasks View 
after Web site is uploaded) и нажмите кнопку Готово (Finish). Мастер создаст 
макет 
сайта по указанным данным и откроет его. В заголовке окна программы рядом с 
названием 
появится путь к папке сайта. 

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

Желательно сразу дать сайту определенное название вместо присвоенного по 
умолчанию. 

Общие | Параметры! Дополнительно | Язык | Переходы'{База данных| 

Имя веб-узла: 

|ной_узсл 

Расположение: C:\Documents and Settings\Vastty\My Documents\MoH ве.
-уэлы\мой_уэел 

Версия серверных 6.0.2.5516 
расширений FrontPage: 


Версия сервера: Ни один сервер не используется 

Q Использовать извлечение и возврат документов 

О Ижпаа» ф»йяы ю уд>—i кого wg-умц | Паранатрц... 

© Ижпачь файлы и» д ж апьиого мб-уэпл 

•.".'^Documents end 5tftMnQ5yvl<v;!iyU--ly Рошмег^.Мом 5вб-уэ*1\мой._уэел 
G Пр*А'«Г4Ть н»л»чь файл при отгг^тии страницы 

Рис. 7.26. Вкладка Общие (General) диалога Параметры узла (Site Settings) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• Выберите в меню программы команду Сервис • Параметры узла (Tools • Site 
Settings). 
На экране появится диалог Параметры узла (Site Settings) с открытой вкладкой 
Общие (General) (Рис. 7.26). 

> В поле ввода Имя Web-узла (Web name) укажите новое имя сайта, например 
соответствующее 
названию компании, и нажмите кнопку ОК. Сайт будет переименован, название 
папки сайта также изменится. 

Сейчас Web-узел отображается в рабочем окне программы FrontPage в представлении 

Папки (Folders), в котором можно просматривать папки и файлы сайта (Рис. 7.27). 


И Miciosolt FiontPage - CADocumenls and SellingsWasilyVMy DocumenUWou 
веб-узльЛТдрагентство 
' Файл ПР<*вка Ёид Вставка Формат Сервис 1аблнца Данные Рамки QKHO .лравка 


*!•*! 

jl ж А-н I ш т т ш | А **11= В | ffl • Ж 

Список папок D ЁЭ X 

.3 C:\Documents and Setting; 

Содержимое "C:\DocumentS and 5ettings\tfasiy\My Documents\MoM 
ве6-уэлы\Турагеитство" 

S *Ь -borders 

l Название Размер [ Tun I Изменен \ Кем изненен 

i* .D Jpdass 

.borders 

; |й) JhemeS r j private 

^ ) themfts 

^images 
Д index.htm Домой 2KB htm 25.08.2004 0:20 VAS^Vastfy 

1 SB у даленяый веб-узел ©Отчеты ^Переходы й Гиперссылки Ф Задачи 

m 

j|no умолчанию Цнастройка j 

Рис. 7.27. Созданный мастером сайт 

В папке сайта мастер помещает файл домашней страницы, обычно имеющий название 
index.htm. Кроме этого, FrontPage создает в папке нового сайта несколько 
вложенных 
папок, например: images для хранения рисунков и _private для хранения 
скрытых документов. Файлы и папки, помещенные в папку „private, не могут быть 
просмотрены посетителем сайта с помощью браузера. В ходе дальнейшей работы, в 
зависимости от элементов и средств, используемых при. проектировании сайта, 
FrontPage может создавать в папке сайта дополнительные файлы и вложенные папки. 

Вы можете создать собственные вложенные папки в папке сайта, например, для 
хранения звуковых файлов. Для этого можно нажать кнопку (^] в верхней части 
панели, 
в которой отображается дерево папок. Другой способ создать новую папку щелкнуть 

правой кнопкой мыши на свободном пространстве рабочего окна и в появившемся 
контекстном меню выбрать команду Создать • Папка (New • Folder). 


Создание Web-сайтоз 

> Закройте дерево папок в левой части рабочего окна, нажав кнопку [х]> 
расположенную 
в правом верхнем углу панели с деревом папок. 

> Дважды щелкните мышью на файле index.htm в папке сайта. Домашняя страница 
будет открыта на отдельной вкладке и будет установлен режим Конструктор 
(Design) 
для ее редактирования (Рис. 7.28). 

JptjMicrosoft FrontPage - tADocumonts and SettingsWasily\My Documents\MoH 
веб-узлы\Турагентство\т<1ех.М 

Правка В ид В ставка Ф ормат Сервис Таблица Данные Рамки Окно Справк а 

3 [12 пт) . | Ж К Ч \Ш 

! IА *' I В В I Ш 

Е 

[Измените свойства этой панели для отображения на нейгиперссылок] 

[Измените Примечание: Разместите здесь вводный абзац домашней страницы. Его 
свойства можно считать местом входа на ваш веб-узел. Пригласите возможных 
этой панели посетителей заглянуть на минутку для беглого знакомства. 
для 
отображения 
на ней 

Всразделением Еко д QnpocMOTpjI* I 

Х! Ш np« bS *.6iir/c 773x373 !гю умолчанию настройка 

Рис. 7.28. Домашняя страница макета сайта 

Итак, перед вами первая страница сайта, а точнее макета сайта, созданного 
мастером. Страница 
разделена пунктирной линией на несколько областей. В верхней области находится 
навигационное меню (navigation bar) - это группа ссылок или кнопок для перехода 
к основным 
разделам сайта и на соседние страницы. В данном 

Свойства объявления на странице 

случае навигационное меню содержит единственную 

Свойства * 

ссылку Домашняя (Ноте), поскольку в нашем сайте тюка 
только одна страница. 

О Текст 

Текст объявления 

Ниже находится заголовок (Page Banner) с названием 

|домой 

страницы Домой (Номе). 

>• Чтобы изменить заголовок, дважды щелкните на нем. 
Откроется диалог Свойства объявления на странице 
(Page Banner Properties) (Рис. 7.29). Рис. 7.29. Диалог Свойства 

объявления на странице 

>• В поле ввода Текст объявления (Page banner text) 

(Page Banner Properties)

введите новый заголовок, например Туристическое 
агентство. 



Создание Web-сайта с помощью Microsoft FrontPage 2003

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

>• Нажмите кнопку ОК. Диалог Свойства объявления на странице (Page Banner 
Properties) 
закроется, и новый заголовок будет отображен в верхней области страницы. 

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

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

В центральной области располагается основное содержимое страницы. При создании 
макета сайта с помощью мастера сюда могут быть помещены примеры создания 
различных 
элементов: заголовки, текст, списки, формы и т.д., которые потом можно удалить 
или 
изменить нужным образом. Мастер также вставляет на страницу примечания. Они 
выделены 
сиреневым цветом и начинаются со слова Примечание (Comment). Вы можете сами 
добавлять комментарии, касающиеся особенностей проектирования страницы. Для 
этого 
необходимо в меню программы выбрать команду Вставка • Примечание (Insert • 
Comment). Примечания, естественно, не будут видны в браузере. 

Сделаем некоторые настройки, относящиеся к странице в целом. 

>- Щелкните правой кнопкой мыши в любой области страницы и в появившемся 
контекстном 
меню выберите команду Свойства страницы (Page Properties). На экране появится 
диалог Свойства страницы (Page Properties) с открытой вкладкой Общие 
(General) (Рис. 7.30). 

>• В поле ввода Название (Title) укажите текст, который будет появляться в 
заголовке 
окна браузера при просмотре страницы. Обычно он соответствует заголовку 
страницы 
или названию раздела сайта. 

>• Выберите вкладку Язык (Language) (Рис. 7.31). Скорее всего, вы будете 
размещать 
русскоязычную информацию на страницах сайта, поэтому в открывающемся списке 
Пометить текущий документ, указав (Mark current document as) выберите Русский 
(Russian), если у вас указан другой язык. 

Указание языка для страницы позволяет выполнять автоматическую проверку 
орфографии 
при вводе текста. 

>• Нажмите кнопку ОК, чтобы сохранить настройки и закрыть диалог Свойства 
страницы 
(Page Properties). 


Создание Web-сайтов; 

{Свойства страницы 

Общие j Форматирование [Дополнительно [Другие | Язык [ Рабочая группа | 

Расположение: 

|f Не; ///С: /Documents and Settings/Vasily/My Documents/Mo^ 
Название: 

{Туристическое агентство 1 

Описание страницы: 

Ключевые слова: 

Базовое расположение: 
Конечная рамка по умолчанию: Г 


Фоновый звук — — 
Расположение: 


J | Обзор... ] 
Число повторов: И Непрерывно 

Отмена 

L ок 

Рис. 7.30.Вкладка Общие (General) диалога Свойства страницы (Page Properties) 

| Свойства страницы 

Общие | Форматирование | Дополнительно | Другие | Язык I Рабочая группа I 
Язык страницы • 
Пометить текущий документ, указав: 


Набор знаков 
Сохранить документ, используя: 


кириплица 
Повторить загрузку текущего документа, используя: 
I <автоматический выбор> 


ОК JL Отмена 

J 

Рис. 7.31. Вкладка Язык (Language) диалога Свойства страницы (Page Properties) 

В редакторе FrontPage имеются настройки, позволяющие управлять совместимостью 
сайта с определенными браузерами и Web-серверами. От них зависит доступность 
ряда 
команд в меню программы. Более подробно о вопросах совместимости мы поговорим 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

в отдельном опыте, а пока проверим и установим соответствующие настройки так, 
чтобы 
были доступны все команды. 

> Выберите команду меню Сервис • Параметры страницы (Tools • Page Options). 
На экране появится диалог Параметры страницы (Page Options). 

>• Выберите вкладку Разработка (Authoring) (Рис. 7.32). 

Общие || Автоэскизы || Шрифты по умолчанию | Форматирование кода | Цветовое 
выделение синтаксиса 
Разработка Рисунок Фрагменты кода Линейка и сетка InteifiSense 

^ри измемении этих

|\ параметров некоторые элементы меню и диалоговых окон могут стать 
недоступными. 

Технологии FrontPage и SharePoint: 
{настройка 


0 службы SharePoint Services О |теги Generator и ProaJDj > 
ЕЗ веб-компоненты времени просмотра В графика VM (рисование Office) 
ШЦ веб-компоненты времени разработки Ы\ файлы точечных рисунков 


0 переходы 
П общие границы 


обозреватели: Версии обозревателей: 
настройка 


и 1 а 

EI домвнты ActiveX IJ3 самки 
ЕЗ сценарии. VBScript 151 страницу ASP 
El CSS 1.0 (форматирование) 
Е приложения Java В C5S 2.0 (положение) 
В графика PNG 


Версиа схемы; 
(internet Explorer 5.0 


Izi 

OK | Отмена 

Рис. 7.32. Вкладка Разработка (Authoring) диалога 
Параметры страницы (Page Options) 

> В открывающихся списках Обозреватели (Browsers) и Версии обозревателей 
(Browser versions) выберите пункт Настройка (Custom), если там установлены 
другие 
значения. 

> В открывающемся списке Технологии FrontPage и SharePoint (FrontPage and 
Share-
Point technologies) выберите Все (Complete). 

> Нажмите кнопку ОК, чтобы сохранить настройки и закрыть диалог Параметры 
страницы 
(Page Options). 

Итак, можно начинать оформление первой страницы. Начнем с простого - ввода и 
форматирования 
текста. 

. Создаем текст и списки. Бегущая строка 


Ввод текста на страницу в редакторе FrontPage осуществляется аналогично тому, 
как это 
делается в текстовом редакторе, например в MS Word. 


Создание Web-сайтов 

Убедитесь, что у вас открыта домашняя страница созданного в прошлом опыте сайта 

в режиме редактирования Конструктор (Design). Если это не так, дважды щелкните 
мышью на файле index.htm в представлении сайта Папки (Folders). 

Щелкните на тексте примечания в центральной области страницы, чтобы выделить 
его, и нажмите клавишу И0*1*1*!. Примечание будет удалено, а текстовый курсор 
останется 
в начале первой строки. 

Введите следующий текст: 

Fnterl

Мы рады приветствовать вас на нашем сайтеЗдесь вы сможете найти информацию об 
услугах, предоставляемых нашей 

iEnterl

компанией

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

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

> Установите текстовый курсор на первой строке введенного текста и в 
открывающемся 
списке Стиль (Style) на панели инструментов Форматирование (Formatting) 
выберите 
Заголовок 2 (Heading 2). Строка будет отформатирована данным стилем. 

Выбранный стиль применяется целиком к текущему абзацу. Абзац - это блок текста, 
отделенный 
от другого символом конца абзаца (Ц). В формате HTML абзац выделяется 
специальными 
тегами. В редакторе FrontPage ввод абзаца завершается нажатием клавиши 

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

(J) с помощью команды меню Вставка • Разрыв (Insert • Break) или нажатием 
комбинации 
клавиш lShml+fEnterl. 
Чтобы увидеть символы конца абзаца и разделителя строки, щелкните на кнопке 
на панели инструментов Стандартная (Standard). При повторном нажатии на эту 
кнопку разделители будут скрыты. 

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

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

> Во второй строке набранного текста выделите с помощью мыши или клавиатуры 
первые 
четыре слова Здесь вы сможете найти, а затем выберите в меню команду Формат • 
Шрифт (Format • Font). На экране появится диалог Шрифт (Font) (Рис. 7.33). 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Шрифт I ^узна^'ыйТжт^агП 

Шри&т; Начертание: Размер: 

полужирный 3 (12 пт) 

обычный 
4 (14 лт) •" 
5(18лт) р 

полужирный курсив 6 Р4 пт) i _ 
'(Зблт) . 

Цвет: 

Видоюменение 

П подчеркнули О малье прописные П пример 
Q зачеркнутый G все прописные П определение 
О надчеркнутый G первые прописные П с_сылка 
Q мерцание П скрытый Q переменная 
О надстрочный П жирный П клавиатура 
П подстрочный. G курсив 

Просмотр 

АаБбЮюЯя 

Рис. 7.33. Диалог Шрифт (Font) 

В верхней части диалога расположены списки для выбора атрибутов шрифта: Шрифт 
(Font), Начертание (Font Style) и Размер (Size), которые имеются во всех 
стандартных 
диалогах выбора шрифта. Чуть ниже расположен открывающийся список для выбора 
цвета шрифта (Color) и набор флажков Видоизменение (Effects) для задания 
различных 
эффектов. В поле Просмотр (Preview) отображается пример текста с выбранными 
настройками. 
Настройки межсимвольных промежутков и положения в строке используются 
реже и вынесены на отдельную вкладку Межсимвольный интервал (Character Spacing).
 

> Выберите какие-нибудь нестандартные настройки для выделенного фрагмента, 
например: 
шрифт АпаГ, стиль Полужирный (Bold). 

>• Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки к 
тексту. 

Если в представлении Страница (Page) вы выберете режим Код (Code) или С 
разделением 
(Split), нажав соответствующую кнопку в нижней части вкладки index.htm, то 
увидите, 
как выбранные атрибуты текста будут сохранены в виде соответствующих тегов. 

>• Убедитесь, что текстовый курсор остался на второй строке набранного ранее 
текста и 
выберите в меню команду Формат • Абзац (Format • Paragraph). На экране появится 

диалог Абзац (Paragraph) (Рис. 7.34). 

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

Открывающийся список Выравнивание (Alignment) задает способ выравнивания строк 
на странице. Группы элементов управления Отступ (Indentation) и Интервал 
(Spacing) 
предназначены для регулирования отступов и интервалов для строк абзаца. 

> Нажмите кнопку ОК, чтобы закрыть диалог Абзац (Paragraph). 


Создание Web-сайтов 

)тступ — 
слева: 
справа; 
М переаа строка: 
Интервал 
гчред: 
после: 
JH 
бинарный 
между слов: |сГ 
Образец 

Рис. 7.34. Диалог Абзац (Paragraph) 

> Выберите в меню команду Формат • Границы и заливка (Format • Borders and Shad 

ing). На экране появится диалог Границы и заливка (Borders and Shading) (Рис. 7.
35). 

Границы и заливка 

Стиль: Образец 
сплошная Для добавления границ 
точечная используйте следующие 
пс умолчанию пунктир кнопки 
двойная 
желобок 
рубчик 
углубление 
возвышение 
другая 
Цвет: 
I D Авт. 
Ширина: 

Верхнее: 

~Щ Ьижнее: 

Отмена

 I

ок 

Рис. 7.35. Вкладка Граница (Borders) диалога Границы и заливка (Borders and 
Shading) 

Вкладка Граница (Borders) содержит элементы управления, позволяющие задать 
границу 
вокруг текста абзаца. 
> В группе элементов управления Тип (Setting) выберите позицию рамка (Box). 
>• В списке Стиль (Style) выберите тип рамки, например двойная (Double). 



Создание Web-сайта с помощью Microsoft FrontPage 2003 

Вы можете задать Цвет (Color) и Ширину (Width) рамки, а также установить Поля 
(Padding), 
т.е. отступы от рамки до текста. В панели просмотра Образец (Preview) можно 
увидеть пример рамки с выбранными атрибутами, а также включить или отключить 
видимость 
произвольных сторон рамки с помощью кнопок ||::Е1|, [ЕВ], ш_ и |Ш|. 

>• Выберите вкладку Заливка (Shading) для выбора цвета и способа заливки фона 
абзаца 
(Рис. 7.36). 

Образец 

Цвет фона: 

|Ю Авто 

Цвет, текста: 

| • Авто 

Уюр 

Фоновый рисунок: 

Положение по вертикали: •_ц| Ожтовить: 

Палиям* по сориэаит«пгс I 1*\ Поосоадинение: 

ОК ) Отмена | 

Рис. 7.36. Вкладка Заливка (Shading) диалога Границы и заливка (Borders and 
Shading) 

> В открывающемся списке Цвет фона (Background color) выберите произвольный 
цвет 
фона. 

На данной вкладке для всего абзаца можно также задать Цвет текста (Foreground 
color) и 
установить произвольный Фоновый рисунок (Background picture). 

>• Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки. 

> Выберите представление Просмотр (Preview), нажав соответствующую кнопку в 
нижней части вкладки index.htm. Страница будет отображена в том виде, в каком 
она 
будет выглядеть в окне браузера (Рис. 7.37). 

На странице должен быть виден введенный текст, но видны и линии разметки. 

>• Снова переключитесь в режим Конструктор (Design) представления Страница 
(Page), 
нажав соответствующую кнопку в нижней части вкладки index.htm, чтобы вернуться 
к редактированию страницы. 


280 Создание Web-сайтов 

К Miciosofl FrontPage - C:\Documents and Settings WasilvSMii Documents\MoH иеб 
азл|ЛТ<|рагентстео\тс)ек htm 
.айл Правка .ид Вставка Формат Сервис Т_аблица Данные .амки Дкно Справка 


II 1 -II Ж К Ч IA *'li=i= 

веб-узел 

Туристическое агентство 

[Измените свойства этой панели для отображения на ней гиперссылок] 

[Измените Мы рады приветствовать вас на нашем сайте 

свойства 
этой паи&ли 
для Здесь вы сможете найти информацию об услугах, предоставляемых 
отображения 
на ней 


чашей компанией 

гиперссылок] 

Отправить сообщение дл: we. о т с вопросами и замечаниями об этом веб-узле. 
Дата изменения: 25,08.2004 


Е 

ОКонструктор В С разделением Е)КодИ 

•|730 к ЗЭ8 Цвсе Цнастройка_ 
Рис. 7.37. Пример форматирования текста 

Теперь уберем форматирование со второго абзаца. 
>• Выделите с помощью мыши или клавиатуры второй абзац текста. 
> Выберите в меню команду Формат • Удалить оформление (Format • Remove 

Formatting). Шрифт абзаца будет приведен к исходному, используемому по 
умолчанию. 

Данную команду можно использовать для того, чтобы быстро удалить элементы 
форматирования 
текста и вернуться к формату, используемому по умолчанию, 
>• Выберите в меню команду Формат • Границы и заливка (Format • Borders and 
Shad


ing). На экране появится диалог Границы и заливка (Borders and Shading) (Рис. 7.
35). 
> В списке Стиль (Style) выберите Нет (None). 
> Выберите вкладку Заливка (Shading) и в открывающемся списке Цвет фона (Back


ground color) выберите цвет Авто (Automatic). 
>- Нажмите кнопку ОК, чтобы закрыть диалог Границы и заливка (Borders and 
Shading) 
и применить выбранные настройки. Фоновый цвет и рамка в текущем абзаце буду! 
удалены. 

В тексте нередко используются различного рода списки или перечисления. Список в 
редакторе 
FrontPage создать так же просто, как и в обычном текстовом редакторе. 
> Установите текстовый курсор ниже, под уже введенным текстом и наберите еще не


сколько строк, завершая каждую нажатием клавиши ilEnlerl: 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

llEnterl

Мы предлагаем

Туры по зарубежным странам llEnterl 
СНГ |[Enterl

Туры по странам

Путевки на лучшие курорты России 

Авиабилеты на внутренние и международные рейсы JFnterl 

>• Установите текстовый курсор на первой строке введенного текста и в 
открывающемся 
списке Стиль (Style) на панели инструментов Форматирование (Formatting) 
выберите 
Заголовок 2 (Heading 2). Строка будет отформатирована данным стилем. 

>• Теперь выделите остальные строки введенного текста - со второй по пятую - с 
по


мощью мыши или клавиатуры и нажмите кнопку ,;~| на панели инструментов 
Форматирование 
(Formatting). Набранный текст будет преобразован в маркированный 
список. 

Вид маркированного списка можно выбрать в диалоге Свойства списка (List 
Properties) 
(Рис. 7.38), который вызывается командой меню Формат • Список (Format • Bullets 
and 
Numbering). 

Свойства списка 

О Включить свертываемые структуры 

• .м«чапьно свернуть 
ОК J 

Рис. 7.38.Вкладка Графические маркеры (Picture Bullets) 
диалога Свойства списка (List Properties) 

На вкладке Графические маркеры (Picture Bullets) для списка можно выбрать 
рисунок 
маркера либо из текущей темы, либо задать любой рисунок. Количество вкладок в 
диалоге 
Свойства списка (List Properties) зависит от выбранной темы. Тема 
предварительно 
выбирается в области задач после выполнения команды меню Формат • Тема (Format 
• 
Theme). 


Создание Web-сайтов 

На вкладке Нумерация (Numbers) диалога Свойства списка (List Properties) можно 
выбрать 
вариант нумерации для создания упорядоченного списка. Чтобы быстро превратить 
текст в нумерованный список, можно воспользоваться кнопкой |f~| или выбрать 
соответствующий 
стиль в открывающемся списке Стиль (Style) на панели инструментов 
Форматирование 
(Formatting). 

Кроме обычных списков с номерами или маркерами, можно создать так называемый 
Список определений (Definition List) (Рис. 7.39). Он состоит из набора терминов 
(Defined 
Term) и их определений (Definition). Для создания такого списка нужно 
воспользоваться 
соответствующими стилями. 

Правка Вил Избранное Сервис 

!•»-•»-ОВДI€ ЛS i Щ. 

| Адрес |.] hllpV/bolizm.ihep.iu/Libaf/1nteinet.Gioen/oto»aiy.engfcth_hlml Rl 
^Пережщ \] Ссылки 

Английские термины и аббревиатуры 

AAR 
Automatic Alternative Routing - автомата» скал альтернативная маршрутизация. 
Маршрутизация с автоматическим обходом неисправных^/лов. 

ACD 

1. Automatic Call Distribution • автоматическое распределение вызовов. В 
системах 
телефонной связи. 
2. Automatic Call Distributor - устройство автоматического распределения 
вызовов. 
ACIA 
A synchronous Conununicationf Interface Adapter" адаптер асинхронной связи. 

ACM 
Association for Computing Machinery * ассоциация по вычислительным машинам. США.
 
Основана в 1947 г как общество специалистов по компьютерам. Имеет своей целью 
способствовать развитию методов обработки информации как научной дисциплины и 
ответственному использованию компьютеров в возрастающем многообразии приложений,
 
свободному обмену информацией между специалистами и общественностью, повышать и 

поддерживать единство и способности отдельных личностей в данной области знаний.
 

Готово \\Щ Интернет 

Рис. 7.39. Пример списка определений 

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

> Установите текстовый курсор на странице в начало строки, перед словами Мы 
предлагаем, 
и выберите команду меню Вставка • Горизонтальная линия (Insert • Horizontal 
Line). На страницу будет вставлена горизонтальная линия. 

>- Дважды щелкните мышью на разделительной линии. На экране появится диалог 
Свойства горизонтальной линии (Horizontal Line Properties) (Рис. 7.40). 

Группа элементов управления Размер (Size) позволяет изменить ширину (Width) и 
высоту 
(Height) линии. С помощью переключателей Выравнивание (Alignment) линию можно 
выровнять по левому краю (Left), по центру (Center) или по правому краю (Right).
 Флажок 
Сплошная линия (без заливки) (Solid line (no shading)) делает линию сплошной. 

>• В открывающемся списке Цвет (Color) выберите произвольный цвет для линии и 
нажмите 
кнопку ОК. Разделительная линия будет окрашена выбранным цветом. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Ширима: |100 |r j Высота: |2 Щ (в точках) 

@ в праиентах от ширины окна 
О вторах 

Выравнивание: .. .. 
О подавому краю 
© по центру 
О по правому краю 

Цвет: 

I D Авто N 1 П Сплошная линия (без мливки) 

| Стиль... ] 

Рис. 7.40. Диалог Свойства горизонтальной линии (Horizontal Line Properties) 

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

> Выделите первую строку набранного на странице текста Мы рады приветствовать 
вас на нашем сайте. 

> Выберите команду меню Вставка • Web-компонент (Insert • Web Component). На 
экране появится диалог Вставка компонента Web-узла (Insert Web Component) 
(Рис. 7.41). 

Вставка компонента веб-узла 
Тип компонента: Выберите эффект: 


• •' E'ldiMMfchi.Virrniin 
ед Поиск в Интернете 


^ 5 Интерактивная кнопка 
{ Д Электронные таблицы и 
ЩИ Счетчик посещении 
Коллекция фотографий 
Включенное содержимое 
Д1Я Панели ссылок 
[ Л Оглавление 
Щ] Лучшая десятка 
Jf j Предел аьпемие списка ^ 


Горизонтальная прокрутка текста на экране. 

Поиск компонентов 
в Интернете 


I Отмена |[ <Нюад [ Далее > | [ Готово ] 

Рис. 7.41. Диалог Вставка компонента Web-узла(Insert WebComponent) 

В списке Тип компонента (Component type) можно выбрать один из доступных 
компонентов, 
а в списке Выберите эффект (Choose an effect) - вариант выбранного компонента. 
Сейчас выбран динамический эффект Бегущая строка (Marquee). 

>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства бегущей 
строки (Marquee Properties) (Рис. 7.42). 


Создание Web-сайтов 

• Свойства бегущей строки 
Текст: |Мы рады приветствовать вас на нашем сайте 

Направление — Скорость Поведение 
© налево © прокрутка 
О направо О сдвиг 
О попеременно 

"Размер""™-— "Повторы 
О BTCJ4K4X 12 Непрерывно 

П Ширина: 

О Высота: 
О епроцентах 

Цвет фона: 

[_П_Ав 

Стиль... Отмена 

Рис. 7.42. Диалог Свойства бегущей строки (Marquee Properties) 

В поле ввода Текст (Text) находится текст выделенного фрагмента, который будет 
выводиться 
как бегущая строка. С помощью переключателя Направление (Direction) можно 

•выбрать направление движения строки: справа налево (Left) или слева направо 
(Right). 
В группе элементов управления Скорость (Speed) регулируется задержка между 
последовательными 
сдвигами текста (Delay) и величина сдвига в пикселах (Amount). Группа 
элементов управления Поведение (Behavior) задает режим перемещения текста: при 
установке 
переключателя прокрутка (Scroll) текст периодически пробегает по экрану, как 
на информационном табло, при установке переключателя сдвиг (Slide) текст 
перемещается 
до противоположной границы, останавливается и остается на экране, при установке 

переключателя попеременно (Alternate) текст перемещается внутри границ области 
бегущей 
строки. Группа элементов управления Размер (Size) определяет ширину (Width) и 
высоту (Height) прямоугольной области бегущей строки. Если соответствующие 
флажки 
сброшены, то значения определяются по размеру текста. Установленный флажок 
Непрерывно 
(Continuously) в группе элементов управления Повторы (Repeat) задает 
неограниченное 
число повторений прокрутки строки; если флажок сброшен, то в поле ввода со 
счетчиком задается количество повторений. Открывающийся список Цвет фона 
(Background 
color) определяет цвет фона в области перемещения бегущей строки. 
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства бегущей строки (Marquee 
Properties). Текст заголовка внешне не изменится, но будет преобразован в 
отдельный 
компонент. 

> Эффект бегущей строки нельзя наблюдать в режиме редактирования страницы, 
поэтому нажмите кнопку Просмотр (Preview) в нижней части вкладки index.htm, 
чтобы переключиться в режим просмотра страницы и увидеть бегущую строку 
(Рис. 7.43). 

> Вернитесь к режиму редактирования страницы, щелкнув мышью на кнопке 
Конструктор 
(Design) в нижней части вкладки index.htm. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

KJ Miciosofl FionlPage - C:\Do merits and SetlingsWasily\My Doc 

Правка Дна Вставка Фордах Сервис Хаблица Данные Рамки Дкно Справка 

ж к в I ш т т ш | А *' 11= := * РI Ш - Е • J" 

Туристическое агентство 

{Измените свойства этой панели для отображения нэ ней гиперссылок] 

(Измените Мы рады приветствовать вас на нашем сайте 
свойства 
этой панели 


ЭЛесь вы сможете найти информацию об услугах, предоставляемых нашей компанией 

для 

отображения 
на ней 
гиперссылок] 


Мы предлагаем 

• Туры по зарубежным странам 
• Туры по странам СНГ 
• Путевки на лучшие курорты России 
ОКонструктор В С разделением Вко . 

|7Э0 х 398 все Цнастройу i 

Рис. 7.43. Бегущая строка,разделительная линия и список 

Чтобы отредактировать текст бегущей строки или изменить его свойства, 
необходимо 
снова вызвать диалог Свойства бегущей строки (Marquee Properties), дважды 
щелкнув 
мышью в области текста. Попробуйте изменить настройки бегущей строки и 
посмотрите, 
как это будет выглядеть в режиме просмотра страницы. 

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

позволяет загружать и конвертировать информацию из основных форматов текстовых 
документов и документов MS Office. Если, к примеру, требуется вставить фрагмент 
текста 
страницы, взяв его из обычного текстового файла, необходимо сделать следующее. 

> Установите текстовый курсор на странице в позицию, начиная с которой будет 
располагаться 
вставленный текст. 

>• Если файл содержит текст на русском языке, проверьте, что выбран русский 
язык ввода 
для клавиатуры. Если это не так, переключитесь на русский язык. При загрузке и 
преобразовании текстового файла FrontPage установит язык в соответствии с 
текущим 
языком ввода. 

> Выберите команду меню Вставка • Файл (Insert • File). На экране появится 
стандартный 
диалог открытия файла Выбор файла (Select File) (Рис. 7.44). 


Создание Web-сайтов 

Выбор Файла 

Папка: | Мои документы 1Е? ИЗ


Й1 Adobe 

lamla.ia Studio 
3 | Corel Usei Files 
UlMy eBook. 


Ну Received File» 
2|M» Virtual Machines 
Si PGP 

Jкаталог CD 
^Мои веб-узлы 
9Мои видеозаписи 
^Мои рисунки 
2Мои рисунки 
5 Моя музыка 

Имя Файла: 

Хил Файлов: [Файлы HTML С hlm;'html) Отмена 

Рис. 7.44. Диалог Выбор файла (Select File) 

> В открывающемся списке Тип файлов (File Type) выберите тип Текстовые файлы 
(\txt) (Text files (*.txt)). 

>• Найдите и выделите нужный текстовый документ. 
Для примера можно взять один из текстовых документов из папки, в которой 
установлена 
операционная система Windows. 


> Нажмите кнопку Открыть (Open). Диалог Выбор файла (Select File) закроется, и 
на 
экране появится диалог Преобразование текста (Convert Text) (Рис. 7.45). 

Преобразование текста 

Преобразовать текст в: 
О один отформатированный абзац 

0 ртформатироеаннью ^заць|| 

О обычные абзацы 

О обычные абзацы с разрывами строк 

О ае преобразовывать 

СЖ JL Отм 

Рис. 7.45. Диалог Преобразование текста (Convert Text) 

Этот диалог позволяет выбрать способ преобразования текста из файла. По 
умолчанию 
предлагается вариант отформатированные абзацы (Formatted Paragraphs). Это 
означает, 
что каждый абзац исходного текста будет преобразован в отдельный абзац на 
странице. 
Причем для форматирования будет использован стиль С форматом (Formatted). 
Напомним, 
что стиль текста выбирается и отображается в открывающемся списке Стиль 
(Style) на панели инструментов Форматирование (Formatting) 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Возможны и другие варианты: 

• один отформатированный абзац (One formatted paragraph) -преобразование всего 
текста в единый абзац с использованием разделителей строк и стиля С форматом 
(Formatted); 
• обычные абзацы (Normal paragraphs) -преобразование исходного текста в 
отдельные 
абзацы со стилем Normal; 
• обычные абзацы с разрывами строк (Normal paragraphs with line breaks); 
• не преобразовывать (Treat as HTML) -вставка исходного текста непосредственно 
в 
формате HTML. 
> Нажмите кнопку (Ж, чтобы закрыть диалог Преобразование текста (Convert Text). 

Текст из файла будет вставлен в текущую позицию. 

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

Om^i/пь J№4. Добавляем страницы в макет сайта. 

Структура навигации иобщие границы 

При проектировании сайта важно хорошо продумать схему возможных переходов с 
одной 
страницы на другую с помощью внутренних ссылок. Такая схема называется 
структурой 
навигации (navigation structure). Структура навигации должна быть, прежде всего,
 
удобна и понятна для посетителей сайта. Схема переходов не должна быть сложной 
и 
запутанной, и в то же время на сайте не должно остаться недоступных страниц. 

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

> Выберите команду меню Файл •Создать (File •New). В правой части рабочего окна 

программы появится Область задач (Task Pane) с активной задачей Создание(New) 
(Рис. 7.16). 

В разделе Создать страницу (New Page) Области задач (Task Pane) щелкните мышью 
на ссылке Другие шаблоны страниц (More page templates). На экране появится 
лияттпг
гг Шяйпони гтпании ГРя<трTpmniatp.s'l ^Риг 7 &.fs\

диало Шаблоны страниц (Page Templates) (Рис. 7.46). 

В этом диалоге можно выбрать шаблон для новой страницы. В программе FrontPage 
имеется достаточно большой набор шаблонов, с помощью которых можно создать 
определенным 
образом скомпонованную и оформленную страницу. Затем останется лишь 
наполнить ее необходимым содержанием: текстом, рисунками и т.п. При выборе 
шаблона 
исходный вид страницы отображается справа в поле Образец (Preview), а в поле 
Описание 
(Description) выводится описание шаблона. 


Создание Web-сайтов 

Общие | Страница рамок | Таблицы стилей | 

Библиогра... Гостевая Коллекция Параметры •—•--—-•• книга 
фотографий D Добавить в.еб-задание 
О ОИфЫТЪ 6 Т 
Описание 
Мастер Оглавление Регистраци... Страница Создание пустой веб-страницы. 
страни... форма поиска 

Образец 

Типичные Форма Форма 
вопросы обрати.,. подтвержд... 

L JL 

Рис. 7.46. Диалог Шаблоны страниц (Page Templates) 

> Выберите шаблон Обычная страница (Normal Page), который служит для создания 
пустой страницы, и нажмите кнопку ОК. В рабочей области программы появится 
новая 
вкладка с пустой страницей1. 

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

> Выберите в меню команду Файл • Сохранить (File • Save). На экране появится 
стандартный 
диалог сохранения файлов Сохранить как (Save As) (Рис. 7.47). 

Пика: [SB Турагентство __ [jj • • В I в X тЫИ 

Название: Новая страница 1 Изменит!.... |

щ Ы

Имя файла: |ное_стр_1 

Мое сетевое 
окружение 

Тип файле: 

1 Веб-страницы 

ы 

Рис. 7.47. Диалог Сохранить как (Save As) 

1 Для быстрого создания новой пустой страницы можно воспользоваться также 
комбинацией клавиш(
Щ + Щ, 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

> В поле Имя файла (File Name) введите имя файла страницы, например news. 
Нажмите кнопку Сохранить (Save). Диалог Сохранить как (Save As) закроется, и 
страница будет сохранена на диске. 

> Описанным выше образом создайте и сохраните в папке сайта еще три страницы 
например 
для общего описание услуг'services и для описания туров touri и tour2. 
Вкладки этих страниц появятся в рабочем окне программы FrontPage. 

>• Нажмите комбинацию клавиш I! ctrl I+|F1I, чтобы скрыть область задач. 

> Нажмите комбинацию клавиш I Al t l+i|F1l, чтобы показать Список папок (Folder 
List). 

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

>- Выберите команду меню Вид • Переходы (View • Navigation). Программа 
переключится 
в представление Переходы (Navigation), и в ее рабочем окне будет отображена 
схема навигации (Рис. 7.48). 

.Э C:\Documents end Setting 

f ^.borders 

(• .2) „overlay 
i . 3 jwtvate 
I ^ t _thefr»es 
fi ^images 


[ news.htm 
f services.htm 
ftourl.htm 


ЭТО представление отобрашавт структуру переходов 

(tour2.htm 

веб-ysjw Для ветоиатимесксго добавлений кнопок 

переходов на эти страницы выберите команду 'Общие 

границы" в меню "формат". ' 

fT I ЙПапки б Удаленный веб-узел ЕЮтчеты 

Т.". 

Рис. 7.48. Исходный вид схемы навигации 

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

>- Перетащите с помощью мыши файл news из списка файлов сайта (Folder List) на 
схему навигации ниже домашней страницы. На схеме будет установлена связь между 
страницами (Рис. 7.49). 


Создание Web-сайтов 

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

>• Щелкните правой кнопкой мыши на изображении страницы 
на схеме. На экране появится контекстное меню. 

у Выберите в контекстном меню команду Переименовать 

Рис. 7.49. Схема

(Rename). На месте заголовка страницы на схеме появится 

навигации

поле ввода. 

после добавления 
>• Введите заголовок для страницы, например Новости, и новой страницы 

нажмите клавишу llEnterl. 

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

> Поместите на схему навигации другие страницы так, чтобы страница services 
находилась 
на одном уровне со страницей новостей, а страницы с описанием туров были 
связаны со страницей services и располагались на втором уровне. Поменяйте 
заголовки 
для новых страниц (Рис. 7.50). 

Туристическое аг,.. | 

* а
г

г1

Новости Услуги 

R 

г 1 

Египет Греция 

Рис. 7.50. Схема навигации после добавления четырех страниц 

Вы можете менять положение страниц на схеме навигации, перетаскивая их с 
помощью 
мыши на разные уровни или в разные ветки схемы. Можно также создать новую 
страницу 
прямо на схеме, сразу указав для нее родительскую страницу, т.е. ту, под 
которой будет 
располагаться новая. Для этого необходимо щелкнуть правой кнопкой мыши на одной 
из 
страниц схемы и в появившемся контекстном меню выбрать команду Создать • 
Страница 
(New • Page). Чтобы добавить новую страницу на самый верхний уровень схемы, 
нужно щелкнуть правой кнопкой мыши на свободной области схемы и в появившемся 
контекстном меню выбрать команду Создать • Верхняя страница (New • Top Page). 

Как видите, структура навигации является многоуровневой. На первом уровне 
расположена 
домашняя страница, отмеченная значком домика, а также могут присутствовать 
входные страницы основных разделов сайта. Обычно из основного раздела можно 
перейти 
в один из подразделов, оттуда в подраздел следующего уровня и т.д. Переходы 
отображаются 
связями между страницами, находящимися на соседних уровнях. В соответствии 
со схемой навигации FrontPage автоматически обновляет навигационные меню на 
всех страницах. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

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

> Щелкните правой кнопкой мыши на любом месте фона схемы и в появившемся 
контекстном 
меню выберите команду Масштаб (Zoom). Откроется меню второго уровня. 

> Выберите команду По размеру данных (Size To Fit) или нужное значение масштаба.
 

С помощью команды Книжная/альбомная (Portrait/Landscape) в этом же контекстном 
меню можно расположить схему в горизонтальном направлении. 

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

>• Выберите в меню программы команду Сервис • Параметры узла (Tools • Site 
Settings). 
На экране появится диалог Параметры узла (Site Settings). 

>• Выберите вкладку Переходы (Navigation) и укажите названия ссылок для 
перехода 
на домашнюю страницу (Home page), родительскую (Parent page), предыдущую 
(Previous page) и следующую (Next page) страницы в соответствующих полях ввода 
(Рис. 7.51). 

Общи» ^Параметры"! Дополнительно рйьк" ] Переходы |"ба;а датых~| 

Измените необходимым образом следующие надписи на панелях ссылок, 

Домашняя страница: [домашняя 
родительская страница: 
Предыдущая страница: 
Следующая страница: 


|Далее_ 

[ Па умолчанию j 

Рис. 7.51.Вкладка Переходы (Navigation) диалога Параметры узла (Site Settings) 

> Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings) и 
сохранить 
настройки. 

Теперь посмотрим, какие изменения произошли на страницах сайта. 

>• Дважды щелкните мышью на изображении домашней страницы на схеме навигации. 
Будет установлен режим Конструктор (Design) Представления Страница 
(Page) (Рис. 7.52). 


Создание Web-сайтов 

Файл Правка Вид Вставка Формат Сервис Хаблица Данные Рамки Дкно Справка 

j Заголовок 2 • Verdana * з иг mi j 
ж к а I ш ш т ш I А **11= 5= I Ш Список 
папок Q Й веб-узел index.hlm 
^ C:\Documents and Setting ,<body>; <h2> <font> 
:+; . 3 „borders 
:+) 2Э „overlay Г ] jjj j _themes 
) . 3 images 
. f index.htm 
^ news.htm Туристическое агентство 
Щ services.htm 

Щ tout 1.htm 

[Измените свойства этой панели для отображения на ней гиперссылок 

|Иы рады приветствовать вас на нашем сайте 

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

Мы предлагаем 

^^^^Д^Я Не 

;|0:01 при 56Kftifi/с !6U • ..тройка 

Рис. 7.52.' Ссылки в навигационном меню для перехода кразделам Новости и Услуги 


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

> Нажмите и удерживайте клавишу I 
IIctr i I. Подведите указатель мыши к одной из ссылок. 
Указатель примет форму ^J. Щелкните на ссылке. Будет открыта соответствующая 
страница. 

Таким способом можно переходить по ссылкам в режиме редактирования страницы. 
В режиме Просмотр (Preview) и в браузере кнопки навигации работают обычным 
обра\ 
не требуется.

зом, и нажимать клавишу 

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

>• Запустите браузер, нажав кнопку \Ю>\ на панели инструментов Стандартная 
(Standard). 

> Просмотрите сайт в браузере и закройте его, чтобы вернуться к программе 
FrontPage. 

Навигационное меню можно настроить так, чтобы в нем отображались ссылки на 
страницы 
определенного уровня относительно текущего. 

> В режиме редактирования страницы Конструктор (Design) щелкните правой кнопкой 

мыши на одном из навигационных меню и в появившемся контекстном меню выберите 
пункт Свойства панели ссылок (Link Bar Properties). На экране откроется диалог 
Свойства панели ссылок (Link Bar Properties) (Рис. 7.53). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Добавляемые ссылки 


О Родительский уровень Дополнительно; 
О Тот а« уровень • домащняя страница 

О Назад и далее О родительская страница 
Ф (Дочерний ХРОвенЫ 
О Глобальный уровень 
О Дочерние страницы домашней 

Страница размещения панели ссылок 
Связанные с панелью ссылок страницы 
Домашняя страница 
Другие страницы 


ОК Отмена 

Рис. 7.53. Диалог Свойства панели ссылок (Link Bar Properties) 

С помощью переключателей в верхней части диалога Свойства панели ссылок (Link 
Ваг Properties) можно включить в состав меню различные наборы ссылок: 

• ссылки на страницы верхнего, родительского, уровня (Parent level); 
• ссылки на страницы текущего уровня (Same level); 
i/ ссылки на соседние страницы текущего уровня (Back and next); 

• ссылки на страницы нижнего, дочернего, уровня (Child level); 
• ссылки на страницы самого верхнего уровня (Global level); 
\/ ссылки на страницы второго уровня (Child pages under Home). 

Кроме того, с помощью флажков в правой части диалога в состав навигационного 
меню 
можно включить ссылку на домашнюю страницу (Home page) и родительскую страницу 
(Parent page), если это не предусмотрено выбранным набором ссылок. Выбранный 
вариант 
схематически отображается на рисунке в левой части диалога. Текущая страница на 

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

С помощью переключателей в нижней части вкладки Стиль (Style) (Рис. 7.54) можно 

выбрать стиль ссылок, а также горизонтальное (Horizontal) или вертикальное 
(Vertical) 
расположение ссылок в навигационном меню и отобразить ссылки в виде кнопок 
(Buttons) 
или простого текста (Text). 


Создание Web-сайтов 

Свойства панели ссылок. 

Выберите стиль: 

1 


Описание: 
Стиль, основанный на тене страницы. 


Ориентация и внешний вид 
© По горизонтали • Испвпьммть ярки* 1И»т« 


О По вертикали • Использовать активны» ржумни 

Отмена 

L ок 

Рис. 7.54.Вкладка Стиль (Style) диалога 
Свойства панели ссылок (Link Bar Properties) 

> Нажмите кнопку OK или кнопку Отмена (Cancel), чтобы закрыть диалог Свойства 
панели ссылок (Link Bar Properties). 

Если требуется поместить на страницы дополнительное навигационное меню, нужно 
воспользоваться 
командой меню Вставка • Панель ссылок (Insert • Navigation). 

Иногда может потребоваться не отображать навигационное меню на определенной 
странице 
и исключить ссылки на эту страницу с других страниц, но при этом оставить ее в 
схеме навигации. Для этого нужно щелкнуть правой кнопкой мыши на изображении 
страницы в представлении сайта Переходы (Navigation) и в появившемся 
контекстном 
меню выбрать команду Включено в панели ссылок (Included in Link Bars). 
Повторный 
выбор этой команды восстанавливает ссылки на страницу. 

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

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

>• Выберите команду меню Формат • Общие границы (Format • Shared Borders). 
На экране появится диалог Общие границы (Shared Borders) (Рис. 7.55). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Общие границы 

Применить: 

{•} .о всем стрэницам^ 

О к текущей странице 

И Сверху 

[yj] включить кнопки переходов 

0 Слева 

[ 3 включить кнопки переходов 

• Справа 
• ьключмть кнопки ледоход» 
В Снизу 
D Восстановить границы, используемы» по умолчан но на »6>уэ« 

Свойства границы... 

LJ 

Рис. 7.55. Диалог Общие границы (Shared Borders) 

Переключатели Применить (Apply to) позволяют применить настройки ко всем 
страницам 
(All pages) или текущей странице (Current page) сайта. Флажки Сверху (Тор), 
Слева 
(Left), Справа (Right), Снизу (Bottom) определяют наличие общей границы 
соответственно 
в верхней, левой, правой и нижней областях страницы. Настройки, определенные 
для всех страниц, применяются по умолчанию к каждой вновь создаваемой странице. 

Флажки включить кнопки переходов (Include navigation buttons) позволяют 
включить в 
общую границу кнопки навигационного меню. Флажок Восстановить границы, 
используемые 
по умолчанию на Web-узле (Reset borders for current page to web default) 
отменяет индивидуальные настройки общих границ страницы и устанавливает их в 
соответствии 
с принятыми по умолчанию для всего сайта. Этот флажок доступен только в 
применении к текущей странице. 

Дополнительные свойства границы можно установить, нажав кнопку Свойства границы 

(Border Properties). 

>• Закройте диалог Общие границы (Shared Borders), нажав кнопку ОК или кнопку 
Отмена 
(Cancel). 

Общие границы позволяют придать страницам сайта единый вид. Чаще всего в общие 
границы 
помещают такие элементы, как заголовок страницы (page banner) для обозначения 
названия страницы или раздела, логотип компании, контактную информацию, 
сведения о 
дизайнере и авторских правах, дату последнего обновления. Кроме того, общие 
границы 
используют совместно с навигационными меню для организации навигации по сайту. 
Включение навигационного меню в одну из общих границ позволяет создать 
единообразную 
схему навигации для всех страниц сайта. 

€пмт, J№5. Применяем тему для оформления страниц 

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


Создание Web-сайтов 

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


• • <а 

ких элементов, как фоновый рисунок, заголовки, кнопки, Ы Текущая тема: Газета 
разделительные линии и маркеры. Тема задает шрифт и 

Выбрать тему 

стиль для основного текста и заголовков страницы. Некото


Тема веб-узла, используема^. 

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

Газета 

Недавно использовавшиеся 

Щелкните мышью на ярлыке index.htm в верхней части 
рабочего окна программы, чтобы открыть домашнюю 
страницу, и выберите режим редактирования Конструктор 
(Design), если у вас установлен другой режим. 


Волны 

Q Яркие цвета 

Нажмите комбинацию клавиш чтобы скрыть 

13 Активные рисунки 

Н Фоновый рисунок 

Список папок (Folder List). 

Создать новую тему... 

Выберите команду меню Формат • Тема (Format • 
Theme). На экране появится Область задач (Task Pane) Рис. 7.56.Область задач 
Тема (Theme) (Рис. 7.56). (Task Pane) Тема (Thaw.) 

В Области задач (Task Pane) расположен список тем, при выборе которых страница 
сразу 
оформляется в стиле выбранной темы. В верхней части списка расположена тема, 
используемая для всего сайта по умолчанию. Все вновь добавляемые страницы будут 

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

применен стиль Газета (Journal). 

Любая выбранная тема также по умолчанию применяется ко всем страницам сайта. 
Если 
установить указатель мыши на выбранную тему, то в правой части миниатюры 
появится 
кнопка с треугольником (Рис. 7.57) для доступа к меню (Рис. 7.58) 

Газета (Веб-узел по умолчанию] 

Применить как тему по умолчанию 

Применить к выделенным страницам 

Настройка... 

Газета 

X. Удалить 
Рис. 7.57. Кнопка для доступа 
к меню темы Рис. 7.58. Меню темы 

Команда меню Применить к выделенным страницам (Apply to selected page(s)) 
позволяет 
применить тему только к текущей или к нескольким определенным страницам. 

> Просмотрите список тем и выберите одну из них, например, Волны (Waves). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 297 

Под списком тем расположены флажки, которые позволяют задать дополнительные 
параметры 
для выбранной темы. При установке флажка Яркие цвета (Vivid colors) цвета 
некоторых 
элементов для данной схемы будут иметь более яркие оттенки. Флажок Активные 
рисунки (Active graphics) определяет использование более сложных контуров и 
узоров при 
отображении заголовков, кнопок и других графических элементов. При сброшенном 
флажке 
графические элементы в ряде тем принимают более строгий вид. Флажок Фоновый 
рисунок 
(Background picture) разрешает использование фонового рисунка на страницах 
сайта. 

> Установите флажки Яркие цвета (Vivid colors), Активные рисунки (Active 
graphics) и 
Фоновый рисунок (Background picture) по вашему желанию. 

Процесс наложения темы может занять несколько секунд, после этого страницы 
примут 
внешний вид в соответствии с выбранной темой (Рис. 7.59). Тема заметно изменяет 

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

: Файл Правка Вид Вставка Формат Сервис ^Таблица Данные Рэмки Цкно Справка 

©lit A I® ;| 
Обычный • Aiial . з пг mi . i ж к н i ш ш а ш | А ** I i= := f.. | щ., «у., 

: Тема 

kbody> i -' • • й 

Ш Текущая тема: Волны 

Домашняя J 

Выбрать тему 

Туристическое агентство 

[Измените свойства этойпанели для отображения на ней гиперссылоь 

Мы рады приветствовать вас на нашем сайте 

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

Газета 
Мы предлагаем • Яркие цвета 
0 Активные рисунки 

•Туры по зарубежным странам 0 Фоновый рисунок 
ШТ\упм пп гтпяцям Г*ИГ 
1 
1 
Создать новую тему.., 

разделением ЕКод С1Проснотр[[< [ 

Д Ц|0-р2.прн 56 к 6x3?2 ] [[настройка^ 

Рис. 7.59. Домашняя страница сайта после применения темы 

Вы можете легко заменить тему, выбрав другую в Области задач (Task Pane). Более 
того, 
на основе уже имеющихся тем можно создать новые, изменяя различные элементы 
оформления, цвета и стили. 

> Выберите команду Настройка (Customize) в меню темы Волны (Waves). На экране 
появится диалог Настройка темы (Customize Theme) (Рис. 7.60). 


Создание Web-сайтов 

!DJ Настройка темы 
Просмотр: Волны 


Кнопка Кнопка 

тиль чягпппиия1 

X 

Предполагаемые изменения. 

@jЦвета,.. | | ^Графика.., | [ <^1екст... [ [Сохранитькак.,. | 

Использовать при просмотре: 
О яркие цвета 
[23 активные рисунки 
[ 3 Фановый рисунок OK Отмена 

Рис. 7.60. Диалог Настройка темы (Customize Theme) 

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

>• Нажмите кнопку Цвета (Colors). На экране появится диалог Настройка темы 
(Customize 
Theme) для настройки цвета (Рис. 7.61). 

I *_'| Настройка темы 

*РУ (другой | Просмотр: Волны 

Объявление 

Автомобильная 

ш

Бомбежка 
Винегрет 
Волны 

Ill 


Переходы по горизонтали 

Горизонт 

щ 

Горошины 

Граффити Кнопка Кнопка Кнопка 
Движение 
Декорация и • 

Маркированный список 

Детская 

Завод • Маркированный список1

ШЯШ1 

Закругление • Маркированный список 2 
Затмение 


ни HI • Маркированный список 3 
Кактус 


wXlMhU«4U№lt*(Hti4*«h 

Палитра темы: Ф р.бычные цвета О Яркие, цвета 

Рис. 7.61. Диалог Настройка темы (Customize Theme) 
для настройки цветовой схемы темы 

В правой части диалога Настройка темы (Customize Theme) расположена область 
просмотра. 
В ней отображается пример оформления элементов страницы при выбранной 
цветовой схеме. В левой части диалога расположены три вкладки. На первой 
вкладке 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Цветовые схемы (Color Schemes) расположен список доступных цветовых схем. 
Выбирая различные цветовые схемы, вы можете наблюдать результат их 
использования в 
области просмотра. 

> Выберите вкладку Цветовой круг (Color Wheel) (Рис. 7.62). 

Цветовые схемы ! Цветовой круг ; Другой 

Переходы по горизонтали 

Кнопка Кнопка Кнопка 

Маркированный список 
Цвета данной схемы: 


• Маркированный список 1 
• Маркированный список 2 
• Маркированный список 3
Яркость: 

J-JL 

Палитра темы: 0 Обычные цвета О Яркие, цвета 

Рис. 7.62. Вкладка Цветовой круг (Color Wheel) 
диалога Настройка темы (Customize Theme) 

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

> Чтобы изменить набор цветов для текущей схемы, щелкните левой кнопкой мыши на 

диаграмме и, не отпуская кнопку, переместите маркер в пределах круга. 

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

>• Выберите вкладку Другой (Custom). 

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

>• Нажмите кнопку О К, чтобы установить для темы выбранную цветовую схему или 
кнопку Отмена (Cancel), если вы не хотите менять настройки цвета. Вы вернетесь 
к 
диалогу Настройка темы (Customize Theme) (Рис. 7.60). 

> Нажмите кнопку Графика (Graphics). На экране появится диалог Настройка темы 
(Customize Theme) для настройки графики (Рис. 7.63). 


Создание Web-сайтов; 

Es Настройка темы 
Элемент: Просмотр: Волны 
Объявление 
Рисунок (шрифт | 
Объявление 
Рисунок: 
jwevupa.gif 
Переходы по горизонтали 
Обзор.. 
Изменившимся рисунок: Кнопка Кнопка Кнопка 
Jwavuph.gjf 
Маркированный список 
О.зор.. 
• Маркированный список 1 
* Маркированный список 2 
• Маркированный список 3 

Быстрые ссылки 

<1_ 

Рисунки темы: О Обучная графика Активные рисунки 

Рис. 7.63. Диалог Настройка темы (Customize Theme) 
для настройки графических элементов темы 

В правой части диалога расположена область просмотра. В ней отображается 
пример' 
оформления различных графических элементов страницы в зависимости от выбранных 
настроек темы. Слева расположены открывающийся список Элемент (Item), в котором 

выбирается графический элемент, и две вкладки, на которых устанавливается 
рисунок: 
(Picture) и шрифт (Font) для выбранного элемента. Группа переключателей Рисунки 

темы (Theme graphic set) определяет использование обычной, более строгой 
графики 
(Normal graphics), или активного рисунка (Active graphics) в текущей теме. В 
зависимости 
от установленного переключателя и выбранного графического элемента в списке 
Элемент (Item) вкладка Рисунок (Picture) может содержать одно, два или три поля 
для 
ввода или выбора рисунка. На вкладке Шрифт (Font) можно выбрать название шрифта 

(Font), его Начертание (Style) и Размер (Size), а также установить 
горизонтальное (Horizontal 
Alignment) и вертикальное выравнивание (Vertical Alignment) текста для текущего 

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

> Если требуется, сделайте изменения в настройках графических элементов схемы, 
и 
нажмите кнопку ОК, чтобы подтвердить изменения. Если вы не хотите менять 
графические настройки, нажмите кнопку Отмена (Cancel). Вы вернетесь к диалогу 
Настройка темы (Customize Theme) (Рис. 7.60). 

> Нажмите кнопку Текст (Text). На экране появится диалог Настройка темы 
(Customize 
Theme) для настройки текста (Рис. 7.64). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Н Настройка темы 

Просмотр: Волны 

Элемент: 

Шрифт: 

Стиль заголовка 1 

l^erdana^naljHelvetica 

AGOpus 

Arial 

Стиль заголовка 2 

Arial Black 
Arial Narrow 
Arial Unicode MS 


Стиль заголовка 3 

ArtScript 

AvantGardeBkBT Стипь заголовка 4 

AvantGarde Md ВТ 
SetinaScript 


Стиль заголовка 5 

BookAntiqua (Times New Roman) 
Bookman Old Style 


Стиль заголовка 6 

Bookshelf Symbol 7 
Century 
Century Gothic (Times New Roman) 


Образец обычного текста 

Comic Sans MS (Arial) 

Courier New Обычная гиперссылка 

Crcmkrat 
Estrangelo Edessa 


Использованная гиперссыпка 

.EuroStyte 

Активная гиперссыпка 

Другие стили текста... I 

Рис. 7.64. Диалог Настройка темы (Customize Theme) 
для настройки формата текста темы 

В правой части диалога расположена область просмотра, в которой отображается 
пример 
оформления различных текстовых элементов страницы в зависимости от выбранных 
настроек. 
Слева расположены открывающийся список Элемент (Item), в котором выбирается 
текстовый элемент, и поле ввода Шрифт (Font), в котором устанавливается шрифт 
для выбранного 
элемента, а также список доступных шрифтов. Как и для графических элементов, 
в название шрифта может входить несколько имен шрифтов, разделенных запятыми. 

>• Если требуется, установите другой шрифт для текстовых элементов схемы и 
нажмите 
кнопку ОК, чтобы подтвердить изменения. В противном случае - нажмите кнопку 
Отмена (Cancel). Вы вернетесь к диалогу. 

Вы можете сохранить все сделанные изменения в текущей схеме, нажав кнопку 
Сохранить 
(Save), или сохранить текущую схему и сделанные изменения под новым именем, 
нажав кнопку Сохранить как (Save As) в диалоге Настройка темы (Customize Theme) 

(Рис. 7.60). 

> Нажмите кнопку ОК, чтобы закрыть диалог Настройка темы (Customize Theme). 

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

>• В списке тем Области задач (Task Pane) выберите Без темы (No Theme), 
щелкните 
правой кнопкой мыши на миниатюре темы и в появившемся контекстном меню выберите 

команду Применить как тему по умолчанию (Apply as default theme). На экране 
появится диалог с запросом на изменение темы (Рис. 7.65). 


Создание Web-сайтов 

Применение темы к веб-узлу в виде темы, используемой по 
умолчанию, приведет к изменению атрибутов форматирования. 
Однако отдельно оформленные страницы не изменятся. Применить 
тему? 

Рис. 7.65. Диалог с запросом на изменение темы 

> Нажмите кнопку Да (Yes), чтобы подтвердить изменение темы. 

>• Нажмите комбинацию клавиш I!С1г| 1+11F11. чтобы скрыть область задач. 

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

. Создаем таблицу 

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

можно несколькими способами: 

• щелкнуть мышью на кнопке |§ | | на панели инструментов Стандартная (Standard) 
и 
затем во вспомогательном окне указать с помощью мыши размерность таблицы; 
• выбрать из меню команду Таблица • Вставить • Таблицу (Table • Insert • Table),
 a 
затем указать размерность и другие параметры таблицы в диалоге Вставка таблицы 
(Insert Table); 
•^ если на странице уже имеются данные, которые нужно отобразить в табличном 
виде, 
можно воспользоваться возможностью преобразования текста в таблицу. Для этого 
нужно выделить текст, выбрать команду Таблица • Преобразовать • Текст в таблицу 

(Table • Convert • Text to Table) и указать тип разделителя в диалоге 
Преобразование 
текста в таблицу (Convert Text To Table). 
Мы рассмотрим еще один способ создания таблицы посредством рисования ее границ 
и 
внутренних разделителей прямо на странице. Для создания таблицы возьмем чистую 
страницу сайта. 

>• Выберите команду меню Вид • Папки (View • Folders), чтобы перейти в режим 
просмотра папок и файлов сайта, и дважды щелкните мышью на странице 
news.htm в списке файлов. Страница news.htm будет открыта в режиме 
редактирования 
Конструктор (Design). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Выберите в меню команду Таблица • Нарисовать таблицу (Table • Draw Table). 
На экране появится панель инструментов Таблицы (Tables) (Рис. 7.66) для работы 
с 
таблицами. Кнопка Щ на панели инструментов Таблицы (Tables) будет нажата, и 
указатель мыши примет вид карандаша {/. 

j/'j Показать параметры макета 

Рис. 7.66. Панель инструментов Таблицы (Tables) 

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

>• Отпустите кнопку мыши. Внешняя рамка таблицы будет зафиксирована на странице.
 

Для изменения размеров таблицы можно перемещать с помощью мыши правую и нижнюю 
границы рамки. 

>- Теперь, установив указатель мыши у левой границы рамки, нажмите левую кнопку 

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

>• Таким же образом проведите вертикальную линию от верхней границы до нижней. 
Теперь таблица будет разделена на четыре ячейки (Рис. 7.67). 

.oft FtontPage - C:\Documents and SeltmgsWasily'vMy Documents\MoH 
веб-уэльЛТура; 

Файл Правка Вид Вставка Формат Сервис Хаблица Данные Рамки Окно Справка 

I Обычный - Time» New Roman 3 (12 m| 

f Домашняя 1 
Псмать параметры макета Д И I tf I? I ="="«" I" 


Новости 

Й1Н 

[ Новости ] ( УСЛУГИ ] 

[Измените 
свойства 
этой панели 
для 
отображения, 
на ней 
гиперссылок] 


Отпражжтъ сообщение дд: weblqtjquom с жолрасамн к з «б эпк*ef-узле. 
Датаюмехеюп: 27Л82004 


|S c разделением В Код О.Просмотр jfT] 

1 при5Бкбит/'с 1)772х 372 |[всв 

Рис. 7.67. Создание таблицы путем рисования ее границ на странице 


304 Создание Web-сайтов 

Внутренние границы таблицы также можно перемещать с помощью мыши. 

>• Отожмите кнопку ||f на панели инструментов Таблицы (Tables), чтобы отключить 

режим рисования. Кнопка вернется в исходное состояние, и указатель мыши примет 
стандартный вид. 

Дня удаления элементов таблицы можно воспользоваться инструментом || р на 
панели инструментов 
Таблицы (Tables), который действует аналогично «карандашу», но при этом 
«стирает» линии таблицы. С помощью кнопок ^ | и _. можно добавлять новые строк» 

или колонки в позицию, где установлен текстовый курсор. 

Любую ячейку таблицы можно закрасить произвольным цветом, 

v Установите текстовый курсор в одну из ячеек созданной таблицы. 

>• Выберите команду меню Таблица • Выделить • Ячейка (Table • Select • Cell). 
Текущая 
ячейка будет выделена. 

>- Щелкните мышью на изображении стрелки рядом с кнопкой на панели инструментов 

Таблицы (Tables) и в открывшемся вспомогательном окне выберите один из 
цветов (Рис. 7.68). 

> Щелкните мышью вне выбранной ячейки, чтобы снять выделение. Фон ячейки 
таблицы 
будет закрашен выбранным цветом. 

Ячейки таблицы можно произвольным образом разбивать и объединять, чтобы придать 

таблице нужный вид. 

> Установите текстовый курсор в одну из ячеек и щелкните мышью на кнопке |Мй| 
Разбить 
ячейки (Split Cells) на панели инструментов Таблицы (Tables). На экране 
появится диалог Разбиение ячеек (Split Cells) (Рис. 7.69). 

Стандартные цвета 

О Рагбить на строки 

• ПИШИ 
Число столбцов: 

Другие цвета заливки... 

ОК | Отмена 

Рис. 7.68. Вспомогательное окно для 

Рис. 7.69. Диалог Разбиение ячеек 

выбора цвета 

(Split Cells) 

С помощью переключателей можно выбрать способ разбивки: на столбцы (Split into 
columns) или на строки (Split into rows). В поле ввода со счетчиком указывается 
количество 
столбцов или строк. 

> Нажмите кнопку ОК. Ячейка таблицы будет разбита на две или на то количество, 
которое 
вы указали. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• С помощью мыши или клавиатуры выделите две или более последовательных ячеек 
в 

таблице и нажмите кнопку - Объединить ячейки (Merge Cells) на панели 
инструментов 
Таблицы (Tables). Выделенные ячейки будут объединены в одну. 

Для выделения текущей ячейки, строки, колонки или всей таблицы можно 
использовать 
команды из меню Таблица • Выделить (Table • Select). 

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

>• Щелкните правой кнопкой мыши на таблице и в появившемся контекстном меню 
выберите 
команду Свойства таблицы (Table Properties). На экране появится диалог 
Свойства таблицы (Table Properties) (Рис. 7.70). 

Свойства таблицы 
Параметры макета ————————^—^—————— — 
О Включить параметры макета 
(?) выключить параметры макета; 
О Задействовать параметры макета на основе содержимого таблицы 
Размер 
Строк: \г frpj Столбцов: [2 \~\ 
Положение • 

ь ширину: 
© в точках 

Выравнивание: | по умолчанию 

Обтекание: | по умолчанию 

О в процентах 
Поля ячеек: [7 

0 Задать высоту: 
г ^ 1 © в точках 

Интервал ячеек: 

' О в процентах. 

Границы 
Размер: 


Цвет: 

• Свернуть сраницу таблицы 
Фон 
Цвет: | D Авто 
П Использовать фоновый рисунок 


По умолчанию 
П По умолчанию для новых таблиц 


Стиль... ОК | Отмена | [ Применитьj 


Рис. 7.70. Диалог Свойства таблицы (Table Properties) 

В группе элементов управления Положение (Layout) диалога Свойства таблицы 
(Table 
Properties) можно установить выравнивание таблицы на странице (Alignment), 
способ 
обтекания таблицы текстом (Float), расстояние в пикселах между содержимым 
ячейки и 
ее внутренней границей - Поля ячеек (Cell padding), расстояние в пикселах между 
соседними 
ячейками таблицы - Интервал ячеек (Cell spacing), а также задать ширину 


Создание Web-сайтов 

(Specify width) и высоту (Specify height) таблицы. В группе элементов 
управления Границы 
(Borders) можно указать размер внешней границы (Size) таблицы, а также задать 
цвет 
границы (Color). Если задать нулевой размер границы, то она станет невидимой. В 
группе 
элементов управления Фон (Background) определяется цвет фона в области таблицы 
(Color) и фоновый рисунок (Use background picture). 

>• Нажмите кнопку OK, чтобы закрыть диалог Свойства таблицы (Table Properties). 


>• Щелкните правой кнопкой мыши на одной из ячеек таблицы и в появившемся 
контекстном 
меню выберите команду Свойства ячейки (Cell Properties). На экране появится 
диалог Свойства ячейки (Cell Properties) (Рис. 7.71). 

Выровнять по горизонтали: |по умолчанию w| Е Задать ширину: 

Выровнять по вертикали: | по умолчанию \Ц № | ©втоуках 
"" * О в процентах 
Объединение строк: I' f H 0 Задать высоту: 

Объединение столбцов: 0 в точках 
О в прццентах 

О Ячейка заголовка 

П Hg переносить слова 

Границы ——.•-• 

Цвет; I 

Цвет: •

 ДвТ| 

D Использовать фоновый рисунок 

Обгор... 

ОК [ Отмена | | Применить | 

Рис. 7.71. Диалог Свойства ячейки (Cell Properties) 

В группе элементов управления Положение (Layout) диалога Свойства ячейки (Cell 
Properties) можно установить горизонтальное (Horizontal alignment) и 
вертикальное (Vertical 
alignment) выравнивание содержимого в ячейке, растянуть ячейку на заданное 
количество 
строк (Rows spanned) и столбцов (Columns spanned), задать точную ширину (Spec 
ify 
width) и высоту (Specify height) ячейки. Флажок Ячейка заголовка (Header cell) 
позволяет 
придать ячейке стиль заголовка таблицы. По умолчанию стиль заголовка 
предполагает 
выделение текста в ячейке жирным шрифтом. Обычно такие ячейки располагаются 
по левому и верхнему краю таблицы для обозначения названий столбцов и строк. 
Установка флажка Не переносить слова (No wrap) запрещает перенос слов в ячейке 
таблицы. В группе элементов управления Границы (Borders) определяется цвет 
линий, 
ограничивающих ячейку. В группе элементов управления Фон (Background) 
определяется 
фоновый цвет (Color) и фоновый рисунок (Use background picture) ячейки. 

> Нажмите кнопку ОК, чтобы закрыть диалог Свойства ячейки (Cell Properties). 

Если для таблицы нужно вывести ее название, можно воспользоваться командой меню 

Таблица • Вставить • Подпись (Table • Insert • Caption). 

Закройте панель инструментов Таблицы (Tables), выбрав команду меню Вид Панели 
инструментов • Таблицы (View • Toolbars • Tables). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В опыте, посвященном вводу текста, мы уже говорили, что текст может быть 
вставлен на 
страницу из заранее подготовленного документа. Точно так же на страницу можно 
добавить 
информацию из табличного файла, например из документа, подготовленного 
программой 
MS Excel. Для этого нужно воспользоваться командой меню Вставка • Файл 
(Insert • File) и выбрать необходимый тип файла. Данные из табличного файла 
будут сразу 
помещены в таблицу. 

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

выравнивания текста и рисунков на странице. 

JV&7. Вставляем рисунки и фото 

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

Редактор FrontPage позволяет загружать изображения из файлов различных 
графических 
форматов: GIF (обычный и анимированный), JPEG, BMP, TIFF, TGA, RAS, EPS, PCX, 
PNG, PCD и WMF. Вы можете поместить готовый рисунок на страницу, взяв его из 
библиотеки 
картинок программы FrontPage, из папки текущего сайта или одного из сайтов 
на локальном диске, из любого графического файла на локальном диске или 
загрузив с 
внешнего сайта в Интернете. 

> Выберите команду меню Вид • Папки (View • Folders), чтобы перейти в режим 
просмотра 
папок и файлов сайта. 

> Дважды щелкните на странице tour2.htm в списке файлов. Страница tour2.htm 
будет 
открыта в режиме редактирования Конструктор (Design). 

Установите текстовый курсор в начало основной области страницы и щелкните мы


на панели инструментов Стандартная (Standard). На экране поя


шью на кнопке 

вится диалог Рисунок (Picture) (Рис. 7.72). 

-_—-^ • ?jx]j 

шшшшшшшшшшш••••••В 

Папка; | LJfeJ Турагентство Сервис» 

3! • -ЕЮхьи


& 
Нон последние 

IS 


документы 

;3_the«et 
Рабочий стол 

Мои 

Мой 
компьютер 
Мое сетевое 
Имяфай/и: Г Id г \ 
Типфаилов: |все имбражеим \ Отмена 

Рис. 7.72. Диалог Рисунок (Picture) 


Создание Web-сайтов 

308 

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

>• Как и в стандартном диалоге открытия файла найдите и выберите нужный 
графический 
файл и нажмите кнопку Вставить (Insert). Изображен'е из файла появится на 
странице (Рис. 7.73). 

: Файя Правка Вид Вставка Формат Сервис Хайяица Данные Рамки .кно Справка 

j Обычный * T met New Roman 3 Ц2 пт) . | Ж К 3 I Ш Ш Ш Э | А А' 11= ;= 

Донашняч ] [ 

рецня 
| Египет ] [ Греция ] 


[Измените 

AIR AND RAIL COMMUNICATION NETWORK 

свойства 

этой панели RESEAU AERIEN ET FERROVIAIRE 

Ьпя 

FLUG-UND EISENBAHNNETZ 

ртображения 

ш ней RETE FERROVIARIA E AEREA 

еипврссылок] 

. шпжи 

I В с радделеииая В Код (^просмотр | 

1[П06при56кбит/с |[772 к 372 :[всёП[й*ггройка i 

Рис. 7.73. Вставка рисунка на страницу 

Приведенный в данном примере рисунок можно взять в Интернете на странице 
www.tournet.ru, предварительно сохранив его на локальном диске1. Вы также 
можете 
взять один из рисунков в папке, в которой установлена система Windows. 

> Щелкните мышью на вставленном рисунке. Вокруг рисунка будет отображена рамка. 


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

> Выберите команду меню Вид • Панели инструментов • Рисунки (View • Toolbars • 
Pictures). На экране появится панель инструментов Рисунки (Pictures) для работы 
с 
изображением (Рис. 7.74). 

ШI А NS 2Ь А 3 IЭГ О* ;*г Ж11 # == Ь У шй S3 XI k • О а•% 

Рис. 7.74. Панель инструментов Рисунки (Pictures) 

1 Содержание указанной страницы может со временем измениться. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Вы можете использовать различные инструменты для придания изображению 
требуемого 
вида и формы: 

позволяет добавить рисунок из файла; 

кнопка 

• кнопка IA позволяет поместить текст поверх изображения формата GIF; 
с помощью кнопки можно создавать автоэскизы рисунков; 
С ПОМОЩЬЮ КНОПКИ Ш I можно задать абсолютное размещение рисунка для помещения 
его в заданном месте страницы; 
и можно переместить рисунок на передний или задний 

с помбщью кнопок 
план; 


• кнопки позволяют вращать изображение против часовой и по часовой 
и 
стрелке; 


• кнопки ilk зеркально отображают рисунок в горизонтальном и вертикальном 
направлениях; 
• с помощью кнопок |(И | и |Э1 | можно регулировать контрастность изображения 
(contrast); 
• кнопки ;®;Т и Ш\ управляют яркостью рисунка; 
• с помощью инструмента 4| j можно обрезать рисунок; 
задается тип линии; 
с помощью кнопки 
с помощью кнопки 


задается формат рисунка; 

• с помощью кнопки i^J можно выбрать цвет на изображении формата GIF, который 
будет прозрачным; 
• с помощью кнопки можно преобразовать изображение в градациях серого, 
чернобелое 
или задать размытие; 
задается багетная рамка, которая придаст рисунку более объ


с помощью кнопки 
емный вид; 


• кнопка позволяет сократить количество цветов; 
\/ с помощью кнопки можно выбрать различные элементы рисунка; 
k 

• с помощью кнопок • на рисунке создаются гипертекстовые области пряа 


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


Создание Web-сайтов 

>• Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню 
выберите 
команду Свойства рисунка (Picture Properties). На экране появится диалог 
Свойства рисунка (Picture Properties) (Рис. 7.75). 

Вид | Общие | Видеозапись | 
Обтекание 


но 

Выравнивание: |по^унолчамию Интервал по г_ориэонтали: 
Хрлщина границы: |р |" ^ Интервал по вертикали: 
Размер ' 
Р5 Задать размер 
0 в точках © в точках 
О в процентах О в процентах 

Рис. 7.75. Вкладка Вид (Appearance) диалога 
Свойства рисунка (Picture Properties) 

В группе элементов управления Обтекание (Wrapping style) можно выбрать 
обтекание 
рисунка текстом. 

Открывающийся список Выравнивание (Alignment) позволяет задать способ 
выравнивания 
рисунка на странице и его расположение относительно близлежащего текста. 
В поле ввода Толщина границы (Border thickness) можно задать толщину рамки 
вокруг 
изображения. Нулевое значение означает отсутствие рамки. 

> В полях ввода со счетчиком Интервал по горизонтали (Horizontal spacing) и 
Интервал 
по вертикали (Vertical spacing) укажите значение 10. 

Это размер отступа в пикселах от изображения до близлежащих элементов, чтобы 
рисунок 
не сливался с окружающим текстом и другими рисунками. Если установить флажок 
Задать размер (Specify size), то можно указать точные значения ширины (Width) и 
вы со-ты 
(Height) прямоугольной области, которую должно занимать изображение на странице.
 

>• Убедитесь, что установлены флажки Задать размер (Specify size) и Сохранять 
пропорции 
(Keep aspect ratio), и в поле ввода Ширина (Width) введите 300, чтобы уменьшить 

размер рисунка. 

>• Выберите вкладку Общие (General) диалога Свойства рисунка (Picture 
Properties) 
(Рис. 7.76). 

Для сохранения изображений в папке сайта FrontPage использует четыре формата 
графических 
файлов: GIF, JPEG, PNG-8 и PNG-24. Первые два используются наиболее часто. 
Все изображения, помещенные на страницу из файлов в других форматах, при 
сохранении 
автоматически преобразовываются. При этом рисунки, использующие 256 или менее 
цветов, сохраняются в формате GIF, а другие - в формате JPEG 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Свойства рисунка 

Вид | Общи»] Видеозапись ) 

Рисунок: 

|../../Му Pictures/all-grcece.jpg 

Тип графических файлов I1 

Альтернативные представления Цизкое 
разрешена: | 2 [обзор,.. 

Пс 

Длинное описание: [ 

Гиперссылка по умолчанию • 
Расположение: | | Обзор.,,, | 

|<онечн4я рамка: [ | Параметры.,. | 

ОК 

Рис. 7.76. Вкладка Общие (General) диалога 
Свойства рисунка (Picture Properties) 

Вы можете сами выбрать формат для сохранения изображения, нажав кнопку Тип 
графических 
файлов (Picture File Type) и в диалоге Тип графических файлов (Picture File 
Туре) (Рис. 7.77) определив дополнительные параметры, такие, как Качество 
(Quality) 
для файлов JPEG и количество проходов при постепенном показе файлов формата GIF.
 

Тип графическим Файлов 

Исходный файл: all-greece.jpg Исходный размер: 227,97 КБ 

Измененный файл: Измененный размер: 

OiGIF Подходит для простых компьютерных рисунков и штрихоеой графики. 
Всего 256 цветов. Этого недостаточно для большинства фотографий. 

Подходит для фотографий. Точная цветопередача и небольшой размер 

файла. Не годится для простых компьютерных рисунков и штриховой 

графики. 

О 3 PNG-8 Подобен GIF, но с лучшей поддержкой цвета. Не является стандартным 
и поддерживается не всеми обозревателями. 

О i PNG-24 Подобен JPEG, но со сжатием без потерь, и обычно имеет больший 
размер файла. Не является стандартный и поддерживается не всеми 
обозревателями. 

Параметры: 0 Использовать текущее изображение. 

Качество: [ •ю|~| 

ГЬи снижении к*чяст«4 уменьшает 
Охлвдоытепьмы* проходы: 

быстро» отобршпнн» мриант«с 
посппапюв улучшит его качеств». 

ОК 

Рис. 7.77. Диалог Тип графических файлов (Picture File Type) 


312 Создание Web-сайтов 

В группе элементов управления Альтернативные представления (Alternative 
representations) 
диалога Свойства рисунка (Picture Properties) (Рис. 7.76) можно указать файл с 
заранее подготовленной копией рисунка, сделанной с низким разрешением (Low-Res),
 
которая будет отображаться при загрузке основного рисунка, а также текст (Text),
 отображаемый 
на месте рисунка во время загрузки и во всплывающей подсказке. 

На вкладке Общие (General) диалога Свойства рисунка (Picture Properties) для 
рисунка 
можно также указать гиперссылку. 

>• Нажмите кнопку ОК, чтобы закрыть диалог Свойства рисунка (Picture 
Properties). 

v Выберите команду меню Файл • Сохранить (File • Save). 

Если вы добавляли рисунок на новую страницу, то на экране появится стандартный 
диалог 
сохранения файлов Сохранить как (Save As). В этом случае i еобходимо указать 
нужное 
имя файла страницы и йажать кнопку Сохранить (Save). 

При сохранении страниц с рисунками на экране появится диалог Сохранение 
внедренных 
файлов (Save Embedded Files) (Рис. 7.78). 

Сохранение внедренных Файлов 

Сохранить внедренные файлы: Рисунок: 

Имя Папка Действие 

JL 

Заменить 

| | р«ннт>>гиоку,., | [ Дя%:теи».., | [тип графических файлов... | 

ОК [ Отмена 

Рис. 7.78. Диалог Сохранение внедренных файлов (Save Embedded Files) 

В диалоге Сохранение внедренных файлов (Save Embedded Files) перечислены 
графические 
изображения, добавленные на страницу во время работы. В данном диалоге 
предлагается 
сохранить копии добавленных на страницу изображений в папке сайта. Вы можете 
переименовать файлы с изображением (Rename) или выбрать для них отдельную 
папку (Change Folder). При необходимости можно не создавать копию рисунка в 
папке 
сайта, а сохранить только ссылку на расположение исходного файла. Эта 
возможность 
устанавливается с помощью кнопки Действие (Set Action). 

> Нажмите кнопку ОК, чтобы сохранить изображения в папке сайта на диске и 
закрыть 
диалог Сохранение внедренных файлов (Save Embedded Files). 

Обычно рисунки и текст располагаются на странице последовательно, нередко 
образуя 

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

В опыте, рассказывающем про таблицы, мы уже упоминали, что с помощью таблиц 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

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

>• Установите текстовый курсор справа от рисунка, щелкнув мышью на области 
страницы 
справа от рисунка, и наберите следующий текст: 

Греция граничит с Албанией, бывшей Югославией, Болгарией и Турцией. 
Протяженность границ составляет 1166 км. Грецию омывают Эгейское, Ионическое, 
Критское и Ливийское моря. Береговая линия простирается поч


ти на 4000 км. 


После завершения первой строки текст сместится вниз, оставив справа от рисунка 
пустое 
пространство. 

>• Теперь щелкните на рисунке, чтобы выделить его, и выберите в меню программы 
команду 
Формат • Положение (Format • Position). На экране откроется диалог Положение 
(Position) (Рис. 7.79). 

Обтекание• 

а—| |

XL 

Положение 


_•_ XL 

абсолютное относительное 
Смещение и размер — 

Спма: 

j Смеет: 

Jgj

СИМ»! Щ Снизу: 

Ширина: Ш Высота: 

По оси!! 

м 


ок JC Отмена 

Рис. 7.79. Диалог Положение (Position) 

> В группе элементов управления Обтекание (Wrapping style) выберите позицию 
слева 
(Left).. 

Группы элементов управления Положение (Positioning style) и Смещение и размер 
(Location 
and size) позволяют определить точное абсолютное или относительное расположение 

объекта на странице и его размер. 

> Нажмите кнопку ОК, чтобы закрыть диалог Положение (Position). Набранный текст 

теперь будет размещен справа от рисунка (Рис. 7.80). 

Средства редактора FrontPage для позиционирования элементов на странице 
являются 
сравнительно новыми i логут не поддерживаться в ранних версиях браузеров. 


Создание Web-сайта! 

авка Формат Сервис Таблица Данные .амки QKHO Справка 

Греция граничит с Албанией, бывшей 

Югославией, Болгарией и Турцией. 

Протяженность границ составляет 1166 к» 

Грецию омывают Эгейское, Ионическое, 

Критское и Ливийское моря. Береговая 

линия простирается почти на 4000 км. 

Рис. 7.80. Выравнивание текста относительно рисунка 

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

Правке Вид Вставка Формат Сервис Любимце Данные Рэмки QKHO Справна 

Обычный - Time» New Roman 3 112 ml . | Ж К 

11A »' 11= := 

L Домашняя 11 &р 

Греция ИI A ft I В О <a Ii. A i. < I ОТ 1 ftt fel 1 -!>• = Ь • НИ X iBJ 
][ Г реция JJ 

Греция граничит с Албанией, бывшей Югославией, Болгарией и 
свойства \ Турцией. Протяженность границ составляет 1166 км Грецию омывают 
этой панеяи \ Эгейское, Ионическое, Критское и Ливийское моря. Береговая линия 
для | • " Г. -| простирается почти на 4000 км. 
отображения^ ...•-• • J 
на ней 
гиперссылак]' 

Отлрикп сое&зцгюа дя:итЬ^яах«т с ••проси 
Дата ишиеюм: 28Л)8.2О<Н 


БКод ^Просмотр!! 

7.81. Рисунок преобразован в эскиз 

Создание Web-сайта с помощью Microsoft FrontPage 2003 

Щелкните мышью на вставленном ранее рисунке, чтобы выделить его. 

> Щелкните мышью на кнопке на панели инструментов Рисунки (Pictures). 
На месте изображения будет создан эскиз (Рис. 7.81). 

> Чтобы проверить, как работает эскиз, перейдите в представление Просмотр 
(Preview), щелкнув мышью на кнопке Просмотр (Preview) в нижней части вкладки 
tour2.htm. 

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

для создания эскиза можно на вкладке Автоэскизы (AutoThumbnail) диалога 
Параметры 
страницы (Page Options) (Рис. 7.82), который вызывается из меню командой 
Сервис • Параметры страницы (Tools • Page Options). 

Рисунок ^ Фрагменты кода _. Лжейка и сетка IntelliSense _ 
Общие | Аетоэскизы | Шрифты по умолчанию j Форматирование кода | Цветовое 
выделение синтаксиса 

2« мть ;

 [по ширине [^ 1 Хочвк: |100 Н И 

Е1 Талщимв границы Точек: р fr ^ 

G Ёельефная граница 

Рис. 7.82. Вкладка Автоэскизы (AutoThumbnail) 
диалога Параметры страницы (Page Options) 

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

программе FrontPage. 

> Установите текстовый курсор в позицию, куда требуется вставить рисунок, и 
выберите 
в меню команду Вставка • Рисунок • Картинки (Insert • Picture • Clip Art). 
На экране появится Область задач (Task Pane) с выбранной темой (Рис. 7.83). 

> Щелкните мышью на кнопке 0 в правой части поля Просматривать (Search in) и в 
появившемся списке оставьте установленным флажок Коллекции Microsoft Office 
(Office Collections). 


> Разверните пункт Коллекции Microsoft Office (Office 
Collections), щелкнув мышью на значке в слева от него, 
и установите флажок Животные (Animals), а развернув, 
в свою очередь, этот пункт, выберите Дикие 
(Wild). 

> Нажмите кнопку Начать (Go). В нижней части Области 
задач (Task Pane) появятся найденные картинки 
(Рис. 7.84). 

> Щелкните на одном из изображений. Выбранная картинка 
будет помещена на текущую страницу сайта. 

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

Установите связь с Интернетом. 

Установите текстовый курсор в позицию, куда будет 
помещен рисунок, и щелкните мышью на кнопке 
на панели инструментов Стандартная (Standard). На 
экране появится диалог Рисунок (Picture) (Рис..7.72). 

> В поле ввода Имя файла (File name) укажите точный 
Интернет-адрес файла с изображением, например 

http://geoton.narod.ru/BG.GIF. 

Адрес в поле ввода Имя файла (File name) должен ссылаться 
именно на рисунок, т.е. на файл с расширением 
*.gif или *.jpg, а не на страницу, содержащую рисунок. 

Если вы не помните точный адрес, то можно воспользоваться 
кнопкой €1^ на панели инструментов диалога Рисунок 
(Picture), чтобы запустить браузер, установленный 
на вашем компьютере. Для примера можно зайти на сайт 
gallery.yahoo.com, где имеется достаточно большая коллекция 
изображений. 

При использовании браузера Netscape Navigator версии 4или выше, сделайте 
следующее. 

Создание Web-сайтов 

v 

X

• Коллекция клипов
Искать: 
j Начать 


Просматривать: 
1 Выделенные коллекции 
Искать объекты: 
Все файлы мультимедиа 


[2 ] Упорядочить картинки... 
==) Картинки на узле Office Online 
Щ Советы по поиску клипов 
Рис. 7.83. Область задач 
(Task Pane) с темой 
Коллекция клипов (Clip Ait) 

Просматривать: 

Выделенные коллекции 
Искать объекты: 
|Все файлы мультимедиа 


[ 2 Упорядочить картинки... 
Щ) Картинки на узле Cffke Online 
г@

 Советы по поиску клипов 

Рис. 7.84. Дикие животные 
из коллекции Microsoft Office 

Щелкните правой кнопкой мыши на рисунке на странице сайта и выберите в 
появившемся 
контекстном меню команду Copy Image Location (Копировать адрес рисунка). 
Адрес рисунка будет помещен в буфер обмена Windows. 

Переключитесь обратно на программу FrontPage и вставьте адрес рисунка из буфера 

обмена в поле ввода Имя файла (File name) диалога Рисунок (Picture) с помощью 

комбинации клавиш I ctr l 1+1 У|. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 317 

>• Нажмите кнопку OK в диалоге Рисунок (Picture). На страницу будет помещена 
ссылка 
на рисунок. 

Если вы используете браузер Microsoft Internet Explorer версии 4 или выше, 
сделайте 
следующее. 

>• Щелкните правой кнопкой мыши на рисунке на странице сайта и выберите в 
появившемся 
контекстном меню команду Копировать (Сору). Ссылка на рисунок будет помещена 
в буфер обмена Windows. 

>• Переключитесь обратно на программу FrontPage и нажмите кнопку Отмена 
(Cancel), 
чтобы закрыть диалог Рисунок (Picture). 

>• Выберите в меню команду Правка • Вставить (Edit • Paste), чтобы поместить на 

страницу ссылку на рисунок на другом сайте. 

В режиме редактирования страницы изображение рисунка с внешнего сайта может 
заменяться 
значком [х]. Тогда, чтобы увидеть рисунок, нужно перейти в режим 
предварительного 
просмотра, щелкнув на кнопке Просмотр (Preview) в нижней части вкладки с 
текущей 
страницей. Следует помнить, что в данном случае на страницу помещен не сам 
рисунок, 
а ссылка, поэтому после удаления рисунка с внешнего сайта на вашем сайте он 
также не будет виден. 

> Прервите связь с Интернетом. 

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

> Чтобы перенести файлы рисунков в папку текущего сайта, скопируйте нужные 
файлы 
в буфер обмена из программы Проводник (Explorer), перейдите в программу Front-
Page, включите режим просмотра папок и файлов сайта (представление Папки 
(Folders)) 
и вставьте файлы из буфера обмена в папку сайта или в одну из вложенных папок. 


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

> Щелкните правой кнопкой мыши в любой области страницы и в появившемся 
контекстном 
меню выберите команду Свойства страницы (Page Properties). На экране появится 
диалог Свойства страницы (Page Properties) (Рис. 7.30). 

> Выберите вкладку Форматирование (Formatting) диалога Свойства страницы (Page 
Properties)1 (Рис. 7.8:). 

1 Если вы используете тему для оформления страниц сайта, то вкладка Background 
(Фон) в диалоге 
Page Properties (Свойства страницы) отсутствует. В этом случае фоновое 
изображение для 
страниц следует устанавливать в настройках темы. 



Создание Web-сайтов 

I Свойства страницы 
Общие*) Форматирование [ дополнительно"! Другие { Язык |"рабочая группа | 
Фон —————————————————^—— 
О фоновый рисунок! 
П СД*Л4Т» ПОДООЖЖОЙ 

Цвета Фон: 
D Авто [•"•| Гиперссылка: I Q Авто 
Текст: • Авто р | Просмотренная ссылка: | D Авто Р П 
Активная ссылка: | П ABTI 

L 
L 
OK 

Рис. 7.85.Вкладка Форматирование (Formatting) диалога 
Свойства страницы (Page Properties) 

> Установите флажок Фоновый рисунок (Background picture) и нажмите кнопку Обзор 


(Browse). На экране появится диалог Выбрать фоновый рисунок (Select Background 

picture), аналогичный диалогу выбора обычного рисунка для вставки на страницу. 

> Выберите рисунок, указав файл с изображением в папке сайта. 

> Нажмите кнопку ОК. Вы вернетесь к диалогу Свойства страницы (Page Properties),
 
а адрес выбранного рисунка будет отображен в поле ввода слева от кнопки Обзор 
(Browse). 

Если установить флажок Сделать подложкой (Make it a watermark), то фоновый 
рисунок 
будет оставаться неподвижным при прокрутке содержимого страницы в браузере. 
Такой 
эффект хорошо смотрится для крупного фонового рисунка. 

> Нажмите кнопку ОК. Выбранный фоновый рисунок будет отображен на странице 
(Рис. 7.86). 

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

Чтобы поместить такой рисунок на страницу, необходимо выбрать в меню команду 
Вставка • Web-компонент (Insert • Web Component) и затем в открывшемся диалоге 
Вставка компонента Web-узла (Insert Web Component) (Рис. 7.41) в списке Тип 
компонента 
(Component type) выбрать Включенное содержимое (Included Content), а справа 
Страница 
с расписанием (Page Based On Schedule). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Правка Вад Вставка Формат Сервис ±лбтш.» Данные Рамки QKHO .правка 

^^ o 
(•• 

[ Домашндя ] 

Греция, •; , , . 
[ Египет ] [ Греция ] 


[Измените Греция граничит с Албанией, бывшей Югославией, Болгарией и . .. ,J

«war 

сеойстеа Турцией. Протяженность границ составляет 1166 км. Грецию омывают I 
этой панели Эгейское, Ионическое, Критское и Ливийское моря Береговая линия 
для ?S -V-' 

простирается почти на 4000 км. . • . . -' ... \ 
отображения, 
на ней .. ее... 
гиперссылок] 

Onfu m саабщеххе дж: ж «б ш к »е6 учже. 
Дата ншашки» 2В J)820! 


: .-,.•;., . . F 

|вСр.ц.л^»Ико,аг^.тр|Т| .________ . _ E L 
[O.di? при 56 кбиг/с [772 к 373 Itce |настройка / 

Рис. 7.86. Фоновыйрисунок на странице 

Затем в диалоге Свойства включенной страницы с расписанием (Scheduled Include 
Page Properties) надо указать страницы для включения по расписанию и вне 
расписания, 
а также само расписание (Рис. 7.87). 

Свойства включенной страницы с расписанием 

Страница для включения: ——— — 

в течение времени по расписанию: 

J | Обзор,.. | 

до и после времени по расписанию (необязательно); 

L 
L 
Обзор.,, | 

2004 •>! |авг [--I |29 |т| |02:47:46 

Окончание: |2004 [•>! IceHU l |28 Ц |02:47:46 

СЖ Отмена 

Рис. 7.87. Диалог Свойствавключенной страницы с расписанием 

(Scheduled Include Page Properties) 

Для определения временного интервала используются встроенные часы компьютера, 
на 
котором размещен сайт. 

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


Создание Web-сай шв 

соединение с Интернетом. Существует ряд рекомендаций, на которые следует 
обратить 
внимание при проектировании страниц с графикой: 

• для уменьшения рисунка можно использовать изменение размеров (resizing) или 
масштабирование 
(resampling). Вторая операция предпочтительнее, так как она реально 
уменьшает размер файла с изображением, тогда как первая лишь изменяет область 
просмотра; 
^ изображения лучше преобразовать в формат JPEG и по возможности уменьшить 
параметр, 
определяющий качество. Это позволит уменьшить размер файла; 

• для больших фотографий, сделанных с высоким разрешением, желательно сделать 
их 
уменьшенные копии или эскизы для предварительного просмотра; 
• для средних и крупных изображений желательно определить заменяющий текст (ALT 

Text), который будет выводиться во время загрузки картинки. 
Чтобы выявить страницы с большим временем загрузки, можно вывести отчет 
Медленные 
страницы (Slow Pages) с помощью команды меню Вид • Отчеты • Ошибки • Медленные 
страницы (View • Reports • Problems • Slow Pages). 

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

JV&8. Вставляем ссылки 

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

открытие файла или запуск программы. 

Ссылка содержит в себе адрес или путь к объекту, записанный в определенном 
формате. 
Такой адрес часто обозначается аббревиатурой URL (Uniform Resource Locator - 
Стандартный 
указатель ресурса). Адрес может содержать название протокола передачи данных, 
имя Web-сервера или'компьютера, имя домена, каталог и имя файла. При 
проектировании 
сайта в программе FrontPage в большинстве случаев не требуется вручную 
записывать 
адрес ссылки, достаточно лишь указать страницу, файл или объект, и FrontPage 
сам создаст нужную ссылку. Если вы переименовываете файл или перемещаете его в 
другую папку, FrontPage автоматически обновит связанные с файлом ссылки. 

Посмотрим, как, например, можно создать ссылку с одной страницы сайта на другую.
 

> Перейдите в режим просмотра папок и файлов сайта, выбрав команду меню Вид • 
Папки (View • Folders), и дважды щелкните мышью на имени news.htm в списке 
файлов. Страница news.htm будет открыта в режиме редактирования Конструктор 
(Design). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• Установите текстовый курсор в начало страницы и наберите следующий текст: 

hEriterl

На нашем сайте появилась информация про Грецию.

> Теперь выделите в набранном тексте слово Грецию с помощью мыши или клавиатуры 

и выберите команду меню Вставка • Гиперссылка (Insert • Hyperlink). На экране 
появится диалог Добавление гиперссылки (Create Hyperlink) (Рис. 7.88). 

Папка: ЕИ Турагентство .]j ||t] 

1 fo|l<

jjjn news.htm (открытый) * j Закладка.,. 

.j) .borders 

.Э „derived Выбор рамки.., 

просмотрен


^ ( „overlay 

Параметры.., 
страницы 

ные 

ц 
ц 
.Э .private 
t2l .themes 

.=j| _vtl_cnf 

иовьи последние 

vti1

документом файлы ЁЭ _ -P1'

-

Адрес: 

i 

электронной 
почтой 


Рис. 7.88. Диалог Добавление гиперссылки (Create Hyperlink) 

> В списке файлов в центральной области диалога выберите файл tour2 и нажмите 
кнопку ОК. На страницу будет вставлена текстовая ссылка на указанную страницу, 
а 
выделенное слово будет выделено цветом и подчеркиванием (Рис. 7.89). 

: Файл Правка имя Вставка формат Сервис Таблица Данные .амки QKHO Справка 

•»• i« и а и «i»iaR' ; 
j Обычный - Тмк> New R<M»an 3 (12пт) . | Ж К Ч |Е : IА *'I \= := 

ввб-уэвл ] 

<body> 

[ Домашняя] 

НОВОСТИ 
[ НОВОСТИ ] [ Услуги ] 


[Измените На нашем сайте появилась информация про Гр.ННК>свойства 
этой панели 
для 
отображения, 
наней 
гиперссылок] 


Puc. 7.89.Гипертекстовая ссылка 

Проверить, как работает ссылка, можно, переключившись в режим просмотра 
страницы. 

Вы можете создать ссылку на рисунок из папки сайта, указав в диалоге Добавление 
гиперссылки 
(Create Hyperlink) (Рис. 7.88) нужный файл с изображением GIF или JPEG 

11-1210 


Создание Web-сайтов 

Ссылка может указывать на файл, расположенный на локальном диске или на одном 
из 
компьютеров в локальной сети. Для создания такой ссылки нужно щелкнуть мышью на 

кнопке В? в диалоге Добавление гиперссылки (Create Hyperlink) (Рис. 7.88) и 
выбрать 
требуемый файл. При этом FrontPage сформирует соответствующий адрес ссылки. 
Файл, 
на который указывает ссылка, должен быть доступен по этому адресу, когда сайт 
будет 
помещен на Web-сервер. 

Если нужно, чтобы ссылка указывала на страницу или файл на другом сайте в 
Интернете, 
вы можете указать адрес сайта и путь к странице в поле Адрес (Address) диалога 
Добавление 
гиперссылки (Create Hyperlink) (Рис. 7.88) или найти страницу с помощью 
браузера, 
нажав кнопку [ч 

Кроме перехода на другую страницу, показа картинки или открытия файла, 
активизация 
ссылки может также вызывать создание электронного письма, адресованного 
определенному 
абоненту. Для добавления такой ссылки на страницу нужно нажать кнопку 
электронной 
почтой (E-mail Address) в списке Связать с (Link to) в левой части диалога 
Добавление гиперссылки (Create Hyperlink) и затем ввести адрес электронной 
почты и 
тему сообщения в соответствующие поля (Рис. 7.90). 

Связать с: Текст: (Отправить сообщение 

файлом, вебстраницей 


Г „ ,

Ш 

Недавно использовавшиеся адреса электронной почты: 

Рис. 7.90. Панель диалога Добавление гиперссылки (Create Hyperlink) 
для вводареквизитов электронного письма 

Вы можете создать ссылку, указывающую на документ, созданный в программах Word, 

Excel или PowerPoint. Когда посетитель сайта щелкает мышью на такой ссылке, 
браузер 
загружает одно из приложений MS Office или программу просмотра и открывает в 
ней 
документ. Некоторые браузеры могут сами отображать документы, созданные в 
программах 
Word и Excel, используя технологию встроенных объектов (OLE). 

Если требуется изменить адрес ссылки, щелкните на ней правой кнопкой мыши и в 
появившемся 
контекстном меню выберите команду Свойства гиперссылки (Hyperlink Properties). 
На экране при этом появится диалог Изменение гиперссылки (Edit Hyperlink), 
в котором необходимо указать новый объект или ввести новый адрес. 

Кроме текстовой ссылки, на страницу можно поместить ссылку-рисунок. Это может 
быть, например, рекламный баннер или логотип фирмы, щелчок на котором вызывает 
переход к сайту фирмы. Обычно при наведении указателя мыши на рисунок-ссылку 
в браузере, указатель принимает форму ^J. Создать ссылку-рисунок так же просто, 
как и 
текстовую ссылку. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• Щелкните мышью на ярлыке tour2.htm, чтобы перейти в режим редактирования 
страницы 
на этой вкладке. 

> Если вкладки tour2.htm нет, то перейдите в режим просмотра папок и файлов 
сайта и дважды 
щелкните мышью на имени tour2.htm в списке файлов. Страница tour2.htm будет 
открыта 
в режиме редактирования Конструктор (Design). 

>• Установите текстовый курсор в конец ранее набранного текста и отступите 
несколько 

строк нажатием клавиши lEnterl. 

>• Выберите команду меню Вставка • Рисунок • Из файла (Insert • Picture • From 
File) 

или нажмите кнопку |Е | на панели инструментов Стандартная (Standard). На 
экране 
появится диалог Рисунок (Picture) (Рис. 7.72). 

>• В списке файлов сайта выберите файл рисунка, например, тот, который мы 
использовали 
в предыдущем опыте, и нажмите кнопку ОК. На страницу будет помещен выбранный 
рисунок. 

> Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню 
выберите 
команду Гиперссылка (Hyperlink). На экране появится диалог Добавление 
гиперссылки (Create Hyperlink) (Рис. 7.88). 

>• Укажите страницу сайта, файл или введите адрес, так же, как вы делали это 
для текстовой 
ссылки, и нажмите кнопку ОК. К рисунку будет привязана ссылка с указанным 
адресом. 

Если нажать кнопку D_ в диалоге Рисунок (Picture), то будет создана новая 
страница, на 
которую будет указывать ссылка. Проверить, как работает рисунок-ссылка, можно, 
переключившись 
в режим просмотра страницы. 

Возможно, вам понадобится более сложный вариант, когда для разных частей 
рисунка 
определяются различные ссылки. Например, можно поместить на страницу карту, 
назначив 
каждой области на карте ссылку на страницу с ее описанием. Набор ссылок для 
различных 
областей одного рисунка называется картой навигации (image map). Такие активные 

области (hotspot) на рисунке могут иметь форму прямоугольника, круга или 
произвольного 
многоугольника. 

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

> Выделите рисунок, щелкнув на нем мышью и выберите команду меню Вид • Панели 
инструментов • Рисунки (View • Toolbars • Pictures). На экране появится панель 
инструментов 
Рисунки (Pictures) для работы с изображением (Рис. 7.74). 

> Выберите инструмент для создания прямоугольной активной области, щелкнув на 
кноп


• на панели инструментов Рисунки (Pictures), и наведите указатель мыши на 
рисуке 
нок. Указатель примет вид карандаша {/. 


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

указатель в противоположный угол. Активная область на рисунке будет выделена 
рамкой (Рис. 7.91). 


Создание Web-сайтов 

K.Kalkassoso 
FLOWNAO-4/ 

indeo^i 
KASTORIA 

ArywOmtB» 

Рис. 7.91. Активные области на рисунке 

> Отпустите кнопку мыши. На экране появится диалог Добавление гиперссылки 
(Create 
Hyperlink) (Рис. 7.88). 

> Укажите страницу сайта, файл или введите адрес ссылки и нажмите кнопку ОК. 
С выделенной областью на рисунке будет связана ссылка с указанным адресом. 

Таким же образом с помощью инструментов |О | и |S | на панели инструментов 
Рисунки 
(Pictures) можно отметить на рисунке активные области в форме эллипса или 
произвольного 
многоугольника. При построении многоугольника каждая вершина отмечается 
одинарным 
щелчком мыши, а чтобы замкнуть линию, нужно дважды щелкнуть мышью в позиции 
последней вершины. Активные области на рисунке можно перемещать с помощью мы и 
и и 
изменять их размер, перетаскивая мышью края рамки. Для изменения ссылки нужно 
дважды 
щелкнуть мышью на активной области. Для удаления активной области с рисунка 
нужно 

выделить ее и нажать клавишу Д0*1*1»!. 

В предыдущем опыте мы упоминали, что поверх изображения можно поместить 
текстовую 
строку. Текст на поверхности рисунка также может использоваться как активная 
область. 
Для этого нужно дважды щелкнуть на текстовой строке, помещенной на рисунок, 
и указать ссылку в открывшемся диалоге Добавление гиперссылки (Create 
Hyperlink). 

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

изображения. 

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

сделать такие ссылки, необходимо сначала отметить в тексте места переходов. Это 
делается 
с помощью закладок. 

> Установите текстовый курсор в конце страницы, отступите несколько строк 
нажатием 

клавиши llEnterl и введите следующий текст: 

Климат Греции. Греция входит в Средиземноморскую климатическую зону: 

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

> Теперь выделите несколько слов в начале абзаца, например Климат Греции, и 
выберите 
в меню команду Вставка • Закладка (Insert • Bookmark). На экране появится 
диалог Закладка (Bookmark) (Рис. 7.92). 


Создание Web-сайта с помощью Microsoft FrontPage 2003

1 Закладка IlQ i 

Имя закладки: 
|Климат_Греции 

Другие закладки на этой странице: 

| Очистить 

[ Ояэейти 

ОК | Отмена 

Рис. 7.92. Диалог Закладка (Bookmark) 

В поле ввода Имя закладки (Bookmark Name) укажите название для закладки. 
По умолчанию предлагается название, взятое из выделенного фрагмента текста. 

Нажмите кнопку ОК. Место закладки будет отмечено в тексте в виде подчеркивания 

пунктирной линией (Рис. 7.93). 

^MM^XpAJJiW 0ци З входит в .ред^земномор)3сую^имад:иче<;кук> э,ону: 
"летом здесь почти нет дождей,*затр зимой 1>ывают,сйльныё'л<шни. Лето в' 

• Греции жаркос.-ЗЬо6ителямГотян:< примеренной: жаре'мы'р'гкоМендуеЫ -•' 
Рис. 7.93. Закладка в тексте страницы 

> Перейдите в начало страницы, введите текст для ссылки, например, О климате 
Гре


ции, выделите текст с помощью мыши или клавиатуры и нажмите кнопку |Т§Ы на 
панели 
инструментов Стандартная (Standard). На экране появится диалог Добавление 
гиперссылки (Create Hyperlink) (Рис. 7.88). 
Нажмите кнопку местом в документе (Place in The Document) в списке Связать с 
(Link to) в левой части диалога Добавление гиперссылки (Create Hyperlink) и 
в списке закладок выберите ранее созданную закладку Климат Греции (Рис. 7.94). 

Связать с: Текст: |О климате Греции 

Рис. 7.94. Панель дляуказания переходов в документе 


Создание Web-сайтов 

> Нажмите кнопку ОК, чтобы закрыть диалог Добавление гиперссылки (Create Hyper-
link). Текст ссылки будет выделен цветом и подчеркиванием. 

> Проверьте, как работает ссылка, переключившись в режим предварительного 
просмотра 
страницы. Щелчок мышью на ссылке должен Вызвать прокрутку текста до 
места, отмеченного закладкой. 

Обычно текстовые ссылки выделяются на странице цветом и подчеркиванием. Вы 
можете 
изменить цвет отображения ссылок на странице. Соответствующие настройки 
расположены 
на вкладке Форматирование (Formatting) диалога Свойства страницы (Page 
Properties) (Рис. 7.85), который можно вызвать командой Формат • Фон (Format • 
Background) 
из главного меню программы1. Вы можете установить цвет для непросмотренных 
гиперссылок (Hyperlink), для просмотренных ссылок (Visited hyperlink) и для 
текущей 
выбранной ссылки (Active hyperlink). Браузер определяет, была ли ссылка 
просмотрена, 
согласно определенному временному периоду. Например, Internet Explorer 
использует для 
этого время хранения истории посещаемых страниц. 

Если удалить страницу сайта, на которую указывает ссылка, то происходит разрыв 
свяли 
и ссылка перестает работать. Щелкнув мышью на такой ссылке в браузере, 
посетитель 
сайта получит сообщение об ошибке. Чтобы избежать таких ситуаций, необходимо 
заранее 
исправлять или удалять все «разорванные» ссылки. Выявить такие ссылки можно с 
помощью отчетов, о которых мы поговорим подробнее в отдельном опыте. 

€?ь(угт J№9, Создаем меняющиеся кнопки 
и динамические эффекты 

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

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

Как и обычная кнопка в навигационном меню, анимированная кнопка содержит ссылку 

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

> Чтобы создать анимированную кнопку, в режиме редактирования страницы выберите 

команду меню Вставка • Меняющаяся кнопка (Insert • Interactive Button). На 
экране 
появится диалог Меняющиеся кнопки (Interactive Buttons) (Рис. 7.95). 

' Если вы используете тему для оформления страниц сайта, то элементы управления 
на вкладке 

Форматирование (Formatting) в диалоге Page Properties (Свойства страницы) 
недоступны, и 

цвет ссылок следует устанавливать в настройках темы. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Просмотр; Нажмите кнопку для проснотра. 

©Текст кнопки 

Кнопка: 

эриллиант 2 

Бриллиант 3 
Бриллиант 4 
Бриллиант 5 

Выступающая вкладка 1 
Выступающая вкладке 2 
Выступающая вкладка Э 
Выступающая вкладка 4 
Выступающая вкладка 5 
Выступающая вкладка 6 
Выступающая вкладка 7 

J3 

lexer: 

|г«кст КНОПКИ 

Ссылка: 

Рис. 7.95. Диалог Меняющиеся кнопки(Interactive Buttons) 

Создать анимированную кнопку можно также в диалоге Вставка компонента Web-узла 
(Insert Web Component) (Рис. 7.41), выбрав компонент Динамические эффекты 
(Dynamic 
Effects) с эффектом Интерактивная кнопка (Interactive Button). 

В списке Кнопка (Buttons) диалога Меняющиеся кнопки (Interactive Buttons) можно 
выбрать 
вид кнопки, а в поле Просмотр (Preview) - посмотреть на поведение кнопки при 
щелчке на ней мышью. 

> В поле ввода Текст (Text) укажите текст, который будет отображаться на кнопке.
 

>• В поле ввода Ссылка (Link) укажите адрес ссылки для кнопки или выберите 
страницу, 
нажав кнопку Обзор (Browse). 

Выбрав вкладку Шрифт (Font), можно дополнительно выбрать шрифт для текста 
кнопки, а 
на вкладке Рисунок (Image) можно изменить размер и цвет кнопки. 

> Нажмите кнопку ОК. На страницу будет вставлена анимированная кнопка. 

> Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав 
на панели инструментов Стандартная (Standard). 

кнопку 
При наведении указателя мыши на кнопку должен возникать выбранный эс| 

рект, а при 

нажатии на кнопку - происходить переход по установленному адресу. 

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

Изменим вид кнопки при наведении на нее указателя мыши и воспроизведем при этом 

звуковой файл. 


Создание Web-сайтов 

>• В режиме редактирования страницы tour1.htm 
щелкните мышью на созданной нами кнопке, что-Поведение 
бы выделить ее. 

Удалить 

> Выберите команду меню Формат • Поведение 
(Format • Behaviors). На экране появится область Сценарии в теге: <img> 
задач Поведение (Behaviors) (Рис. 7.96). 

События I Дейст 
onmousedown Замена изображения 

Удалим действие, которое выполняется при наведении onmouseout Замена 
изображения 
на кнопку указателя мыши. onmouseover Замена изображения 
ormouseup Замена изображения 


>- Щелкните правой кнопкой мыши на третьем сценарии 
в списке Сценарии в теге (Scripts On Tag) и 
в появившемся контекстном меню выберите ко


См. также 

манду Удалить (Delete). Сценарий будет удален из 

списка. Слои 

Обратите внимание, что на предыдущем шаге щелкать 

Рис. 7.96. Область задач 

мышью надо в колонке Действия (Actions), а не Со


Поведение (Behaviors)

бытия (Events). 

>• В Области задач (Task Pane) нажмите кнопку Вставить (Insert). На экране 
появится 
меню (Рис. 7.97). 

Воспроизведение звука 

Восстановление замененных изображений 

Восстановление измененных свойств 

Вывод сообщений 

Вызов сценария 

Выполнение меню переходов 

Загрузка изображений 

Задание текста 

Замена изображения 

Изменение свойства 

Меню переходов 

Открытие окна обозревателя 

Переход по URL 

Проверка обозревателя 

Проверка подключаемого модуля 
Управление свойствами Flash 

Рис. 7.97. Меню Вставить (Insert) 

В меню Вставить (Insert) перечислены возможные действия при возникновении 
события, 
которое мы укажем чуть позже. 

-> Выберите команду меню Замена изображения (Swap Image). На экране появится 
диалог Замена изображения (Swap Image) (Рис. 7.98). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Имя изображения | URL-адрес исходного изображения | URL-адрес подставляемого 
изображения 

URL подставляемого изображения: |__ ~\ | Обзор... 

1*3 Загрузить изображения 

О Восстановить по событию mouseout 

Рис. 7.98. Диалог Замена изображения (Swap Image) 

> В поле ввода URL подставляемого изображения (Swap Image URL) укажите адрес 
изображения, которое заменит исходное при наступлении события, и нажмите кнопку 

ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый 
сценарий 
для события onmouseover (при наведении указателя мыши). 

Теперь озвучим кнопку. 

>-В Области задач (Task Pane) нажмите кнопку Вставить (Insert) и выберите из 
меню 
действие Воспроизведение звука (Play Sound). На экране появится диалог 
Воспроизведение 
звука (Play Sound) (Рис. 7.99). 

.С Воспроизведение звука 

Воспроизвести звук; Обзор... 

ОК Отмена 

Рис. 7.99. Диалог Воспроизведениезвука (Play Sound) 

> В поле ввода Воспроизвести звук (Play Sound) укажите адрес звукового файла, 
который 
будет проигрываться при наведении указателя мыши на кнопку и нажмите кнопку 
ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый 
сценарий 
для события onclick (при щелчке мышью). 

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

>• Наведите указатель мыши на событие onclick во вновь созданном сценарии и 
нажмите 
появившуюся в правой части поля кнопку 0 . На экране появится всплывающее 
меню для выбора события (Рис. 7.100). 


Создание Web-сайтов 

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

> В меню для выбора события выберите onmouseover (при наведении указателя мыши).
 
Событие для воспроизведения звука будет изменено (Рис. 7.101). 

onabort Поведение 
onaflerupdate 
onbeforeunload 
onchange Вставить Удалить 
onclick Сиенарии в теге: <kng> 
ondataavatlable События [ Дейс 
ondatasetchanged onmousedown Замена изображения 
ondatasetcomplete onmousemove Воспроизведение звука 
ondblclick onmouseout Замена изображения 
onerror onmouseover Замена изображения 
onfilterchange onmouseup Замена изображения 
onhelp 
onkeydown 
onkeypieis См. также 
onkeyup Слои 
onload 
onmousedown 

Рис. 7.101. Действия для кнопки 

onmoutemove 

onmouseout 

onmouxdover 

onmouseup 

onscroH 

Рис. 7.100. Меню 
для выбора события 

>• Нажмите комбинацию клавиш F1). чтобы скрыть область задач. 

>• Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав 

кнопку Ё на панели инструментов Стандартная (Standard). 

Рекламный баннер обычно используется для отображения рекламных картинок или 
фотографий. 
Простой баннер чаще всего представляет собой статический прямоугольный 
рисунок. Анимированный рекламный баннер состоит из серии отдельных рисунков, 
которые 
отображаются в одной области страницы по очереди. При этом смена рисунков 
может сопровождаться различными переходными эффектами. В более ранних версиях 
FrontPage была возможность вставить рекламный баннер как Web-компонент. В 
программе 
FrontPage 2003 можно вставить рекламный баннер из файла, предварительно 
создав его в другой программе, например, так, как мы сделали это в главе 
«Создаем анимацию 
с помощью Adobe ImageReady». 

В языке HTML существует дополнительный набор команд и параметров, позволяющий 
добавить к элементам страницы специальные эффекты и связать их появление с 
определенными 
событиями. Такие эффекты называются динамическими эффектами, или 
DHTML (Dynamic HTML) эффектами. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

>• В режиме редактирования щелкните мышью на первом абзаце текста на странице 
tour2.htm и затем выберите в меню программы команду Вид • Панели инструментов • 

Эффекты DHTML (View • Toolbars • DHTML Effects). На экране появится панель 
инструментов 
Эффекты DHTML (DHTML Effects) для настройки динамических эффектов 
(Рис. 7.102). 

Рис. 7.102. Панель инструментов Эффекты DHTML (DHTML Effects) 
для настройки динамических эффектов 

> В открывающемся списке Вкл (On) на панели инструментов Эффекты DHTML 
(DHTML Effects) укажите событие, которое будет вызывать появление эффекта, 
например 
Наведение мыши (Mouseover). 

Другие варианты событий: Щелчок (Click), Двойной щелчок (Double click), 
Загрузка 
страницы (Page load) - список зависит от типа выбранного элемента. Динамические 
эффекты 
не могут применяться для текста, являющегося частью списка. 

>• В открывающемся списке Применить (Apply) выберите один из эффектов, например 

Форматирование (Formatting), если ранее вы выбрали событие Наведение мыши 
(Mouse over). 

Набор эффектов зависит от выбранного элемента и события. Для наведения 
указателя 
мыши (mouse over) на текст это может быть Форматирование (Formatting),: то есть 
изменение 
шрифта, цвета текста, вывод рамки и т.п. Для Загрузки страницы (Page load) 
это могут быть разные варианты появления или исчезновения текста со страницы. 

у В открывающемся списке Настройка (Choose settings) установите параметры 
выбранного 
эффекта, например укажите Выбрать шрифт (Choose font) для эффекта 
Форматирование 
(Formatting). 

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

> Если вы выбрали параметр Выбрать шрифт (Choose font), то далее на экране 
появится 
диалог Шрифт (Font) (Рис. 7.33). Укажите в нем, каким шрифтом будет 
отображаться 
выбранный фрагмент текста при возникновении заданного события, и нажмите 
кнопку ОК. 

>• В представлении Страница (Page) переключитесь в режим Просмотр (Preview), 
щелкнув на кнопке Просмотр (Preview) в нижней части вкладки с редактируемой 
страницей, и проверьте, как работает выбранный динамический эффект. 

Кроме текста, DHTML-эффекты можно применять к рисункам, кнопкам и другим 
элементам страницы. Поэкспериментируйте с различными эффектами, попробуйте 
выбрать 
различные события и настройки. Для одного элемента страницы можно установить 
одновременно несколько динамических эффектов, если они не противоречат друг 
другу. 
Для удаления эффекта служит кнопка Удалить эффект (Remove Effect) на панели 
инструментов 
для настройки эффектов. 

Если страница содержит большое количество текста и других элементов, удобно 
выделить 
элементы с DHTML-эффектами, чтобы было легче их обнаружить во время проек



Создание Web-сайтов 

тирования страницы. Это можно сделать с помощью кнопки ш 

на панели инструментов 
Эффекты DHTML (DHTML Effects) (Рис. 7.103). 

j _ 

Применить Форматированы* * Выбрать границу. . 

О климате Греции 
свойства .• 
этойпанели • Грец»1я[граничкт с Албанией, бывшей Югославией. Болгарией и . . 
дл я '•'•'' • ' ; Турцией. Протяженность границ составляет 1166 км. Грецию 
омывают 

отббраясеншё, Эгейское, Ионическое, Критское и Ливийское моря. Береговая линия 
на ней ,- ,: простирается почти на 4000 км. : _^ 
гиперссылок] \ 

Рис. 7.103.«Подсветка» элементов с DHTML-эффектами 

> Закройте панель инструментов Эффекты DHTML (DHTML Effects), выбрав команду 
меню Вид • Панели инструментов • Эффекты DHTML (View • Toolbars • DHTML 
Effects). 

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

JV&1O. Вставляем звук и видео 

Наряду с различными специальными эффектами для «оживления» страниц широко 
используются 
мультимедиа-объекты: звук, видео, Flash-анимация и т.п. В предыдущем опыте 
мы уже рассмотрели один из способов озвучивания сайта. Напомним, что звуковой 
фрагмент можно воспроизводить при нажатии на анимированную кнопку или при 
наведении 
на нее указателя мыши. Кроме этого, для каждой страницы сайта можно выбра ъ 
фоновый звук или музыку, которая будет воспроизводиться при открытии страницы. 

>• Чтобы установить фоновую музыку, в режиме редактирования страницы щелкните 
правой кнопкой мыши в любой области страницы и в появившемся контекстном 
меню выберите команду Свойства страницы (Page Properties). На экране 
появится диалог Свойства страницы (Page Properties) с открытой вкладкой Общие 
(General) (Рис. 7.30). 

> В группе элементов управления Фоновый звук (Background sound) нажмите кнопку 
Обзор (Browse) и в открывшемся диалоге Расположение (Location) выберите файл с 
музыкальным фрагментом. 

Звуковой файл необходимо подготовить заранее. Он может быть записан в одном из 
основных 
форматов: Wave Sound (.wav), Midi Sequencer (.mid), Real Media (.ram, .ra), 
AIFF 
Sound (.aif, .aifc, .aiff) или AU Sound (.au, .snd). Если вы заранее не 
поместили файл с 
музыкой в папку сайта, то его можно найти на диске. Для примера можно взять 
один из 
системных звуковых файлов в папке \Windows\Media'. 

Название папки, в которой хранятся файлы операционной системы, может отличаться 
от указанной. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

В поле ввода Число повторов (Loop) диалога Свойства страницы (Page Properties) 
можно указать число последовательных повторений звукового фрагмента или 
установить 
флажок Непрерывно (Forever) для бесконечного воспроизведения. 

> Нажмите кнопку ОК, чтобы закрыть диалог Свойства страницы (Page Properties). 

>• Сохраните страницу и запустите браузер, нажав кнопку на панели инструментов 
Стандартная (Standard), чтобы проверить воспроизведение фоновой музыки. 

Поместить видео на страницу сайта так же просто, как и добавить рисунок. 

>• Чтобы поместить на страницу сайта видеоролик, установите текстовый курсор в 
нужную 
позицию и выберите в меню команду Вставка • Рисунок • Видеозапись (Insert 

• Picture • Video). На экране появится диалог Видео (Video). 
Чаще всего для хранения видеоинформации используется формат AVI, а 
соответствующие 
файлы имеют расширение *.avi. Для поддержки других форматов видео могут 
потребоваться дополнительные программные кодеки или подключаемые модули для 
браузера. 

>• Выберите файл с видеороликом в диалоге Видео (Video) и нажмите кнопку ОК. 

Если вы работаете в операционной системе Windows NT или Windows XP, то для 
примера 
можно взять файл clock.avi в папке, где установлена операционная система. 

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


>• Щелкните правой кнопкой мыши на области вывода видеоизображения и в 
появившемся 
контекстном меню выберите команду Свойства рисунка (Picture Properties). 
На экране появится диалог Свойства рисунка (Picture Properties) с открытой 
вкладкой 
Видеозапись (Video) (Рис. 7.104). 

Источник видеозаписи: 
|dock.avi 


Число повторов: [l f?^ П Непрерывно 

Задержка повтора: |о frrj «с 

Начать -— (*} 
при открытии файла О при неведении указателя ц 

Рис. 7.104. Вкладка Видеозапись (Video) диалога 
Свойства рисунка (Picture Properties) 


Создание Web-сайтов 

Установка переключателя При открытии файла (On file open) указывает, что 
воспроизведение 
видеоролика будет происходить каждый раз при загрузке страницы в браузер. 
Установка флажка При наведении указателя мыши (On mouse over) позволяет 
запускать видеоролик при наведении на него указателя мыши. В поле ввода со 
счетчиком 
Число повторов (Loop) можно указать, сколько раз должен показываться ролик 
или установить флажок Непрерывно (Forever) для бесконечного воспроизведения. 
Время задержки в миллисекундах между показами можно установить в поле Задержка 
повтора (Loop delay). 

>• Выполните нужные настройки для воспроизведения видео и закройте диалог 
Свойства 
рисунка (Picture Properties), нажав кнопку ОК. 

Чтобы посмотреть, как будет выглядеть видео, сохраните страницу и запустите 
брау


• на панели инструментов Стандартная (Standard). 
зер, нажав кнопку 

Если основным браузером в вашей системе является MS Internet Explorer, вы 
можете посмотреть, 
как будет выглядеть видеоизображение, просто переключившись в режим Просмотр 
(Preview) представления Страница (Page). 

Настройки для видео не случайно находятся в диалоге Свойства рисунка (Picture 
Properties). 
Поместив на страницу видеофрагмент, вы также можете указать рисунок для той же 
области страницы на вкладке Общие (General). Если браузер посетителя сайта не 
поддерживает 
воспроизведение видео, то тогда он увидит рисунок. 

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

Существует несколько технологий создания компонентов для Web-страниц. В програм.
ме 
FrontPage реализована возможность работы с несколькими их видами: элементами 
ActiveX (ActiveX controls), Java-апплетами (Java applets), фильмами в формате 
Flash и 
подключаемыми модулями (plug-ins). Между ними много общего, разница лишь в 
способах 
реализации и подключения. С помощью подключаемых компонентов можно реализовать 
как простой объект - кнопку или изменяющуюся надпись, так и достаточно сложный 
- интерактивную карту или игру на странице сайта. Например, анимированную 
кнопку или рекламный баннер невозможно реализовать с помощью стандартных команд 

HTML. Они представляют собой заранее подготовленные Java-апплеты. Если у вас 
есть 
Java-апплет, реализующий работу нестандартного элемента пользовательского 
интерфейса 
- какой-либо кнопки, списка, рисунка, таблицы с определенным поведением, то вы 
можете поместить его на Web-страницу. 

>• Откройте одну из страниц сайта, например tour1.htm, дважды щелкнув на имени 
файла в режиме просмотра файлов и папок сайта. 

> Чтобы добавить на страницу Java-апплет, выберите в меню команду Вставка • 
Webкомпонент 
(Insert • Web Component). На экране появится диалог Вставка компонента 
Web-узла (Insert Web Component). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

> В списке Тип компонента (Component, type) выберите Дополнительные элементы 
управления (Advanced Controls), а в списке Выберите элемент управления (Choose 
a control) - Приложение Java (Java Applet) (Рис. 7.105). 

tin Счетчик посещений 
9 | Коллекция фотографий Приложение J 
^ Включенное содержимое <3j{ Подключаемый модуль 
пЗ Панели ссылок Поле подтверждения 
> Оглавление Элемент ActiveX 
Ш Лучшая десятка Элемент управления ерегкми разработки 
J j Представление списка Фильм в формате Flash 
t Представление библиотек* 

Дополнительные коипонем

1 _Н 

Вставка на страницу HTML-содержимого, которое не будет изменяться в FrontPage. 

Поиск компонентов 
в Интернете 


Отмена Готово | 

Рис. 7.105. Диалог Вставка компонента Web-узла (Insert WebComponent) 

> Нажмите кнопку Готово (Finish). На экране появится диалог Свойства приложения 

Java (Java Applet Properties) (Рис. 7.106). 

Источник приложения: 

Базовый URL-адрес приложения; 

Сообщение для обозревателей, не поддерживающих Java: 

Цараметры приложения: ••—'Имя 
Тип значения 


Добавить... | 

Изменит»., Г\ 

Удалить 

Интервал по горизонтали; JO Выравнивание: [по умолчанию \'-*\ 

Интервал по вертикали: [О 

Размер 

Ширина: 128 Высота: 128 

Рис. 7.106. Диалог Свойства приложения Java (Java Applet Properties) 

> В поле ввода Источник приложения (Applet Source) укажите файл апплета. Обычно 

файлы Java-апплетов имеют расширение .class. 

Если файл апплета находится вне папки сайта, то в поле ввода Базовый адрес 
приложения 
(Applet base URL) нужно указать путь к файлу. В группе элементов Параметры 
приложения (Apple^ parameters) определяются параметры, передаваемые апплету 
перед 


Создание Web-сайтов 

выполнением его кода. В нижней части диалога можно указать положение (Layout) 
апплета 
на странице и размеры его изображения (Size). Если браузер посетителя сайта не 
поддерживает возможность работы с Java-апплетами или такая возможность 
отключена, 
то вместо апплета на странице будет отображен текст, указанный в поле Сообщение 
для 
обозревателей, не поддерживающих Java (Message for browsers without Java 
support). 

> Нажмите кнопку ОК. Выбранный апплет будет добавлен на страницу. 

В отличие от Java-апплетов, элементы ActiveX широко применяются не только на 
Webстраницах, 
но и во многих приложениях Windows, где требуется использование нестандартных 
элементов пользовательского интерфейса. ActiveX представляет собой программной 
компонент, способный выводить изображение в определенную область окна или 
страницы 
и реагировать на различные события от мыши, клавиатуры или других устройств. 
Это может 
быть, например электронная таблица или мультимедиа-проигрыватель. Элементы 
ActiveX входят в состав многих программных продуктов, таких, как графические 
редакторы, 
редакторы электронных таблиц, системы разработки приложений и др. Существуют 
также элементы ActiveX, специально ориентированные на Интернет. 

>• Чтобы поместить на страницу элемент ActiveX, в диалоге Вставка компонента 
Webузла 
(Insert Web Component) (Рис. 7.105), в списке Тип компонента (Component type) 
выберите Дополнительные элементы управления (Advanced Controls), а справа 
Элемент 
ActiveX (ActiveX Control). 

> Нажмите кнопку Далее (Next). На экране появится второй диалог Вставка 
компонента 
Web-узла (Insert Web Component) (Рис. 7.107). 

Еыберите элемент управления; 

Microsoft Animation Control 6.0 (SP4) 
Microsoft Dire>ctAnimation Path 
Microsoft DirectAnimation Sprite 


и 

Microsoft DirectAnimation Structured Graphics 
Microsoft LfstVlew Control, version 6.0 
MicrosoFt MonthView Control 6.0 (SP4) 
Microsoft NetShow Piayer 


ActiveMcvieControl Object 

Поиск компонентов 
Г> | [ Сотово "| 

Рис. 7.107. Второй диалог Вставка компонента Web-узла (Insert Web Component) 

> Выберите, например, элемент Microsoft MonthView Control 6.0 (SP4), и нажмите 
кнопку 
Готово (Finish). Выбранный элемент будет добавлен на страницу (Рис. 7.108). 

В зависимости от того, какой элемент ActiveX вы выбрали, он может по-разному 
выглядеть 
на странице. В списке доступных элементов в диалоге Вставка компонента Webузла 
(Insert Web Component) (Рис. 7.107) перечислены не все ActiveX-объекты, 
зарегистрированные 
в системе. Чтобы увидеть их полный список, нужно нажать на кнопку 
Настройка (Customize) и выбрать элемент в диалоге Изменение списка элементов 
ActiveX (Customize ActiveX Control List) (Рис. 7.109). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

свойства 

этой панели 
для С.нт 


XL И 

отображения 
на ней 
гипврссъиюк] CD 


30 31 2345 
6 7 8 9 10 11 12 
13 14 15 16 17 18 19 
20 21 22 23 24 25 26 
27 21 29 30 12 3 
4 5678910 

d.j. 01.09.2004 
От. 

.Рис. 7.108. Элемент ActiveX для отображения календаря 

Изменение списка элементов ActiveX 

Имя элемента: 

:-) VideoSoft FlexStriig Control 
ш ActionBvr Class 
^ ActiveMovieControl Object 


ActiveXPIugin Object 
ActorBvr Class 
adbanner Class 
Adobe Acrobat Control for ActiveX 
Application Data Control 

Выделить все 

Axis Control 
Axis Control 2.0 
CDDBControl Class 


Снять флажки 
CDDBWhampControl Class 
ColorBvr Class 
COMNSView Class 
J CoverEdCtrl Control 

:-) VideoSoft FfexArray Control


Расположение: |C:\WINDOWS\Syscem32\V5FLEX3.OCX 

Версия: 

E 

Рис. 7.109. Диалог Изменение списка элементов ActiveX 

(Customize ActiveX Control List) 

> Щелкните правой кнопкой мыши на элементе ActiveX, помещенном на страницу, и в 

появившемся контекстном меню выберите команду Свойства элемента управления 
ActiveX (ActiveX Control Properties). На экране появится диалог Свойства: 
Элемент 
ActiveX (ActiveX Control Properties) (Рис. 7.110). 

- У"! j| ШРИФТ] Цвет [ Рисунок [ Тег объекта [ Параметры | 
УаЬе: 101.09.2004 D ShoK^eekNimbers 

У 

MinDate: 

|01.01.1753 П M^tiSelect В Enacted 

У 

MaxDate: 131.12.9999 

У 
У 
В ShowToday 

JlartOIWesk: \2 -mvwMonday 

MonthRows: I

У 

MouKPointei: |0-cc2Oelau« 

У MonlhColjirrra: Г Г 

°пеУ

OLEDiopMode lO-«20LEPtopN 
S^rolRate: [О 
BoiderSlyte: |0-cc2None 

У

щ MaxSeCouj* [

Acpeaonce: |i-cc23D 

У 

OK. [ Отмена | [ Прцуоть | | Справка \ 

Puc. 7.110. Диалог Свойства: Элемент ActiveX (ActiveX Control Properties) 


Создание Web-сайтов 

Диалог имеет несколько вкладок. Их количество и состав зависит от самого 
элемента 
ActiveX. Вкладки Тег объекта (Object Tag) и Параметры (Parameters) присутствуют 
всегда. 
На них определяются название, расположение на странице, набор параметров, 
передаваемых 
при активизации и другие стандартные настройки. 

Другие способы реализации нестандартных элементов - это использование 
подключаемых 
модулей (plug-ins) и фильмов в формате Flash. Для их добавления на страницу 
нужно в списке Тип компонента (Component type) диалога Вставка компонента 
Webузла 
(Insert Web Component) (Рис. 7.105) выбрать Дополнительные элементы управления 
(Advanced Controls), а в списке Выберите элемент управления (Choose a control) 
выбрать Подключаемый модуль (Plug-In) или Фильм в формате Flash (Movie in Flash 

Format). 

Для использования элементов ActiveX, Java-апплетов, подключаемых модулей и 
фильмов 
в формате Flash вам, скорее всего, понадобится дополнительная документация, 
поставляемая 
разработчиком. Самостоятельное создание таких компонентов требует определенных 
знаний в области языков программирования, объектных технологий, программных 
интерфейсов и спецификаций. Поэтому эта тема выходит за рамки данной книги. 
Кроме того, в Интернете можно найти множество готовых решений, удовлетворяющих 
различным потребностям Web-дизайнеров. Подробную информацию по этому вопрос)' 
можно посмотреть, например, на сайтах activex.microsoft.com, www.active-x.com, 
java.sun.com. 

€myf/m JV&11. Создаем формы 

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

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

> Установите текстовый курсор на странице в позицию, куда будет помещена форма, 

и выберите в меню команду Вставка • Форма • Форма (Insert • Form • Form). 
На страницу будет помещена форма. 

В терминах FrontPage форма представляет собой прямоугольную область на странице,
 
выделенную пунктирной линией, на которую вы можете помещать произвольный текст 
и 
поля формы, то есть стандартные элементы типа полей ввода, флажков, 
открывающихся 
списков и т.п. В новую форму автоматически включаются две кнопки: Отправить 
(Submit) для отправки введенной информации и Сброс (Reset) для очистки полей 
или 
установки исходных значений. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• Чтобы увеличить размер формы, добавьте в нее строки, нажав несколько раз 
клавишу 

[[Enter] _ 

> Установите текстовый курсор внутри формы и выберите в меню команду Вставка • 
Форма • Поле (Insert • Form • Textbox). На форму будет помещено поле ввода. 

Ширину поля ввода можно изменить, перемещая его край с помощью мыши. Рядом с 
полем ввода вы можете указать заголовок или поясняющий текст, который вводится 
прямо 
на форме. В данном случае поле ввода будет использоваться для ввода имени 
клиента, 
заказывающего авиабилет. 

> Установите текстовый курсор в строке над полем ввода на форме и введите 
заголовок 
поля Фамилия Имя Отчество. 

>• Щелкните правой кнопкой мыши на поле ввода и в появившемся контекстном меню 
выберите команду Свойства поля формы (Form Field Properties). На экране 
появится 
диалог Свойства текстового поля (Text Box Properties) (Рис. 7.111). 

Щирииа в знаках: |20 | Последовательность перехода: 

Поле пароля; О Да © Н^т 

Стиль... ||пдоеедить,..| СК [ Отмена | 

Рис. 7.111. Диалог Свойства текстового поля (Text Box Properties) 

> В поле Имя (Name) укажите имя поля формы, например ClientName. 

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

Начальное значение (Initial Value) можно указать текст, который будет 
присутствовать 
в поле по умолчанию. Поле Ширина в знаках (Width in characters) определяет 
ширину видимой области поля ввода. Если в группе переключателей Поле пароля 
(Password field) установить переключатель Да (Yes), то вводимый текст будет 
отображаться 
в виде звездочек. 

> Нажмите кнопку Проверить (Validate). На экране появится диалог Проверка 
текстового 
поля (Text Box Validation) (Рис. 7.112). 

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

(Min length) и максимальное (Max length) количество символов в группе элементов 

управления Длина данных (Data length). Например, имя клиента можно ограничить 
интервалом 
от 5 до 50 символов. 


Создание Web-сайтов 

Проверка текстового поля 


Выводимое имя; 

Тип данных: 

Формат текста 

• оробелы 
Формат чисел -— 

Группировка: 

О мпятая О точка О пробел 0 нет 

Разделитель: © мгпт&я О точка 

Длина данных 

Мин. длина: Макс, длина: |

О Требуется 

Значение данных 

О Лоле.: |больше или равно Значение: I I 

П Поле: |меньше или равно Значение: I 

Отмена 

Рис. 7.112. Диалог Проверка текстового поля (Text Box Validation) 

В открывающемся списке Тип данных (Data type) можно выбрать тип поля и затем 
определить 
допустимый набор символов в группе элементов управления Формат текста (Text 
format) и Формат чисел (Numeric Format). Например, для ввода телефонного номера 
разрешить 
использовать только цифры, скобки и дефис. 

В поле ввода Выводимое имя (Display name) указывается имя поля, которое будет 
выводиться 
в сообщении в случае нарушения установленных правил. 

>• Нажмите кнопку ОК. Вы вернетесь к диалогу Свойства текстового поля (Text Box 

Properties). 

>• Нажмите кнопку OK, чтобы закрыть диалог и сохранить изменения. 

>• Установите текстовый курсор на следующую строку формы и введите заголовок 
для 
следующего элемента Страна. 

• Выберите в меню команду Вставка • Форма • Раскрывающийся список (Insert • 
Form • Drop-Down Menu). На форму будет помещен открывающийся список. 

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

для полета, то есть страна. 

> Щелкните правой кнопкой мыши на открывающемся списке на форме и в появившемся 

контекстном меню выберите команду Свойства поля формы (Form Field 
Properties). На экране появится диалог Свойства раскрывающегося списка (Drop-
Down Box Properties) (Рис. 7.113). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Свойства раскрывающегося списка 


Имя; pl 

Вариант 1 Выбрано | Значение Добавить... j 

Цдавимть... 

Высота: 

Последовательность перехода; 

Разрешен выбор нескольких элементов: О Да © Нет 

Стиль... 11 Проверить... | Отмена 

L ок 

Рис. 7.113. Диалог Свойства раскрывающегося списка 
(Drop-Down Box Properties) 

> В поле Имя (Name) укажите имя поля формы, например Destination. 

>• Нажмите кнопку Добавить (Add). На экране появится диалог Добавление варианта 

(Add Choice) (Рис. 7.114). 

>- В поле ввода Вариант (Choice) укажите название элемента списка, например 
Англия. 

Если установить флажок Значение (Specify Value), 

Добавление варианта 

то в поле ввода под флажком можно указать значе


Вариант; 

ние, которое будет передаваться вместо выбранно


IL 

го названия. При сброшенном флажке значение 

• Значение: 
эквивалентно названию элемента списка. Пере


ключатели Начальное состояние (Initial State) оп


Начальное состояние: 

ределяют, будет ли данный элемент выбран по 

О выбрано 

умолчанию. 

© не выбрано 

> Нажмите кнопку ОК. Диалог Добавление вари


Отмена 

L ок J

анта (Add Choice) закроется, и введенный эле


мент будет добавлен в список в центральной час


Рис. 7.114. Диалог Добавление 

ти диалога Свойства раскрывающегося списка 

варианта (Add Choice)

(Drop-Down Menu Properties). 

> Поместите в список другие возможные значения для открывающегося списка. 

С помощью кнопок в правой части диалога можно изменять, удалять и перемещать 
элементы списка. Если в поле ввода Высота (Height) указать значение больше 
единицы, 
то открывающийся список будет выглядеть как обычный список. Для обычного списка 

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

и клавиши 1Г^*Г| 1. установив переключатель Да (Yes) в группе переключателей 
Разрешить 
выбор нескольких элементов (Allow multiple selection). Нажав кнопку Проверить 
(Validate), можно определить правила ввода для открывающегося списка. Они проще,
 
чем правила для текстового поля ввода. 


Создание Web-сайтов 

> Нажмите кнопку ОК, чтобы закрыть диалог Свойства раскрывающегося списка 
(Drop-Down Menu Properties) и сохранить изменения. 

> Установите текстовый курсор на следующую строку формы и выберите в меню 
команду 
Вставка • Форма • Флажок (Insert • Form • Check Box). На форму будет помещен 
флажок. 

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

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

> Щелкните правой кнопкой мыши на флажке и в появившемся контекстном меню 
выберите 
команду Свойства поля формы (Form Field Properties). На экране появится 
диалог Свойства флажка (Check Box Properties) (Рис. 7.115). 

>• В поле Имя (Name) укажите имя поля формы, 
например TwoWayTicket. 

>-В поле ввода Значение (Value) укажите Значение: |ON 
значение, которое будет передаваться в ка-Начальное состояние: О Установлен © 
Снят 
честве результата при установленном флаж


Последовательность перехода: 

• 

ке, например Да. 

Отнена1 

Переключатели Начальное значение (Initial 
Value) определяют, будет ли флажок по умол


Рис. 7.115. Диалог Свойства 

чанию установлен (Checked) или сброшен (Un


флажка (Check Box Properties) 

checked). 

Нажмите кнопку ОК, чтобы закрыть диалог Свойства флажка (Check Box Properties) 
и сохранить изменения. 

Чтобы изменить текст на кнопке Отправить (Submit), щелкните правой кнопкой мыши 

на кнопке и в появившемся контекстном меню выберите команду Свойства поля 
формы (Form Field Properties). На экране появится диалог Свойства кнопки (Pusli 

Button Properties) (Рис. 7.116). 

Свойства кнопки 

ИМЯ: 

EL 

Значение или подпись: [Отправить 

Тип КНОПКИ: О .бычная © Отправить О Сброс 

Последовательность перехода: I 

| Стиль,.. | ОК Отмена 

L 

Рис. 7.116. Диалог Свойства кнопки (Push Button Properties) 

> Введите новый текст, например Заказать, в поле ввода Значение или подпись 
(Value/label) и нажмите кнопку ОК. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Точно так же вы можете заменить текст на кнопке Сброс (Reset) на более понятный,
 например 
Очистить поля. 

>• Сохраните страницу и запустите браузер, выбрав в меню команду Файл • 
Просмотр 
в обозревателе (File • Preview in Browser). В браузере будет отображена 
страница с 
формой (Рис. 7.117). 

Ыслуги Microsoft Internet I xploiei н-jn 
Файл Цравка Вид Избранное Сервис .лравка 
@Н« м 'О* Э @ f.||/5noM« -^> Избранное ф Медиа 
Адрес; [j p C:\DocumanU and S«lting«Wa«ly\My РоситвпиЧМои веб аз Q Переход LMe 

Услуги 
[ Новости ] [ Услуги ] 

Египет Фамилия Имя Отчество 

Греция 

Страна | Англия) 

• Заказать обратный биле! 
Заказать | Очистить поля 
В 
^ Готово Щ My Computer 

Рис. 7.117. Форма на странице при просмотре в браузере 

> Проверьте, как работают элементы формы, и затем закройте браузер, чтобы 
вернуться 
к программе FrontPage. 

На форму можно поместить еще ряд элементов, имеющихся в меню Вставка • Форма 
(Insert • Form). Это Текстовое поле (Text Area) для ввода длинного текста, 
Переключатель 
(Option Button) для выбора одного из нескольких вариантов, Кнопка (Push Button) 

для выполнения какого-либо действия и другие. 

>• Посмотрите самостоятельно, как работают данные элементы, какие имеют 
свойства и 
правила ввода данных. 

Чтобы выровнять элементы формы и расположить их нужным образом, можно 
использовать 
такие же приемы, как для работы с текстом: добавление символов перевода строки, 

установка формата абзацев, применение таблиц и команд позиционирования. 

После того как посетитель сайта нажмет кнопку Заказать (Submit), необходимо 
получить 
данные из заполненной формы - результаты формы - и сохранить их для последующей 

обработки. В программе FrontPage существует несколько способов обработки 
результатов формы. 


Создание Web-сайтов 

> Щелкните правой кнопкой мыши в любой области формы и в появившемся 
контекстном 
меню выберите команду Свойства формы (Form Properties). На экране появится 
диалог Свойства формы (Form Properties) (Рис. 7.118). 

Свойства Формы 
Сохранение результатов < 
© Йтдеавка] 
Имя файла: |-PHvatefform_resultS.e5v I Обмр... 

Адрес пояты: [ 

О В базе данных 

О В другом месте [Нэораиеземый сценарий ISAPI, МЪАРЬ CGI лпи ASPl *r| 

Свойства формы —-———————————————— — 

Имя формы: |FrontPage_Forml 

Конечная рамка: [ 

[Параметры... | [Дополнительно... | ОК | Отмена | 

Рис. 7.118. Диалог Свойства формы (Form Properties) 

С помощью группы элементов управления Сохранение результатов (Where to store 
results) 
определяется способ сохранения результатов формы. По умолчанию установлен 
переключатель Отправка (Send to). Это значит, что полученные данные могут быть 
сохранены 
в текстовом файле, указанном в поле Имя файла (File name), или отправлены по 
электронной почте по адресу, указанному в поле Адрес почты (E-mail address). 

>• Нажмите кнопку Параметры (Options). На экране появится диалог Сохранение 
результатов 
(Saving Results) (Рис. 7.119). 

Сохранение результатов 

Страница подтверждения Сохраняемые поля 
Запись результатов | Отправка результатов по почте 

Имя файла: 
|_private/fQrrn_resulbs.csv J | Обзор... | 


Формат файла: 
| Текстовый (разделитель - запятая) 


153 включить имена полей 
EZE rjocJWA»» результаты в юнц« файп» 


Дополнительный файл: ""••••• 
Имя файла: 


Формат файла: 
HTML 


13 включить имена полей 
0 2 последние результаты в конце файла 

Отмена 

2L 

Рис. 7.119. Диалог Сохранение результатов (Saving Results) 


Создание Web-сайта с помощью Microsoft FrontPage 2003

В этом диалоге можно настроить различные параметры сохранения результатов в 
файле 
или письме. На вкладке Запись результатов (File Results) можно выбрать Формат 
файла 
(File format). Это может быть текстовый файл с различными видами разделителей 
или 
файл в формате HTML. Здесь же можно указать дополнительный файл для результатов.
 
Такая возможность удобна, например, если требуется подготовить один результат 
для 
сохранения в базе данных, а другой - для отображения на странице. 

На вкладке Отправка результатов по почте (E-mail Results) можно выбрать Формат 
электронной почты (E-mail format), указать тему письма (Subject line) и 
подставить отправителя 
(Reply-to line). 

На вкладке Страница подтверждения (Confirmation Page) имеется возможность 
указать 
адрес страницы с информацией подтверждения ввода (URL of confirmation page 
(optional)), а также адрес страницы, отображаемой при нарушении правил ввода 
(URL of 
validation failure page (optional)). 

На вкладке Сохраняемые поля (Saved Fields) можно выборочно перечислить поля 
формы, 
которые требуется сохранить (Form fields to save), определить их порядок, 
указать 
формат даты (Date format) и времени (Time format), а также включить в результат 
дополнительные 
сведения: имя удаленного компьютера (Remote computer name), имя пользователя 
(Username) и тип обозревателя (Browser type). 

> Нажмите кнопку Отмена (Cancel), чтобы вернуться к диалогу Свойства формы 
(Form Properties). 

Если в диалоге Свойства формы (Form Properties) (Рис. 7.118) установить 
переключатель 
В базе данных (Send to database) в группе элементов управления Сохранение 
результатов 
(Where to store results), то данные будут сохраняться в базе данных. Это может 
быть база данных MS Access или другая база данных, поддерживающая работу через 
стандартный системный интерфейс доступа к базам данных ODBC (Open Database 
Connectivity 
- Связь с открытыми базами данных). Для работы с базой данных необходимо 
создать и настроить соединение (Database connection), выбрать таблицу и 
установить 
другие параметры в диалоге Параметры сохранения результатов базы данных 
(Options 
for Saving Results to Database) (Рис. 7.120), который вызывается при нажатии на 

кнопку Параметры (Options). 

Если в диалоге Свойства формы (Form Properties) (Рис. 7.118) установить 
переключатель 
В другом месте (Send to other) в группе элементов управления Сохранение 
результатов 
(Where to store results), то данные будут обрабатываться с помощью скрипта 
(сценария), 
то есть небольшой программы, написанной разработчиком сайта. Такую программу 
называют также программой-обработчиком, или просто обработчиком. В редакторе 
FrontPage имеются два готовых обработчика: для дискуссионных форм (Discussion 
Form Handler) и для регистрационных форм (Registration Form Handler). Эти 
обработчики 
выбираются в открывающемся списке рядом с переключателем В другом месте (Send 
to 
other), а их параметры задаются в отдельных диалогах, вызываемых при нажатии на 

кнопку Параметры (Options). 


Создание Web-сайтов 

Параметры сохранения результатов базы данных 

Сохраненные поля | Дополнительные поля 
Результаты обращения к базе данных 

Подключение ———————— 

Использовать подключение к базе данных: 

|т [ | Добавить подключение.. 

Создать базу данных... 11 Обновит^бдау даинык.. 

Таблица для результатов формы: 

URL-адрес страницы подтверждения (необязательный): 
J | Обзор... 

URL-адрес страницы ошибок (необязательный): 
| Обзор,.. ) 

ОК Отмена 

Рис. 7.120. Диалог Параметры сохранения результатов базы данных 

(Optionsfor Saving Results to Database) 

Несмотря на разнообразие возможностей по обработке результатов формы, вы, 
скорее всего, 
не сможете проверить их работу на локальном компьютере. Для автоматического 
сохранения 
данных в файле, письме или базе данных необходимо, чтобы Web-сервер, где 
размещен 
сайт, поддерживал технологии FrontPage и SharePoint. Эти технологии 
предназначены 
для поддержки сайтов, разработанных с помощью программы FrontPage. Они, в 
частности, 
предоставляют два основных,сервиса: прием и передачу данных и файлов от 
посетителей 
сайтов к Web-серверу напрямую, без использования дополнительных протоколов, и 
поддерживают 
работу специфичных для редактора FrontPage элементов пользовательского 
интерфейса. Таким образом, чтобы проверить работоспособность описанных выше 
средств 
для работы с формами, необходимо разместить сайт на Web-сервере с поддержкой 
технологий 
FrontPage и SharePoint. О том, как разместить сайт на Web-сервере, мы поговорим 
в 
конце главы. 

Единственным вариантом обработки результатов формы без использования технологий 

FrontPage и SharePoint является использование скрипта, определенного 
разработчиком 
сайта. Скрипт при этом представляет собой специальную программу, написанную в 
соответствии 
с требованиями одной из технологий пересылки клиентских данных: CGI 
(Common Gateway Interface - Общий шлюзовой интерфейс), ISAPI, (Internet Server 
Application 
Program Interface - Программный интерфейс для приложений интернет-сервера), 
NSAPI (Netscape Server Application Program Interface - Программный интерфейс 
для приложений 
Web-сервера Netscape) или ASP (Active Server Pages - Активные серверные 
страницы). Чтобы установить собственный скрипт для обработки результатов формы, 

необходимо сделать следующее. 

> В диалоге Свойства формы (Form Properties) установите переключатель В другом 
месте (Send to other) в группе элементов управления Сохранение результатов 
(Where to store results). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В открывающемся списке, рядом с переключателем, выберите вариант Настраиваемый 
сценарий ISAPI, NSAPI, CGI или ASP (Custom ISAPI, NSAPI, CGI or ASP Script) 
и нажмите кнопку Параметры (Options). На экране появится диалог Параметры 
обработчика 
форм (Options for Custom Form Handler) (Рис. 7.121). 

Параметры обработчика Форм 131 
Действие: (--WEBBOT-SELF1 
Метод: (POST щ 
Тип кодировки: [ J 

| Стиль,.. | ок | Отмена | 

Рис. 7.121. Диалог Параметры обработчика форм (Options for Custom Form Handler) 


> В поле ввода Действие (Action) необходимо указать полный адрес 
программыобработчика. 


>• В открывающемся списке Метод (Method) необходимо выбрать метод пересылки 
данных. 

В соответствии с вышеперечисленными технологиями отправки клиентских данных 
существуют 
два стандартных метода пересылки POST и GET, которые отличаются способом 
пересылки информации. В обоих случаях информация передается в виде пар 
имя_поля=значение, разделенных амперсандами &. Программа-обработчик должна 
разобрать 
эти данные и выполнить определенные действия, например произвести поиск в 
базе данных и вывести результат в виде HTML-страницы, которая пересылается 
обратно 
для просмотра в браузере. В нашем примере (заказ авиабилетов) обработчик должен 
сохранить 
сведения о клиенте, забронировать за ним билет и сообщить об этом, передав в 
браузер страницу с подтверждением. Либо передать страницу с отказом в 
регистрации с 
указанием причин. 

> Нажмите кнопку ОК, чтобы закрыть диалог Параметры обработчика форм (Options 
for Custom Form Handler), и затем кнопку ОК в диалоге Свойства формы 
(Form Properties). 

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

Завершающим шагом при создании формы является включение в состав сайта страницы 

подтверждения (confirmation page). Страница подтверждения выводится в ответ на 
отправку 
данных при нажатии кнопки Отправить (Submit). Обычно она содержит некоторый 
текст, подтверждающий отправку, и информацию, введенную посетителем сайта в 
поля формы. Посетитель может проверить правильность указанных данных и при 
необходимости 
вернуться к форме для повторного заполнения. При использовании формы 
программа FrontPage автоматически создает страницу подтверждения и обеспечивает 
ее 
работу, но только если для обработки результатов формы не используется 
собственный 
скрипт. По умолчанию на страницу подтверждения выводятся названия полей и их 
значения. 
Вы можете самостоятельно создать страницу подтверждения и связать ее с формой. 
Для этого нужно создать новую страницу и поместить на нее поля подтверждения 
(confirmation fields), которые будут отображать данные из формы, а также другие 
элементы 


Создание Web-сайтов 

по вашему усмотрению. Чтобы добавить поле подтверждения на страницу, выберите 
дополнительный 
элемент управления Поле подтверждения (Confirmation Field) в диалоге 
Вставка компонента Web-узла (Insert Web Component) (Рис. 7.105). 

В этом опыте мы создали форму и поместили на нее нужные элементы. Чтобы создать 

форму, можно также воспользоваться готовыми шаблонами или мастером создания 
форм 
Для этого нужно выбрать в меню команду Файл • Создать (File • New), в Области 
задач 
(Task Pane) (Рис. 7.16) щелкнуть мышью на ссылке Другие шаблоны страниц (More 
page 
templates) и в диалоге Шаблоны страниц (Page Templates) (Рис. 7.122) выбрать 
один из 
шаблонов, например: Гостевая книга (Guest Book), Регистрационная форма (User 
Reg 
istration) или Форма обратной связи (Feedback Form). Либо выбрать Мастер 
страницы 
формы (Form Page Wizard), который запросит необходимую информацию для создания 
страницы с формой. 

Параметры 
книга фотографий 

Библиогра... Гостевая Коллекция 

О Добавить веб-задание 

О Открыть в тдкуш*м раикв 

Описание 

Оглавление Регистраци... Страница Создание пустой веб-страницы. 
форма поиска 

Образец 

Типичные форма форма 
вопросы обрати... подтвержд... 


JL 

Рис. 7.122. Диалог Шаблоны страниц (Page Templates) 

Если вы планируете использовать готовые средства FrontPage для сохранения 
результатов 
формы в файл или базу данных, необходимо убедиться в том, что на Web-сервере, 
где 
будет размещен сайт, были запущены серверные расширения FrontPage, службы 
Microsoft 
SharePoint Team Services или Microsoft Windows SharePoint Services. Подробнее о 
технологиях 
FrontPage и SharePoint можно узнать на сайте компании Microsoft по адресу 

www.microsoft.com/frontpage. 

JV&12. Добавляем счетчик посещений, 
поиск по сайту и другие компоненты 

Увидеть, насколько известен и популярен ваш сайт, можно с помощью счетчика 
посещений 
(hit counter). Счетчик посещений - это некоторый внутренний счетчик, значение 
которого 
отображается на странице и увеличивается каждый раз, когда посетитель загружает 

страницу в свой браузер. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>• Чтобы поместить на страницу счетчик посещений, установите текстовый курсор в 

нужную позицию и выберите команду меню Вставка • Web-компонент (Insert • Web 
Component). На экране появится диалог Вставка компонента Web-узла (Insert Web 
Component) (Рис. 7.41). 

>• В списке Тип компонента (Component type) выберите Счетчик посещений (Hit 
Counter), а в списке Выберите стиль счетчика (Choose a counter style) - один из 
вариантов 
счетчика. 

> Нажмите кнопку Готово (Finish). На экране появится диалог Свойства счетчика 
посещений 
(Hit Counter Properties) (Рис. 7.123). 

Свойства счетчика посещений 

© 012545676 9 

О Дру ™ рисунок 

1 

П Сбросить счетчик до 

EZH 

О Фиксированное число разрядов 

ОК | Отмена 

] 

Рис. 7.123. Диалог Свойства счетчика посещений (Hit Counter Properties) 

> Выберите вид счетчика, установив один из переключателей Стиль счетчика 
(Counter 
Style). 

Если выбрать переключатель Другой рисунок (Custom Picture), то можно указать 
собственный 
файл с графическим изображением цифр счетчика. Рисунок должен содержать 
равномерно расположенные цифры от 0 до 9. В диалоге Свойства счетчика посещений 

(Hit Counter Properties) можно дополнительно указать начальное значение 
счетчика 
с помощью флажка и поля Сбросить счетчик до (Reset counter to), а также 
количество 
отображаемых разрядов (Fixed number of digits). 

>• Нажмите кнопку ОК. На страницу будет помещен счетчик посещений. 

В режиме редактирования счетчик посещений отображается условно. Работу счетчика 

можно увидеть только при загрузке страницы с Web-сервера. Необходимо также, 
чтобы 
на сервере было установлено дополнительное программное обеспечение, которое 
поддерживает 
технологии FrontPage и SharePoint. О том, как поместить страницы сайта на 
Web-сервер, мы расскажем в последнем опыте этой главы. 


Создание Web-сайтов 

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

SpyLOG на каждую страницу помещается небольшой фрагмент кода, который передает 

данные о доступе к странице на специальный сервер. Там данные обрабатываются и 
за


писываются в базу данных. По собранной информации могут 

быть сформированы различные статистические отчеты: объем 

Hits ..28488606 

аудитории, динамика посещаемости, распределение посещаемо-31918 

Hosts... $456785 

сти в течение дня, прогноз посещаемости, просмотренные 7314 

страницы, точки входа и выхода, проведенное посетителем Rating 22 

время на странице и на сайте, географическое положение по


Visitors 8227989 

сетителей, IP-адреса, языки, браузеры, операционные систе-8518 

41 

мы, по каким ключевым словам и какие страницы сайта нахо


дят посетители через поисковые машины и т.п. На страницу Sp LoG 

сайта может быть помещен логотип, показывающий основные 

Рис. 7.124. Логотип

сведения о посещаемости (Рис. 7.124). Более подробную ин-

SpyLOG

формацию об этом можно найти на сайте www.spylog.com. 

Счетчик Rambler's Top 100 выполняет примерно те же функции, что и SpyLOG Он 
дает 

возможность владельцам собственных страниц определять количество визитов 
посетите


лей, собирать и анализировать статистику посещений. Проект Rambler's ToplOO 
также 

имеет цель привлечь владельцев крупных сайтов для сравни


тельной оценки их популярности, а рекламодателям это позво


ляет оценить популярность сайтов и принять решение о разме


щении рекламы. Для сбора статистики на страницу помещается 

Рис. 7.125. Логотип

специальный фрагмент кода и небольшой логотип (Рис. 7.125). 

Rambler's ToplOO

Подробнее узнать о счетчике Rambler можно на сайте 

top100.rambler.ru. 

На большом сайте обычно размещают отдельную страницу с поисковой формой (search 

form), чтобы посетители могли быстро и легко найти информацию по определенной 
теме. 
В поисковой форме посетитель вводит ключевое слово или фразу и получает список 
страниц сайта, на которых встречаются указанные слова. В программе FrontPage 
имеются 
средства, облегчающие создание и поддержку функционирования поисковой формы, 
но для обеспечения работы механизма поиска необходимо, чтобы на сервере, где 
будет 
находиться сайт, были запущены серверные расширения FrontPage, службы Microsoft 

SharePoint Team Services или Microsoft Windows SharePoint Services. 

> Чтобы поместить на страницу поисковую форму, установите текстовый курсор в 
нужную 
позицию и выберите команду меню Вставка • Web-компонент (Insert • Web 
Component). На экране появится диалог Вставка компонента Web-узла (Insert Web 
Component) (Рис. 7.41). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 351 

>• В списке Тип компонента (Component type) выберите Поиск в Интернете (Web 
Search), а в списке Выберите тип поиска (Choose a type of search) выберите 
Текущий 
Web-узел (Current Web). 

>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства формы 
поиска 
(Search Form Properties) (Рис. 7.126). 

Свойства формы поиска [результаты поиска | 
Форма ввода условий поиска: 
надпись для поля ввода: 

[поиск: 

Ширима в знаках: 
надпись для кнопки начала поиска: [найти 
надпись для кнопки сброса условий: |сброс 

L 
L 
I Отмена | 

Рис. 7.126. Вкладка Свойства формы поиска (Search Form Properties) 
диалога Свойства формы поиска (Search Form Properties) 

На первой вкладке диалога можно указать надпись для поля ввода поисковой формы 
(Label 
for input), ширину поля ввода в знаках (Width in characters), а также задать 
текст для 
кнопок поисковой формы. 

>• Выберите вкладку Результаты поиска (Search Results) (Рис. 7.127). 

Свойства формы поиска"] Результаты поиска | 

область доиска: |ВСВ 

1 

(01.09.2-004 

формат даты: 

а 

((нет) 

формат времени: 

П отображать степень совпадения 
О отображать дату создания файла 
[j j отображать размер файла (в Кбайт) 

3 


Рис. 7.127. Вкладка Результаты поиска (Search Results) 
диалога Свойства формы поиска (Search Form Properties) 


Создание Web-сайтов 

При поиске информации FrontPage проверяет не только полное, но и частичное 
совпадение 
указанного ключевого слова или фразы. Если установить флажок Отображать степень 

совпадения (Display score (closeness of match)) в диалоге Свойства формы поиска 

(Search Form Properties), то в результат поиска будет включена информация о 
степени 
совпадения слов в виде определенного численного коэффициента. Кроме этого, в 
результат 
поиска можно включить дату создания файла (Display file date) и размер файла 
(Dis


вой страницы (Рис. 7.122). 

play file size (in k bytes)) страницы или документа. 
> Нажмите кнопку ОК. Диалог Свойства формы поПоиск: 
иска (Search Form Properties) закроется, и на страницу 
будет помещена поисковая форма (Рис. 7.128). 1 Найга | Сброс 
Чтобы включить в состав сайта страницу с поисковой 
формой, можно также воспользоваться готовым шаблоном 
Страница поиска (Search Page) при создании ноРис. 
7.128.Поисковая форма 
в режиме редактирования 
страницы 

В упрощенном виде работу механизма поиска можно представить следующим образом. 
При сохранении страницы во время разработки сайта FrontPage автоматически 
помещает 
все новые слова из текста на странице, а также информацию об их местоположении 
в 
специальный индексированный список. Затем, когда посетитель сайта отправляет на 
сервер 
слово, указанное в поисковой форме, FrontPage отыскивает это слово в списке, 
формирует 
перечень страниц, на которых оно встречается, и отправляет обратно для 
отображения 
в браузере. Для экономии времени, добавляя новые слова в индексированный список,
 
FrontPage не исключает из списка старые, которые были удалены в процессе 
редактирования 
страницы. Поэтому перед публикацией сайта, то есть размещением его на 
Web-сервере, желательно обновить список и очистить его от ненужных слов. Это 
можно 
сделать, выбрав в меню команду Сервис • Пересчитать гиперссылки (Tools • 
Recalculate 
Hyperlinks). В список слов не включаются часто используемые предлоги, союзы и 
артикли, не несущие смысловой нагрузки, поэтому они не участвуют в поиске. 
Механизм 
поиска, используемый в программе FrontPage, ориентирован в основном на 
англоязычные 
сайты. Для поддержки русскоязычных сайтов и сайтов на других языках можно 
использовать 
дополнительные программные сервисы, например программу Microsoft Index 
Server, входящую в состав пакета Microsoft Internet Information Services (IIS). 
Более подробную 
информацию по этому вопросу можно найти на сайте компании Microsoft. 

Если требуется поместить на страницу электронные таблицы, графики или диаграммы,
 вы 
можете воспользоваться готовыми Web-компонентами пакета MS Office. Их можно 
выбрать 
в диалоге Вставка компонента Web-узла (Insert Web Component) (Рис. 7.41). 

Компонент Электронная таблица Office (Office Spreadsheet) представляет собой 
упрощенный 
вариант листа MS Excel. Вы можете напрямую редактировать таблицу как при 
проектировании страницы, так и при просмотре ее в браузере. Компонент Сводная 
таблица 
Office (Office PivotTable) позволяет составить сводную таблицу по информации из 

базы данных или других источников. Компонент Диаграмма Office (Office Chart) 
предназначен 
для построения и отображения на странице различных диаграмм по данным из 
электронной таблицы, сводной таблицы или базы данных. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Чтобы «офисные» компоненты корректно отображались в браузере посетителей сайта, 

необходимо, чтобы у них на компьютере был установлен пакет MS Office или 
отдельная 
библиотека Web-компонентов из этого пакета, при этом наличие серверных 
расширений 
FrontPage, службы Microsoft SharePoint Team Services или Microsoft Windows 
SharePoint 
Services на Web-сервере не требуется. Компоненты для создания электронных 
таблиц и 
диаграмм функционируют подобно таким же средствам из программы MS Excel, 
поэтому 
здесь мы не будем подробно описывать работу с ними. 

€туть J№13. Отображаем на странице информацию 
из базы данных 

Обычно база данных является основой информационной системы предприятия или 
организации. 
В ней может храниться оперативная информация, отражающая результаты 
хозяйственной 
деятельности, а также различная справочная информация. Если Web-сервер 
компании взаимодействует с базой данных, посетители сайта могут из любого места 
получить 
доступ к нужной информации. Например, клиенты компании могут получать свежие 
сведения о товарах, услугах, ценах, котировках, состоянии собственных счетов и 
т.п. 
При добавлении новых сведений нет необходимости постоянно копировать их на 
страницы 
сайта. Текущая информация из базы данных динамически помещается на страницу 
при обращении к ней. В этом опыте вы узнаете о том, каким образом можно 
отображать 
информацию из базы данных на странице сайта, но сначала кратко напомним 
основные 
понятия, используемые при работе с базами данных. 

Упрощенно базу данных можно рассматривать как упорядоченный набор однотипных 
данных, наподобие картотеки. В терминах базы данных каждая карточка в картотеке 
называется 
записью (record), а набор карточек - таблицей (table). Каждый информационный 
элемент карточки, например: имя клиента, адрес, телефон - называется полем 
(field). 
Поле имеет название (filed name), например «телефон клиента», и значение (field 
value), 
например «999-9999». В базе данных может содержаться несколько таблиц, каждая 
из 
которых отражает некоторую сущность, например: «клиенты», «товары», «документы» 
и 
т.п. Между записями в таблицах, как и между сущностями в реальном мире, могут 
быть 
установлены отношения в виде ссылок, например записи в таблице «телефоны» 
ссылаются 
на запись в таблице «клиент». Кроме таблиц, в состав базы данных могут входить 
представления (view). Представления имеют поля и записи, как и таблицы, но в 
них не 
хранятся данные. Данные формируются динамически, когда пользователь обращается 
к 
представлению, и являются выборкой из одной или нескольких таблиц, составленной 
по 
определенным правилам. В базах данных MS Access представления называются 
запросами 
(query). Таблицы и представления являются объектами базы данных. 

Чтобы использовать информацию из базы данных и отображать ее на страницах сайта,
 
необходимо сначала установить соединение с базой данных (database connection). 
Соединение 
определяет тип базы данных, ее название, расположение и ряд других параметров. 

Если база данных невелика и организована так, что все ее объекты (таблицы, 
представления 
и пр.) содержатся в едином файле, как, например, у MS Access, MS Excel, dBase 
или Paradox, можно импортировать базу данных в сайт и создать соединение на 
уровне 
файла. Для импорта можно воспользоваться командой меню Файл • Импорт (File • 
Import), 
либо просто скопировать файл базы данных через буфер обмена в папку сайта. 


Создание Web-сайтов 

При импорте файла базы данных MS Access программа FrontPage автоматически 
создаст 
соединение и поместит файл в отдельную папку Fpdb, защищенную от просмотра 
в браузере. 

Для работы с крупной базой данных, такой, как MS SQL Server или Oracle, 
соединение 
может быть создано через службу System DSN (System Data Source Name - служба 
системных 
имен источников данных) для ODBC-совместимых баз данных или установлено 
сетевое соединение (network connection) с выделенным сервером баз данных. При 
этом 
необходимо позаботиться, чтобы на Web-сервере были созданы необходимые 
псевдонимы 
(DSN), а выделенный сервер баз данных был доступен Web-серверу. 

В состав программы FrontPage входит специальный Мастер результатов базы данных 
(Database Results Wizard), позволяющий создать необходимый запрос к базе данных 
л 
определить способ представления результатов запроса на странице сайта. Мастер 
можег 
использовать уже существующее соединение или создать новое. Кроме того, есть 
возможность 
использовать уже готовое соединение с демонстрационной базой данных Борей 
(Northwind) формата MS Access, которая устанавливается при инсталляции 
редактора 
FrontPage. На примере этой демонстрационной базы данных мы рассмотрим работу 
мастера. 

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

>• Выберите в меню команду Вставка • База данных • Результаты (Insert • 
Database • 
Results). На экране появится первый диалог Мастер результатов базы данных 
(Database 
Results Wizard) (Рис. 7.129). 

Мастер результатов базы данным 

Этот мастер создаст область результатов базы данных для 
отображения отобранных записей. Кроме области результатов 
мастер может создать форму для применения посетителями узла при 
поиске необходимых сведений. 

Наилучшее средство для просмотра вашей страницы: 

©среда ASP О среда ASP.NET 

Использовать: 

(*) подключение к образцу базы данных (Борей) 

О существующее подключение к базе данных: 

СИЗ 

О подключение к внешней базе данных 

О новое подключение к базе данных 

I Создать... I 

Об использовании существующей базы данных 

<йюад | [овто | 

Рис. 7.129. Первый диалог Мастер результатов базы данных 
(Database Results Wizard) 

> Установите переключатель подключение к образцу базы данных (Борей) (Use a 
sample database connection (Northwind)). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

С помощью второго переключателя существующее подключение к базе данных (Use 
an existing database connection) можно выбрать ранее созданное соединение, 
установка 
переключателя подключение к внешней базе данных (Connection to an external 
database) позволяет соединиться с внешней базой данных, а установив 
переключатель 
новое подключение к базе данных (Use a new database connection), можно создать 
новое соединение. 

>• Нажмите кнопку Далее (Next). Мастер активизирует соединение и загрузит 
информацию 
об объектах базы данных, таблицах и представлениях. Затем на экране появится 
второй диалог мастера (Рис. 7.130). 

Мастер результатов базы данных 

Задайте источник записей с необходиными сведениями. Можно 
выбрать существующую таблицу или представление в списке 
"Источник записей11 или создать пользовательский запрос на язьке 
SQL (Structured Query Language). 

© ^очникзалисей;) 

[доставка ^j j 

О Пользовательский запрос 

| Отмена | | < Цазад | | Далее > | [ | 

Рис. 7.130. Второй диалог Мастер результатов базы данных 

(Database Results Wizard) 

В открывающемся списке под переключателем Источник записей (Record source) 
нужно 
выбрать имя таблицы базы данных, откуда будет взята информация. 

Если вы знакомы с языком SQL (Structured Query Language - Структурированный 
язык 
запросов), то можете составить собственный запрос к базе данных. Для этого 
необходимо 
установить переключатель Пользовательский запрос (Custom query) и нажать на 
кнопку Изменить (Edit). С помощью собственного запроса можно получить 
информацию 
сразу из нескольких таблиц или представлений, связав их определенным образом. 
Мастер 
поможет вам проверить синтаксическую корректность запроса. 

>• Оставьте установленным переключатель Источник записей (Record source) и 
выберите 
в открывающемся списке одну из таблиц, например Сотрудники (Employees). 

>• Нажмите кнопку Далее (Next). Мастер загрузит информацию о полях выбранной 
таблицы, 
и на экране появится третий диалог Мастер результатов базы данных (Database 
Results Wizard) (Рис. 7.131). 

12* 


Создание Web-сайтов 

Мастер результатов бззы данных 

Этот список содержит поля для отображения в результатах базы 
данных. Для исключения определенных полей нажмите кнопку 
"Изменить". 

КодСотрудника | Изменить.. 
Фамилия 

Имя 

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

| Дополнительно... 

[ Отмена | [ <Назад | [ ,.nve | | [ртово * | 

Pvc. 7.131. Третийдиалог Мастер результатов базы данных 

(Database Results Wizard) 

. . .л • .. •• 

В списке в центр? диалога перечислены Тюля выбранной таблицы. 

у Нажмите кнопку Изменить (Edit List). На экране появится диалог Отображаемые 
поля (Displayed fields) (Рис. 7.132). 

По умолчанию мастер предлагает вывести все 
поля выбранной таблицы. Обычно отображать 

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

Доступные поля; Отображ. 

просмотра только несколько. 

КодСотрудника! * | 
Фамилия 

> Выделите в списке Отображаемые поля Имя 
Должность 

(Displayed fields) ненужные поля и перенеси


Обращение 

(Displayed fields) только несколько полей, на- L 

те их в список Доступные поля (Available ДатаРождения 1~" 
ДатаНайна 
fields) с(Remove). 
помощью кнопки Удалить Адрес 
ГородОбласть 
г—J 
LJJ 
> Оставьте в списке Отображаемые поля 
-

пример: Имя (FirstName), Фамилия (Last


Рис. 7.132. Диалог Отображаемые 

Name), ДомашнийТелефон (HomePhone) и 

поля (Displayed fields)

ДатаРождения (BirthDate), если вы взяли 

таблицу Сотрудники (Employees). 

Чтобы одновременно выделить несколько строк списка, удерживайте нажатой клавишу 


1 Ctrl

 I. С помощью кнопок Вверх (Move Up) и Вниз (Move Down) можно определить 
порядок 
отображения полей. 
> Нажмите кнопку О К, чтобы вернуться к диалогу мастера. 
> Нажмите кнопку Дополнительно (More Options). На экране появится диалог 
Дополнительно 
(More Options) (Рис. 7.133). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Дополнительно 

Условия"!, l l Настройка условий отбора или формы для поиска необходимых 
записей. 

Порядок... "1 Выбор полей для сортировки результатов отбора записей из базы 
данных. 

I Г^унолчаипю... I Задамтотане^ го умолчанию для пап^фс*^ 

fvj Ограничить набор возвращенных записей числом: [256 

Отображать сообщение, если ни одной записи не найдено: 

[Ни од|

,нои записи не возвращено. 

ОК Отмена 

Рис. 7.133. Диалог Дополнительно (More Options) 

Нажав на кнопку Условие (Criteria), можно в отдельном диалоге указать значения 
или диапазон 
значений для определенных полей и таким образом отфильтровать нужные записи. 
Ограничения на значения полей устанавливаются с помощью операций сравнения и 
могут 
объединяться логическими операциями «И» и «ИЛИ». Кроме того, здесь же 
определяются 
поля для внесения в поисковую форму. Мастер затем может автоматически создать 
на странице 
поисковую форму, что даст возможность посетителю сайта самостоятельно отбирать 
нужные записи из таблицы базы данных. Если заданы поисковые поля, то в диалоге, 
вызываемом 
по кнопке По умолчанию (Defaults), можно задать их начальные значения для 
поисковой 
формы. Диалог, вызываемый по кнопке Порядок (Ordering), позволяет задать поля 
для сортировки отображаемых записей. В диалоге Дополнительно (More Options) 
можно 
также ограничить общее количество возвращаемых запросом записей (Limit number 
of returned 
records to) и указать сообщение на случай, если не найдены записи, 
удовлетворяющие 
указанному критерию (Message to display if no records are returned). 

> Нажмите кнопку ОК, чтобы вернуться к диалогу мастера. 

>• Нажмите кнопку Далее (Next). На экране появится четвертый диалог мастера, в 
котором 
определяется формат представления данных (Рис. 7.134). 

Maciep результатов базы данных 

Выберите параметры форматирования возвращенных записей: 

[Таблица - одна запись в строке jj| 

БЗ Использовать границу таблицы 

ЕЗ Расширить таблицу до ширины страницы 

ЕЗ Включить строку заголовка с названиями столбцов 

Отмена | j < Назад | [; Дллее > | j 

Рис. 7.134,Четвертый диалог Мастер результатов базы данных 
(Database Results Wizard) 


Создание Web-сайтов 

В открывающемся списке можно выбрать три способа представления данных: 

• Таблица - одна запись в строке (Table - one record per row). Полученная 
информация 
представляется в виде таблицы, в которой каждая строка соответствует одной 
записи 
из базы данных. По умолчанию заголовками колонок таблицы являются названия 
полей. С помощью флажков можно включить отображение границ таблицы (Use 
table border) и заголовков столбцов (Include header row with column labels), а 
также 
расширить таблицу до ширины страницы (Expand table to width of page); 
»/ Список - одно поле в элементе (List - one field per item). Каждый элемент 
списка 
содержит название поля и его значение. По умолчанию записи отделяются друг от 
друга горизонтальной линией. В открывающемся списке Параметры списка (List 
options) 
можно выбрать один из нескольких типов, например: маркированный или 
нумерованный 
список; 

• Раскрывающийся список - одна запись на элемент (Drop-Down List - one record 
per item). Список, в котором отображается значение одного поля из всех записей. 

Вы можете поместить такой открывающийся список на форму, чтобы можно было 
выбрать значение поля формы из имеющихся в базе данных. Кроме того, можно 
указать, 
что при выборе, например, имени сотрудника, данный элемент формы будет 
возвращать 
не само имя, а адрес или телефон сотрудника. Отображаемое поле указывается 
в открывающемся списке Вывести значения из этого поля (Display values from 
this field), а возвращаемое в открывающемся списке Отправлять значения из этого 

поля (Submit values from this field). 
В зависимости от выбранного варианта в диалоге появляются дополнительные 
элементы 
управления для настройки отображения данных. 

> Выберите, например, табличный вариант представления данных и нажмите кнопку 
Далее (Next). На экране появится заключительный диалог Мастер результатов базы 
данных (Database Results Wizard) (Рис. 7.135). 

Мастер результатов базы данных 

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

О Отобразить все записи вместе 

© Разбить записи на группы: 

. 
I записей в группе 

Добавить форму поиска на страницу? Эта форма позволит 

посетителям узла сводить (при помощи ранее заданных полей) 

условия для поиска необходимых записей в баге данных.. 

П Добавить ферму поиска 

В некоторых случаях при включении этой ВОЗМОЖНОСТИ в системе 
безопасности веб-узла могут появиться уязвимые места. 

Рекомендации 

Отмена | I <Цазад | | Дапа»> | 

Рис. 7.135.Заключительныйдиалог Мастер результатов базы данных 

(Database Results Wizard) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Здесь можно указать, будут ли все записи отображаться вместе (Display all 
records together) 
или они будут разбиты по группам (Split records into groups) с заданным 
количеством 
записей. Если установлен флажок Добавить форму поиска (Add search form), то на 
страницу будет помещена поисковая форма, позволяющая посетителю сайта 
самостоятельно 
искать и отбирать данные. Этот флажок доступен, только если на третьем шаге 
были выбраны поисковые поля. 

>• Нажмите кнопку Готово (Finish), чтобы завершить работу мастера. На экране 
появится 
диалог, в котором предлагается переименовать страницу так, чтобы она имела 
расширение 
.asp (Рис. 7.136). 

[Micrusolt Office FiontPage 

Страница содержит компонент, для работы которого требуется 
другое расширение имени файла. Необходимо переименовать 
страницу так, чтобы она использовала расширение имени Файла 
".а*р". 

Рис. 7.136. Диалог с предложением переименовать страницу 

> Нажмите кнопку ОК. На страницу будет помещена таблица для отображения данных 
(Рис. 7.137). 

Фамилия ||Имя ]|ДомашнийТелефон 

Это начало области результатов базы данных. Область не будет функционировать до 
тех 
пор, пока страница не будет сохранена в файле с расширением ASP: Страница 
должна 
быть правильно загружена с веб-сервера на экран; текущий веб-узел находится на 
локальном диске или сгти. : . 

||«Имя» ||«ДатаРождения» ||«ДомащнийТелефон» 

Это окончание области результатов базы данных. 

И I < I > РТ1[1/3] 

Рис. 7.137. Таблица для отображения информации 
из базы данных в режиме редактирования страницы 

Вы можете отредактировать заголовки колонок, расположенные в верхней строке 
таблицы. 
Если вы указали поисковые поля и установили флажок Добавить форму поиска 
(Add search form) в последнем диалоге мастера, то на страницу будет также 
помещена 
поисковая форма. 

Для правильной работы области отображения данных необходимо сохранить страницу 
в 
формате ASP (Active Server Pages - Активные серверные страницы), 
воспользовавшись 
командой Файл • Сохранить как (File • Save As). К сожалению, работу с базой 
данных 
нельзя проверить, пока сайт не будет помещен на Web-сервер, о чем 
свидетельствует 
комментарий, помещенный мастером в область отображения данных. Если вы 
запустите 
браузер для просмотра страницы, то увидите только заголовки колонок. О том, как 
загрузить 
сайт на Web-сервер, вы узнаете в одном из следующих опытов. 

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


Создание Web-сайтов 

в ссылку, щелкнув мышью на которой, вы увидите детальную информацию о выбранном 

человеке в отдельной области отображения данных. 

>• Для создания ссылки с параметром щелкните правой кнопкой мыши в области 
отображения 
данных на поле, значение которого будет представлено в виде ссылки, например 
«Фамилия» («LastName»), и в появившемся контекстном меню выберите 
команду Гиперссылка (Hyperlink). На экране появится диалог Добавление 
гиперссылки 
(Create Hyperlink) (Рис. 7.88). 

> Укажите страницу сайта, файл или введите.адрес ссылки в поле ввода Адрес 
(URL). 
Нажмите кнопку Параметры (Parameters). На экране появится диалог Параметры 
гиперссылки 
(Hyperlink Parameters) (Рис. 7.138). 

• х| 
Путь 

fcour2.htm

г 

Вставить значение поля | 

Строка запроса 


Имя 1 Значение 

Добавить... | | Цмкикть... | | .Д«*«ь 1j Qvpc гить 

I о< ! Отмена 

Рис. 7.138. Диалог Параметры гиперссылки (Hyperlink Parameters) 

> , Нажмите кнопку Добавить (Add). На экране появится диалог Добавление 
параметра 
(Add Parameter). 

> В открывающемся списке Имя (Name) выберите поле, значение которого будет 
передаваться 
в качестве параметра, например, КодСотрудника (EmployeelD). В открывающемся 
списке Значение (Value) будет отображен скрипт, вызывающий функци о 
для получения значения параметра (Рис. 7.139). 

Добавление параметра 

Имя: 

|КодСотрудника 

Значение: 
|<%=FP_FieldURL(fp_rs,"KoACQTpyjHHKa")%> [ГЦ 

L 
L 
ОК Отмена 

Рис. 7.139. Диалог Добавление параметра (Add Parameter) 

> Нажмите кнопку ОК. Параметр будет добавлен в список параметров диалога 
Параметры 
гиперссылки (Hyperlink Parameters), 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

>- Нажмите кнопку ОК в диалоге Параметры гиперссылки (Hyperlink Parameters). 
Мы вернемся в диалог Добавление гиперссылки (Create Hyperlink). 
>• Нажмите кнопку ОК в диалоге Добавление гиперссылки (Create Hyperlink). 

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

J№14. Создаем страницу с фреймами 

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

Каждый фрейм при этом может отображать отдельную страницу. Страница с фреймами 
не имеет собственного содержимого, а является лишь контейнером и определяет, 
какие 
страницы будут отображаться во фреймах. Обычно страницы во фреймах логически 
связаны. 
Это значит, что, например, один фрейм содержит список, каталог или 
навигационное 
меню в виде ссылок. А выбор одной из ссылок приводит к загрузке в другой фрейм 
соответствующей страницы. 

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

> Выберите команду меню Файл • Создать (File • New). В правой части рабочего 
окна 
программы появится Область задач (Task Pane) с активной задачей Создание (New) 
(Рис. 7.16). 

[йёртикальма! Верхний Вложенная Горизонтал... Параметры 
! я гранта ! колонтитул иерархия граница О Добавить к 
D Открыть » текущей р*икв 
Описание • 
Колонтитулы Нижнийоглавление колонтитул 
Нисходящая Объявление 
иерархия и оглавление 
Создание независимых правой и 
левой рамок. 

Образец 

Рис. 7.140. Вкладка Страница рамок (Frames Pages) 
диалога Шаблоны страниц (Page Templates) 


Создание Web-сайтов 

у В разделе Создать страницу (New page) Области задач (Task Pane) щелкните 
мышью 
на ссылке Другие шаблоны страниц (More page templates). На экране появится 
диалог Шаблоны страниц (Page Templates) (Рис. 7.46). 

>• Выберите вкладку Страница рамок (Frames Pages) (Рис. 7.140). 
На этой вкладке имеется набор шаблонов для создания страниц с фреймами. При 
выборе 


шаблона, исходный вид страницы отображается справа в поле Образец (Preview), а 
в 
поле Описание (Description) выводится описание шаблона. 
>• Выберите один из шаблонов, например Оглавление (Contents), и нажмите кнопку 
ОК. 


Будет создана новая страница с фреймами по выбранному шаблону (Рис. 7.141). 

Правка Вия Вставка форцат Сервис Хабямца Данные Рамки цкно Справка 

31 веб-узел |[ tourt.asp^[HOB_tTP,liitm 

Рис. 7.141. Страница с фреймами <• 

В нижней части вновь созданной вкладки нов_стр_1.Мт (new_page_l.htm) появится 
дополнительная кнопка Без рамок (No Frame), нажав на которую, мы увидим, как 
будег 
выглядеть страница в браузере, не поддерживающем работу с фреймами. По 
умолчанию 
туда помещается текст сообщения о невозможности отображения фреймов. 

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

В режиме редактирования Конструктор (Design) представления Страница (Page) в 
пустых 
фреймах отображаются кнопки. 

> Нажмите кнопку Создать страницу (New Page) в каждом фрейме. Внутри фреймов 
будут созданы новые страницы. 

С помощью другой кнопки Задать начальную страницу (Set Initial Page) можно 
выбрать 
для фрейма одну из ранее созданных страниц в качестве начальной. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Далее вы можете работать с каждым фреймом как с отдельной страницей, помещая на 

нее необходимые элементы. Текущий фрейм выделяется в режиме редактирования 
черной 
рамкой. 

> Выберите в меню команду Файл • Сохранить (File • Save), чтобы сохранить новые 

страницы. На экране последовательно появятся стандартные диалоги сохранения 
файлов Сохранить как (Save As) для каждой страницы, в которых нужно указать 
имена 
файлов. Укажите, например, для начальной страницы левого фрейма имя Left-
Frame, для начальной страницы правого фрейма - имя RightFrame, а для самой 
страницы 
с фреймами - имя FrameContainer. 

Если вы выбрали шаблон Оглавление (Contents) при создании страницы с фреймами, 
то 
в нем уже имеется установленная связь между фреймами: активизация ссылки, 
помещенной 
в левый фрейм, будет вызывать загрузку страниц, на которую указывает ссылка, в 
правый фрейм. В этом случае правый фрейм называется целевым фреймом (target 
frame). 

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

фрейма две текстовые ссылки. Пусть одна из них ссылается, например на начальную 

страницу правого фрейма, а другая - на главную страницу сайта. 

>• Установите текстовый курсор в начало страницы в левом фрейме и наберите 
фразу 

Ссылка на главную страницу. 

>• Выделите набранную фразу с помощью мыши или клавиатуры и выберите команду 
меню Вставка • Гиперссылка (Insert • Hyperlink). На экране появится диалог 
Добавление гиперссылки (Create Hyperlink) (Рис. 7.88). 

>• В списке файлов сайта выберите файл домашней страницы index и нажмите кнопку 

ОК. Набранная фраза будет преобразована в гиперссылку. 

> Отступите пару строк от первой ссылки и введите фразу Ссылка на страницу 
правого 
фрейма. 

> Выделите набранную фразу с помощью мыши или клавиатуры и щелкните на кнопке 
[®|] на панели инструментов Стандартная (Standard). На экране появится диалог 
Добавление гиперссылки (Create Hyperlink) (Рис. 7.88). 

>• В списке файлов сайта выберите RightFrame и нажмите кнопку ОК. Набранная 
фраза 
будет преобразована в гиперссылку. 

>• Переключитесь в режим предварительного просмотра, щелкнув на кнопке Просмотр 

(Preview) в нижней части вкладки FrameContainer.htm. 

>• Щелкните мышью на первой ссылке в левом фрейме. В правый фрейм будет 
загружена 
домашняя страница сайта (Рис. 7.142). 


364 Создание Web-сайтов 

• Г-. , 1НГГ.1/Т.Ж«11-.Гn.j.m .1!.Н1Ц.ШМ11.И.1ИН' 
i файл Правка Вид Вставка Формат Сервис Тааямца Данные Рамки Окно Справка 

5 I А »' I !Е :Е I Н -. 

веб-узел [[Tourl.asp^ffraineContainer.htmX^ 

Туристическое агентство 

главную станицу 

Новое Мы рады приветствовать вас на > 
Услуги 
Здесь ВЫ сможете НаЙТИ информацию об услугах, 

страницу гшавого 
фрейма 


предоставляемых нашей компанией 

Мы предлагаем 

. Туры по зарубежным странам 

• Туры по странам СНГ 
t Путевки на лучшие курорты России 
• Авиабилеты на внутренние и международные 
рейсы 
1Конструктор Эсразделением Обезрамок ВКод 

_ jj j|752j(J45JBCC ]|настрдйкаJ 

Рис. 7.142.Связь между страницами внутри фреймов 

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

При необходимости можно изменить целевой фрейм для отдельной ссылки или для 
всех 
ссылок в текущем фрейме. 

> В режиме редактирования Конструктор (Design) представления Страница (Page) 
щелкните правой кнопкой мыши на одной из ссылок в левом фрейме и в появившемся 
контекстном меню выберите команду Свойства гиперссылки (Hyperlink Properties I. 

На экране появится диалог Изменение гиперссылки (Edit Hyperlink). 

> В диалоге Изменение гиперссылки (Edit Hyperlink) нажмите кнопку Выбор рамки 
(Target Frame). На экране появится диалог Конечная рамка (Target Frame) (Рис. 7.
143). 

Текущая страшца рамок Общие объекты 

Та же рамка 
Страница целиком 
Новое окно 
Родительская рамка 

Настройка объекта 

L 

О Установить для страницы по умолчанию 

ОК Оти 

Рис. 7.143. Диалог Конечная рамка (Target Frame) 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В поле Настройка объекта (Target setting) можно указать целевой фрейм или 
выбрать 
один из вариантов в списке Общие объекты (Common targets). Флажок Установить 
для 
страницы по умолчанию (Set as page default) позволяет использовать выбранный 
целевой 
фрейм для всех ссылок страницы, где явно не указан какой-либо другой. 

>-. Нажмите кнопку ОК, чтобы закрыть диалог Конечная рамка (Target Frame), и 
затем 
кнопку ОК в диалоге Изменение гиперссылки (Edit Hyperlink). 

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

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

>• Щелкните правой кнопкой мыши в любом месте на одном из фреймов и в 
появившемся 
контекстном меню выберите команду Свойства рамки (Frame Properties). 
На экране появится диалог Свойства рамки (Frame Properties) (Рис. 7.144). 

Свойства рамки 

Има: [main 

Начальная страница: |RightFrame.htrn J | Обзор,.. 

Длинное описание J | Обзор... 

I 

Название: 
Размер райки 


г 

Ширина: [l JQ [Относительное [jjrj 

СП?1 - .'I --'Л ',


Высота строки: 

Поля ————— 

. Ширина: 

Высота: 

Параметры 
В Изменять размер в обозревателе 


Страница рамок... j 

Полосы прокрутки: [при необходимости р | 

[ Стиль.... | ОК | Отмена | 

Рис. 7.144. Диалог Свойства рамки (Frame Properties) 

В поле Имя (Name) указано внутреннее имя фрейма, оно используется также при 
выборе 
целевого фрейма для ссылки. В поле Начальная страница (Initial page) указана 
страница, 
отображаемая во фрейме при его загрузке. В группе элементов управления Размер 
рамки (Frame size) можно указать ширину (Width) и высоту (Height) фрейма 
относительно 
соседних фреймов (Relative), относительно размеров окна браузера в процентах 
(Percent) 
или фиксированный размер в пикселах (Pixels). В группе элементов управления 
Поля 
(Margins) определяются значения отступа от вертикальных (Width) и 
горизонтальных 
(Height) границ фрейма до содержимого внутри фрейма. Если установлен флажок 
Изменять 
размер в обозревателе (Resizable in browser), то посетитель сайта может менять 
размер фрейма, передвигая мышью разделитель между соседними фреймами. 
В открывающемся списке Полосы прокрутки (Show scrollbars) задается режим 
отображения 
полос прокрутки: при необходимости (If needed), то есть когда страница целиком 
не помещается во фрейме, никогда (Never) или всегда (Always). 

>• Нажмите кнопку Страница рамок (Frames Page). На экране появится диалог 
Свойства 
страницы (Page Properties) с открытой вкладкой Рамки (Frames) (Рис. 7.145). 


Создание Web-сайтов 

• Свойства страницы 
Общие | Дополнительно \ Другие | Язык | Ранки | Рабочая группа | 
Интервал между рамками: 

0 Показать границы 

ОК 

Рис. 7.145. Вкладка Рамки (Frames) диалога Свойства страницы (Page Properties) 

Флажок Показать границы (Show borders) определяет, будут ли отображаться 
границы 
фрейма. Если флажок сброшен, то в браузере не будут видны разделительные линии 
между 
фреймами. В поле Интервал между рамками (Frame Spacing) задается ширина границ, 

разделяющих соседние фреймы. 

>• Нажмите кнопку ОК, чтобы закрыть диалог Свойства страницы (Page Properties) 
и 
затем кнопку ОК в диалоге Свойства рамки (Frame Properties). 

Вы можете добавить новые фреймы или удалить существующие со страницы. 

>• В режиме редактирования страницы выберите 

Разделить рамку 

один из фреймов, щелкнув на нем мышью. 

© Разбить на чолбцы] 

Щ

 Выберите команду меню Рамки • Разделить рамку 

О Разбить на строки 

(Frames • Split Frame). На экране появится диалог 
Разделить рамку (Split Frame) (Рис. 7.146). 


>• С помощью одного из переключателей выберите 

ОК Отмена 

вариант разделения: на столбцы (Split into columns) 
или на строки (Split into rows). 


v v Рис. 7.146. Диалог 

> Нажмите кнопку ОК. Область текущего фрейма Разделить рамку (Split Frame) 
будет разделена на две части, и на страницу будет 
добавлен новый фрейм. 

Новый фрейм также можно создать, если в режиме редактирования страницы перемес


тить с помощью мыши разделитель фреймов, удерживая при этом клавишу I Ctr l I. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

> Чтобы удалить фрейм, выделите его, щелкнув на нем мышью, и в меню программы 
выберите команду Рамки • Удалить рамку (Frames • Delete Frame). Фрейм 
будет удален. 

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

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

>• Чтобы сохранить собственный шаблон страницы с фреймами, выберите команду 
меню 
Файл • Сохранить как (File • Save As). На экране появится стандартный диалог 
сохранения файлов Сохранить как (Save As) (Рис. 7.147). 

щ Название: Новая страница 1 
Пия файла: JFrameContalner 

Сохранить 

Мое сетевое 
окружение Тип файла: |Веб-страницы 


Рис. 7.147. Диалог Сохранить как(Save As) 

> В открывающемся списке Тип файла (Save as type) выберите Шаблоны FrontPage 
(FrontPage Template). 

> В поле ввода Имя файла (File Name) укажите имя файла шаблона и нажмите кнопку 

Сохранить (Save). На экране появится диалог Сохранить как шаблон (Save As 
Template) 
(Рис. 7.148). 

Сохранить как шаблон 

Hi 

Название: Новая страница 1 обгор... 1 
Имя: myFrameContainer 
^писание: 

Введите описание. 

3 Сохранить шаблон на текущем веб-узле 
1 ок Отмена | 

Рис. 7.148. Диалог Сохранить как шаблон (Save As Template) 


Создание Web-сайтов 

>• В поле ввода Название (Title) укажите название шаблона, которое будет отобра


жаться в списке шаблонов при создании новой страницы. В поле ввода Описание 

(Description) можно кратко описать назначение и вид шаблона. 

Флажок Сохранить шаблон на текущем Web-узле (Save Template in Current Web site) 

определяет, будет ли шаблон доступен в любом сайте или только в текущем. 

>• Нажмите кнопку ОК. Шаблон будет сохранен. 

Теперь вы можете использовать собственный шаблон при создании новой страницы с 
фреймами, выбирая его в списке шаблонов диалога Шаблоны страниц (Page 
Templates) 
(Рис. 7.140). Если при сохранении шаблона были установлены начальные страницы 
во 
фреймах, то они будут использоваться по умолчанию для всех фреймов, созданных 
на 
основе шаблона. 

Фреймы удобно использовать для навигации по сайту или разделу сайта. В одном из 

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

€чъмть J№l5. Использование переменных 
и формирование оглавления сайта 

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

Создать переменную достаточно просто. 

> Выберите в меню программы команду Сервис • Параметры узла (Tools • Site 
Settings). 
На экране появится диалог Параметры узла (Site Settings). 

> Выберите вкладку Параметры (Parameters) (Рис. 7.149). 

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

>• Чтобы создать новую переменную, нажмите кнопку Добавить (Add). На экране 
появится 
диалог Добавление имени и значения (Add Name and Value) (Рис. 7.150). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

(Параметры узпа 

Общие j Параметры | Дополнительно | Язык [ Переходы 1 Basa данных | 

Имя j Значение Добавить... 
iCompanyPhone 999-9999 
vti_scnoprompt 1 изменить... 
CompanyLongName Туристическое агенте... 
CompanyFAX 999-9999 


Удалить, 

CompanyShortName ТА 
GeneratedBy Мастер корпоративно".,, 
CompanyEmail inFo@zl.com 
CompanyAddress Москва, ул. Космонавт... 
CompanyWebmaster ^еЬ@яд.сот 
vtijitrnlextensions . htm. html. asp. aspx.sht... 
vtijextextensions .txt. 


\ 

Рис. 7.149. Вкладка Параметры (Parameters) диалога Параметры узла (Site 
Settings) 

> В поле ввода Имя (Name) введите название переменной, например ProjectName. 

> В поле ввода Значение (Value) укажите значение переменной, например Операция 
«Ы», и нажмите кнопку ОК. Новая переменная будет помещена в список. 

>• Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings). 

Теперь посмотрим, как использовать переменную в тексте. 

> Установите текстовый курсор в том мес


Добавление имени и значения .3 

те, где требуется поместить текст из переменной, 
и выберите команду меню Имя: 
Вставка • Web-компонент (Insert • Web Значение: 
Component). На экране появится диалог 
Вставка компонента Web-узла (Insert 
Web Component) (Рис. 7.41). 


ОК | Отмена 

>• В списке Тип компонента (Component type) 

Рис. 7.150. Диалог Добавление

выберите Включенное содержимое (In


имени и значения (Add Name and Value)

cluded Content), а в списке Выберите тип 
содержимого (Choose a type of content) выберите 
Подстановка (Substitution). 


Свойства подстановки 

Заменить на: 

>- Нажмите кнопку Готово (Finish). На экране 
появится диалог Свойства подстановки 
(Substitution Properties) (Рис. 7.151). 

>• В открывающемся списке Заменить на 

(Substitute with) выберите созданную ранее Рис. 7.151. Диалог Свойства 
подстановки

переменную ProjectName и нажмите 

(Substitution Properties)

кнопку ОК. Значение переменной будет 

добавлено на страницу. 


Создание Web-сайтов 

Кроме переменных, определенных вами и мастером при создании сайта, существуют 
предопределенные системные переменные, которые можно выбрать в диалоге Свойства 

подстановки (Substitution Properties). Это переменные: Автор (Author) - 
создатель страницы, 
Кем изменен (Modified By) - человек, внесший последние изменения на страницу, 
Описание (Description) - описание страницы и URL-адрес страницы (Page URL) 
-текущий 
адрес страницы в сайте. Описание страницы берется из поля Примечание (Comments),
 
расположенного на вкладке Сводка (Summary) диалога свойств файла страницы. 
Этот диалог можно вызвать, щелкнув правой кнопкой мыши на имени файла в режиме 
просмотра файлов и папок сайта и выбрав в контекстном меню команду Свойства 
(Properties). 
Текст, взятый из переменной, можно форматировать так же, как и обычный текст. 

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

> Чтобы поместить на страницу дату обновления, установите текстовый курсор в 
том 
месте, где требуется поместить дату, и выберите в меню команду Вставка • Дата и 

время (Insert • Date and Time). На экране появится диалог Дата и время (Date 
and 
Time) (Рис. 7.152). 

В открывающемся списке Формат даты (Date 

Датам время 

format) выберите один из вариантов написа


Отображать: 

ния даты. В открывающемся списке Формат 

® Дат |ия страницы] 

времени (Time format) можно указать формат О

 дату последнего автоматического обновления страницы 
для вывода времени. Формат даты: 

>• Нажмите кнопку ОК. На страницу будет 
помещена дата обновления. 

Теперь FrontPage будет автоматически обновлять 
дату при сохранении изменений на стра


Рис. 7.152.Диалог

нице. Формат шрифта для поля даты можно 

Дата и время (Date and Time)

менять так же, как и шрифт обычного текста. 

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

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

> Установите текстовый курсор в том месте, где требуется поместить текст из 
переменной, 
и выберите команду меню Вставка • Web-компонент (Insert • Web Component). 
На экране появится диалог Вставка компонента Web-узла (Insert Web Component) 
(Рис. 7.41). 

> В списке Тип компонента (Component type) выберите Оглавление (Table of 
Contents), 
а в списке Выберите оглавление (Choose a table of contents) выберите Для 
данного 
Web-узла (For This Web Site). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Нажмите кнопку Готово (Finish). На экране появится диалог Свойства оглавления 

(Table of Contents Properties) (Рис. 7.153). 

[index.hti 

Еазмер шрифта заголовка: Ь 

Параметры: " 

13 показывать каждую страницу юлько один раз 

EJ3 показывать страницы .ез входящих гиперссылок 

О перестраивать оглавление при изменении любой страницы 

ОК Отмена 

Рис. 7.153. Диалог Свойства оглавления (Table of Contents Properties) 

В поле ввода URL-адрес начала оглавления (Page URL for starting point of table) 
указывается 
страница, с которой начнется построение оглавления. По умолчанию предлагается 
начать с домашней страницы, чтобы создать оглавление для всего сайта. Если 
требуется 
построить оглавление только для определенного раздела, то в качестве начальной 
страницы 
нужно указать главную страницу раздела. Открывающийся список Размер шрифта 
заголовка (Heading font size) определяет номер стиля заголовка для начальной 
страницы 
в оглавлении. Если выбрать значение нет (попе), начальная страница не будет 
включена в 
оглавление. Это может потребоваться, например, когда оглавление создается на 
самой 
начальной странице. Флажок Показывать каждую страницу только один раз (Show 
each page only once) указывает, что каждая страница будет включена в оглавление 
только 
один раз. Если этот флажок сброшен, страница может войти в оглавление несколько 
раз, 
когда на нее имеются ссылки из разных мест сайта. Флажок Показывать страницы 
без 
входящих гиперссылок (Show pages with no incoming hyperlinks) определяет, будут 
ли 
включены в оглавление страницы, которых нельзя достичь по ссылкам с главной 
страницы 
сайта, т.е. на них нет ссылки ни с одной страницы. Если установить флажок 
Перестраивать 
оглавление при изменении любой страницы (Recompute table of contents 
when any other page is edited), то оглавление будет автоматически обновляться 
при внесении 
изменения на страницы сайта. При проектировании большого сайта процесс 
обновления 
оглавления может занимать ощутимое время -в этом случае оглавления лучше 
обновлять вручную. Для этого достаточно открыть и сохранить страницу с 
оглавлением. 

>• Нажмите кнопку ОК. На страницу будет помещено оглавление. 

В режиме редактирования страницы оглавление обозначено условно. Чтобы увидеть, 
как 
реально выглядит оглавление сайта, запустите браузер, нажав кнопку И - на 
панели 
инструментов Стандартная (Standard) (Рис. 7.154). Щелчок на пункте оглавления 
должен 
вызывать загрузку страницы с соответствующим заголовком. 

Если вы отказались от автоматического обновления оглавления, то его нужно 
обновить 
вручную перед загрузкой сайта на Web-сервер. Для этого нужно просто открыть 
страницу 
с оглавлением и сохранить ее командой Файл • Сохранить (File • Save). 


Создание Web-сайтов 

Избранно., 

Ш • Q 

Адрес. Ш] CADocumenlt and SettingtWatfrAMy РосипкгйЛМои 
Be6-a3<uUyareinxTBQ4F[a»eCwitainer.hUi [^| " Перемок | Linki 

Ссылка на главную сц>аницу Туристическое агентство 
Ссылка на сюаницу правого 
Туристическое агентство 
Новости 
Услуги 
Мы рады приветствовать вг 
Здесь вы сможете найти информацию об 
• Новости услугах, предоставляемых нашей компанией 
• Услуги 
о Египет 
о Греция 
• aH-greece.i Мы предлагаем 
• Новая страница 2 
• Новая страница 3 • Туры по зарубежным странам 
• Новая страница 1 • Туры по странам СНГ 
• Путевки на лучшие курорты России 1_ 
• Авиабилеты на внутренние и 
международные рейсы , 
Поиск: L J 
| Найти | Сброс ] 
| My Computer 

Рис. 7.154.Оглавление сайта 

€m*mi J№16. Проверяем ссылки и орфографию, 
анализируем структуру сайта 

Редактор FrontPage имеет встроенные средства проверки правописания. Вы, 
наверное, 
заметили, что при вводе текста на страницу слова с ошибками автоматически 
подчеркиваются 
красной волнистой линией. Если щелкнуть правой кнопкой мыши на подчеркнутом 
слове, в появившемся контекстном меню будут предложены варианты правильного 
написания, взятые из словаря. Вы можете выбрать один из них, и слово будет 
исправлено. 
Можно также отключить проверку для данного слова (Ignore All) или добавить его 
в 
словарь (Add). 

Режим автоматической проверки орфографии можно выключить, чтобы, например, 
ввести 
большой текст, а потом вернуться к проверке. Для этого нужно сбросить флажок 
автоматически 
проверять орфографию (Check spelling as you type) на вкладке Общие 
(General) диалога Параметры страницы (Page Options) (Рис. 7.155), который 
вызывается 
из главного меню командой Сервис • Параметры страницы (Tools • Page Options). 

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


г 

>• Выберите команду меню Вид • Папки (View • Folders), чтобы перейти в режим 
просмотра 
папок и файлов сайта. 

> Выберите команду меню Сервис • Орфография (Tools • Spelling). На экране 
появится 
диалог Орфография (Spelling). 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

Параметры страницы 

Разработка Рисунок Фрагменты кода Линейка и сетка IntefoSense 
Общие [ Автоэскизы | Шрифты по умолчанию ^Форматирование кода ~ | Цветовое 
выделение симтаксиса 

зад 

|53 Автоматически размещать поля в форме 
Ё5 Присваивать уникальные коды новьи таблицам 
d Задействовать параметры макета для имеющихся таблиц на основе их содержимого 
О Показывать тоу.ки привязки для слоя 
Р. Показывать подписи областей динамических веб-шаблонов 
Е5 Делать код уникальным при вставке 


Орфография • • •"-"' • 

3 автоматически проверять орфографию 
] скрыть орфографические ошибки во всех документах 


1ык по умолчанию; [русский 

J3 

Параметры вырезания и вставки —————— 

ЕЗ показьвать кнопки параметров вставки 

Параметры представления кода — 
О переносить по словам 
153 автоотступ 
ЁЗ номера строк 
С] поле выделения 


Рис. 7.155. Вкладка Общие (General) диалога 
Параметры страницы (Page Options) 

С помощью группы переключателей Проверять орфографию (Check spelling of) 
возможна 
проверка всех (Entire Web site) или только отмеченных страниц (Selected 
page(s)). 

> Установите переключатель на всем 

И Орфография 

Web-узле (Entire Web site) и нажмите 

Проверить орфографию: 

кнопку Начать (Start). Будет запущен 

О на выбранных страницах 

процесс проверки правописания, и в 0 на всем веб-узле 
нижней части диалога появится спи-Параметры: 


О добавлять з.адачу для каждой страницы с ошибками 

сок страниц с орфографическими 

Состоя.. | Страница | Число [ Слова с ошибками 

ошибками (Рис. 7.156). 

Греция jtour2.htm) 1 граничт 
Египет (tourl, asp) 2 ДатаРождения ДомашнииТелефон 

•L 
>- Дважды щелкните мышью на первой 
строке списка. FrontPage откроет выбранную 
страницу в режиме редакти


й 

Найдено 3 слов с ошибками на 2 стр. [проверено страниц: 11 из 11 

рования, выделит первое неправильное 
слово и отобразит его в диалоге Орфо


Рис. 7.156. Диалог Орфография (Spelling) 

графия (Spelling) (Рис. 7.157). 

В списке Варианты (Suggestions) перечислены возможные варианты правильного 
написания 
слова. С помощью кнопок вы можете выбрать один из способов корректировки: 
пропустить слово (Ignore), пропустить все такие слова (Ignore All), заменить 
слово выбранным 
вариантом (Ghange), заменить все такие слова выбранным вариантом (Change 
АН), добавить слово в словарь (Add). 


Создание Web-сайтов 

Нот в словаре; граничт 1 
Запенить на: Граничат 
Варианты: 
граничат [ Пропустит ь 1 Пропустить асе ] 
граничит 
гранит 
гранича | Заменить Заменить все 1 
граничу 
граничь I ДобаВИТк: Праддагать | 

Отмена 

Рис. 7.157. Диалог Орфография (Spelling) на странице 

После корректировки всех слов на странице или при нажатии кнопки Отмена 
(Cancel) на 
экране появится диалог Перейти к следующей странице? (Continue with next page?),
 
предлагающий перейти к следующей странице сайта (Рис. 7.158). 

Когда текст страницы, содержащий ошибки, нахо-Перейти к. следующей странице? 
дится в общей границе, диалог Орфография 

Проверка этой страницы завершена. 

(Spelling) может не появиться, а вы сразу увидите 
диалог Перейти к следующей странице? (Con


Е5 jCoxpaHHTt и э) p.'iTb -iTy страницу.! 

tinue with next page?). 

>• Нажмите кнопку Следующая страница (Next [ Следующая страница 11 Назад в 
список | 
Page), чтобы перейти к следующей странице, 
или кнопку Отмена (Cancel), если вы хотите Рис. 7.158. Диалог Перейти 
прервать проверку. к следующей странице? 

(Continue with next page?)

После проверки всех страниц на экране появится 
диалог Проверка страниц закончена (Finished Проверка страниц закончена 
checking pages) (Рис. 7.159). 

Проверка всех страниц завершена. 

> Нажмите кнопку Назад в список (Back To 
List), чтобы закрыть диалог Проверка стра


В Сохранитьи ?акрыть )ту страницу 

ниц закончена (Finished checking pages). 

Назад в список 

> Нажмите кнопку Отмена (Cancel), чтобы закрыть 
диалог Орфография (Spelling). 

Рис. 7.159. Диалог Проверка 
Анализируя текст на странице, система проверки страниц закончена 
орфографии использует словарь и правила опре-(Finished checking pages) 
деленного языка: русского, английского или другого. 
Язык устанавливается в настройках страницы. Изначально для новой страниць;: 
язык устанавливается автоматически в соответствии с языком ввода для клавиатуры.
 
Язык страницы и набор знаков (кодировку) можно поменять на вкладке Язык 
(Languagei 
диалога Свойства страницы (Page Properties) (Рис. 7.31), который вызывается из 
контекстного 
меню страницы командой Свойства страницы (Page Properties). 

Язык страницы не влияет на формат хранения текста, он используется системой 
проверки 
орфографии, а также браузером для выбора шрифта при отображении страницы. 
Формат хранения текста определяется кодировкой страницы (HTML encoding). 
Кодировку 
страницы также можно настроить на вкладке Язык (Language) диалога Свойства 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

страницы (Page Properties) (Рис. 7.31). Все символы, не входящие в текущую 
кодировку, 
сохраняются в виде числовых кодов стандарта Unicode. 

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

> Выберите команду меню Вид • Отчеты • Сводка Web-узла (View • Reports • Site 
Summary). Программа перейдет в представление Отчеты (Reports) и в центральной 
области окна будет выведен сводный отчет о структуре сайта (Рис. 7.160). 

^ 

ж /с 3IES3SIA »" 11= В 

Ш ае6-уэея|| Index-htm 

Сводка по у аяз • 
Имя Число 1 Размер | Описания 
.Ьайль) Э4_ __ 1^^„^?.Ф а^*! т?!?УШ, ег!о*еб-узла_ 
[ДРисунки 12 ЗЭ1КБ Файлы рисунков на текущей веб-узле (GIF, 3PG, BMP и т.п.) 
Несвязанное Файлы 6 24КБ Файлы не текущем веб-узле, которых нельзя достигнуть, 
начав с домашней страницы 
Связанные файлы 26 981КБ Файлы на текущем веб-узле, которых можно достигнуть, 
начав с домашней страницы 
Медленные страницы 2 444КБ Страницы на текущем веб-узле, у которых время 
загрузки превышает ожидаемое время 30 с на 
Старые файлы 1 81КБ Файлы на текущем веб-узле, не изменявшиеся е течение 72 
дней 
Последние добавл... 33 923КБ Файлы на текущем веб-ysne, соэданмь* за последние 
30 дней 
Гиперссылки 57 Все гиперссылки текущего веб-узла 
? Непроверенные ги... 0 Гиперссылки, указывающие на неподтвержденные файлы 
9* Неработающие гип... 0 Гилерссылки, указывающие на недоступные файлы 
3 j Внешние гипеоссы... 0 Гиперссылки, указывающие на файлы вне текущего 
веб-узла 
[ . Внутренние гипеос.,. 57 Гиперссылки, указьшающие на файлы на текущем 
веб-узле 
(.) Ошибки компонентов 2 Файлы на текущем веб-узле с компонентами, сообщающими 
об ошибке 
fjt Незавершенные за,,,, 1 Задачи на текущем веб-узле, не помеченные как 
завершенные 
ф* Неиспользуемые т... 0 Темы на текущем веб-уэле, не примененные ни к одмоиу 
файлу 
QL СВЯЗИ С, таблицами ,.. 0 Все связи с таблицами стилей текущего веб-узла. 
Д ) Динамические аеб-... 0 Все файлы, объединенные с динамическим веб-шаблоном. 


СЭПапки ЙУдапенныи веб-уэвл ° Переходы ЛГнперса 
Д/w получения enpaet-k нажмете клавишу ^1 


Рис. 7.160. Сводный отчет по сайту 

Сводный отчет позволяет получить статистическую информацию о составе сайта: 
количество 
и объем файлов и рисунков, количество ссылок различных типов, наличие 
потенциальных 
ошибок. Большинство пунктов отчета можно раскрыть, чтобы посмотреть отчет 
с детальной информацией. Для этого нужно щелкнуть мышью на соответствующей 
строке в колонке Имя (Name) или выбрать одну из команд в меню Вид • Отчеты 
(View • 
Reports). Можно также выбрать отчет в открывающемся списке, расположенном над 
первой 
колонкой таблицы. 

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

Отчет Недавно измененные файлы (Recently Changed Files) позволяет просмотреть 
файлы, измененные в последнее время. Для отбора «старых» страниц, то есть давно 

не изменявшихся, можно использовать отчет Старые файлы (Older Files). Такие 
страницы, 
возможно, требуется обновить или переработать. Временной период для этих 
отчетов 


Создание Web-сайтов 

можно установить в открывающемся списке Параметр отчета (Report Setting) на 
панели 
инструментов для работы с отчетами, расположенном над строкой заголовков 
таблицы. 

Двойной щелчок мышью на файле в отчете открывает страницу в режиме 
редактиров1ания 
Конструктор (Design). 

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

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

С помощью отчета о медленных страницах можно определить страницы с долгим 
временем загрузки. 

>- Выберите команду меню Вид • Отчеты • Ошибки • Медленные страницы (View • 
Reports • Problems • Slow pages). В центральной области окна будет выведен 
отчет о 
медленных страницах сайта, если таковые имеются. 

В колонке Время загрузки (Download time) выводится примерное время загрузки для 

текущей скорости соединения. Выбрать условную скорость соединения можно в откры 

вающемся списке Предполагаемая скорость соединения (Assume connection speed of 
на вкладке Отчеты (Reports View) диалога Параметры (Options) (Рис. 7.161), 
который 
вызывается командой меню Сервис • Параметры (Tools • Options). Независимо 
от скорости соединения, желательно, чтобы время загрузки страницы не превышало 
15-20 секунд, иначе это создаст неудобства для посетителей. 

Параметры 

Общие ( Настройка редакторов | Отчеты | FTP pSP.NET ] 

Общие 1—i 

Файл считается "новым", если создан менее: |30 

.айл считается "устаревшим", если создан более: |72 

Загрузка "медленных" страниц занимает не менее: 

Предполагаемая скорость соединения: |56 
• Отображать сетку при просмотре отчетов 
Использование 
Показывать отчет за последние: |12 |4Н месяцев. 

0 Включить диаграмму при сохранении отчета об использовании 

ОК 

Рис. 7.161.Вкладка Отчеты (Reports View) 
диалога Параметры (Options) 

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

менее, следует дополнительно проверять корректность ссылок перед публикацией 
сайта. 


Создание Web-сайта с помощью Microsoft FrontPage 2003

Количество разорванных ссылок, то есть указывающих на несуществующие объекты, 
выводится 
в сводном отчете в строке Неработоспособные гиперссылки (Broken hyperlinks). 

>• Чтобы просмотреть детальный список неработоспособных ссылок, щелкните мышью 
на 
этой строке сводного отчета. Вы можете также воспользоваться командой меню Вид 
• 
Отчеты • Ошибки • Гиперссылки (View • Reports • Problems • Hyperlinks). 

Если дважды щелкнуть мышью на разорванной ссылке в отчете, то на экране 
появится 
диалог Изменение гиперссылки (Edit Hyperlink), в котором можно отредактировать 
некорректную 
ссылку. 

Даже при наличии разорванных ссылок FrontPage может не сразу показать их в 
сводном 
отчете. Это происходит из-за того, что сначала все ссылки помечаются как 
непроверенные 
(unverified hyperlinks). Поэтому для получения информации о корректности ссылок 

необходимо сначала выполнить их проверку, выбрав в меню команду Сервис • 
Пересчитать 
гиперссылки (Tools • Recalculate Hyperlinks). 

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

Количество недоступных страниц в сайте выводится в сводном отчете в строке 
Несвязанные 
файлы (Unlinked files). 

> Чтобы увидеть детальный список недоступных страниц, щелкните мышью на строке 
Несвязанные файлы (Unlinked files) в сводном отчете или выберите команду меню 
Вид • Отчеты • Ошибки • Несвязанные файлы (View • Reports • Problems • 
Unlinked files). 

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


ной страницы достаточно дважды щелкнуть мышью на ней в отчете. 

Удаление или переименование страниц может вызвать некорректную работу некоторых 

компонентов. Например, удаление начальной страницы для оглавления может сделать 
его 
неработоспособным. Для выявления таких ошибок служит отчет об ошибках 
компонентов, 
который можно получить, выбрав команду меню Вид • Отчеты • Ошибки • Ошибки 
компонентов (View • Reports • Problems • Component errors). 

Кроме перечисленных выше, в программе FrontPage имеется еще ряд вспомогательных 

отчетов: распределение файлов сайта по рабочим группам при коллективной 
разработке 
Состояние назначения (Assigned To); статус файлов при использовании общей 
системы 
хранения и контроля исходного кода Состояние проверки (Checkout status); 
распределение 
файлов по категориям для группировки по разделам, темам или другим признакам 
Категории (Categories); статус публикации, определяющий возможность загрузки 
файлов 
на Web-сервер, Состояние публикации (Publish Status); группа отчетов 
Использование 
(Review status). 

Файлы, содержащиеся в скрытых папках сайта, не учитываются при составлении 
отчетов. 
Чтобы учесть такие файлы, необходимо установить флажок показать скрытые 
файлы и папки (Show hidden files and folders) на вкладке Дополнительно 
(Advanced) 
диалога Параметры узла (Site Settings), который вызывается командой меню Сервис 
• 
Параметры узла (Tools • Site Settings). 


Создание Web-сайтов 

JV&17- Просматриваем Web-сайт в браузере 

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

Если на вашем компьютере установлен браузер Internet Explorer версии 3.0 или 
выше, то 
в редакторе FrontPage вам будет доступен режим быстрого просмотра страницы. 
Чтобы 
посмотреть, как будет выглядеть текущая страница в браузере, достаточно 
переключиться 
в режим Просмотр (Preview) представления Страница (Page). В режиме 
предварительного 
просмотра вы можете выполнять почти все те же действия, что и при работе с 
браузером: переходить по ссылкам, заполнять формы, вызывать команды 
контекстного 
меню и т.д. 

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

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

Перейдите в режим редактирования мнение списка обозревателем 

страницы и выберите в меню команду обозреватели 

Файл • Просмотреть в обозревате-Воспользуйтесь флажками в списке, чтобы задать 
группу 

обозревателей, 5апускаемых в режиме просмотра в нескольких 

ле • Изменить список обозревателей 

обозревателях 
(File • Preview in Browser • Edit Добавить... 

15] Netscape Navigator 7.1 

Browser List). На экране откроется диа


Цжемт.... J 

лог Изменение списка обозревателей 

Удалить |

(Edit Browser List) (Рис. 7.162). 

Дополнительные размеры окон —————-™—^— — 

В списке Обозреватели (Browsers) пере-Е 440 х 480 ЕЗ BOO X 600 В 1.024 X ?68 

числены доступные браузеры, которые 

О Автоматически сохранять страницу перед просмотром 

можно вызывать из FrontPage для про


смотра страниц. Если вы установили до


полнительный браузер, его можно вклю


Рис. 7.162. Диалог Изменение

чить в список, нажав кнопку Добавить 

списка обозревателей

(Add). С помощью группы переключателей 

(Edit Browser List)

Дополнительные размеры окон (Additional 
window sizes) можно выбрать размер окна браузера, чтобы увидеть, как будет 
выглядеть 
страница при различных разрешениях экрана. Если установить флажок Автоматически 

сохранять страницу перед просмотром (Automatically save page before previewing),
 
страница будет автоматически сохраняться на диске перед просмотром. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В противном случае будет возникать сообщение с предложением сохранить страницу 
перед просмотром ее в браузере. 

>• Нажмите кнопку ОК, чтобы закрыть диалог Изменение списка обозревателей (Edit 

Browser List). 

Напомним, что для быстрого просмотра страницы в браузере, минуя команду меню 
Файл • Просмотреть в обозревателе (File • Preview in Browser), достаточно 
щелкнуть 
мышью на кнопке Ifil ~ на панели инструментов Стандартная (Standard). В обоих 
случаях 
можно выбрать браузер и разрешение экрана из списка. 

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

> Выберите команду меню Сервис • Параметры страницы (Tools • Page Options). 
На экране появится диалог Параметры страницы (Page Options). 

>• Выберите вкладку Разработка (Authoring) (Рис. 7.163). 

Шрифты по умолчанию | Форматирование кода | Цветовое выделение синтаксиса 

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

1ехнологии FrontPage и SharePoint: 
[настройка 


И Т.ги Generator и ProcjID 

1*3 веб-компоненты времени просмотра 13 графика VML (рисование Office) 

[</] веб-компоненты времени разработки й файлы точечных рисунков 

ЕЗ переходы 

БЗ общие границы 

Обозреватели: Версии обозревателей: 

J3 Ь J3 

E l рамки 
Ш сценарии VBScript 0 странниц ASP 
0 С И 1.0 (форматирование) 
Е приложения Java В CS5 2.0 (положение) 
В графика PNG 


|lnternet Explorer 5.0 

J3 

Рис. 7.163. Вкладка Разработка (Authoring) 
диалога Параметры страницы (Page Options) 

В открывающемся списке Обозреватели (Browsers) можно указать тип браузера, на 
который 
будет ориентирован сайт, а в открывающемся списке Версии обозревателей 
(Browser versions) версию браузера. Например, можно выбрать вариант и Internet 
Explorer, 
и Navigator (Both Internet Explorer and Navigator) и Обозреватели версии 3.0 и 


Создание Web-сайтов 

более поздних (3.0 browsers and later), чтобы обеспечить совместимость с 
ранними версиями 
наиболее распространенных браузеров. 

При выборе различных вариантов в группе флажков под открывающимися списками 
Обозреватели (Browsers) и Версии обозревателей (Browser versions) для выбранной 

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

В зависимости от выбранного браузера в меню и диалогах программы FrontPage 
могут 
быть недоступны некоторые команды или настройки. Например, при выборе браузера 
Netscape Navigator становятся недоступными сценарии на языке VBScript, а при 
выборе 
браузера Internet Explorer недоступен эффект мерцания (Blink) для шрифта. 

Кроме совместимости с браузерами, FrontPage может обеспечить совместимость с 
определенным 
Web-сервером, на котором будет размещен сайт. В открывающемся списке 
Технологии FrontPage и SharePoint (FrontPage and SharePoint technologies) и 
группе 
флажков под этим списком выбираются технологии, которые становятся доступными 
только тогда, когда насервере установлены и запущены серверные расширения 
Front-
Page, службы Microsoft SharePoint Team Services или Microsoft Windows 
SharePoint Services. 
Эти пакеты предназначены для обеспечения работы ряда компонентов, имеющихся 
в редакторе FrontPage. 

J№i8. Закачиваем Web-сайт на Web-сервер 

Когда ваш сайт готов к показу в Интернете или во внутренней сети - интранете, 
необходимо 
разместить его на Web-сервере, чтобы к нему могли получить доступ другие люди. 
Такой процесс называется публикацией (publishing). Фактически публикация сайта 
состоит 
в копировании страниц и других файлов на Web-сервер. 

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

Необходимые действия по подготовке к публикации зависят от расположения 
Webсервера. 
Сайт может быть помещен на Web-сервер, находящийся в вашей локальной 
корпоративной 
сети. В этом случае достаточно знать сетевое имя сервера и иметь необходимые 
права доступа. В качестве сервера может использоваться и тот компьютер, на 
котором 
вы разрабатываете сайт, если установить на него необходимое программное 
обеспечение, 
например: Microsoft Personal Web Server или Internet Information Services (IIS).
 

Если у вас нет собственного Web-сервера с выделенным доменным именем, вы можете 

разместить свой сайт у одного из провайдеров, предлагающих услуги по созданию и 
размещению 
пользовательских Web-страниц на собственном сайте (Web Presence Providers). 
Часто это называется «хостингом» (hosting). He следует путать их с 
Интернетпровайдерами, 
предлагающими услуги по доступу в Интернет (Internet Service Providers.). 
Хотя часто одна компания может предоставлять сразу обе эти услуги. Размещение 
собственного сайта на чужом сервере может являться как платной, так и 
бесплатной 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

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

Компании, предоставляющие бесплатный хостинг с поддержкой FrontPage, можно 
найти 
в Интернете, задав соответствующую поисковую строку, например на поисковом 
сервере 
www.ya.ru. Для получения на сервере адреса собственного сайта необходимо 
сначала 
пройти регистрацию. В ходе регистрации вы указываете имя своего сайта и пароль, 
а 
также другие сведения, и получаете адрес. После решения вопросов, связанных с 
Webсервером, 
можно приступать к публикации сайта. 

Мы в качестве примера опубликуем свой сайт на сервере www.narod.ru, где уже 
зарегистрировались 
во время выполнения опытов из главы «Размещение страниц в Интернете». 

> Выберите команду меню Файл • Опубликовать узел (File • Publish Site). На 
экране 
появится диалог Свойства удаленного Web-узла (Remote Web Site Properties) 
(Рис. 7.164). 

Свойства удаленного веб-узла 

Удаленный веб-узел [оптимизация НТмГ| Публикация"] 

Тип удаленного веб-сервера: 
© FrontPage 'илиshdrePuint Services] 
Удаленный веб-сервер поддерживает серверные расширения FrontPage или службы 
SharePoint Services. 
О Протокол WebDAV 
Удаленный веб-сервер поддерживает протокол WebDAV. 

О Прцтокоя FTP 

Удаленный веб-сервер поддерживает протокол FTP, 
О Файловая система 
Использование в качестве удаленного веб-узла папки на локальном компьютере или 
в локальной сети. 
Расположение удаленного веб-узла: 

|http:fl ~~ ~ ~~~~ 13 Псфор... I 

О Требуется шифрованное подключение SSL 

При необходимости попробуйте найти поставщика, поддерживающего серверные 
расширения FrontPage или 
службы SharePoint Services, при помощи страницы поиска Web Presence Provider. 
Дополнительные сведения. 

Рис. 7.164. Диалог Свойства удаленного Web-узла (Remote Web Site Properties) 

Если вы размещаете сайт у провайдера, не поддерживающего технологии FrontPage, 
то 
загрузка файлов возможна только по протоколу FTP (File Transfer Protocol). 

> Установите переключатель Протокол FTP (FTP). 

>• В поле ввода Расположение удаленного Web-узла (Remote Web site location) 
введите 
адрес Web-сервера, на котором будет размещен сайт. 


Создание Web-сайтов 

В нашем случае, когда мы размещаем Web


Требуются имя и пароль 

страницы на сервере www.narod.ru, FTP-адрес 

Для операции требуются разрешения конечного будет таким: ftp://ftp.narod.ru. 
поль5ователя на ftp://www.geocities.com. 

Имя и пароль вводятся с учетом регистра. 

>• Установите связь с Интернет-провайдером и 

нажмите кнопку ОК в диалоге Свойства Имя: 
удаленного Web-узла (Remote Web Site 


Пароль: | 

Properties), 

Будет установлена связь с сервером ftp.narod.ru ОК Г Отмена 
или другим сервером, который вы указали для 
публикации. Этот процесс может занять некото-Рис. 7.165. Диалог Требуются имяи 
рое время, после чего на экране появится диалог пароль (Name and Password 
Требуются имя и пароль (Name and Password Required) для регистрации 
Required) (Рис. 7.165). на Web-сервере 

> Введите имя и пароль, которые вы указали при регистрации на Web-сервере и 
нажмите 
кнопку ОК. Web-сервер проверит указанные сведения и разрешит загрузку файлов, 
а программа FrontPage переключится в представление Удаленный Web-узел (Remote 
Web Site) (Рис. 7.166). 

Файл Правка Вия Вставка Формат Сервис Таблица Данные Рамки Окно Справка 

D -&#• О 94 

I ж к 3 I Ш Щ I А 

Представление Содержимое папки ' .§ Свойства усаленного веб-узла... *^ 
Оптимизировать опубликованный HTML 

Тональный веб-узел C:\Documents and Sett ings\ Vastly \Mv Oocum... Удаленный 
веб-уэел ftp://ftp.narod.ru 
atx a tx 
I Состоя? f Состоя... i Иэменен I Автор 
Не соп. 30.08.2004 14:. VASUl 
Не соп. 30.08.2004 14:. VASW 
Не соп. 23.08.2001 1С:.. 
Не соп. 04.03.200413:. VA5\v! 
J3global.ua Не соп. 02.03.2004 23:. VASVJ 
( 2 «idea.hu» На соп. 04.09 2004 17:. VASWLВ 
№3323Б4.д* Не соп. 28.08.2004 21:. VASW 
03 09.2004 21: 

Опубликовать все измененные страницы—— 

Состояние последней публикации: нет данных 4 0 Локальный на удаленной 
Завершено: 

4 > О Удвоенный на локальном 
ff О Синхронизация 

[ ^публиковать веб-уэел] [ cjron | 

j ^Переходы йГиперссылки ФЗадачи 

, 5С€- О* А 

Рис. 7.166. Представление Удаленный Web-узел (Remote Web Site) 

В представлении Удаленный Web-узел (Remote Web Site) можно копировать файлы как 

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

>• Убедитесь, что установлен переключатель Локальный на удаленном (Local to 
remote) и нажмите кнопку Опубликовать Web-узел (Publish Web site). В нижней 
части 
рабочего окна будет отображаться ход публикации. 


Создание Web-сайта с помощью Microsoft FrontPage 2003 

В процессе публикации программа FrontPage сначала сравнивает файлы на локальном 

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

г7.|..и.|,11.-та.|1.тм1Д1 1ЧИ.ТДЧ .ллги.г-гтд.ггг.игтд.г. 

Правка Вия Вставка формат Сервис Таблица Данные Самки Окно Справка 

~1ТТ~~''^ 

I К ** I t= := I И • 

Iредстзеленые Содержимое папки -@ Свойства каленного веб-дала... *$> 
Оптимизировать опубликованный HTML 
1окальный веб узел C:\Documents and 5ettings\Va5>V\My Docum... Удаленный 
веб-узел ftp://ftp,narod.ru 

ГСостпя... ГЙамвнен I Автор! F 
Состоя... t И TAOTOPI-
1 i]bullon8.ipo Конфликт 30 08 2004 14: VASW: O_bwdeii 
? Й butlon9.jpg КОНФЛИКТ 30.08.200414:.. 
? ehlock.avi КОНФЛИКТ 23.08.2001 16:.. 
? pFramCont... КОНФЛИКТ 04 09.2004 13:. VAS\V_ .2)_ y 
? Дд|оЬ«|.а«а КОНФЛИКТ 02.09.2004 23:.. VAS\\T .3-Private 
? Й index htm Конфликт 04.09.200417:.. VASwL 
? Si03323S4.gil КОНФЛИКТ 28.08.2004 21:.. VASW: Ulpdb 
? HJLellFiaee.... КОНФЛИКТ 03.09.2004 21:.. iQ image. 
J 
Опубликовать все иэнененные страницы — 
Состояние последней публикации: нет данных «• 0 Локальный на удаленной 
Ямсщт «• О Удаленный на локальной 
Просмотреть журнап публикации! 
. О Синхронизация 
j Опубликовать веб-узел| juirart] 

|&0тчеты ^Переходы ft Гиперссылки в> Задачи 

1 Лпо 

Рис. 7.167. Файлы загружены на удаленный компьютер 

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

>• Чтобы посмотреть на загруженный сайт, запустите браузер и укажите адрес 
домашней 
страницы. Протестируйте работу всех страниц сайта. 

Если, как в нашем случае, сервер не поддерживает технологии FrontPage, то в 
процессе 
загрузки файлов на экране могут появляться диалоги, в которых сообщается об 
этом 
(Рис. 7.168). 

Если не все страницы сайта готовы к публикации, вы можете отметить определенные 

страницы, чтобы не загружать их на Web-сервер. 

> Выберите в меню команду Вид • Отчеты • Делопроизводство • Состояние 
публикации 
(View • Reports • Workflow • Publish Status), чтобы открыть отчет Состояние 
публикации (Publish Status). 


Создание Web-сайтов 

Публикация компонентов FionlPage 

Следующие страницы на веб-узле содержат динамические 
компоненты FrontPagej такие как форма поиска или обработчик форм 
FrontPage, Они не будут работать, так как на сервере публикации не 
установлены серверные расширения FrontPage или службы SharePoint 
Services, 

osteJ 

services.htm 

Для обновления на последнюю версию серверных расширений 
FrontPage или служб Windows 5harePoint Services обратитесь к 
поставщику услуг Интернета или системному администратору. 

j Пропустить и продолжить I | Отмена I 

Рис. 7.168.Сообщение об отсутствии серверных расширений FrontPage 

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

>• В текущей строке щелкните мышью на ячейке в колонке Публиковать (Publish) и 
выберите в появившемся открывающемся списке статус Не публиковать (Don't 
Publish). Теперь данная страница не будет загружаться на Web-сервер в процессе 
публикации. 

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

По умолчанию при публикации сайта на сервер копируются только измененные файлы. 

Программа FrontPage сравнивает файлы в рабочем проекте сайта на локальном диске 
и 
на сервере и загружает только новые версии файлов. Если требуется выборочно 
переписать 
файлы на Web-сервер, то необходимо выделить их в левой части представления 
Удаленный Web-узел (Remote Web Site) (Рис. 7.166) и нажать стрелку аф в центре 
рабочего 
окна. 

В левой части представления Удаленный Web-узел (Remote Web Site) (Рис. 7.166) 
можно 
выбрать отображение всех файлов на локальном компьютере, или файлов, 
предназначенных 
для публикации, или файлов, не предназначенных для публикации, или только 
конфликтующих файлов. Для выбора этих наборов служит открывающийся список над 
таблицей (Рис. 7.169). 

Представление Содержимое папки 

Файлы для публикации 
Файлы не для публикации 
Конфликтующие Файлы 

Рис. 7.169. Открывающийся список для выбора файлов 

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


Создание Web-сайта с помощью Microsoft FrontPage 2003

FrontPage сравнит набор файлов и предложит удалить на сервере файлы, 
исключенные из 
папки сайта на локальном компьютере. 

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

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

Лишь краткое перечисление особенностей FrontPage, которых мы не касались в этой 
главе, 
займет немало места. Web-редактор FrontPage тесно интефирован с пакетом офисных 

приложений MS Office. В профамму включены сложные спецэффекты, автофигуры, тени 

и объекты WordArt; средства форматирования таблиц; разнообразные Web-компоненты 
фото-
галерея, панель ссылок, список наиболее посещаемых страниц; новые элементы 
форм - объединение полей в группы, зафузка файлов, специальные кнопки; 
автоматические 
тиккеры - новости, финансовые сводки, карты погоды и т.п.; полная поддержка 
новых 
стандартов и спецификаций - HTML 4, XML, ASP, Unicode; экспорт отчетов в MS 
Excel, визуальный контроль процесса публикации со средствами drag-and-drop, 
возможность 
создания макросов и др. 

13-1210 


ГЛАВА 8. 

Раскрутка вашего Web-сайта в Интернете 

Вот, наконец, ваш сайт создан и размещен на сервере провайдера. Хотя теперь он 
и стал 
доступен всему миру, это не значит, что весь мир сразу узнает о нем и 
отправится с ним 
знакомиться. Для того, чтобы люди узнали о вновь появившемся сайте и стали 
посещать 
его регулярно, его автору, то есть вам, необходимо предпринять ряд действий - 
зарегистрировать 
его в поисковых машинах и каталогах, провести рекламную кампанию с помощью 
баннеров, организовать интерактивное общение с посетителями сайта. О том, 
как это сделать, мы расскажем в разделах этой главы, но сначала давайте 
определимся с 
числом посетителей, которых мы ожидаем на нашем Web-сайте, чтобы не быть 
разочарованными 
результатами проводимой рекламной кампании. 

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

К моменту написания данной книги русскоязычные сайты разных тематик ежедневно 
собирали следующее среднее число посетителей: 

• развлекательные сайты - от 1000 до 10 000 уникальных посетителей в день у 
наиболее 
популярных сайтов, от 50 до 500 - у всех остальных. В эту группу входят сайты с 

анекдотами, музыкой, эротическими картинками, гороскопами и поздравительными 
открытками. На подобные Web-сайты заглядывает время от времени практически 
каждый пользователь Интернета, поэтому при раскрутке подобного сайта вам 
следует 
стремиться к цифре в 500 посетителей в день; 
%/ тематические сайты - до 500 посетителей в день у самых популярных, в среднем 

30-50 у всех остальных. В эту группу входят сайты о литературе, спорте, 
автомобилях, 
животных, хобби и так далее. Конечно, и в этой группе есть несколько отдельных 
сайтов, привлекающих по 1000 посетителей в день, но, как правило, если на ваш 
тематический сайт заходит ежедневно более 50 посетителей, можно сказать, что 
рекламную 
кампанию вы провели успешно; 

\/ сайты компаний - к этой группе можно причислить сайты-визитки и 
корпоративны: 
сайты компаний и различных объединений. Сайты торговых компаний, на которых 
размещены характеристики товаров широкого потребления (например, компьютеров 
и программного обеспечения, телевизоров или телефонов), конечно, интересны 
более 
широкой аудитории и собирают до 500 посетителей в день, число же посетителей 
сайта средней компании - от 30 до 60 в день; 


Раскрутка вашего Web-сайта в Интернете

• домашние страницы - на большинство из них заходит по 5-20 посетителей в день. 

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

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

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

участия в них, будет рассказано далее. 

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

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

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

J№1. Регистрация в поисковых системах и каталогах 

Когда вы ищете информацию в Интернете, вы, скорее всего, обращаетесь к 
поисковым 
системам, таким как Yandex, Rambler, Google, Altavista, или к 
Интернет-каталогам, например: 
Aport, List.ru, Yahoo. Поэтому очень важно, чтобы данные о вашем сайте попали 
в подобные системы, и каждый желающий, который интересуется тематикой вашего 
сайта, мог его легко обнаружить. 

Процесс попадания информации о вашем сайте в каталоги и поисковые системы, 
иногда 
называемые поисковыми машинами, состоит из нескольких этапов: 

• вы вводите данные и описание своего сайта на специальной странице 
Интернеткаталога 
или поисковой машины; 
• специальная программа-робот поисковой машины обращается по указанному вами 
адресу и просматривает все страницы вашего сайта, анализируя все встреченные на 

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



Создание Web-сайтс в 

сайт через некоторое время, например через месяц, чтобы проиндексировать его 
заново. 
Если же вы зарегистрировались в Интернет-каталоге, то, как правило, функцию 
проверки осуществляет человек - сотрудник каталога. Он проверяет, существует ги 

сайт по указанному вами адресу и соответствует ли он данному вами описанию. 
Иногда проверяющий сам составляет описание для вашего Web-сайта; 

• данные о сайте, который вы зарегистрировали, появляются в поисковой машине 
или 
Интернет-каталоге. Введя в строку поиска слова, которые встречаются на вашем 
сайте, 
в результатах поиска вы можете увидеть ссылку на соответствующие страницу 
вашего ресурса. В зависимости от популярности поисковика, на котором вы 
регистрируетесь, 
от внесения данных до появления информации может пройти от одного 
дня до двух недель. 
Как вы могли заметить по собственному опыту, к некоторым поисковым системам вы 
обращаетесь каждый день, а к некоторым - время от времени. Большинство 
пользователей 
Интернета поступает точно так же. Поэтому есть сайты, на которых 
регистрироваться 
нужно обязательно, чтобы не потерять своих потенциальных посетителей. В 
остальных 
поисковых системах и каталогах можно зарегистрироваться, если у вас есть для 
этого 
свободное время или воспользоваться системами, регистрирующими ваш ресурс сразу 

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

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

• Яндекс (http://www.yandex.ru) 
• Rambler (http://www.rambler.ru) 
• Google (http://www.google.com) 
• Апорт (http://www.aport.ru) 
• Altavista (http://www.altavista.com) 
Из каталогов наиболее популярными являются следующие: 

• List.RU (http://www.list.ru) 
• Интернет-столица (http://www.data.ru) 
• Yahoo (http://www.yahoo.com) 
Сейчас все большее число поисковых систем включают в себя также и каталог, так 
чго 
регистрируя сайт в поисковой системе, вы можете одновременно включить его и в 
каталог 
при ней. 

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

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


Раскрутка вашего Web-сайта в Интернете

Подготовка к регистрации в поисковой системе 

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

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

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

• если ключевые слова встречаются на странице несколько раз; 
• когда слова находятся в заголовках страницы - то есть заключены между тегами 
<titlex/title>, <hlx/hl>, <h2x/h2> и так далее; 
• слова, расположенные ближе к началу документа; 
• слова, находящиеся в коротком документе; 
• слова, расположенные в служебных тегах <meta> и <alt>. 
Перед началом регистрации в поисковых системах имеет смысл еще раз просмотреть 
все 
страницы вашего сайта, чтобы проверить - правильно ли составлены заголовки и 
хорошо 
ли в них отображен смысл следующего за ними текста, как часто встречаются в 
тексте 
страницы слова, которые можно счесть ключевыми при описании данной страницы. 

Также внимательно просмотрите заголовки страниц, которые отображаются в строке 
заголовка браузера (на самом верху окна браузера). Они должны соответствовать 
содержанию 
страницы. Такой заголовок в коде странице находится между тегами <title> и 
</title> и его легко найти и отредактировать. Это можно сделать либо с помощью 
вашей 
программы редактирования Web-страниц, либо вручную с помощью текстового 
редактора. 

Особое внимание при подготовке страниц к регистрации в поисковых системах 
следует 
уделить служебным тегам. 

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

Чтобы отключить отображение картинок в браузере Internet Explorer, необходимо 
выполнить 
следующие действия. 

> Выберите в браузере команду меню Сервис • Свойства обозревателя (Tools • 
Internet options). Откроется диалог Свойства обозревателя (Internet options) 
(Рис. 8.1). 


Создание Web-сайтов 

Свойства обозревателя 

( Программы *| Дополнительно 
Общие Безопасность 1 Конфиденциальность 

Домашняя страница " "— ' 

F~V Укажите страницу, с которой следует начинать обзор. 

Адрес: j about: blank 

J 

I С текущей | [ С исходной | | С пустой j 

Временные Файлы Интернета Просматриваемые 
страницы копируются » особую 
папку для ускорения их последующего просмотра. 

[Удалить. "Cookie"...] [Удалить Файлы.. J j Параметру... | 

Журнал 


Папка журнала содержит ссылки для бькггрого доступа 
к страницам, которые БЫ недавно посещали. 

Сколько дней хранить ссылки: |20 g | [ Очистить | 

| Цвета , | ШРИФТЫ.:. | Языки... ] [Оформление.., | 

ОК | Отмена 

Рис. 8.1. Диалог Свойства обозревателя (Internet options) 

> Выберите вкладку Дополнительно (Advanced) со списком дополнительных 
параметров 
браузера. 

> Выберите раздел Мультимедиа (Multimedia) и сбросьте флажок Отображать рисунки 

(Show pictures) (Рис. 8.2). 

Общие Безопасность Конфиденциальность 
Содержание | Подключения [ Программы [Дополнительно 

Параметры: 

0 Проверять аннулирование сертификатов издателей 

• Проверять аннулирование сертификатов серверов (требует 
• Удалять все Файлы из папки временных файлов Интернет*'1 
Ь Мультимедиа 
0 Включить автоматическую подгонку размеров иэображвниГ"* 
0 Включить панель изображений (требуется перезапуск) I 
0 Воспроизводить анимацию на веб-страницах 
0 Воспроизводить видео на веб-страницах 
0 Воспроизводить звуки на веб-страницах 
О Не отображать оперативное медиа-содержимое на панели 
Q Отображать рисунки 
Q Показывать рамки рисунков 
0 Улучшенная передача цветовых оттенков 

| Настройка HTTP 1.1 
0 Использовать HTTP 1.1 

• Использовать HTTP 1.1 через прокси-соединения 
| Восстановить значения по умолчанию j 

OK Отмена I j Применить 

Рис. 8.2. Вкладка Дополнительно (Advanced) 
диалога Свойства обозревателя (Internet options) 


Раскрутка вашего Web-сайта в Интернете

>• Нажмите кнопку Применить (Apply) и кнопку ОК, чтобы закрыть диалог. 

> Нажмите кнопку Обновить (Refresh) на панели инструментов браузера. Рисунки 
будут заменены на прямоугольники соответствующего размера с пояснительными 
надписями. 

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

Еще одним тегом, составлению которого нужно уделить особое внимание на каждой 
странице вашего сайта, является тег <meta>: 

• тег <meta> с параметром keywords. В нем необходимо перечислить ключевые слова 

и словосочетания, которые наиболее точно отражают содержимое страницы. Например,
 
для сайта, посвященного ремонту, на странице со статьей о выборе 
стройматериалов 
тег <meta> может выглядеть следующим образом: <meta name =" keywords" 
content»"ремонт, выбор стройматериалов, обои, кафель, гмпсокартон, 
расчет количества"^ В данном примере применены не только отдельные ключевые 
слова, но и словосочетания. Если пользователь задаст в качестве запроса к 
поисковой 
системе одно из подобных словосочетаний, то данная страница будет размещена 
системой в начале списка подходящих страниц. Вы можете использовать большое 
число ключевых слов, но их общая длина не должна превышать 200 символов; 
•" тег <meta> с параметром description. Этот тег задает, какой текст покажет 
поисковая 
машина вместе с заголовком страницы при отображении в списке подходящих 
страниц. Если этот тег не задан, то в качестве описания страницы будут 
отображены 
первые 100 символов страницы. Естественно, что они далеко не всегда правильно 
отражают 
ее содержание. Для страницы предыдущего примера тег <meta> может выглядеть 
следующим образом: <ИЕТА name» "description" content= "Подробные 
советы по выбору стройматериалов для ремонта: кафеля, обоев и 
гипсокартона, советы и примеры по расчету количества необходимых 
стройматериалов">. 
Все специальные теги можно отредактировать или создать (если их нет) вручную. 

> Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows. 

> В главном меню выберите команду Программы • Стандартные • WordPad (Programs 

• Accessories • WordPad). На экране появится рабочее окно программы WordPad. 
>• Выберите команду меню Файл • Открыть (File • Open). На экране появится 
диалог 
Открыть (Open). 

> В открывающемся списке Тип файлов (File types) выберите строку Все документы 
(*.*) (All types (*.*)). В списке файлов отобразятся файлы всех типов (Рис. 8.
3). 


Создание Web-сайтов 

Ем 

I CLOUD 

|Fon 
| Fun 

Inert!» 

IGsolon 

ISeoloci 
I index 

Имя Файла: 

[Все документы ('.•) ш

J3 

Рис. 8.3. Диалог Открыть (Open) со списком файлов всех типов 

> Выберите папку, в которой размещены страницы вашего сайта и откройте Ьйш-фаш:,
 
в котором вы хотите изменить служебные теги. Откроется файл с кодом Webстраницы.
 


> Измените или наберите теги <title> и <meta> с описанием и ключевыми словами 
для вашей страницы аналогично тому, как это показано на рисунке (Рис. 8.4). 

3>айя .Дрпвип Вид Встдвка Формат .правка 

<head> 
<title>BnOop стройматериалов для peMOHTa</title> 


<meta name="keywords" content="peMOHT, выбор стройматериалов, обои, 
кафель, пипсокартон, расчет количествам 


<meta name^description" content=nnoflpo6Hue советы по выбору 
стройматериалов для ремонта: кафеля, обоев и гипсокартона, советы и 
примеры по расчету количества необходимых стройматериалов"> 


</head> 


<body> 
<img scc=niinage3/kafel.jpg" кафеля"> 


Зля справки нажмите F1 J|NUM|л 

Рис. 8.4. Служебные теги в заголовке кода Web-страницы 

> Найдите неправильные описания рисунков и замените их на правильные, исправляя 

текст между кавычками в теге <alt>, как показано в нижней части Рис. 8.4. 

>• Сохраните исправленный файл Web-страницы с помощью команды меню Файл • 
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены. 


> Аналогичные действия желательно произвести для всех страниц вашего Web-сайта. 


Перед регистрацией сайта необходимо еще подготовить файл robots.txt для того, 
чтобы 
указать поисковым роботам страницы, которые не следует индексировать. 


Раскрутка вашего Web-сайта в Интернете

Создаем файл robots.txt 

Разрешения и запрещения на индексацию берутся всеми поисковыми системами из 
файла 
robots.txt, находящегося в корневом каталоге сайта. Запрет на индексацию ряда 
страниц 
может появиться, например из соображений секретности или из желания не 
индексировать 
одинаковые документы в разных кодировках. Чем меньше ваш сайт, тем быстрее 
робот его обойдет. Поэтому запретите в файле robots.txt индексацию всех 
документов, 
которые не имеет смысла индексировать (например файлы статистики или списки 
файлов в папках). Не нужно также индексировать скрипты CGI или IS API. 

Детальное описание спецификации файла можно прочитать в документе «Стандарт 
исключений 
для роботов» на странице www.citforum.ru/internet/search/rbtspec.shtml. 
В простейшем виде (разрешено все, кроме папки скриптов) файл robots.txt 
выглядит следующим 
образом: 

User-Agent: * 
Disallow: /cgi-bin/ 


Строка с полем user-Agent является обязательной и должна предшествовать строкам 
с 
полем Disallow. 

Пустые строки в файле robots.txt являются значимыми, они разделяют записи, 
относящиеся 
к разным роботам. Например, в следующем фрагменте файла robots.txt строка 
Disallow: /forum игнорируется, поскольку перед ней нет строки с полем 
User-Agent. 

User-Agent: * 
Disallow: /cgi-bin 


Disallow: /forum . 

Строка с полем Disallow может запретить индексирование документов только с 
одним 
префиксом. Для запрета нескольких префиксов нужно написать несколько строк. 
Например, чтобы запретить индексирование документов, начинающихся с /cgi-bin и 
/forum, необходимо написать. 

User-Agent: * 
Disallow: /cgi-bin 
Disallow: /forum 


А следующий фрагмент будет неверным 

User-Agent: * 
Disallow: /cgi-bin /forum 


В строках с полем Disallow записываются не абсолютные, а относительные префиксы.
 

То есть файл: 

User-Agent: * 

Disallow: www.myhost.ru/cgi-bin 

запрещает, например, индексирование документа 

http://www.myhost.ru/www.myhost.ru/cgi-bin/counter.cgi, 

но не запрещает индексирование документа http://www.myhost.ru/cgi-bin/counter.
cgi. 


Создание Web-сайтов 

В строках с полем Disallow указываются именно префиксы, а не что-нибудь еще. 
Так, 
файл: 

User-Agent: * 
Disallow: * 


запрещает индексирование документов, начинающихся с символа «*» (которых в 
природе 
не существует), а файл: 

User-Agent: * 
Disallow: / 


запрещает индексирование всего сайта. 

Если вы не можете создать/изменить файл robots.txt, то достаточно добавить 
дополнительный 
тег <МЕТА> в HTML-код вашей страницы (внутри тега <HEAD>): 

<МЕТА NAME="ROBOTS" CONTENT="NOINDEX"> 

Тогда данный документ также не будет проиндексирован. 

Вы также можете использовать тег 

<МЕТА NAME="ROBOTS" CONTENT="NOFOLLOW"> 


Он означает, что робот поисковой машины не должен идти по ссылкам с данной 
страницы. 

Для одновременного запрета индексирования страницы и обхода ссылок с нее 
используется тег 

<МЕТА NAME="ROBOTS" CONTENT»"NOINDEX,NOPOLLOW"> 


Чтобы запретить индексирование определенных фрагментов текста в документе, 
пометьте 
их тегами 

<NOINDEX></NOINDEX> 

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

запрещено индексирование некоторых документов или их частей, можно приступать к 

регистрации сайта в поисковой системе. 

Регистрация сайта в поисковой системе 

Сам процесс регистрации в поисковой системе довольно прост и не отнимет у вас 
много 
времени. Рассмотрим регистрацию в одной из самых популярных российских 
поисковых 
систем Яндекс. Регистрация в других системах производится аналогично. 

> Наберите в адресной строке вашего браузера адрес поисковой системы, например 
http://www.yandex.ru, и нажмите клавишу Р"*°1. Загрузится главная страница 
поисковой 
системы (Рис. 8.5). 


Раскрутка вашего Web-сайта в Интернете 

ЗЕай* Правка бия ян 

©"—'О-1 

fort u Unki 

А«"51Й'.1*»2!Й?5ИИ!* 

• Сляпать Ячл^кс ^агто * 
ЮНЗЕМ Шшж ?Сшиш ьЬ&тл й*г^ 


У Нади^ть пнсьно 
Новости — 20:19 иск 


|Д

врвыэ 

l"™™** ; з. Теплоход с российским экипажей заиши v беойгов Японии. 
| счет*^™Р*: Подробности 
ЯндвксЛинн.0. [TH^H^Hj 4. Путин: Между российской политикой в Че не и 
событиямив 

ядьнсах. паревопа д«н*г 5. МИЛ России потрябуят вь^ачи Si^fjp i П 

У Ней.и )[ 

ш 

Найдётся к » 

Ввгжш '• (Саталог i Ноаосги ' Маокет ' Эши^лабДИИ Картинки 

Бизнес и жоно! ика Лом н семья Иогвла: Печээ 7 сентября 
Финансы г Недвю "ииогть Автп/илто. Квартидд ч, ляч^ Глгплил 
Строительство.! 

Ночью: +10 ..+12 
Производство. Р, йпа 3&овзак.. 1&асрта Дней: +17...+1S Днем +1S...+1B 

в 

Рис. 8.5. Страница www.yandex.ru 

> Щелкните мышью на ссылке Все службы в верхней части страницы. Загрузится 
страница с перечнем служб Яндекса (Рис. 8.6). 

?Jffl 

«аи Щмим" Вид Избрапно* Сярпис .правкл 
О На 


•«• О• В 91 г* 
А«»с| Й http //wwwjpandei.iu/л! LMJMM Т | Q ПирвиоА [ Link* 

1 "ГмыМ318ИРУ"В11 

р автоматически * 

Сайты, отобранные в Энлййнсеая ролевая 

вручную trpa 

В Швы 
-<Нмвв фильтрация ЦЕ Телепрограмма V UPBMItiB 
Выбор моделейи Центральные. «г....,.. . 
поиск товаров 

Бесштатный хостинг Збщвние 

ffl Картинки региональные каналы 

интересными 

, Поиск изображений 

О Энциклопедии 1ЮДЬМИ 

Расчеты через 

Даль, Броитауэ, . , 
Москва и область, БСЭ... 

эйспооводнай допул 

Санкт-Петербург, 

) интернет 

Киев. Россия, Европа Поисковая реклама 

Английский, 

i * Кубок немецкий 
Соревнование по и французский 
поляку в интернете 


A Говела 

вебмастеру Слецнальнь-* кил ы *f* устаночить Ё^р 
ПОИСКИ Все службы и nofc на панели браузера 

Дойдеить сайт 

"— --. :

n?rtcK~™ 1 jji^^ 

Д Службы 
Ппиек для КРК 

Региональный поиск . Поиск 
Поиск для 

ЯнвН 

с.1]а^овид лил* 


а мог* 

й_ 

о 

Рмс. 8.6. Страница с перечнем служб Яндекса 

> В разделе Web-мастеру щелкните мышью на ссылке Добавить сайт. В разных 
системах 
эта ссылка может называться по разному, например Добавить ресурс, Добавить 
URL, Add URL, Submit a site и так далее. После щелчка мышью на ссылке откроется,
 
страница добавления сайта в поисковую систему (Рис. 8.7). 


Создание Web-сайтов 

Вашему сайту пора увидеть свет 

Добавление сайт* в Яндекс (поисковую машину н каталог) 

Будьте осторожны, ие прибегай» к услуги* ws, кто пр*да«гмт 'рлехруткл 

\ШрМ__ 

сайгза $30($83, $ЗШГ, нспольэужrente сомнительные способы каж 

редиректы ПОИСКОВЫЙ СПШ И Т.Д. 

На этой странице предлагается единая форма для добавления 
сайта в поисковую машину и каталог Яндекса. Вели ваш сайт уже 


Упапщъ cnaM^p»? 

проиндексирован, но еще не описан е нашем каталоге, добавьте 
его в эту форыу - таким образом вы ускорите его появление в 
каталоге. Советы Вt6mci 

Как •мбсиь поиск pi 

Поисковая машина yandex.ru предназначена для работы с 

ЬУГС К ОД Т WI ^IH1JM ННТСРНУГОЫ. 110 .*9 ТО №Т ПРОСИМ ВаС HG{J&3Jlyi 1 ъ 

U. I I» Н"* 
Рис. 8.7. Страница поисковой системы с формой добавления нового сайта 

> Прочитайте «Лицензию на использование поисковой системы», внесите адрес 
вашего 
сайта в поле Головная страница и нажмите кнопку Добавить. 

Если вы получили сообщение, что «Ваш URL был только что внесен в нашу базу 
данных
», это значит, что он добавлен и будет проиндексирован в ближайшее время. 

Обычно страницы появляются в поисковой базе через несколько дней после их 
внесения 
в базу. Если вы не находите свою страницу, то проверьте на странице 
www.yandex.ru/addurl.html, включена ли она в базу Яндекса. Для этого надо 
попробовать 
добавить ее еще раз. 

Если вы получили сообщение «Ваш URL уже известен роботу Яндекса. Данный ресурс 
будет проиндексирован в ближайшее время», то подождите еще пару дней. 
Опубликование 
малоизвестных и малоинформативных ресурсов (например, содержание которых 
может быть интересно только узкому кругу знакомых и друзей автора) может 
затянуться 
на неопределенный срок. 

Если вы получили сообщение «Ваш URL уже проиндексирован. Вы можете посмотреть, 
какие страницы вашего сайта проиндексированы в Яндексе к настоящему времени», 
то, 
нажав на ссылку проиндексированы в Яндексе, вы получите весь список документов 
вашего сайта, проиндексированных в поисковой машине. 

В дальнейшем робот будет самостоятельно (автоматически) находить новые и 
измененные 
документы. Причем частота обхода конкретного сайта зависит от зафиксированной 
роботом частоты изменения его страниц. 

Если у вашей страницы изменился адрес, то достаточно внести ее новый адрес на 
странице 
www.yandex.ru/addurl.html. Изменения уже проиндексированных страниц Яндекс 
отследит самостоятельно, ничего специально делать не требуется. Старые страницы 

(даже если они уже удалены на самом сервере) будут находиться в базе вплоть до 
очередной 
переиндексации и вручную сотрудниками Яндекса не удаляются. Вы можете 


Раскрутка вашего Web-сайта в Интернете 397 

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

www.yandex.ru/removeurl.htinl. 

Если ваш сайт значительно изменился и требуется обновить его описание, нужно не 
регистрировать 
сайт заново, а прислать письмо с новым текстом описания на адрес: 
support@catalog.yandex.ru. Предложения по изменению описания сайта в каталоге 
принимаются только в том случае, если в обосновании указывается на прямые 
ошибки в 
существующем описании или если имеющееся описание не отражает существенной 
части 
содержания сайта. При этом решение о том, следует ли изменить описание, целиком 

остается за администрацией каталога. 

v После регистрации сайта в очередной поисковой системе внесите ее название, 
адрес 
и дату регистрации в таблицу, которую вы завели для учета подобной информации. 

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

Обычно достаточно добавить в поисковую систему адрес главной страницы вашего 
сайта 
и поисковый робот сам пройдет по остальным страницам сайта и проиндексирует их. 

Тем не менее, быстро проиндексировав главную страницу, для индексации остальных 

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

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

Услуги бесплатной регистрации предоставляют следующие службы: 

• AddMe! (http://www.addme.comO - регистрирует в 1500 зарубежных поисковых 
машинах; 
• ©Submit! (http://www.uswebsites.com/submit/) - регистрирует в основных 
зарубежных 
поисковых системах. 
Через некоторое время имеет смысл проверить, правильно ли робот поисковой 
машины 
проиндексировал ваш сайт. Для этого скопируйте какую-либо фразу, встречающуюся 
на одной из страниц вашего Web-сайта и поместите ее в качестве запроса 
в поисковую систему. Страница вашего сайта должна быть вверху списка найденных 
страниц. Если этого не происходит, то ваш сайт не был проиндексирован или был 
проиндексирован неправильно. 

Большинство поисковых систем позволяет искать ключевые слова только на 
определенном 
сервере. Для дополнительной проверки индексации можно задать поиск ключевых 
слов только в рамках своего сайта. Обычно подобный поиск можно осуществлять на 
специальной странице поисковой системы, на которую можно перейти с главной 
страницы 
системы, нажав ссылку Расширенный поиск, Поиск с языком запросов, Advanced 
search или подобную. 

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


Создание Web-сайтов 

Регистрация Web-сайта в каталогах 

Процедура регистрации в каталогах несложна и часто полностью аналогична 
процедуре 
регистрации в поисковых системах. Однако возможны некоторые отличия. Рассмотрим 

пример регистрации сайта в каталоге. 

>• Наберите в адресной строке вашего браузера адрес Интернет-каталога, например 

http://www.list.ru. Загрузится главная страница каталога List.Mail.ru (Рис. 8.
8). 

J j И "I»"» 11 

Катапог@та11 ( 

Автомобили Бнзне-: н Пинангц Дом»""ДоЧ очаг 

Интернет Культура и иск\-сство 
Uts 5йю Jlifrtparypt Титр Уллэ Фого 

Лсчдцк JlemqjcTai 

Но»остаиСМИ 
Наияя ^мгп! Журналы ТВ Вчбары Bntcn. ПРМР 1>аУТИ 
Э Hfibi ЕЫИ. 


Тдбота и заработо 

ц Вщггуцвлп Курсы 

Ттмаыши 

hap Мер Ы iu/co«i!*f?«'2rfi673j*-' 

Рис. 8.8. Главная страница каталога List.Mail.ru 

> Определите желательную для себя категорию, перейдите на страницу данной 
категории 
в каталоге и щелкните мышью на ссылке Добавить сайт. Загрузится начальная! 
страница регистрации (Рис. 8.9). 

it.M«.ru/)a*M»n/i*9ttirtofl.l»l?id>l<»UO 

%\ ДОЬА>.1ЕИИЕ САЙТЯ В КАТЕГОРИЮ "Хонгмпткрь' 

Вы яшходитссь на начальной страниц; регистрации. 
Обращаем ваше внимание ла то. что каталог размещает информацию к» на Бесплатной,
 так н на 
платаоЗ основе При регистрации сайтов иа безвозмездной основе редакция не 
гарантирует 
рассмотрения заявки в определенные сроки и обязательного положительного решения 


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

талог* 
. Польжтаис об оплат? УСЛУГ рммещення 1шфармашю » каталог» Liat


убедитесь, что ваш сайт не относится к числу $а.РЭЙН*Ри*И^ к публикации. 

Проверьте! возможно, ваш сайт относится к группе сайтов, бесплатная регистрация 
которых о каталоге 

Выпо пиемо, чо с ошмЛвми ив сгрвчмив. Щ Internet 

Рис. 8.9, Начальная странигщрегистрации в каталоге ListMail.ru 


Раскрутка вашего Web-сайта в Интернете 

> Познакомьтесь с правилами регистрации и перейдите по ссылке Перейти к 
стандартной регистрации, которая расположена в нижней части начальной страницы 
регистрации. В окно браузера загрузится страница для ввода адреса вашего сайта 
(Рис. 8.10). 

1 А Dpaau Лш Ияйш"» Скеас [(И м 

AlP*C. ffi h»p-//fcH.maiLturta 

KaTanorfamall.ru 

Проверьте, воэможао ваш сайт уже зарегистрирован в каталоге Введите ОН своего 
ресурса и нажмите 
кнопку 'Далее*. 

Если ваш сайт уже зарегистрирован в каталоге Mau.ru. вам будет отказано в 
повторной f-егис грации 
При положительном ответе, продолжит» заполнение регистрационной формы. 

• Правила регистрации » каталог» Mail.ni 
Ь Ь Интернет. О к 

1 выполнено, н? с ошивиами на сгр**«в 

/"мс. S./0. Страница для ввода адреса сайта для регистрации в каталоге List.
Mail.ru 

Введите адрес вашего сайта в поле URL сайта и нажмите кнопку далее. В окно 
браузера 
загрузится форма для ввода регистрационных данных (Рис. 8.11). 

«.а#я Ирака Им* Иэбрмто* Сервис Справка 

1 

он—-©-а ас />.*-*«и— «_ 9Ш-Ш ш -Уив 

Заголовок: * 

1аголовок должай давать пользователю общее представление о содержании сайта 
паже ties обращения к аннотации. Для корпоративных и персональных СЙЙТСВ 
аголовок должен отражать пазваиие и основной вид деятельности фирмы {лица) 

Владелец СЛИТ* : 

I_

Автор сайта или владелец сайта (юридическое или физическое лицо). При наличии 
я«цсы1ькня копирайтов (информация/ общий, дтайн , автор, составитель), 
1рвдпочтение должно быть отдано владельцу обшего копирайта, либо том Г, кто 

_ lacnonaieei правами нл информацию сайта. 

Адрес владельца: 
Юридический, или физический 
(заполняется желающими). 


(анное МП запслмвется тени владелец «at*, которые хотела 4ы, чтобы вл чсани* их 


контактные телефоны. 

Я1ЫК сайта: * П русский D английский П другой 

Кдмчевы* слова: 
черв! пробел ! 


Аннотация: * 

13 

(до 300 символов') 

Ц Готово 

Рис. 8.11. Форма для регистрации сайта в каталоге ListMail.ru 

> Следуя инструкции, заполните регистрационную форму и нажмите кнопку далее 
в нижней части страницы. 


Создание Web-сайтов 

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

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

> Внесите в специально заведенную вами таблицу название каталога, его адрес, 
дату 
регистрации, а также срок, в течение которого сотрудники каталога обещают 
проверить 
ваш ресурс. 

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

Если у вашего Web-сайта есть англоязычная часть, то имеет смысл 
зарегистрировать его в каталоге Yahoo (http://www.yahoo.com), регистрация 
в котором дает очень большой приток посетителей. Однако, как 
показывает практика, зарегистрироваться в Yahoo не очень просто, 
возможно, придется сделать это несколько раз. Иногда описание сайта 
появляется не в том разделе каталога, в котором нужно, в этом случае 
повторитерегистрацию. Для описаниясайта используйте не более 15 слов. 

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

J№2. Регистрация в рейтингах 

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

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

На Рис. 8.12 приведен пример страницы с одним из разделов рейтинга Rambler's 
ToplOQ. 

Вот список наиболее известных российских рейтингов: 

• Rambler ToplOO (http://top100.rambler.ru) 
• TopList (http://top.mail.ru/) 
• Spylog (http://www.spylog.ru) 

Раскрутка вашего Web-сайта в Интернете 

.айл Правка Виц Избранное Сервис Справка 

О - й И — Lj 

Адрес. Щ Mlp7/lopll)0.[»nibl»f.rii/loplOO/Ccii»pul«r./nKlt>i.ihlmlru 

J 3 ЕЛ "•""""•« I 

компькнеры 

Антивирус H.i Рамблере: проверьте ваши файлы 

Компьютеры: высшая проб».железа: тесты, обзоры, новости 

FTP: поиск пр огрьмм, игр, МРЗ 

Товары: Компьютеры н Интернет 

п 

Рамблер-Медиа: Intel: будущее замногоядерными процессорами / Playboy внедряет 
компьютерных супермоделей 

["П««и|1 126 I 61 179 1101 ~>' 170 12P1 ' SS5 » 100.03 2004 02:55] 

Рейтинг: заглавных страниц/.зяцщ Зам . страница . ' 
стат. 
Сортировать по: костам / посетителям / хитам . хосты посетители хиты 

1 iXBT: AMD Sempron и Intel Celeron D: тесты бюджетных пр.. 2«! 2 499 3 043 Л 

2 НИКС Компьюмархет: Первые дарты для PCI Fjpresa 312 320 374 вШ 

3 'Ф-UEHTP - NVIDIA GeFnree 6600GT: ЯОВЧЙОРЦ среднего к... 306 303 354 Л Дети 

4 ; 275 276 304 *J 

263 169 330 Й? 

б 258 261 273 иП> 

7 Упмпчолет» - Вышел ВТОРОЙ сесвис-пак ша Windows XP 230 233 274 Л 

! ТЕСТЫ жм»э« - ЕЖЕНЕДЕЛЬНО! 203 203 240 оШ 

177 пПп 

В 

S. 
Рмс. 5.72. Раздел Компьютеры рейтинга Rambler's Topi 00 

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

увеличить посещаемость вашего Web-сайта. 

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

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

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

Rambler's ToplOO (http://top100.rambler.ru), а самую подробную, хотя и 
несколько 
сложную, статистику предоставляет рейтинг Spylog (http://www.spylog.ru). 

Рассмотрим регистрацию Web-сайта в рейтинге. 


Создание Web-сайтов 

> Наберите в адресной строке вашего браузера адрес Интернет-рейтинга, например 
http://top100.rambler.ru. Загрузится главная страница рейтинга. 

> Справа, в разделе Rambler's ТорЮО, или в нижней части страницы найдите ссылку 

Добавить ресурс и щелкните на ней мышью. В окно браузера загрузится страница, 
на которой нужно выбрать место регистрации (Рис. 8.13). 

чат, который сближает... 

Регистрация 

О проекте 

Приглашаем Вас зарегистрировать Баш сайг: 

- Нздэ. статистика 
• в поисковой системе Rambler, 
- Вакансии 
• в интернет-рейтинге Rambler's ТорЮО; 
• в рейтинге интернет-магазинов Rambler's TopShop. 
- ОФис в Санкт-Петербурге 
-Связаться снами 
Регистрация в поисковой системе Rambler 

Но воет 

-Новости компании 

Регистрация сайта в поисковой системе Rambler есть приглашение роботу 
посетить страницы ресурса. Обычно между регистрацией сайта и появлением 


- Онлайновые СМИ о нас 
Ваших документов в результатах поиска проходит 2-4 недели. 

Поиск 

,n.n^,r Е 
:l

 I il 

Рис. 8.13. Страница для выбора места регистрации 

Можно зарегистрироваться: 

• в поисковой системе Rambler; 
• в интернет-рейтинге Rambler's ТорЮО; 
• в рейтинге интернет-магазинов Rambler's TopShop. 
> Прокрутите страницу и в разделе Регистрация в интернет-рейтинге Rambler's 
ТорЮО щелкните мышью на ссылке Правилами ТорЮО. В окно браузера загрузится 
страница, на которой размещены правила регистрации в системе (Рис. 8.14, 
Рис. 8.15). 

> Прочитайте внимательно правила регистрации в рейтинге и, если вы с ними 
согласны, 
установите переключатель Зарегистрировать и нажмите кнопку Далее (в других 
рейтингах надписи могут быть другими). В окно браузера загрузится вторая 
страница регистрации (Рис. 8.16, Рис. 8.17). 


Раскрутка вашего Web-сайта в Интернете 

Чат, который сближоет... 
чат "Кроватка* 

Kamfa let's Top TOO » Регламент сервиса 

- Вопросы и ответы 
Регламент сервиса Rambler's ToplOO 

- НУРДактендм 
- Добавить ресурс 
I. Статус Регламента Сервиса Rambler's ToplOO 
Настоящий Регламент определяет права и обязанности Владельцам сайтов 
лиц, испольэукщих Сервис Rambler1a ToplOO. 

- Изменить 
Владелец Rambler's ToplOO сохраняет за собой право 
изменять настоящий Регламент, уведомляя об этом в 
сети Интернет по адресу: 
http://topl00.EaBfcler.ru/topl00/new3.htial не позднее 


• В oiftu под другим 
чек за 5 (пять) дней. 

именем 

Анонсирование изменений Регламента и публикация 

ссылок на редакции Регламента производятся по адресу: 

_Е 

Э Ш if Ш ...\ \ 

Рис. 8.14. Первая страница регистрации в рейтинге Rambler's ТорЮО(начало) 

QH 

net 

Адрес: |3]Ы[р:,7|Оо100 I«nb4ei."j/lo|>100/lop^add.thlml.ru JV J В Перепои [ 

Регламент разработан Виктором Наумовым/ HWU.russianlau.net 

Путем выбора соответствующей опции и нажатия кнопки "Регистрация" Вы 
выражаете сотасие участвовать в Rambler's ToplOO и обязуетесь соблюдать 
Регламент сервиса. 
Если Вы не сописны с участием в ToplOO или не приникаете все нормы его 
Регламента, то Вы не регистрируетесь. 


О зарегистрировать 

О не регистрировать 

I Далее I 

Рамблер - ToplOQ - Муюиы • П oiyrgff* • Путешествия - ррадо-Здоровье - 
Компьютеру-Лето- Недвижимость 
Сервисы: Пд*тга - Группы - фотд - Партит - Поиск ф&Йио» - Дот^ецы - Словари - 
Карты - Открытки - МоЕ>айп 
Сег* ДНЯ: Ноаости - Финансы - Спорт - Погода - Руматрш:! - ТВ-Програ[у1МЫ - 
Горосгоп - Москву - Работ» 

S. 
S. 
Щ Internet 


Рис. 8.15. Первая страница регистрации в рейтинге Rambler's ToplOO (окончание) 

14' 


Создание Web-сайтов 

Назад -© • S Ц <& |/>П«с. *fo И*»», ф Медиа 

| ® hllp://lop100.iamblei.iu/egi-bin/mod_lop10ll.cgi7ieg-accepl 

Ha.n.i.b|cr's_Top100 » Регистрационная форма 

Поля, обязательные для заполнения, помечены символом * 
Если у sac есть вопросы по заполнению свяжитесь с нами. 

*URL Вашей страницы: 

| http://www.your.site/url j 

*Название ресурса: 

i I 

Краткое описание: 

JB 

Рис. 8.16. Регистрационная форма рейтинга Rambler's ToplOO (начало) 

ф>йл Правка Вия Иябрйнмое Сервис Справка 

^ • В @1 

Адрес; Цу Ы!|. /,'к>р1Ш| i^mhlci ш/t-iji bif./mod_top100 cgi?ieg-accept j 3 63 
Перюоя Lrks 

| йогаЫм'» | 

|e«oo4t»| 

©Да ОНет 

Будет использован счетчик 1x1 с установкой логотипа: 

'Раздел рейпшга ToplOO в котором будет участвовать ваш ресурс: 

(Other (Прдаев) _ |»| 

Зарегистрироваться 
(не нажимайте дважды) 

.1..РП»1" 

Рис. 8.17. Регистрационная форма рейтинга Rambler's ToplOO (окончание) 


Раскрутка вашего Web-сайта в Интернете 

Заполните поля регистрационной формы и нажмите кнопку Зарегистрироваться. 
Откроется страница с сообщением об успешной регистрации и фрагментом htmlкода1, 

который нужно включить в код своей главной страницы (Рис. 8.18). Через 
несколько 
секунд на указанный вами при регистрации адрес электронной почты придет 
письмо с подтверждением регистрации, кодами для включения, а также указанными 
вами при регистрации именем и паролем. 

Rambler's Тор100 

-О npoei?» 
- Новостепроеки 
Регистрация в Rambler's ToplOO успешно проведена 

Для того, чтобы система начала подсчет Вашей статистики. Вам необходимо 
разместить на 
зарегистрированной странице Пензенский научно-учебный центр следующий 
Н*1^[Ь-код: • Регламент 

Владельцам сайтов 

<!-ЬЧ1исГТ.р100~> 

- Изменить 
- Удалить 
Код должен быть размещен так, чтобы иконка счетчика была видна на странице 

Для модификации параметров счетчика, просмотра закрытой статистики, и прочих 
действий. 

доступных только при указании имени пользователя и пароля используйте: 

Имя пользователя: 624925 

Пароль: заданный Вами при заполнении регистрационной формы 

Копия этого сообщения выслана Вам по E-mail на адрес lir@penxi.com.ru 

Внимание! Зарегистрированная вами страница будет включена в рейтинг после 
просмотра 
модератором. 


Щ Internet 

Рис. 8.18. Сообщение об успешной регистрации сайта в рейтинге Rambler's ToplOO 

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

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

 Если вы выбрали установку на своей странице логотипа «Участник Rambler's 
ToplOO» (Рис. 8.17), то 
будет два фрагмента html-кода—один для свернутого большого счетчика, а другой 
для логотипа. 


Создание Web-сайтов 

Для участников рейтинга Rambler's Top100 обязательным является установка 
большого счетчика (Рис. 8.17 вверху). Однако, если этот счетчик 
для вас слишком велик и невписывается в дизайн сайта, можнона 
странице ужать его до размеров 1 на 1пиксел, так что он станет невидимым. 
Взамен вы должны установить на своей странице логотип «Участник 
Rambler's ТорЮО». Если вам подходит этот вариант, выберите . 
при регистрации логотип подходящего вам цвета, и именно он будет 
включен в код, который администрация рейтинга выдаст вам для поме 
щения на главную страницу. 

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

Установка счетчика 

Установка счетчика потребует от вас ручной корректировки html-кода главной 
страницы. 
Даже если вы никогда не редактировали страницы своего сайта вручную, не 
пугайтесь. 
Этот процесс совсем несложен и не отнимет у вас много времени. 

>• Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows. 


>-В главном меню выберите команду Программы • Стандартные • WordPad (Programs 

• Accessories • WordPad). На экране появится рабочее окно программы WordPad. 
> Выберите команду меню Файл • Открыть (File • Open). На экране появится диалог 

Открыть (Open). 

> В открывающемся списке Тип файлов (File types) выберите строку Все документы 
(*.*) (АИ types (*.*)); в списке файлов отобразятся файлы всех типов (Рис. 8.
19). 

|вс 

)CLOUD 
)Fon 

|Fon 

Jgeoton 
JGeolon 
|Geoton 

jinde» 

JKnopka 

jKnopka 

Имя Файла: 

Хил Файлов: [Вседоку-1енты(*,') 

ИЗ 

Рис. 8.19. Диалог Открыть (Open) со списком файлов всех типов 

Выберите папку, в которой размещены страницы вашего сайта, и откройте html-файл 

главной страницы вашего сайта. Этот файл может называться index.htm, index.html,
 
default.htm и т.п. 


Раскрутка вашего Web-сайта в Интернете 407 

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

Чтобы перейти в другую программу, не закрывая той, в которой вы ра


нее работали, удерживая клавишу ll^M. нужное число раз нажмите на 

клавишу \\ ТаЬ I. пока не будет выбран значок нужной программы. Другой 
способ -щелкнуть мышью на значке нужной программы на Панели задач 
(Taskbar) Windows. 

Выделите текст кода, начиная со строки <!—begin of Rambler's ToplOO code —> 
и заканчивая строкой <l --end of ToplOO code—>. 

Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору), 
чтобы скопировать выделенный фрагмент в буфер обмена. 

Не закрывая почтовую программу, перейдите в программу WordPad, в которой открыт 

html-документ для редактирования. 

Установите текстовый курсор на пустую строку после текста, который должен 
предшествовать 
изображению счетчика, и вставьте скопированный ранее фрагмент кода, 
используя команды меню Правка • Вставить (Edit • Paste). Код будет вставлен в 
текст страницы. 

Если вы создаете свои Web-страницы с помощью визуального редактора 
(например FrontPage), то при разработке страницы выделите место для 
счетчика рейтинга и сделайте там надпись, например «Счетчик». 
Откройте страницу способом, описанным выше, и вставьте код вместо 
слова «Счетчик». 

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

> Снова перейдите в почтовую программу. 

>• Выделите текст кода, начиная со строки <1—begin of ToplOO logo—> и 
заканчивая 
строкой <l—end of ToplOO logo —>. 

>• Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору), 
чтобы скопировать выделенный фрагмент в буфер обмена, и закройте почтовую 
программу. 

v Переключитесь в программу WordPad, в которой открыт html-документ для 
редактирования. 


> Установите текстовый курсор на пустую строку после строки <I—end of ToplOO 
code-->, завершающей код счетчика, и вставьте скопированный ранее фрагмент кода,
 
используя команды меню Правка • Вставить (Edit • Paste). Код будет вставлен в 
текст страницы после кода счетчика (Рис. 8.20). 


408 ; Создание Web-сайтов 

>• Сохраните исправленный файл Web-страницы с помощью команды меню Файл • 
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены. 


>• Подключитесь к Интернету. 

>• Дважды щелкните мышью на имени Web-страницы в программе Проводник (Explorer).
 
Откроется окно браузера с отредактированной страницей (Рис. 8.21). 

Рис. 8.21. Web-страница с логотипом Rambler's Top] 00 

> Убедитесь, что счетчик или логотип отображается правильно и закройте окно 
браузера. 

>• Загрузите отредактированную главную страницу Web-сайта на сервер, который 
предоставляет 
место для размещения вашего сайта в Интернете. 


Раскрутка вашего Web-сайта в Интернете

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

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

€п*утъ J№3. Анализируем посещаемость сайта 

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

Прежде чем начинать анализировать посещаемость, необходимо оговорить некоторые 
особенности. При анализе нас, в первую очередь, интересует информация о 
посетителях. 
К сожалению, при работе со статистикой приходится заменять понятие «посетитель» 

несколько абстрактным понятием «хост». Дело в том, что все системы статистики 
различают 
посетителей по адресам их компьютеров, но разные адреса компьютеров не всегда 
соответствуют разным посетителям или наоборот, один и тот же адрес может 
скрывать 
большое число реальных людей. Происходить это может, например, когда один 
компьютер, являющийся прокси-сервером большой организации, запрашивает 
информацию 
сразу для нескольких десятков или сотен компьютеров или когда за одним 
компьютером 
маленькой организации поочередно работает несколько человек. Часто также 
встречается ситуация, когда обращаясь к сайту повторно после обрыва связи, 
посетитель 
получает совершенно другой адрес компьютера, и система учитывает это как 
обращения 
двух разных хостов, то есть адресов, тогда как на самом деле посетитель один и 
тот же. 
Количество разных адресов, с которых происходит обращение к страницам Web-сайта,
 
называют числом уникальных хостов. 

Несмотря на эти сложности, можно принять число хостов равным числу посетителей. 


Попробуем проанализировать посещаемость сайта, после регистрации которого 
прошло 
уже достаточное время, используя статистику рейтинга Rambler's ToplOO. 

> Наберите в адресной строке вашего браузера адрес Интернет-рейтинга, в котором 
вы 
зарегистрировались, например http://top100.rambler.ru. Загрузится главная 
страница 
рейтинга. 

>• Справа, в разделе Владельцам сайтов, найдите ссылку Статистика и щелкните на 

ней мышью (в других системах ссылка перехода к статистике может называться 
иначе, 
например Вход для пользователей). На экране появится диалог с полями для 
ввода имени и пароля (Рис. 8.22). 


Создание Web-сайтов 

Подключениек lopiUUiamblcnu 

на 

Authorised User 

Пользователь: 

Пароль: 

... 1

г~ 

j Q Сохранить пароль 

} Отмена | 

Рис. 8.22. Диалог дляввода имени ипароля при запросе статистики 

> Введите имя пользователя и пароль, выданные вам в системе при регистрации. 
Загрузится страница со статистикой о распределении посещений за последний 
день (Рис. 8.23). 

.айл Драен» 1ни ДО|""НМ Сервис Справка 

Ресурс: КНИГА ДНЕЙ: Календарь шаменательных дат 

Адрес (страница/с*рвер) http ://rubts ov.p eaii. с о т ru /calendai/C sldndai.
htm • О Щ10ИТС. 
Идентификатор в Rambler's ToplOO 444809 
Дата регистрации 
Дата последнего обращения шт.-яшшшш 23 03.2003 М.2238 
10 09 200418:45:31 
• Добавить ресурс 
- Регламент 
Статксткка пас«1Ценкй . ">"" iota, страница Сайт 
Владельцам сайтов 
Уникальных адресов (хостов) сегодня: 88 101 
Посетителей сегодня' 
Показов страниц (хитов) сегодня ШШШВЖР 104 
105 
ш 
- Забыли пароль? 

Сегохмя | Поаробны статистика | ПрТШИЯ • «•Йгннгах! Посещаемость сайта 1 Am 
DHecn. посетителей 1 
Htnn.il География! Настройка 

Распределение посещений (хитов) по времени суток: 

0 1 2 3 4 5 6 7 8 9 10 11 12 13 И 15 16 17 18 19 20 21 22 23 

• Сеговия Недели НЙЗАД ^^ — Среднее с иоментй 
Рис. 8.23. Статистика ораспределении посещений сайта за последний день 

На фафике Распределение посещений (хитов) по времени суток отображается 
зависимость 
числа посещений страницы от времени суток. На приведенном графике хорошо 
видно, что основной пик посещений приходится на интервал между 11 и 15 часами, 
а 
спад - между 0 и 5 часами ночи. Эти данные полезно знать, чтобы добавление 
новой 


Раскрутка вашего Web-сайта в Интернете 

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


Следующие два графика Распределение количества посетителей по времени суток и 
Распределение количества уникальных адресов посетителей (хостов) по времени 
суток отображают примерно ту же информацию, что и первый график. 

Для изучения отклика посетителей на те или иные действия по раскрутке сайта, 
наиболее 
полезной является статистика посещений за относительно длительный период 
времени 
- месяц или два. Посмотрим, как такая статистика отображается в системе 
Rambler's ToplOO. 

>• Найдите ссылку Посещаемость сайта и щелкните на ней мышью. Загрузится 
страница 
с графиками посещаемости (Рис. 8.24). 

файл Правке .ия 

Сентябрь 20СИ 

1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 
I кости Щ посетители • хити 

Август 2004 

!1 И 13 15 17 19 21 23 25 27 29 31 

Рис. 8.24. Статистика с графиком посещаемости 
за 2 месяца в системе Rambler's ToplOO 

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


Создание Web-сайтов 

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

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

Разумеется, при анализе такого графика следует помнить, что на субботние, 
воскресные 
и праздничные дни всегда приходится спад посещений, а следующий за ними пик 
объясняется 
началом рабочей недели, а вовсе не вашими рекламными действиями. Спад 
посещаемости по выходным дням хорошо виден на графиках, приведенных на Рис. 8.
24. 

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


> Найдите ссылку География и щелкните на ней мышью. Загрузится страница с 
диаграммами 
распределения хостов по регионам России. 

>• Выберите ссылку Период: 30 дней. Загрузится страница с диаграммой с 
географиигскими 
данными за 30 дней (Рис. 8.25). 

i ресурса 444609 - Mictosoft Internet Explo 

Файл Правка {.ив Избранное Сервис Справке 

Ресурс: КНИГА ДНЕЙ: Календарь знаменательных дат 

Адрес (страница/сервер) http ://tobta ov peresa. com.ru/c alendat/C alendarhtm 
- Новости проекта 
Идентификатор s Rambler's ToplOQ 444809 - Вопросы и ответь; 
Дата регистрации ЦНЯНиНЕ" 23.03.2003 06^2:38 -Нмшшгск пш 
Дата последнего обращения 11.09.200408:20:16 
• Добавить ресурс 
- Р егпамеит 
Статистика посещенюс страница Сайт 
Владельцам сайтов 
укю*&лы^ых адресов (хостовз сегодня: 
- Изменить 
Посетителей сегодня: .::. • • • - Удур-ггь 
Показов стр аниц (хитов) сегодня 
• Забыли пароль? 

Сегодня | Подробная статистика | Позиция в рейтингах! Посещаемость сайта 

-Войти под другим 

посетителей | Хосты | Страницы | География | Настройка 

Показывать; график / таблицу 
Распределение: яд регионам России / по странам 
Период: сегодня / 7 дней / 30 дней 

Уникальные адреса (хосты) 

Москве (19.83Z) • 
<з,4Ш Ш 
Краснодарский КРАЙ (1,672) • 
Свердловская ОБЛ. (2.142) • 
КРЙСХОЯРСКИЙ КРАЙ (1.802) • 
Иркутск** ОБЛ. (1.782) • 
ТОМСКАЯ ОБЛ. (1,292) • 
Остальные регионы <32.022) G 
Зарубежные СТРАНЫ (34.542) • 
Расположение ив огееделено (1.502) D 

Рис. 8.25. Статистика с диаграммой географического распределения посетителей 
за месяц в системе Rambler's ToplOO 


Раскрутка вашего Web-сайта в Интернете 

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

Кроме того, статистика Rambler's ToplOO позволяет посмотреть аналогичную 
диаграмму 
распределения посетителей по странам. Это важно, если ваш сайт ориентирован на 
зарубежную 
аудиторию. 

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

> Найдите ссылку Хосты и щелкните на ней мышью. Загрузится страница с таблицей 
адресов хостов посетителей, отсортированная по количеству обращений (Рис. 8.26).
 

1 2 Шштт аТх"

Файл Правка Вид Избранное Сервис 

т* 

WplOC'.pUFWWd: topi ОС) 

Сортировать по: млхчсс Т.ги»сеще1ой/Е.и__ «спи последнего обе 1ГГШ 
Алресапосетителей: чиср^вь t |IF1 UPeci ' i™*i« кя итамтерож 


«Пр«|1|31|а1|й|81|1Ш.|Дмьп»» 

'• • • ;:••:,• Сайте целом ai страница 
Время 


' Возвр Переэа „ 

после дяего 

;•8 г

Не 

Обретшийпйсле грузок ~' 

обращениз 

стретлги. . "" » 

• -.;•.•. • . • . • часа 

1 Mfuia-Wabans.glazov.net 5 D 0 5 0 14:44.43 

2 62.183 50164 ВВ П 4 2 : 0 0 4 1623.40 
3 prony.bU.bg 3 1 О 3 0 13Л2И5 
4 I95.201.109.22tf 3 1 0 .3 0 13:41.41 
5 mx.vkl.iu 2 0 0 2 0 13J934 
6 nj ino*uiedu.ru 2 1 0 0 2 0 18Ш4 
7 195.Й9.160.6 2 1 0 0 0 2 12:36:56 
8 dialup S3 209 220 95.telecom.mogilev.by 2 1 0 0 2 0 12:34:01 
9 h99.212-l-77.utapack.net 2 0 1 0 2 0 13:44:02 
10 gwradioc.ni 2 1 0 0 1 1 0628:10 
11 21726144.73 2 1 0 0 2 0 13:01:24 
12 212.17634.6 2 0 1 0 2 0 №'5626 
13 195.128.94.20 2 0 1 0 2 0 1305:54 
14 cache2.uninet.ee 2 l 0 2 0 17Я303 
15 ln.hiUnv.ui 0 0 0 1 0 XJ9S5 
1(5 pan.riss-lebcoiti.ru 0 0 0 1 0 15:17:33 
17 cel-atf32-violet.&ftftnettu 0 0 0 1 0 18:31:14 
IS hott-80-95-32-242Jeuedlines.euriJM о .. 0 0 1 0 огза-Si 
19 host-80-95-35-232 dialup sura ru 0 0 0 1 0 1848 22 
20 host-SO-9^38-43 diLiunni 0 0 0 1 14Л931 


IHBH 

Процент от всех: ЗЗД К 

Рис. 8.26. Статистика с таблицей адресов хостов в системе Rambler's ToplOO 

С помощью этой таблицы вы можете увидеть конкретные адреса хостов, с которых 
приходят 
к вам посетители. Чтобы более подробно узнать об этих хостах, можно прибегнуть 
к такому трюку. В адресной строке браузера наберите фрагмент любого адреса, 
начиная 
со второй с конца точки, вставив впереди www. Например, если взять третий адрес 
из 
таблицы proxy.bta.bg и ввести преобразованный адрес www.bta.bg в адресную 
строку 
браузера, то мы попадем на сайт болгарского телеграфного агентства. То есть, 
три обращения, 
которые дал этот хост в течение дня, идут от сотрудников этого агентства. 


Создание Web-сайтов 

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

Для большинства сайтов регулярного анализа подобной статистики вполне 
достаточно, 
чтобы сделать выводы об эффективности или неэффективности предпринимаемых 
рекламных 
шагов. Если же вам хочется получить еще более подробные сведения о посетителях 
вашего сайта, то можно пойти еще дальше, и зарегистрироваться в системах с 
более 
подробной статистикой. Но для этого придется установить счетчик системы на 
каждую 
страницу вашего Web-сайта. Подобные услуги предоставляют, например, системы 
Spylog (http://www.spylog.ru) и Rambler (http://top100.rambler.ru). Системы с 
подробной 
статистикой предоставят не только сведения, о которых было рассказано выше, но 
также 
информацию о ссылающихся на ваш сайт серверах, количестве посетителей, 
пришедших 
с поисковых машин и каталогов, наиболее популярные пути и страницы сайта, время,
 
проведенное посетителями на сайте. Регистрация и установка счетчиков на 
страницах 
для участия в таких системах совсем несложны и аналогичны тем, о которых было 
рассказано 
выше. 

JV&4. Баннерный обмен 

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

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

На Рис. 8.27 приведен пример сайта с размещенными на нем рекламными баннерами. 
В верхней части экрана размещены четыре баннера с анонсами новостей. Щелкнув 
мышью 
на любом из этих баннеров, можно перейти к более подробному знакомству с 
новостями, 
размещенными на сайте Lenta.Ru. 

Существует определенная договоренность насчет размеров баннеров •чаще 
всего используются баннеры размером 468x60 пикселов, довольно 
популярны баннеры 100x100, также часто используютсябаннеры-кнопки 
небольшого размера 88x31. Баннеры остальных размеров используются 
реже, например: 125x125, 120x60, 120x240 пикселов. 

Баннеры могут быть в формате gif, jpeg и flash. О том, как самому создать 
графический 
или анимированный баннер, было рассказано в главе о графике и анимации этой 
книги. 
В этой же главе мы расскажем о том, как сделать так, чтобы каждый ваш рекламный 

блок успешно выполнял задачу по раскрутке сайта. 


Раскрутка вашего Web-сайта в Интернете 

Файл Правка Вид Избранное Сервис Справка 

Адрес: №) http://www.lefrfa.fu [ J И П.ре»од 

В финале Открытого чемпионата США па теннису встретятся 

L&NTARU 

две россиянин11 Евросоюз предупредил Лукашенко 2 
ф|5КRambler iflwfi»flpifl ] В Ираке уничгп 
турецкой *Afflt:Ka.WttM* I Накануне годовщины 11 сентября 

Московское время: 09:51:08 
Частицы солнечного вятра не пострадали При ударе капсул 

рееланская школа 

Qanesin о земгро, | Грузия получит часть вздвифимрстк 
Помогите пострадавшим от 

теракта в Беслане 
Липе к з и л М и Эл Jft 77-4400 

/"мс. S.27. Сайт с бамперами 

Существует несколько методов баннерной рекламы. 

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

• Прямой обмен баннерами - вы напрямую договариваетесь с владельцами ресурсов 
о размещении своей рекламы на их сайтах, взамен чего размещаете у себя баннеры 
данных ресурсов. 
i/ Покупка баннеров - вы покупаете показы, и ваши баннеры появляются 
оговоренное 
число раз (обычно счет идет на тысячи) в баннерообменной сети или на популярных 

сайтах. 

Для любой рекламы, и баннерная реклама здесь не исключение, главным является ее 

эффективность, а Интернет дает довольно хорошие возможности для отслеживания 
того, 
насколько успешно работает ваш баннер. Чаще всего эффективность баннера 
измеряется 
в откликах или CTR (сокращение от английского click/through ratio). Это самый 
простой, 
хотя и не единственный, параметр оценки. Отклик или CTR - это отношение числа 
показов 
баннера к числу переходов на рекламируемый им сайт. Чтобы перейти на 
рекламируемый 
сайт, пользователь должен щелкнуть на баннере мышью (кликнуть - от английского 
click (щелчок)), и таким образом число «кликов» - это число посетителей, на 
которое 
увеличится аудитория вашего сайта благодаря баннеру. Естественно, чем больше 
соотношение показы-клики, тем успешнее работает ваш баннер. Еще недавно хорошим 

считался CTR 2-3% - то есть, чтобы на ваш сайт, щелкнув мышью на баннере, зашли 

2-3 человека, он должен быть показан 100 раз. Но пользователь Интернета уже 
привыкк 
большому числу рекламы и старается избегать ее, поэтому сейчас CTR в 1% уже 
считается 
хорошим, а средний CTR составляет примерно 0,5%. 


Создание Web-сайтов 

Данные о CTR ваших баннеров предоставляют баннерообменные сети в специальной 
статистике. 

Создание эффективного баннера 

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

Приведем некоторые идеи создания баннеров с большим CTR. 

• «Обрезанный текст» (Рис. 8.28). На баннере помещается фрагмент интересного 
текста, 
продолжение которого уходит за нижнюю границу баннера. Заинтересовавшийся 
посетитель 
щелкает мышью на баннере, чтобы прочитать продолжение. Конечно, в большинстве 
случаев это не более, чем рекламный трюк, и посетитель никакого продолжения 
после перехода на сайт не находит. Тем не менее, часто человек, который даже 
знает об этом приеме, щелкает мышью импульсивно. Чтобы такой посетитель 
все-таки 
задержался на вашем сайте и не испытал раздражения, попробуйте сделать так, 
чтобы 
уже на первой странице вашего сайта он нашел продолжение интересующего текста 
или хотя бы быстро понял, в каком разделе его найти. 
ОднаждыЧукча купил шкаф с внутренним зеркалам. 

Открываетего дома.' "Жена, смотри, ко мне брат приехал!" 

Жена подходит ... 

Рис. 8.28. Баннер с обрезанным текстом 

«Загадочный» баннер (Рис. 8.29). Рисунок и текст на таком баннере настолько 
странны, 
что непонятно о чем вообще идет речь или их можно истолковать сразу в 
нескольких 
смыслах. Заинтригованный пользователь часто не может пройти мимо такого 
баннера, чтобы не узнать, что за сайт за ним скрывается. Также CTR «загадочного
» баннера может сильно увеличиться, если баннер содержит не только Загадку, 
но и намек на эротические мотивы. 

ДАЛЬШЕ ЫЛЕ 

Рис. 8.29. «Загадочный» баннер 

Баннер с элементами интерфейса. На баннере размещен какой-либо вопрос и 
приведены 
кнопки стандартного интерфейса Windows с надписями Да и Нет. Посетитель 
инстинктивно щелкает на кнопке, чтобы ответить на вопрос, как это он привык 
делать в программах Windows. Также в качестве привычного элемента интерфейса 
выступает полоса прокрутки. В этом случае текст или изображение на баннере 
делают обрезанным, а справа размещают полосу прокрутки, чтобы заставить 
посетителя неосознанно попытаться «прокрутить» изображение на баннере 
(Рис. 8.30). Но поскольку это не настоящая полоса прокрутки, а лишь ее имитация,
 
то вместо прокрутки произойдет щелчок мышью на баннере. 


Раскрутка вашего Web-сайта в Интернете 

Рис. 8.30. Баннер сэлементом интерфейса 

• «Нажми на баннер». Вообще считается, что слова «щелкни», «нажми здесь», 
«кликни
», побуждающие посетителя к активным действиям, очень повышают CTR баннера, 
тем более, если предлагается щёлкнуть мышью, чтобы узнать что-то интересное, 
выиграть приз и так далее. Как ни странно, но срабатывает и обратное - призыв 
не 
нажимать на баннер (Рис. 8.31). 
НИКОГДА 
НЕ НАЖИМАЙ 
НА ЭТОТ БАННЕР 

Рис. 8.31. Баннер спризывом не нажимать на него 

• «Попади по мишени» (Рис. 8.32). Баннер содержит анимированное изображение, 
которое 
хаотично или упорядоченно перемещается по баннеру. Чаще всего текст на 
баннере предлагает суметь попасть мышью по изображению, чтобы, например, 
выиграть 
приз. 
ВЫСТРЕЛОВ: 
ПОПЙДЙНИЙ: О 

ОСТйНОЕИ ИНЛЕИиЯ КЛИКОМ 


Рис. 8.32. Баннер с движущейся мишенью 

Хотя все перечисленные выше способы необходимо знать всем, кто хочет изготовить 

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

Кроме того, есть опасность, что посетитель запомнит, что именно ваш сайт 
использует 
не совсем честные методы, а когда ему действительно понадобится информация с 
вашего 
ресурса, он предпочтет сайт-конкурент. Поэтому лучше всего, пользуясь советами 
по 
повышению CTR, одновременно стараться не обманывать посетителя и на сайте, по 
возможности, 
предлагать то, что обещает баннер. Например, баннер с фрагментом игры 
«Сапер» с изображением частично разминированного игрового поля (Рис. 8.33) 
призывает 
скорее продолжить игру, потому что время идет. 

1 1 I:..' 
2| 1131 Быстрее! Время 

1 Ф 1 

1 ПНжН рляминнртдть! z идет! 

1 Ш 

Рис. 8.33. Баннер сфрагментом игры 


 Создание Web-сайтов 

Хотя такой баннер содержит «хитрые» элементы, тем не менее он почти не 
обманывает 
- баннер ведет на сайт интерактивных игр с призами RaxGames (http://games.rax.
ru). 
Правда, игры «Сапер» там нет, но зато есть множество других интерактивных игр 
подобного 
плана. 

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

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

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

molotokiTu 

О Компьютеры П Коллекционирование О Сотовая связь О Авто, Мото, Запчасти 

Рис. 8.34. Имиджевый баннер 

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

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

• Размер баннера в байтах. Как и любое компьютерное изображение, чем баннер 
меньше, тем быстрее он загружается через Интернет, а следовательно, больше и 
вероятность 
того, что посетитель, перемещающийся по странице, увидит полностью загруженный 
баннер, а не прямоугольник с загружающейся картинкой. Баннерные 

Раскрутка вашего Web-сайта в Интернете

службы часто ограничивают размер принимаемых баннеров 13 или 15 Кбайт, но чем 

меньше будет размер баннера, тем лучше. 

i/" Цвет. Яркие цвета, как правило, привлекают внимание, поэтому старайтесь не 
делать 

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

в использовании ярких цветов тоже нужна мера. 

• Величина баннера. Крупные баннеры всегда более заметны, чем баннеры меньших 
размеров. Если перед вами стоит выбор: какого размера создать баннер - разумнее 

остановиться на баннере большого размера. 
• Анимация. Как правило, анимированные баннеры больше приковывают взгляд, 
поэтому 
имеет смысл добавить хотя бы небольшую анимированную деталь. 
• Использование изображений. Использование картинок обычно идет на пользу 
баннеру. 
Это могут быть рисованные картинки или фотоизображения. Баннеры с 
фотоизображениями 
обычно выглядят более профессионально. 
К сожалению, несмотря на все расчеты, часто заранее нельзя предугадать, будет 
созданный 
баннер эффективно работать или нет. Оценить эффективность можно лишь одним 
способом - практически. Попробуйте изготовить несколько вариантов одного и того 
же 
баннера и зарегистрировать их для показа в баннерной сети. Через некоторое 
время вы 
сможете реально оценить отклик (CTR) каждого баннера и оставить в сети только 
тот, 
который работает эффективнее. О том, как все это сделать, будет рассказано 
далее. 

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

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

Использовать ли баннеры вообше? 

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

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

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



Создание Web-сайтов 

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

Есть еще одна причина, по которой следует подумать, стоит ли вам размещать на 
своих 
страницах баннеры, которые предоставляет вам баннерная сеть в обмен на показ 
вашей 
рекламы на других сайтах. Это - невозможность контролировать содержание 
баннеров, 
которые появятся на страницах вашего сайта. Над этим особо стоит задуматься 
владельцам 
серьезных тематических ресурсов. Хотя в большинстве баннерообменных сетей 
запрещено 
использование некоторых приемов в баннерах, зачастую баннеры, формально 
отвечая правилам, имеют довольно фривольный вид и тексты, что называется, «на 
грани 
фола». Если учесть, что очень часто посетители вашего серьезного, интересного 
сайта 
будут распечатывать статьи для своих друзей, не имеющих Интернета, то 
достаточно 
представить, как будет выглядеть распечатанная серьезная статья, сверху и снизу 
обрамленная 
странными рисунками и надписями, чтобы отказаться от баннерного обмена совсем. 
Тем более, что если посещаемость вашего сайта не более 100 человек в день, то 
сколько-нибудь заметного выигрыша от участия в баннерном обмене вы все равно не 

получите. 

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

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

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

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

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

Баннерообменные сети 

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



Раскрутка вашего Web-сайта в Интернете

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

За свои услуги баннерообменная сеть взимает определенную комиссию - например, 
вы 
показываете на своих страницах 100 чужих баннеров, а взамен сеть показывает 90 
ваших 
баннеров на других сайтах. Десять показов баннеров из ста сеть забирает себе - 
для продажи 
желающим за деньги или для рекламы самой баннерной службы. Как правило, чем 
крупнее сеть, тем более высок процент ее комиссии. Есть сети, которые 
обменивают 
показы баннеров «один к одному». Как правило, это небольшие или только 
начинающие 
работать сети. 

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

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

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

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

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

Выбирая баннерообменную сеть, необходимо внимательно ознакомиться с условиями 
вступления в нее, количеством и уровнем сайтов-участников, размерами комиссии, 
пра



Создание Web-сайтов 

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

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

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

• Russian Link Exchange (http://www.rle.ru) - охватывает более 20 000 сайтов 
различной 
тематики, ежедневно показывает более 19 миллионов баннеров размером 
468x60 пикселов. Принимаются все сайты за исключением сайтов с содержанием 
«для взрослых» и посвященных заработку в сети на основе пирамид. Эта баннерная 
сеть берет комиссию в размере от 14% до 33%. Чем больше чужих баннеров на своих 

страницах вы сможете показать, тем меньшую комиссию взимает сеть. Сеть строго 
следит за содержанием баннеров и соответствием сайтов заявленной тематике. 
Управлять аудиторией показа своих баннеров могут только участники сети, 
показывающие 
в сутки более 400 чужих баннеров на своих страницах. 
• RB2 (http://www.rb2.design.ru) - баннерная система, работающая с баннерами 
формата 100x100 пикселов, ежедневно показывает их более 4-х миллионов. 
В баннерную систему принимаются не все сайты, а только сайты достаточно 
высокого 
уровня по оформлению и содержанию. Для вступления в сеть необходимо подать 
заявку, после чего работник сети осмотрит ваш ресурс и решит, принимается он в 
сеть или нет. Сеть приветствует новостные ресурсы, серьезные специализированные 

сайты различных тематик, сайты культурных проектов. Каждому новому участнику 
даются «подъемные» в размере 20 000 показов. Все участники имеют возможность 
настраивать аудиторию показа своих баннеров - по времени, по географии и 
зрителям. 
• Интер-реклама (http://www.interreklama.ru/irnew/index.html) -в сеть 
принимаются 
все сайты, кроме эротических. Баннерная служба взимает комиссию в размере 10%. 
Сеть строго следит за соответствием сайта заявленной тематике, а баннеры 
проверяются 
модератором. Есть возможность тонкой настройки рекламной кампании с применением 

своих баннеров. Принимаются баннеры размером 468x60 пикселов. 
• Реклама.Ру (http://members.reklama.ru) - сеть показывает более 2-х миллионов 
баннеров 
формата 468x60 ежедневно. В сеть принимаются сайты-участники, получившие 
одобрение сотрудника сети по отбору и способные показывать на своих страницах 
не менее 1000 баннеров ежедневно (как правило, для этого сайт должно посещать 
не менее 200-300 человек в день). Система предлагает новым участникам 
«подъемные
» в размере 20 000 показов, а также предлагает выкуп показов баннеров у всех 
участников. 
Список адресов других баннерных служб вы можете найти, например, по адресам 
http://webrating.ru/promo/promo_root и http://catalog.aport.ru/rus/themes.
asp7ids2050. 

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



Раскрутка вашего Web-сайта в Интернете 

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

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

Предположим, ваш сайт ежедневно посещает 100 человек. В среднем, каждый 
посетитель 
просматривает 2 страницы сайта (многие службы статистики предоставляют 
информацию 
о глубине просмотра сайта посетителями). Если на каждой вашей странице 
размещен баннер баннерной службы, значит, общее число баннеров, показанных на 
вашем 
сайте в сутки, будет 200. Если размер комиссии, взимаемый баннерной системой, 
составляет, например 20%, то 200 баннеров, показанных вами, принесут 160 
показов 
рекламы вашего сайта. Если учесть, что средний CTR большинства баннеров 
составляет 
0,5%, то получается, что участие в баннерной системе принесет вашему Web-сайту 
0,8 посетителя в день или примерно одного нового посетителя раз в два дня. Это 
очень 
мало. Вдобавок, этот посетитель может быть случайным и может сразу же уйти с 
вашего 
сайта, чтобы никогда на него не вернуться. 

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

Регистрация в баннерной службе 

Зарегистрируем свой ресурс в баннерной службе Russian Link Exchange (http://www.
rle.ru). 

> Запустите браузер и наберите в адресной строке http://www.rle.ru. В окно 
браузера 
загрузится начальная страница сайта Russian Link Exchange. 

ЕЙ |ДЦ {5|/>П,»«ж ^ Игранное 

-•ей 

netwofkfrMHamgHH 

hj В Пе 

U, Id 

гггишгттгттп rrri—--тгтгттгт г-т 

шггм 

D/ C BANNER

I

I\L.C NETWORK

-Ф®-~-о


КАТАЛОГ ИНФО-UEHTP 

-| О СЕТИ 
САЙ1О» 

Не бойтесь будущего. 

• Правила участия в сети RLE 
I Регистрируясь в сии6«ннерного обмен» Russian 

j LinkExchange™Cnane* — RLE), участникам самым 
j сопхашаисл со сп*дующимиправил4миучастня. 


1.1. Участник понимает, что сеть б&ннврного 
обмена RLE предназначена дгм бесплатного 
обмена решамиыми битерами между 
участниками. Другие формы использования 
TJBT 

Рис. 8.35. Страница с правилами участия в сети RLE 


Создание Web-сайтов 

> Прокрутите страницу и щелкните мышью на ссылке Зарегистрировать новый аккаунт,
 
расположенной в нижней правой части страницы. В браузер загрузится страница, 
на которой размещены правила участия в сети (Рис. 8.35). 

>• Внимательно прочитайте правила и щелкните мышью на ссылке Я согласен(а) 
с приведенными выше правилами, которая располагается в самом низу страницы. 
Загрузится новая страница с регистрационной формой (Рис. 8.36). 

Рис. 8.36. Регистрационная форма баннерной службы (начало) 

), Иванов Иван Иванович! 

Регистрация нового акхаунта прошла успешно. Все регистрационные данные 
высланы на указанный Вами email адрес 

Рис. 8.37. Сообщение об успешной регистрации в сети RLE 

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



Раскрутка вашего Web-сайта в Интернете

 425 

ние об успешной регистрации (Рис. 8.37), и через пару минут на указанный вами 
адрес 
электронной почты придет письмо с указанием вашего идентификационного номера 
(ID) в системе .. кода, который нужно вставить на страницы вашего сайта. 

После получения идентификационного номера вы становитесь полноправным 
участником 
баннерной сети. 

Размещение кода баннеров на страницах сайта 

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

> Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows. 

>• В главном меню выберите команду Программы • Стандартные • WordPad (Programs 

• Accessories • WordPad). На экране появится рабочее окно программы WordPad. 
>• Выберите команду меню Файл • Открыть (File • Open), на экране появится 
диалог 
Открыть (Open). 

> В открывающемся списке Тип файлов (File types) выберите строку Все документы 
(*.*) (All types (*.*)); в списке файлов отобразятся файлы всех типов (Рис. 8.
3). 

> Выберите папку, в которой размещены страницы вашего сайта, и откройте 
html-файл, 
в который вы хотите вставить код баннерной системы. 

>• Не закрывая программу WordPad, откройте в вашей почтовой программе письмо от 

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

>• Выделите текст кода, начиная со строки <i— Russian LinkExchange code 
START —> и заканчивая строкой <I-- Russian LinkExchange code END —>. 

> Выберите команду меню почтовой программы Правка • Копировать (Edit • 
Сору), чтобы скопировать выделенный фрагмент в буфер обмена, и закройте 
почтовую 
программу. 

>• Переключитесь в программу WordPad, в которой открыт html-документ для 
редактирования. 


> Установите текстовый курсор на пустую строку после тега <body> документа и 
вставьте скопированный ранее фрагмент кода, используя команду меню Правка • 
Вставить (Edit • Paste). Код будет вставлен в текст страницы (Рис. 8.38). 

Конечно, код баннерной системы может быть вставлен не только после 
тега <Ьо<Зу>, но и в любом месте страницы - это зависит от того, где в 
дизайне своего сайта вы предусмотрелиместо для баннеров. Если вы создаете 
свои Web-страницы с использованием визуального редактора (например, 
FrontPage), то при разработке страницы выделите место для баннера 
и сделайте там надпись, например «Баннер». Откройте ту же страницу 
способом,описанным выше, и вставьте код вместо слова «Баннер». 


Создание Web-сайтов 

D slatyu html - WuidPnd 
Файл Прапка Вид * BcTflBun Формат .провка 


1шд1 вид и щщщ 

<html> 
<head> 


<^111е>Представление о снимке как о KapTHHe</title> 
</head> 
<body> 


<!-- Russian LinkExchange code START—> 

<iframe 

src=http ://www. linkexchange.ru/cgi-bin/erle. cgi?45477 ?Rnd_Num 

frameborder=0 vspace=O hspace=O width=468 height=6O 

marginwidth=O marginheight=O scrolling=no> 

<a href=http://www.linkexchange.ru/users/045477/goto.map target*=_top> 

<img src=htt{j://www.linkexchange.ru/cgi-bin/rle.cgi?45477?Rnd_Num 

alt="RLE Banner Network" border=0 height=60 widh=468x/a> 

</iframe> 

<!--Russian LinkExchange code END--> 

<п1>Преяставление о снимке как о картине</Ы> 


Корда фотография только осознавала себя искусством и еще не имела 
Цля справки нажмите F1 


Рис. 8.38. Открытый в программе WordPad html-файл 
со вставленным кодом баннерной системы 

> Это число на каждой Web-странице, куда вы вставляете код, должно быть разным. 

Если этого не сделать, баннеры на ваших страницах будут сменяться некорректно, 

Сохраните исправленный файл Web-страницы с помощью команды меню Файл • 
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены. 


>- Замените фрагмент Rnd_Num (он встречается в тексте кода два раза) на любое 
число. 

> Дважды щелкните мышью на имени Web-страницы в программе Проводник (Explorer). 

Откроется окно браузера с отредактированной страницей (Рис. 8.39). 

> Убедитесь, что баннер отображается правильно и закройте окно браузера. 

> Повторите все описанные выше шаги для всех страниц, на которых вы хотите 
разместить 
баннеры баннерообменной сети. 

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

> Загрузите все отредактированные страницы на сервер, на котором размещается 
ваш 
Web-сайт. Как это сделать, описано в главе о размещении файлов в Интернете 
данной 
книги. 

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


Раскрутка вашего Web-сайта в Интернете 427 

Файл Правка .ид Избранное Сервис Справка 

C:\web\stntyo.Mml Jj j <> Переход 

Представление о снимке как о картине 

Когда фотография только осознавала себя искусством н еще не имела 
собственных традиций, творчество первых фотографов-художников 
находило опору в законах живописи. Тогда и родилось направление 
фотоискусства, которое позже теоретики назвали "картинной 
фотографией". Это направление живо н сегодня. Оно развивается, 
приобретая новые черты современности, и объединяет такие жанры, как 
станковый павильонный портрет, натюрморт, классический пейзаж. 
Многие из этих произведений стали классикой фотоискусства По 
тематике, принципам решения смысловых и изобразительных задач, 
композиционным формам, колориту, живописности они действительно 
близки к параметрам изобразительного искусства. 

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

©Готово | Мой компьютер (смешанное) 

Рис. 8.39. Web-страница со вставленным баннером баннерной сети 

Входим в раздел участника баннерной сети 

>• Откройте браузер и введите в адресной строке http://www.rle.ru. В окно 
браузера загрузится 
начальная страница баннерной системы. 

ваиэ] 

Файл Правка Дщ Избранное Сервис Справка 

) http://www.lle.tu 

Ы 

01.06,04 Открыт обмен бвняерамн трех новых размеров: 120x240,600x90,120x600 
Подробнее 

20.05.04 Проведено очередное исследование аудитории сети RLE 
АРХИ1 НОВОСТЕЙ ( ^ 

Т [ ВОПРОС ДНЯ 

в Что нового в RLE? О Зарегистрировать новый ЦГ'У^ 
© Вход по безопасному протоколу https 

© ©• @ j—j 

© 

AdRiver 

Рис. 8.40. Ввод номера участника и пароля для входа в баннерную сеть 


Создание Web-сайтов 

Перейдите в нижнюю часть страницы и в поле Login введите свой идентификационный 

номер в системе, который вам прислали по почте, а в поле Password введите 
пароль 
и нажмите кнопку ® (Рис. 8.40). Откроется первая страница внутреннего раздела 
участника баннерной сети (Рис. 8.41). 

Е.ИД Избранное Сервис .TIJJB 

Адрес | ц httpjfweb linkBxchonqeTru:8DB0/cgi bin/manager cgi 

IT/ C BANNER 

ВЫБОР КАТЕГОРИИ САЙТА АККАУНТ #45477 

Авто / Мото + 
Бизнес и Компании + 
Игры ± 
Интернет сервис + 
Интернет-торговля + 
Искусство и культура± 
Кино и Телевидение + 
Компьютеры ± 
Люди+ 
Медицина и здоровье + 
Музыка и радио + 
Наука и Образование ± 
Прочее + 
Развлечения, отдых + 
Страны и города, путешествия-! 
СМИ / Интернет периодика + 
Спорт ± 
Хобби ± 

Рис. 8.41. Первая страница внутреннего раздела участника баннерной сети 

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

Теперь попробуем добавить в систему собственные баннеры, рекламирующие ваш 
Web-сайт. 

Добавление вашего баннера в систему 

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

Баннеры должны быть того размера, который разрешен к показу в баннерной системе,
 
и их объем не должен превышать 12-15 Кбайт. 

> Выберите в открывающемся списке пункт Добавление нового баннера и нажмите 
кнопку @. В окно браузера загрузится соответствующая страница баннерной системы 

(Рис. 8.42). 

>• Заполните поля как показано на Рис. 8.42 и нажмите кнопку ф у надписи 
Добавить 
баннер. Загрузится страница с настройками баннера (Рис. 8.43, Рис. 8.44). 


Раскрутка вашего Web-сайта в Интернете 

<.айл ррпвка Вид Избранное Сервис Справка 

j Адрес [.] http;//wwwtlert]:8H6Uft:gi-billAnmmtjercgi |-| t» Переход 

D/ C BANNER 

IV.I IEIWORK 
[Главное меню 

ДОБАВЛЕНИЕ НОВОГО БАННЕРА АККАУНТ* 45477 

Поле ALT: Начинающему фотолюбителю 
Сценарий: не определен N 

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

Добавить баннер 

~ Л | j|jj> Интернет 

Рис. 8.42. Первая страница для добавления баннера 

ттшшмштшттштятшштттт 

\ файл Правка йид Избранное Сервис .прввка 

|<Ё htlp|//www.rla:ru:8DaD/cgi-bin/managsf.c9i 

URL странкфг: |http://wwwiotolubnett.ru j 

Поле ALT: [Начинающему фотолюбителю | 

Сценарий: [не определен h j 

m ss

-j dd-mm-yyyyhh:mm:ss 
Дата остановки: |dd-mm-yyyy hhm m :ss~] 

J из них уже сделано: О 
О - показывать без ограничений 

"сего показов: 

У нас нет Вашего баннера. 

В Включен 
П Удалить 
сохранить изменения 
й Готово I W Интернет 

Рис. 8.43. Вторая страница для добавления баннера (начало) 


Создание Web-сайтов 

l-a-RLE-А 
.Цайл Цравка Й.ид Избранное Сервис Справка 


http://www.rle.ru:e080/cgi-bin/manager.cgi 

Для того, чтобы закачать баннер, надо нажать кнопку BROWSE, выбрать 
баннер на локальной машине, затем нажать на пиктограмму "закачать". 
После зтого баннер будет проверен и результат проверки появится на 
экране. 
Если вы не видите кнопку "BROWSE" - это значит, что ваш броузер не 
поддерживает закачку файлов. Используйте Netscape Navigator версии 

3.0 или выше, или Internet Explorer версии 4.0.' 
Выберите файл: |, || Обзор... | 


закачать 


TIP: Поле ALT - это текстовая строка, которая будет видна на месте 
баннера до того, как он загрузится. Данная возможность реализована 
только на сайтах, использующих для показа баннера новый расширенный 
код (код с возможностью показа HTML баннеров). 


ТГР: Если Вы хотите закачать HTML баннер, то Вам необходимо 
переслать нам все компоненты баннера в zip архиве по адресу: 
щррогЩ]irikexchange.ru. При этом архив должен иметь название, 
соответствующее номеру Вашего аккаунта в системе. 
Пришлите пожалуйста не только *.swf, но и полноценный index.html, 
оформленный по всем правилам языка. Со всеми картинками и прочими 
пассивными элементами (midi, swf..). Все CGI и ASP хранятся на Вашем 
сервере и вызываются оттуда. 
Настоятельно пеуоменттуям гюоввпить как бупет выглядеть Ват бяннеп 


\Щ: Интернет 

Рис. 8.44. Вторая страница для добавления баннера (окончание) 

> В поле Дата старта (Рис. 8.43) впишите дату, с которой вы хотите начать показ 
баннеров, 
например 01.10.2004 00:00:00. 

Дата может быть текущая, если вы хотите начать показ своих баннеров немедленно, 
или 
отдаленная, если вы хотите сначала накопить достаточное число показов чужих 
баннеров. 

>• Прокрутите страницу и нажмите кнопку Обзор (Browse), расположенную в средней 

части страницы (Рис. 8.44). На экране появится диалог Выбор файла (Рис. 8.45). 

k3banner1.gif 
1 index html 
porl html 


pnr2.html 
pnr3.html 
stntyn.html 


I [ Открыт 

In n файлов: |Всв файлы (*.*) Отмена 

а 

Рис. 8.45. Диалог Выбор файла 

> Откройте папку, в которой вы разместили готовые баннеры, выберите файл с 
нужным 
баннером и нажмите кнопку Открыть (Open). На экране появится сообщение 
о том, что баннер принят системой и отправлен на проверку (Рис. 8.46). 


Раскрутка вашего Web-сайта в Интернете 

|<Й hHp//www.rle.ru:aO8D/cqi-binAatchil.cg 

Аккаунг # 45477: Системное сообщенпе 

. .. . • Т.. -. .... 'л: 

Баннер бьш успешно закачан и будет включен в систему 
обмена после проведения визуального контроля. 

Copyright О 1997 -1999 РХЕ Banner Network 

Интернет 

Рис. 8.46. Сообщение об успешной загрузке файла баннера в систему 

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

Просмотр статистики по баннеру 

Когда баннеры загружены и показываются в системе какое-то время, уже можно 
определить, 
насколько они эффективны. Разумеется, прежде чем можно будет реально оценить 
соотношение клики/показы или CTR, баннер должен быть показан не менее 
нескольких 
сотен раз. 

>• Выберите пункт Общая статистика из открывающегося списка и нажмите кнопку @. 

Откроется соответствующая страница системы (Рис. 8.47). 

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

Обратите внимание на пункт У вас на счету показов. Если при загрузке баннеров в 
систему 
вы установили, что демонстрация ваших баннеров должна начаться немедленно, то 
на вашем счету всегда будет 0 показов, потому что как только на страницах 
вашего сайта 
будет показано некоторое число баннеров, сразу же соответствующее коэффициенту 
обмена число ваших баннеров будет показано на чужих сайтах. Если же вы 
установили 
начало демонстрации баннеров на отдаленную дату или отключили их, то в строке У 
вас 
на счету показов будет показываться накопленное вами число баннеров. 

Теперь посмотрим статистику по отдельным баннерам. 


Создание Web-сайтов 

1вйл Прав ко В.ИД ЦзВраннов Сервис Спрпвк! 

драс |g hHp://web-linkBxchQnge.ru.8080/c9'bin/ 

D/C BANNEl 

ОБЩАЯ СТАТИСТИКА ПО АККАУНТУ АГУКАУНГ # 45477 

18 сегодня: 13 
всего: 

сегодня: 

I486 всего: 1064 

0 сегодня: 0.00 
всего: 

сегодня: 

4 общее: 0.3S 

У Бас на счету показов: О показов 
Последний раз Вы показали баннер: Tue Feb 20 10:16:47 2001 
Средний CTR. на Вашем сайте. 1.39 
Ваш сайт входит в категорию: RLE Classic 
Тип вашего аккаунта: Обычный 
При обмене используется соотношение: 3:2 (66%) 

• Copyright О1997 • 1599 PXE Earner Network 
Рис. 8.47. Общая статистика по аккаунту в системе Russian Link Exchange 

> Выберите пункт Управление показами баннеров в открывающемся списке на стра 
нице внутреннего раздела и нажмите кнопку @. Откроется соответствующая страница 

системы (Рис. 8.48, Рис. 8.49). 

[Упавноб меню 

ПЗ® 

0 УПРАВЛЕНИЕ ПОКАЗАМИ ЕАННЕРОВ АМКАУНТ И 45477 

Показать баннеры профиля: 

URL страницы: http.//www tornados, stl.ru 

Баннер прошел проверку 

Ваша собака слушается вас? 

htlj) JAvww.lofnetla» ill n 

Ш Включен П Удалить 

сегодня: 11 сегодня: 0 сегодня: 0 00% 
вчера 4 вчера: 0 вчера: 0.00% 
всего. 338 всего 0 общий; 0^00% 


ф подробим mcipofta @ 

| ,» Интернет 

Рис. 8.48. Страница для управления показами баннеров в баннерной системе 
(начало) 


Раскрутка вашего Web-сайта в Интернете 

вчера: 4 вчера, О вчера 0.00% 
сего: 338 всего: " 6 общий: QLOOK 

URL страницы, http //www.tornitdoE.stl ш 

Баннер прошел проверку 

Ваша собака слушается вас? 

http jfHwvt.tain ados, sti.ru 

В Включен D Уд агат, 

Сценарий: [не определен. 

сегодня: __ 11 сегодня: __ 0 сегодня: 0.00М. 
вчера: 5 вчера. О вчера 0 00% 
336 б 

| подробная настроим 

Изменить настройки всех баннеров. 

C'>f-yright О 1997-1959 RIJJ Banner Network 

_L 
/"we. 8.49. Страница для управления показами баннеров в баннерной системе 
(окончание) 

Хотя два приведенных в примере баннера демонстрировались не очень большое число 

раз - чуть больше трехсот каждый - уже видно, что CTR второго баннера выше, чем 

первого, хотя первый баннер и сделан с использованием элементов интерфейса и, 
казалось 
бы, должен привлекать большее число посетителей. Все же в данном случае выводы 
делать рано, потому что вполне неплохой CTR баннера - 0,3% - появился за счет 
только одного-единственного клика, что видно в столбце Количество нажатий 
статистики. 
Если же подобная разница в CTR будет присутствовать, когда каждый баннер 
будет показан не менее 1000 раз, и на них кликнут хотя бы несколько, а не один 
посетитель, 
то тогда будет иметь смысл отключить первый баннер, как неэффективный. 

Отключить баннер очень просто. 

>- Сбросьте флажок Включен, расположенный под нужным баннером. Баннер останется 

в системе, но не будет демонстрироваться, пока флажок не будет установлен вновь.
 

Таким образом можно накопить показы баннеров для более массивной рекламной 
кампании 
или перепродажи. 

Другие настройки баннерной системы 

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

> В открывающемся списке на странице выберите пункт Настройка показов баннеров 
на сайте и нажмите кнопку @. Откроется соответствующая страница системы 
(Рис. 8.50). 

15-1210 


434 Создание Web-сайтов 

файл Правке Вид Избранная Снркис Справ»i 

& Ш 


Главное меню 

О НАСТРОЙКИ ПОКАЗОВ НЛВЛШЕМСАДГЕ АККАУИГ 345477 

Е простые графические (gif/jpeg) 
Н COI формы 
В JavaScript 
EJ Plugins (Shockwave Hash) 
В Java Applets ' 


В Открывать новое окно 
© сохранить изменения __ 

П включить фильтр 
О Разрешить показ баннеров следующих аккаунтов на моем сайте 
<. Запретить показ баннеров следующих аккаунтов на моем сайте 

L _._._ j 

Введите через пробел Ю тех сайтов, для которых вы хотите 
запретить или разрешить баннерные показы. 
Полный список сайтов и их ГО представлен за? :ь 

сохранить изменения 

\Ш Интернет 

Рис. 8.50. Страница для настройки показов чужих баннеров на вашем сайте 

> Сбросьте флажки напротив типов баннеров, которые вы не хотели бы видеть на 
своем 
сайте. Например, вы можете сбросить флажки напротив всех типов, кроме Простых 
графических. Тогда баннеры, использующие технологии CGI, JavaScript, Flash 
и Java, на вашем сайте показываться не будут. 

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

вашего сайта, либо открываться в новом окне, оставляя окно со страницей вашего 
сайта неизменным. 

> Нажмите кнопку Ц возле надписи Сохранить изменения, чтобы сохранить в системе 

сделанные вами настройки. 

Вы также можете запретить показ на своем сайте баннеров вполне определенных 
ресурсов. 
Список ресурсов с их номерами можно получить, нажав на соответствующую ссылку 
в разделе Фильтр показов на приведенной странице (Рис. 8.50). Это может быть 
разумным, 
если среди сайтов, реклама которых будет размещаться на ваших страницах, 
есть сайты со сходной тематикой. Чтобы ваш пользователь не ушел к «конкуренту», 

имеет смысл запретить демонстрацию баннеров подобных сайтов у себя. 

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

>- Установите флажок Включить фильтр. 

> Нажмите кнопку @ возле надписи Сохранить изменения, чтобы сохранить в системе 

сделанные вами настройки. 


Раскрутка вашего Web-сайта в Интернете 

Статистика Web-страниц 

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

Статистика аналогична той, которую выдают своим пользователям рейтинговые 
системы 
и специальные системы учета статистики посещений. 

>• Выберите пункт Статистика Web-страниц в открывающемся списке и нажмите 
кнопку 
ф. В окно браузера загрузится соответствующая страница системы (Рис. 8.51). 

|ИТ1ГТ11ГТ1Р1ИЛИН 

Правка Пив Избранное Сервис Справка 

Гпавное меню 

© СТАТИСТИКА ПОКАЗОВ ПО СТРАНИЦАМ ДИСКАУНТЙ 4М77 

Число показов вс«го: 1086 
Число сессий всего: 475 
Число кликов всего: • 
Уникальных пользователей всего. 318 
Средняя продолжительность просмотра 7.51-90 

1019.41 

Средняя продолжительность сессии: 
Средние число страниц за сессию: 1.36 
Орцат число показов в сутки: 

W.M0 
Среднее число сессий за сутки; 

J5.83 

Среднее число пользователейъ сутки. 
Новых пользователей за вчера: 

© Посещения запоследние 30 дней, по дням недели и по времени суток 

® 10 наиболее популярных входов и выходов с сайта 

@ Статистика посещений по географии 

@ Динамика изменения численности и обновления аудитории сайта 

0 Ю наиболее популярных маршрутов по сайту 

ф 100 наиболее популярных страниц сайта 

Рис. 8.51.Статистика показов по страницам 

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

€п4-^т JV&5. Создаем гостевую книгу, форум и чат 

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

Коротко напомним о способах организации общения посетителей на сайте. 

15' 


Создание Web-сайтов 

• .Гостевая книга. Это раздел, на страницах которого посетителям 
предоставляется 
возможность оставлять записи с мнением о содержании сайта в целом и отдельных 
его статей. Во многих гостевых книгах есть возможность для автора сайта под 
каждым 
замечанием посетителя помещать свой ответ. 
• Форум. Этот раздел представляет собой расширенный вариант гостевой книги. В 
нем 
есть возможность обсуждать отдельные темы, связанные с тематикой сайта, причем 
сообщения в форуме группируются по темам обсуждения для удобства чтения. 
• Чат. Это специальный раздел сайта, предназначенный для разговоров посетителей 
в 
реальном времени. 
Организация гостевой книги, форума и чата может значительно повысить 
посещаемость 
вашего сайта. Иногда случается так, что посетители постоянно посещают 
какой-либо 
ресурс, предпочитая его сходным по тематике, только потому, что на его форуме 
проходят 
любопытные дискуссии, а в чате постоянно можно встретить интересных людей. 

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

Сложнее сделать интересным форум. Очень часто владельцам только что открывшихся 

форумов приходится самим начинать новые темы для обсуждения, которые могут быть 

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


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

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

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


Раскрутка вашего Web-сайта в Интернете

Самый простой способ открыть на своем сайте гостевую книгу, форум или чат - это 

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

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

Создаем гостевую книгу 

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

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

такие «прыжки» с сайта на сайт совсем не заметны. 

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

• Guestbook.RU (http://www.guestbook.ru) 
• Guestbook.Land.Ru (http://www.guestbook.land.ru) 
• Chat.ru (http://www.chat.ru) 
Рассмотрим создание и поддержку гостевой книги в службе Guestbook.RU. 

>• Наберите в адресной строке браузера адрес http://www.guestbook.ru. Откроется 
первая 
страница сайта Guestbook.RU. 

> Щелкните мышью на ссылке Регистрация. В окно браузера загрузится страница 
регистрации 
(Рис. 8.52). 

>• Введите в специальном поле в конце страницы имя создаваемой гостевой книги 
(Рис. 8.53). Имя должно состоять из латинских букв и цифр, будьте внимательны 
прописная 
и строчная буква считаются разными буквами. 

>- Нажмите кнопку Готово. В окно браузера загрузится страница с регистрационной 

формой (Рис. 8.54). 

>• Заполните поля регистрационной формы и нажмите кнопку Зарегистрироваться. 
В окно браузера загрузится страница с сообщением об успешной регистрации в 
системе 
и кодом для вставки на страницы (Рис. 8.55). 


Создание Web-сайтов 

']_§ Гостевые книги. Guestbook.iu. Бесплатно. - Miciosoft Interne 

Файл Правка .нд Избранное С.рвмс .правка 

Назад • © -S й «Й)|,Р Понес "^Избранно. 1$ Медиа 

Ш 

Адрес. |^ j http://wvm.guestbook ru/iegitter/:epstration.php 

Приколы ij Каталог сайтеи й Звуковые SMS 

гостевые 

о 

DATAFili-lJ ПЕТЕРКИНК.ШЕ 

КНИГИ 

НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ ихнИЧЕСКИИIUHIP ПОМОЩЬ ! СПРАВОЧНИК ВЕБМАСТЕРА 1 О 
CEPI 

Регистрация 

ТРЕБУЮТС5 

ОТЛИЧНЫЕ 4 
Guestbook предлагает вам самые лучшие гостевые книги IT СПЕЦИАЛИСТЕ 
бесплатно! Дайте возможность посетителям ваших 
страниц оставить свое мнение о вашей рабств! Получайте 
сообщения от посетителей ваших страниц, не имеющих 
электронной почты! 

94216 

Зарегистрируйтесь или почитайте про то, как 
зарегистрироваться 

Почему Вам нужна Гостевая Книга от 
Guestbook??? 

Рис. 8.52. Первая страница регистрации (начало) 

№Гостевые книги. Guestbook.iu- Бесплатна. - Miciosolt tnleinel ExpluttH 

_.вйл Правка Вид Избранное Сервис Справка 

© Назад -Q ^Jj | J3 По " Избранное Медиа 

a •• 

V ) В Перепад [ Links 

Чтобы получить Гостевую Книгу сначала ... 

v

придумайте для нее имя. 

Читать 

И 

После прочтения Правил пользоеания челками Гдстеры^ 
Книг www ouestbook tit, выберите уникальное алфавитноцифровое 
имя для своей книги. Помните, что в имени 
можно использовать только латинские буквы и цифры Это 
имя также буает вашим именем, как владельца книги. 

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

Очень важно запомнить пароль - тогда вы сможете 
изменять параметры гостевой Книги и редактировать ее. 
Т акже важно оставить правильный адрес электронной 
почты - тогда мы сможем послать вам ваш пароль в случае 
если вы его забудете. 

Итан, пора вводить имя Гостевой Книги: 

Готово || Очистить ~ ] 

Рис. 8.53. Первая страница регистрации (окончание) 


Раскрутка вашего Web-сайта в Интернете 

.айл Дравка .цп Избранное Сервис .правка 

. [g II ft) I/1"™™ ^ Избранно* ф Медиа •© | 0


"> |jE kUpMwwtH.gueilbook lu/iegnlet/iegalei php?uiei-GEOTOH Переяоя Uiks 

J ?•»!! 
гостевые


о

DATAEHQ ШГГЕРИИ 

книги 

НА ЗАГЛАВНУЮ I РЕГИСТРАЦИЯ . ТЕХНИЧЕСКИЙ ЦЕНТР | ПОМОЩЬ I СПРАВОЧНИК ВЕБМАСТЕРА 
| OCEPI 

Ваша регистрация произойдет немедленно и вам бдает дана вся 
необходимая информация после заполнения этой формы 

Мы также пошлем RAM S патронное тюы-ю, напоминающее вам ваши 

регистрационные данные и информацию о том, что и как можно делать с 
вашей гостевой книгой. 

94216 

URL (адрес) вашей сг-рашцы: 

Название вашей страницы. 

. 

/'we. 5.5^. Страница с регистрационной формой системы Guestbook.RU (начало) 

Поиск "^Иэйраиное <^> Медиа 

^ В D 

Адрес, | ^ hUp://www gueslbook.tu/legister/iegistef.php^ 

Приколе! | Каталог се. 

гостевые

О

книги 

ПЕТЕРЛИНК.ЖЕВ 

НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ ТЕХНИЧЕСКИЙ ЦЕНТР ПОМОЩЬ СПРАВОЧНИК ВЕБМАСТЕРА 

Gue*tBook.iu 

Вы зарегистрированы! 

Ниже приведен пример кода, который надо вставить в 
вашу страница, тгобы Гостевая Книга заработала. Просто 
скопируйте и вставьте его. это так просто) 

94217 

Если вы не можете скопировать и вставить, сохраните 
кед в Файл, напечатайте его или аккуратно запишите era 
Также вам сейчас выслано уведомление о регистрации 
Гостевой Книги по электронной почте. Если вы не получите 
электронного письма, это не означает ни то, что вы не 
зарегистрированы, ни то, что вам надо ждать его, чтобы 
начать пользоваться Книгой. 

Рис. 8.55. Сообщение об успешной регистрации 

> Запишите для себя, чтобы не забыть, имя вашей гостевой книги и пароль. 

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


Создание Web-сайтов 

Вставим код для обращения к гостевой книге на страницу. 

>. Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows. 


> В главном меню выберите команду Программы • Стандартные • WordPad (Programs 
• Accessories • WordPad). Откроется рабочее окно программы WordPad. 

>• Выберите команду меню Файл • Открыть (File • Open). На экране появится 
диалог 
Открыть (Open). 

> В открывающемся списке Тип файлов (File types) выберите строку Все документы 
(*.") 
(All types (*.*)). В списке файлов отобразятся файлы всех типов (Рис. 8.19). 

>• Выберите папку, в которой размещены страницы вашего сайта и откройте 
html-файл 
страницы, на которой вы хотите вставить ссылки для добавления и чтения записей 
гостевой книги, например файл index.html. 

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

> Выделите текст кода, начиная СО строки <! — Начало кода Гостевой Книги —> 
И заканчивая строкой <!-- Конец кода Гостевой Книги -->. 

>- Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору), 
чтобы скопировать выделенный фрагмент в буфер обмена. 

>• Не закрывая почтовую программу, перейдите в программу WordPad, в которой 
открыт 
html-документ для редактирования. 

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

нажать на клавишу ITab I. выбирая значок нужной программы. Другой способ 
-щелкнуть мышью на значке нужной программы на панели задач 
Windows. 

> Установите текстовый курсор на пустую строку после текста, который должен 
предшествовать 
ссылке на гостевую книгу, и вставьте скопированный ранее фрагмент кода, 
используя команду меню Правка • Вставить (Edit • Paste). Код будет вставлен в 
текст страницы (Рис. 8.56). 

> Сохраните исправленный файл Web-страницы с помощью команды меню Файл • 
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены. 


> Подключитесь к Интернету. 

>• Дважды щелкните мышью на имени Web-страницы в программе Проводник (Explorer).
 
Откроется окно браузера с отредактированной страницей (Рис. 8.57). 

> Убедитесь, что ссылки отображаются правильно, и закройте окно браузера. 


Раскрутка вашего Web-сайта в Интернете 

Ш geolon - WoidPad 

HiaJOl' 

Ф.айя Правка Дид Вставка Формат Справка 

<!— Начало кода Гостевой Книги —> 
<div style="text-align:center;"> 
<а href="http://www.guestbook.ги/?изег=0Е01Ш">0ставить 
запиеь</а> 
<а 


книгу</аХЬг> 
<а hrefe"http://www.guestbook.ru/"><img 
src="http://www.guestbook.ru/gif2/guestbook_logol.gif" 
tit.le="www.guestbook.ru - лучший сервер гостевых книг" 


alt="6aHHep" width*88 height«32 border=0x/a> 

<!— Конец кода Гостевой Книги —> 

</html>

Для :а справки нажмите <F1> | ||NUMJ 

Рис. 8.56. Открытый в программе WordPad html-файп 
со вставленным кодом ссылок на гостевую книгу 

Адрес, Uej DATrjumphWeb Deiign v3\CD\Chap034Web\gefrton.htMl 

Рис. 8.57.Web-страница соссылками на гостевую книгу 

Предоставляемый системой кодсоздает сразу три ссылки -Добавить запись, 
Читать книгу иссылку наглавную страницу сайта гостевыхкниг. 
Часто бывает нужно, чтобы на страницебыла только одна из этих ссылок. 
В этом случае удалите после вставки вредакторе ненужную часть кода. 
Код каждой ссылки начинается тегом <а bref=... > изаканчивается тегом 

</&>. Также вредакторе WordPad вы можете отредактироватьтекстсамой 
ссылки, например, не Читать книгу, аГостевая книга. 


Создание Web-сайтов 

> Загрузите отредактированную главную страницу Web-сайта на сервер, который 
предоставляет 
место для размещения вашего сайта в Интернете. 

>• Повторите операцию вставки кода для других страниц, на которых вы хотите 
видеть 
ссылки на свою гостевую книгу. 

Читаем и редактируем гостевую книгу 

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

> Подключитесь к Интернету. 

>• Откройте в браузере страницу своего сайта со вставленными ссылками на 
гостевую 
книгу. 

> Щелкните мышью на ссылке Читать книгу. Откроется страница с вашей гостевой 
книгой (Рис. 8.58). 

АДР«=: Щ hllp://w»n».gu<nlbook.iu/?utei-EEOTONtaclion-ihow Переход Unks : 

гоотввыв

книги 

ЛОПАВИГЬ ЗАПИСЬ 

g»oton 

1 . Имя:Иванов, Е-МаИ: acgp@abv.tu. Город: Москва, 
Комментарии: А где можно посмотреть прайс-лист на ваши проачкты? 

01:24, K40S20O4 

2. Имя:Борис, E-Mail: |^кЦ(Оет1.гм. Горем: Тула. 
Комментарии: Занимается ли Ваша Фирма обучением по поставляемым продуктам? 

Всего записей 2 

Страницы \ 

Q Готово 

JUUDI1 **«*• 

Рис. 8.58. Гостевая книга в системе Guestbook.RU 

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

выми. Ответим на некоторые их них. 

>• Наберите в адресной строке браузера адрес сайта гостевых книг http://www.
guestbook.ru 
В окно браузера загрузится главная страница сайта (Рис. 8.59). 


Раскрутка вашего Web-сайта в Интернете 

5Райя Правка Вид Избранное Сервис Справка 

H.,«-Q - g] gj 

У 

Mpeq W) Mlpt//«KW guetlbook.ru/ Г*| g j Переход j Links 

Приколы < Каталог сайтов 1 Звуковые SMS l{ Откро 

гостевые 

О

ОАТАЕЗШ ПЕТЕРИИНК.'Л'СО 

КНИГИ 

I НА ЭАГШШНУК} I РКИС ГРАЦИЯ ПгПШЧХКИИ UFHTf I IWMOlltb I СПРАВОЧНИК BBatMCIEPA 


Бесплатные гостевые книги от Gueilbook.ru 

Мы предлагаем вам самые лучшие гостевые книги 
бесплатно) 
Дайте возможность посетителям ваших страниц оставить 
свое мнение о вашей работе! Получайте сообщения от 
посетителей ваших страниц, не имеющих 5 лектрлнной 
почты! Интерфейс книг может быть сделан на любом из 
одиннадцати языков. 

Почему Вам нужна Гостевая Книга от GuestBook.ru? 
Потому что ее очень просто м удобно установить и для 
этого не требуется уметь программировать и не требуется 
иметь разрешение на запуск программ на сервере. Все, 
что вам надо • это вставить несколько строк в html-код 
вашей страницы. 

94217 

Для того, чтобы получить гостевую книгу для вашего сайта 

uiVcgi-bir№ 

Рис. 8.59. Главная страница сайта Guestbook.RU 

> Щелкните мышью на ссылке Технический центр, расположенной в верхней части 
страницы. В окно браузера загрузится страница настроек системы гостевых книг 
(Рис. 8.60). 

5.айл Правка Й.иа Избранное Сервис Справка 

онск '-г V Избранное 

Адрес; \Щ http://vmw.guestbook.ru/sjxteiii/ 

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

Войти под другим именем: Пароль: [ 

Если вы забыли свой пароль, но помните имя гостевой книги Пароль: 
[ 

введите его здесь и на емейл, который вы указывали при регистрации 
придет письмо с вашим паролем! 

Звйти снова 

Рис. 8.60. Страница настроек гостевой книги 

> Щелкните мышью на ссылке Отвечать на сообщения. Удалять записи. Загрузится 
страница, на которой нужно ввести имя и пароль (Рис. 8.61). 


Создание Web-сайтов 

Ааресл \ф hltp://www guestbook.ruAy stem/?action г dit_ni«*saget_ ___ 

В Приколы I Каталог с З.уко.а. SMS 

гостевые

О

DATAEH51 ПЕТЕРЛШНК.' 

книги 

НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ : ТЕХНИЧЕСКИЙ lifcHfP ПОМОЩЬ СПРАВОЧНИК UtbMACJtPA 1 
ОСЕРЕ 

Отвечать на сообщения / Удалять Г 
записи L 

В этом разделе Вы можете менять параметры своей Пожалуйста, обнос 
Гостевой Книги, узнать какие существуют 
. ОТВЕЧАТЬ НА СООБЩЕНИЯ дополнительные возможности, редактировать Книгу и 
многое другое. Для того, чтобы зайти в этот раздел, 

УДАЛЯТЬ ЗАПИСИ 

введите имя своей Книги. 
«УДАЛИТЬ КНИГУ 


Войтм под друг мм именем: 

Пароль: 

Пароль: j 

jHDL 

Рис. 8.61. Страница для ввода имени и пароля 

Введите имя (логин) и пароль и нажмите кнопку Войти. В окно браузера загрузится 

страница для редактирования гостевой книги (Рис. 8.62). 

Файл Правка .ид Избранное Сервис Справка 

О HaJa, •§• § [jjj| Q | P Поис^ <fj Избрани.. ^ Медиа 

гостевые 

О

DATALlili ПЕТ 

КНИГИ 

НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ ТИИИЧ.С«ИИ ЦЕНТР П0М01Ш ] СПРАВОЧНИК BtbMACTEPA I 

Технический центр 

Отвечать на сообщения I Удалять записи Уйти Сов 

• БАЗОКЫВ ПАРАМНРЫ 
ЗАДАТЬ НШШНИЙВИД 

ЗАБЛОКИРОВАТЬ IP 

, ОТВЕЧДТЫ1А СООЫЩНКЙ 
УДАЛЯТЬ ЗАПИСИ 


|Иванов 

1 

[eccn@ebv.ru j

Войти под ярдгим именем: 

|Москвв 

1 

Логик Г" 

|I

Пароль: | 

1 

\Щ Internet 

Рис. 8.62. Страница для редактирования гостевой книги (начало) 

> Если вы хотите удалить некоторые сообщения, то установите флажок Удалить эту 
запись, расположенный в начале соответствующего сообщения. 

>• Напишите ответы под нужными сообщениями в полях ввода Ваш Ответ (Рис. 8.63). 



Раскрутка вашего Web-сайта в Интернете 

шшя шшшшт

•н щ
\я D }авка Вия Избраиное Сервис Справка 

Назад fy | у Э Поиск -^ Избранное ^ f Медиа 

€>| В-^ • -С 

И ПвРвход 

Адрес, Щ ittp://www.oueslbook.[u/tytleiii/?ectk)n»(Kfit_net*aget 

izi

(Р-адрес: 80.95.35.131 

;: 

Текст Комментария: 
Занимается ли Ваша фирма 
продуктам? 
обучен 1ек по поставляемым 
Ваш Ответ: 
Да, конечно 
иг 
Внести Изменения | 
I 
I И |[ 9 Internet 
_|-
А 

Рис. 8.63. Страница для редактирования гостевой книги (окончание) 

> Нажмите кнопку Внести Изменения, чтобы сохранить все изменения и ответы в 
гостевой 
книге. В окно браузера загрузится страница с внесенными изменениями. 
Она не отличается от страницы, показанной на Рис. 8.62 и Рис. 8.63. 

>• Нажмите кнопку Уйти Совсем, чтобы выйти из режима редактирования гостевой 
книги. 
>- Перейдите на свою страницу (Рис. 8.57) и щелкните мышью на ссылке Читать 
книгу. 
В окно браузера загрузится отредактированная гостевая книга (Рис. 8.64). 

Файл Правка §ид Избранное Сервис Справка 

* 

©Назад -Q. Q 1 f ^ | Р Поиск ^-Избранное *$> Медиа ф 
/>дрес; j|.) hHp://www.gue*lbuoik lUi^uuM-GEOTON&action-ihow g j Перенод | 
Links " 
ТЦмгжолы 1 Каталог Сайгон : L Звуков на SMS [{ .DixpMnm 

гостевые 

КНИГИ 

gtoton 

1. Имя:Иване*, E-Mail: accn@abv,tu. Город: Москва, 
Комментарии: А гае можно посмотреть прайс-лист на Ваши продуты7 


GEOTON: Посмотреть прайс-лист на Ваши продукты можно по адресу 
geoton.naiod ru/'phce.xls 


01Н ТЗ OS 2004 

\ 2. ИмжБорнс. E-Mat bwisP^rrim.Город: Т jia. 

Коммонгарии: Занимается ли Баша фирма обучением по поставляемым проауктам? 
GEOTQN. Да. конечно 

Е 

ф internet 

V\ 

Рис. 8.64. Отредактированная гостевая книга 

Итак, гостевая книга создана, теперь создадим форум. 


Создание Web-сайтов 

Создаем форум 

Бесплатные форумы для персональных Web-сайтов предлагают следующие российские 
службы: 

• WebForum.ru (http://www.webforum.ru) 
• Форумы @mail.ru (http://talk.mail.ru) 
Создадим форум для Web-сайта с помощью службы WebForum.ru. 

• Наберите в адресной строке браузера адрес http://www.webforum.ru. В окно 
браузера 
загрузится главная страница сайта (Рис. 8.65). 
О "'"»-©- 111 Ш &|/>IW. ^Ивбранно. Щ . Д Ц 

Адрес, Щ hllp.//w«w.webfoiu».ru ] 3 ( 3 Перепад [ Links 

Тновости ! С News | Гаэегя Утро | Спорт | Погоня | ТВ | Работ* | Почта | Форум 
| Услуги | Информер 

I ULJEBFDRLMRU 

СЕРВИС -КОНФЕРЕНЦИЙ . . - •. .••:.•:. :.;:::;::;: 

НАЦИИ (ШЛЬЗОВлШЛН 

а Конференции портаяа BeoOnLine.Ru a High-Tech <t>nptp4M CNewt.Ru 

ь Форумы на АОЯИА МОТОРС ш Конференция на Utro.Flu 

в Фор^м Lenta.Ru в Автомибипи Ситроен 

Для ознакомления с платной системой кликните mi кнопке. 

] (Ьнаромкгься с Weblo«.im Plus ' бОЛЬМС I 
ДЛЯ ЯАМИИ» 
( 

И ПОСТАВЬ НА СВОЙ САЙТ! 

В.Путин 

предлагает 

изменить 

NMW.HF1.RU 

1L 

J&J Ошибка ма странице. 

Рис. 8.65. Главная страница службы WebForum.ru 

у Нажмите кнопку Регистрация, расположенную в левой части страницы. Загрузите i 

страница для выбора вида регистрации: Webforum Plus (платная версия) или 
Webforum 
Standard (тестовая версия) (Рис. 8.66). 

>• Нажмите кнопку Ознакомиться с Webforum Standard. В окно браузера загрузится 
страница с правилами регистрации в службе (Рис. 8.67). 


Раскрутка вашего Web-сайта в Интернете 

Адрес. [@hltp://nw.».web(o(u«.iii/ig1.ph(j 
РосБизнесКонсалтинг | Новости | CNews | ГАЗЯТВ Утро | Спорт | Погооа | ТВ | 
Рабата j Почта [ Форум | Услуги | Ин фермер |* 

UJEBFORUM.RU 

•СЕРВИС КОНФЕРЕНЦИЙ: 
ндами пользой:шы Щ РЕГИСТРАЦИЯ Шщ иовесш СЕШРА 

сервис п л aim» at 
конференций • Ws 
Plus. Вм "Мжсп i 

Webforu m PIU5 (платная версия) 

Кликнув па этой кнопке. Вы сможете ознакомиться с 
возможностями платной версии м подать заявку. 

по «ашмчу 

s ».T.p)iittSe ль 
поп ь зов ore л t> с к л й 

Ж-ук^би.»» книга 

интерфейс 

Standar t [тестовая версия) 

• больше вюэможмосп 
Ю КЖЛАНА 

Кликнув по этой кнопке. Вы сможете зарегистрироваться м ) 
создать тестовую (бесплатную) конференцию, чтобы 
ознакомиться с возможностями системы WebFofum Plm. 

| В.Путин Г LBN.Ri) ~| 

предлагает 
изменить . 
систему 


! власти 

FMC. S.66. Страница для выбора вида регистрации 

с: [ ф hHp://m»»Kcb[oium ru/if о рЬ(1? 

РосБиэиесКоисоттчнг ! Новости | CNew» | Газета Vrpo [ Спорт | Погода | ТВ | 
Работа I Почта | 4>орум | Уг.пуги | Информер 

mEBFDRUM.RU 

СЕРВИС КОНФЕРЕНЦИЙ 

ПАНИН П04Ы0КАШ1И В НОВОСТИ COKFA 

Ot.Q9.t991 3*nyiu«M 
Перед процедурой регистрации конференции Weblofига сервис ппагтных . : 
Standaid Вам необкояимо ознакомиться с дсловиямн и конфврвниий • W*b Forum 
правилами предоставления сервиса: Plus, вы MoiMtrr* 11ил««тъ 

комфмрвмдом» -Atwt 

иесконько имы с 
и проверенней 

Прим «piii и Во время регистрации Вы обязуетесь указать достоверную 

Но «ости 

информацию, заполняя информационные поля 
а Адмнннстрация гарантирует, что указанная Вами 
информация не бчлег передана 
третьим лицам, а также не будет использована для 
рассылки информации, 
не свяэаноя с функционированием сервиса 
Ш На Web-конференции может быть размещена гяобая 
информация. 
отвечающая понятиям общественной морали. Вы 
обязуетесь не использовать 
. Web-конференции, а также информации, размещенною на 

В.Путин 

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


изменить Федераци и 
международному законодательству 


систему 

в В случае невыполнения правил. Администрация вправе 

власти 

...... 

щ Выпоянено, но с ошибками на странице. 

Рис. 8.67. Страница с правилами регистрации в службе WebForum.ru 

> Прочтите условия и правила предоставления сервиса и нажмите кнопку Согласен 
с правилами, расположенную в нижней части страницы. В окно браузера загрузится 
страница регистрации (Рис. 8.68). 


Создание Web-сайтов 

Адрес. |^http7/www.web(o!um.ru/reg1.php? 

Ill ШЛ Пе 

НАШ | Й010СТИ СЕНЕМ 

0e.09.29Ul Запущен 
Webfoium Standard является основной моделью для построения 
Регистрация всех форумов rfdWebfoium.ru. Главные преимущества конференций - 
WebFor 

Plus, Вы можете заказ 

Webfoium Standard следующие: 

Каталог 

ко нф ер «ниим>. или 
Использование шаблонов для настройки дизайна 

нес кальке и мы совам 
ее АЛЯ вас! 

Настройка отдельных тех. параметров конференции 

- дизайн - по вашему 
Размещение конференции в каталоге Webfoium 

Стабильная и быстрая работа 

. - удобный, вариабвл» 

Жалобная книга Форумы Webfoium Standaid являются бесплатными, но слева в 

конференции размещается баннер 12GxBG0. 

Ш РЕКЛАМА ' -' 

Регистраци: нференции Webfoium Standaid 

t в латинском регистре без специальных 
символов! 

В.Путин 

предлагает Пароль {от Б до 12 символов): ! 
изменить 
систему 


Подтвердите пароль: 

власти 

(необходим в случае утери 
пароля): 

[не жмите кнопку дважды) 

^ Internet 

Рис. S.68. Страница регистрации в системе WebForum.ru 

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

Файл Правка Вид Избранное Сервис Справка 

. 0. Д й Ш О Ш, 

НАШИМ ПОШОЫШЛИ 

Гпаяная 06.09.2*01 Запушен 
Webfoium Slandaid является основной моделью для гюстроенм: сиряис ппаггмых 
всех Форумов на Webfoium.ш. Главные преимущества мин^>ер«нций • WebFo 

Каталог 

Webfoium Slandaid следующие: Plu». Вы мажи« хака 

конференцию или 
Примеры Использование шаблонов для настройки дизайна 
Настройка отдельных тех. параметров конференции 

Новости 

Размещение конференции в каталоге Webfoiuni 

Стабильная и быстрая работа 

Форумы Webluttim Standaid являются бесплатными, но слепа • 

интерфейс 

конференции размешается баннер 120x600. - багшша ВОЗА 
дня адмииистратира 
Регистрация конференции Webfoium Slandaid (моя^) агора) 

% PC K.1AH А

Вы зарегистрированы в системе йеб'Рирчм! 

вам необходимо запомнить Ваш логин и пароль. 
В.Путин Ваш пользовательский N (Loginj: ШШШ 
предлагает Ваш пароль: И Н 
изменить Ваш Е-паЯ: | 


систему 

Сообщение с логином/паролем отправлено 

на Ваш Email. 
Воспользуйтесь входом для зарегистрированных 

власти 

в стране 

пользователей системы 
для открытия нового Форума и редактирования его 
параметров. 


Рис. 8.69. Страница с подтверждением регистрации в системе WebForum.ru 


Раскрутка вашего Web-сайта в Интернете 

> Щелкните мышью на ссылке Воспользуйтесь входом для зарегистрированных 
пользователей системы. На экране появится диалог Подключение к 
www.webforum.ru (Рис. 8.70). 

шт 
шт 
• ?|хП 
MediaLand 

Подьэоеатель: 

И

in 

Пароль: 

с 

П Сохранить пароль 

1 ок || Отмена 1 

Рис. 8.70. Диалог Подключение к www.webforum.ru 

> Введите ваш пользовательский номер и пароль, которые вы получили при 
регистрации, 
и нажмите кнопку ОК. В окно браузера загрузится страница для добавления форума 
(Рис. 8.71). 

WebBoaid.ru - Microsoft Internet Explore! 

Bsi€3 

Ф^айя Дравка ЕЗид Избранное Сервис .правка 

Из6Р аи

Q Назад Поиск »«> 

Адрес, Щ± hltp:.'/www.webfoium iu/gbu/inp php |^j H Переход Link 

mEBFDRUM.RU 

ЬКСМЛАТИЫЕ 

Логин: 34107 

Добавить новый Фор^м 

©Copyright 2000 Mediatand 
И нформация inlog'webboard.ru 
Служба технической поддержки 
suooort@webboafd.tu 


Рис. 8.71. Страница для добавления форума 

> Нажмите кнопку Добавить новый форум. Загрузится страница с сообщением об 
успешном создании форума (Рис. 8.72). 

На этом создание форума можно закончить. Форум будет работать и будет доступен 
по 
адресу, указанному в поле Адрес форума (Рис. 8.72). Тем не менее, можно 
потратить 
некоторое время на дополнительные настройки форума, чтобы изменить фон его 
страниц, 
названия, режимы работы, вставить логотип своего Web-сайта и так далее. Все эти 

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


Создание Web-сайтов 

.айл Правка .ид Избранное Сервис Справка 

gj 
gj 
Поиск •&!•,«»«. <g> М«и. 

•И. 
Адрес: j^ j http://www.webfo<um.ru/gbLj/mp.php 

3 В 

ШЕЕПИМШ 

Логин: 3-4107 

Форум добавлен! " • 
Рекомендуем перейти о раздел редактирования этого форума с помощью 
соответствующей кнопки "Внешний виц Форума". 
По умолчанию g Форума установлен "стандартый" дизайн. 


1. Без названия 
Удалить этот Форум 
(открывается в новом окне) 


Дизайн. "Стандартный" 

Время создания: 14-03-04 02:56 

1 • Состояние: Акгивирован 

Адрес Форума: toto://webfMiim.land.m/wb.Dhp?boarth35817 
Редактировать внешний вщ Форума 

Удалить избранные сообщения 

New! При выборе какого-либо Форума его параметры копируются во вновь 
создаваемый 

j Стандартные параметры f.j: Добавить новый Форчм 

Выю.пнено. но с ошибками на странице, 

__ОЯ 

Рис. 8.72. Страница с сообщением об успешном создании форума 

Проверим, как выглядит только что созданный форум. 

> Щелкните мышью на ссылке с адресом форума, который указан на странице в 
поле Адрес форума. В окно браузера загрузится страница с пока пустым форумом 
(Рис. 8.73). 

Файл Правка Вия Избранное Сервис Справка 

1 
1 
^И.аранное «g* На.иа 

Адрес: В ПLinks :

И«Р°»°« 

РБК g Путин 
i предлагает изменить 

власти в 

0ПОЧТа.1Ги Горячая почта 

Бесплатные Веб-конференции 

Рис. 8.73. Страница с только что созданным форумом 


Раскрутка вашего Web-сайта в Интернете 

Через некоторое время форум будет иметь вид, подобный виду на Рис. 8.74. 

.1 JMII ПН USo.il I) Miciosoll 
Interne! Luploiei наа 
Файл Древка Вид Избранное Сервис .праока 
О Hd о»а а 
Адрес; . ://«»« иеЫогшп ш/wb php?boaid-3581 7lf.=0luid-U H Перчсод | 

РБК: В.Пцтин 

Love is... 

систенц впасти в 
стране 

Сознать новчю теми | 

Q ПРМРСТ ИВАНОВ - 14-09-2004 03:24 

* Re: Привет Иванов 14-09-2004 03:25 
СраД-flTh НР ВЧ Ю темч 1 

Бесплатные Веб конференции WcbFofuw.ru 

Рис. 8.74.Работающий форум 

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

Администрируем форум 

Чтобы поддерживать форум в рабочем состоянии, необходимо время от времени 
удалять 
устаревшие и случайные сообщения. 

> Введите в адресной строке браузера адрес http://www.webboard.ru. Откроется 
главная 
страница сайта (Рис. 8.65). 

> Щелкните мышью на ссылке Вход для зарегистрированных пользователей. 
На экране появится диалог для ввода пароля (Рис. 8.70). 

> Введите имя и пароль и нажмите кнопку ОК. Загрузится страница с настройками 
форума 
(Рис. 8.75). 

у Нажмите кнопку Удалить избранные сообщения. Откроется страница для удаления 
сообщений (Рис. 8.76). 

>• Отметьте флажками сообщения, которые необходимо удалить, и нажмите кнопку 
Удалить отмеченные сообщения. Откроется страница с уведомлением об удалении 
и оставшимися сообщениями (Рис. 8.77). 


Создание Web-сайтов 

•j Wtibboaid ш - Microsoft Internet Explwer 
Правка Вид Избранное Сервис Справка 
!—5 1 ] » 

- j*j [g| <& | р Пииск •./Избранное <.> Медиа 
; ||3 hltp://www.webtoiuin.iu/gbu/inp.php fcj В Перста» [ Links 
HJEBFDRUM.RIJ 

1. Без названия 
Удалить этот Форум 

(открывается в новом окне] 
Время создания: 14-09-04 02:56 Дизайн: "Стандартный1 
Состояние: Активирован 


Адрес форума: hUnt/z'webtoujm.laml iuywb.php?boaid"35817 i 
I Редактировать внешний вид Форума I 

Удалить избранные сообщения 

New! При выборе какого-либо Форума его параметры копируются во вновь 
создаваемый. 

| Стандартные параметры ^f[ Добавить недый форум J • • 

JEJ 

] Вьитолнено. мо с ошибками иа странице. [ Q Inlfflnel 

Рис. 8.75. Страница с настройками форума 

А * WebBoard.ru - Miciosoft Internet Exptorei 
Правка Вид Избранное Сервис .Справка 


РПои « ^Избранное ^ Медиа 

еч [|^ http: -'/www weblorum.iu/gbu/indexied.php Переход Links 

mEBFDRUM.RU 

t КОНФЕРЕНЦИИ 

Ф 

| Удаление сообщений из форума: 

Обратно без изменений 

'• Удалить отмеченные сообщения I 

Внимание! При удалении главной темы- удаляется все дерево сообщений. 

О Вывод по дате: темы / ответа / списком в обо.порядке (New! Testing) 

О Вывод по дате: темы 

О П Привет Иванов -14-09-2004 03:24 IP: 80.95.41.91 
fl GRe: Помоет Иванов -14-09-2004 03:25 IP: 80.85.41.91 

Обратно без изменений 

J ИГ 

} Выполнено, но с ошибками на странице. 

Рис. 8.76. Страница дляудаления сообщений форума 


Раскрутка вашего Web-сайта в Интернете 

д WebBoaid.iu * Microsoft Internet Explorer 
Файл Правка Вид Избранное Сервис Справка 
И?Из6Рани°е


Назад «•© ' {j§ §| (Ц)\РПтк* Ц 1 Медиа 
Адрес: |,Щ) htl|i /VMIVW webfoium !u/gbu,'indexred.php?oltM)^ _F| Переход Links 


UJEBFQRIMRU ' miot» I «rmwuu»! _«Р»*1|'Л_1 вам» 
feitfUMTYMt кен»1№ИЦИ| 

I Удаление сообщений из форума: 
Обратно без изменений 


Сообщения удалены! 
f Удалить отмеченные сообщения ~J 

Внмманме! При удалении главной темы- удаляется все дерево сообщений. 

(3 Вывод по дате: тем.ы/ ответа / списком в обр.порядке (New! Testing) 
G Вывод по дате: темы 

Q Г Привет Иванов • 14-09-2004 03:24 IP: 80.35.41.91 

Обратно без изменений 

ГОТОБО 

Рис. 8.77.Страница с уведомлением об удалении сообщений форума 

Как вы могли убедиться, администрирование в системе WebForum.ru осуществлять 
очень просто, важно не забывать делать это регулярно. 

Создаем чат 

Вот адреса некоторых российских служб, которые предлагают услуги бесплатных 
чатов 
для персональных Web-сайтов: 

• CHAT.ru (http://www.chat.ru) 
• chats.RU (http://www.chats.ru) 
• Япс1ех Народ (http://www.narod.ru) 
Создадим чат для собственного сайта в системе ilndex Народ. О том, как 
зарегистрироваться 
в системе .Hndex Народ, было подробно рассказано в опыте «Создание адреса 
вашего 
сайта в Интернете» главы «Размещение страниц в Интернете». 

> Наберите в адресной строке браузера адрес http://www.narod.ru. Загрузится 
главная 
страница сайта Япс!ех Народ (Рис. 8.78). 

>- Введите полученные при регистрации логин и пароль в поля ввода в правой 
верхней 
части страницы и нажмите кнопку Войти. Вы попадете в раздел Мастерская сайта 
Япс1ех Народ (Рис. 8.79). 


Создание Web-сайтов 

Ф_айл Правке Вия Игранное Сдрвнс Справка 

дАРес; | & hKp://nar0d.yandex.ru/ 

Н а экране поямиетсл дедушке, 
во рту у него 3 зуба. За кадрслс 
чЛ"ри». Появляется дввочха. "•-• 
За кадром: «Двенадцать». 
Появляется хоккеист. 3 * кедром 
в Двадцать одни». Появляется' 
девушка. Закшгром: «Тридцать 
два. 32 зубе — зто норма. . 

Рис. 8.78. Главная страница сайтаHndex Народ 

• 

I Персам Link.' 

ГТ7 

Теперь я знаю, о чем у тжк • \ 

Щ 
Шж» Шшд 

Мастерская 1>»ект: 

тений • 

• Главная 
^ ф^йдамииНТМ^редактор # 

•Про МЕНЯ 
Доступ к фа^ампо FTP 
Индексирование в поисковых систем» 
Отддоченив б&ннсса 

•Для фанатое и 
поклонников 
• Романтика Хостинг AQAVA m 100M6 отЦ/мес'ЗООМб от^7.3/мес Домвн ш com naloty 
Щ ЕЕСПЛАТНО1 НвогриоРШтоД трафик Поддержка COL PHP. MySQL itk . 
ЮРЛМАР/ЗМТР, в«6-по^та. Помошь в первносс сайта Специальное 
газатаожйшм апяподьговмад^йHarod.ru •'"",-. 

Рмс. 8.79. Раздел Мастерская сайта Япйех Народ 

> Прокрутите страницу и в группе ссылок Общение щелкните мышью на ссылке 
Персональный чат. Загрузится страница для создания чата (Рис. 8.80). 


Раскрутка вашего Web-сайта в Интернете 

I& 

ch<[.l]ei 91341471 «01 ЕЭЭ5в j 3 О г'=Ре»«» !••*« 

Первая российская 
онлайновая ролевая игра 

Почта Шшш Ълтд 
стерская / Персональный чат 
Чтобы посетители вашей странички могли посетить ваш чат, необходимо вставить в 
одну из ваших страниц 
ссылку на адрес: Uttp:','naiodyjmdex.m'chab'cLat_enttr.xlitin]?mychat_id= 
19483902 

Название чата [ 

Пароль (необязательно):._ 

Подтверждение пароля Г" 
О Отправлять e-mail при активизации чата 
; Создать чат | 
Дизайн 

чг 

Е 

Рис. 8.80. Страница для создания чата на сайте Hndex Народ 

> Заполните поле Название чата, установите флажок Отправлять e-mail при 
активизации 
чата и нажмите кнопку Создать чат. В окно браузера загрузится страница 
с адресом созданного чата (Рис. 8.81). 

В Г| 

^gj^^

Полпред Дмитрий Козак возглавит 
комитет для помощи Беслану 

Чаш 
Мастерская / Персональный чат Првект- Ge>i»n3jiarpdj'u 
Изменения сохранены 

Чтобы посетители вашей странички могли посетить ваш чат, необходимо вставить в 
одну из ваших страниц 

ссылку на адрес: littp://naiod yandex.iWfhat'chatwentei-.
xlitml?myrhat_id=-)9483902 

Войти в чат (с возможностью администрирования) 

Название чата: [tornados 
Пароль (необязательно): | ' 

Подтверждение пароля: | ^ 
Отправлять e-mail при активизации чата 

Сохранить изменения 

J 

Дизайн 

6Г • 

Рис. 8.81. Страница с адресом созданного чата 


Создание Web-сайтов 

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

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

>• Запишите для себя пароль и адрес вашего чата, чтобы не забыть их. 
Теперь зайдем на созданный чат. 

• Щелкните мышью на ссылке Войти в чат (с возможностью администрирования) 
или наберите в адресной строке браузера адрес вашего чата. Откроется страница, 
на 
которой можно произвести настройки чата (Рис. 8.82). 
QH— . | 0. Ц И 

Jj-j g ] Переход | Links 

^ 


Вход в чат 

Участники 

Выберите; 

себе имя 
Назван ие | 


tornados (персональный) 

чата1 
Цвет 


обновления' b -J 
Количество 
выводимых|20Д 
строк 
В Использовать JavaScript 


Г" Войти в чат 1 

_Е 

Рис. 8.82. Страница для настройки чата 

> В поле Выберите себе имя введите имя, под которым вы хотите войти в чат. 
Это может быть любой псевдоним. 
> Измените, при необходимости, настройки чата и нажмите кнопку Войти в чат, 
чтобы 

войти непосредственно в чат. Загрузится страница с вашим чатом (Рис. 8.83). 
Теперь, когда чатом можно пользоваться, необходимо на главную страницу вашего 
Web-сайта вставить ссылку на адрес, присвоенный вашему чату при создании. 
Как сделать ссылку с кнопки или текста было рассказано в главе о создании 
Webстраниц 
данной книги. 

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

Для того, чтобы удалить из чата нежелательных собеседников, нужно установить 
флажок 
рядом с его именем и нажать кнопку Удалить (Рис. 8.83). 


Раскрутка вашего Web-сайта в Интернете 

'ЭЧат: tornados - Miciomlt Internet Exploiei H-JQ 
Файл Правка Вид Избранное Сервис Справка 

т

Q Назад . Q » jg g Избранное ф Медиа 

Адрес; ||jjj Mlp://naiodjande«.
iu/chat/chat«htiiil?meiid-n793629198a250452S6tchati[.f Q Переход Links 

Участники: • 

OPV 

[Удалить I 
j Штраф I 

Hndex 

представляют: 

[ Отправить |[ Обновить || Настройки | Выйти ] 

E 

Bi Готово 

Рис. 8.83. Рабочее окно чата на сайтеMndex Народ 

Удаление из чата - это, конечно, крайняя мера. Перед этим нарушающего правила 
пользователя 
можно предупредить, «выписав» ему штраф. Штраф заключается в том, что 
вход в чат для нарушителя будет закрыт на три дня. При отметке пользователя 
флажком 
и нажатии кнопки Штраф, он получит уведомление о штрафе (Рис. 8.84). 

Файл Дравка Вид Избранное Сервис Справка 

Q И—• Q • S SI «ft |/W О 

Адрес; Щ hHp://naiodyandeii:iu/chat/eiror.iiht»l?ShHaf=Uchalid-320fi24 

Бас оштрафовал». 

Вы оштрафованы администратором чата. До 17.09.2004 23:38 вход в чат для вас 
будет закрыт. 

В каждом чате установлены свои правила, грубое или систематическое нарушение 
которых приводит к 
штрафу. Ознакомьтесь, например, с правилами чата «Давай познакомимся» (эти 
правила также 
рекомендуются для всех чатов на Narod.ru). 

Б чате запрещается: 

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


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

Выйти 

Рис. 8.84. Уведомление о штрафе 


Создание Web-сайтов 

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

Как уже говорилось, в первые дни существования чата очень важно уделять ему 
повышенное 
внимание. Начать лучше всего с того, что указать на вашем Web-сайте и в 
почтовой 
рассылке новостей сайта, что открыт чат, и сообщить его адрес. Время для 
подобной 
рассылки лучше всего выбрать до начала пика посещений. Определить такое время 
можно, воспользовавшись статистикой, которую предоставляют вам рейтинговые 
службы 
и службы статистики. Как зарегистрироваться в рейтинговой службе и получать 
статистику 
посещений сайта, было рассказано в разделах данной главы о рейтингах и анализе 
статистики. Для большинства сайтов пик посещений приходится на время с 10 до 
17 часов по московскому времени, поэтому если ваш Web-сайт относится к этому 
большинству, 
то рассылку с объявлением об открытии чата лучше всего сделать утром в 
будний день. 

Большой процент подписчиков новостей вашего Web-сайта после получения 
объявления 

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

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


ность поддерживать разговор и чтобы посетители не застали бы чат пустым. От 
того 

насколько понравится ваш чат при первом посещении, во многом зависит то, будет 
т 

он посещаемым и будет ли способствовать раскрутке вашего Web-сайта. 

Wiuvvm JV&6. Делаем сайт популярным 

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

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

Приведем несколько советов, как сделать сайт более популярным. 

>/ Старайтесь подбирать материалы для сайта с учетом вашего личного взгляда на 
тему. 
Можно к каждому материалу добавлять собственные комментарии, особенно если ш 
, не совсем согласны с автором. 

• Добавляйте новые материалы на сайт. Старайтесь делать это регулярно, не реже 
одного 
раза в месяц. Размешайте информацию об обновлениях либо в специальном разделе 
новостей вашего Web-сайта, либо на главной странице. 
• Предложите вашим посетителям подписаться на рассылку новостей вашего сайта. 
С помощью рассылок можно очень эффективно поддерживать интерес к своему 
Webсайту. 
В регулярных рассылках сообщайте о новостях сайта, о появлении новых материалов,
 
поздравляйте ваших подписчиков с праздниками. Следует помнить, что с 
адресами подписчиков следует обращаться очень осторожно и никогда не отправлят 
ь 
письма по списку, когда каждый подписчик -сможет увидеть адреса других. Самый 
простой способ для организации рассылки - сформировать в почтовой программе 
специальный список рассылки и указывать имя списка в поле Скрытая копия бланка 

Раскрутка вашего Web-сайта в Интернете

письма. Существуют также программы для автоматизации рассылки. Не забывайте 
вовремя удалять из списка рассылки посетителей, которые прислали вам запрос на 
прекращение подписки. 

• Если ваш сайт - тематический, то активно участвуйте в Интернет-форумах и 
почтовых 
конференциях, соответствующих тематике вашего сайта. Если вы зарекомендуете 
себя интересным собеседником и знатоком какой-то темы, то и к вашему Webсайту 
будет серьезное отношение. 
• При написании писем в тематические форумы и почтовые конференции, а также 
других 
писем, в конце письма добавляйте адрес вашего Web-сайта, там где это уместно.' 
• Не забывайте отвечать на письма, приходящие от посетителей вашего Web-сайта, 
даже если они содержат критику. Часто бывает так, что критики впоследствии 
становятся 
активными помощниками владельца Web-сайта. Если кто-то написал вам критические 
замечания, то скорее всего, это означает, что ваш сайт такому посетителю 
небезразличен, и он хочет, чтобы сайт стал лучше. 
• Разместите на сайте раздел с информацией о себе. Особенно это важно, если ваш 

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

В заключение отметим, что на прилагаемом к книге компакт-диске находятся 
программы, 
помогающие раскрутить сайт. Эти программы записаны в папке Soft\Raskrutka, а их 

краткое описание находится в файле Readme.htm. 


Приложение 1. 
Содержание компакт-лиска 

№ Название папки или файла Название Назначение Статус 
программы 
1 Photos Папка с фотографиями, которые используются в главе 4 
2 Soft\AdobePhotoshopCS.zip Adobe Photoshop CS Редактор растровой графики 
Пробная версия 
Adobe ImageReady CS Программа подготовки графики для Web 
3 Soft\AdobePhotoshopCS2.zip Adobe Photoshop CS2 Редактор растровой графики 
Пробная версия 
Adobe ImageReady CS2 Программа подготовки графики для Web 
4 Soft\Browsers\Firefox Firefox Браузер Бесплатно 
5 Soft\Browsers\Netscape Netscape Браузер Бесплатно 
6 Soft\Browsers\Opera Opera Браузер Пробная версия 
7 Soft\FTP\cuteftp.exe CuteFTP Home Программа для работы с FTP-серверами 
Пробная версия 
8 Soft\FTPVcuteftppro.exe CuteFTP Professional Программа для работы с 
FTP-серверами Пробная версия 
9 Soft\Raskrutka\AddWeb AddWeb 6 Professional Программа для оптимизации и 
регистрации сайта, среПробная 
версия 
ди которых следует выделить модули отслеживания 
рейтинга по ключевым словам и создание doorwayстраниц 
10 Soft\Raskrutka\NetPromoter Domain Name Checker Русифицированный пакет 
программ и сервисов для Пробная версия 
Link Utility 
D age Promoter 6 
Robots.txt Editor 
поисковой оптимизации сайта, позволяющий провести 
заскрутку Web-сайта от начала и до конца 
TagPromoter 


№ Название папки или файла 

11 Soft\Raskrutka\SearchEngine 
Commando 
12 Soft\Raskrutka\SubmitWolf6 

13 Soft\Raskrutka\ 
WebPosition 
Gold 

14 Web\ChapO1\Web 

15 Web\ChapO3\Web 

16 Web\ChapO4\Web 
17 Web\ChapO6\Web 
18 Acrobat 

Название 

программы 

Search Engine Commando 
SubmitWolf PRO 6 
WebPosition GOLD 2 

AdbeRdr60_enu_full.exe 

Назначение 

Программа, позволяющая, помимо регистрации, отслеживать 
статус доменного имени 

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

Самая «брендовая» в мире программа по оптимизации 
и автоматической регистрации Web-сайтов 

Папка с файлами сайтов, которые получаются после 
выполнения опытов главы 1 

Папка с файлами сайтов, которые получаются после 
выполнения опытов главы 3 

Папка с файлами сайтов, которые получаются после 
выполнения опытов главы 4 

Папка с файлами сайтов, которые получаются после 
выполнения опытов главы 6 

Программа для чтения файлов формата PDF 

Статус 

Пробная версия 
Пробная версия 
Пробная версия 

Бесплатно 


НАШИ КНИГИ МОЖНО ПРИОБРЕСТИ 


в Москве 

• «Молодая гвардия» 
• «Библио-Глобус» 
• «Московский дом книги» 
• «Торговый дом Москва» 
• МКТП «Мир» на Соколе 
• Магазин «Ладожский» 
• Магазин «Новый» 
• «Дом книги в Медведково» 
• «Дом технической книги» 
• «Дом книги в Сокольниках» 
• «Музыкальный парк» 
• Магазин «Русский Путь» • 
Сеть магазинов «Новый книжный» 
в Санкт-Петербурге 

• «Дом книги» 
• «Новая техническая книга» 
• Книжный клуб 
в ДК им.Крупской 
Б. Полянка ул., д. 28. М «Полянка» 
Мясницкая ул., д. 6. М «Лубянка» 
Новый Арбат, д. 8 
Тверская ул., д. 8. М «Тверская» 
Ленинградский пр-т, д. 78. М «Сокол» 
Ладожская ул., д. 8. М «Бауманская» 

шоссе Энтузиастов, д. 24/43. 
М «Авиамоторная» 

Заревый пр-д, д. 12. М «Медведково» 
Ленинский пр-т, д. 40. 

М «Ленинский проспект» 

Русаковская ул., д. 27. М «Сокольники» 
Новочеркасский б-р, д. 41, к. 1. М «Марьино» 
Нижняя Радищевская ул., д. 2. 

М «Таганская» 

Невский пр-т, д. 62 

Измайловский пр-т, д. 29 

Пр-т Обуховской обороны, д. 105 

в Архангельске • Магазин «АВФ-книга» Пл. Ленина, д. 3 
в Белгороде • Магазин «Океан» Костюкова ул., д. 3 
в Екатеринбурге • «Дом книги» Валекаул., д. 12 

• Книжный магазин №14 Челюскинцев ул., д. 23 
в Волгограде • Магазин «Современник» Пр-т Ленина, д. 2