close

Вход

Забыли?

вход по аккаунту

?

В Н Печников Создание Web сайтов без посторонней помощи

код для вставкиСкачать
Книга о создании сайтов
Серия «ТЕХНИЧЕСКИЙ БЕСТСЕЛЛЕР»
Пол редакцией В. Н. Печникова
Создание Web-сайтов
без посторонней помощи
«ТЕХНИЧЕСКИЙ БЕСТСЕЛЛЕР»
Москва
УДК 004.738.52(075.4)
ББК 32.973.202я78-1
С54
С54 Создание Web-сайтов без посторонней помощи / под ред. В. Н. Печникова. —
М.: Технический бестселлер, 2006. — 464 с.: ил. + [1] CD. —
(Серия «Технический бестселлер»). — ISBN 5-89392-137-2.
I. Печников, В. П., ред.
Агентство CIP РГБ -
Книга является настоящим техническим бестселлером, выдержавшим несколько
переизданий!
Прочитав книгу, вы научитесь создавать собственные «живые» Web-страницы и
Web-сайты. Большой охват тем и пошаговые инструкции предоставляют возможность
сразу же приступить к работе с самыми популярными программами подготовки графики
и анимации для Web-страниц и создания самих Web-страниц, объединенных общей ло-
гической структурой в Web-сайты.
В книге подробно рассматриваются способы бесплатного размещения сайтов и страниц
непосредственно в сети Интернет. А также способы, которые позволят сделать ваш сайт
популярным и посещаемым. Обучение строится на конкретных примерах, записанных на
компакт-диск, прилагаемый к книге.
В серию «Технический бестселлер» включены только те книги, которые неодно-
кратно переиздавались и продолжают издаваться в России и за рубежом, получили
положительные отзывы большого количества читателей, и качество содержания
которых не вызывает сомнений.
Посетите наш Интернет-магазин
«Три ступеньки®»: WWW.3st.ru
E-mail: post@triumph.ru
Настоящее издание основано на тексте книги «Создание Web-страниц и Web-сайтов. Самоучитель».
Текст книги издается по договору с 000 «Издательство Триумф»
ISBN 5-89392-137-2 © Обложка, серия, оформление «Технический бестселлер», 2006
© 0 0 0 «Издательство Триумф», 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-страницы 9
Опыт №2. Создаем первую Web-страницу 13
Опыт №3. Задаем стили текста 16
Опыт №4. Вставляем рисунок 24
Опыт №5. Создаем список 26
Опыт №6. Создаем форму 29
Опыт №7. Вставляем гипертекстовые ссылки 32
Опыт №8. Создаем таблицу 37
Опыт №9. Создаем страницу с фреймами 42
ГЛАВА 2. Размещение страниц в Интернете 47
Опыт №1. Создание адреса вашего сайта в Интернете ...49
Опыт №2. Размещение Web-страниц с помощью менеджера файлов
бесплатной службы 53
Опыт №3. Размещение Web-страниц с помощью Netscape Composer 56
Опыт №4. Размещение Web-страниц по FTP-протоколу 60
Опыт №5. Просмотр своих страниц в Интернете ..67
ГЛАВА 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. Начинаем изготовление баннера 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
i
Опыт №2. Создаем макет Web-сайта 264
Опыт №3. Создаем текст и списки. Бегущая строка •. 275
Создание Web-сайтов
Опыт №4. Добавляем страницы в макет сайта.
Структура навигации и общие границы 287
Опыт №5. Применяем тему для оформления страниц 295
Опыт №6. Создаем таблицу 302
Опыт №7. Вставляем рисунки и фото 307
Опыт №8. Вставляем ссылки 320
Опыт №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 PHI 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 (Рис. Y.I).
Адрес! | jjg| http:tfwww.3st.ruj
;V t | Q Переход : Links
ПОМОЩЬ
КНИГА ЖАЛ06 (gjj
ВОПРОСЫ И ОТВЕТЫ Ср]
ВАШ ЗАКАЗ
ПРАЙС ЛИСТ (ZIP)
ПОДПИСКА
ЩЕЛКНИ ЗДЕСЬ чтобы' купить книги
т розницу ПО UEHE НИЖЕ ОПТОВОЙ!
КНИГИ от ИЗДАТЕЛЕЙ I
Телефон для оптовых покупателей (09S) 720-07-65
Выбрано книг : Q H Q ~Г" " )вВЭЕП1
Ещё книги ...
[Самоучитель работы на компьютере
Автор(ы): А. Ю. Гаевский
Бестселлер • в книге изложены основы работы на
персональном компьютере. Подробно и доступно описана
«линейка» операционных систем Windows 95/98/ME/2000,
подробнее ...
Цена 157Р. | 544 стр. | обложка
94ц.
Интернет с нуля! Книга + Видеокурс
М Д
Рис. 1.1. Главная страница сайта www.3st.ru
> Прервите связь с провайдером.
Когда вы загружаете из WWW любой документ, то его текст в окне вашего браузера ото-
бражается в хорошо отформатированном, удобном для просмотра виде. Это значит, что
Web-страницы представляют собой не простой текст, а содержат также некоторую вспо-
могательную информацию для управления представлением документа в окне вашего
браузера. Поскольку при создании документа не известно, на компьютере какого типа
пользователь будет его просматривать, то Web-страницы не могут готовиться и хранить-
ся в формате, разработанном для конкретной компьютерной платформы, например, в
формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий на
компьютере любого типа, видел документ, отформатированный надлежащим образом,
используется специально разработанный для этого язык HTML. Что же представляет
собой язык HTML?
> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид •
Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом
этой страницы на языке HTML (Рис. 1.2).
10 Создание Web-сайтов
F,WHW.3stIH-Блокнот НЭЕЗ!
Файл Цравка Формат Дид Справка
!— obsolete —>
!— # ! Include Pi l e - "./ADO.inc.asp" —>
scri pt src-"scr1pt.j s"x/scr1pt >
DOCTYPE HTML PUBLIC "-//V3C//DTD HTML 4.01 Transi ti onal//EN">
<html><!— instanceBegin template-"Templates/template3st.dwt" codeOuts1deHTMLlsLocked-"false" I
:head>
-- InstanceBeginEditable name-"doct1tle" —>
:t1tle>KHH*HUfi интернет-магазин три CTyneHbKH</title>
!— instanceEndEditable —>
<meta http-equiv-"content-Type" content-"text/htm1; charset-winc!u«5-1251">
!— instanceBeginEditable name«"head" —>
<meta name-"vs_targetschema" content-"http://schemas.m1crosoft.com/1ntell1sense/1e5">
<scri pt 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", "l ef t -" & 1 & "px, top-" & t * "px
End I f
End sub
</scri pt> P
1:..,: .....•.' L.LJZU
Рис. 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-страница изнутри 11
Как видите, документ в окне с кодом HTML - это текстовый документ специального
формата. Все файлы этого формата имеют расширение .html или .htm. В документе
HTML обычный текст сочетается с элементами разметки, заключенными в угловые
скобки < и >, например, <html>, <head>, <t i t l e>, </t i t l e>. Такие элементы разметки
называются тегами. Теги бывают одиночными, открывающими и закрывающими и со-
стоят из следующих друг за другом в определенном порядке элементов:
• левой угловой скобки <;
• необязательного символа слэш /, который означает, что тег является конечным
тегом, закрывающим некоторую структуру, например, </t i t l e >. В этом смысле
можно читать символ / как конец некоторого элемента разметки, например,
строки или абзаца;
• имени тега, например, html;
v' необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним
или несколькими атрибутами, например, al i gn»"cent er";
• правой угловой скобки >.
Таким образом, открывающий тег <html>, стоящий в начале документа HTML и озна-
чающий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>,
находящийся в конце Web-документа, кроме указанных элементов содержит также
символ слэш /, означающий закрывающий тег и указывающий на конец документа.
Тег < s c r i pt language^ "vbscri pt"> означает начало кода встроенной в документ
программы-сценария. Этот тег содержит, кроме имени s cr i pt, атрибут language со
значением "vbs cr i pt", означающий, что сценарий написан на языке vbs cr i pt.
В тегах могут использоваться только символы латинского алфавита, а в значениях атри-
бутов - любые символы. Если в качестве значений атрибута используются, например,
символы кириллицы, то они должны быть заключены в кавычки, например,
name="Раздел 1".
Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head>
эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре.
Большинство тегов являются парными: за открывающим тегом следует соответствую-
щий ему закрывающий тег, а между ними содержится текст или другие теги, например:
<title>Kmi3KHbrii Интернет-магазин Три Ступвньки</ЬхЬ1в>
В таких случаях два тега и часть документа, заключенная между ними, образуют блок,
называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными
и для них закрывающий тег не применяется. Такие теги сами по себе являются элемен-
тами HTML.
Большинство тегов могут иметь один или несколько, атрибутов - параметров, дающих
дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Од-
нако атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, al i gn,
знака равенства • и значения, которое задается строкой символов, например, "cent er":
ai i gn="cent er". Значения атрибутов обычно заключаются в кавычки. Однако если эти
12 Создание Web-сайтов
значения используют только символы латинского алфавита, цифры и дефисы, то кавыч-
ки можно опустить, например: align=center.
Каждый HTML-документ имеет определенную структуру, которая выглядит сле-
дующим образом:
<html>
<head>
</head>
<body>
</body>
</html>
Структура HTML-документа содержит следующие обязательные элементы:
• теги <html> и </html>, которые отмечают начало и конец документа;
• заголовок, ограниченный тегами <head> и </head>;
%/ тело, ограниченное тегами <body>... </body>.
В заголовке, ограниченном тегами <head> и </head>, с помощью тегов <t i -
t l e >.. .</t i t l e> определяется название документа, которое должно описывать его
содержимое и обычно содержит не более 5-6 слов. Это название отображается браузера-
ми в строке заголовка рабочего окна программы, а роботы, составляющие индексы для
поисковых систем, идентифицируют документ, используя его название.
Кроме элемента <t i t l e >.. .</t i t l e>, заголовок может содержать элементы <meta>
...</meta>, например, <meta http-equiv="Content-Typen cont ent ="t ext/ht ml;
charset=windows-l251">, для указания информации о документе. Открывающий тег
<meta> включает пары имя=значение, описывающие свойства документа, например, тип
документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используют-
ся также поисковыми серверами при индексации документов.
Файл HTML может содержать комментарии, дающие пояснения человеку, читающему
HTML-код. Комментарии начинаются с четырехсимвольной последовательности <!— и
завершаются трехсимвольной последовательностью —>, например: <i—Главная
страница —>. Комментарии игнорируются браузером и не влияют на представление
документа на экране. Комментарии желательно использовать в редких случаях, когда это
необходимо, например, для объяснения кода HTML. Следует помнить, что они являются
частью файла и передаются по сети вместе с документом. Большое количество коммен-
тариев может значительно увеличить размер файла и, соответственно, время его загруз-
ки, что нежелательно.
Изучая язык HTML, очень полезно просматривать и анализировать HTML-код Web-
страниц, созданных опытными мастерами. Это помогает быстрее освоить и понять прин-
ципы и структуру языка.
> Закройте окно с кодом HTML, нажав кнопку [х] в правом верхнем его углу.
Web-страница изнутри 13
>- Закройте также программу-браузер.
Теперь, когда мы представляем себе внутреннее устройство Web-страниц, можно при-
ступить к их созданию.
€тъ4/пъ JV&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-коде допускается использовать любой
регистр символов - верхний или нижний.
>• Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме
закрывающего тега </ti tl e>, в новой строке.
Для ввода парных тегов вы можете использовать операции копирования и вставки через
буфер обмена Windows с последующим добавлением символа слэш /.
14 Создание Web-сайтов
<html>
<head>
<titlex/txtle>
</head>
<body> i
</body>
</html>
Напомним, что первый <html> и последний </html> теги означают соответственно на-
чало и конец документа, элемент <head>... </head> определяет заголовок Web-
страницы, элемент <body>.. .</body> - тело документа, а в элементе <t i t l e>
</ti tl e> мы сейчас укажем название Web-страницы.
>• Между открывающим <t i t l e> и закрывающим </t i t i e> тегами вставьте назва-
ние документа - Компания ГЕОТОН. Этот элемент должен выглядеть следующим
образом:
rEOTOH</title>
Напомним, что название Web-страницы должно быть коротким и в максимальной степе-
ни отображать ее содержание.
Наша следующая задача - вставить в тело документа между тегами <body>.. .</body>
короткий текст-приветствие посетителям Web-страницы.
> Вставьте пустую строку между тегами <body> и </body> и введите в ней следующий
текст:
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о на-
шей деятельности, о программных продуктах нашей компании и об оборудо-
вании, которое мы производим
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполня-
ется с помощью атрибутов bgcolor и t ext открывающего тега <body>. Для определе-
ния цвета как значения атрибутов существует два варианта:
• словесное указание имени цвета, например, white (белый). В языке HTML преду-
смотрено шестнадцать таких имен;
t/ цифровое обозначение в шестнадцатеричной записи, например, "#ffffff " - белый,
которое указывает, каким образом цвет формируется из основных цветов - красного,
зеленого и синего.
Конечно, словесное указание цвета более удобно и понятно. С другой стороны, числовые
обозначения дают больше возможностей, так как позволяют указать практически любой
из 16 777 215 оттенков, тогда как словесные обозначения ограничены только шестнадца-
тью цветами.
Полный перечень цветовых имен и их цифровых эквивалентов приведен в Приложении 2
«Краткий справочник по HTML» компакт-диска. Здесь же перечислим только некоторые
цветовые имена: black (черный), gray (серый), red (красный), green (зеленый), aqua
(голубой).
Web-страница изнутри
15
Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для
текста - желтый (yellow).
>• Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yel l ow. Этот
тег должен принять вид:
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так, как на Рис. 1.3.
Eile Edit Format help
<head>
<1Ше>Компания rE0TOH</title>
</head>
<body bgcolor=blue texr=yellowj>
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей
деятельности, о программных продуктах нашей компании и об оборудовании, которое |
мы производим
</body>
</html>
Рис. 1.3. Код HTML первой Web-страницы в окне программы Блокнот (Notepad)
Кроме указания цвета, для фона Web-страницы можно использовать также заранее под-
готовленный рисунок. Но об этом мы поговорим в дальнейшем.
Теперь документ следует сохранить.
>• В окне программы Блокнот (Notepad) выберите команду меню Файл • Сохранить
(File • Save). На экране появится диалог Сохранение (Save As).
> Откройте созданную ранее папку Web, в которой должны сохраняться все файлы сайта.
> В поле ввода Имя файла (File name) введите geoton.html - так мы назовем этот файл.
Обратите внимание: вы обязательно должны указать расширение имени файла .html или
.htm, чтобы браузер смог его открыть.
>• Нажмите кнопку Сохранить (Save). Диалог Сохранение (Save As) закроется. Файл
будет сохранен в указанной папке, и его имя появится в заголовке окна программы
Блокнот (Notepad).
Теперь можно просмотреть результаты нашей работы.
>• Не закрывая, сверните окно программы Блокнот (Notepad), нажав кнопку Q в правом
верхнем его углу.
> Откройте с помощью программы Проводник (Windows Explorer) папку Web, в кото-
рой вы сохранили файл geoton.html, и дважды щелкните мышью на его значке. Будет
запущен браузер, установленный по умолчанию, и в его окне откроется документ
geoton.html (Рис. 1.4).
16
Создание Web-сайтов
] £ile Edit View Favorites Tools Help
<- Back ~ •+ •• &® <3 | gtSearch & Favorite» QHislory | %•* ш Ш •
JAjjdress |g| C:\Web\Geoton.html
ТЧ «>Go j Links
Добро пожаловать На страничку компании ГЕОТОН! Здесь Вы узнаете о нашей
деятельности, о программных продуктах нашей компании и об оборудовании, которое
мы производим
й Done
j^rt| My Computer
Рис. 1.4. Текст Web-страницы в окне браузера
Как видите, в заголовке окна браузера указывается название документа, которое мы вве-
ли в элементе <t i t l e x/t i t l e >, а цвет фона и текста страницы - такие, как указаны в
теге <body>. Текст отображается в одном абзаце и выровнен влево.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на
рисунке. В таком случае выберите команду меню Вид • Размер шрифта • Средний
(View • Text Size • Medium) в браузере Internet Explorer, чтобы установить средний раз-
мер шрифта.
Следует иметь в виду, что разные браузеры могут по-разному отобра-
жать содержимое одного и того же HTML-файла. Поэтому при создании
Web-страниц желательно всегда просматривать результат во всех
наиболее популярных браузерах - Internet Explorer, Opera, Mozilla u Net-
scape. В таком случае вы будете уверены, что посетитель вашего сай-
та увидит именно то, что вы хотите ему показать.
> Просмотрите созданный файл в другом браузере. На этом этапе работы отличия бу-
дут незаметны.
> Не закрывая, сверните окна браузеров, воспользовавшись кнопкой (Т) в правом верх-
нем углу каждого из них.
Так как в элементе <bodyx/body> мы ввели текст без разбивки на абзацы, то в браузе-
ре он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тек-
сту более наглядный вид.
Задаем стили текста
Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы
и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа,
пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами,
соответствующими уровню, например, <hl x/hl > - заголовок раздела первого уров-
ня, a <h6x/h6> - заголовок раздела шестого уровня. От нормального текста заголов-
ки отличаются размером и толщиной букв. Заголовок первого уровня hi отображается
обычно очень крупным шрифтом, в то время как заголовок шестого уровня Ьб - очень
мелким.
Web-страница изнутри
17
Не следует путать заголовки разделов документа с рассмотренным ранее заголовком до-
кумента, определяемым элементом <headx/head>.
В качестве заголовка текста используем первое предложение - Добро пожаловать на
страничку компании ГЕОТОН! Для этого достаточно ограничить его тегами <hl> и </hl>.
Окно программы Блокнот (Notepad) с открытым файлом geoton.html свернуто, и его
кнопка находится на Панели задач (Taskbar).
>- Нажмите кнопку Блокнот (Notepad) на Панели задач (Taskbar), чтобы восстановить
окно текстового редактора.
>• Вставьте в текст файла geoton.html теги <ы> и </hl> так, чтобы они ограничивали
первое предложение текста, и этот фрагмент кода принял следующий вид:
<п1>Добро пожаловать на страничку компании ГЕОТОН!</hl>
Просмотрим полученный результат.
> Сохраните файл, выбрав команду меню программы Блокнот (Notepad) Файл • Со-
хранить (File • Save).
Операцию сохранения необходимо всегда выполнять перед просмотром
документа, так как браузер открывает файл для просмотра, загружая
его в оперативную память компьютера с диска. Если после редактирова-
ния кода HTML вы не сохраните файл, то никаких изменений в браузере
не увидите.
> Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).
>- Нажмите клавишу [{FSJ ИЛИ кнопку _©_ - Обновить (Refresh) на панели инструментов
рабочего окна программы Internet Explorer. Файл geoton.html будет перезагружен, и
вы увидите в окне браузера, как выглядит заголовок первого уровня (Рис. 1.5).
- [Working Offline!
File Edit View Favorites Iools Help
*• Back » •• • в ® <Я | ^Search QJFavoriles (jHistory | %*•
Address |£) CAWBtAGeoton.html
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и <
об оборудовании, которое мы производим
Q My Computer
Рис. 1.5. Заголовок первого уровня
> Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в те-
гах номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и
обновлять изображение в окне браузера.
> Когда вы закончите эксперименты, снова восстановите в файле geoton.html теги
18
Создание Web-сайтов
Используя шесть уровней заголовков, которые предоставляет в ваше
распоряжение язык HTML, можно создать легко читаемый документ с
интуитивно ясной структурой. Помните, что ваш документ всегда бу-
дет читаться значительно лучше, если в нем будет четкое разделение
на разделы и подразделы.
По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также
выровнять по правому краю или центрировать. Для правостороннего выравнивания в
теге <hl> используется атрибут al i gn-ri ght, а для центрирования - al i gn=cent er.
Допускается также явное указание левостороннего выравнивания - al i gn=l ef t.
> Добавьте в тег <Ы> атрибут align=center, чтобы центрировать заголовок. Этот
элемент должен принять следующий вид:
<hl align=center>Добро пожаловать на страничку компании ГЕОТОН! </h:.>
Результат будет выглядеть примерно так, как на Рис. 1.6.
Eile Edit View Favorites Iools Help
*• Bock ^ •+ " @ g| ffl | g>Sanrch Д Favorites (3 History
Ajdress |g| C:\Wsb\Gnnlon hlml
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и
об оборудовании, которое мы производим
Рис. 1.6. Заголовок центрирован
В дальнейшем мы не будем напоминать вам о необходимости перед просмотром сохра-
нять файл с исходным кодом и обновлять изображение в браузере.
Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужир-
ным курсивным начертанием. Для установки полужирного начертания используются
парные теги <ьх/ь>.
> Вставьте в файле geoton.html открывающий <ь> и закрывающий </ь> теги так, что-
бы они ограничили текст Здесь вы узнаете... Этот элемент должен принять
следующий вид:
<Ь>Здесь Вы узнаете о нашей деятельности, о программных продуктах на-
шей компании и об оборудовании, которое мы производим</Ь>
>• Просмотрите результат в браузере (Рис. 1.7).
Web-страница изнутри
19
Eile Edit yiew Favorite» Iools Help
fflj QSoarch SlFovorilos QtHislory | Щ," ф Щ »
>Back •
| Address |fl С \Web\Geolon html
F ] &Ca [} Links
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей
компании н об оборудовании, которое мы производим
Щ My Computer
Рис. 1.7. Полужирное начертание текста
Курсивное начертание устанавливается с помощью тегов <i x/i >.
>• Вставьте в исходный код HTML тег <i> и </i> так, чтобы отредактированный
элемент принял следующий вид:
<Ьх1>Здесь Вы узнаете о нашей деятельности, о программных продуктах
нашей компании и об оборудовании, которое мы производим</хх/Ь>
Элементы разметки могут быть вложенными, как в данной структуре, где элемент
<i >.. .</i > вложен в элемент <Ь>.. .</Ь>. Современные браузеры способны правиль-
но обрабатывать вложенные теги. Поэтому вам необходимо следить за тем, чтобы не
нарушался порядок вложения. Работа браузера окажется затрудненной, если вложен-
ность будет нарушена. Например, такая запись будет неправильной: <b x i >...
</bx/i >. Соблюдение вложенности - очень важная часть общей культуры написания
HTML-кода.
С помощью пары тегов <ux/u> можно установить подчеркнутое начертание текстового
фрагмента, ограниченного данными тегами, а с помощью пары тегов <t t x/t t > - ото-
бразить текст телетайпным шрифтом.
После того, как вы просмотрите полученный результат (Рис. 1.8), увеличим размер
шрифта текста. Это можно сделать разными способами.
Eile Edit View Favorites lools Help
«•Buck 4 - Oi l l f f l <Q Search EBFayorims QtHimoiy \
Ajjdress)fic:\Web\Geoton.html
Г-j <>Go|iLinks'
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вшгршиии о пашей деятельности, о программных продуктах нашей
компании и об оборудовании, которое ми производим
В Done
Рис. 1.8. Курсивное полужирное начертание текста
Теги <bi gx/bi g> увеличивают размер шрифта текста, заключенного между ними.
> Добавьте в начало и конец вышеуказанного фрагмента кода соответственно теги
<big> и </big> так, чтобы элемент принял следующий вид:
20
Создание Web-сайтов
<ЫдхЬх1>Здесь Вы узнаете о нашей деятельности, о программных продуктах
нашей компании и об оборудовании, которое мы проиэводим</1х/Ьх/Ыд>
Результат будет примерно таким, как на Рис. 1.9.
File Edit
1 •fBock -
• Address | d
View Favorites Jools
» >8Bf l | USeorch
C:\Web\Geoton.html
Uelp
[liF&vorites
(^History | В
*•••
Id
TfaTxl
m
I
j Links"!
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах
нашей компании и об оборудовании, которое мы производим
0Done
My Computer
Рис. 1.9. Размер шрифта текста увеличен с помощью тега <Ыд>
С помощью тегов <small></small> вы можете уменьшить размер шрифта текста по
сравнению с исходным.
Другой способ указания размера шрифта - с помощью тегов <f ont x/f ont > с атри-
бутом s i ze. В качестве значений этого атрибута используются целые числа от 1 до 7.
Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 -
максимальному.
> Используя вместо тегов <bi gx/bi g> теги вида <font s i ze=l x/f ont >, просмотрите
как изменяется размер шрифта текста при разных значениях атрибута size - от 1 до 7.
В качестве значения атрибута s i ze можно также использовать числа от 1 до 7 со знаком
+ (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или
уменьшается, по сравнению с исходным, например, теги <font s i ze=+l x/f ont > уве-
личат размер шрифта, по сравнению с текущим, на один уровень. Проверьте.
> Установите 5 в качестве значения атрибута s i ze для рассматриваемого фрагмента
текста: <font s i ze=5x/f ont >. HTML-код этого фрагмента должен быть таким:
<font s i ze=5xbxi >3f l ecb Вы узнаете о нашей деятельности, о программ-
ных продуктах нашей компании и об оборудовании, которое мы произво-
димое /ix/bx/ font >
В тегах <f ont x/f ont > может использоваться также атрибут col or для указания цвета
шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рас-
смотренных ранее атрибутов, описывающих цвет фона и текста документа. Вы найдете
их в «Кратком справочнике по HTML» в Приложении 2 компакт-диска.
По умолчанию абзац с текстом Здесь вы узнаете... выровнен влево. Центрируем его
по горизонтали с помощью тегов <cent er x/cent er >. Вы можете также выровнять
абзац по правому краю страницы с помощью тегов <r i g ht x/r i g ht > или по левому - с
помощью тегов <lef t x/l e f t>.
>• Вставьте теги <cent er x/cent er >, ограничив ими указанный абзац так, чтобы код
HTML принял вид как на Рис. 1.10.
Web-страница изнутри
21
Eilo Edit Format
<html>
<head>
<1Ше>Компания ГЕОТОН<ЛШе>
<body bgcolor=blue text=yellow>
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы>
<center><font size=5xbxi>3n.ecb Вы узнаете о нашей деятельности, о программных
продуктах нашей компании и об оборудовании, которое мы
npoH3BOflHM<ixbx/fon(Xcenter>j
</body>
Рис. 1.10. Код HTML после изменения размера шрифта текста и центриров.ания
В окне браузера документ будет выглядеть примерно, как на Рис. 1.11.
ffl| <Q Search j a Favoriles ф History | %- S) Ш
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
8j Done
в
My Computer
Рис. 1.11. Вид документа после стилевого оформления
Обратите внимание, что для центрирования абзаца мы использовали теги <сеп-
t erx/cent er>, в отличие от атрибута align=center, который использован нами в
тегах <hlx/hl>.
Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста.
С одной стороны, можно прямо указать, что шрифт на некотором участке текста
может быть полужирным или курсивным, т.е. явно указать начертание шрифта тек-
ста, как мы это делали в данном опыте. С другой стороны, можно пометить любой
фрагмент текста, как имеющий некий, отличный от нормального, логический стиль,
предоставив интерпретацию этого стиля браузеру. Таким образом, логический стиль
указывает роль текстового фрагмента, например, большую значимость по сравне-
нию с обычным текстом или то, что данный фрагмент является цитатой. В своей
работе вы можете использовать следующие теги, определяющие логические стили.
Проверьте, как они работают в разных браузерах.
<dfnx/dfn> - применяется для определения слова. Текст обычно выводится курсивом.
<emx/em> - для выделения слов и усиления. Отображается курсивом.
<c i t e x/c i t e > - для выделения названий книг, фильмов, спектаклей и т.д. Выводится
курсивом.
22 Создание Web-сайтов
<codex/code> - для фрагментов кода программ. Показывается на экране шрифтом
фиксированной ширины.
<kbdx/kbd> - используется для текста, который пользователь вводит с клавиатуры.
В разных браузерах может отображаться разными шрифтами.
<sampx/samp> - служит для отображения сообщений программ. Выводится шрифтом
фиксированной ширины.
<strong></strong» - для особо важных фрагментов. Обычно выделяется полужирным
начертанием.
<varx/var> - используется для указания, что часть текста или слово является сим-
вольной переменной, т.е. текстом, который может быть заменен различными выраже-
ниями. Отображается курсивом.
Спецификация HTML 4.0 предлагает более прогрессивный способ указания стилей тек-
ста и других элементов - с помощью специального языка каскадных таблиц стилей CSS
(Cascading Style Sheets). Таблицы стилей - это большое достижение в области Web-
дизайна, расширяющее возможности улучшения внешнего вида страниц. Таблицы сти-
лей упрощают определение интервалов между строками, отступов, цветов, используемых
для текста и фона, размера и стиля шрифтов и т.д. Стиль большинства элементов HTML
может описываться с помощью атрибута styl e, который располагается внутри откры-
вающего тега элемента. В качестве значения атрибута st yl e используются пары вида
«свойство: значение». Например, во фрагменте кода, описывающего заголовок раздела,
<Ы style="color: blue"> атрибут style= "color: blue" определяет, что свойст-
во col or (цвет) имеет значение blue (синий), т.е. текст заголовка первого уровня дол-
жен отображаться синим цветом.
Посмотрим, как с помощью языка каскадных таблиц стилей указать стиль текстового
фрагмента, который начинается словами Здесь Вы узнаете...
Для указания толщины шрифта используется свойство font-weight со значениями
l i ght er (тонкий), bold (полужирный), bolder (жирный), например, styl e="f ont-
weight: bold".
Для определения курсивного начертания применяется свойство f ont -st yl e со значени-
ем i t al i c. Поэтому, чтобы придать тексту полужирное курсивное начертание, следует
атрибут styl e определить так: style="font-weight: bold; font-style: i tal i c".
Обратите внимание: свойства могут располагаться в любом порядке и обязательно долж-
ны разделяться точкой с запятой.
Если требуется указать размер шрифта, то следует воспользоваться свойством font-
si ze, значения которого можно указать в относительных или абсолютных величинах.
Относительные величины - это проценты, а в качестве абсолютных величин использу-
ются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). Например:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: ЮОрх"
Web-страница изнутри
23
Указывая абсолютные, а не относительные размеры, вы лишаете пользователей, про-
сматривающих ваши страницы, возможности увеличивать или уменьшать размер шриф-
тов с помощью команды меню браузера в соответствии с их зрением и разрешением мо-
нитора. Шрифты будут отображаться только такого размера, который вы указали. По-
этому желательно указывать размер шрифта в процентах. В этом случае размер шрифта
будет меньше или больше на указанное количество процентов, чем при оформлении его
с помощью HTML-тега по умолчанию.
Для определения способа выравнивания текста по горизонтали используется свойство
t e xt - al i gn со значениями l e f t (влево), r i ght (вправо), center (по центру), j us t i f y
(по ширине). Таким образом, чтобы указать, что текст Здесь Вы узнаете... должен быть
оформлен полужирным курсивным начертанием с размером 150% от исходного и вы-
ровнен по центру, следует его стиль определить следующим образом:
style="font-weight: bold;
align: center"
font-style: italic; font-size: 150%; text-
Этот атрибут мы применим в тегах <рх/р>, которые позволяют представить текст в
виде отдельного абзаца.
>• Отредактируйте элемент HTML, включающий текст Здесь Вы узнаете..., удалив
теги <centerx/center>, <font size=5x/font>, <bx/b>, <i x/i > и вставив
теги <р> и </р> с атрибутом styl e так, чтобы этот элемент принял следующий вид:
<р style="font-weight: bold; font-styl e: i t a l i c; font-si ze: 150%;
t ext -al i gn: center">3flecb Вы узнаете о нашей деятельности/ о программ-
ных продуктах нашей компании и об оборудовании, которое мы произво-
дим-: /р>
Код HTML в файле geotbn.html должен иметь вид как на Рис. 1.12, а результат в окне
браузера практически не будет отличаться от приведенного на Рис. 1.11.
File Edit Farmot Help
<html>
<head>
<1Ше>Компания rEOTOH</title>
</head>
<body bgcolor=blue text=yellow>
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы>
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">3flecb
Вы узнаете о нашей деятельности, о программных продуктах нашей компании и
об оборудовании, которое мы производнм</р>
<Л>оАу>
</html>(
Рис. 1.12. Код HTML после применения языка каскадных таблиц стилей
Как видите, язык HTML позволяет использовать разные способы стилевого оформле-
ния. Вместе с тем, применение языка каскадных таблиц стилей CSS является более
предпочтительным.
Мы рассмотрели только один вариант использования языка таблиц стилей, когда определе-
ние стиля располагается непосредственно внутри тега элемента, который вы описываете.
24 Создание Web-сайтов
Это делается с помощью атрибута styl e, используемого с большинством стандартных
тегов HTML. Но есть и другие варианты использования CSS.
В стандартном HTML, без применения таблиц стилей, для присвоения какому-либо
элементу определенных свойств, таких как цвет, размер, положение на странице и т. п.,
приходится каждый раз описывать эти свойства для каждого элемента, даже если на
одной странице должны располагаться десятки таких элементов, не отличающихся
один от другого. Приходится десятки раз вставлять один и тот же фрагмент
HTML-кода в страницу, увеличивая размер файла и время его загрузки из сети.
Таблицы стилей действуют другим, более удобным и экономичным способом. Для при-
своения какому-либо элементу определенных характеристик вы должны один раз опи-
сать этот элемент и определить это описание как стиль, а в дальнейшем просто указы-
вать, что элемент, который вы хотите оформить соответствующим образом, должен при-
нять свойства стиля, описанного вами. Удобно, не правда ли?
Более того, вы можете сохранить описание стиля не в тексте вашей Web-страницы, а в от-
дельном файле - это позволит использовать описание стиля на любом количестве
Web-страниц. И еще одно, связанное с этим преимущество - возможность изменить
оформление любого количества страниц, исправив лишь описание- стиля в одном отдель-
ном файле.
Кроме того, язык таблиц стилей позволяет работать со шрифтовым оформлением стра-
ниц на гораздо более высоком уровне, чем стандартный HTML. Обо всем этом более
подробно мы поговорим в следующих главах.
Описание основных элементов языка каскадных таблиц стилей CSS вы найдете в При-
ложении 3 компакт-диска.
В настоящее время язык CSS насчитывает довольно большое количество свойств элемен-
тов HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с
максимальным количеством браузеров элементы CSS - свойства шрифта, цвета элементов
и фона, свойства текста и границ - вы можете значительно облегчить свою работу и сде-
лать ваши Web-страницы более привлекательными в плане оформления текста.
€ШУГ/ПЬ JV&4. Вставляем рисунок
На каждую Web-страницу можно поместить любое количество рисунков. Вы можете
использовать готовые графические изображения или создать их сами. О том, как само-
стоятельно подготовить графику, будет рассказано в следующих главах. А здесь мы по-
смотрим, как вставить в Web-документ уже готовый рисунок.
Графические изображения, которые вы вставляете в свои Web-документы, должны быть
созданы в таком графическом формате, который поддерживается браузером. Стандарт-
ные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по срав-
нению с другими форматами, что значительно сокращает время загрузки из сети. Форма-
ты Web-графики подробно описаны в следующей главе.
Вставим на первую страницу нашего сайта рисунок CLOUD.GIF, который обычно нахо-
дится в папке Windows, т.е. той папке, в которой установлена операционная система
Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы созда-
Web-страница изнутри
25
ли для хранения файлов сайта. Файл CLOUD.GIF можно взять также из папки
\Web\ChapO1\Web компакт-диска, прилагаемого к этой книге.
>• Скопируйте файл CLOUD.GIF или любой другой файл с расширением .GIF в папку Web.
Для вставки изображения в Web-документ используется одиночный тег <img> с ат-
рибутом src, значение которого соответствует имени вставляемого файла или его
адресу в Интернете. С помощью необязательного атрибута <border> можно вклю-
чить отображение рамки вокруг рисунка. Значение 1 .для этого атрибута создаст
рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен вы-
глядеть следующим образом:
<img src=CLOUD.GIF border=l>
Вставим его после заголовка Добро пожаловать на страничку компании ГЕОТОН!
Операционная система Windows не различает регистр букв в названиях
имен файлов, но операционные системы семейства Unix различают его,
поэтому следует тщательно следить за тем, чтобы имя файла в теге
указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто
недоумевают: почему рисунок был виден на странице при тестировании
на локальном компьютере и не появляется при загрузке страниц с уда-
ленного сервера. А все дело в том, что они указали cloud.gif, а на диске
хранится CLOUD.GIF.
> Вставьте пустую строку после элемента <hl align=center>flo6po пожаловать на
страничку компании ГЕОТОН!</Ы> и введите в ней тег <img src=CLOUD.GiF
border=l > для включения изображения в документ.
По умолчанию рисунок выравнивается влево (Рис. 1.13).
Fjle £dit View Favorites Xools tielp
| **Back T •* "• <d 0 tSJ | ^Search QjFavorites 0His(ory
Address |<B C:\WBb\gBoton.hlml
Добро пожаловать на страничку
компании ГЕОТОН!
•Зй Справка
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
Риа 1.13. Вставленный рисунок выровнен полевому краю страницы
Чтобы выровнять рисунок по центру, следует, воспользовавшись тегами <center>
</center>, записать строку кода HTML, вставляющего рисунок, следующим образом:
26
Создание Web-сайтов
<centerximg src=CLOUD.GIF border=lx/center>
> Откорректируйте указанную строку в файле geoton.html. В результате Web-страница
будет выглядеть как на Рис. 1.14.
Eile Edit ¥iaw Favorites Xodls Ца|р
>Beck » Ч '9 Э й | ©Search GBFovoritea QtHislory
» I f l CAWBb\Gooton.html
Добро пожаловать на страничку
компании ГЕОТОН!
! cffl,Справка
Здесь Вы узнаете о нашей деятельное/пи, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
Й iioi
Щ My Computer
Рис. 1.14. Рисунок выровнен по центру
При подготовке Web-документов недопустимо использовать рисунки, фотографии и
прочие изображения, взятые с других сайтов, так как это нарушает авторские права их
создателей. Если рисунки вам все же необходимы, то следует получить разрешение авто-
ра на их использование. В сети вы можете найти большое количество коллекций изобра-
жений общего пользования.
€<гыутъ J№,5. Создаем список
Для наглядного представления информации на Web-страницах часто используются спи-
ски. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу
нашего сайта, на которой вставим ненумерованный список.
>• В окне программы Блокнот (Notepad) выберите команду меню Файл • Создать
(File • New). Окно очистится. Будет создан новый файл.
> Создайте структуру Web-документа, напечатав основные теги:
<html>
<hea<3>
<titlex/title>
</head>
<body>
</body>
</html>
>• В качестве заголовка документа в теге <t i t l e x/t i t l e > введите: Чем мы за-
нимаемся?:
Web-страница изнутри
27
<title>4@M мы занимаемся?</title>
> Такой же заголовок для списка введите в теле документа между тегами <body> и
</body>, использовав для его отображения теги <h2x/h2> с атрибутом
al i gn=center, выравнивающим заголовок по центру страницы:
<h2 align=center>4eM мы занимаемся?</h2>
>• Самостоятельно подберите цвет фона страницы и цвет текста, указав
соответствующие значения для атрибутов bgcolor и text в открывающемся
теге <body>, например, так:
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на
выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет ото-
бражаться черным цветом на белом фоне.
Введенный HTML-код должен иметь вид как на Рис. 1.15.
1*5work html - Notepad
File Edit Fflrnmt Help
<html>
<head>
<title>4eiu мы занимаемся?<ЛШе>
</head>
<body bgcolor=aqua text=navy>
<h2 align=center>4eM
|<jbody>
</html>
В
Рис. 1.15. Код HTML новой Web-страницы
Теперь вставим на страницу ненумерованный список с информацией о сфере деятельно-
сти компании ГЕОТОН. Ненумерованные списки создаются с помощью пары тегов
<ul x/ul >, которые ограничивают список. Между ними располагается столько элемен-
тов, начинающихся с тега <l i >, сколько элементов в списке.
>• Вставьте пустую строку под строкой с кодом <h2 al i gn=center> Чем мы занима-
емся? </h2> и введите в теле документа следующий код:
<11>Созданием новых и развитием существующих автоматизированных систем
управления технологическими процессами на промышленных объектах.
<И>Планированием и установкой "под ключ" локальных и глобальных вы-
числительных систем.
<l i Раз работкой и внедрением систем корпоративных сетей с построением
кабельных систем (для офисов), а также систем передачи данных с ис-
пользованием телефонных/ оптоволоконных и радиоканалов.
<1х>Внедрением проектных решений по созданию и использованию глобаль-
ных информационных магистралей для обеспечения совместных работ систем
связи, видеоконференций и мультимедиа.
<li>Созданием систем слежения и видеонаблюдения.
28
Создание Web-сайтов
<Ц>Создание систем охранной и пожарной сигнализации, включая системы
пожаротушения и контроля доступа.
Обратите внимание: тег <l i > может использоваться как одиночный, т.е. без парного,
закрывающего тега </l i >.
Полный HTML-код документа должен иметь вид как на Рис. 1.16.
File Edit Formal Help
<html>
<head>
<title>4eM мы занимаемся?</1Ше>
</head>
:body bgcoloi=aqua text=navy>
<h2 align=center>4eM мы занимаемся?</Ь2>
<Н>Создаиием новых и развитием существующих автоматизированных систем
управления технологическими процессами на промышленных объектах.
<Н>Планированием и установкой "под ключ" локальных и глобальных
вычислительных систем.
<Н>Разработкой и внедрением систем корпоративных сетей с построением
кабельных систем (для офисов), а также систем передачи данных с использованием
телефонных, оптоволоконных и радиоканалов.
<Н>Внедрением проектных решений по созданию и использованию глобальных
информационных магистралей для обеспечения совместных работ систем связи,
видеоконференций и мультимедиа.
<Н>Созданием систем слежения и видеонаблюдения.
<М>Создание систем охранной и пожарной сигнализации, включая системы
пожаротушения и контроля доступа.
</body>
</html>
Рис. 1.16. Полный HTML-код документа со списком
> Когда ввод кода будет закончен, сохраните документ в папке Web под именем
spisok.html.
ffile Edit View Favorites Jools
•S-Back » + » f l B fl| ® Search
Address |g C:\Web\spisok.html
Help
Si Favorites
- iWorkinq Offline]
0History | 6 -#i -
._ [n| x||
D
I
junks»!
Чем мы занимаемся?
• Созданием новых и развитием существующих автоматизированных систем
управления технологическими процессами на промышленных объектах.
• Планированием н установкой "под ключ" локальных и глобальных
вычислительных систем.
• Разработкой и внедрением систем корпоративных сетей с построением
кабельных систем (для офисов), а также систем передачи данных с
использованием телефонных, оптоволоконных и радиоканалов.
• Внедрением проектных решений по созданию и использованию глобальных
информационных магистралей для обеспечения совместных работ систем
связи, видеоконференций и мультимедиа.
• Созданием систем слежения н видеонаблюдения.
• Создание систем охранной и пожарной сигнализации, включая системы
пожаротушения и контроля доступа.
© Done
В
Рис. 1.17. Список в окне программы просмотра
Web-страница изнутри
29
>- Воспользовавшись командой меню Файл • Открыть (File • Open) в браузере Internet
Explorer, откройте файл spisok.html из папки Web (Рис. 1.17).
Как видите, каждый элемент ненумерованного списка выделяется специальным
маркером. В нумерованном списке каждый элемент будет отмечаться его
порядковым номером. Для создания нумерованных списков используются теги
<ol x/ol >, между которыми помещаются элементы <l i >.
€myf/m JV&6. Создаем форму
Рассказав на Web-странице о сфере своей деятельности, компания ГЕОТОН предполага-
ет, что познакомившиеся с этой информацией и заинтересовавшиеся ею посетители сай-
та захотят связаться с компанией, задать вопросы, обсудить общие проблемы, предло-
жить сотрудничество. Чтобы ускорить и облегчить им процедуру связи, достаточно по-
местить на данной странице специальную форму; заполнив ее, посетитель сайта передаст
компании информацию, которую он посчитает нужным послать.
Подобные формы широко используются на Интернет-сайтах для сбора различных сведе-
ний, регистрации пользователя, формирования запроса и т.д. Образец типичной формы
регистрации пользователя на сайте www.narod.ru показан на Рис. 1.18. Такая форма мо-
жет содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и
переключатели для выбора значений и другие элементы управления. После заполнения
формы пользователем специальная программа-обработчик или, как ее еще называют,
скрипт, обрабатывает полученные данные и передает их по назначению.
Файл Правка £нд Избранное Сервис Справка
| 0- Ш В D
Адрес. Щ\ h»p:/>pa*«pofLyandeii iu/cgi-bin/'Reg-pl?ttom-naiodbwoclB=li-q.iletbrfilt.alri-hUp://naiod.yandex.iu/ Wj ffj Перепад j Link;
Регистрация: шаг 1 из 2
Логин:
должен состоять из символов A-z. 0-9, -. начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не'более 20 символов
Существует мнение, что все хорошие логины
на Яндексе уже заняты. Но это не так. Мы
можем посоветовать вам интересный
незанятый логин. Для этого достаточно
указать имя и фамилию (они понадобятся и
для дальнейшей регистрации).
Ваше имя:
Фамилия:
L
Яндекс охраняет персональные сведения пользователей в
соответствии с Соглашением о конфиденциальности информации.
Й"
;|ф Internet
Рис. 1.18. Форма регистрации пользователей и а сайте www.narod.ru
Посмотрим, как вставить в Web-документ простую форму, которая позволит пользовате-
лю напечатать свое сообщение прямо на Web-странице и автоматически отправить его
по электронной почте компании ГЕОТОН. Но сначала вставим в HTML-документ
30 Создание Web-сайтов
spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст
приглашения следует выделить в отдельный абзац, ограничив его парой тегов <рх/р>,
и выровнять по центру с помощью атрибута al i gn=center.
> Вставьте пустую строку между закрывающим тегом </ul> и закрывающим тегом
</body> и введите в этой строке следующий код:
<р аИдп=сепЬег>Если у Вас есть вопросы или предложения, напишите
нам:</р>
Каждая форма начинается тегом <form> и заканчивается тегом </form>. HTML-
документ может содержать в себе несколько форм, однако они не должны находиться
одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений.
Открывающий тег <form> должен содержать обязательный атрибут acti on, который
определяет, где находится программа-обработчик или адрес сервера, который будет об-
рабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться
по электронной почте, то значение этого атрибута должно содержать адрес E-mail вла-
дельца сайта, например: act i on="mai l t o: geoton@narod.ru".
Еще один атрибут тега <form> - method - определяет, каким образом или с помо-
щью какого протокола данные из формы будут переданы программе-обработчику.
Так как будет использована электронная почта, то значение этого атрибута должно
быть post: metnod=post. Таким образом, элемент <form>.. . </form> будет иметь
примерно такой вид:
<form act i on-"mai l t o: geoton9narod.ru" method=post >
</form>
> Добавьте в документе spisok.html пустую строку перед закрывающим тегом </body>
и введите указанный код, вставив в качестве значения атрибута act i on вместо
geotonenarod.ru свой адрес электронной почты.
Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообще-
ния. Для этого служат теги <t ext ar eax/t ext ar ea>. В качестве атрибутов открываю-
щего тега <textarea> необходимо указать количество строк (rows) и колонок (cols),
а также имя (паше), под которым содержимое текстового поля ввода будет передано
программе-обработчику, например:
•ctextarea rows=5 cols=40 name=Coiranentsx/textarea>
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов.
Введенный посетителем сайта текст будет передан обработчику под именем comments
(Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, сле-
дует ограничить его тегами <cent er x/cent er >.
>• Вставьте пустую строку перед закрывающим тегом </form> и введите следующий
элемент, создающий текстовое поле:
<cent er xt ext ar ea rows=5 cols=40 name=Commentsx/textareax/center>
Здесь для центрирования текстового поля мы использовали теги <cent er x/cent er >,
а не атрибут al i gn=cent er тега <р>, так как данный атрибут предназначен преимуще-
ственно для выравнивания текстовых фрагментов, и некоторые браузеры могут игнори-
Web-страница изнутри
31
ровать данный атрибут для поля формы. Вставленное текстовое поле будет примерно
таким, как на Рис. 1.19.
""'"••••'т ''•'""•'"ii^T"Tir'im'ifmnTiiFiitiiiiTrr
Eile Edit ¥iew Favorites Tools Help
*Back • 4 »
Address |€| C:\Web\spisok.htmt
3 (*Go IJ Links "
Если у Вас есть вопросы или предложения, напишите нам:
P My Computer
A
Рис. 1.19. Текстовое поле формы
Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то
элемент управления, например, кнопка. Создать такой элемент управления очень легко
с помощью одиночного тега <input> с атрибутом type. Если нужно создать кнопку,
то значение этого атрибута должно быть submit (передать):
<input type=submit>
Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Submit
Query (Передать запрос). Чтобы изменить надпись на кнопке, достаточно включить
в данный тег атрибут val ue с нужным вам значением, например: value=nОтправить".
Напомним, что значения атрибутов, в которых используются символы, отличные от ла-
тинских, следует обязательно заключать в кавычки.
>• Вставьте пустую строку перед закрывающим тегом </form> и введите в ней сле-
дующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру
страницы:
<p><centerxinput type=submit value="OTnpaBMTbll></centerx/p>
В результате элемент <f orm>... </f orm> должен принять следующий вид:
<form action="mailto:geoton@narod.ru" method=post>
<centerxtextarea rows=5 cols=40 name=Commentsx/textarea><center>
<pxoenterxinput type=submit value="OTnpaBK'TbII></oenterx/p>
</form>
Напомним еще раз, что в качестве значения атрибута act i on, в открывающем теге
<form> следует указать ваш адрес электронной почты. В окне браузера форма будет
примерно такой, как на Рис. 1.20.
Работу формы можно проверить.
>• Щелкните мышью на текстовом поле ввода в окне браузера. В этом месте появится
текстовый курсор.
>• Введите в текстовом поле несколько слов.
32
Создание Web-сайтов
Eile Edit
*• Back •
Address | g
jSjDone
View Favorites l ool s
•+ - в ЕЭ <3 | QSearch
C:\Web\episok. html
srnel Explorer - [Working Offline)
SlFavorites (jHislory | %'S I
)'
h]<>Go
Если у Вас есть вопросы или предложения, напишите нам:
| Отправить |
Ы
П
] Щ My Computer
nlxll
n
\\
|Un,s»|
"1
_J
A
Рис. 1.20. Текстовое поле, и кнопка в окне браузера
>• Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с пре-
дупреждением о том, что форма передаст ваш адрес E-mail получателю, а данные, со-
держащиеся в форме, будут переданы без шифрования и, если они конфиденциальны,
это может быть нежелательно для вас (Рис. 1.21).
Microsoft Internet Exploiei
Данная Форма отправляется по электронной почте.
Это приведет к тому, что адрес электронной почты пользователя
станет известен получателю,
а сведения в форме останутся незашифрованными.
Можно либо продолжить, либо отменить отправку.
liiiiir::::;! r
Отмена
Рис. 1.21. Диалог-предупреждение
> Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждени-
ем закроется.
Если бы соединение с Интернетом было установлено, то данные из формы были бы от-
правлены и через некоторое время вы получили бы их по электронной почте. Но так как
соединение не установлено, то, в зависимости от настроек вашей почтойой программы,
или появится сообщение о невозможности отправить почту, или данные из формы будут
помещены в папку исходящих сообщений почтовой программы и отправлены при оче-
редном подключении к почтовому серверу.
€пл^/т j№f. Вставляем гипертекстовые ссылки
Мы уже упоминали в начале главы, что аббревиатура HTML означает «Язык разметки
гипертекста». Что же такое гипертекст?
В отличие от простого текста, который можно читать только от начала к концу, гипер-
текст позволяет осуществлять мгновенный переход от одного фрагмента текста к друго-
му. Справочные системы многих программных продуктов построены именно по
принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном
цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке -
Web-страница изнутри 33
происходит переход к заранее назначенному документу или фрагменту документа.
На Web-страницах гипертекстовые ссылки широко используются для перехода к опре-
деленному фрагменту текущей страницы, к следующей или любой странице сайта или к
документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются теги <ах/а> с ат-
рибутом href, значением которого является адрес перехода. В качестве адреса может
использоваться имя файла другого документа или URL-адрес.
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который
может быть представлен или в числовом виде, например, 204.146.46.133, или определен-
ным сочетанием символов, например, www.microsoft.com. Поскольку каждый компью-
тер имеет свою уникальную структуру каталогов и файлов, то и каждая Web-страница
также имеет уникальный адрес, называемый URL (Uniform Resource Locator - Унифици-
рованный указатель ресурсов).-Как видно из названия, URL может указывать не только
на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Trans-
fer 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">На первую страницу</а>
Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как некото-
рые браузеры могут не понять его без кавычек.
Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент
<а>... </а> тегами <center> и </center>.
>• Вставьте в файле spisok.html пустую строку перед закрывающим тегом </body> и
введите в ней следующий код:
<centerxa href ="geoton.html">Ha первую страницу</ах/сепЬег>
В окне браузера вы увидите результат примерно такой, как на Рис. 1.22. Ссылка На пер-
вую страницу будет подчеркнута и выделена другим цветом - таким, который преду-
смотрен в вашем браузере для непросмотренных ссылок.
2-1210
34
Создание Web-сайтов
•> Ввек *• •» » О й fl | Q Search Я Favorites 3 History
Address |a C:\WetAnpisok. html
Если у Вас есть вопросы или предложения, напишите нам:
| Отправить
На первую страницу
Ц Dona
Hgj My Computer
Рис. 1.22. Вставленная ссылка
>• Установите указатель мыши в окне браузера на ссылке На первую страницу. Указа-
тель мыши, который обычно имеет форму стрелки или текстового курсора, примет
форму "Ь •
> Щелкните мышью на этом месте. В окне браузера появится первая Web-страница из
файла geoton.html.
Таким образом, мы осуществили переход по ссылке на другую страницу сайта.
Теперь создадим гиперссылку для перехода с первой страницы - geoton.html - на вто-
рую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент
о нашей деятельности, так как список на второй странице раскрывает содержание
именно этого фрагмента текста. Поэтому^нам нужно в файле geoton.html поместить от-
крывающий тег <а> с атрибутом href ="spi sok.ht ml" перед фрагментом текста о на-
шей деятельности, а закрывающий тег </а> - после него.
> Откройте в программе Блокнот (Notepad) файл geoton.html.
> Отредактируйте этот файл, вставив тег <а href="spisok.html••> перед текстом
о нашей деятельности, а закрывающий тег </а> - после него. Код HTML в файле
geoton.html должен принять вид, как на Рис. 1.23.
Eile Edit Furmat Help
<html>
<head>
<1Ше>Конпания ГЕОТОН<ЛШе>
</head>
<body bgcolor=blue text=yellow>
«111 align=center>flo6po пожаловать на страничку компании ГЕОТОН!<Ы>
<centerximg src=CLOUD.GIF border=lx7ax/center>
<p style="font-weight: bold; font-style: italic; font-size: 150%; text-align: сеп1ег">3десь Вы
узнаете <a href="spisok.html">o нашей деятельности</а>, о программных продуктах
нашей компании и об оборудовании, которое мы производим</р>
</body>
</hhnl>
Puc. 1.23. Код HTML файла geoton.html после вставки ссылки
Web-страница изнутри
35
Скорее всего, что когда вы просмотрите результат в браузере, вы обнаружите, что ссыл-
ка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем,
что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом
фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовав-
шись атрибутами l i nk и vl i nk тега <body>. Атрибут l i nk определяет цвет непросмот-
ренной ссылки, a vl i nk - просмотренной. Еще один атрибут - al ink определяет цвет
ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Установим для непросмотренной ссылки белый цвет (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).
Die Edit View Favorites Tools tlelp
•• • © Ш <8 | ©Search SiFovorile» OHislory.j %» & Щ
Добро пожаловать на страничку
компании ГЕОТОН!
ЗЦ Справка
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
j My Computer
Рис. 1.24. Ссылка на первой Web-странице
> Щелкните мышью на ссылке о нашей деятельности. В окно браузера будет загружен
файл spisok.html.
> Перейдите в конец этой страницы, чтобы отобразить на экране ссылку На первую
страницу.
Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> ат-
рибуты link, vl i nk и al i nk с подходящими значениями цветов.
36
Создание Web-сайтов
>• Щелкните мышью на ссылке >1а первую страницу. В окне браузера опять появится
документ geoton.html.
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка.
Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите внимание: пока
переход не вставлен, указатель мыши при установке на рисунке имеет форму стрелки 1^.
Для создания такой ссылки достаточно в файле geoton.html вставить открывающий тег
<а href ="spisok.html"> перед тегом <img src=CLOUD.GIF border=l> И закры-
вающий тег </а> после него.
>• Отредактируйте файл geoton.html так, чтобы окончательный HTML-код документа
имел вид, как на Рис. 1.25.
File Edit Format Help
<html>
<head>
<1Ше>Компания ГЕОТОН<ЛШе>
</head>
<body bgcolor=blue text=yellow link=white vlink=yellow alink=redf>
<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'b-Здесь
Вы узнаете <a hrer==l'spisok.hnruJ">o нашей деятельностн</а>, о
программных продуктах нашей компании и об оборудовании, которое мы
производим</р>
</body>
</html>
Рис. 1.25. Окончательный HTML-код файла geoton.html
В окне браузера вокруг рисунка вы увидите тонкую рамку.
> Установите указатель мыши на рисунке. Теперь указатель мыши примет форму "Q, и
это явно указывает на то, что рисунок является ссылкой. В строке состояния браузера
появляется адрес, на который ссылается рисунок (Рис. 1.26).
rfile Edit View Favorites Tools Нв|р
4-Hack - •• - <Э @ (3 I ©Search ffl Favorites (^History
Address |g| C:\Web\GBOton.h4til
Добро пожаловать на страничку
компании ГЕОТОН!
ЗЕСправка
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
e:///C:/Web/spisok htlm
П|« МУ Computer
Рис. 1.26. Переход с рисунка создан
Web-страница изнутри
>• Щелкните мышью на рисунке. В окне браузера откроется документ spisok.html.
> Перейдите к ссылке На первую страницу и щелкните на ней мышью. В браузер снова
будет загружена страница geoton.html.
Создавая в этом опыте ссылки на страницы нашего сайта, мы использовали в качестве
адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем ката-
логе. Если бы нужный файл - spisok.html - находился, предположим, в подкаталоге Doc
текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего
каталога: <а href="Doc\spi sok.l i ti nl n >. Такая ссылка, в которой адрес указывается
относительно текущего каталога на том же компьютере, называется относительной.
Вы можете также использовать в ссылках полный 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: //www. 3st.ru/upl oads/price/price.xl s11>
При щелчке мышью на такой ссылке браузер подключится к указанному сайту, найдет
нужный файл и выведет на экран диалог с предложением сохранить этот файл на диске
вашего компьютера. После того, как вы укажете папку для сохранения, начнется процесс
копирования файла на ваш компьютер.
J№8. Создаем таблицу
До сих пор мы создавали документы, в которых текст располагался в одной колонке.
На практике иногда бывает необходимо расположить текст в двух или трех колонках.
Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может
эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя.
Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, таблица
нужна для отображения информации в табличном виде. Часто таблица используется для
представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню,
представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт
может содержать десятки страниц. Поэтому очень важно иметь возможность быстро вы-
бирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана
так, чтобы оно постоянно оставалось в поле зрения пользователя.
> Создайте новый текстовый файл, выбрав в меню программы Блокнот (Notepad)
команду Файл • Создать (File • New).
38
Создание Web-сайтов
>• Введите основные теги, создающие структуру документа. В заголовке документа
укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, что-
бы ссылки были хорошо видны:
<html>
<head>
<title>MeHKX/title>
</head>
<body bgcolor=eilver>
</body>
</html>
Каждая таблица начинается тегом <table> и заканчивается тегом </table>. Строки
таблицы образуются парой тегов <t rx/t r>, между которыми располагаются пары те-
гов <tdx/td>. Каждая пара этих тегов образует один столбец. Между открывающим
<td> и закрывающим </td> тегами помещается текст или любое другое содержимое
ячейки.
Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного
столбца и содержащую пункты меню с названиями страниц сайта, должен иметь сле-
дующий вид:
<table>
<Ъгхъа>Главная orpaiui4a</tdx/tr>
<trxtd>4eM мы занимаемся?</tdx/tr>
<trxtd>0 нашей KOMnaHjai</tdx/tr>
<trxtd>HoBOCTj*</tdx/tr>
<trxtd>06opyflOBaHne</tdx/tr>
<trxtd>Cneu. no</tdx/tr>
<trxtd>Hamn napTHepbi</tdx/tr>
<trxtd>Пpaйc-лиcт</td></tr>
<trxtd>CBHSb с кошанией< / t dx /tr>
</table>
> Вставьте пустую строку между открывающим <body> и
закрывающим </body> тегами и, начиная с нее, введите
указанный код.
>• Сохраните документ в папке Web под именем menu.html,
выбрав из меню программы Блокнот (Notepad) команду
Файл • Сохранить (File • Save).
>• Откройте в окне браузера файл menu.html. Таблица будет
иметь примерно такой вид, как на Рис. 1.27.
Созданная нами таблица располагается у левого края экрана.
Это положение можно изменить, использовав в открываю-
щем теге <table> атрибут al i gn=center для выравнивания
Главная страница
Чем мы занимаемся?
О нашей компании
Новости
Оборудование
Спец. ПО
Наши партнеры
Прайс-лист
Связь с компанией
Рис. 1.27. Созданная
таблица
Web-страница изнутри
39
таблицы по центру или атрибут al i gn=r i ght — для выравнивания по правому краю окна
браузера. Пункты меню расположены один под другим, а края таблицы и ячеек
не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показывают-
ся. Чтобы включить их отображение, следует использовать в теге <table> атрибут bor -
der, указав в качестве его значения толщину рамки в пикселах.
>• Добавьте в тег <tabl e> атрибут border=l, чтобы показать
рамку и ячейки таблицы толщиной 1 пиксел:
<table border=l>
Теперь таблица отображается
(Рис. 1.28).
с рельефными границами
Размер таблицы обычно устанавливается браузером автомати-
чески так, чтобы отображалось все ее содержимое. Однако вы
можете установить фиксированную ширину таблицы в пиксе-
лах с помощью атрибута width.
> Установите для таблицы ширину 140 пикселов, добавив
атрибут width=140 в открывающий тег <table> так, что-
бы он принял вид:
<table border=1 width=140>
В окне браузера ширина таблицы уменьшится так, что в большин-
стве ячеек текст будет отображаться в двух строках (Рис. 1.29).
При использовании для формирования столбцов таблицы те-
гов <t dx/t d> данные в ячейках представляются шрифтом
нормального текста и по умолчанию выравниваются по лево-
му краю ячеек. Если же требуется выделить данные в ячейках,
например, заголовки столбцов или строк таблицы, то вместо
тегов <t dx/t d> удобно использовать теги <t hx/t h>. Текст
в элементах <t hx/t h> обычно выделяется полужирным на-
чертанием и выравнивается по центру ячеек.
Наше меню будет выглядеть лучше, если его пункты будут
центрированы в ячейках и выделены полужирным шрифтом.
Поэтому заменим в HTML-коде элементы <t dx/t d> элемен-
тами <t hx/t h>.
у Отредактируйте файл menu.html, заменив теги <td> и
</td> соответственно тегами <th> и </th>. Код
HTML должен принять вид, как на Рис. 1.30, а таблица -
как на Рис. 1.31.
Главная страница
Чем мы занимаемся?
О нашей компании
Новости
Оборудование
Спец. ПО
Наши партнеры
Прайс-лист
Связь с компанией
Рис: 1.28. Рельефные
границы таблицы
Главная
страница
Чем мы
занимаемся?
О нашей
компании
{Новости
[Оборудование
Спец. ПО
Наши
партнеры
Прайс-лист
Связь с
компанией
Рис. 1.29.
Ширина таблицы
заф иксирована
40
Создание Web-сайтов
left menu.html - Notepad
File Edit Format Help
<html>
<head>
<title>MeHio</title>
</head>
<body bgcolor=silver>
<table bordei=l width=140>
<1гхЙ1>Главная страница<ЛЬ.хЛг>
<trxth>4eM мы занимаемся?<ЛЬхДг>
<trxth>0 нашей компании</ЛхДг>
<trxth>HoBOCTH</tfax/tr>
<й-хЙ1>Оборудование</й1Х/1г>
<trxth>Cnea. nO</thx/tr>
<trxth>Hanm партнерькЛЬ.хД1>
<frxth>tIpauc^HCT</thx/tr>
<(гхИ1>Связь с компанией<ЛЬхЛг>
</table>
</body>
</html>
Рис. 1.30. HTML-код таблицы
с элементами <th>
Главная
страница
Чем мы
занимаемся? s
О нашей
компании
Новости
Оборудование
Спец. ПО
Наши
партнеры
Прайс-лист
Связь с
компанией
Рис. 1.31. Таблица с элементами <th>
В тегах <td> и <th> вы можете использовать следующие атрибуты:
• al i gn - для горизонтального выравнивания содержимого ячеек по центру (center),
левому (l ef t ) и правому (right) краям ячейки;
•/ width - для указания ширины ячейки в пикселах;
• hei ght - для определения высоты ячейки;
i/ val i gn - для вертикального выравнивания данных в ячейке по верхнему (top) и
нижнему (bottom) краям и середине (middle) ячейки; по умолчанию
valign=middle.
> Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее со-
стояние.
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вста-
вив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
> Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для
таблицы.
Нам осталось теперь создать ссылки из двух первых пунктов меню на соответствующие
страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся
этими двумя ссылками. Как и прежде, воспользуемся тегами <ах/а> с атрибутом href.
В качестве значения этого атрибута для первого пункта меню - Главная страница - сле-
дует указать файл geoton.html, т.е. href = "geoton.html11, а для второго - Чем мы за-
нимаемся? - файл spisok.html, т.е. href =•• spisok.html".
В следующем опыте мы разделим экран по вертикали на два окна так, чтобы у левого
края экрана постоянно отображалась таблица с меню, а справа от нее - страницы нашего
Web-страница изнутри
41
сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке
новый документ отображается в том же окне, что и исходный, в котором была ссылка.
Чтобы отобразить его в другом окне, необходимо в открывающем теге <а> использовать
атрибут target, параметром которого должно быть имя того окна, в которое будет за-
гружен документ. В следующем опыте мы подробнее поговорим об этом и присвоим
соответствующему окну имя "frame", а сейчас укажем это имя как значение атрибута
target в ссылке: target= "frame". Еще раз подчеркнем, что в этом опыте Web-
страница будет загружаться в то же окно браузера, в котором находится ссылка, а атри-
бут target позволит загружать документ в другое окно, которое мы создадим в сле-
дующем опыте.
> Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню
Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки соот-
ветственно на файлы geoton.html и spisok.html так, чтобы эти строки приняли сле-
дующий вид:
<trxthxa href="geoton.html" target="frame">Главная
страница»:/ах/thx/tr>
<trxthxa href="spisok.html" target="frame">Чем мы занимаемся?</а>
</thx/tr>
Окончательный вид файла menu.html с HTML-кодом показан на Рис. 1.32, а таблицы в
браузере - на Рис. 1.33. Теперь первые два пункта меню выделены цветом и подчеркну-
ты как ссылки. Проверим, как работают эти ссылки.
ЕИв Edit Farmat Help
<html>
<head>
<title>Memo</title> '
</head>
<body>
<fable bordei=l width=140>
<trxthxahref="geoton.html" target="frame">rjiaBHM страяица</ах/Шх/Ь->
<trxthxahref="spisok.html" target="frame">4eM мы занимаемся?</ах/Й1Х/й^>
)<trxth>O нашей компании<ЛЬхДг>
<trxth>HoBOCTH</thx/tr>
<1гхШ>Оборудование<ЛЬхДг>
<(гхИ)>Спец. IIO</thx/tr>
<trxth>HauiH партнеры</ШхДг>
<ЬхЙ1>Прайс-лист<Д11хАг>
<й-хЙ1>Связь с компанией<ЛЬх/1г>
<ЛаЫе>
</body>
</html>
Главная
страница
Чем мы
занимаемся?
О нашей
компании
Новости
Оборудование
Спец. ПО
Наши
партнеры
Прайс-лист
Связь с
компанией
Рис. 1.32. Окончательный вид файла menu.html
с HTML-кодом таблицы
Рис. 1.33. Ссылки
в меню созданы
> Щелкните мышью на первой ссылке - Главная страница. В зависимости от версии
браузера, файл geoton.html будет загружен либо в новое отдельное, либо в то же са-
мое окно браузера.
42
Создание Web-сайтов
>• Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад
(Back) на панели инструментов или просто закройте окно, если файл был загружен в
новое окно. На экране снова отобразится файл menu.html.
>• Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера поя-
вится файл spisok.html.
Итак, на основе таблицы мы создали меню и убедились, что ссылки в нем работают.
JV&9. Создаем страницу с фреймами
Значительно улучшить внешний вид и функциональность сайта можно, используя фрей-
мы. С помощью фреймов экран разделяется на несколько окон, в каждом из которых
отображается содержимое отдельной страницы. Используя подобным образом техноло-
гию фреймов, можно одновременно загрузить в одно окно браузера несколько Web-
страниц.
На Рис. 1.34 приведен типичный пример применения фреймов. Окно браузера разбито по
вертикали на два фрейма. В левом отображается диалог поисковой системы, а справа -
наша первая Web-страница. Размер фрейма может изменяться пользователем прямо на
экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет ото-
бражать его независимо от других фреймов, и собственное имя, позволяющее перехо-
дить к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном
фрейме информацию, которую автор считает необходимым постоянно показывать поль-
зователю. Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д.
С помощью фреймов можно создавать также окна запросов, когда в одном фрейме нахо-
дится собственно запрос, а в другом - его результаты.
Ей» Edit View Favorites l ool s Цв|р
<Х (Jew 4)? N»j(t • | Customize
Выберите категорий» поиске:
<*: Поиск Beg-строницы
О Преацауший поиск
Поиск веб-страницы.
содержащей:
Поиск иных объектов:
©2000 Microsoft Corporation. All rights
reserved. Ургщрня использования
й
Добро пожаловать на
страничку компании
ГЕОТОН!
ЗН Справка
Здесь Вы узнаете о нашей
деятельности, о программных
продуктах нашей компании и об
оборудовании, которое мы
I My Computer
Рис. 1.34. Окно браузера с фреймами
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на
другие страницы сайта и сами страницы.
Web-страница изнутри 43
Для описания фреймов используется специальный HTML-файл.
> В окне программы Блокнот (Notepad) создайте новый файл.
> Введите основные теги, кроме'тегов <bodyx/body>, которые в файле, описываю-
щем фреймы, не используются. В тегах <t i t l e x/t i t l e > заголовка укажите - Ком-
пания ГЕОТОН:
<html>
<head>
<title>KoMnajo«i rE0TOH</title>
</head>
</html>
Вместо тегов <bodyx/body> в файле, описывающем фреймы, используется пара тегов
<framesetx/frameset> с атрибутами rows или col s, определяющими, как делится
экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно
использовать числовое значение высоты или ширины фрейма в пикселах или в процен-
тах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали
на два равных по размеру фрейма, то код HTML должен быть таким:
<frameset rows="50%,50%">
Обратите внимание: значения атрибутов отделяются один от другого запятой.
Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пиксе-
лов, следует написать:
<£ratneset col s = "200, 600">
Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения
монитора. Поэтому, если у пользователя установлено разрешение, например,
1024x768 пикселов, т.е. ширина экрана - 1024 пиксела, то часть экрана может ос-
таться незаполненной. Поэтому рекомендуется задавать размеры фреймов в процен-
тах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из
окон указать фиксированный размер в пикселах, то размер другого окна можно не
указывать, заменив его значение символом *. В этом случае браузер сам подберет
нужный размер для второго окна.
Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрей-
ма, в котором будет выводиться меню, установим фиксированную ширину - 160 пиксе-
лов, а размер второго предоставим определить браузеру, заменив его звездочкой *.
>• В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего
тега </head> и введите следующий код:
<frameset cols="160,*">
</frameset>
Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на
два фрейма. Для описания каждого фрейма в отдельности используются одиночные теги
<frame>, которые должны находиться внутри элемента <frameset>.. ,</frameset>.
Обязательным атрибутом тега <frame> является его, значение его - адрес документа,
44
Создание Web-сайтов
который должен находиться в данном фрейме. Так как в первом фрейме будет находить-
ся файл menu.html, то данный тег следует записать так:
<frame src="menu.html">
v Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего
тега <f rameset> и введите указанный тег.
Во второй фрейм должен загружаться файл geoton.html, поэтому второй тег <frame>
будет таким:
<frame src="geoton.html"> i
Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта -
spisok.html и другие, которые, возможно, будут созданы, - необходимо с помощью ат-
рибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого
документа в качестве значения атрибута target, определит, в какой именно фрейм сле-
дует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый
документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам
нашего меню страницы открывались не в первом фрейме, в котором расположено меню,
а во втором, мы использовали в предыдущем опыте в ссылках меню атрибут target
со значением "frame": target="frame", где "frame" - это имя второго фрейма. И те-
перь имя "frame" следует присвоить второму фрейму, в котором должен открываться
файл geoton.html. Поэтому второй тег <frame> в окончательном виде должен быть за-
писан так:
<frame sro="geoton.html" name="frame">
>• Введите этот код, вставив пустую строку перед закрывающим тегом </frameset>.
> Сохраните файл в папке Web под именем index.html.
Окончательный код файла index.html в окне программы Блокнот (Notepad) должен быть
таким, как на Рис. 1.35.
Я index, html - Notepad
File Edit Fnrmat Help
<html>
<head>
<title>KoMnamw ГЕОТОН<ЛШе>
</head>
<frameset cols=160,*>
<frame src="menu.html"j>
<frame src="geoton.html" name="frame">
</html>
В
Рис. 1.35. Окончательный код файла index.html
Web-страница изнутри
45
Имя index.html должно обязательно присваиваться файлу с главной
страницей каждого сайта. Именно этот файл открывается по умолча-
нию при обращении к Web-узлу, если не указано другое имя файла. На не-
которых сайтах имя главной страницы может быть index.htm,
a index.html отображается не как страница, а как папка с именами фай-
лов. Это надо уточнять у администратора узла.
Теперь можно просмотреть, как выглядят созданные фреймы.
>- Откройте в браузере файл index.html из папки Web. Вы увидите, что окно программы
просмотра разделено по вертикали на два фрейма. В левом фрейме отображается ме-
ню, а в правом - файл geoton.html (Рис. 1.36).
13 Компания ГЕОТОН - Microsoft Internet Explorer - [Working Offline]
File Edit Vifiw Favorites Tools tielp
E| ffl |
SFavorHes OHistory | i fe- Ш Щ •*
Address |g C:\Wsb\index. hlml
Tj
Чем мы I
занимаемся?!
О нашей
компании
Новости
|Оборудовани^
I Спец. ПО j
Наши
партнеры
j Прайс-лист
Связь с
компанией I
Добро пожаловать на
страничку компании ГЕОТОН!
I 53 Справка
Здесь Вы узнаете о нашей деятельности,
о программных продуктах нашей
компании и об оборудовании, которое мы
производим
и и
I My Computer
Рис. 1.36. Фреймы созданы
Проверим, как работают ссылки меню.
> Щелкните мышью на ссылке меню Чем мы занимаемся? В правом фрейме будет
открыт файл spisok.html.
> Щелкните мышью на ссылке меню Главная страница. В правом фрейме снова поя-
вится файл geoton.html.
Обратите внимание, что каждый фрейм имеет свои полосы прокрутки. При необходимо-
сти их отображение можно отменить. Для этого достаточно в теге <frame> указать атри-
бут scrolling=no. . .
>• Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no:
<frame src="menu.html" scrolling=no>
В окне браузера Web-страница примет вид примерно как на Рис. 1.37.
46
Создание Web-сайтов
Address |gl C:\Web\indax. hlml
Чем
занимаемся?
О нашей
компании
Новости
[[Оборудование
I Спец. ПО
Наши
партнеры
Прайс-лист
Связь с
компанией
Добро пожаловать на
страничку компании ГЕОТОН!
ЗДСправка
Здесь Вы узнаете о нашей деятельности,
о программных продуктах нашей
компании и об оборудовании, которое мы
производим
И Done
I rel Ь*У 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. Часто существенное значение имеет то, насколько быстро обновле-
ния вступают в силу. При выборе сервера обратите внимание на то, чтобы обновление
было для вас в максимальной степени удобным.
Для многих пользователей имеет значение вид адреса, который бесплатная служба при-
своит сайту. Большинство предпочтет короткий, компактный адрес geoton.narod.ru
длинному и трудно запоминающемуся www.geocities.com/304/tracker/geoton.
Часто бесплатные службы предоставляют дополнительные услуги: счетчик посещений,
гостевую книгу, чат, форум, возможность участия в конкурсе на лучшую страницу и др.
В зависимости от целей, которые вы преследуете, создавая сайт, перечень этих услуг
может иметь для вас значение при выборе бесплатной службы.
Немаловажное значение имеет то, насколько быстро работает тот сервер, на котором вы
разместите свои страницы. Вряд ли посетители захотят часто «заходить к вам», если ва-
ши страницы долго загружаются. При прочих равных условиях для сайта лучше исполь-
зовать «быстрый» сервер, чем «медленный».
И, наконец, выбирая бесплатную службу, решите, какой объем дискового пространства
вам требуется. Обычно эти службы предоставляют каждому пользователю от 512 кило-
байт до 20 мегабайт дискового пространства. Нескольких мегабайт вполне достаточно
для небольшого сайта. Но если разрабатывается масштабный проект, то следует реально
оценить его перспективы и возможности бесплатной службы по дальнейшему увеличе-
нию дискового пространства.
Ниже приводится список серверов, предоставляющих бесплатно место для Web-сайта с
их краткой характеристикой. Сначала иностранные серверы. Но помните, что из России
связь с иностранными серверами всегда хуже, чем с российскими. Так что подумайте,
что для вас лучше - много места или скорость загрузки.
• www.mysiteinc.com - 2 Мб, быстрый сервер, адрес вида www.MySitelnc.com/
Ваше_имя.
• www.tripod.lycos.com/leammore/tripodfree.html - 20 Мб, быстрый сервер, FTP-
доступ, можно через браузер, гостевая книга, адрес: members.tripod.com/Baiue_Miym.
• www.geocities.com - 15 Мб, FTP-доступ, гостевая книга. Недостатки - очень мед-
ленный сервер, длинный адрес, всплывающее окно, логотип внизу странички.
Размещение страниц в Интернете
49
Российские бесплатные службы.
• www.chat.ru - 10 Мб для страниц, 10 Мб для хранения писем в почтовом ящике, дос-
туп с помощью файлового менеджера и FTP, адрес вида www.chat.ru/~Bauie_HNm,
Ваше_имя.спа1.ги, Ваше_имя.еиго.ш или Ваше_.имя.pochta.org.
• www.narod.ru - неограниченное пространство, почтовый ящик, доступ с помощью
файлового менеджера и FTP, гостевая книга, чат, форум, адрес: Ваше^имя.narod.ru.
• www.newmail.ru - 32 Мб для страниц, 32 Мб для хранения писем в почтовом ящике.
J№1. Создание адреса вашего сайта в Интернете
Если вы решили поместить сайт на сервере своего провайдера, то вам следует получить
у него следующую информацию, необходимую для доступа:
• выделенный вам адрес URL. Возможно, провайдер позволит вам самому выбрать адрес;
• логин или имя для доступа;
^ пароль для доступа.
Кроме того, вам необходимо выяснить, по какому протоколу осуществляется доступ к
серверу: HTTP или FTP.
О том, как практически осуществить пересылку файлов на сервер провайдера, мы пого-
ворим в следующих опытах.
Если же вы решили воспользоваться бесплатной службой, то познакомьтесь ближе с ус-
ловиями, требованиями и услугами каждой из них, и, руководствуясь критериями, изло-
женными выше, выберите ту, которая подходит вам больше других.
Следующее, что нужно сделать - это зарегистрироваться в бесплатной службе. Процеду-
ра регистрации очень простая. Рассмотрим кратко для примера, как зарегистрироваться
на сервере www.narod.ru.
>• Установите соединение с Интернетом и загрузите начальную страницу сайта
www.narod.ru (Рис. 2.1), указав этот адрес в адресной строке браузера.
>- В левом верхнем углу страницы есть ссылка Регистрация. Щелкните на ней мы-
шью. На экране появится первая форма для регистрации (Рис. 2.2), которую сле-
дует заполнить и нажать кнопку Дальше в нижней части страницы, чтобы про-
должить регистрацию.
В предлагаемых формах вы должны указать выбранное вами имя для вашего сайта, логин и
пароль для доступа, а также персональные данные: фамилию, имя, адрес, e-mail и др.
Возможно, имя, которое вы выберете для сайта, окажется занятым. Если это произойдет, то
вы получите соответствующее сообщение с предложением выбрать другое имя.
, При заполнении форм следует строго придерживаться правил, установленных бесплатной
службой. Эти правила указаны здесь же на форме. Например, на данном сервере требуют,
чтобы пароль содержал не менее четырех символов и не совпадал с логином.
50
Создание Web-сайтов
С 30 июня по 5 июля
посетители Narod.ni
оценивали
телевизионные
рекламные ролики.
голосован! м
• Обсудить в форуме
Займите это имя для своего сайта
I .iiarod.ni f »"^
II получите в придачу
неограниченное пространство,
готовые варианты дизайна, счетчики,5;
статистику посяцений, гостевую
книгу, персональный форум и чат.
Логин:
Пароль: f
• Лучшие сайты
Бизнес и экономка
' (668)
) надо. Что здесь дают,
р. Образцы страниц.
• Помощь, Польчоватепьское
Рис. 2.1. Главная страница сайта www.narod.ru
Hndex
Регистрация: шаг 1 из 2
Логин:
должен состоять из символов А-г. 0-9. -. начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не более 20 символов
Существует мнение, что все хорошие логины
на Яндексе уже заняты. Но это не так. Мы
можем посоветовать вам интересный
незанятый логин. Для этого достаточно
' указать имя и фамилию (они понадобятся и
для дальнейшей регистрации).
Рис. 2.2. Форма регистрации на сайте www.narod.ru
Готово!
Регистрация успешно завершена.
Просим вас найти минуту и рассказать
немного о себе, чтобы Яндексу было легче
вас обслуживать, а вам — удобней
пользоваться Яндексом.
Дополнительная информация
Обращение:
Псевдоним:
Пол:
О предпочитаю не указывать
О мужской
Сженский
Ваш день | | января l j"
Рис. 2.3. Сообщение об успешной регистрации
Размещение страниц в Интернете
51
>• Заполнив обе формы, нажмите кнопку ОК в конце второй формы. Если вы все ввели
правильно, то появится страница с сообщением об успешной регистрации и предло-
жением ввести необязательную дополнительную информацию (Рис. 2.3).
>• Когда регистрация будет закончена, нажмите кнопку Сохранить в конце формы с
сообщением об успешной регистрации. В окно браузера загрузится страница для на-
стройки Яндекса (Рис. 2.4).
Япёех
Настройка Яндекса
Яндекс
Телепрограмма Настройка каналов I
[бгиоча
поиска
Почта Письма
geotor)5@yandex ru ' •
geoton5@narod.ru Настройка Почть.
Удалить
почтовый
Подписки
Закладки
Доставка
электронной почте
Каталог ваших
личных осыпок
Рис. 2.4. Страница для настройки Яндекса
>• Щелкните мышью на ссылке Выход и прервите связь с Интернетом.
Через некоторое время на адрес e-mail, который был указан при регистрации, вы получи-
те письмо от Yandex Validator, в котором будет приведена ссылка для подтверждения
регистрации.
>• Соединитесь с Интернетом и загрузите в браузер страницу, указанную в сообщении
e-mail. Это страница для ввода имени и пароля (Рис. 2.5).
i t ^ ВЕЗ ""Р *"* L**:
Hndex
Доступ к персональной части Яндекса
Логин:
Пароль:
Забыли пароль?
С чужой компьютер а
Г'Войтп
Вы можете авторизоваться под другим именем.
Рис. 2.5. Страница для ввода имени и пароля
52
Создание Web-сайтов
> Введите имя и пароль и нажмите кнопку Войти. В окно браузера загрузится страница
для подтверждения адреса e-mail (Рис. 2.6).
Файл Правка Вид Избранное Сервис Справка
©На,-
[ J
*дас: |$hUp://validatoi.yande».!u,'c(>nliim xinl?Ke>.b67ca33386ld1[)47c405neaa5*5beb3864137110B330313 j £| Ц Переход j Lrtt
~ ~ у
Регистрация на Яндексе: подтверждение e-mail
После подтверждения этого адреса вы сможете использовать его для
получения информации от служб Яндекса.
На все ваши персональные данные распространяется действие Соглашения
0 конфиденциальности информацм.
1 Подтвердить I
Посмотреть список -зарегистрированных e-mail
Маркет - Деньги - Почта - Народ - Новости - Каталог - Директ - Энциклопедии - Словарь Лингво -
Закладки- Открытки - Бар - Игрушки - Подписки - Гостиная - Мой Яндекс - Отпуск
Jfc
Рис. 2.6. Страница для подтверждения e-mail
> Нажмите кнопку Подтвердить. В окно браузера загрузится страница о Подтвержде-
нии адреса e-mail (Рис. 2.7).
Файл Правил £иа Избранное Сервис Справ*,
g| gj
0' Ш Й ' •
Апрвс.|ghUp//vali.iaKir >and««.iu/conlirni.»iiil?teit-b6yca93986ld1047e405lleja!i<bbeli98HI371108930313ТД Ы Перещц | Link!
Регистрация на Яндексе: подтверждение e-mail
После подтверждения этого адреса вы сможете использовать его для
получения информации от служб Яндекса.
На все ваши персональные данные распространяется действие Соглашения
о конфиденциальности информации:
Адрес llv@peiiza.com.ni добавлен в список зарегистрированных.
• Посмотреть список чарегнстм юованных e-mail
Маркет - Деньги - Почта - Народ - Новости - Каталог - Директ - Энциклопедии - Словарь Лингво -
Закладки - Открытки - Бар - Игрушки - Подписки - Гостиная - Мой Яндякс - Отпуск
Рис. 2.7. Страница о подтверждении e-mail
Теперь создаваемый Web-сайт Ваше__имя.narod.ru открыт для доступа с помощью брау-
зера из любой точки Интернета.
Размещение страниц в Интернете
53
На адрес e-mai], который был указан при регистрации, вы получите письмо от службы
поддержки Яндекса об успешной регистрации, в котором, кроме регистрационных дан-
ных, будет приведена информация о платных и бесплатных службах Яндекса, которыми
вы теперь можете воспользоваться.
€шь4/т J№2. Размещение Web-страниц с помощью
менеджера файлов бесплатной службы
Теперь, когда вы зарегистрировали свой сайт и получили всю необходимую для доступа
информацию, можно приступать к пересылке файлов. Посмотрим сначала, как для этой
цели использовать интерфейс загрузки сервера www.narod.ru.
>• Установите связь с Интернетом.
> Загрузите главную страницу www.narod.ru (Рис. 2.1).
>- В правой части этой страницы в группе элементов управления Вход введите в соот-
ветствующих полях ввода ваши Логин и Пароль.
Будьте внимательны при вводе пароля, так как вводимые символы отображаются звез-
дочками *. Помните также, что пароль чувствителен к регистру, т.е. заглавные и строч-
ные буквы в пароле различаются.
> Нажмите кнопку Войти. На экране появится страница для создания сайта (Рис. 2.8).
Hndex
Создание сайта на Народе
Ваш сайт: geoton.narod.ru
Создать
Copyright
© 2001—2004 «ЯНДЕКС»
О компании
_Е
Рис. 2.8. Страница для создания сайта
> Нажмите кнопку Создать. В окно браузера загрузится страница Мастерская, на ко-
торой можно выбрать один из готовых шаблонов страницы и произвести действия по
управлению сайтом (Рис. 2.9).
>• Выберите в меню ссылку Загрузка файлов на сайт. На экране появится страница
Мастерская / Управление файлами / Загрузка файлов (Рис. 2.10).
54
Создание Web-сайтов
• Главная страница
• Про меня
• Фотоальбом
« Резюме
• Любимые ссылки
• Дня фанатов и
поклонников
• Романтика
• Объявление или
• Статистика посещений •
• Управление фаГша№1 и
HTML-редпктор •
• Загручка файлов на
сайт»
• Доступ к файлам по FTP
• Индексирование в
поисковых системах
• Отключение баннера
ffiiPert
Е
Рис. 2.9. Страница Мастерская
Мастерская / Управление файлами / Загрузка файлов Проект: Gtoton.nai-od.ru
Загручка в папку «Корневая папка» Выбрать папку
Обзор..
ОВэор...
Обзор...
Обзор .
Обзор..
1
!
1
Обзор .
Обзор...
Обзор...
Обуор.
Обзор .
Объём каждого файла недолжен превышать 5 Мб!
Загрузить файлы | i Очистить |
Проверка свободного места
л
Рис. 2.10. Раздел Загрузка файлов
В этом разделе менеджер файлов позволяет вам выбрать файлы для загрузки.
> Нажмите левую верхнюю кнопку Обзор (Browse). На экране появится диалог Вы-
бор файла (Choose file), который ничем не отличается от стандартного диалога от-
крытия файла.
> Перейдите в папку Web, в которой вы сохранили файлы сайта, и щелчком мыши вы-
берите файл index.html.
>• Нажатием кнопки Открыть (Open) закройте диалог Выбор файла (Choose file). Пол-
ное имя выбранного файла появится в верхнем левом поле ввода, слева от кнопки
Обзор (Browse).
> Выберите остальные файлы сайта - geoton.html, spisok.html, menu.html,
CLOUD.GIF - нажимая поочередно каждую следующую кнопку Обзор (Browse).
Размещение страниц в Интернете
55
>• Когда все пять файлов будут выбраны, нажмите кнопку Загрузить файлы. Через неко-
торое время, после того как файлы будут загружены, появится страница с сообщением
об этом (Рис. 2.11), а затем вы возвратитесь к странице загрузки файлов (Рис. 2.10).
Файл index.html загружен в корневую палку !
Файл CLOUD.GIF зягружен в корневую папку !
Файл geotonJitml загружен в корневую папку !
Файл lnenu-html загружен в корневую папку ! -
Файл spisiik.html загружен в корневую папку !
Начал
Поубивал бы,
да неохота самому возиться.
Убимем
К * НЗМСТНЫ*
•оды сплыл
J3
Рис. 2.11. Файлы загружены на сервер
Таким образом, вы одновременно можете загрузить до 10 файлов. Если требуется пере-
слать на сервер большее количество файлов, то операцию загрузки следует повторить.
> На странице Загрузка файлов (Рис. 2.10) щелкните мышью на ссылке Управление
файлами и перейдите на соответствующую страницу (Рис. 2.12).
Мастерская / Управление файлами
Проект: Geoloii.iiarod.nl Ь
Создать папку | Создать страницу по шаблону | Создать html-файл |
Загрузить файлы I Настройки I %
{Отмечекюе:
; CLOUD.GIF
11297Б
09.07.2004
Рис. 2.12. Страница Управление файлами
> Разорвите связь с провайдером.
На странице Управление файлами вы можете создать папку или html-файл, отредакти-
ровать, скопировать, переместить, переименовать и удалить файл. Подсказку о назначе-
нии каждой кнопки вы увидите, если установите на ней указатель мыши. Для выполне-
ния перечисленных операций с одним или несколькими файлами, необходимо предвари-
тельно выбрать их, установив флажок слева от имени.
56
Создание Web-сайтов
Несмотря на то, что стандартной кодировкой русскоязычного текста для Web-страниц
является кодировка Winl251, некоторые бесплатные службы используют на своих серве-
рах другие кодировки. По данным статистики, русскоязычная часть Интернета использу-
ет на 95% кодировку Winl251 и на 5% - кодировку КОИ-8. Это, однако, не создает
для пользователей никаких препятствий или проблем, если загрузка выполняется с по-
мощью файлового менеджера. При пересылке ваших Web-страниц на этот сервер ме-
неджер файлов службы спросит у вас, в какой кодировке составлены документы. Если вы
использовали текстовый редактор в Windows, то кодировка документа Win1251, если в
DOS, то кодировка DOS, если в Unix, то кодировка КОИ-8, если в Macintosh, то кодировка
Мае. На основании вашего ответа файловый менеджер автоматически перекодирует
ваши страницы.
В том случае, когда вы создаете свои страницы в кодировке, отличной от Winl251 и разме-
щаете их на сервере, где явно не указана требуемая кодировка, вы должны сами перекодиро-
вать их в Winl251 с помощью одной из специально для этого предназначенных программ.
Как выглядят наши страницы в Интернете, мы увидим в дальнейшем, а сейчас рассмот-
рим другие способы пересылки файлов на сервер.
€myr/m JV&3. Размещение Web-страниц с помощью
Netscape Composer
Еще одну возможность опубликования Web-документов обеспечивает браузер Netscape,
вернее, не сам браузер, а программа Netscape Composer, поставляемая вместе с браузером.
> Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося меню выбе-
рите команду Программы • Netscape 7.1 • Composer (Programs • Netscape 7.1 • Com-
poser). Программа "будет запущена, и на экране появится ее рабочее окно (Рис. 2.13).
Рис. 2.13. Рабочее окно программы Composer
Программу Composer можно также запустить из рабочего окна браузера Netscape Navi-
gator, выбрав команду меню File • Edit Page (Файл • Редактировать страницу). Данная
Размещение страниц в Интернете
57
программа предназначена для создания Web-страниц. Но сейчас мы воспользуемся ею
для публикации уже готовых документов.
Так как нам нужно переслать на сервер пять файлов из папки Web, то удобнее будет от-
крыть один из файлов в рабочем окне программы Netscape Composer.
> Нажмите кнопку
на панели инструментов в верхней части рабочего окна про-
граммы и в появившемся диалоге Open (Открыть) выберите папку Web, а в ней файл
index.html. Однако рабочее окно останется пустым, так как код HTML данного файла
не содержит тегов <bodyx/body>.
>• Нажмите кнопку
на панели инструментов в верхней части рабочего окна про-
граммы. Если в программе Composer еще не был определен ни один сайт, то на экра-
не появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой Pub-
lish (Опубликовать), на которой необходимо определить параметры доступа к сайту
(Рис. 2.14).
Server Information
Site Name:
Publishing address [e.g.: 'ftp://ftp.mvisp.com/myueername'):
HTTP address of" your homepage (e.g.: 'http://www.myisp.com/myusernaine*):
•1С
Login Information
Usei name:
Pastwoid: Г
Save Paxsword
Рис. 2.14. Вкладка Publish (Опубликовать) диалога
Publish Page (Опубликовать страницу)
Если же в программе Composer был определен хотя бы один сайт, то на экране сразу
появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой Settings
(Установки) (Рис. 2.16).
> В поле ввода Site Name (Имя сайта) введите краткое имя или придуманный вами
псевдоним сайта, на котором вы хотите опубликовать страницу, например, narod.ru.
>• В поле ввода Publishing address (Адрес для публикации) нужно набрать адрес для
доступа к сайту по протоколу FTP в виде пр://ваш_логин:ваш_пароль@0р.паго(1ги.
Например, если ваш логин в Яндексе - myname, а пароль к нему - 12345, то адрес дол-
жен быть таким: ftp://myname:12345@ftp.narod.ru.
58
Создание Web-сайтов
>• В поле ввода HTTP address of your homepage (Адрес HTTP вашей домашней стра-
ницы) введите адрес, который указал вам провайдер, или который вы получили в бес-
платной службе, например, http://geoton.narod.ru.
> В полях ввода User name (Имя пользователя) и Password (Пароль) введите соответ-
ствующую информацию для доступа к серверу, которую вы получили от провайдера
или в бесплатной службе.
>• Убедитесь, что установлен флажок Save password (Сохранить пароль). Это по-
зволит сохранить ваш пароль и избавит от необходимости в дальнейшем каждый
раз вводить его.
>• Нажмите кнопку Publish (Опубликовать). На экране появится диалог, предупреж-
дающий о том, что имя файла еще не определено (Рис. 2.15).
Please enlei a filename for the current page.
Puc. 2.15. Диалог с предложением ввести имя файла
> Нажмите кнопку ОК. На экране появится диалог Publish Page (Опубликовать стра-
ницу) с открытой вкладкой Settings (Установки).
Publish Page
Publish j Settings]
Site Name: [_http://www.narod.ru
Page Title: j
Filename:
Site subdirectory for this page:
1
r 0 Include images and other files
"« 0 Use same location as page
• О Use this site subdirectory:
• H
]
1
| Ne
e.g.:
e.g.:
н Site | _
"My Web Page"
"mjipage.rttml"
!
1
Hi
Puc. 2.16. Вкладка Settings (Установки) диалога Publish Page (Опубликовать страницу)
Если в открывающемся списке Site Name (Имя сайта) нет требуемого сайта, то необхо-
димо нажать кнопку New Site (Новый сайт), чтобы перейти на вкладку Publish (Опубли-
ковать) диалога Publish Page (Опубликовать страницу) (Рис. 2.14) и определить пара-
метры доступа к сайту.
Размещение страниц в Интернете
59
>• В поле ввода Page Title (Заголовок страницы) укажите название страницы, например,
Компания ГЕОТОН, а в поле ввода Filename (Имя файла) - имя, под которым файл
должен быть записан на сервере.
При копировании какого-либо файла в каталог, в котором уже имеется файл с таким же
именем, новый файл записывается поверх старого.
Прежде чем продолжить, необходимо подключиться к Интернету.
> Не закрывая диалог Publish Page (Опубликовать страницу), установите соединение с
провайдером.
> Нажмите кнопку Publish (Опубликовать). На экране появится диалог с предложением
ввести пароль для доступа к сайту (Рис. 2.17).
Enter password for geolon on ftp://geoton@ftp.naiod.iu
Use Passwoid Manager to save this password
Рис. 2.17. Диалог с предложением ввести пароль для доступа к сайту
Введите пароль и нажмите кнопку ОК. На экране появится диалог, отображающий
процесс публикации файла на сервере (Рис. 2.18).
Publishing: Кампания ГЕОТОН
Publishing to Site: http://www.narod.ru
Site URL:
ftp://geoton5.narod.ru/
г Publishing Status
Publishing...
index.html
О Keep this window open after publishing is complete.
I Cancel
Puc. 2.18. Диалог, отображающий процесс публикации файла
По окончании процесса публикации файла этот диалог исчезнет, а в заголовке окна про-
граммы Composer появятся название документа Компания ГЕОТОН и имя опубликован-
ного файла index.html (Рис. 2.19).
60
Создание Web-сайтов
File Edit View jnsett Format Table loots Window Kelp
f Normal fJB3 HTML faa»j<HTHL>Souice|x>« PrwriewJ
Q E3 & g D <body>
Рис. 2.19. Рабочее окно программы Composer
с названием документа и именем файла в заголовке
> Отключитесь от Интернета и закончите работу с программой Netscape Composer,
закрыв ее рабочее окно.
Для пересылки файлов по протоколу FTP удобнее использовать специальные програм-
мы, о чем будет рассказано в следующем опыте.
JV&4. Размещение Web-страниц по FTP-протоколу
Мы уже упоминали о том, что FTP - это протокол, который позволяет пересылать файлы
по сети. Причем не только текстовые файлы, но и двоичные, т.е. любых форматов.
Кроме пересылки файлов с Web-документами, этот протокол используется для перепи-
сывания файлов с дистрибутивными копиями программ с FTP-серверов, на которых они
хранятся, на компьютер пользователя. Для работы с FTP-серверами удобна условно бес-
платная программа CuteFTP. В течение 30 дней вы можете работать с ней бесплатно,
чтобы оценить ее возможности, а после этого оплатить стоимость программы или отка-
заться от ее использования.
Если у вас нет программы CuteFTP, то загрузить ее последнюю версию можно с сайта
www.cuteflp.com. Версии программы CuteFTP 6 Home и CuteFTP 6 Professional содер-
жатся в папке \Soft\FTP компакт-диска, прилагаемого к данной книге. После загрузки
программу следует установить. Для этого достаточно дважды щелкнуть мышью на знач-
ке загруженного файла в окне программы Проводник (Windows Explorer) и следовать ука-
заниям программы установки. После завершения установки программы CuteFTP с ней
можно работать.
>• Подключитесь к сети Интернет.
Размещение страниц в Интернете
61
>• Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося меню вы-
берите команду Программы • GlobalSCAPE • CuteFTP Home • CuteFTP Home (Pro-
grams • CuteFTP • CuteFTP).
При первом запуске программы появится окно приветствия, в котором вам напоминают
о количестве оставшихся дней бесплатного использования программы (Рис. 2.20).
Welcome to CuteFTP Home!
Purchase
Support
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 proc eed
with the evaluation.
Knowledge Base
Lost Serial Number
© 2004 GlobalSCAPE Texas. LP
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 yog want to connect with.
The address wit! typically resemble something like
ftp.horrtetown.aol.com or ftpij^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.
< Назад I &am»> | '• Отмена | - Справка |
Рис. 2.21. Первый диалог мастера подключения CuteFTP
62
Создание Web-сайтов
В поле ввода следует ввести FTP-адрес, который вы получили от вашего провайдера или
бесплатной службы. Если вы размещаете Web-страницы на сервере www.narod.ru, то
FTP-адрес будет таким: Пр://ваш_логин:ваш_пароль@г1р.пак^.ги.
Например, если ваш логин в Яндексе - myname, а пароль к нему - 12345, то адрес дол-
жен быть таким: ftp://myname:12345@ftp.narod.ru.
> В поле ввода введите FTP-адрес вашего сайта и нажмите кнопку Далее (Next). На эк-
ране появится второй диалог мастера подключения CuteFTP (Рис. 2.22).
Enter the assigned user name 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.
ysername:
Password;
[geoton
!••••• i
< Назад [Далее > [ Отмена | j Справка
Рис. 2.22. Второй диалог мастера подключения CuteFTP
> В полях ввода Username (Имя пользователя) и Password (Пароль) введите соответ-
ственно логин и пароль, которые вы получили у провайдера или при регистрации в
бесплатной службе.
>• Нажмите кнопку Далее (Next) На экране появится третий диалог мастера подключе-
ния CuteFTP (Рис. 2.23).
When connecting to this FTP site, CuteFTP will
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 will appear in these folders by
default. You can change these settings at any time. If
you are not sure what to enter here, then dick on
"Next".
Default Local Folder:
Default Eemote Folder:
I
| <Ца»ад I Дал«> | | Отмена | | Справка
Рис. 2.23. Третий диалог мастера подключения CuteFTP
Размещение страниц в Интернете
63
>• В поле Default Local Folder (Локальная папка по умолчанию) укажите путь к папке
Web, в которой находятся файлы нашего сайта. Эта папка будет автоматически откры-
ваться на локальном жестком диске пш подключении к FTP-серверу.
Для указания папки можно воспользоваться кнопкой |
ля Default Local Folder (Локальная папка по умолчанию).
расположенной справа от по-
В поле Default Remote Folder (Удаленная папка по умолчанию) можно указать, какая
папка будет автоматически открываться на FTP-сервере. В нашем случае это поле запол-
нять не нужно.
>• Нажмите кнопку Далее (Next) На экране появится заключительный диалог мастера
подключения CuteFTP (Рис. 2.24).
CuteFTP Connection Wizard
Vou 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.
<Цазад if'"готово 1 Г Отмена Г Справка
li a a i i i i i a a j I | I I
Puc. 2.24. Заключительный диалог мастера подключения CuteFTP
> Нажмите кнопку Готово (Finish) На экране появится рабочее окно программы
CuteFTP (Рис. 2.26), а поверх него - диалог Tip of the Day (Совет дня) (Рис. 2.25).
Did you know...
Welcome to CuteFTP! 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.
E Show tips on start up. j Next Tip | Close
Puc. 2.25. Диалог Tip of the Day (Совет дня)
64
Создание Web-сайтов
Если в диалоге Tip of the Day (Совет дня) сбросить флажок Show tips on the start up
(Показывать советы при запуске), то этот диалог больше появляться не будет.
lite GlobalSCAPE - CuteFTP 6.0 • [naiod.iu - ftp.naiod.iu. Status: Connected)
File Edit View
Q D:\Web
Name.
g j index, html
tgQmenu.html
30geoton.html
ЗЙ spisok.html
QCLOUD.GIF
<t
/ «
чттятw<«
Sim
Item Name
For Help, press FI
Tools
Window Help
...Eh* Ш
/ Size I T
182 b...
505 b...
517 b...
1.23 KB
11.03...
HTML Docu... 0
HTML Docu... D
HTMLDocu... 0
HTML Docu... 0
Рисунок GIF G
I l >
\ Address | <->
• loo
13"
fe./
/ Name
Й CLOUD. G
^geoton.ht
^ J index, htm
© menu, htm
^Jspisok.htn
F
nl
ll
* f
Size
11.03...
517 b...
271 b...
505 b...
1.23 KB
( • >:•
Size j Progress
Hftp.narod.ru, 5 object's). 13.52 KB
BEIQII
f ! xE
Ы
I Type
Рисунок GIF
HTML Docu...
HTML Docu...
HTML Docu...
HTML Docu...
Local
l О
1 U
IModi
10.0
10.0
15.0
10.0
10.0
\_J7
, Puc. 2.26. Рабочее окно программы CuteFTP
Как и у всех Windows-программ, в верхней части рабочего окна находятся меню и панель
инструментов, предназначенные для управления работой программы. В нижней части
рабочего окна расположена пока пустая таблица, в которой будет отображаться процесс
пересылки фадпов.
Основная часть рабочего окна разделена по вертикали на две панели. На правой панели
отображается каталог удаленного компьютера. На левой панели в настоящий момент ото-
бражается содержимое папки Web, в которой находятся файлы нашего сайта. На правой
панели в окне программы CuteFTP вы увидите список файлов нашего сайта, которые бы-
ли загружены нами в предыдущих опытах.
Панель в нижней части рабочего окна отображает файлы, которые передаются на сервер в
текущий момент времени. Если вы хотите передать файлы позже, то можете временно по-
местить файлы в эту панель.
Выделив любой из файлов, вы можете просмотреть его, нажав кнопку
струментов, отредактировать, нажав кнопку
лить, нажав кнопку
на панели ин-
, переименовать, нажав кнопку
уда-
Удалим загруженные ранее файлы нашего сайта, чтобы затем переслать их снова с по-
мощью программы CuteFTP. Для этого их нужно сначала выделить.
> Щелчком мыши выделите на правой панели первый файл.
> Нажмите и удерживайте клавишу llShiftl.
Размещение страниц в Интернете
65
> He отпуская клавишу ilShiftl. щелкните мышью на последнем файле на правой панели.
Все файлы текущей папки будут выделены.
>• Отпустите клавишу ilShinl.
Теперь выделенные файлы можно удалить.
>• Нажмите клавишу I0*1*"!. На экране появится диалог с требованием подтвердить ваше
намерение удалить пять файлов (Рис. 2.27).
Are you SUIB you want to delete these 5 items?
Рис. 2.27. Диалог с требованием подтвердить удаление файлов
> Нажмите кнопку Да (Yes), чтобы закрыть этот диалог. Файлы будут удалены и их
имена исчезнут с правой панели окна программы CuteFTP.
Чтобы одной командой переслать на сервер все файлы папки Web, их необходимо пред-
варительно выделить.
> Щелкнув мышью на первом и последнем файлах папки Web на левой панели окна
программы CuteFTP при нажатой клавише !lShi tl l. выделите их.
Отправим эти файлы на сервер.
Нажмите кнопку
на панели инструментов рабочего окна программы CuteFTP.
На нижней панели рабочего окна программы CuteFTP отобразится процесс пересылки
файлов (Рис. 2.28).
Шя GlobalSCAPE - CuteFTP 6.0 - [naiod.ru - ftp.natod.ru. Status: Xfei using cuiient session..
File Edit View Tools Window Help
Й) DAWeb
...Hi* l
index html
menu, hi ml
geolonhlnil
spisok.html
I / Size I Type
182 b... HTMLDocu...
505 b... HTMLDocu...
517 b... HTMLDocu...
1.23 KB HTMLDocu...
11.03... Рисунок GIF
JJ
/ Name
I Size! Type
f Modif
tt. Hem Name
И index html
Q menu.html
© geoton.html
© spisok.html
© CLOUD.GIF
[Address ) <-> [ Size [ Pioqieis
ftp.nar...
ftp.nar ..
ftp.nar...
ftp.nat...
ftp.nai...
182 by... |
OX
Local
?L, Obyles
? | 0 bytes
? | 0 bytes
? ( 0 bytes
D:\Web4index.html
DAWebVmenu.html
U:\Wob\geoton.btml
D:\Web\spisok.html
D:\Web\CL0UD.6IF
For Help, press F1
{ftp. narod tu. 0 ob|ect(s). 0 bytes
Puc. 2.28. Процесс пересылки файлов
3-1210
66
Создание Web-сайтов
Когда пересылка файлов будет закончена, их список отобразится на правой панели рабо-
чего окна программы CuteFTP (Рис. 2.29), а в строке состояния будет показано общее
количество перемещенных файлов и их суммарный размер (Рис. 2.29).
I N GlobalSCAPE - CuteFTP 6.0 - (naiod.ru - ftp.naiod.iu. Status. Enor]
File Edit View Tool» Window Help
«ЗИ
& D:\Web _ [jrj
33* i
|inde« html
) menu html
jgeoton.html
) tpisok html
icLOUD.GIF
t / Size! Type
182 b... HTMLDocu...
505 b... HTML Docu...
517 b... HTML Docu...
1.23 KB HTMLDocu...
11.03... Рисунок GIF
ЕШ
ICLOUD.GIF i
I Sbel Type
I Modil
jgeoton.html
5 index, html
5 menu, html
jxpisok.html
11.03... Рисунок GIF
508 b... HTML Docu...
173 b... HTMLDocu...
487 b... HTML Docu...
1.21 KB HTMLDocu...
10.08
10.08
10. №
10. oa
10.08
/ IT Item Na
I Addren I <->
Size [ Proqren
[ Local
For Help. piessFI
l|np.narad.ru.5obiecl(s).13.38KB
Puc. 2.29. Пересылка файлов выполнена
v Нажмите кнопку fr^ на панели инструментов, чтобы прервать связь с сервером.
> Прервите связь с провайдером и закройте программу CuteFTP, нажав кнопку [х] в
правом верхнем углу ее окна.
Когда вам в следующий раз потребуется обновить файлы сайта, достаточно будет на-
жать кнопку ^Ф на панели инструментов и в диалоге Site Manager (Менеджер сайта)
(Рис. 2.30) выбрать имя сайта и нажать кнопку Connect (Подключиться).
! '0 Site Managei
В £} General FTP Site»
GlobalSCAPE Texas. LP.
narod.ru
:B
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-документов, в отличие от графики, предназначен-
ной для книжной публикации или просмотра на экране телевизора или монитора, имеет
свои специфические особенности, знание которых необходимо, чтобы сайт выглядел
профессионально и загружался быстрее.
Цифровые изображения
Изображение, которое вы видите на экране компьютерного монитора, строится из мел-
ких точек, называемых пикселами. Слово пиксел - это сокращение английских слов pic-
ture element (элемент изображения). Другими словами, экран монитора - это большая
матрица, каждый пиксел которой, независимо от другого, излучает определенный цвет,
а все пикселы вместе образуют один кадр изображения.
Каждое точечное изображение содержит фиксированное количество пикселов, поэтому
высота и ширина такого изображения могут быть определены как количество пикселов,
расположенных, соответственно, вдоль его вертикальной и горизонтальной границ.
Общее число пикселов определяет размер файла, или объем данных, содержащихся в
изображении. От количества пикселов в изображении и характеристик конкретного мо-
нитора зависит, каков будет размер или формат этого изображения на экране. Стандарт-
ный 15-дюймовый монитор SVGA способен показать 800 пикселов по горизонтали и
600 по вертикали; современные мониторы, как правило, допускают возможность на-
стройки экранной матрицы от 800x600 - при этом пикселы будут достаточно больши-
ми - до 1600х 1200 - в этом случае пикселы будут очень малы.
Независимо от заданного размера печатного оттиска, размер изображения на экране оп-
ределяется количеством содержащихся в нем пикселов, а также размером монитора и
заданными для него параметрами. Большой монитор, экранная матрица которого на-
строена на разрешение 800x600, будет использовать более крупные пикселы, чем ма-
ленький монитор с таким же разрешением. В большинстве случаев мониторы настраи-
ваются таким образом, чтобы они могли отображать приблизительно от 72 до 120 пиксе-
лов на один дюйм.
Любое точечное изображение характеризуется двумя основными параметрами: графиче-
ским разрешением и глубиной цвета.
Разрешение изображения или графическое разрешение определяет плотность пикселов в
изображении и измеряется в пикселах на дюйм (ppi). Чем выше разрешение, тем больше
пикселов содержится в изображении и тем меньше размер этих пикселов. Например,
изображение размером 1x1 дюйм с разрешением 72 ppi будет содержать 5184 пиксела -
72 пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изображение, но с раз-
решением 300 ppi, будет содержать 90000 значительно более мелких пикселов. Благода-
ря использованию большего числа пикселов, высокое разрешение позволяет получать
в изображении более мелкие детали и более тонкие цветовые переходы.
Выбор оптимального разрешения для изображения зависит от того, каким образом вы
собираетесь его отображать или тиражировать. Так, использование слишком низкого
разрешения для книжной или журнальной иллюстрации неизбежно приведет к резкому
Графика для Web-страниц 69
падению качества печатных оттисков, вызванному чрезмерным увеличением размера
пикселов. С другой стороны, выбор неоправданно высокого разрешения, превышающего
физические возможности выводного устройства, приводит к увеличению размера файла,
что, в свою очередь, не может не сказаться на скорости его обработки, печати или пере-
дачи по сети.
Размер файла, содержащего оцифрованное изображение, пропорционален размерам и
графическому разрешению изображения и задается в байтах, килобайтах (Кб) или мега-
байтах (Мб). Более тесное расположение пикселов, то есть более высокое разрешение,
позволяет воспроизводить более мелкие детали изображений. В то же время это ведет к
увеличению размера файла. Например, объем файла для изображения размером
1x1 дюйм с разрешением 200 ppi будет в четыре раза больше, чем для изображения того
же размера с разрешением 100 ppi.
Размер файла имеет большое значение при выделении дискового пространства для его
хранения. Кроме того, он в значительной мере определяет время передачи файла по сети.
При выборе графического разрешения вы должны находить компромисс между желани-
ем сохранить как можно больше полезной информации и необходимостью минимизиро-
вать размер файла.
Число экранных пикселов на единицу длины определяет разрешающую способность мо-
нитора: она зависит от размера экрана и от заданной размерности экранной матрицы.
При переводе печатных оригиналов в экранные образы и расчете их размеров в пикселах
следует иметь в виду, что разрешающая способность большинства мониторов для Macin-
tosh по умолчанию составляет 72 точки на дюйм (dpi), а РС-совмесхимые мониторы мо-
гут иметь разную разрешающую способность, но обычно она составляет 96 dpi.
На экране монитора все пикселы изображения представляются с помощью определенно-
го числа экранных пикселов. Размер экранного изображения определяется разрешающей
способностью монитора, и ее не следует путать с графическим разрешением, характери-
зующим плотность пикселов в изображении. Например, размер изображения с разреше-
нием 144 ppi на экране монитора с разрешающей способностью 72 ppi будет вдвое пре-
вышать реальный размер, поскольку в каждом дюйме экрана могут быть отображены
только 72 из 144 пикселов. При выводе на монитор с разрешающей способностью
120 dpi то же самое изображение будет лишь незначительно больше оригинала, так как
в этом случае в каждом дюйме экрана смогут уместиться уже 120 из 144 пикселов.
Другим важным параметром точечного изображения является глубина цвета, или бито-
вое разрешение - величина, которая определяет количество бит информации на один
пиксел. Битовое разрешение характеризует объем цветовой информации, используемой
для описания каждого пиксела изображения. Чем больше глубина цвета, тем шире диа-
пазон доступных цветов и тем точнее их представление в оцифрованном изображении.
Например, пиксел с битовой глубиной, равной единице, имеет лишь два возможных со-
стояния - два цвета: черный или белый. Пиксел с битовой глубиной в 8 единиц имеет 28,
или 256 возможных значений цвета. Пиксел же с битовой глубиной в 24 единицы имеет
224, или 16,7 миллионов возможных значений. Считается, что изображения, содержащие
16,7 миллионов цветов, достаточно точно передают краски окружающего нас.мира.
Как правило, битовое разрешение задается в диапазоне от 1 до 48 бит/пиксел.
Большинство цветов видимого спектра могут быть получены путем смешивания в различ-
ных пропорциях трех основных цветовых компонентов. Этими компонентами, которые
70 Создание 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-страниц 71_
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-файла происходит автоматически, во время его открытия. Между
качеством изображения и степенью уплотнения существует обратная зависимость: чем
более высокую степень сжатия для результирующего изображения вы зададите, тем хуже
будет его качество.
72 Создание 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-страниц 73^
В 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
24 Создание 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-страниц 75
^ Чем большую площадь занимают однородно окрашенные участки и чем большую
горизонтальную протяженность имеют детали рисунка, тем меньший размер займет
на диске файл GIF.
• Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессивном
формате JPEG, то есть так, чтобы изображение «проявлялось» постепенно, будут, при
прочих равных условиях, иметь больший размер.
Но есть две области, где GIF - вне конкуренции. Первая - это создание анимированных,
то есть движущихся изображений. На самом деле анимированный GIF - это несколько
графических изображений, записанных в один файл. Последовательный показ этих
изображений создает иллюзию движения. В файле GIF хранится информация о том,
сколько раз в секунду надо менять изображение, в какой последовательности показывать
картинки и т.д. Для создания анимированного изображения вы в любом графическом
редакторе рисуете картинки, из которых будет строиться анимация, а затем загружаете
их в специальную программу подготовки анимации, где указываете, как эти картинки
должны чередоваться. Таких программ существует большое количество.
Другое незаменимое свойство GIF - это возможность получения прозрачного фона изо-
бражения, то есть такого фона, сквозь который видно все, что под ним находится. Созда-
вать GIF с прозрачным фоном может любой профессиональный графический редактор,
например, Adobe Photoshop.
Возможности оптимизации
Чтобы любое изображение можно было использовать на Web-странице, его необходимо
предварительно оптимизировать, уменьшив до минимума размер файла и, следователь-
но, время загрузки по сети так, чтобы качество изображения при этом заметно не ухуд-
шилось. Оптимизация - это, по сути, компромисс между размером файла и качеством
изображения. \
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и используется
сжатие с потерей информации. У него не так уж много способов оптимизации, точнее
сказать, два:
• использование прогрессивной развертки;
• оптимальный коэффициент сжатия.
Использование прогрессивной развертки не сказывается на размере изображения, но
заметно при загрузке. В случае записи изображения в стандартном формате вывод на
экран осуществляется горизонтальными полосами, и до загрузки всего изображения не-
возможно определить его смысл. Напротив, при записи файла в прогрессивном формате
изображение появляется сразу целиком, но в грубой форме, и затем постепенно улучша-
ется. Это дает посетителям сайта возможность сразу же оценить изображение и решить,
стоит ли ожидать его окончательной загрузки, что позволяет сэкономить немного време-
ни при просмотре страниц. Общее время загрузки страницы при этом не уменьшается,
возникает лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддержива-
ется всеми браузерами, но не каждый графический пакет может записывать в этом фор-
мате. Поэтому проверьте свои программы на возможность сохранять файлы с прогрес-
сивной разверткой. Последние версии Photoshop умеют это делать.
76 Создание Web-сайтов
Оптимальный коэффициент сжатия. Это - другая возможность оптимизации изобра-
жения в формате JPEG. Для осуществления такой оптимизации нужен графический па-
кет или утилита, которая позволяет регулировать степень сжатия изображения. Adobe
Photoshop позволяет выполнить такую регулировку. Другие программы, например, Photo-
Paint и PaintShopPro, также позволяют плавно регулировать степень сжатия в интервале
значений от 1 до 255.
Как определить оптимальную степень сжатия? Для этого нужно сохранить изображение
при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть его.
Критерием потери качества будут так называемые «дрожащие контуры», наиболее за-
метные в местах контрастных переходов, и появление пятен в областях с плавными пе-
реходами. Тот коэффициент сжатия, при котором искажения еще не видны, но с увели-
чением коэффициента на одну ступеньку становятся заметными, и будет оптимальным.
Размер файла при таком коэффициенте сжатия будет минимально возможным при со-
хранении качества.
Формат GIF сильно отличается от JPEG и использует совершенно другие методы опти-
мизации. Он предназначен для хранения изображений с количеством цветов не более 256
(и использует сжатие без потерь по методу LZW, который применяется в программах-
архиваторах. Методы оптимизации можно разделить на следующие типы, исключая оп-
тимизацию файлов с анимацией:
• уменьшение количества цветов;
• оптимизация палитры изображения;
^ стилизация изображения;
• изменение размеров изображения;
^ фрагментарная оптимизация;
i/ оптимизация «прозрачных» изображений;
^ использование чересстрочной развертки.
Теперь разберемся по порядку с этими методами и приемами оптимизации.
Уменьшение количества цветов. Для большинства изображений, не являющихся
фотографическими, количество необходимых для воспроизведения цветов часто
меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его
размер. Это возможно потому, что формат GIF поддерживает размер палитры меньше
256 цветов. Теоретически мы можем задать любое число цветов палитры от 2 до 256,
например, 45 цветов или 99. Практически же количество цветов в изображении выби-
рается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления
цвета используется всегда целое число бит, а приведенный выше ряд является рядом
максимального количества цветов при использовании от 1 до 8 бит на пиксел.
В случае, если вы используете в рисунке, допустим, только 97 цветов, для сохранения
одного пиксела все равно будет использовано 7 бит, как и при использовании
128 цветов. Поэтому при оптимизации количества цветов нужно ориентироваться на
приведенный выше ряд. Это позволит получить более качественную картинку.
Уменьшив количество цветов с 256 до 32, можно иногда добиться уменьшения
размера файла в 2 раза без заметной потери качества.
Графика для Web-страниц 77
Оптимизация палитры изображения. Преобразование полноцветного изображения
в индексное, т.е. уменьшение количества цветов до 256 является важной операцией, и
здесь следует сказать несколько слов о том, как это делается современными графически-
ми пакетами.
Палитра конечного изображения может быть либо фиксированной, либо оптимизирован-
ной. В первом случае графический редактор просматривает каждую точку изображения и
подбирает ближайшую ей по цвету из палитры. Этот способ дает самые худшие резуль-
таты с точки зрения правильности воспроизведения цветов. Попробуйте, например, пре-
образовать фотографию красной розы в индексное изображение, используя палитру, со-
держащую оттенки зеленого. Это, конечно, крайний случай, но даст вам возможность
оценить качество преобразования с использованием фиксированной палитры. Тем не
менее, данный способ применяется в основном для того, чтобы изображения приемлемо
выглядели на мониторах с малым количеством цветов - 16 или 256. Обычно в этом слу-
чае пользуются так называемой безопасной палитрой, состоящей из набора часто ис-
пользуемых цветов и их оттенков. Безопасная палитра гарантирует, что изображения,
использующие эту палитру, будут одинаково показаны всеми браузерами.
Во втором случае, когда используется оптимизированная палитра, графический редактор
вначале анализирует рисунок и составляет список всех используемых в изображении
цветов. Далее, на основании частоты появления цветов, составляется палитра, которая
называется оптимизированной. После этого рисунок снова просматривается, и цвет пик-
села изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результа-
ты, и именно его следует применять, если у вас нет причин для использования фиксиро-
ванной палитры.
При оптимизации конкретного изображения задача состоит в том, чтобы выбрать опти-
мальное количество цветов в палитре. Здесь уместно сказать о способе увеличения количе-
ства используемых цветов при их недостатке - так называемом смешивании (dithering).
При этом области, которые в оригинале были залиты однородным цветом, после преобра-
зования заполняются смесью пикселов разных цветов, разбросанных по случайному зако-
ну. Как правило, каждый отсутствующий в редуцированной палитре цвет передается пик-
селами двух самых близких к нему цветов новой палитры. В результате изображение при-
обретает характерную зернистую, шероховатую фактуру. Очень часто смешивание являет-
ся единственным способом хоть сколько-нибудь адекватно передать исходные цвета с по-
мощью палитры, в которой этих цветов уже нет. Например, у нас есть 16 стандартных чис-
тых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае можно составить
его из красных и желтых точек, разместив их в шахматном порядке. Издалека будет казать-
ся, что это сплошной оранжевый цвет. Это классический пример смешивания. Его исполь-
зование при преобразовании изображений может дать очень хорошие результаты. Но с
точки зрения оптимизации размеров файла происходит совсем обратное. Смешивание мо-
жет увеличить размер файла, причем довольно существенно - он может стать больше, чем
до оптимизации. А все дело в способе хранения изображения форматом GIF. Изображение
перед сохранением на диске подвергается сжатию методом LZW, а основная особенность
этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные
однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек.
Смешивание же как раз основано на том, что получает недостающие цвета путем «переме-
шивания» точек разных цветов.
78 Создание 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-страниц ' 79
Методом изменения размеров очень удобно создавать графические разделительные ли-
нии. Достаточно нарисовать ее сечение в виде квадрата со стороной в один пиксел, а в
HTML-документе указать нужную ширину линии или высоту, если линия вертикальная.
Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если
у вас есть некоторое большое изображение, содержащее сильно отличающиеся по коли-
честву цветов области. В этом случае изображение можно разрезать на фрагменты и по-
местить их в таблицу, тогда в браузере оно будет выглядеть как единое целое. Теперь
каждый фрагмент исходного рисунка оптимизируется отдельно. Для фрагментов, содер-
жащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цве-
тами фрагментов можно использовать полную палитру в 256 цветов или сохранять их
в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый исходным фай-
лом, примерно раза в 2-3, в зависимости от конкретного изображения. Кроме того,
изображение будет появляться на экране более равномерно, так как все фрагменты будут
загружаться параллельно. Однако, если количество фрагментов превысит 10, то возмож-
ного выигрыша не получится, так как каждый фрагмент должен будет хранить свою ко-
пию палитры и служебной информации.
Оптимизация «прозрачных» изображений. Формат GIF позволяет сохранять так назы-
ваемые «прозрачные» изображения. На самом деле, GIF не поддерживает прозрачность в
изображениях - альфа-канал - он лишь позволяет назначить одному любому цвету в па-
литре атрибут прозрачности. Если браузер рисует на экране такое изображение, то,
встречая «прозрачный» пиксел, он просто игнорирует его и не показывает на экране.
Само по себе это хорошо, но в случае использования метода сглаживания краев изобра-
жения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема
появления ореола вокруг прозрачного изображения в случае, если GIF показывается на
фоне, отличном от того, на котором происходило сглаживание и который стал прозрач-
ным. Единственным способом уменьшения проявления этого эффекта является назначе-
ние прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и
проведение сглаживания на этом же фоне.
Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы
с использованием чересстрочной развертки. При использовании этого способа строчки,
составляющие изображение, перемежаются, и при загрузке браузер вначале показывает
каждую 8 строчку', потом каждую 4, каждую 2, и, наконец, загружается полное изобра-
жение. При этом посетитель вашей Web-страницы сможет понять, что же нарисовано на
данной картинке, не дожидаясь ее полной загрузки. Это очень удобно.
J\@1. Вставляем графику в HTML-код
Создавая в первой главе книги наш сайт, мы уже познакомились со способом включения
изображений в Web-документ, вставив на начальную страницу сайта рисунок, сохранен-
ный в файле CLOUD.GIF. Рассмотрим теперь более подробно приемы работы с графикой.
Напомним, что, вставляя рисунок в код HTML, мы использовали его относительный ад-
рес, т.е. адрес, который определяется относительно текущей папки данного компьютера.
Но в ссылке на рисунок можно указать также и абсолютный адрес, т.е. адрес файла с
изображением, который находится на любом Web-узле в Интернете. Посмотрим, как
вставить в HTML-код файла geoton.html абсолютную ссылку на рисунок CLOUD.GIF,
хранящийся не в папке Web вашего компьютера, а в каталоге вашего сайта в WWW.
80
Создание 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>
title>K0MnaHHfl ГЕ0Т0н</гтт1е>
</head>
•cbody bgcol or-bl ue text-yel l ow l i nk-whi t e, viink-Oime, al i nk-red>
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ь1>
<cent erxa href="spi sok. html "xi mg src= 'http://geoton. narod. ru/CLOUD.GiF"
border =1></ах/септег>
<p styl e="f ont-wei ght: bol d; f ont -st yl e: i t a l i c; f ont -si ze: 150%;
t ext - al i gn: center >здесь вы узнаете <а href="spi sok.html">o нашей
деятельности</а>, о программных продуктах нашей компании об оборудовании,
которое мы производим</рх/Ьойу>
</htm1>
Рис. 3.1. Абсолютная ссылка на рисунок
> Сохраните файл geoton.html, выбрав команду меню программы Блокнот (Notepad)
Файл • Сохранить (File • Save).
> Загрузите браузер и откройте в его окне файл geoton.html из папки Web (Рис. 3.2).
Address |i*] C:\Web\goolon.ritml
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
| Щ My Computer
Рис. 3.2. Отображение рисунка с абсолютной ссылкой
при отсутствии подключения к Интернету
Графика для Web-страниц 81
Как видите, пока ваш компьютер не подключен к Интернету, рисунок в окне браузера не
отображается. Вместо него выводится только рамка, толщина которой определена атри-
бутом border. Чтобы увидеть рисунок, необходимо подключиться к Интернету.
> Не закрывая окно браузера, установите связь с провайдером.
> Когда связь будет установлена, нажмите кнопку Ш_ - Обновить (Refresh) на панели
инструментов браузера Internet Explorer или кнопку Обновить текущую страницу
(Reload Current Page) на той же панели браузера Netscape. Браузер подключится к
вашему сайту и загрузит рисунок CLOUD.GIF.
Возможно, если ваша линия связи недостаточно быстрая, вы увидите, что изображение
как бы постепенно «выкристаллизовывается» из «бесформенной массы». Так как данный
рисунок сохранен с использованием чересстрочной развертки, то браузер отображает его
постепенно, по мере загрузки: сначала показывается каждая восьмая строка пикселов,
затем - каждая четвертая, далее - каждая вторая и, наконец - все оставшиеся нечетные
строки. Приняв из сети очередную порцию данных, браузер не только рисует каждую
строку пикселов на своем месте, но и заполняет копиями предыдущей строки все проме-
жутки между строками. Поэтому вначале чересстрочный рисунок формата GIF состоит
из широких горизонтальных полос, которые сужаются по мере появления изображения.
> Прервите связь с Интернетом.
Таким образом, мы вставили изображение на Web-страницу, указав в теге <img> в каче-
стве значения атрибута src абсолютный адрес файла с рисунком.
Для тех браузеров, которые не могут отображать рисунки, в языке HTML предусмотрен
для тега <img> специальный атрибут al t, определяющий альтернативный текст, кото-
рый будет выводиться вместо рисунка. Этот текст должен отображать смысл рисунка,
заменяя собой изображение. Атрибут al t желательно использовать еще и потому, что
многие пользователи отключают в браузере функцию отображения рисунков, чтобы ус-
корить загрузку Web-страниц. В таком случае пользователь должен видеть альтернатив-
ный текст, заменяющий рисунок. Кроме того, существуют специальные речевые браузе-
ры для незрячих, в которых текст выводится голосом.
Вставим в тег <img> файла geoton.html атрибут al t со значением "Область нашей
деятельности", которое в данном случае раскрывает смысл рисунка и ссылки. Значение
атрибута al t должно' быть заключено в кавычки. Этот текст будет появляться в браузе-
рах, не позволяющих показывать изображения на месте рисунка.
> Отредактируйте файл geoton.html, вставив в тег <ixng> относительную ссылку на
файл с рисунком CLOUD.GIF, находящий в папке Web вашего компьютера, и атрибут
al t="06nacTb нашей деятельности11 так, чтобы элемент, содержащий указанный
тег, принял следующий вид:
•ccenterxa href=spisok.html ximg src = CLOUD.GIF border=1 alt = " Область
нашей деятельностипх/а></свпЬег>
Теперь, когда относительный адрес рисунка указывает на файл CLOUD.GIF, находящий-
ся в папке Web вашего компьютера, рисунок сразу показывается в окне браузера после
обновления изображения.
82
Создание Web-сайтов
>• Установите указатель мыши на рисунке в окне браузера так, чтобы указатель мыши
принял форму \). Под ним появится рамка с текстом, определенным в качестве зна-
чения атрибута al t (Рис. 3.3).
*-Васк - •* » О Ш fll QSearch SJFevoiiles ^History
Добро пожаловать на страничку
компании ГЕОТОН!
ЗЦСправка
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
file:///C:/Web/spisok html
Рис. 3.3. Отображение альтернативного текста
Как видите, даже когда рисунок отображается в браузере, значение атрибута al t выво-
дится на экран при установке указателя мыши на изображении. Это значит, что с помо-
щью данного атрибута можно также определять подписи для рисунков.
Посмотрим теперь, что происходит, если браузер не показывает графику. Для этого вы-
ключим ее отображение.
>• В браузере Internet Explorer выберите команду меню Сервис • Свойства обозрева-
теля (Tools • Internet Options). На экране появится диалог Свойства обозревателя
(Internet Options).
>- В браузере Internet Explorer щелкните мышью на ярлыке Дополнительно (Advanced),
чтобы перейти на соответствующую вкладку.
>• В браузере Internet Explorer сбросьте флажок Отображать рисунки (Show pictures).
Чтобы найти его, воспользуйтесь вертикальной полосой прокрутки (Рис. 3.4).
> 'В браузере Internet Explorer нажмите кнопку Применить (Apply).
>• Нажатием кнопки ОК закройте диалог Свойства обозревателя (Internet Options) или
Параметры (Preferences).
Теперь, когда отображение графики в программе просмотра выключено, посмотрим, что
мы увидим вместо рисунка.
> Обновите изображение в окне браузера, нажав соответствующую кнопку на панели
инструментов. Вы увидите, что вместо рисунка в рамке отображается текст, который
определен атрибутом al t (Рис. 3.5).
Графика для Web-страниц
83
Свойства обозревателя
Общие
Безопасность
X
Содержониер Подключения f П рограммы
КонФ^енциальность ___
Дополнительно
Параметры
0 Проверять аннулирование сертификатов издателей
• Проверять аннулирование сертификатов серверов (требует
• Удалять все Файлы из папки временных Файлов Интернет!
QQt Мультимедиа
0 Включить автоматическую подгонку размеров изображени]
0 Включить панель изображений (требуется перезапуск)
0 Воспроизводить анимацию на веб-страницах
0 Воспроизводить видео на веб-страницах
0 Воспроизводить звуки на веб-страницах
• Не отображать оперативное медиа-содержимое на панели
• Показывать рамки рисунков
0 Улучшенная передача цветовых оттенков
© Настройка HTTP 1.1
0 Использовать HTTP 1.1
• Испольэовать HTTP 1.1 через прокси-сосдинения
г
| Восстановить значения по умолчанию j
OK
|
Отмена
Рис. 3.4. Вкладка Advanced (Дополнительно) диалога Internet Options
(Свойства обозревателя) программы Internet Explorer
«•Back • •* " О В Й I eSonrch SiFovoriles iiHistory | %' si Щ '
C:\W.b\qenlon Mml
Добро пожаловать на страничку
компании ГЕОТОН!
iacTb нашей деятельности
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
0 Don»
Рис. 3.5. Текст, отображаемый вместо рисунка
Специальные атрибуты width (ширина) и height (высота) тега <img> позволяют про-
граммам просмотра зарезервировать место на экране для рисунка еще до того, как он
будет передан по сети. Это дает возможность пользователю начать чтение документа,
пока передача данных еще продолжается.
Добавим в тег <imo> атрибуты width=613 и height=60, значения которых соответст-
вуют фактической ширине и высоте рисунка в пикселах. Размеры изображения можно
определить с помощью графического редактора, например, Adobe Photoshop. Об этом
мы поговорим в одной из следующих глав.
84
Создание Web-сайтов
>• Отредактируйте в файле geoton.html тег <img>, добавив указанные атрибуты так,
чтобы этот элемент принял следующий вид:
<cent erxa href=11spisok.htnu11><img src=CLOUD.GIF al t =" Область нашей
деятельности" border=l width=613 height=60x/ax/oenter>
В окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено столько места,
сколько указано значениями атрибутов width (ширина) и height (высота) (Рис. 3.6).
••Bock » * ~ © @<3| ©Search Si Favorites {^History [ |'| | •
Добро пожаловать на страничку
компании ГЕОТОН!
] Область нашей деятельное»
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
^ My Compute
Рис. 3.6. Место для рисунка зарезервировано
> Восстановите отображение графики в окне программы просмотра Web-страниц.
Многие браузеры, хотя и не все, могут масштабировать изображение в соответствии с
атрибутами width и height. Проверим это, уменьшив значения данных атрибутов в
шесть раз. Соответственно должен измениться и размер рисунка на экране.
>• Отредактируйте элемент HTML, содержащий тег <img>, изменив в нем значения ат-
рибутов: width=iO2 hei ght =i o так, чтобы данный элемент принял следующий вид:
<centerxa href --"spisok. html "ximg src=CLOUD.GIF а1^ = "0бласть нашей
деятельности" border=l width=102 height=10x/ax/center>
Когда вы обновите изображение в браузере, то увидите примерно то же, что и на Рис. 3.7.
м и н
Eilo Edit
4* Back »
i Address | £
C:\W
w Fflvorites Iools
в 1Й tSJ j ^Seorch
b\geolan.html
Help
QlFav
irites O H
.«tory |H6" в И »
l.l.-l"il
n
, ]
[J Links "1
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о
программных продуктах нашей компании и об
оборудовании, которое мы производим
a Done
;@ My Computer
Рис. 3.7. Размер рисунка уменьшен в шесть раз
Графика для Web-страниц
Однако такое масштабирование не имеет особого смысла и не рекомендуется, так как
при уменьшении значений атрибутов width и height размер файлов с графикой не
уменьшается, и время их загрузки не изменяется. Уменьшать размеры изображения нуж-
но в графическом редакторе. При увеличении же масштаба рисунка его качество обычно
заметно ухудшается. Следует помнить, что атрибуты width и height не предназначены
для автоматического изменения размера изображения программами просмотра и должны
использоваться для указания реального размера рисунка. Вместе с тем, увеличение раз-
меров можно применять с целью оптимизации рисунков, состоящих из однотонных об-
ластей или линий, как об этом говорилось выше.
JV§2. Графика большого размера
Часто бывает необходимо вставить на Web-страницу рисунок или фотографию большого
размера. Очевидно, что файл, содержащий подобный рисунок или фотографию, будет
большого объема, и его загрузка потребует значительного времени.
Такой рисунок большого размера BG.JPG вы можете найти на прилагаемом к книге ком-
пакт-диске в папке \Web\ChapO3\web. Вставим этот рисунок в документ geoton.html,
поместив его в начале Web-страницы.
> Установите связь с Интернетом и скопируйте рисунок BG.JPG с компакт-диска в
каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2
этой книги.
v В файле geoton.html, открытом в окне программы Блокнот (Notepad), вставьте пус-
тую строку после открывающего тега <body> и введите следующий код HTML:
<img src="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-документа, можно
поместить рисунок на отдельную страницу, вставив в
основном документе гиперссылку на нее, например, так:
<а hr«f="Aflpec_URLn>3flecb</a>Bbi
деть фотографию
можете уви-
смотреть или
Рис. 3.8. Загруженный
рисунок
В этом случае пользователь сам решает
не смотреть данный рисунок.
Мы уже отмечали, что для файлов, подобных загруженному, т.е. сохраненных в фермате
JPEG, основной способ оптимизации - сжатие. Только таким способом можно умень-
шить объем файлов данного формата. Однако следует помнить, что сжатие JPEG ведет к
потере качества. При каждом сохранении файла этого формата происходит новое сжатие
и качество снова ухудшается. Вместе с тем, технология JPEG замечательна именно тем,
что позволяет достичь серьезного выигрыша в сокращении размера при минимально
заметных для глаза потерях в качестве.
Еще один способ ускорения загрузки графики большого размера - нарезать изображение
на части и поместить отдельные фрагменты в HTML-таблицу, где они будут восприни-
маться как единое целое. Каждый такой фрагмент можно оптимизировать индиви,туаль-
но, применив наиболее подходящие для него параметры. При этом размер фрагментиро-
ванного рисунка станет меньше, чем неразрезанного, что значительно ускорит его появ-
ление на экране. Для графики, сохраняемой в формате GIF, можно также оптимизировать
палитру каждого фрагмента, что иногда позволяет уменьшить объем файла в 2-3 раза.
€ШУШ1 JVQ3. Графический фон
Создавая наши первые Web-страницы, мы использовали для них однотонный фон, ука-
зывая его цвет в теге <body> с помощью атрибута bgcolor. Однако фон может быть не
только однотонным, но также в виде рисунка или фотографии. В этом случае, как и лю-
бое другое изображение, рисунок фона должен быть представлен в формате GIF, JPEG
или, NPG. Для указания фонового рисунка в теге <body> используется атрибут back-
ground, значение которого - имя или 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> принял следующий вид:
•cbody bgcolor=blue text=yellow link=white vlink=yellow alink=red
background=BG.JPG>
После такого редактирования код HTML в файле geoton.html должен принять вид как на
Рис. 3.9. В окне браузера вы увидите, что теперь фон этой страницы не однотонный си-
ний, как прежде, а изображение из загруженной нами фотографии, записанной в файле
BG.JPG. И на этом новом фоне отображается текст документа и рисунок CLOUD.GIF
(Рис. 3.10). Однако напомним, что мы не удалили атрибут bgcolor в теге <body>. В та-
ких случаях, когда в теге <body> указываются оба атрибута - bgcolor и background -
браузер обычно отдает предпочтение атрибуту background, но, если изображение фона
загрузить невозможно, используется атрибут bgcol or.
Правка формат Вия Справка
<html>
<head>
^1г1е>компания rE0T0H</t1tle>
</head>
<body bgcolor-blue text-yellow I1nk-wh1te vlink-yellow a "link-red
Dackground-BG. JPG>
chl alicjn-center>flo6po пожаловать на страничку компании ГЕОТОН!</hl>
<centerxa href-"sp1sok. html"x1mg src-CLOUD.GIF al t-" область нашей
деятельности" border-1 w1dth-W2 fie1ght-lO></ax/center>
<p style-"font-weight: bold; font-style: I tal i c; font-size: 15QX;
text-align: center >здесь вы узнаете <а href«"sp1sok.html">o нашей
деятеги>ности</а>, о программных продуктах нашей компании об оборудовании.
которое мы проиэводим</рх/Ьос(у>
</html >
Рис. 3.9. Файл geoton.html после указания фонового рисунка
>Ва(* Ч'О Й ffl| OSeorch aiFavorile. QlHiitoiy | Ч&- & Я -
Address |й C:\Wab\geotonhtml
Добро пожяшвдръ на страничку
компЩМГЕОТОН!
Здесь Вы
программна
оборудд.
Ч:=)
о''Нашей деятельности, о
ах нашей компании и об
е мы производим
Э Done
Рис. 3.10. Фон в виде рисунка
JJ8 Создание Web-сайтов
Еще один способ определения фона - с помощью языка каскадных таблиц стилей CSS.
Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц значи-
тельно больше возможностей управления фоновым изображением. Чтобы удобнее: было
знакомиться с ними, вставим рисунок BG.JPG в качестве фонового изображения второй
Web-страницы нашего сайта, сохраненной в файле spisok.html, воспользовавшись язы-
ком каскадных таблиц стилей.
В опыте со стилями первой главы мы определили вид текста на первой Web-странице с
помощью языка каскадных таблиц стилей, указав нужные стили как значения атрибута
s t yl e в теге <р>. Но есть другой, более предпочтительный вариант определения стилей,
при котором описание стилей располагается внутри заголовка Web-документа
<head>... </head> в открывающем теге <styl e>. В таком случае вы можете исполь-
зовать описанные стили для HTML-элементов всей страницы.
В теге <styl e> обязательно должен присутствовать атрибут t ype="t ext/cs s", кото-
рый служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким
образом, элемент <s t yl e >... </style> должен иметь следующий вид:
<style type="text/css">
</style>
Вставим этот тег в код HTML файла spisok.html.
>- Вставьте пустую строку в файле spisok.html после элемента <titl e>4eM мы зани-
MaeMcs3?</title> и введите теги <s t yl ex/s t yl e>, как указано выше. Код HTML
заголовка Web-страницы, заключенный между тегами <head>... </head>, должен
иметь такой вид:
<head>
<title>4eM мы занимаемся?</title>
<style type=ntext/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 - и сделали это с помощью атрибута s t yl e. При этом стили бы-
ли присвоены только данному элементу <р>... < /р>. Если же стили определяются
Графика для Web-страниц 89
в заголовке документа указанным выше способом, то они присваиваются всем элементам
<р>... < /р> данной страницы.
Но нам требуется вставить рисунок, который будет служить фоном Web-страницы. Для
этого в теге <styl e> элементу body должно быть присвоено свойство background-image,
значением которого должен быть URL-адрес файла с изображением. Этот адрес в языке
таблиц стилей указывается в скобках после символов url так: url ("BG. JPG"). На основа-
нии сказанного, элементу body в теге <style> нужно присвоить следующий стиль:
body { background-image: url("BG.JPG") }
> Вставьте пустую строку между открывающим тегом <styl e> и закрывающим тегом
</style> и введите указанный код, определяющий стиль элемента body.
Элемент HTML <s t yl e>... </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 так, чтобы элемент
<st yl e>.. .</styl e> принял следующий вид:
<atyle type="text/css">
body { background-image: url("BG.JPG"); background-repeat: no-repeat }
</style>
Теперь в окне браузера фоновый рисунок занимает только верхнюю часть документа.
Нижняя и, возможно, правая часть, в случае высокого разрешения монитора, заполнена
однотонным фоном, который вы установили ранее.
Свойство background-repeat может иметь также следующие значения:
• repeat - фон повторяется как по горизонтали, так и по вертикали; это значение уста-
навливается по умолчанию;
• repeat-x - фон повторяется только по горизонтали;
• repeat-у - фон повторяется только по вертикали.
90 Создание Web-сайтов
Положение фонового рисунка на странице можно изменить с помощью свойства back-
ground-position. В качестве значений этого свойства указываются ключевые слова,
характеризующие положение изображения по вертикали - top (вверху), center (по цен-
тру), bottom (внизу) - и по горизонтали - l ef t (слева), center (по центру), ri ght
(справа). Первым должно указываться вертикальное положение. Например, код back-
ground-position: center center выровняет рисунок по центру страницы как по
горизонтали, так и по вертикали.
5» Добавьте в описание свойств элемента body файла spisok.html свойство back-
ground-position: center center. Элемент <style>.. i</style> в этом файле
должен принять следующий вид:
<style type=ntext/css">
body { background-image: url("BG.JPG"); background-repeat: no-repeat;
background-position: center center }
</style>
Фоновый рисунок будет помещен в центре страницы, при этом нижняя и верхняя части
страницы, а также правая и левая при разрешении монитора 1024x768 и выше, будут
заполнены сплошным цветом.
>- Просмотрите еще раз изображение в окне браузера, воспользовавшись вертикальной
полосой прокрутки, и обратите внимание на то, что фоновый рисунок прокручивается
вместе с текстом.
Вы можете, однако, фиксировать изображение так, чтобы при прокрутке фон страницы
оставался неподвижным, а текст перемещался относительно фонового изображения.
Для этого в элементе body следует использовать свойство background-attachment со
значением fixed: background-attachment: fixed.
> Вставьте указанное свойство в описание стиля элемента body. Элемент
<st yl e>... </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>.
Изображения для использования в качестве фона и рисунков в своих WebTCTpaHH4ax вы
можете свободно загрузить со следующих Web-сайтов:
http://www.abcgiant.com/
http://barrysclipart.com/
http://www.arttoday.com/
Графика для Web-страниц ' 91
Фчьм/пь JV&4. «Прозрачная» графика
Во второй версии графического формата GIF, разработанной в 1989 году, появилась воз-
можность указывать прозрачный цвет, т.е. такой цвет, сквозь,который видно все, что под
ним находится. Но по-настоящему эта возможность стала использоваться лишь после
того, как ее поддержка появилась в браузерах.
Прозрачный цвет позволяет создавать изображения произвольной формы - пикселы ри-
сунка, имеющие этот цвет, при просмотре в браузере становятся невидимы. В связи с
тем, что у большей части изображений прямоугольную форму имеет только пустой фон,
а сам рисунок занимает область произвольной конфигурации в центре прямоугольного
фона, такой режим отображения может оказаться очень полезным.
Посмотрим, как можно использовать изображение с прозрачным цветом. Такое изобра-
жение BG.GIF вы можете найти на предлагаемом с книгой компакт-диске в папке
\Web\ChapO3\web. Вставим в Web-документ geoton.html рисунок с прозрачным цветом.
В файле BG.GIF в указанной папке хранится та же фотография, что и в файле BG.JPG, с
которым мы работали до сих пор, но записанная в формате GIF таким образом, что се-
рый цвет фона при просмотре в браузере становится прозрачным.
>• Откройте в программе Блокнот (Notepad) файл geoton.html.
>• Отредактируйте код HTML файла, использовав в качестве значения атрибута back-
ground открывающего тега <body> адрес файла BG.GIF на вашем сайте так, чтобы
этот элемент принял примерно такой вид:
<body bgcolor=blue text=yellow link=white vlink=yellow alink=red back-
grounds "http://geoton.narod.ru/BG.GIF">
>• Сохраните файл geoton.html и откройте его в браузере.
Пока нет подключения к Интернету фон открытого документа - однотонный синий, как
это определено атрибутом bgcolor.
> Установите связь с Интернетом и скопируйте рисунок BG.GIF с компакт-диска в
каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2
этой книги.
> Обновите изображение в окне браузера. Браузер подключится к указанному в адресе
сайту и начнет загрузку рисунка.
Когда рисунок будет загружен, сначала может показаться, что фотография девушки сде-
лана на синем фоне. В действительности же синий цвет - это цвет фона страницы, а
прежний серый цвет фона фотографии в браузере стал прозрачным и сквозь него виден
синий фон документа. В этом можно убедиться, если изменить цвет фона страницы на
любой другой, изменив значение атрибута bgcolor.
> Прервите связь с Интернетом.
> Сохраните рисунок фона в папке Web, щелкнув правой кнопкой мыши на рисунке в
окне браузера и выбрав команду контекстного меню Сохранить фон как (Save Back-
ground As).
>• Закройте программу просмотра и редактор Блокнот (Notepad).
92
Создание Web-сайтов
Итак, мы познакомились с возможностями использования «прозрачной» графики GIF.
О том, как ее создавать, мы поговорим в следующих главах.
Графический текст
Многие Web-дизайнеры широко используют в своих проектах графический текст.
Это обычно небольшие надписи, состоящие из одного или нескольких слов, оформленные
с применением различных эффектов и сохраненные в файле одного из графических форма-
тов. Такой графический файл с текстом вставляется в Web-документ как рисунок кчи как
фон и используется в качестве заголовков, названий,
логотипов, кнопок и т.д. На Рис. 3.11 показаны
примеры таких надписей. Хотя подобная графика
и увеличивает объем Web-страниц и время их за-
грузки, разумное ее использование придает сайту
привлекательный профессиональный вид.
Графический текст, как и другие изображения, соз-
дается обычно в программах точечной графики и
поэтому состоит из множества пикселов. Если раз-
мер шрифта надписей достаточно крупный, то на
границах символов возникает резкий контраст, в
результате чего очертания символов кажутся не-
ровными, особенно в наклонных и закругленных
элементах (Рис. 3.12, вверху),
С помощью специального эффекта сглаживания
(anti-aliasing) можно минимизировать контраст на
границах символов. В результате их очертания ста-
нут более мягкими и надпись будет выглядеть бо-
лее элегантно (Рис. 3.12, внизу). Однако в тех слу-
чаях, когда надпись создается мелким шрифтом,
использование сглаживания нежелательно, так как
текст может стать плохо читаемым.
оюзИНФВРМ
шшж
VABANK
internet by
Jorbina
Г©
книга
Рис. 3.11. Графический текст
ТРИУМФ
ТРИУМФ
С приемами и способами создания графики и, в
частности, графического текста мы познакомимся в
следующей главе..
Рис. 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 требует некоторого навыка, так как боль-.
шинство созданных в ней объектов не могут быть легко изменены. Однако к этой особенно-
сти программы достаточно легко привыкнуть, тем более, что она записывает все выполнен-
ные действия, и любые из них можно отменить, вернувшись к предыдущему варианту.
94
Создание 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 - останавливаясь на отличиях в работе различных версий.
€mvtm 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
Подготовка графики
95
> Нажмите кнопку 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 о настройке параметров цвета
(Рис. 4.3).
Adobe Photoshop
В этом диалоге программа сообщает, что цве-
товая конфигурация будет установлена по
умолчанию. Задача настройки цветовой кон-
фигурации состоит в том, чтобы, по возмож-
Ф
Color settings for Photoshop 6 will be configured using default
setti
settings.
Do you wish to customise your color settings now?
_
Рис. 4.3. Диалог-запрос о настройке
параметров цвета
ности, сохранить идентичность цвета на всех стадиях его обработки и приблизить
видимые на экране цвета к тем, которые будут напечатаны принтером. Если вы же-
лаете выполнить собственную настройку цвета, то следует нажать кнопку Yes (Да), а
чтобы принять установки по умолчанию - кнопку No (Нет). При необходимости вы
сможете выполнить настройку цвета позднее, выбрав команду меню Edit • Color
Settings (Правка • Настройка цвета).
>• Нажмите кнопку No (Нет), чтобы закрыть диалог о настройке параметров цвета.
На экране появится диалог, из которого вы можете перейти к руководствам по
использованию программы, настройке цвета и узнать о новых возможностях про-
граммы (Рис. 4.4).
Если сбросить флажок Show this dialog at startup (Показывать этот диалог при запуске),
то диалог больше появляться не будет.
>- Нажмите кнопку Close (Закрыть). На экране появится рабочее окно программы
Photoshop (Рис. 4.5).
96
Создание Web-сайтов
Tutorials
Learn the Basics
Advanced Techniques (Online)
Working With What's New
Tips and Tricks
Tips and Tricks From the Experts
I
i
D.
Color Management Setup
Setting Up Color
tues At A Glance
New Feature Highlights
What's New Movie (Online)
U b
р Show Ihii dutog Л startup
•. 4.4. Диалог для знакомства с программой
Первая строка рабочего окна программы Adobe Photoshop - строка заголовка. В ней ото-
бражается название программы и слева от него значок системного меню, команды которо-
го предназначены для перемещения, изменения размеров и представления окна, а также
для его закрытия. У правого края строки заголовка располагаются три кнопки: [I] - для
сворачивания, \5\ - для разворачивания и [х] - для закрытия окна программы. (
Кнопка Кнопка
Полоса Кнопка разворачивания 3 a K Pb l ™f
меню сворачивания v ^ окна-
Значок
системного
меню
Заголовок
окна
0e Bi t Image Leyer Select Ffter Yew Window Hdp
Панель параметров
(Option Bar)
Рис. 4.5. Рабочее окно программы Adobe Photoshop
Подготовка графики
97
Под строкой заголовка расположена полоса меню, содержащая
группы команд управления программой. Для выбора какой-либо
команды меню следует щелкнуть мышью на названии группы, а
затем в появившемся подменю — на имени нужной команды.
Ниже полосы меню расположена панель параметров (Options Bar),
на которой в процессе работы будут отображаться доступные для
изменения параметры выбранного инструмента.
Основную часть рабочего окна Adobe Photoshop занимает рабочая
область, у левого края которой находится панель инструментов
(Tools) (Рис. 4.6). Инструменты этой панели предназначены для соз-
дания, редактирования и обработки изображения. Каждая кнопка
этой панели представляет или отдельный инструмент, например,
| N-| - Move Tool (V) (Инструмент «Перемещение» (V)1), |\| - Magic
Wand Tool (W) (Инструмент «Волшебная палочка» (W)) или несколь-
ко инструментов, например, [ПЦ - Rectangular Marquee Tool (M) (Ин-
струмент «Прямоугольная область» (М)), [£3 - 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 (М) (Инструмент «Прямоугольная область» (М)) -
создает выделенную область прямоугольной формы. Этой же кнопкой включают-
ся и другие инструменты, создающие области правильной формы: [Q] - Elliptical
Marquee Tool (М) (Инструмент «Эллиптическая область» (М)) - создает область
эллиптической формы; Single Row Marquee Tool (Инструмент «Однострочная
область») и Single Column Marquee Tool (Инструмент «Одноколоночная об-
ласть») - позволяют выделить соответственно строку или колонку высотой или
шириной в 1 пиксел.
1 Здесь и далее: латинская буква рядом с названием, в данном случае (V) - это клавиша быстрого
выбора инструмента.
4-1210
98 Создание Web-c айтов
\f>,\ — Lasso Tool (L) (Инструмент «Лассо» (L)) - выделяет область произвольной формы.
Этой же кнопкой включаются инструменты [ §] - Polygonal Lasso Tool (L) (Инст-
румент «Многоугольное лассо» (L)), создающий выделенную область в форме мно-
гоугольника и | ^ J - Magnetic Lasso Tool (L) (Инструмент «Магнитное лассо» (L)),
создающий выделенную область посредством привязки к резким границам
изображения.
| %\ - Crop Tool (С) (Инструмент «Рамка» (С)) - позволяет кадрировать изображение,
обрезав его края.
|di?] - Healing Brush Tool (J) (Инструмент «Лечащая кисть» (J)) - позволяет исправить
дефекты изображения, делая их неотличимыми от окружающих частей картинки.
Этой же кнопкой включаются инструменты [О] - Patch Tool (J) (Инструмент «За-
платка» (J)), который позволяет заменить выбранную область пикселами из другой
области, и \W\ - Color Replacement Tool (J) (Инструмент «Замена цвета» (J)), кото-
рый упрощает замену указанного цвета. В версии CS2 в этой группе появилось два
новых иструмента: |jg?J - Spot Healing Tool (J) (Инструмент «Кисть лечащая лятна»
(J)) и QSj - Red Eye Tool (J) (Инструмент «Красный глаз» (J)), а иснтрумет Color
Replacement Tool (J) (Инструмент «Замена цвета» (J)) перенесен в группу Еыбора
кистей и обзначается кнопкой (Sfj-
| ^J - Clone Stamp Tool (S) (Инструмент «Штамп» (S)) - позволяет воспроизводить точ-
ные или модифицированные копии элементов изображения и цветовых образцов в
том же изображении или в другом документе. [ЦУ - Pattern Stamp Tool (S) (Инст-
румент «Штамп узора» (S)), который позволяет рисовать выбранным узором.
\@\ - Erazer Tool (Е) (Инструмент «Ластик» (Е)) - подобно ластику, стирает изображение.
Этой кнопкой включается также инструмент \'&\ - Magic Erazer Tool (E) (Инструмент
«Волшебный ластик» (Е)) - позволяющий, указав любую точку на рисунке, сделать
прозрачными остальные области с таким же цветом и | ^,| - Background Erazer
Tool (E) (Инструмент «Фоновый ластик» (Е)), который определяет цвета в том месте,
где прошла кисть, ищет аналогичные цвета по всему изображению и удаляет их.
[~б] - Blur Tool (R) (Инструмент «Размытие» (R)) - позволяет смягчать слишком резкие
границы или области в изображении, уменьшая контраст между пикселами. Вклю-
чающийся этой же кнопкой инструмент [~5] - Sharpen Tool (R) (Инструмент «Рез-
кость» (R)) повышает четкость изображения, делая слишком мягкие границы более
резкими, а инструмент [ 0 - Smudge Tool (R) (Инструмент «Палец» (R)) - имити-
рует размазывание пальцем свежей краски.
W] - Path Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяет выбирать
контуры. Этой же кнопкой включается инструмент | ^ J - Direct Selection Tool (A)
(Инструмент «Прямой выбор» (А)), который позволяет выбирать сегмент контура.
["&"] - Pen Tool (Р) (Инструмент «Перо» (Р)) - создает контур любой формы. Этой кноп-
кой включаются также инструменты, позволяющие добавлять и удалять точки при-
вязки на линии и преобразовывать плавные кривые в ломаные и наоборот.
- Notes Tool (N) (Инструмент «Комментарии» (N>) - создает текстовые коммента-
рии, которые могут быть добавлены к изображению. Этой кнопкой включается
Подготовка графики 99_
также инструмент |Ф)] - Audio Annotation Tool (N) (Инструмент «Аудиокоммента-
рий» (N)), позволяющие добавлять к изображению аудиокомментарий.
Щу\ - Hand Tool (Н) (Инструмент «Рука» (Н)) - применяется для перемещения изобра-
жения, которое не умещается в рабочем окне.
В правом вертикальном ряду панели Tools содержатся следующие инструменты:
|Kj.| - Move Tool (V) (Инструмент «Перемещение» (V)) - позволяет перемещать выделен-
ные области и слои.
\\\ - Magic Wand (W) (Инструмент «Волшебная палочка» (W)) - выделяет фрагменты
изображения с учетом сходства цветов соседних пикселов.
\j?\ - Slice Tool (К) (Инструмент «Фрагмент» (К)) - позволяет разрезать изображение на
Ё
гменты для ускорения их загрузки в браузер. При помощи другого инструмента -
- Slice Select Tool (К) (Инструмент «Выбор фрагмента» (К)), который включает-
ся этой же кнопкой, можно изменять размеры фрагментов и перемещать их.
\^/\ - Brush Tool (В) (Инструмент «Кисть» (В)) - используется для наложения мягких
цветовых мазков. Этой же кнопкой включается инструмент \j?\ - Pencil Tool (В)
(Инструмент «Карандаш» (В)), который позволяет рисовать произвольные линии с
жесткими границами.
\$\ - History Brush Tool (Y) (Инструмент «Кисть событий» (Y)) - создает копию или сни-
мок изображения и затем закрашивает ею текущее изображение или его часть. Этой
же кнопкой включается инструмент \3$\ - Art History Brush (Y) (Художественная
кисть событий (Y)), который позволяет рисовать стилизованными мазками, используя
указанное предыдущее состояние изображения в качестве исходных данных.
| 3 j - Gradient Tool (G) (Инструмент «Градиент» (G)) - используется для создания плав-
ных переходов от одного цвета к другому. Такой плавный переход художники на-
зывают растяжкой. Этой кнопкой включается также инструмент |^»J - Paint Bucket
Tool (G) (Инструмент «Заливка» (G)), который используется для заливки цветом
выделенной области.
[*Г] - Dodge Tool (О) (Инструмент «Осветлитель» (О)) - осветляет отдельные участки
изображения. Включающийся этой же кнопкой инструмент \ф.\ - Burn Tool (О)
(Инструмент «Затемнитель» (О)) затемняет отдельные области, а инструмент \Q\ -
Sponge Tool (О) (Инструмент «Губка» (О)) изменяет насыщенность цветов.
| Т] - Horisontal Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)) - инструменты,
которые включаются этой кнопкой, создают горизонтальные и вертикальные над-
писи, а также маски текста на изображении.
| В] - Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) - позволяет рисовать фи-
гуры прямоугольной формы. Этой же кнопкой включаются инструменты: | QJ -
Rounded Rectangle Tool (U) - для рисования прямоугольников со скругленными
углами, | Qj - Ellipse Tool (U) - для "создания эллипсов и окружностей, [Q] -
Polygon Tool (U) - для рисования многоугольников, |\J - Line Tool (U) (Инст-
румент «Линия» (U)) - для создания прямых линий любой толщины со стрелками
4'
100 Создание Web-сайтов
на концах, Ц5] - Custom Shape Tool (U) (Инструмент «Заказная форма» (U) - для
рисования фигур, форма которых выбирается из предлагаемых образцов.
\^\ - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цвета на ри-
сунке и переопределения основного и фонового цветов. Этой же кнопкой включа-
ются инструменты \%?\ - Color Sampler Tool (I) (Инструмент «Образец цвета» (I)),
который позволяет перемещать/удалять образцы цвета и [<$?] - 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))
вы можете быстро выбрать черный цвет для переднего плана и белый - для фона.
Под образцами цвета находятся две кнопки: |Ю1| - Edit in Standard Mode (Q) (Редактиро-
вание в стандартном режиме (Q)) и | О| - Edit in Quick Mask Mode (Q) (Редактирование в
режиме «Быстрая маска» (Q)) - соответственно для выключения и включения режима
быстрой маски, позволяющего предохранить фрагменты изображения от изменения в
процессе редактирования.
Еще ниже располагаются три кнопки, предназначенные для быстрого переключения ре-
жимов просмотра рисунка: Щ - 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 содержатся различные палитры, имеющие самое разнообразное на-
значение: они позволяют выбирать цвета и стили, устанавливать параметры текста,
Подготовка графики 101
перемещаться по изображению и получать необходимую информацию о размерах, по-
ложении, цветах объектов, работать со слоями, контурами, каналами и т.п.
В процессе создания или редактирования изображения в рабочем окне программы
Adobe Photoshop постоянно находятся панель инструментов (Tools) и необходимые
для работы палитры. Их можно разместить рядом с обрабатываемым изображением,
поверх него, если оно велико, или свернуть и поместить на краю рабочей области.
Все операции с окнами палитр осуществляются обычными, принятыми в Windows,
способами. Перемещение палитры выполняется посредством перетаскивания мышью
заголовка окна. Для сворачивания палитры достаточно нажать кнопку [Г] в правом
верхнем углу окна палитры, для разворачивания свернутой палитры — кнопку [И].
С помощью кнопки [х] вы можете закрыть палитру, если она не нужна, чтобы освобо-
дить место на экране. Вызвать закрытую палитру на экран можно с помощью соответ-
ствующей команды меню Window (Окно).
Каждая палитра имеет собственный ярлык с названием, который располагается во вто-
рой, строке окна палитры. Основные палитры Adobe Photoshop по умолчанию распола-
гаются группами в трех окнах у правого края рабочей области. В верхнем окне слева
направо находятся палитры Navigator (Навигатор), Info (Информация) и Histogram (Гис-
тограмма); в среднем - Color (Цвет), Swatches (Каталог), Styles (Стили); в нижнем -
Layers (Слои), Channels (Каналы), Paths (Контуры), History (События), Actions (Дейст-
вия). В каждом из окон отображается активная в данный момент палитра. Названия ак-
тивных палитр выделены полужирным начертанием. Чтобы включить другую, неактив-
ную в данный момент палитру, следует щелкнуть мышью на ее ярлыке. Любую палитру
можно выделить из группы и поместить в отдельном окне. Для этого достаточно пере-
тащить ярлык этой палитры в нужное место. Возможна также и обратная процедура -
совмещение палитр.
У нижнего края рабочего окна находится строка состояния (Status Bar), предназначен1
ная для отображения информации о текущем документе, рабочих дисках, активном в
данный момент инструменте. Здесь могут появляться некоторые подсказки.
Теперь, когда мы познакомились с рабочим окном Adobe Photoshop, переключимся в
Adobe ImageReady и посмотрим, чем отличаются эти программы.
>• Нажмите кнопку | T^l l Ei - Edit in ImageReady (Shift+Ctrl+M) (Редактировать в
ImageReady (Shift+Ctrl+M)) на панели инструментов (Tools). Будет запущена про-
грамма Adobe ImageReady, и на экране появится ее рабочее окно (Рис. 4.7).
Как видите, элементы рабочего окна Adobe ImageReady аналогичны уже рассмотренным
элементам рабочего окна Adobe Photoshop. Набор инструментов на панели инструментов
(Tools) практически такой же, как и в Adobe Photoshop. Но, кроме того, имеются новые
кнопки для работы с картами навигации, которых нет в Adobe Photoshop: [k$] -
Rectangle Image Map Tool (P) (Инструмент «Прямоугольная область карты навигации»
(Р)) и [ §] - Image Map Select Tool (J) (Инструмент «Выбор области карты навигации»
(J)). Кнопкой \Щ\ включаются также инструменты |'stf))J - Circle Image Map Tool (P) (Ин-
струмент «Круглая область карты навигации» (Р)) и |Ц^] — Polygon Image Map Tool (P)
(Инструмент «Многоугольная область карты навигации» (Р)) - для указания формы уча-
стка карты навигации.
102
Создание Web-сайтов
Под образцами цвета переднего плана и фона расположены четыре кнопки, имеющие
следующее назначение:
- Toggle Image Maps Visibility (А) (Выключение/включение отображения
навигационных карт (А));
-Toggle Slices Visibility (Q) (Выключение/включение отображения фрагментов (Q));
£*> Е«Н Image Uysr Sliest Select Ffci yio»
Help
tr.s.
T И.
\ a
В
8 9 1
* |; ||
Op:
•<i i» | o. a i ьд ы
4.7. Рабочее окно программы Adobe ImageReady
| TJ - Rollover Document (Y) (Предварительный просмотр документа (Y));
§ - Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в браузере по
умолчанию (Ctrl+Alt+P)).
С помощью кнопки
- 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 пока ничем не заполнена. Это, однако,
не значит, что на ней можно что-либо нарисовать. У вас не будет работать ни один инст-
румент, пока не будет создан новый документ или же открыт существующий.
Подготовка графики
103
. Создание нового рисунка
При создании нового документа необходимо определить его параметры: имя, размеры,
цветовой режим, цвет фона.
> Выберите команду меню File • New (Файл • Новый) или нажмите комбинацию кла-
виш 1[сиГ|+|[ы|, На экране появится диалог New (Новый) (Рис. 4.8).
№те
г Ereset: | Clipboard
WJdth
tterght
ResoLton
Cotaraode
Background Contents
]unti tl edl |
|800
[_600
I72
| RGB Cokir
| White
•МЛ
RI -
I I Pta*
II Pl ^
11 pixels/Inch
bj
Ы
id
Ы
и
н *
1 OK |
I Reset
i Ssre Preset.. I
I betete Preset... |
image Size:
Pitc. 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
234x60
88x31
120x90
Тип баннера
Full Banner (Стандартный баннер)
Half Banner (Баннер половинного размера)
Micro Bar (Микро полоса)
Button 1 (Кнопка 1)
104 Создание Web-сайтов
Размер баннера
в пикселах
120x60
120x240
125x125
728x90
Тип баннера
Button 2 (Кнопка 2)
Vertical Banner (Вертикальный баннер)
Square Banner (Квадратный баннер)
Leaderboard («Перетяжка» вверху страницы)
Воспользовавшись этими рекомендациями, создадим стандартный баннер размером
468x60 пикселов.
Напомним, что пикселы - это точки, из которых строится растровое
изображение. Размеры рисунка определяются количеством пикселоз по
горизонтали (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 (Прозрачный).
Подготовка графики
105
> Убедитесь, что в открывающемся списке Background Contents (Содержимое фона)
выбрано значение White (Белый), чтобы создать новый рисунок с белым фоном.
>• Нажатием кнопки ОК закройте диалог New (Новый). В рабочей области программы
появится окно нового документа с именем Untitled-1 (Без имени-1) с белым цветом
фона и заданного размера - 468 х 60 пикселов.
>• Если окно Untitled-1 частично перекрыто панелью инструментов (Tools), перетащите
его вправо, чтобы оно было видно полностью (Рис. 4.9).
f\- Adobe Photoshop
£dit Image Layei Select Filler View Window Help
А.
а
Д.
И
4.
if.
О
•
т
У
Я.
13
•,.
т
а
/.
Ч
Я
и
о
BO
4 " J ..^ O,|
К,Ь7%П Doci К.ЭК/0 byUs
Г>aw Mleclton front c«f4«r w subtrict from tihling swtdion.
• Рис. 4.9. Новый документ создан
В Adobe Photoshop каждый рисунок имеет свое собственное отдельное окно. Это позво-
ляет работать одновременно с несколькими изображениями.
В заголовке окна созданного документа, кроме его имени - Untitled-1, указан масштаб
изображения, вероятней всего - 66,7%, который зависит от установленного в данный
момент разрешения видеокарты вашего компьютера, а в скобках - цветовой режим -
RGB/8 (RGB, по 8 бит на каждый цвет). Текущий масштаб изображения - 66,67% - вы
можете видеть также в левом нижнем углу строки состояния (Status Bar).
В версии CS2 вместо общей строки состяния внизу окна программы, у
каждого окна документа есть своя собсвтенная строка состяния.
Поэтому все дальней шие практиечские шаги в версии CS2 надо выпол-
нять используя строку состояния окна документа.
Чтобы с документом было удобно работать, увеличим масштаб отображения до 100%.
> Дважды щелкните мышью на поле с отображением текущего масштаба - 66,67% -
в левом нижнем углу строки состояния (Status Bar). Это значение будет выделено
темным цветом.
106
Создание Web-сайтов
>• Введите с клавиатуры новое значение масштаба отображения документа - 100 - и на-
жмите клавишу pntar]. Масштаб отображения увеличится, и в окне документа появятся
вертикальная и горизонтальная полосы прокрутки, с помощью которых можно увидеть
части рисунка, не помещающиеся в окне. >
Но использовать полосы прокрутки для созданного документа малого размера нецелесо-
образно. Удобнее будет увеличить размеры окна документа. Это выполняется так же,
как обычно изменяется размер окна в Windows.
>• Установите указатель мыши на правом нижнем углу рамки окна документа так, что-
бы указатель мыши принял форму двунаправленной стрелки "S..
>• Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз при-
мерно на расстояние, равное одной третьей части ширины и высоты окна документа.
Размер окна увеличится.
> Отпустите левую кнопку мыши.
> Если необходимо, повторно откорректируйте размер окна так, чтобы полосы про-
крутки отсутствовали (Рис. 4.10).
Рис. 4.10. Размер окна документа увеличен
Справа от значения масштаба - 100% - в строке состояния (Status Bar) выводится ин-
формация о текущем документе: Doc: 82.3K /0 bytes. Первое число - 82,ЗК - объем до-
кумента в килобайтах. Этот объем программа вычисляет как произведение размеров до-
кумента в пикселах и глубины цвета. Второе число, после дробной черты - это объем
оперативной памяти, занимаемой неуплотненным файлом, с учетом дополнительных
слоев и альфа-каналов. Пока изображение в документе отсутствует, это число - 0 bytes
(0 байт). Подробнее о слоях и альфа-каналах мы поговорим позднее. Правее информа-
ции о размере документа выводятся сведения о выбранном в данный момент инструмен-
те на панели инструментов (Tools).
(fJiMvim JV&3. Рисуем геометрические фигуры
Прежде чем приступить к изготовлению баннера, потренируемся в создании простых
объектов, а затем посмотрим, как их удалять и отменять выполненные операции.
В Adobe Photoshop есть специальные инструменты для рисования простых фигур -
прямоугольника, прямоугольника со скругленными углами, эллипса, многоугольника.
Однако мы для рисования таких фигур воспользуемся инструментами выделения
Подготовка графики
107
области с последующей заливкой или обводкой контура цветом. Это позволит быстрее
освоить весь арсенал инструментов Adobe Photoshop.
Сначала нарисуем прямоугольник, воспользовавшись для этого инструментом [ПЦ -
Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)).
> Убедитесь, что на панели инструментов (Tools) выбран инструмент [Ilj] -
Rectangular Marquee Tool (M) (Инструмент «Прямоугольная область» (М)): его
кнопка должна быть нажата. В противном случае - нажмите эту кнопку.
> Установите указатель мыши в окне документа Untitled-1 вблизи левого верхнего его
края. Указатель мыши примет форму крестика +.
>• Нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз, примерно
к середине нижней стороны окна документа. В окне рисунка появится прямоугольная
рамка из движущегося пунктира, которая будет увеличиваться по мере перемещения
указателя мыши, указывая размер создаваемой прямоугольной области.
>• Отпустите левую кнопку мыши. На рисунке будет создана прямоугольная область
выделения (Рис. 4.11).
Рис. 4.11. Прямоугольная область выделения создана
Если с первого раза не получилась прямоугольная область, примерно равная половине
размера окна документа, то созданную область можно отменить, щелкнув мышью в лю-
бом месте окна документа, и нарисовать заново.
Описанным способом вы рисуете прямоугольную область от верхнего левого угла. Если
же нужно нарисовать от центра, то в процессе перемещения указателя мыши следует
удерживать нажатой клавишу II Al t I. Чтобы нарисовать квадрат с равными сторонами,
следует при перемещении указателя мыши удерживать нажатой клавишу ilShffil.
Для окончания создания прямоугольной фигуры следует обвести контур выделения или
заполнить выделенную область цветом4. Но предварительно цвет нужно выбрать. Adobe
Photoshop располагает несколькими способами выбора цвета. Наиболее простой — выбор
из образцов палитры Swatches (Каталог).
>• Щелкните мышью на ярлыке Swatches (Каталог) в среднем окне палитр у правого края
экрана. Если данный ярлык отсутствует, выберите команду меню Window • Swatches
(Окно • Каталог). На экране появится палитра Swatches (Каталог) (Рис. 4.12).
108
Создание Web-сайтов
Рис. 4.12. Палитра Swatches (Каталог)
Выберем в этой палитре цвет для заливки прямоугольника.
> Установите указатель мыши на четвертом слева в верхнем ряду образце голубого
цвета. При этом указатель мыши примет форму пипетки f, и вы увидите всплываю-
щую подсказку с названием цвета - RGB Cyan (Голубой RGB).
> Щелкните мышью в этом месте. Цвет будет выбран и появится на образце цвета пе-
реднего плана (Set foreground color) панели инструментов (Tools).
Чтобы выбрать цвет для фона, следует щелкнуть мышью на образце палитры Swatches
(Каталог) при нажатой клавише I! Al t I.
Теперь можно с помощью инструмента |<$»J - Paint Bucket Tool (G) (Инструмент «Залив-
ка» (G)) залить выбранным цветом выделенную прямоугольную область.
v Нажмите и удерживайте кнопку [Ш] - Gradient Tool (G) (Инструмент «Градиент» (G))
на панели инструментов (Tools). Появится дополнительная панель с перечнем инст-
рументов, которые включаются данной кнопкой.
>• Щелчком мыши выберите инструмент [ §] - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)). Его значок отобразится на кнопке, а кнопка будет нажата.
Теперь можно выполнить заливку.
>• Установите указатель мыши, который примет форму ф, внутри прямоугольной об-
ласти выделения.
> Щелкните мышью в этом месте. Выделенная область будет залита выбранным цве-
том (Рис. 4.13).
Рис. 4.13. Область выделения залита цветом
Теперь обведем контур прямоугольника, но другим цветом, для выбора которого вос-
пользуемся палитрой Color (Цвет), предоставляющей более широкие возможности ука-
зания цвета.
Подготовка графики
109
>- Щелкните мышью на ярлыке 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).
Теперь можно выполнить обводку контура выделения черным цветом.
110
Создание Web-сайтов
Location
О inside ©Renter O Outside
г- Blending •
> Выберите команду меню Edit • Stroke
(Правка • Обвести). На экране появится диа-
лог Stroke (Обводка) (Рис. 4.15).
В поле ввода Width (Толщина) следует указать
толщину обводки. Оставим предлагаемое
по умолчанию значение 1 рх (1 пиксел) без
изменения.
В поле Color (Цвет) указан черный цвет передне-
го плана, который будет использован для обвод-
ки. При необходимости вы можете выбрать дру-
гой цвет, щелкнув мышью на этом поле.
Группа переключателей Location (Положение)
позволяет выбрать положение линии обводки
относительно контура выделения: Inside (Внут-
ри), Center (По центру), Outside (Снаружи).
Открывающийся список Mode (Режим) поз-воляет выбрать режим наложения пикселов.
В поле ввода Opacity (Непрозрачность) можно указать уровень непрозрачности цвета.
Значение 100% означает полную непрозрачность.
>• Оставив все значения, предлагаемые по умолчанию, закройте диалог Stroke (Обвод-
ка) нажатием кнопки ОК.
> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение. Изображение в окне документа примет вид как на Рис. 4.1 б.
Mode: [Normal j
П Besetve Transparency
Рис. 4.15. Диалог Stroke (Обводка)
igUntitled 1 & 100Х (RGB/8)
Рис. 4.16. Обводка прямоугольника выполнена
Нарисуем справа от прямоугольника эллипс. Для создания области выделения и виде
эллипса или круга используется инструмент [Q] - Elliptical Marquee Tool (M) (Инст-
румент «Эллиптическая область» (М)). Предварительно его следует выбрать.
>• Установите указатель мыши на кнопке [G] - Rectangular Marquee Tool (M) (Инст-
румент «Прямоугольная область» (М)) на панели инструментов (Tools).
> Нажмите и удерживайте клавишу II А" I.
>• Не отпуская клавишу II Al t ]. щелкните мышью на кнопке уД] - Rectangular Marquee
Tool (M) (Инструмент «Прямоугольная область» (М)). Будет выбран инструмент [OJ-
Elliptical Marquee Tool (M) (Инструмент «Эллиптическая область» (М)), и вы увидите
его нажатую кнопку.
Подготовка графики
111
> Отпустите клавишу И Al t I.
Вычерчивание овальной области выделения выполняется так же, как и прямоугольной.
> Установите указатель мыши в окне документа, правее верхнего правого угла нарисо-
ванного прямоугольника.
> Нажмите и удерживайте левую кнопку мыши. .
Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз так, что-
бы появившаяся пунктирная эллиптическая область выделения расположилась в пра-
вой части окна документа.
Отпустите левую кнопку мыши. Эллиптическая область выделения будет закрепле-
на (Рис. 4.17).
Рис. 4.17. Эллиптическая область выделения создана
Чтобы нарисовать выделенную область в виде круга, следует при перемещении мыши
удерживать нажатой клавишу liShml. Для рисования эллиптической области от центра
необходимо при перемещении указателя мыши удерживать нажатой клавишу!! Al t I.
Для выбора цвета заливки эллипса воспользуемся еще одним, новым способом.
v Щелкните мышью на образце цвета переднего плана (Set foreground color) на
панели инструментов (Tools). На экране появится диалог Color Picker (Палитра
цветов) (Рис. 4Л 8).
Select foreground color:
OK
[""Cancel I
Qjstom
©H:|0 (• OL;
O S: 12 |% О a:
OR: [F
OG:(T^
O B:[ ° Z
П Only Web Colors
C:[75j%
M:[&Bj%
Y:|67j%
K:IE>
Puc. 4.18. Диалог Color Picker (Палитра цветов)
112 Создание Web-сайтов
Этот диалог предоставляет самые широкие возможности по установке цвета. Определять
цвет можно визуально по спектральной шкале и цветовому полю или с помощью ввода
числовых значений составляющих любой из используемых цветовых моделей. Спектраль-
ная шкала и цветовое поле выводят на экран цвета в двух моделях - RGB и HSB.
В цветовой модели HSB цвет описывается тремя составляющими - цветовым оттенком
Н (Hue), насыщенностью S (Saturation) и яркостью В (Brightness).
Спектральная шкала - узкая вертикальная полоса в центральной части диалога - отобра-
жает цветовой диапазон включенной цветовой составляющей: Н (Цветового оттгнка),
S (Насыщенности), В (Яркости), R (Красной), G (Зеленой), В (Синей). По умолчанию
включена составляющая Н (Цветовой оттенок).
Цветовое поле слева от спектральной шкалы отображает цветовой диапазон оставшихся
двух составляющих цветовой модели: одной - по горизонтальной, а другой - по Е.ерти-
кальной оси. При установленном по умолчанию переключателе цветового оттенка Н на
спектральной шкале отображается полный спектр.
> Перемещайте ползунок регулятора вдоль спектральной шкалы. Таким образом вы оп-
ределяете цветовой оттенок, а цветовое поле отображает цветовое пространство этого
оттенка по насыщенности - горизонтальная ось и по яркости - вертикальная.
>• Установите переключатель S (Насыщенность). Вертикальная полоса отобразит на-
сыщенность в диапазоне от 0% внизу до 100% вверху.
>• Переместите ползунок регулятора вертикальной полосы максимально вверх. Теперь
цветовое поле отображает по горизонтали спектр цветовых оттенков, а по вертика-
ли - яркость.
> Установите переключатель R (Красный), включив таким образом красную составляю-
щую. На спектральной шкале будет представлен цветовой диапазон красной состав-
ляющей от 0 в нижней точке до 255 - в верхней, а в цветовом поле - соответственно
диапазон синей составляющей по горизонтальной оси и зеленой - по вертикальной.
Для указания цвета следует переместить ползунок регулятора вдоль вертикальной поло-
сы и щелчком мыши выбрать цвет в цветовом поле. Числовые значения цветовых со-
ставляющих отобразятся в полях ввода в правой части диалога.
>• Выберите указанным способом любой цвет для заливки эллипса.
Справа от вертикальной полосы, вверху, представлены два небольших цветовых поля:
в нижнем отображается текущий цвет, а в верхнем - полученный в результате выбора.
Если выбранный цвет не входит в палитру Web, то справа от этих полей появится преду-
преждающий значок в виде куба 0, а под значком - образец ближайшего цвета из
Web-палитры. Чтобы выбрать безопасный цвет Web, достаточно щелкнуть мышью на об-
разце или на значке |@. Но сейчас этого делать не следует. Цвета будут заменены в
процессе оптимизации. Напомним, что безопасная Web-палитра содержит 216 цветов,
которые гарантировано отображаются всеми браузерами во всех операционных системах.
Если новый цвет не имеет аналогов в цветовой модели CMYK, т.е. не входит в цветовой
охват этой модели, то рядом появляется предупреждение в виде треугольника с воскли-
цательным знаком Д. Под треугольником выводится цветовое поле с ближайшим
Подготовка графики
113
CMYK-эквивалентом выбранного цвета. Этот эквивалент можно принять, если щелк-
нуть мышью на треугольнике или образце.
В цветовой модели CMYK цвет определяется четырьмя основными составляющими:
голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (Black). Эта модель
используется преимущественно для создания изображений, предназначенных для поли-
графического исполнения. Ее цветовой охват значительно меньше, чем цветовой охват
модели RGB. Если изображение создается для Web, т.е. для просмотра на экране мони-
тора, то использовать цвета, входящие в охват модели CMYK нет необходимости.
После выбора цвета в поле ввода # в нижней части диалога отобразится его шестнадца-
теричное числовое значение, каждые два символа которого слева направо характеризуют
значения соответственно красной, зеленой и синей RGB-составляющей.
Если установить флажок Only Web Colors (Только цвета Web), то на спектральной шка-
ле и в цветовом поле будут отображаться только безопасные цвета Web. Подробно о
назначении этих цветов мы уже говорили в предыдущей главе.
Нажатие кнопки Custom (Пользовательские) вызовет на экран диалог Custom Colors
(Пользовательские цвета) (Рис. 4.19), в котором вы можете выбрать подходящий цвет из
различных цветовых библиотек.
Custom Colors
Book: | PANTONE® solid coated
1 OK - 1 1
| Cancei"""]
Type a color name t o
select it in the color list.
PANTONE 7107 С
Рис. 4.19. Диалог Custom Colors (Пользовательские цвета)
> Нажав кнопку OK, закройте диалог Color Picker (Палитра цветов). Выбранный цвет
отобразится на образцах в палитре Color (Цвет) и на панели инструментов (Tools).
Зальем цветом выделенную эллиптическую область следующим образом.
Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог Fill
(Заливка) (Рис. 4.20).
В открывающемся списке Use (Использовать) вы можете выбрать, какой цвет ис-
пользовать для заливки: Foreground Color (Цвет переднего плана), Background
Color (Цвет фона), Black (Черный), 50% Gray (50% серого), White (Белый) и другие
возможности.
114
Создание Web-сайтов
ЭЙ Щх II
[- Contents ;
Use: | Forepjound Color QJ
Custom Pattern: | -|
[-Blending 1
Mode: | Normal J^J
Opacity: [ 100 | %
• Beserve Transparency
I—OK—|
| Cancel 1
Рис. 4.20. Диалог Fill (Заливка)
> Оставив установленный по умолчанию цвет переднего плана (Foreground Color),
закройте диалог Fill (Заливка) нажатием кнопки ОК. Выделенная область будет за-
полнена выбранным цветом.
В процессе создания рисунка может возникнуть необходимость нарисовать толстую
прямоугольную рамку или кольцо. Для этого достаточно сжать выделенную область и
залить ее цветом фона. Посмотрим, как это выполнить практически.
>• Не отменяя выделения эллиптической облас-
ти, выберите команду меню Select • Modify •
Contract (Выделение • Модификация •
Сжать). На экране появится диалог Contract
Selection (Сжатие выделения) (Рис. 4.21).
>• В поле ввода Contract By (Сжать на) введи-
те 16 пикселов.
Contract By: I
Рис. 4.21. Диалог Contract
Selection (Сжатие выделения)
> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения). Эллип-
тическая область выделения будет сжата на 16 пикселов.
Чтобы расширить область выделения следует выбрать команду меню Select • Modify •
Expand (Выделение • Модификация • Расширить).
Зальем сжатую выделенную область белым цветом фона.
> Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог
Fill (Заливка).
>• В открывающемся списке Use (Использовать) выберите Background Color (Цвет фона).
>• Закройте диалог Fill (Заливка), нажав кнопку ОК. Сжатая эллиптическая выделенная
область будет заполнена белым цветом фона (Рис. 4.22).
Рис. 4.22. Кольцо нарисовано
Подготовка графики
115
> Нажмите комбинацию клавиш ll Ct f l 1+|[Р|. чтобы снять выделение.
Данная комбинация и все другие комбинации буквенных клавиш работают в Adobe
Photoshop только, если включен язык клавиатуры Английский (США) (English (USA)).
В этом опыте мы рассмотрели приемы создания областей выделения правильной формы.
Области выделения неправильной формы можно получить с помощью инструмента
l£M- Lasso Tool (L) (Инструмент «Лассо» (L)), перетаскивая указатель мыши так, чтобы
создать замкнутый контур. Многоугольную область выделения легко построить с помо-
щью инструмента [ §] - Polygonal Lasso Tool (L) (Инструмент «Многоугольное лассо»
(L)), щелкая мышью в вершинах предполагаемой фигуры. Если же требуется создать
контур неправильной формы с высокой точностью, например, выделить на фотографии
фигуру человека, то наилучший результат можно получить с помощью инструмента
ЦТ] - Pen Tool (Р) (Инструмент «Перо» (Р)).
JV&4. Удаление объектов и отмена действий
Теперь нам нужно научиться отменять выполненные команды и операции и удалять
объекты. Это позволит в процессе создания рисунка при необходимости вернуться на
несколько шагов назад, чтобы сделать исправления в документе.
Отменить последнюю выполненную операцию можно, воспользовавшись командой ме-
ню Edit • Undo (Правка • Отменить).
> Выберите команду меню Edit • Undo Deselect (Правка • Отменить снятие выделе-
ния) или нажмите комбинацию клавиш |[ 9trl 1+1иП. Последняя выполненная команда
снятия выделения будет отменена, и выделение будет восстановлено.
В Adobe Photoshop имеется специальная палитра History
(События), в которой записываются все операции, выпол-
ненные в окне документа.
•ынь.
Щелкните мышью на четвертом слева ярлыке History
(События) в нижнем окне палитр. Если этот ярлык от-
сутствует, выберите команду меню Window • History
(Окно • События). На экране появится палитра History
(События).
Увеличьте высоту окна палитры History (События),
чтобы увидеть всю информацию, содержащуюся в ней
(Рис. 4.23).
Paint Bucket
Stroke
Deselect
) Elliptical Marquee
Fill
\ Contract
ы
Рис. 4.23. Палитра
History (События)
В этой палитре вы видите перечень выполненных при работе над документом операций.
Каждая операция обозначена миниатюрой и названием. Последняя выполненная опера-
ция - Fill (Заливка) - выделена темным цветом. Любую из операций можно отменить
несколькими способами.
> Чтобы отменить последнюю операцию заливки сжатой эллиптической области цве-
том фона, перетащите значок этой операции - Fill (Заливка) - на кнопку с изображе-
нием корзины | Ш | - Delete current state (Удалить выделенную операцию) в нижней
части палитры History (События). Заливка сжатой эллиптической области белым
116
Создание Web-сайтов
цветом на рисунке будет удалена, а в палитре History (События) будет выделена опе-
рация Contract (Сжатие).
Отменим также и эту операцию.
> Нажмите кнопку I ffl 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 (Кисть) с
образцом активной кисти.
- Brush: • - Mode; [grurfi (~j Opacity: ПоО% | > | Flow: | 10[)%"[Л #C* I OErase to History
Рис. 4.25. Панель параметров инструмента Eraser Tool(Е)(Инструмент «Ластик» (Е))
Подготовка графики
117
>• Нажмите кнопку [ j справа от поля образца Brush
(Кисть) на панели параметров (Options Bar).
На экране появится палитра кистей (Рис. 4.26).
В этой палитре представлены образцы готовых
кистей различной формы и размеров. Для выбора
любой кисти достаточно щелкнуть мышью на ее
образце. Однако если нужной нам кисти среди об-
разцов нет, то кисть можно изготовить. Для этого
существует несколько способов: модифицировать
существующую кисть, определить в качестве кис-
ти фрагмент рисунка или создать новую кисть.
Воспользуемся последним способом.
> В поле ввода Master Diameter (Основной диа-
метр) введите новое значение этого параметра -
50 пикселов. Одновременно в палитре кистей
увеличится размер кисти на образце.
Master Diameter
©
Hardness:
Рис. 4.26. Палитра кистей
Поле ввода Hardness (Жесткость) и соответствующий ему ползунковый регулятор оп-
ределяет размер жесткого центра кисти и задается в процентах от ее диаметра. Он по-
зволяет приблизительно имитировать реальную кисть с мягкими краями.
>• Нажмите кнопку © в правом верхнем углу палитры кистей. На экране появится меню.
>• Выберите в появившемся меню команду New Brush Preset (Новая кисть). На экране
появится диалог Brush Name (Имя кисти) (Рис. 4.27), в котором следует указать имя
новой кисти.
Name: | Hard Round 50 1
OK
Cancel |
Рис. 4.27. Диалог Brush Name (Имя кисти)
На образце в левой части диалога отображаются текущая форма и размер кисти. Ее на-
звание - Hard Round 50 1 (Жесткая, круглая, 50 1) - указано в поле ввода Name (Имя).
>- В поле ввода Name (Имя) укажите имя Новая кисть и нажмите кнопку ОК, чтобы
закрыть диалог Brush Name (Имя кисти).
Созданная кисть и ее размер отобразятся в палитре Brushes (Кисти) в конце перечня
образцов. Ее имя появляется во всплывающей подсказке при наведении указателя мы-
ши на кисть.
>• Щелкните мышью на свободном пространстве рабочего окна, чтобы закрыть палитру
кистей.
Теперь можно с помощью инструмента |
удалить прямоугольник на рисунке.
I - Eraser Tool (E) (Инструмент «Ластик» (Е))
118 Создание Web-сайтов
>• Установите указатель мыши на прямоугольнике в окне документа. Вы увидите, что
теперь размер указателя мыши - круглой кисти - значительно больше, чем прежде.
>• Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, перемещайте указатель мыши по прямоугольнику
вправо и влево, пока весь объект не будет закрашен белым цветом фона.
> Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален.
Итак, мы познакомились с приемами рисования и удаления простых объектов. Теперь
можно приступить к созданию баннера.
€чм>тъ JV&5. Начинаем изготовление баннера
Баннер, который мы создадим, будет состоять из простого логотипа компании
ГЕОТОН и двух сменяющих друг друга анимированных надписей, приглашающих
посетить сайт компании. Начнем с подготовки логотипа, который, в свою очередь, бу-
дет состоять из трех объектов, размещенных один внутри дру-
гого: текста, эллипса и прямоугольника (Рис. 4.28) Для объек-
тов логотипа установим синий цвет.
> Выведите на экран палитру Color (Цвет), щелкнув мышью на
ее ярлыке. Рис. 4.28. Логотип
> С помощью ползунковых регуляторов палитры Color (Цвет) установите значения
красной (R), зеленой (G) и синей (В) составляющих цвета соответственно 31!, 112,
239. Выбранный синий цвет отобразится на образцах цвета переднего плана палитры
Color (Цвет) и панели инструментов (Tools).
Обратите внимание, что после установки цвета в палитре Color (Цвет) под образцами
появился треугольный значок с восклицательным знаком Л\ - Warning: out of gamut for
printing (Предупреждение: выход за пределы цветового охвата для печати), предупреж-
дающий о том, что выбранный цвет не входит в цветовой диапазон модели CMYK.
Справа от треугольного значка отображается поле с ближайшим CMYK-эквивалентом
выбранного цвета. Напомним, что для Web-графики цветовой охват CMYK не имеет зна-
чения, так как Web-изображения не предназначены для полиграфического исполнения.
Нарисуем в левой части окна документа прямоугольную область размером 150x50 пик-
селов, которую затем заполним выбранным цветом.
>• Удерживая нажатой клавишу li Al t I, три раза нажмите кнопку [ Q| - Elliptical Marquee
Tool (M) (Инструмент «Эллиптическая область» (М)) на панели инструментов
(Tools). Будет выбран инструмент |[Д] - Rectangular Marquee Tool (M) (Инструмент
«Прямоугольная область» (М)).
Adobe Photoshop позволяет создавать области выделения заранее заданных размеров,
для указания которых и определения других свойств объекта используется панель пара-
метров (Options Bar) (Рис. 4.29). Панель с параметрами каждого инструмента всегда
открывается при выборе инструмента. Элементы управления этой панели, зависят от вы-
бранного инструмента.
Подготовка графики
119
F«»th«ri [7p« | П Anli-*l!«s«d Slyli, )NdfCMl~
h! I I. «* '
Рис. 4.29. Панель параметров инструмента Rectangular Marquee
Tool (М) (Инструмент «Прямоугольная область» (М))
> В открывающемся списке Style (Стиль) панели параметров (Options Bar) выберите
Fixed Size (Фиксированный размер), чтобы создать прямоугольную область опреде-
ленного размера.
Теперь в полях ввода Width (Ширина) и Height (Высота) следует указать размеры облас-
ти выделения.
v Дважды щелкните мышью в поле ввода Width (Ширина), чтобы выделить числовое
значение в нем.
> Введите с клавиатуры значение ширины прямоугольной области -150 рх (150 пикселов).
> В поле ввода Height (Высота) введите высоту прямоугольника - 50 рх (50 пикселов),
предварительно выделив двойным щелчком мыши находящееся там число.
Установка параметра Feather (Растушевка) создает плавный переход между пикселами
выделенной области и пикселами, окружающими ее. Это делает края выделенной облас-
ти расплывчатыми и исключает резкий переход.
Установка флажка Anti-aliased (Сглаживание) позволяет свести до минимума контраст
на границах между пикселами и создает более мягкие переходы между объектами.
Следует следить за тем, чтобы у инструментов выделения и заливки
всегда был установлен флажок Anti-aliased (Сглаживание). Это позволит
исключить резкие контрасты в изображении.
Чтобы точнее расположить создаваемую область выделения, воспользуемся палитрой
Info (Информация).
> Щелкните мышью на ярлыке Info (Информация) в верх-
нем окне палитр. Если этот ярлык отсутствует, выберите
команду меню Window • Info (Окно • Информация).
На экране появится палитра Info (Информация) (Рис. 4.30).
Эта палитра является своеобразным информационным таб-
ло, отслеживающим ваши действия и дающим им точное
числовое соответствие. По умолчанию палитра отображает
параметры цвета пикселов, по которым перемещается
указатель мыши, координаты курсора X и Y, ширину W и
высоту Н создаваемого объекта. Параметры цвета пикселов
отображаются в моделях RGB и CMYK
I
1 Navigator ] Info
С :
л Y i
К !
— W:
'••• н i
на]
к О
Рис. 4.30. Палитра Info
(Информация)
> Переместите указатель мыши в окно документа. Вы увидите, что в палитре Info (Ин-
формация) появились числовые значения - 255 - для RGB-составляющих и 0% - для
CMYK-составляющих, которые соответствуют белому цвету фона.
При перемещении указателя мыши в окне документа также постоянно изменяются коор-
динаты указателя мыши X и Y, отслеживая его текущее положение. Эти координаты
120
Создание Web-сайтов
Info Options
First Color Readout
Mode: | Actual Color
отсчитываются от верхнего левого угла рисунка, причем ось X направлена вправо, а ось
Y - вниз. Координаты указателя мыши по умолчанию измеряются в сантиметрах.
Однако, поскольку размеры прямоугольника мы задали в пикселах, то нам было бы
удобнее, если бы и координаты указателя мыши выражались в пикселах. Поэтому изме-
ним соответствующую установку.
>• Нажмите кнопку 0 в правом верхнем углу
палитры Info (Информация) и в появив-
шемся меню выберите команду Palette
Options (Параметры палитры). На экране
появится диалог Info Options (Параметры
палитры «Информация») (Рис. 4.31).
Два верхних открывающихся списка иден-
тичны и определяют отображение в опреде-
ленной цветовой модели цветовых состав-
ляющих пикселов, по которым перемещается
указатель мыши.
Установка флажка Show 16 bit values (Пока-
зывать 16-битные значения) требуется только
тогда, когда для рисунка выбрана цветовая
модель RGB с 16 битами на каждый цвет.
Second Color Readout
Mode: | CMYK Color
Mouse Coordinates
Ruler Units: | Centimeters
П Show 16 bit values
Рис. 4.31. Диалог Info Options
(Параметры палитры «Информация»)
> В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels (Пикселы).
>• Закройте диалог Info Options (Параметры палитры «Информация»), нажав кнопку ОК.
Теперь в палитре Info (Информация) координаты указателя мыши и размеры объектов
будут отображаться в пикселах.
Создадим прямоугольную область выделения заданного размера и зальем ее цветом.
>• Установите указатель мыши у левого верхнего угла окна документа так, чтобы в па-
литре Info (Информация) отобразились его координаты: Х:5, Y:5.
>• Щелкните мышью в этой точке. В окне документа появится прямоугольная область
выделения, а в палитре Info (Информация) отобразятся ее размеры: W: 150, Н: 50.
>• Залейте созданную прямоугольную область выделения выбранным ранее цветом, вос-
пользовавшись инструментом \&\ - Paint Bucket Tool (G) (Инструмент «Заливка» (G)).
> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение области.
Теперь нам нужно создать внутри прямоугольника эллиптическую область с размерами
горизонтальной и вертикальной осей соответственно 140 и 40 пикселов и залить ее бе-
лым цветом фона.
"~Alt
Удерживая нажатой клавишу 1| Al t I. нажмите кнопку [GJ - Rectangular Marquee
Tool (M) (Инструмент «Прямоугольная область» (М)) на панели инструментов
(Tools). Будет выбран инструмент [О] - Elliptical Marquee Tool (M) (Инструмент
«Эллиптическая область» (М)), а на панели параметров (Options Bar) появятся соот-
ветствующие элементы управления.
Подготовка графики
121
>• Убедитесь, что в открывающемся списке Style (Стиль) панели параметров (Options
Bar) выбрано 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 • АН (Выделение • Все). Весь рисунок в окне
документа будет выделен, и вдоль его краев появится рамка выделения.
Обведем контур выделения цветом переднего плана.
>• Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится диа-
лог Stroke (Правка • Обводка).
> Не изменяя предлагаемых параметров, закройте этот диалог нажатием кнопки ОК.
> Отмените выделение документа, нажав комбинацию клавиш К c t r l 1+![Р|. Вы увидите,
что вокруг рисунка появилась тонкая рамка.
1 Следует отметить, что рамку вокруг рисунка на Web-странице можно создать средствами HTML.
122
Создание Web-сайтов
Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не потерять его
при возможных сбоях в работе компьютера или отключении электропитания. Мы уже
говорили о том, что для использования изображения на Web^cTpaHnue оно должно быть
сохранено в одном из Web-форматов: GIF, JPG или PNG. Однако промежуточные сохра-
нения следует выполнять в собственном формате Adobe Photoshop - PSD, так как только
в данном формате можно сохранить изображение без потери качества. Это позволит при
необходимости вернуться к редактированию отдельных объектов.
у Выберите команду меню File • Save (Файл • Сохранить). На экране появится диалог
Save As (Сохранить как) (Рис. 4.33).
Папка | £> Web
J3 О 0 В» ЕЯ'
Имя Файла [UrMetM
Foimat: | Photoshop l'PSD;".PDD|
Save Options -
Save:
• As a Copy.
• M*a Channels
OUyers
DSoPtCobts
C o l o r; D U » Proof Setup; Waking CMYK
И ICC Profile: SRQ8IEC61966-2.1
БЗ Use Lower Ca$e Extension
Рис. 4.33. Диалог Save As (Сохранить как)
> Откройте папку, в которой вы хотите сохранить рисунок.
>- В поле ввода Имя файла (File name) удалите имя, предлагаемое по умолчанию, и
введите Geoton - так мы назовем этот документ. Расширение имени файла указывать
не обязательно. Оно будет добавлено автоматически.
>• Нажмите кнопку Сохранить (Save), чтобы закрыть диалог Save As (Сохранить как).
Рисунок будет сохранен в файле с указанным именем и это имя - Geoton.psd - поя-
вится в заголовке окна документа.
При последующих периодических сохранениях рисунка командой меню File • Save
(Файл • Сохранить) диалог Save As (Сохранить как) уже появляться не будет, а файл
будет сохраняться в той же папке и под тем же именем. Если же потребуется сохранить
файл на другом диске, в другой папке или под другим именем, то для этого нужно будет
воспользоваться командой меню File • Save As (Файл • Сохранить как).
Для закрытия текущего документа используется команда меню File • Close (Файл •
Закрыть) или кнопка [х] в правом верхнем углу окна документа. Открыть ранее
сохраненный рисунок можно с помощью команды меню File • Open (Файл • Открыть)
Подготовка графики
123
ненный рисунок можно с помощью команды меню File • Open (Файл • Открыть) или
комбинации клавиш J c t r l | +l| O|.
Опыт J№6. Текст для баннера
Наша следующая задача - добавить в создаваемый логотип надпись ГЕОТОН. Когда в
рисунок добавляется текст, он помещается на новый отдельный слой. Слои дают воз-
можность редактировать отдельные элементы изображения независимо друг от друга.
Вы можете рисовать, редактировать, вклеивать и перемещать содержимое любого слоя,
не изменяя при этом объекты, расположенные на других слоях. Управление слоями
осуществляется с помощью специальной палитры Layers (Слои).
> Щелкните мышью на первом слева ярлыке Layers (Слои)
в нижнем окне палитр. Если такой ярлык отсутствует,
выберите команду меню Window • Layers (Окно • Слои).
На экране появится палитра Layers (Слои) с перечнем
имеющихся в документе слоев (Рис. 4.34).
В данный момент наш документ состоит из одного основно-
го слоя, который называется Background (Фон). Этот слой
создается при создании нового документа. В палитре Layers
(Слои) каждому слою соответствует миниатюра и имя.
Миниатюра слева от имени слоя в уменьшенном виде ото-
бражает его содержимое. Все миниатюры динамически об-
новляются в процессе редактирования слоев.
Tfr. о
J SJ Opacity: I 100% [» I
&.
са €Э. ы В
Рис. 4.34. Палитра
Layers (Слои)
Значок в виде открытого глаза §5 у левого края строки с названием слоя позволяет вы-
ключить отображение этого слоя, чтобы оно не мешало работе с другими слоями.
Остальные элементы управления палитры Layers (Слои) мы рассмотрим позднее,
а сейчас добавим в логотип надпись - название компании ГЕОТОН. Все надписи на
рисунках выполняются с помощью инструмента [ Т] - Horisontal Type Tool (T) (Инст-
румент «Горизонтальный текст» (Т)).
> Нажмите кнопку | TJ - Horisontal Type Tool (T) (Инструмент «Горизонтальный
текст» (Т)), чтобы включить этот инструмент. На панели параметров (Options Bar)
отобразятся элементы управления данного инструмента (Рис. 4.35), с помощью кото-
рых можно определить параметры текста.
IUI в
Рис. 4.35. Панель параметров инструмента Horisontal Туре ТооЦТ)
(Инструмент «Горизонтальный текст» (Т))
Кнопки ^ - Change the text orientation (Изменить ориентацию текста) позволяет изме-
нить ориентацию текста с горизонтальной на вертикальную и наоборот.
>• В первом слева открывающемся списке Set the font family (Установка семейства
шрифтов) на панели параметров (Options Bar) выберите один из имеющихся на ва-
шем компьютере шрифтов, лучше из группы Arial.
124 Создание Web-сайтов
> Установите указатель мыши на рисунке в центре эллипса. Указатель мыши примет
форму ill.
>• Щелкните мышью в этой точке. Появится текстовый курсор. Вид панели параметров
(Options Bar) изменится (Рис. 4.36).
Рис. 4.36. Панель параметров инструмента Horisontal Type Tool (T)
(Инструмент «Горизонтальный текст» (Т))
> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет помещено в
точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так как по умолчанию на
панели параметров (Options Bar) нажата кнопка [S] - Left align text (Левостороннее
выравнивание текста).
Теперь выделим введенный текст и изменим начертание, размер и другие параметры.
> Нажмите и удерживайте клавишу ([;
> Не отпуская клавишу fshift], нажмите 6 раз клавишу [ Q, чтобы выделить введенную
надпись.
>• Отпустите клавишу II Shift |.
Теперь, когда текст выделен, можно изменить его параметры.
Не рекомендуется использовать для надписей очень тонкий шрифт и
шрифт с мелкими засечками, поскольку применяемые программой шриф-
ты являются векторными и при переносе в точечное изображение они
растрируются, в результате чего тонкие штрихи и детали при малень-
ких размерах шрифта будут незаметны.
> Во втором слева открывающемся списке 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 (Палитра цветов), в котором сможете выбрать
цвет для текста. По умолчанию для надписи предлагается цвет переднего плана.
Подготовка графики
125
В четвертом слева открывающемся списке Set the anti-aliasing method (Установка
способа сглаживания) на панели параметров (Options Bar) можно выбрать один из
вариантов сглаживания шрифта: None (Нет) - сглаживание не применяется; Sharp
(Резкий) - текст выглядит наиболее резким; Crisp (Четкий) - текст выглядит резким;
Strong (Средний) - небольшая степень сглаживания; Smooth (Сглаженный) - макси-
мальная степень сглаживания. Напомним, что сглаживание позволяет уменьшить кон-
траст на границах символов и сделать их очертания более плавными. Благодаря ис-
пользованию нескольких уровней сглаживания в некоторых случаях можно добиться
хорошей читаемости текста даже малого размера.
>• Выбирая из открывающегося списка Set the anti-aliasing method (Установка способа
сглаживания) различные значения, просмотрите, как изменяются очертания символов
надписи на рисунке при разных уровнях сглаживания и при отсутствии сглаживания.
Выберите наиболее оптимальный, с вашей точки зрения, вариант сглаживания.
С помощью кнопки 1X1 - Create warped text (Размещение текста вдоль кривой) на пане-
ли параметров (Options Bar) вы можете расположить введенный текст вдоль кривой,
а кнопка | ЕР| - Togglt the Character and Paragraph palletes (Показать/скрыть палитры
символов и абзацев) позволяет вызвать на экран дополнительные палитры для настройки
параметров текста.
>• Нажмите кнопку | В | - Togglt the Character and Paragraph
palletes (Показать/скрыть палитры символов и абзацев) на
панели параметров (Options Bar). На экране появится со-
вмещенная палитра Character/Paragraph (Символ/Абзац).
Палитра Character (Символ) будет активной (Рис. 4.37).
Палитру Character (Символ) можно вызвать на экран также
командой меню Window • Character (Окно • Символ), а
палитру Paragraph (Абзац) - командой меню Window •
Paragraph (Окно • Абзац).
В палитре Character (Символ) так же, как и на панели пара-
метров (Options Bar), вы можете установить гарнитуру, на-
чертание, размер и цвет шрифта. Но кроме того, можно за-
дать еще ряд специфических параметров.
[Ага1_
L?_p» а
Iм*".5 a
»*$. а
Т Т ТТ Тг Г Т,
Рис. 4.37. Палитра
Character (Символ)
В открывающемся списке Set the leading (Установка промежутка) можно определить
расстояние между строками текста.
В открывающемся списке Set the kerning between two characters (Установка проме-
жутка между двумя символами) задается расстояние между двумя соседними буквами.
Перед выбором значения из списка следует установить текстовый курсор в нужном месте.
В открывающемся списке Set the tracking for the selected characters (Установка слеже-
ния для выбранных символов) можно выбрать расстояние между буквами в определен-
ном слове или текстовом блоке, который предварительно следует выделить.
В полях ввода Vertically scale (Вертикальный масштаб) и Horizontally scale (Горизон-
тальный масштаб) определяется соответственно вертикальный и горизонтальный мас-
штаб текста.
126
Создание Web-сайтов
В поле ввода Set the baseline shift (Установка сдвига базовой линии) вы можете указать
сдвиг базовой линии, определяющий начальное смещение текста. Положительное значе-
ние сдвигает текст вправо и вверх, отрицательное - влево и вниз.
В предпоследней строке расположены кнопки для форматирования символов верхнего
или нижнего индекса, подчеркнутых, зачеркнутых и т.п.
В левом нижнем углу палитры расположен открывающийся список Set the language on
selected characters for hyphenation and spelling (Установить язык для выбранных сим-
волов для целей переноса и проверки орфографии).
В меню палитры Character (Символ), которое открывается при нажатии кнопки 0, дос-
тупны дополнительные команды форматирования, среди которых отметим следующие:
Faux Bold (Имитация полужирного) и Faux Italic (Имитация курсива) - позволяют уста-
новить соответствующее начертание даже для семейств шрифтов, которые не содержат
эти стили;
Fractional Width (Дробная ширина). При включенном режиме расстояние между симво-
лами текста измеряется не в целых пикселах, а в дробных. Это позволяет в большинстве
случаев придать тексту более привлекательный вид и улучшить его читаемость. Однако
применение дробной ширины для шрифтов малого размера, менее 20 пунктов, может
ухудшить их представление и затруднить чтение. Для таких шрифтов режим Fractional
Width (Дробная ширина) лучше отменить.
В палитре Paragraph (Абзац) определяются параметры абзаца: выравнивание, отступы,
пробелы до и после абзаца, расстановка переносов.
>- Закройте совмещенную палитру Character/Paragraph (Символ/Абзац), нажав кнопку
[х] в правом верхнем углу ее окна.
>• Для окончания ввода текста нажмите кнопку \^j у правого края панели параметров
(Options Bar). Надпись на рисунке будет закреплена (Рис. 4.38).
Пй Geolon psd С» 100% [ГЕОТОН. RGB/8)
Рис. 4.38. Надпись введена
Для отмены ввода текста достаточно нажать на панели параметров кнопку |
any current ededits (Отменить все текущие правки).
Cancel
Закончить ввод текста можно также, нажав клавишу |[Enter| на цифровой клавиатуре или
комбинацию клавиш II Ct r l l+|JEnter| на основной клавиатуре.
Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой, которо-
му по умолчанию присвоено имя, соответствующее введенной надписи. Этот слой поме-
чен символом Т - текстовый - и выделен темным цветом, что означает, что в данный
момент слой активен, т.е. именно к нему будут относиться все ваши действия. На то, что
слой активен, указывает также имя слоя, появившееся в заголовке окна документа.
Подготовка графики
127
Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа имя слоя
отображается неправильно. Это связано с тем, что Adobe Photoshop не всегда правильно
отображает русские шрифты. В таком случае, чтобы в дальнейшем было удобно рабо-
тать, слою нужно присвоить английское имя и порядковый номер.
>• Нажмите кнопку © в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду Layer Properties (Свойства слоя). На экране появится диа-
лог Layer Properties (Свойства слоя) (Рис. 4.39).
Layer Properties
Name: | ГЕОТОН
Cobr: | • None
I
И
OK
Cancel
I
I
Рис. 4.39. Диалог Layer Properties (Свойства слоя)
В поле ввода Name (Имя) введите новое название слоя - Layer 1 (Слой 1).
Нажав кнопку ОК, закройте диалог Layer Properties (Свойства слоя). В заголовке
окна документа и в палитре Layers (Слои) отобразится новое имя слоя (Рис. 4.40).
Теперь нам нужно переместить надпись ГЕОТОН в центр
эллипса. Перемещение слоев и выделенных областей в
Adobe Photoshop выполняется инструментом [К*] - Move
Tool (V) (Инструмент «Перемещение» (V)).
>• Нажмите кнопку [•*] - Move Tool (V) (Инструмент
«Перемещение» (V)) на панели инструментов (Tools),
чтобы выбрать этот инструмент.
> Установите указатель мыши, который примет форму Kj.,
в окне документа на надписи ГЕОТОН.
> Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите над-
пись ГЕОТОН так, чтобы она была расположена в цен-
тре эллипса.
|Norma[___ j'J Opacity: I 100% I >
о. а а с. а а
• .
i
Puc. 4.40. Текстовый слой
переименован
Отпустите левую кнопку мыши. Новое положение надписи будет закреплено
(Рис. 4.41).
Рис. 4.41. Надпись центрирована
Для точного перемещения слоя или выделенной области используйте клавиши управле-
ния курсором Oj, уГ), Q, О - Каждое нажатие одной из этих клавиш при выбранном
инструменте [Kf] - Move Tool (V) (Инструмент «Перемещение» (V)) перемещает объект
128
Создание Web-сайтов
на один пиксел в соответствующем направлении. Если при нажатии одной из этих кла-
виш удерживать нажатой клавишу lShi f l l. то объект будет перемещаться на 10 пикселов.
>• Сохраните рисунок, выбрав команду меню File • Save (Файл • Сохранить).
При этом может появиться информационный диалог (Рис. 4.42), в котором гово-
рится о том, что если вы сбросите флажок Maximize compatibility (Максимизиро-
вать совместимость), то у вас могут возникнуть проблемы при использовании фай-
лов *.psd в других программах.
Photoshop Format Options
В Maximize compatibility
Turning off Maximire 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 > Pile Handling > File Compatibility.
I Cancel ~|
Рис. 4.42. Информационный диалог
Текстовый слой, а также выделенную область можно подвергать всевозможным транс-
формациям: масштабировать, поворачивать, сжимать и растягивать, деформировать,
зеркально отражать. Все эти операции выполняются командами Free Transform (Произ-
вольное преобразование) и Transform (Преобразование) из меню Edit (Правка).
Если возникнет необходимость отредактировать или изменить параметры введенного
текста, то сделать это можно, щелкнув мышью на тексте при выбранном инструменте
^] и активном текстовом слое, который нужно редактировать.
JV&7- Создаем новые слои
Создадим еще два текстовых слоя с надписями «Вам нужна локальная сеть?» и «Заходи-
те СЮДА!», расположенными на рисунке справа от логотипа, одна под другой так, что-
бы они могли сменять друг друга.
v Нажмите кнопку [ Т] - Horisontal Type Tool (T) (Инструмент «Горизонтальный
текст» (Т)) на панели инструментов (Tools), чтобы выбрать этот инструмент.
> Щелкните мышью в окне документа, справа от созданного логотипа. В этом месте поя-
вится текстовый курсор. В палитре Layers (Слои) появится новый текстовый слой
Layer 2.
> Введите первую надпись: Вам нужна локальная сеть?.
>• Нажмите кнопку \Ш\ в правой части диалога, чтобы поместить текст справа от
Нажмите кнопку
точки ввода.
> Выделите введенный текст в окне документа, протащив по нему указатель мыши.
> В первом слева открывающемся списке Set the font family (Установка семейства
шрифтов) на панели параметров (Options Bar) выберите для надписи подходящую
гарнитуру шрифта из установленных на вашем компьютере.
Подготовка графики
129
> Подберите также начертание и размер шрифта примерно 16-18 пунктов, в зависимо-
сти от выбранной гарнитуры.
>• Нажмите кнопку \>/j у правого края панели параметров (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).
] Вам
нужна
шшшшшшш
локальная
P_|n|x|
сеть?
Рис. 4.43. Надпись выровнена
Добавим поверх активного слоя следующий текстовый слой с надписью. Предваритель-
но следует вручную создать новый слой, так как щелчок мышью на надписи при актив-
ном слое Layer 2 включит режим редактирования этого слоя.
>• Нажмите кнопку | И | - Create a new Layer (Создать новый слой) у нижнего края па-
литры Layers (Слои). В палитре появится и станет активным новый слой, которому
по умолчанию будет присвоено имя Layer 3 (Слой 3). Название нового слоя вы уви-
дите также в заголовке окна документа.
>• Выберите инструмент [' \\ - Horisontal Type Tool (T) (Инструмент «Горизонтальный
текст» (Т)) на панели инструментов (Tools) и щелкните мышью в окне документа у
правого края логотипа. В палитре Layers (Слои) появится отметка в виде символа Т
о том, что текущий слой Layer 3 - текстовый.
>• Введите с клавиатуры надпись: Заходите СЮДА!
>• Выделите надпись, протащив через нее указатель мыши, и выберите для нее гарниту-
ру шрифта, начертание, а также размер приблизительно 20 пунктов.
Изменим цвет надписи на коричневый.
>• Щелкните мышью на поле с образцом цвета Set the text color (Установка цвета тек-
ста) панели параметров (Options Bar). На экране появится диалог Color Picker
(Палитра цветов).
5-1210
130
Создание Web-сайтов
Выберем цвет путем ввода числовых значений RGB-составляющих.
> Дважды щелкните мышью в поле ввода R (Красный), чтобы выделить его числовое
значение.
>• В поле ввода R (Красный) введите 142.
>• Нажмите клавишу рт*ь|. чтобы переместить фокус в поле ввода G (Зеленый) и выде-
лить его числовое значение.
> В поле ввода G (Зеленый) введите 90 и нажмите клавишу РТа Ь1. Фокус переместится
в поле ввода В (Синий), числовое значение в котором будет выделено.
> В поле ввода В (Синий) введите 52.
> Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК. Заданный цвет отобра-
зится на образце в поле Set the text color (Установка цвета текста) панели параметров
(Options Bar). Надпись в окне документа будет окрашена в заданный коричневый идет.
>• Нажмите комбинацию клавиш II c t r l 1+1'Еп{ег1, чтобы завершить ввод текста. В окне ри-
сунка добавленная надпись будет расположена на новом слое, поверх предыдущей
надписи. Название нового слоя в палитре Layers (Слои) будет изменено в соответст-
вии с введенным текстом.
у Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога Layer Properties
(Свойства слоя) щелкните правой кнопкой мыши на названии вновь созданного слоя
в палитре Layers (Слои) и в появившемся контекстном меню выберите команду
Layer Properties (Свойства слоя).
> Воспользовавшись клавишами управления курсором при включенном инструменте
[Kf] - Move Tool (V) (Инструмент «Перемещение» (V)) совместите начало верхней
надписи с началом нижней и выровняйте верхнюю надпись по вертикали (Рис. 4.44).
Гр. Geolon.psd & 100% (Layei 3. HliB/B)
Рис. 4.44. Надпись на слое Layer 3 выровнена
Кроме уже - рассмотренного способа создания нового слоя с помощью кнопки | В | -
Create new Layer (Создать новый слой) у нижнего края палитры Layers (Слои), создать
новый слой вы можете и другими способами, например:
> Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду New Layer (Новый слой). На экране появится диалог New
Layer (Новый слой), в поле ввода которого Name (Имя) для нового слоя предлагается
имя Layer 4 (Слой 4) (Рис. 4.45).
Подготовка графики
131
> Нажмите кнопку ОК., чтобы закрыть
этот диалог и принять предлагаемое
имя. В палитре появится и станет ак-
тивным новый слой, которому будет
присвоено имя Layer 4 (Слой 4).
Название нового слоя вы увидите так-
же в заголовке окна документа.
Еще один способ создания слоя - коман-
дой меню.
: | Layer 4
• Use Previous Layer to Create Cliaping Mask
Qatar: | D
Bode: | Normal
О (No neutral color exists fix 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
(Слои) он должен быть выделен темным цветом.
> Нажмите кнопку | йг | - Delete layer (Удалить слой)
в нижней части палитры Layers (Слои). На экране
появится запрос подтверждения удаления (Рис. 4.46).
Adobe Photoshop
Рис. 4.46. Запрос подтвер-
ждения удаления слоя
Рис. 4.47.
Открытая
дверь
> Нажмите кнопку Yes (Да), чтобы санкционировать удаление.
Выбранный слой исчезнет из палитры Layers (Слои). Активным
станет слой Layer 4.
Создадим на активном слое Layer 4 у его правого края рисунок открытой
двери (Рис. 4.47), чтобы посетителю сайта, увидевшему баннер, было
понятно, куда нужно заходить. Сначала нарисуем залитый прямо-
угольник размером 63x50 пикселов, который будет символизировать
фрагмент некоторой стены.
>• Нажмите кнопку [OJ - 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 (Информация).
Зальем созданную область выделения коричневым цветом. Для этого установим цвет
переднего плана.
> Щелкните мышью на инструменте | ^*| - Eyedropper Tool (I) (Инструмент «Пипетка» (I)),
чтобы выбрать его.
>• Для выбора коричневого цвета на рисунке щелкните мышью на букве Ю.
' *
> Щелчком мыши выберите инструмент \^\ - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)) на панели инструментов (Tools).
> Установите указатель мыши, который примет форму ф, внутри выделенной области
и щелкните мышью. Прямоугольник будет залит (Рис. 4.48).
Рис. 4.48. На слое Layer 4 создан прямоугольник
> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение объекта.
Теперь внутри прямоугольника-«стены» нарисуем прямоугольник меньшего размера -
30x40 пикселов - «дверную коробку».
> Щелчком мыши на кнопке [ГЛ] - 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),
чтобы поменять местами образцы цвета.
v Нажмите кнопку \&\ - Paint Bucket Tool (G) (Инструмент «Заливка» (G)) на панели
инструментов (Tools) и щелкните мышью внутри выделенной области. Она будет за-
лита белым цветом фона (Рис. 4.49).
Подготовка графики
133
У; Geolon psd @ WOZ (Layer 4. RGB/8)
Рис. 4.49. Внутренняя выделенная область залита цветом фона
Наша следующая задача - преобразовать выделенную область так, чтобы после заливки
и обводки она выглядела как открытая дверь. Чтобы точнее выполнить эту операцию,
следует увеличить масштаб отображения рисунка. Текущий масштаб - 100% - вы види-
те в заголовке окна документа и в строке состояния (Status Bar). Изменить масштаб
можно с помощью инструмента|^\[ — Zoom Tool (Z) (Инструмент «Масштаб» (Z)).
>• Нажмите кнопку [Ч] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели инст-
рументов (Tools), чтобы выбрать этот инструмент.
>- Установите указатель мыши на рисунке, внутри выделенной области. Указатель мы-
ши примет форму й^.
>- Щелкните мышью в этом месте. Масштаб отображения рисунка увеличится на 100%
и новое значение масштаба - 200% - отобразится в заголовке окна документа и в
строке состояния.
> Нажмите кнопку \П\ в правом верхнем углу окна документа, чтобы развернуть его на
весь экран.
>- Щелкните еще несколько раз 'мышью, установив ее указатель на рисунке. Каждый
щелчок мышью будет увеличивать масштаб изображения на 100%.
Уменьшить масштаб отображения документа можно следующим способом:
>- Нажмите и удерживайте клавишу II А11 I. Указатель мыши, установленный на рисунке,
примет форму <=^.
>• Не отпуская клавишу II Al t I, щелкните несколько раз мышью на рисунке. Каждый
щелчок мыши будет уменьшать масштаб на 100%, и новое значение масштаба будет
отображаться в заголовке окна документа и в строке состояния (Status Bar).
v Отпустите клавишу llAl t I.
>• Установите масштаб изображения 400%.
>ТаЬ1. чтобы скрыть все палитры, закрывающие увеличенное
>• Нажмите клавишу
изображение.
> Воспользовавшись горизонтальной полосой прокрутки, переместите изображение в
рабочем окне так, чтобы на экране была видна его правая часть и выделенная прямо-
угольная область (Рис. 4.50).
134
Создание Web-сайтов
Рис. 4.50. Изображение увеличено и перемещено
Теперь можно выполнить преобразование области выделения.
>• Выберите команду меню Edit • Transform • Skew (Правка •
Преобразование • Скос). В углах и серединах прямоуголь-
ной области выделения появятся 8 квадратных маркеров, а в
центре области - маркер центра вращения (Рис. 4.51).
Для преобразования формы объекта достаточно перетащить
мышью его угловые маркеры. Перетаскивание боковых мар-
керов наклоняет объект.
Сначала изменим положение левого нижнего углового мар-
кера, перетащив его на середину нижней стороны белого
прямоугольника;
> Установите указатель мыши на левом нижнем угловом
маркере так, чтобы указатель мыши принял форму серой
стрелки ^.
> Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите квадрат-
ный маркер вправо, примерно к середине нижней стороны
белого прямоугольника.
> Отпустите левую кнопку мыши. Новое положение марке-
ра будет закреплено. Форма выделенной области станет
трапециевидной (Рис. 4.52).
Рис. 4.51. Маркеры
преобразова! тя
Рис. 4.52. Левый нижний
• угловой маркер
перемещён
Подготовка графики
135
Обратите внимание: в том месте, где область выделения
сжата, на рисунке стала частично видна надпись, находящая-
ся на нижележащем слое Layer 2.
> Подобным же образом переместите верхний левый угло-
вой маркер вправо, примерно на середину верхней сторо-
ны белого прямоугольника так, чтобы левая сторона вы-
деленной прямоугольной области стала вертикальной
(Рис. 4.53).
>• Переместите левый нижний квадратный маркер верти- Рис. 4.53. Левый верхний
кально вверх на расстояние, примерно равное одной чет-
верти высоты области выделения (Рис. 4.54).
угловой маркер
перемещен
> Нажмите клавишу l?entar|. Маркеры преобразования исчез-
нут. Форма преобразованной выделенной области будет
закреплена..
Выполним обводку коричневым цветом преобразованной
области выделения.
> Выберите команду меню Window • Tools (Окно • Инст-
рументы), чтобы отобразить панель инструментов.
> Щелкните мышью на значке •}. - Switch Foreground and рис. 4.54. Левый нижний
Background Colors (X) (Переключение цвета переднего угловой маркер
плана и фона (X)) на панели инструментов (Tools), что- перемещен повторно
бы поменять местами образцы цвета.
>• Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится диа-
лог Stroke (Обводка).
>- Установите флажок Outside (Снаружи), чтобы выполнить 'обводку по наружному
краю контура выделения.
> Нажатием кнопки ОК закройте диалог Stroke (Обводка). Контур выделения будет
обведен коричневым цветом переднего плана.
Зальем выделенную область оттенком коричневого цвета более светлым, чем цвет вы-
полненной обводки.
>• Нажмите клавишу Р>ТаЬ1. чтобы отобразить все палитры.
>• В полях ввода R (Красный), G (Зеленый) и В (Синий) палитры Color (Цвет) введите
значения цветовых составляющих соответственно 234, 201 и 176. Светлый оттенок
коричневого цвета вы увидите на образцах цвета переднего плана палитры Color
(Цвет) и панели инструментов (Tools).
>• Щелчком мыши выберите инструмент \^\ - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)) на панели инструментов (Tools) и залейте выделенную область, пред-
варительно скрыв все палитры с помощью клавиши |5_J^].
> Отмените выделение объекта, нажав комбинацию клавиш И c t r l l+ji D I.
136
Создание Web-сайтов
Нарисованной двери не хватает только дверной ручки. Но прежде чем ее изобразить,
установим в качестве цвета переднего плана темно-коричневый цвет, которым залита
«стена». Воспользуемся для этого инструментом [^*| - Eyedropper Tool (I) (Инструмент
«Пипетка» (I)).
> Нажмите кнопку [§] в окне документа и измените размеры окна документа так, чтобы
оно не пересекалось с палитрами, прокрутите изображение в окне, чтобы отобразить
дверь, и нажмите клавишу Р»ТаЬ1. чтобы отобразить все палитры.
>• Нажмите кнопку (21 - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) на пане аи ин-
струментов (Tools), чтобы выбрать этот инструмент.
> Установите указатель мыши, который примет форму пипетки f, на изображении
темно-коричневой «стены».
> Щелкните мышью в этом месте. Цвет переднего плана будет выбран и появится на
соответствующем образце панели инструментов (Tools).
Теперь в том месте открытой двери, где обычно находится дверная ручка, нарисуем с
помощью инструмента \^/\ - Pencil Tool (В) (Инструмент «Карандаш» (В)) короткий
вертикальный отрезок толщиной 1 пиксел и длиной 5-6 пикселов.
>• Удерживая нажатой клавишу || Al t I, нажмите кнопку [j/J -Brush Tool (В) (Инструмент
«Кисть» (В)) на панели инструментов (Tools). Будет выбран инструмент |./J -
Pencil Tool (В) (Инструмент «Карандаш» (В)).
Этот инструмент позволяет рисовать произвольные линии - прямые и кривые.
Для рисования горизонтальной или вертикальной прямой следует удерживать нажа-
той клавишу |[shm].
>• Установите указатель мыши примерно у середины левого
края «двери».
> Нажмите и удерживайте клавишу IIShi(t I.
>• Не отпуская клавишу jlShiftl. нажмите и удерживайте ле-
вую кнопку мыши.
>• Не отпуская левую кнопку мыши и клавишу l!Shilll, пере-
местите указатель мыши вниз на 5-6 пикселов. „ . „
>- Отпустите левую кнопку мыши. • «Дверная ручка»
|7==а нарисована
> Отпустите клавишу llShml. Будет нарисована тонкая вер-
тикальная линия (Рис. 4.55).
Напомним, что если с первого раза линия желаемого размера не получилась, вы можете
отменить выполненную операцию и повторить ее сначала.
> Уменьшите масштаб изображения до 100%, щелкнув три раза на рисунке инструмен-
том [^] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) при нажатой клавише
Изображение примет вид как на Рис. 4.56.
Подготовка графики
137
"p. Geoton.psd @ 1002 (Ujiei 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 (Слои). Указатель мыши примет
форму ij^).
> Нажмите и удерживайте левую кнопку мыши. Слой
будет выделен темным цветом.
> Не отпуская левую кнопку мыши, переместите указа-
тель мыши на миниатюру слоя Layer 4. Вместе с ним
переместится значок слоя.
Normal И-J Opacity: | 100% | >
Рис. 4.57. Палитра Layers
(Слои) со всеми слоями
> Отпустите левую кнопку мыши. Новое положения слоя Layer 2 вверху группы слоев
будет закреплено (Рис. 4.58). В окне документа надпись Вам нужна локальная сеть?
теперь будет расположена поверх надписи Заходите СЮДА!, а не под ней, как преж-
де, и поверх рисунка двери, находящегося на слое Layer 4 (Рис. 4.59).
138
Создание Web-сайтов
Рис. 4.58. Слой Layer 2 перемещен
V" Geoton.psd С? 100% (Layer 4. RGB/8)
Рис. 4.59. Положение слоя на рисунке изменено
В процессе редактирования слоев часто бывает необходимо выключить отображение
какого-либо слоя или нескольких слоев, чтобы сосредоточиться на обработке других.
В крайнем левом столбце палитры Layers (Слои), напротив видимых слоев выставляется
специальный значок в виде открытого глаза §J - Indicates layer visibility (Индикация
видимости слоя).
> Щелкните мышью на значке с изображением глаза ^ - Indicates layer visibility (Ин-
дикация видимости слоя) в палитре Layers (Слои) слева от миниатюры слоя Layer 2.
Значок глаза исчезнет. Одновременно на рисунке исчезнет надпись Вам нужна
локальная сеть?, находящаяся на слое Layer 2, - слой будет выключен (Рис. 4.60).
>, Geolon psd @ 100% (Layei 4. RGB/8)
Заходите СЮДА'
Рис. 4.60. Слой Layer 2 выключен
>• Повторно щелкните мышью в том же месте. В палитре Layers (Слои) появится зна-
чок глаза •§>, а на рисунке - надпись Вам нужна локальная сеть?
>• Просмотрите, как выглядит каждый слой в отдельности, выключая отображение
остальных слоев; после чего включите все слои.
После перемещения слоя Layer 2 наверх активным по-прежнему остался слой Layer 4.
Он выделен в палитре Layers (Слои) темным цветом. И все операции редактирования
будут выполняться только для этого слоя. Чтобы перейти к редактированию другого
слоя, достаточно щелкнуть мышью на строке с его именем.
Подготовка графики 139
>• Щелкните мышью на строке слоя Background (Фон) в палитре Layers (Слои). Строка
будет выделена темным цветом. Данный слой станет активным, и информацию об
этом вы увидите в заголовке окна документа.
Другой способ активизации слоя позволяет выбирать его из контекстного меню.
>• Установите указатель мыши в окне рисунка на надписи Вам нужна локальная сеть?
>• Нажмите и удерживайте клавишу I c t r l I. Указатель мыши примет форму К}.. Это значит,
что при включенном инструменте |К^| - Move Tool (V) (Инструмент «Перемещение»
(V)) клавишу II c t r l I можно не нажимать.
Не отпуская клавишу I Ct r l I. щелкните правой кнопкой
мыши. На экране появится контекстное меню с перечнем
доступных в данной точке слоев (Рис. 4.61).
Выберите из контекстного меню слой Layer 3. Этот
слой станет активным и будет выделен в палитре ' Контекстное
Layers (Слои). м е н ю с л о е в
Layer 2
Layer 3
Background
> Отпустите клавишу || c t r l
Обратите внимание, что между значком с изображением глаза •§£ и миниатюрой слоя в
палитре Layers (Слои) имеется еще одно поле, в котором для активного слоя отображается
значок кисти Jf - Indicates painting on layer or layer mask (Индикация рисования на слое
или слой-маске). Этот значок указывает, что только данный слой доступен для рисования
и редактирования. Соответствующие поля остальных слоев - Indicates if layer is linked
(Индикация связанного слоя) - пока пустые. Если же нужно связать несколько слоев для
их совместного перемещения, поворота или масштабирования, то следует щелкнуть мы-
шью в этих полях против каждого слоя, который нужно связать с активным слоем.
Б версии CS2 поля Indicates painting on layer or layer mask (Индикация
рисования на слое или слой-маске) и Indicates if layer is linked (Индика-
ция связанного слоя) остутсвуют.
> Щелкните мышью в поле Indicates if layer is linked (Индикация связанного слоя)
слева от миниатюры слоя Layer 4. В этом поле появится значок в виде цепи jg, ука-
зывающий на то, что теперь этот слой связан с активным.
Чтобы связать слои в версии CS2, надо сначала выделить все нужные
слои в палитре слоев при нажатой клавише [[shift] или| ctrl | а затем щелк-
нуть мышью на значке цепи в нижней части палитры слоев.
Проверим это, перемещая активный слой Layer 3.
>• Нажав кнопку [•*] - Move Tool (V) (Инструмент «Перемещение» (V)), выберите этот
инструмент.
>• Установите указатель мыши, который примет форму •*, на надписи Заходите
СЮДА!
140
Создание Web-сайтов
>• Нажмите и удерживайте левую кнопку мыши.
v Не отпуская левую кнопку мыши, перемещайте изображение. Вы увидите, что вместе
с активным слоем Layer 3 перемещается связанный с ним слой Layer 4. Остальные
слои останутся на своих местах.
>• Отпустите левую кнопку мыши.
>• Отмените выполненную операцию перемещения слоев, выбрав команду меню Edit •
Undo Move (Правка • Отменить перемещение).
В процессе редактирования рисунка может возникнуть необходимость объединить два
или несколько слоев в один, если они в дальнейшем будут обрабатываться совместно.
Объединение нескольких слоев позволяет сохранять оптимальный объем файла, что
особенно важно при обработке больших документов. Объединим связанные слои
Layer 3 и Layer 4.
> Выберите команду меню Layer • Merge Linked (Слой • Объединить связанные).
Слои Layer 3 и Layer 4 будут объединены в один слой Layer 3, а миниатюра и назва-
ние слоя Layer 4 исчезнут из палитры слоев.
>• Чтобы убедиться в том, что слои объединены, щелкните мышью на значке с изобра-
жением глаза i$ слева от названия слоя Layer 3. Слой будет выключен, и надпись
Заходите СЮДА! с рисунком двери исчезнет с экрана. На ее месте останется только
надпись Вам нужна локальная сеть?, находящаяся на слое Layer 2.
> Повторно щелкните мышью в том же месте, чтобы включить отображение слоя
Layer 3.
>• Выберите команду меню Edit • Undo Merge Linked (Правка • Отменить объединение
связанных слоев). Слой Layer 4 снова появится в палитре Layers (Слои).
> Щелкните мышью на значке в виде цепи ^ в поле Indicates if layer is linked (Инди-
кация связанного слоя) слева от миниатюры слоя Layer 4. Значок исчезнет. Связь
слоев будет прервана.
В версии CS2 чтобы разорвать связь слоя с другим слоями, следует вы-
делить нужный слой в палитре слоев и щелкунть мышью на значке цепи в
нижней части палитры слоев.
Для объединения всех видимых слоев изображения нужно оставить видимыми только те
слои изображения, которые должны быть объединены (невидимые слои не будут удале-
ны в результате объединения), и выбрать команду меню Layer • Merge Visible (Слой •
Объединить видимые слои).
Переместим слой Layer 3 на передний план рисунка, воспользовавшись следующим
способом.
> Выберите команду меню Layer • Arrange • Bring to Front (Слой • Порядок • Пере-
местить на передний план). Положение активного слоя в пачке слоев изменится. Он
будет перемещен наверх.
Подобным же образом переместим на передний план слой Layer 4.
Подготовка графики
141
> Щелкните мышью на миниатюре слоя Layer 4 в палитре Layers (Слои), чтобы
выделить его.
>• Выберите команду меню Layer • Arrange • Bring to Front (Слой • Порядок •
Переместить на передний план). Слой Layer 4 будет перемещен наверх.
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Созданные нами слои полностью непрозрачны. Однако ничто не мешает вам изменить
непрозрачность активного слоя с помощью элемента управления Opacity (Непрозрач-
ность) палитры Layers (Слои). По умолчанию значение Opacity (Непрозрачность) для
каждого слоя равно 100%, т.е. слои абсолютно непрозрачны.
> Щелкните мышью на кнопке 0 у правой границы поля ввода 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).
J№9. Эффекты тени и выпуклости
Чтобы придать создаваемому баннеру большую выразительность и привлекательность,
можно применить к каждому слою различные эффекты. Посмотрим, какие эффекты
предлагает Adobe Photoshop для слоев и как их применить. Предварительно следует сде-
лать активным нужный слой. Создадим эффекты для слоя Layer 1 с надписью ГЕОТОН.
> Щелкните мышью на слое Layer 1 в палитре Layers (Слои), чтобы сделать его активным.
> Выберите команду меню Layer • Layer Style (Слой • Стиль слоя). На экране появит-
ся меню с перечнем команд, управляющих применением эффектов к выбранному
слою (Рис. 4.62).
142
Создание Web-сайтов
Blending Dptioni...
Drop Shadow...
Inner Shadow...
Outer Glow...
Inner Glow...
Bevel and Embost...
Satin...
Color Overlay...
Gradient Overlay...
Pattern Overlay...
Stroke...
Copy Layer Style
Paste Layer Style
Paste Layer Style (a Linked
Clear Uyei Style
Global Light...
Create Layer
Hide AD Elfect.
Scale Elfectj...
Рис. 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).
> Расположите этот диалог так, чтобы он не перекрывал изображение в окне документа,
чтобы видеть изменения, которые будут происходить при настройке параметров
эффекта.
Подготовка графики
143
Level Style
Styles
Blending Options; Default
I""": Drop Shadow
Г~: Inner Shadow
Г~ Outer Glow
Г"; Inner Glow
f j Satin
Г* Color Overlay
Г" Gradient Overlay
Г": Pattern Overlay
Г Stroke
Bevel and Emboss
— Structure "
S_tyle! [Inner Bevel [»J
Technique: | Smooth ^_____j^[J
Direction: 0 Up О Down
Soften: (
- Shading
Angle:
Altitude:
Gloss Contour's
Highlight Mode:
Opacity:
Shadow Mode:
Opacity:
О
\A
Screen
1 , ,
Multiply
1
3 Use global Light
£3 Anti-aliased
EH _J
•^ • [7S | *
OK
J
Reset
E Preview
Puc. 4.63. Диалог Layer Style (Стиль слоя) с элементами управления
эффекта Bevel and Emboss (Скос и рельеф)
Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) отмечено
флажком и выделено название выбранного эффекта - Bevel and Emboss (Скос и рель-
еф). На этой же панели вы можете выбрать, установив флажок, другие доступные эф-
фекты из перечисленных выше.
При установленном слева от названия эффекта флажке данный эффект будет применен к
слою после закрытия диалога кнопкой ОК. Чтобы отменить эффект, достаточно, вызвав
диалог, сбросить соответствующий флажок.
>- Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажок Preview
(Предварительный просмотр). При этом все изменения параметров, сделанные в
диалоге, будут сразу же отображаться на рисунке.
Следует отметить, однако, что значения параметров, заданные по умолчанию, являются
оптимальными и в большинстве случаев создают наиболее яркие эффекты. На рисунке в
окне документа вы можете видеть, как будет выглядеть надпись ГЕОТОН при значениях
параметров эффекта, определенных по умолчанию.
Эффект рельефности надписи создается комбинацией подсветки (Highlight) и затенения
(Shadow), параметры которых определяются соответствующими элементами управле-
ния. В каждой из групп можно выбрать цвет тени или свечения, щелкнув мышью на об-
разце, степень непрозрачности этого цвета (Opacity) и режим наложения пикселов
(Mode). Значения, установленные по умолчанию, обычно дают наилучший результат.
В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вариантов дан-
ного эффекта. <
144
Создание Web-c айтов
> Просмотрите различные варианты эффекта, выбирая их из открывающегося списка
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 (Угол) и наблюдайте на рисунке, как изменяет-
ся характер эффекта при разных углах падения света.
Выберите наиболее оптимальный, с вашей точки зре-
ния, угол.
> Изменяя параметр Altitude (Высота), проверьте, как из-
меняется эффект при изменении высоты источника све-
та и выберите подходящее значение этого параметра.
> Нажав кнопку ОК, закройте диалог Layer Style (Стиль
слоя). Выбранный эффект будет применен к слою
Layer 1. Надпись ГЕОТОН на изображении будет вы-
глядеть примерно как на Рис. 4.64.
Обратите внимание, что после применения эффекта в
палитре Layers (Слои), под строкой с активным слоем
Layer 1 появилось название примененного к слою эффек-
та, а справа от имени слоя - значок в виде буквы f внутри
белого круга, который означает, что к слою применен
эффект (Рис. 4.65). Слева от этого значка находится тре-
угольный переключатель v, позволяющий выключить и
снова включить отображение названий эффектов, приме-
ненных к слою. Слева от названия эффекта - Bevel and
Emboss (Скос и рельеф) - находится значок в виде от-
крытого глаза igj, с помощью которого можно выключить
и включить отображение эффекта в окне документа.
ГйОГОН
Рис. 4.64. К текстовому
слою применен эффект
Bevel and Emboss
(Скос и рельеф)
k. • j
_
aid
BID
Layer 4
Layer 3
Layer 2
ЩLayer 1
Efrects ' •'•:
Q Bevel and Emboss
Bickground Q r~
О. ы
€>. a f
Puc. 4.65. Слой с эффектом
в палитре Layers (Слои)
Подготовка графики
145
К одному слою можно применить одновременно несколько эффектов. Добавим к слою
Layer 1 еще один эффект - Drop Shadow (Тень снаружи). Для вызова диалога Layer
Style (Стиль слоя) воспользуемся другим способом.
> Нажмите кнопку [Ц] - Add a layer style (Добавить стиль слоя) в нижней части
палитры Layers (Слои) и в появившемся меню с перечнем эффектов выберите
Drop Shadow (Тень снаружи). На экране появится диалог Layer Style (Стиль
слоя) (Рис. 4.66).
Layei Style
Г~ Inner Shadow
Г"! Outer Glow
Г"; Inner Glow
p"; Bevel and Emboss
Г" Contour
Г Texture
Г": Color Overlay
Г" Gradient Overlay
Г" Pallern Overlay
Г Stroke
Drop Shadow
—• Structure —
Blend Mode; [Multiply
Opacity:
( 3 Use global Light
— Quality
Contour:
Noise:
• An<Mi«ed
• Го
0 Layer Knocks Out Drop Shadow
OK
Reset
j~New Style...
В Preview
Рис. 4.66. Диалог Layer Style (Стиль слоя) с элементами управления
эффекта Drop Shadow (Тень снаружи)
На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи) и справа
отображаются элементы управления эффектом.
Выбранный эффект имитирует тень, которую отбрасывает содержимое слоя. И этот эф-
фект, созданный параметрами по умолчанию, вы видите в окне документа.
Элементы управления Blend Mode (Режим наложения) и Opacity (Непрозрачность) оп-
ределяют соответственно режим наложения пикселов и степень непрозрачности тени.
Применяемая по умолчанию тень создается черным цветом. Однако для выбранного
объекта такой цвет тени не является наилучшим. Выберем другой цвет тени, более близ-
кий к цвету надписи.
> Щелкните мышью на поле с образцом цвета справа от открывающегося списка Blend
Mode (Режим наложения). На экране появится диалог Color Picker (Палитра цветов).
>• Если этот диалог перекрывает окно документа, переместите его в сторону, чтобы
видеть на рисунке результат выбора цвета.
146
Создание Web-сайтов
>• Щелкните мышью на спектральной шкале - узкой вертикальной полосе - в области
оттенков синего. В цветовом поле слева отобразится цветовое пространство выбран-
ного оттенка.
>- Щелкая мышью в разных местах цветового поля, наблюдайте, как изменяется цвет
тени на рисунке. Подберите оттенок светло-синего, наиболее подходящий, с нашей
точки зрения, для тени.
>- Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК.
Параметр Angle (Угол) определяет угол, под которым свет падает на слой, а параметр
Distance (Расстояние) - расстояние, на которое отбрасывается тень. Эти два параметра
можно изменять интерактивно, прямо на рисунке.
>• Установите указатель мыши, который примет форму Kj., в окне документа на тени,
которую отбрасывает надпись ГЕОТОН.
>• Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, перемещайте указатель мыши вблизи надписи.
Вместе с ним будет перемещаться и тень от надписи. В процессе перемещения теку-
щие значения угла (Angle) и расстояния (Distance) будут отображаться в соответст-
вующих полях ввода диалога Layer Style (Стиль слоя).
> Добейтесь наиболее оптимального положения тени и отпустите левую кнопку мыши.
Параметр Spread (Размытие) определяет степень четкости тени.
>• Перемещая ползунок Spread (Размытие), установите наиболее подходящую степень
четкости тени.
С помощью ползункового регулятора Size (Размер) настраивается размер тени.
> Просмотрите, как данный параметр изменяет эффект, и выберите для него, если счи-
таете нужным, новое значение.
В открывающемся списке Contour (Контур) можно выбрать форму контура тени. Если
установить флажок Anti-aliased (Сглаживание), то контур будет сглажен. Ползунковый
регулятор Noise (Шум) позволяет добавить к тени шум.
v Закройте диалог Layer Style (Стиль слоя), нажав кнопку ОК. В палитре Layers (Слои)
появится название второго эффекта - Drop Shadow (Тень снаружи), примененного к
слою Layer 1. В окне документа эффект будет выглядеть примерно как на Рис. 4 67.
\YJ Geoton.psd @ 100% [Layci 1. RGB/8)
Рис. 4.67. Эффект Drop Shadow (Тень снаружи) применен
> Выберите команду меню File • Save (Файл • Сохранить), чтобы сохранить документ.
В следующей главе мы продолжим работу над баннером и «оживим» его, создав анима-
цию. А пока рисунок Geoton.psd можно закрыть. Этот рисунок вы можете найти на при-
лагаемом к книге компакт-диске в папке \Web\ChapO4\Web.
>• Нажав кнопку |х] в правом верхнем углу окна документа, закройте текущий документ.
Подготовка графики
147
Следует помнить, что все эффекты, которые применяются к слою, связаны с его содер-
жимым. В процессе редактирования слоя соответственно изменяется и эффект.
ШЛ@10. «Живые» кнопки
Вы, вероятно, помните, что в одном из опытов первой главы, на второй Web-странице
нашего сайта, в файле spisok.html мы создали форму для отправки сообщения. В этой
форме автоматически была сгенерирована кнопка Отправить. Для кнопки также авто-
матически был создан анимационный эффект нажатия.
В дальнейшем на своих Web-страницах вы будете использовать разнообразные кнопки
для самых различных целей с любыми анимационными эффектами. Посмотрим, как соз-
даются такие кнопки. Для иллюстрации процесса создания и «оживления» графической
кнопки превратим ссылку На первую страницу из файла spisok.html в кнопку, которая
становится рельефной при установке на ней указателя мыши и имитирует нажатое со-
стояние, когда нажимается левая кнопка мыши. Изображение кнопки подготовим в про-
грамме Adobe ImageReady, чтобы ближе познакомиться с ее особенностями и отличиями
от Adobe Photoshop.
>• В программе Adobe Photoshop нажмите кнопку
- Edit in ImageReady
(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)). Будет запущена про-
грамма Adobe ImageReady, и на экране появится ее рабочее окно.
Изготовление кнопки начнем с создания нового документа размером 250х ЮО пикселов
и прозрачным фоном.
>• Выберите команду меню File • New (Файл • Новый). На экране появится диалог New
Document (Новый документ) (Рис. 4.68).
: |Untitted-l
re: | Custom
ffik»i: 1539
| pixels
Ipheh
Contents of First Layer -
О White
О Backgrcxnd Color
О transparent
Рис. 4.68. Диалог New Document (Новый документ) в Adobe ImageReady
Этот диалог несколько отличается от аналогичного диалога Adobe Photoshop. В нем
отсутствует возможность выбора цветового режима документа. Все новые докумен-
ты в Adobe ImageReady создаются в цветовом режиме RGB.
>• В полях ввода со счетчиками Width (Ширина) и Height (Высота) введите размеры
документа - 250 и 100 пикселов.
>• Установите переключатель Transparent (Прозрачный), чтобы создать документ с
прозрачным фоном.
148
Создание Web-сайтов
"Я Unlitled-1 @ 100% (Oiiginal)
Рис. 4.69. Окно нового документа
с прозрачным фоном
> Закройте диалог New Document (Новый документ)
нажатием кнопки ОК. В рабочем окне программы
появится окно документа указанных размеров, в
котором прозрачный фон условно показан в виде
серой шахматной мозаики (Рис. 4.69).
Новый документ состоит из одного прозрачного
слоя Layer 1.
Установим для создаваемой кнопки желтый цвет
переднего плана, выбрав его из палитры Swatches
(Каталог).
> Щелкните мышью на ярлыке Swatches (Каталог)
во втором сверху окне палитр у правого края ра-
бочего окна, чтобы вывести на экран эту палитру.
>• Щелчком мыши выберите в палитре Swatches (Каталог) седьмой слева в первом
ряду желтый цвет. Этот цвет отобразится на образце цвета переднего плана
(Set foreground color) панели инструментов (Tools).
Нарисуем с помощью инструмента | П,| - Rectangle Tool (U) (Инструмент «Прямоуголь-
ник» (U)) кнопку в виде прямоугольника размером 230x35 пикселов, залитого жглтым
цветом переднего плана.
>- Щелкните мышью на кнопке [Ш] - 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).
Подготовка графики
149
Применим к слою Layer 1, на котором расположен
прямоугольник, эффект Bevel and Emboss (Скос и
рельеф), создающий иллюзию рельефности кнопки.
> Чтобы видеть в палитре Layers (Слои) все эффек-
ты и слои, которые мы создадим, переместите эту
палитру вверх, расположив ее справа от окна до-
кумента так, чтобы она не перекрывала другие па-
литры, и увеличьте ее высоту примерно в 2 раза.
>• Нажмите кнопку [Щ - Add a layer effect (Добавить
эффект к слою) в нижней части палитры Layers
(Слои). На экране появится меню эффектов.
Это меню содержит перечень тех же эффектов, что
и аналогичное меню в Adobe Photoshop.
>• Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф). На эк-
ране появится диалог Layer Style (Стиль слоя) с элементами управления эффекта
Bevel and Emboss (Скос и рельеф) (Рис. 4.72).
Рис. 4.71. Залитый цветом
прямоугольник
Layei Style
Styles
Blending Options: Default
[[]] Drop Shadow
Q Inner Shadow
• Outer Glow
f ] ] Inner Glow
P Bevel and Emboss
f~j Contour
[ j Texture
П Satin
П Color Overlay
• Gradient Overlay
f^J Pattern Overlay
• Stroke
Bevel and Emboss -
Structure
Style: |Inner Bevel |
Technique: [Smooth Г-Ц
£eplh: -fl..:iniH .п.. • i [ 100 [ %
Direction: ©Up О Down
Sie: fli.———.»— [5 1 px
Soften: Q
1° IP»
- Shading
Angle:
Altitude:
Gloss Contour:
Highlight Mode:
Opacity:
Shadow Mode:
Opacity:
О
H
[Screen
иммм
| Multiply
3 Use global Light
30 |°
ai
— 0 — 1 7Б [%
—avH
—0 — 00*
СП
~~Reset
I New 5tyle...~|
0 Preview
Puc. 4.72. Диалог Layer Style (Стиль слоя) с элементами управления
эффекта Bevel and Emboss (Скос и рельеф)
150
Создание Web-сайтов
Данный эффект с параметрами по умолчанию будет применен к активному слою
(Рис. 4.73). В диалоге Layer Style (Стиль слоя) вы можете изменить параметры эффек-
та. Но мы делать этого не будем, а используем эф-
фект, создаваемый по умолчанию.
Обратите внимание, что после применения эффекта
в палитре Layers (Слои) справа от имени слоя поя-
вился значок в виде буквы f внутри белого круга,
который означает, что к слою применен эффект.
Нам осталось только написать на кнопке текст.
Но предварительно установим для надписи синий цвет.
sec 9 28.8 Kbps • ]
4
Выберите из палитры Swatches (Каталог) синий
цвет - такой, чтобы текст был хорошо виден на
желтой кнопке.
Рис. 4.73. Эффект
Bevel and Emboss
(Скос и рельеф) применен к слою
Нажмите кнопку [Т] - Type Tool (T) (Инструмент
«Текст» (Т)) на панели инструментов (Tools). На панели параметров (Options Bar)
появятся элементы управления параметрами инструмента - такие же, как и в Adobe
Photoshop.
В открывающихся списках Set the font family (Установка семейства шрифта) и
Set the font style (Установка начертания шрифта) панели параметров (Options
Bar) выберите гарнитуру и начертание шрифта из числа установленных на вашем
компьютере.
Щелкните мышью у левого края желтого прямоугольника в окне документа. В этом
месте появится текстовый курсор.
Введите с клавиатуры надпись: На первую страницу. Эта надпись появится и окне
документа в точке ввода.
v Выделите введенный тест, протащив через него
указатель мыши.
>• В открывающемся списке со счетчиком Set the
font size (Установка размера шрифта) панели па-
раметров (Options Bar) подберите для текста та-
кой размер, чтобы надпись полностью помести-
лась на кнопке.
TjUntilledi @10№: (Original! Н Е Ю
На nepgyto страницу j
••/.-5#сф28.8КЬр! •г.
v С помощью инструмента |bfr| - Move Tool (V) (Ин-
струмент «Перемещение» (V)) отцентрируйте над- Р и а 4 Ж ^дпись центрирована
пись на желтом прямоугольнике (Рис. 4.74).
Изменим название созданного текстового слоя на Layer 2 (Слой 2). Это можно сделать в
диалоге Layer Options (Параметры слоя).
>- Щелкните правой кнопкой мыши на имени текстового слоя На первую страницу и
выберите команду Layer Options (Параметры слоя) из появившегося контекстного
меню. На экране появится диалог Layer Options (Параметры слоя) (Рис. 4.75).
Подготовка графики
151
В поле ввода Name (Имя) диалога Layer
Options (Параметры слоя) выделите назва-
ние слоя, протащив по нему указатель
мыши.
Введите с клавиатуры новое название слоя -
Layer 2 - й нажмите клавишу pnterj.
Текстовый слой будет переименован, и его
новое имя появится в палитре Layers
(Слои).
tJame: | На первую страницу
J
• Use Previous Layer to Ceate Cipping Mask
Color: [Mere
Send Mode: |Norrral
Qjadtv: 110044-1
Lock: 0 Iranswuncy G Position
Рис. 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).
>• Установите указатель мыши, который примет форму \, в окне документа на рисунке
желтого прямоугольника.
>• Щелкните мышью в этом месте. Контур желтого
прямоугольника будет выделен.
Теперь можно обрезать рисунок по контуру выделе-
ния.
>• Выберите команду меню Image • Crop (Изобра-
жение • Обрезать). Рисунок будет обрезан по
контуру выделения.
Рис. 4.76. Рисунок обрезан
по размеру кнопки
juUnlilled 1 & 100% (Original) В В Е З
j 100% т: ../..j«(J28.8Kbp! Г
> Нажмите комбинацию клавиш II Ctrl |+|| Р[, чтобы
отменить выделение объекта (Рис. 4.76).
152
Создание Web-сайтов
Рис. 4.77. Палитра Web Content
(Содержимое 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 (Над) программа предлагает для вто-
рого кадра по умолчанию. Но вы можете выбрать для
этого и всех последующих кадров любые другие
состояния.
•||
j Web Content\Color Table \_ _ [У)
Ь
I*
*
S=] Normal
Image Maps
Slices
UUOEU
1' т] Unlitled 1 01
% Rollover States
H ucttaaao Over
Puc. 4.78. Добавлено состояние
Over (Над)
Over
Down
Selected
Out
Up
Click
Custom..
None
Puc. 4.79. Меню состояний
> Щелкните правой кнопкой мыши на имени состояния Over (Над). На экране появится
меню состояний (Рис. 4.79).
Подготовка графики 153
Из этого меню, кроме Over (Над), вы можете выбрать одно из следующих состояний
изображения, связанных с действиями мыши.
Down (Нажатие) - состояние изображения, при котором нажимается и удерживается
левая кнопка мыши в то время, когда указатель мыши находится над объектом. Это со-
стояние сохраняется так долго, как долго удерживается нажатой кнопка мыши.
Selected (Выбрано) - определяет состояние, когда кнопка выбрана.
Out (Наружу) - определяет состояние, при котором указатель мыши удаляется за преде-
лы объекта. Такому событию обычно соответствует состояние Normal (Нормальное).
Up (Отпускание) - определяет состояние изображения, когда после отпускания кнопки
мыши указатель мыши находится в пределах объекта. Такому событию обычно соответ-
ствует состояние Over (Над).
Click (Щелчок) - определяет состояние, когда выполняется щелчок мышью на объекте.
Соответствующий состоянию кадр появляется сразу после щелчка мышью и сохраняет-
ся, пока не будет активизировано другое состояние.
Custom (Пользовательское) - создает новое состояние изображения.
None (Нет) - сохраняет текущее состояние изображения для дальнейшего использования
в качестве одного из состояний эффекта. Данное состояние не будет отображаться на
Web-странице.
>• Щелкните мышью за пределами меню состояний на свободном пространстве рабоче-
го окна, чтобы закрыть это меню и оставить для второго кадра состояние Over (Над).
Теперь мы должны определить, как будет выглядеть рисунок кнопки при состоянии
Over (Над), т.е. когда на ней находится указатель мыши и кнопки мыши не нажимаются.
При этом событии изображение кнопки должно становиться рельефным.
>• Включите отображение эффекта Bevel and Emboss (Скос и рельеф), щелкнув мы-
шью в палитре Layers (Слои) в крайнем левом поле строки с названием этого эффек-
та так, чтобы в этом поле появился значок с изображением открытого глаза ®.
Таким образом, мы определили изображение на втором кадре эффекта для состояния
Over (Над).
Создадим новый кадр-состояние эффекта Rollover (Наведение).
>• Нажмите кнопку I a | - Creates rollover state (Создать состояние) в нижней части
палитры Web Content (Содержимое Web). В этой палитре появится новый кадр для
состояния Down (Нажатие).
Для вновь создаваемых кадров Adobe ImageReady по умолчанию предлагает состояния в
том порядке, в каком они располагаются в меню состояний. Но как указывалось выше,
вы можете выбрать из меню другое состояние.
Оставим для нового кадра состояние, предлагаемое по умолчанию. При этом состоянии,
т.е. когда нажимается кнопка мыши, графическая кнопка на Web-странице должна
выглядеть нажатой. Изменим соответствующим образом для текущего кадра параметры
эффекта Bevel and Emboss (Скос и рельеф).
154
Создание ШеЬ-слйтов
Рис. 4.80. Нажатое
состояние кнопки
>• Дважды щелкните мышью на названии эффекта
Bevel and Emboss (Скос и рельеф) в палитре
Layers (Слои). На экране появится диалог Layer
Style (Стиль слоя) с элементами управления эф-
фекта Bevel and Emboss (Скос и рельеф).
> Установите переключатель Down (Вниз) в диало-
ге Bevel and Emboss (Скос и рельеф) и нажмите
кнопку ОК. Диалог Layer Style (Стиль слоя) за-
кроется, и вид кнопки на рисунке изменится,
имитируя ее нажатое состояние (Рис. 4.80).
Созданный эффект можно просмотреть.
> Нажмите кнопку \Ж\ - Preview Document (Y) (Предварительный просмотр до-
кумента (Y)) на панели инструментов (Tools), чтобы включить режим предвари-
тельного просмотра.
> Установите указатель мыши в окне документа, за пределами изображения кнопки.
Кнопка примет вид плоского прямоугольника.
Переместите указатель мыши на изображение кнопки. Кнопка станет рельефной.
Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое состояние
кнопки.
Отпустите левую кнопку мыши. Изображение кнопки вновь станет рельефным.
Удалите указатель мыши за пределы изображения кнопки. Это изображение станет
плоским.
> Выключите режим предварительного просмотра эффекта, нажав кнопку [Jfky -
Preview Document (Y) (Предварительный просмотр документа (Y)) на панели инст-
рументов (Tools).
> Сохраните документ в формате PSD под именем Knopka.psd, выбрав команду меню
File • Save (Файл • Сохранить).
Теперь, когда изображение кнопки создано, и к нему применен эффект Rollover (Наве-
дение), наша следующая задача - оптимизировать и сохранить изображение в
Web-формате, чтобы его можно было использовать на Web-странице.
Фчъм/пъ JV&11. Оптимизируем и сохраняем графику
Создание минимально возможного по размеру графического файла - одна из важ-
нейших задач, стоящих перед разработчиками графики для Web. При подготовке
графики для просмотра в режиме он-лайн необходимо считаться с множеством фак-
торов, которые влияют на то, как будет выглядеть изображение в окончательном ва-
рианте. В частности, необходимо делать выбор между качеством изображения и раз-
мером графического файла, то есть получить максимально возможное качество
рисунка при оптимальном времени его загрузки и прорисовки на экране пользовате-
ля. Adobe ImageReady учитывает все эти требования.
Для полного контроля над процессом оптимизации вы можете использовать специаль-
ные режимы просмотра. В процессе создания изображения мы работали с неоптимизи-
Подготовка графики
155
рованной, оригинальной (Original) его версией, которая и сейчас отображается в окне
документа. В нижней части этого окна в двух открывающихся списках отображается
информация о документе: размер оптимизированного файла и длительность его загрузки
992 bytes / 1 sec, оригинальный размер файла и размер оптимизированного GIF-файла
314К / 992 bytes (Рис. 4.81). В этих открывающихся списках вы можете выбрать другую
информацию для вывода.
первую страницу
100% -г \ 1992 bylts / I s« ® 28.8 ...^ | j 314K / 992 byt« GIF •
r^i Knuiikd psd & 100% (Optimized)
©
тта первую страницу
I | ж ф ZS.8 • •••> | 3MKf99Zbyl «GIF »
Рис. 4.81. Окно документа с исходным
изображением и информацией о нем
Рис. 4.82. Изображение
оптимизировано
> Щелкните мышью на ярлыке 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 варианта) вы можете увидеть одновременно оригинальный и оптими-
зированный рисунки, чтобы иметь возможность сравнить их.
t J Knopka.psd @ 100% (2 Up)
страницу
у |
первую страницу
100% dither
Selective palette
16 colon
1 ж <а Z8.8 ...•* j
ffKnopkapsd & 100% (2 Up)
па первую страницу
rWa первую страницу
100% •»• [э92 byt « /1 sec
Рис. 4.83. Режим 2-Up (2 варианта)
с отображаемой информацией
Рис. 4.84. Режим 2-Up (2 варианта)
со скрытой информацией
156
Создание Web-сайтов
Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
В этом окне появятся два поля с информацией: вверху - об оригинальном изображе-
нии, внизу - об оптимизированном (Рис. 4.83).
Выберите команду меню View • Hide Optimization Info (Вид • Скрыть оптимизаци-
онную информацию). Эта информация будет удалена из окна документа, и вы увиди-
те оба варианта рисунка (Рис. 4.84).
Как видите, различия между этими вариан-
тами практически не заметны.
В режиме 4-Up (4 варианта) в рабочем ок-
не документа отображаются четыре вер-
сии рисунка.
>- Щелкните мышью на ярлыке 4-Up (4
варианта), чтобы переключиться в этот
режим (Рис. 4.85).
rViKnopka.psd @ 100% (4 Up)
' на первую страницу
та
первую страницу
первую страницу
а первую страницу
100% » J992 bytes П seel? 28.8 ...•»•[ 3 1 * / 992 byles GIF' *\
Рис. 4.85. Режим 4-Up (4 варианта)
По умолчанию в данном режиме в верхней
части окна документа отображается ориги-
нальный вариант изображения, под ним -
оптимизированный вариант с параметрами
по умолчанию, а затем - две версии до-
кумента низкого качества с модифициро-
ванными текущими установками.
По умолчанию в окне документа выделен
жирной рамкой второй оптимизированный
вариант изображения, и информация о нем
отображается в информационных полях
в нижней строке окна. Если же щелчком мыши выделить другой вариант рисунка, в ин-
формационной строке вы увидите сведения о выбранной версии. Вне зависимости от
того, какой вариант просмотра выбран, вы всегда будете иметь перед глазами необходи-
мую информацию - имя файла, его размер или установки оптимизации и время зафузки
рисунка при заданной скорости модема - в зависимости от того, какая информация вы-
брана для отображения в открывающихся списках в нижней части окна документа.
>• Переключите окно документа в режим 2-Up
(2 варианта), щелкнув мышью на этом ярлыке в
верхней части окна.
>• Выберите команду меню View • Show Optimization
Info (Вид • Показать оптимизационную информа-
цию), чтобы отобразить в окне документа необходи-
мые сведения.
Параметры оптимизации можно настроить с помощью
палитры Optimize (Оптимизация) (Рис. 4.86), которая по
умолчанию находится в верхнем окне палитр у правого
края рабочего окна.
> Если эта палитра отсутствует в рабочем окне, выберите команду меню Window •
Optimize (Окно • Оптимизация).
Рис. 4.86. Палитра Optimize
(Оптимизация)
Подготовка графики
157
В открывающемся списке 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 является стандартным для оптими-
зации изображений для мобильных устройств, та-
ких, как сотовые телефоны. Формат WBMP под-
держивает 1-битный цвет, т.е. WBMP-изображения
являются черно-белыми.
> Щелкните мышью на треугольнике £> слева от
строки Color Table (Таблица цветов). Эта часть
палитры Optimize (Оптимизация) будет развер-
нута (Рис. 4.87).
Чтобы вновь свернуть часть палитры, достаточно
щелкнуть мышью на треугольнике V слева от на-
звания развернутого раздела. Чтобы развернуть все
разделы палитры Optimize (Оптимизация), надо
нажать кнопку 0 в правом верхнем углу палитры
и в появившемся меню выбрать команду Show
Options (Показать параметры), а чтобы свернуть -
команду Hide Options (Скрыть параметры).
Одним из лучших способов уменьшения размеров GIF или PNG-8 файлов при сохране-
нии качества является максимально возможное сокращение количества цветов в изобра-
жении. В открывающемся списке Reduction (Уменьшение) расширяемой части Color
т? Color Table
Reduction: [grayscale
Colors: | 2=6
Web Snap:
> Dither
t> Transparency
fc Options
Рис. 4.87. Элементы управления
Color Table (Таблица цветов)
палитры Optimize (Оптимизация)
158
Создание Web-сайтов
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, которая основана на равномерной, с
постоянным интервалом, выборке RGB-цветов по всей
длине спектра.
Набор цветов каждой из перечисленных таблиц вы мо-
жете увидеть в палитре Color Table (Цветовая таблица).
> Выберите из открывающегося списка Reduction
(Уменьшение) значение Grayscale (Градации серого).
> Щелкните мышью на ярлыке Color Table (Цветовая
таблица) в третьем сверху окне палитр у правого
края рабочего окна или выберите команду меню
Window • Color Table (Окно • Цветовая таблица), Р и с 4 8 8 Палитра Color Table
чтобы вывести на экран эту палитру (Рис. 4.88). (Цветовая таблица)
\
\
|
|
!
s
!
!
1
F1
256 | Ы 1 Л
Подготовка графики 159
В палитре Color Table (Цветовая таблица) отображаются образцы 256 градаций серого
цвета.
> Выбирая из открывающегося списка Reduction (Уменьшение) палитры Optimize
(Оптимизация) различные цветовые таблицы, просмотрите, как при этом изменяет-
ся оптимизированное изображение, его параметры, а также набор цветов таблицы
(Color Table), после чего снова выберите таблицу Selective (Выборочная).
Используя все доступные средства, вы можете добавлять, удалять, редактировать или
блокировать некоторые цвета в палитре Color Table (Цветовая таблица). Блокирование
цветов гарантирует, что цвет останется нетронутым, когда вы выбираете другие цвета
или преобразовываете их в Web-безопасные цвета. Для выбора любого цвета достаточно
щелкнуть на нем мышью; для выбора группы цветов - щелкать мышью при нажатой
клавише !Sh i f t l. Блокирование выбранных цветов выполняется нажатием кнопки с изо-
бражением замка | а ] - Locks / Unlocks selected colors to prohibit being dropped
(Блокирует / Разблокирует выбранные цвета) в нижней части палитры Color Table
(Цветовая таблица). При этом в правом нижнем углу образца цвета появляется ми-
ниатюрный квадрат.
Для преобразования выбранных цветов в Web-безопасные следует нажать кнопку | е | -
Shifts / Unshifls selected colors to Web palette (Сдвигает / Отменяет сдвиг выбранных
цветов к Web-палитре) в нижней части палитры. В центре образца цвета появится значок
в виде миниатюрного ромба.
Добавление цвета возможно только, если в палитре присутствует менее 256 цветов, и осуще-
ствляется нажатием кнопки | В | - Adds foreground color to palette (Добавить цвет в палит-
ру), а удаление выделенных цветов - нажатием кнопки I И | - Deletes selected colors (Уда-
лить выбранные цвета) в нижней части палитры Color Table (Цветовая таблица).
В меню палитры Color Table (Цветовая таблица) Adobe ImageReady предлагает команды
для быстрого выбора всех цветов (Select All Colors), всех цветов из выделенной части
рисунка (Select All 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 пиксел. Поэтому предпочтительнее выбрать фиксированное значение.
160
Создание Web-сайтов
>- Выбирая из открывающегося списка Colors (Цвета) различные значения максималь-
ного количества цветов в палитре и просматривая полученный результат в окне до-
кумента, найдите минимальное значение параметра, при котором качество изображе-
ния остается удовлетворительным. Вероятно, таким значением будет 16.
Обратите внимание, что после каждого изменения параметра происходит повторная оп-
тимизация файла и генерация изображения, и в окне документа появляется новая ин-
формация о нем, включающая также новый размер файла и время его загрузки. В нашем
случае размер файла начинает уменьшаться только при значениях количества цветов
(Colors), меньших 16.
С помощью ползункового регулятора Web Snap (Привязка к Web) можно автомати-
чески конвертировать цвета палитры в Web-цвета и, таким образом, исключить сме-
шивание в браузере. Числовое значение этого параметра в процентах определяет ко-
личество цветов, которые будут преобразованы. Чем больше значение, тем больше
цветов будет преобразовано.
Применение любой из перечисленных выше палитр для уменьшения цветов из откры-
вающегося списка Reduction (Уменьшение) - Selective (Выборочная), Adaptive (Адап-
тивная) и других - может привести к тому, что цве-
товая таблица не сможет вместить все цвета, ис-
пользованные в изображении. Для имитации цветов,
не оказавшихся в цветовой таблице, можно задать
один из способов смешивания, выбрав его из от-
крывающегося списка Method (Метод) расширяе-
мой части Dither (Смешивание) (Рис. 4.89).
Смешивание подразумевает комбинирование пик-
селов, окрашенных в доступные цвета, случайным
образом или в виде узора (Pattern) таким образом,
чтобы получить иллюзию отсутствующего цвета.
Например, комбинация красного и желтого цветов,
размещенных в виде мозаичного узора, может ими-
тировать оранжевый цвет, отсутствующий в палит-
ре. Вам предлагаются четыре варианта:
шшшяшш
_[jtnfo_^j » Optimize
Preset: |[Unnamed]
Forma*: |<SIF .
!> Color Table
•^ Dither
Method: jDiffusion
Amount: ) 100% •.
t> Transparency
[> Options
Ш
Рис. 4.89. Элементы управления
Dither (Смешивание)
палитры Optimize (Оптимизация)
No Dither (Без смешивания) - не выполняет никакого смешивания. Вместо отсутствую-
щих цветов подставляются их ближайшие аналоги из числа доступных. В результате в
изображении могут образоваться слишком резкие цветовые переходы;
Diffusion (Диффузия) - выполняет смешивание, добавляя в изображение пикселы, располо-
женные случайным образом, без какой-либо закономерности, создавая эффект диффузии
между соседними пикселами. В результате изображение приобретает характерную зерни-
стую, шероховатую фактуру, но с минимальными искажениями цвета. Применяется по
умолчанию;
Pattern (Узор) - для имитации отсутствующих в палитре цветов смешивает пикселы,
располагая их в виде шахматной мозаики;
Noise (Шум) - применяет случайное размещение пикселов, подобно методу Diffusion
(Диффузия), но без диффузии между соседними пикселами. При этом методе на изобра-
жении не возникают шероховатости.
Подготовка графики
161
Format: j<3IF
> Color Table
> Dither
^Transparency
J*£ Transparency
El
Dilher: )NO Dither •> [
Amount: I 100% ;
1
> Options
Puc. 4.90. Элементы управления
Transparency (Прозрачность)
палитры Optimize (Оптимизация)
$ Optimize \j.ayer Comps \
Изменяя значения в поле ввода с ползунковым регулятором Amount (Количество) можно
управлять диапазоном цветов, имитируемых смешиванием. Высокие значения параметра
создают больше цветов и, соответственно, отображают большее количество деталей ри-
сунка, но могут также увеличить и размер файла. Изображения, содержащие сплошные
цвета, хорошо передаются и при отсутствии смешивания. Полноцветные изображения,
особенно цветные фадиенты, требуют установки максимального значения этого параметра.
>• Щелкните мышью на треугольнике £» слева от
строки Transparency (Прозрачность). Эта часть
палитры Optimize (Оптимизация) будет развер-
нута (Рис. 4.90).
-Если вам заранее известен цвет фона Web-
страницы, на которую будет помещено создавае-
мое изображение, вы можете указать программе
окрасить прозрачные пикселы изображения цве-
том, соответствующим фону Web-страницы. Это
можно сделать двумя способами. При установ-
ленном по умолчанию флажке Transparency
(Прозрачность), а этот флажок установлен, так
как изображение создано на прозрачном фоне,
сохраняется прозрачность всех абсолютно про-
зрачных пикселов. Частично прозрачные пикселы,
которые обычно присутствуют по краям сглажен-
ного изображения, заполняются цветом, опреде-
ленным параметром Matte (Подложка). При
сброшенном флажке Transparency (Прозрач-
ность) абсолютно и частично прозрачные пикселы
заполняются цветом, который выбирается из от-
крывающегося списка Matte (Подложка).
Параметр Lossy (Потери) в расширяемой части
Options (Параметры) (Рис. 4.91) позволяет ука-
зать значение в процентах, на основании которого
в процессе сжатия из изображения будут удалены
пикселы и, соответственно, уменьшен размер
файла. Применение значения Lossy (Потери)
, в пределах 5-10%, а иногда и до 50%, заметно не
сказывается на качестве. Используя этот параметр,
часто можно уменьшить размер файла на 5-40%.
Указанный параметр не может использоваться совместно с методами смешивания Noise
(Шум) и Pattern (Узор), а также при установленном флажке Interlaced (Чересстрочная
развертка).
>• Установите флажок Interlaced (Чересстрочная развертка), чтобы сохранить файл с
использованием чересстрочной развертки.
При этом в процессе загрузки изображения браузер показывает сначала каждую вось-
мую строку пикселов, затем - каждую четвертую, далее - каждую вторую и, наконец,
все изображение. Это позволяет пользователю понять содержание рисунка еще до окон-
чания его полной загрузки. Обратите внимание, что использование чересстрочной раз-
6-1210
Preset: |[Unnamed] %J
Format: JSIF
P Color Table
I> Dithe
[> Transparency
Г1 Interlaced Lossy: j 0
О и « Unified Color Table
Щ Add Metadata f"s«(UngZ~|
Puc. 4.91. Элементы управления
Options (Параметры)
палитры Optimize (Оптимизация)
162
Создание Web-сайтов
вертки для данного изображения не увеличивает размер файла, а даже незначительно
уменьшает его с 992 до 987 байт (при 256 цветах).
v Установите флажок Use Unified Color Table (Использовать унифицированную цвето-
вую таблицу). Это позволит использовать единую цветовую таблицу для всех со-
стояний эффекта Rollover (Наведение).
Adobe ImageReady обеспечивает цветовой контроль на таком уровне, что можно даже
увидеть, как будет выглядеть 8-битное, 256-цветное изображение в различных браузерах •
и в различных операционных системах. Чтобы проверить отображение графики в брау-
зере, достаточно выбрать команду меню View • Preview • Browser Dither (Вид • Пред-
варительный просмотр • Смешивание в браузере) при активном оптимизированном ва-
рианте изображения в окне документа. Или можно изменить настройки дисплея на
8-битный режим - 256 цветов, а затем просмотреть оптимизированное изображение в
различных браузерах, которые можно вызвать непосредственно из Adobe ImageReady
командой меню File • Preview In (Файл • Предварительный просмотр в) или нажатием
кнопки 1ЙР.| - 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-файлы сайта.
> Убедитесь, что в открывающемся списке Тип файла (File type) выбрано HTML and
Images (*.htm!) (HTML и изображения (*.html)), чтобы сгенерировать HTML-код соз-
данного эффекта и сохранить изображения. При этом кадры каждого состояния эф-
фекта Rollover будут сохранены как отдельные файлы в папке images, которая будет
помещена в ту папку, где будет находиться HTML-файл, т.е. в папку Web.
В поле ввода Имя файла (File name) для сохраняемого документа предлагается имя
Knopka.html. Оставим его без изменения.
>• Нажмите кнопку Сохранить (Save). Диалог Save Optimized (Сохранение оптимизи-
рованного документа) закроется. Adobe ImageReady создаст и сохранит на диске
файл Knopka.html с HTML-кодом эффекта.
Подготовка графики
163
Sample Picture»
Имя Файла:
1ип Файла:
Settings:
Slices:
|Knopka
|HTML and Images (-.hlml)
|Delault Settings
[All Slices
Ы
ы
ы
Рис. 4.92. Диалог Save Optimized (Сохранение оптимизированного документа)
Мы познакомились с возможностями оптимизации и сохранения графики для Web в
программе Adobe ImageReady. Такую же оптимизацию вы можете выполнить в Adobe
Photoshop. Особенности оптимизации в Adobe Photoshop мы рассмотрим в дальнейшем.
А сейчас программу Adobe ImageReady можно закрыть.
> Выберите команду меню File • Exit (Файл • Выход). На экране появится запрос о
необходимости сохранения документа Knopka.psd (Рис. 4.93).
Save changes to document "Knopka pid" beloie quitting?
Puc. 4.93. Запрос о необходимости сохранения документа Knopka.psd
Так как мы уже сохранили документ перед оптимизацией, то на этот запрос можно отве-
тить отрицательно.
> Нажмите кнопку Нет (No). Программа Adobe ImageReady закроется. Вы возвратитесь
к программе Adobe Photoshop.
Посмотрим, что представляет собой созданный файл.
>• Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web.
В этом файле записана автоматически созданная на языке JavaScript программа, изме-
няющая состояние изображения кнопки при различных действиях, выполняемых мы-
шью. Сами изображения находятся в папке images. Такая программа обычно состоит из
команд (операторов) и команд вызова функций. В нашем случае функции находятся в
заголовке HTML-документа между тегами <head> и </head>, а команды, их вызываю-
щие, - в его теле, между тегами <body> и </body>.
6-
164
Создание 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 текст программы, начиная с <! •-- Im-
ageReady Sl i ces (Knopka.psd) --> и заканчивая <!-- End ImageReady
Sl i ces —>.
>• В файле spisok.html в ссылке A HREF="#" СИМВОЛ # замените именем файла
geoton.html, чтобы эта ссылка имела следующий вид:
A HREF="geoton.html"
> Сохраните файл spisok.html, выбрав команду меню программы Блокнот (Notepad)
Файл • Сохранить (File • Save).
> Закройте обе копии программы Блокнот (Notepad).
Проверим, как работает созданная нами кнопка.
> Откройте документ spisok.html из папки Web в программе просмотра Web-страниц.
>• Перейдите в конец страницы, где находится вставленная кнопка.
Пока указатель мыши находится за пределами графической кнопки, ее изображение
плоское.
>• Установите указатель мыши на желтой кнопке с надписью На первую страницу.
Кнопка станет рельефной.
>• Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое состояние
графической кнопки.
> Отпустите левую кнопку мыши. Произойдет переход по ссылке, и в окно браузера
будет загружен файл geoton.html.
Если у вас что-либо не получается, проверьте, правильно ли вы скопировали программу
в файл spisok.html.
>• Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.
Таким образом, мы убедились, что созданный нами эффект Rollover (Наведение) работа-
ет. Подобным образом вы можете создавать большое количество разнообразных эффек-
Подготовка графики 165
тов. Кроме того, каждое состояние эффекта может быть анимировано, например, так,
чтобы при нажатии кнопки буквы «убегали» с нее. Можно придумать множество инте-
ресных и необычных эффектов.
Фты^/т JV&12. Обрабатываем фото
На своих Web-страницах вы, конечно же, будете помещать не только баннеры, кнопки и
рисунки, но и фотографические изображения. Фотографии для Web могут быть взяты из
библиотек цифровых фотографий, распространяемых на CD-ROM, загружены из WWW,
получены с помощью видеокамеры, цифрового фотоаппарата или же путем сканирова-
ния фотографий и слайдов, снятых пленочным фотоаппаратом.
Одно из существенных преимуществ цифровой фотографии, помимо оперативности и
удобства, - широкие возможности редактирования изображений. Ретушь, фотомонтаж,
всякого рода художественные эффекты на цифровых фото осуществляются значительно
проще, существенно быстрее и, самое главное, не требуют от исполнителя каких-либо
особых навыков и квалификации. Однако самой впечатляющей является возможность
коррекции и полного исправления таких недостатков экспозиции, перспективных и гео-
метрических искажений, коррекция которых в традиционной фотографии просто невоз-
можна. В очередных опытах мы поговорим о процессе подготовки фотографий для Web,
а для иллюстрации основных возможностей их обработки воспользуемся фотографиями,
хранящимися на прилагаемом к книге компакт-диске в папке Photos.
> С помощью программы Проводник (Explorer) перепишите файлы Ozero.jpg и
Samolet.jpg с компакт-диска на жесткий диск.
> Откройте в программе Adobe Photoshop с помощью команды меню File • Open (Файл
• Открыть) загруженный файл Ozero.jpg (Рис. 4.94).
Рис. 4.94. Фотография из файла Ozero.jpg
166
Создание Web-сайтов
Очень часто цифровые фотографии, особенно сканированные, содержат дефекты
самого различного характера: нарушение цветового и тонового баланса, расфокуси-
ровка, блики и др. В недалеком прошлом в каждом фотоателье обязательно выпол-
нялась ретушь фотографий, и вручную, более или менее удачно корректировались
дефекты, как технические, так и художественные. Совершенно иное дело - компью-
терная ретушь, которую порой даже трудно вычленить, поскольку, как правило, она
входит в качестве составной части в сложный творческий процесс обработки изо-
бражения. И, тем не менее, какие-то элементы ретуши мы попробуем вычленить и
рассмотреть отдельно.
На открытой в Adobe Photoshop фотографии Ozero.jpg вы видите африканский пейзаж.
Причем все изображение сильно затемнено так, что в его нижней части практически ниче-
го не видно. Кроме того, фотография расфокусирована, а в ее центре находится белый
блик. Попробуем, по возможности, исправить все эти изъяны.
Прежде чем мы приступим к работе, следует сохранить этот файл в формате Adobo Pho-
toshop. Напомним, что недостатком JPEG-формата, в котором сохранен файл Ozero.jpg,
является то, что его алгоритм уплотнения приводит к частичной потере данных. Если вы
упакуете изображение в процессе сохранения, а затем вновь распакуете его, то результат
не будет полностью идентичен оригиналу. При постоянном открытии и сохранения
JPEG-файла можно сильно испортить изображение. Формат Adobe Photoshop лишен это-
го недостатка и, кроме того, позволяет хранить слои и другие атрибуты изображения,
которые не доступны в формате JPEG. Поэтому до полного окончания работы с изобра-
жениями их нужно сохранять в формате PSD.
>• Выберите команду меню File • Save As (Файл • Сохранить как). На экране появится
диалог Save As (Сохранить как).
>• Выберите папку, в которой будет сохранен документ.
> В открывающемся списке Format (Формат) выберите формат Photoshop (*.PSD; *.PDD).
> В открывающемся списке Имя файла (File name) укажите имя сохраняемого файла -
Ozero.psd.
>• Нажмите кнопку Сохранить (Save). Файл будет сохранен на диске в выбранной пап-
ке под указанным именем.
Ретуширование фотографии начнем с блика. Коррекция подобных погрешностей выпол-
няется посредством клонирования, которое заключается в замене дефектного участка
образцом из близлежащих областей. Эта операция выполняется с помощью инструмента
УЦ - Clone Stamp Tool (S) (Инструмент «Штамп» (S)).
> Нажмите кнопку [^] - Clone Stamp Tool (S) (Инструмент «Штамп» (S)) на панели
инструментов (Tools). Инструмент будет выбран. На панели параметров (Options
Bar) вы увидите элементы управления параметрами инструмента (Рис. 4.95).
Brush: * -I I Mode: |Ncrm«L__J*j[ ОрлсЦу: Пм% I' I Floy»: | 100%ТП ^ P";Alig™d Г: Us« Al l»y«rs
63
Рис. 4.95. Панель параметров инструмента Clone Stamp Tool (S)
(Инструмент «Штамп» (S))
Подготовка графики 167
Теперь нам нужно выбрать мягкую кисть, форма и размер которой определяет форму и
размер фрагмента изображения, переносимого на дефектный участок. Поскольку уда-
ляемый блик имеет округлую форму, то и форма кисти должна быть такая же, а размер
кисти - несколько больше блика.
> Нажмите кнопку Q| справа от образца текущей кисти Brush (Кисть) на панели
параметров (Options Bar), чтобы открыть палитру кистей.
Напомним, что название кисти появляется во всплывающей подсказке, если навести и
удерживать на выбранной кисти указатель мыши.
>• Выберите кисть Soft Round 35 pixels (Мягкая круглая 35 пикселов), щелкнув на ней
мышью.
> Щелкните мышью на свободном пространстве рабочего окна. Палитра кистей
закроется.
Заметьте, что для клонирования следует воспользоваться кистью с мягкими краями, чтобы
максимально сгладить переход между существующим и перенесенным изображением.
Процесс клонирования состоит из двух операций. Сначала следует выбрать образец для
замены дефектного фрагмента, а затем выполнить замену. Чтобы на месте исправленно-
го дефекта не было заметно «заплатки», нужно правильно выбрать область-источник:
того же оттенка, с такой же освещенностью и т.д. В нашем случае по этим параметрам
для клонирования лучше всего подходит участок справа от блика.
> Установите указатель мыши, который примет форму круга диаметром 35 пикселов, на
фотографии справа от белого блика так, чтобы блик находился за пределами круга.
>• Нажмите и удерживайте клавишу II Al t I. Указатель мыши примет форму @.
> Не отпуская клавишу II Al t I. щелкните мышью в этом месте.
>• Отпустите клавишу ][ Ai l I.
Таким образом, мы зафиксировали центр клонируемой области.
Нажав клавишу i! Al t I. вы можете взять образец для инструмента [j y в любом открытом
окне документа программы Adobe Photoshop, не меняя при этом активного окна.
Теперь можно перенести образец на блик и, таким образом, ликвидировать его.
>• Установите указатель мыши, который примет форму круга диаметром 35 пикселов,
на белый блик так, чтобы блик находился в центре круга.
>• Щелкните мышью в этом месте. В момент щелчка справа от указателя мыши-круга
появится крестик, обозначая центр клонируемой области. Белый блик исчезнет - на
него будет наложен клонированный образец.
Если полученный результат вас не удовлетворяет, отмените клонирование и попробуйте
клонировать другие области вокруг дефекта, пока не найдется подходящая замена.
Клонирование можно выполнять также, «рисуя» кистью при нажатой левой кнопке мы-
ши. При этом нужно следить за крестиком, определяющим место, с которого копируется
изображение, и одновременно видеть и правильно направлять процесс клонирования.
168
Создание Web-сайтов
J№i3. Выполняем тоновую коррекцию
Качество любого изображения, особенно фотографического, во многом зависит от его
тона. Если в изображении правильно определены самые светлые и самые темные облас-
ти, а также сбалансированы средние тона, то оно воспринимается как «живое». Опытные
фотохудожники затрачивают немало усилий, чтобы довести отпечаток до требуемой
тональной глубины.
Однако очень часто изображения, особенно сканированные, имеют, дефекты в темных,
средних или светлых тонах. Задачей тоновой коррекции является исправление погреш-
ностей в отдельных частях тонового диапазона путем переопределения значений ярко-
сти пикселов и обеспечения правильного ее распределения по всему изображению.
Фотография Ozero.jpg затемнена и выглядит «тусклой». Причиной этого является нару-
шение тонового баланса. Поэтому наша очередная задача - повысить яркость и контра-
стность изображения* выполнив тоновую коррекцию. Это можно сделать с помощью
диалога Levels (Уровни).
Для выполнения тоновой коррекции воспользуемся специальным корректирующим сло-
ем, который позволит свободно экспериментировать с настройкой цветовых и тс новых
характеристик изображения, не изменяя при этом исходные графические данные. Вме-
сто того, чтобы непосредственно редактировать пикселы, можно записать параметры
коррекции на вспомогательным слое и «взглянуть» сквозь него на реальные слои изо-
бражения. Параметры настройки, записанные на корректирующем слое, воздействуют
на все слои изображения, расположенные под ним. Таким образом, вы можете не обра-
батывать каждый слой в отдельности, а модифицировать одновременно несколько слоев.
Имеется возможность также воздействовать только на тот слой, который расположен
под корректирующим.
Создадим корректирующий слой.
> Убедитесь, что палитра Layers (Слои) видна на экране и не перекрывается други-
ми палитрами. В противном случае выберите команду меню Window • Layers
(Окно • Слои).
>• Выберите команду меню Layer • New Adjustment Layer • Levels (Слой • Новый
корректирующий слой • Уровни). На экране появится диалог New Layer (Новый
слой) (Рис. 4.96).
№пле:|(.е»ек1
D Use Previous Layer to Create eloping Mai
Color: | • None
Mode: | Morrrul
a
U Opacity: 1100 |> |%
HI T
1 OK |
1 Cancel |
Рис. 4.96. Диалог New Layer (Новый слой)
В поле ввода Name (Имя) этого диалога по умолчанию предлагается имя слоя - Levels 1
(Уровни 1). Данный тип корректирующего слоя настраивает уровни яркости и контраст-
ности изображения. Это то, что нам нужно.
Подготовка графики
169
Установка флажка Use Previous Layer to Create Clip-
ping Mask (Использовать предыдущий слой для созда-
ния маски) позволяет применить коррекцию яркости и
контрастности только к одному нижележащему слою.
Параметры Opacity (Непрозрачность) и Mode (Режим)
позволяют сразу же определить степень непрозрачно-
сти и режим наложения пикселов. Корректирующие
слои приобретают такие же характеристики непро-
зрачности и режима наложения, что и реальные слои.
> Нажатием кнопки ОК закройте диалог New Layer (Но-
вый слой). В палитре Layers (Слои) появится и станет
активным новый слой Levels 1 (Уровни 1) (Рис. 4.97).
| Layers N^iels Nath
^Normal _Z_
Lock: • J & t
Opacity: [
} HI!: [
в. JJ
• - '
100%
100%
•
e
H
и
Рис. 4.97. Корректирующий
слой создан
Вновь созданный корректирующий слой располагается в палитре слоев непосредст-
венно на слое, который перед этим был активным. При необходимости можно изме-
нять его положение в пачке слоев, удалять, скрывать и дублировать по аналогии
с обычными слоями.
Одновременно с созданием корректирующего слоя на экране появился диалог Levels
(Уровни) (Рис. 4.98).
Рис. 4.98. Диалог Levels (Уровни)
v Переместите этот диалог так, чтобы он не закрывал окно документа.
Тоновая коррекция изображения выполняется с помощью гистограммы в диалоге Levels
(Уровни). Гистограмма - это графическое представление уровней яркости в изображе-
нии. Горизонтальная ось гистограммы отображает значения яркости от 0 до 255. Значе-
ние яркости 0 (ноль) у левого края графика соответствует самым темным тонам, а значе-
ние яркости 255 у правого края графика - самым светлым. По вертикальной оси гисто-
граммы отображается количество пикселов, имеющих данное значение яркости.
С помощью гистограммы вы можете определить, содержит ли изображение достаточное
количество деталей яркости, которое обеспечило бы хорошие результаты настройки:
слишком малое количество полутонов может не позволить вам выполнить качественную
коррекцию. Недостаток деталей яркости в изображении может быть вызван плохим ка-
чеством оригинала или ошибками сканирования. Кроме того, потеря деталей может про-
изойти в результате уже выполненной обработки изображения.
170
Создание 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. Это приводит к снижению контраста исходного изобра-
жения в области теней.
Первый этап тоновой коррекции состоит в переопределении значений яркости для само-
го светлого и самого темного пикселов изображения, что позволяет достичь максималь-
ной детализации по всему тоновому интервалу. Эту процедуру иногда называют опреде-
лением света и теней или установкой белой и черной точек.
Способ коррекции изображения, содержащего слишком малое количество полутонов в
светлых областях или тенях, т.е. по краям шкалы яркостей, заключается в перемещении
Подготовка графики 171
треугольных бегунков к точкам, соответствующим фактическим границам его тонового
интервала. В результате происходит переопределение самого светлого и самого темного
пикселов изображения - они становятся соответственно белыми и черными. Значения
яркости всех остальных пикселов корректируются пропорционально, что позволяет со-
хранить в изображении общий цветовой баланс.
Переопределим значение яркости для самого темного пиксела изображения.
> Убедитесь, что в диалоге Levels (Уровни) установлен флажок Preview (Предвари-
тельный просмотр). Это позволит наблюдать в окне документа все изменения
изображения.
>• Переместите черный треугольный бегунок у левого края гистограммы вправо, к гра-
нице тонового интервала изображения, т.е. к первой слева группе полутонов так,
чтобы в левом поле ввода Input Levels (Входные уровни) появилось значение 18.
В результате такой коррекции значения яркости пикселов на гистограмме слева от чер-
ного треугольника станут равны 0 (нулю) или черному цвету, а значения яркости всех
остальных пикселов изображения будут уменьшены на указанное число, и изображение
в окне документа станет темнее. Соответственно, если двигать влево белый треугольный
бегунок, то значения яркости всех пикселов справа от него будут равны 255 или белому
цвету. Таким образом, информация, которая была на краях тонового диапазона, потеря-
ется, но если ее не было, все значения яркости будут перераспределены, и качество изо-
бражения улучшится.
Выполнив коррекцию теней, мы можем теперь настроить гамму или средние тона изо-
бражения. Настройка гаммы позволяет изменять значения яркости в среднем диапазоне
полутоновой шкалы, не вторгаясь в области светов и теней. Как правило, эта процедура
не требуется при обработке изображений с преобладанием средних тонов, поскольку в
процессе установки светлых областей и теней происходит соответствующее перераспре-
деление значений яркости по всему тоновому интервалу. Однако в тех случаях, когда
большинство полутонов оказывается сконцентрированным на краях шкалы яркостей,
как в нашем случае в области теней, необходимость дополнительной настройки средних
тонов становится очевидной.
>• Перемещайте серый треугольный бегунок под гистограммой влево, в область теней,
на небольшие интервалы и наблюдайте, как при этом увеличивается яркость средних
тонов. Установите этим бегунком значение гаммы приблизительно 1.30. Это значе-
ние должно отобразиться в среднем поле ввода Input Levels (Входные уровни).
Поля ввода Input Levels (Входные уровни) и треугольники-бегунки, расположенные
непосредственно под гистограммой, используются также для усиления контраста в
изображении. Черный треугольный бегунок, как указывалось выше, управляет тенями,
белый - светом, а серый - настройкой гаммы или коэффициента контраста в средних
тонах. Вы также можете указывать входные значения в явном виде.
Предположим, что вы хотите повысить контраст в изображении, пикселы которого охва-
тывают весь диапазон цветовых значений от 0 до 255. Если переместить белый тре-
угольник под гистограммой к отметке 225, то всем пикселам с яркостью от 225 до 255
будет присвоено значение 255. Значения яркости всех остальных пикселов будут про-
порционально переопределены в границах нового тонового интервала. В результате изо-
бражение станет светлее, а контраст в светлых областях усилится.
172
Создание Web-слйтов
Поля ввода Output Levels (Выходные уровни) и шкала под ними в нижней части диалога
Levels (Уровни) используются для снижения контраста в изображении. Черны? тре-
угольник управляет тенями, а белый - светлыми областями. Вы также можете вводить
выходные значения в явном виде. Если в параметре Input Levels (Входные уровни) уча-
сток гистограммы справа от светлого треугольника соответствует белому цвету, то в
параметре Output Levels (Выходные уровни) этот же участок соответствует текущему
уровню, на который указывает треугольный бегунок.
Предположим, что необходимо снизить контраст. Если вы переместите белый треуголь-
ник нижней шкалы к отметке 225, то яркость самых светлых пикселов будет изменена с
255 до 225, а яркость всех остальных пикселов будет пропорционально уменьшена в со-
ответствии с изменившимся диапазоном значений. В результате изображение станет
темнее, а контраст в светлых областях снизится.
> Закройте диалог Levels (Уровни) нажатием кнопки ОК. Установленные параметры
коррекции будут применены. Изображение примет вид примерно как на Рис. 4.99.
Рис. 4.99. Тоновая коррекция выполнена
> Выключайте и включаете отображение корректирующего слоя Levels (Уровни) в
палитре Layers (Слои), чтобы оценить различие в изображении до и после толовой
коррекции.
Теперь, когда тоновая коррекция выполнена, можно объединить корректирующий слой с
нижележащим фоновым.
>• Выберите команду меню Layer • Merge Down (Слой • Объединить с нижележащим).
Корректирующий слой будет объединен с нижележащим слоем Background (Фон).
>• Повторно откройте диалог Levels (Уровни), выбрав команду меню Image • Adjust-
ments • Levels (Изображение • Коррекции • Уровни).
Вы увидите, что гистограмма несколько «выровнялась», растянулась на всю шлрину
шкалы яркостей, уменьшилась концентрация полутонов в области теней, однако при
этом в ней появились «пробелы» (Рис. 4.100).
Подготовка графики
173
- Channel: | RGB _£] •
Input Levels: 0 {1,00 255 j
liiliilliiL-M .U
"OR"'
Reset
Load..
gave..
Auto
: Options,,
l?j Preview
Рис. 4.100. Гистограмма после тоновой коррекции
Эти пробелы существенно не влияют на качество изображения, если только они не
становятся слишком широкими и не сопровождаются слишком малым количеством
пикселов соответствующей яркости. Белые пробелы - это плата за расширение диапа-
зона яркостей. В данном изображении отсутствие пикселов определенных яркостей не
сильно сказывается на качестве изображения, но могут встретиться изображения, у
которых при максимальном расширении диапазона яркостей возможны значительные
провалы в тонах.
>• Нажав кнопку ОК, закройте диалог Levels (Уровни).
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить). Так как
фотография сохраняется в формате Adobe Photoshop, а не JPEG, то потери качества
не будет..
Таким образом, смысл тоновой коррекции заключается в «вытягивании» имеющегося
тонового диапазона как в сторону светлых участков, так и в сторону теней и выполняет-
ся путем переопределения крайних точек тонового диапазона и перераспределения всех
остальных уровней в новом диапазоне. При необходимости выполняется также коррек-
ция значений яркости в средней части полутоновой шкалы. Все эти операции выполня-
ются в диалоге Levels (Уровни).
Кроме команды Levels (Уровни), в Adobe Photoshop имеется еще несколько возможно-
стей для тоновой коррекции. Принцип работы всех инструментов тоновой коррекции
программы Adobe Photoshop одинаков: существующие диапазоны значений пикселов
преобразуются в новые диапазоны. Различие между этими инструментами определяется
разными возможностями настройки значений. Например, команда Brightness/Contrast
(Яркость/Контраст) выполняет одинаковую коррекцию всех пикселов изображения или
выделенного фрагмента по всему тоновому интервалу. Иными словами, если вы увели-
чите значение яркости на 20, то эта величина будет добавлена к значению яркости каж-
дого пиксела. Команда Curves (Кривые), напротив, позволяет разбить всю полутоновую
шкалу на 16 интервалов и выполнить очень точную настройку, не уступающую по каче-
ству профессиональным системам цветокоррекции.
174
Создание Web-сайтов
J\@14. Повышаем резкость изображения
Следующее, что необходимо сделать, корректируя изображение, - это усилить его рез-
кость с помощью фильтров. Резкость изображения - очень важный параметр. Во исяком
случае, главные элементы изображения должны быть резкими. Но зачастую, по разным
причинам резкости бывает не достаточно.
В программе Adobe Photoshop имеется специальный инструмент Sharpen Tool (FI) (Ин-
струмент «Резкость» (R)) и несколько фильтров, которые осуществляют усиление резко-
сти. Эти фильтры вызываются из меню Filter • Sharpen (Фильтр • Резкость).
>• Выберите команду меню Filter • Sharpen (Фильтр • Рез-
кость). Вы увидите подменю с перечнем фильтров, по-
вышающих резкость (Рис. 4.101).
Все эти фильтры повышают четкость изображения за счет
усиления контраста между соседними пикселами. Фильтры
Sharpen (Резкость) и Sharpen More (Резкосты-) фокусируют
изображение или выделенную область, повышая ее четкость.
Sharpen
Sharpen Edges
Sharpen More
Unsharp Mask...
Рис. 4.101. Фильтры,
повышающие резкость
Разница между ними состоит лишь в том, что фильтр Sharpen More (Резкость-f) дает
более выраженный эффект. Из четырех фильтров первые три - это фильтры прямого
действия: они не требуют дополнительных установок. Фильтры Sharpen Edges. (Рез-
кость по краям) и Unsharp Mask (Контурная резкость) отыскивают в изображении гра-
ницы цветовых переходов и повышают их резкость.
Фильтр Unsharp Mask (Контурная резкость) обычно используется для аккуратной кор-
рекции изображений. Этот фильтр подчеркивает контуры предметов и основан на том
эффекте, что человеческий глаз воспринимает повышение контрастности на границах
областей с различными яркостями как увеличение резкости.
>• Выберите в подменю с перечнем фильтров команду Unsharp Mask (Контурная рез-
кость). На экране появится диалог Unsharp Mask (Контурная резкость) (Рис. 4.102).
Рис. 4.102. Диалог Unsharp Mask (Контурная резкость)
Подготовка графики
175
В основе работы этого фильтра лежит традиционный метод, применяемый в полигра-
фии; он позволяет исправлять некоторые погрешности оригинала - фотографии или
сканированного изображения, а также компенсировать размытие, возникающее во
время печати. Фильтр определяет все пары смежных пикселов, яркость которых отли-
чается на заданную величину, и повышает контраст между ними. Кроме того, можно
задать радиус - количество соседних пикселов, - в пределах которого происходит на-
стройка резкости.
Параметр Amount (Эффект) определяет степень усиления контраста пикселов.
Для изображений с высоким разрешением рекомендуется задавать его значение в пре-
делах от 150% до 200%.
Параметр Radius (Радиус) определяет ширину границы действия фильтра - количество
пикселов вокруг краевых пикселов элементов изображения, которые подвергаются воз-
действию фильтра. Для изображений с высоким разрешением рекомендуется использо-
вать значения в пределах от 1 до 2.
Параметр Threshold (Порог) определяет величину разности яркости, при которой начи-
нает действовать фильтр, т.е. при каком минимальном различии яркостей два пиксела
должны считаться краевыми и подвергаться воздействию фильтра. В изображениях, со-
держащих оттенки телесного цвета, а также в любых областях, где вам хотелось бы из-
бежать появления дополнительных шумов, старайтесь использовать для этого параметра
значения в пределах от 2 до 20. Значение, принятое для параметра Threshold (Порог) по
умолчанию - 0, повышает резкость всех пикселов изображения.
v Перемещайте ползунковый регулятор Amount (Эффект) вправо до тех пор, пока
изображение в окне документа не станет достаточно резким. Мы использовали зна-
чение 200%.
>• Закройте диалог Unsharp Mask (Контурная резкость), нажав кнопку ОК. Изображе-
ние в окне документа примет вид примерно как на Рис. 4.103.
Рис. 4.103. Резкость изображения повышена
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
176
Создание Web-сайтов
Кроме фильтров, повышающих резкость, Adobe Photoshop располагает большим количе-
ством разнообразных фильтров, которые позволяют применять к изображениям различ-
ные специальные эффекты. Например, с их помощью вы можете имитировать манеру
письма художников-импрессионистов, случайным образом перераспределять цветовые
значения пикселов, добавлять или уменьшать шумы, создавать эффект присутствия раз-
личных источников света, произвольно деформировать изображение, а также получать
многие другие интересные визуальные эффекты.
JV&15. Комбинируем фотографии
Adobe Photoshop располагает поистине неисчерпаемыми возможностями в области фо-
томонтажа и комбинирования изображений. Трудно представить себе задачу из этой
области, с которой не справился бы Adobe Photoshop.
Если изображение на откорректированной фотографии Ozero.psd кажется вам слишком
унылым, то его легко можно оживить, добавив, например, птицу, лодку или космиче-
ский корабль. Посмотрим, как выполнить такое комбинирование.
>• Не закрывая файл Ozero.psd, откройте в рабочем окне программы Adobe Photcshop
файл Samolet.jpg (Рис. 4.104), который вы скопировали с компакт-диска, прилагае-
мого к книге.
Рис. 4.104. Фотография из файла файл Samolet.jpg
На этой фотографии мы выделим изображение самолета, находящегося на переднем пла-
не, скопируем его в буфер обмена, а затем вставим в документ Ozero.psd.
Чтобы точнее выполнить выделение, увеличим масштаб отображения до 300%.
>• Выберите инструмент \^\ - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели
инструментов (Tools) и два раза щелкните мышью на изображении самолета на пе-
реднем плане фотографии Samolet.jpg.
Подготовка графики
177
>• Нажмите кнопку [В] в правом верхнем углу окна документа Samolet.jpg, чтобы раз-
вернуть его на весь экран.
> Воспользовавшись полосами прокрутки, поместите изображение в центре экрана
(Рис. 4.105).
Рис. 4.105. Масштаб изображения увеличен
> Переместите панель инструментов (Tools) и палитры, предварительно свернув их,
так чтобы они не перекрывали изображение самолета.
Точнее всего выделить объект такой сложной формы, как самолет, можно, если обвести
его контур с помощью инструмента [1[] - Pen Tool (P) (Инструмент «Перо» (Р)). Чтобы
сделать это как можно правильнее, увеличим резкость изображения фильтром Sharpen
Edges (Резкость по краям).
> Выберите команду меню Filter • Sharpen • Sharpen Edges (Фильтр • Резкость
по краям). Фильтр будет применен, и изображение самолета станет более четким
(Рис. 4.106).
Рис. 4.106. Применен фильтр Sharpen Edges (Резкость по краям)
Теперь можно приступить к выделению.
> Нажмите кнопку Ц ] - Pen Tool (P) (Инструмент «Перо» (Р)) на панели инструментов
(Tools), чтобы выбрать этот инструмент.
Данный инструмент позволяет создавать контур произвольной формы. Контуром назы-
вается любая линия или кривая, построенная в программе Adobe Photoshop с помощью
инструмента [ф]. Для работы с контурами используется специальная палитра Paths
(Контуры), которая содержит список всех созданных контуров. Пока эта палитра пуста
(Рис. 4.107).
178
Создание Web-сайтов
:
а о о
а
Рис. 4.107. Палитра
Paths (Контуры)
Несмотря на то, что контуры отображаются на экране, они не содержат пикселов, так как
являются не растровыми, а векторными изображениями. В векторной графике, в отличие
от растровой, изображение строится не из пикселов, а описывается в виде математиче-
ских объектов - контуров.
Контур состоит из одного или нескольких сегментов.
Начало и конец каждого сегмента определяют специ-
альные точки привязки или узлы (Рис. 4.108). Конту-
ры могут быть прямолинейными и криволинейными,
замкнутыми и открытыми. Криволинейный контур
имеет направляющие, с помощью которых можно на-
страивать его форму. Замкнутый контур не имеет на-
чальной и концевой точек; например, окружность - Рис. 4.108. Сегменты и узлы
это замкнутый контур. Открытый контур имеет кон- (точки привязки)
цевые точки; примером открытого контура является S-образная кривая.
> Выберите команду меню Window • Paths (Окно • Контуры). На экране появится па-
литра Paths (Контуры) (Рис. 4.107). Пока контуры не создавались, эта палитра пуста.
>• Переместите эту палитру так, чтобы она не перекрывала изображение самолета.
Прежде чем начать рисование контура, его следует создать. В этом случае контур сохранит-
ся автоматически.
> Нажмите кнопку j Ш \ - Creates new path (Создать но-
вый контур) в нижней части палитры Paths (Контуры).
В палитре появится и будет выделена строка с миниа-
тюрой и именем созданного контура, предлагаемым по
умолчанию - Path 1 (Контур 1) (Рис. 4.109).
Теперь можно приступить к рисованию контура.
Построение прямолинейных контуров заключается в том,
что концевые точки всех его сегментов, которые называ-
ются точками привязки, опорными точками или узлами,
последовательно обозначаются щелчками мыши. В ре-
зультате Adobe Photoshop соединяет каждую пару точек
прямой линией.
Path 1
а о о
.о.
•—
Si
Ik'О
В
R
aL
Рис. 4.109.
Новый контур создан
> Установите указатель мыши, который примет форму пера с крестиком ф*, у левого
края нижней плоскости ближайшей к зрителю части левого крыла изображения
самолета.
Подготовка графики
179
Рис. 4.110. Первая точка
привязки создана
Рис. 4.111. Первые
три точки контура
> Щелкните мышью в этом месте. На изображении
появится точка привязки (Рис. 4.110). Она останет-
ся выделенной — заполненной темным или светлым
цветом, в зависимости от окружающего фона, - до
тех пор, пока вы не укажете следующую точку.
> Переместите указатель мыши вертикально вверх, к
левому краю верхней плоскости крыла самолета, и
щелкните в этой точке мышью. Обе точки будут
соединены отрезком прямой - первый прямоли-
нейный сегмент будет создан.
Чтобы провести линию вертикальную, горизонталь-
ную или под углом, кратным 45°, удерживайте нажа-
той клавишу ilshiftl.
Когда вы укажете вторую точку привязки, на месте
первой точки останется пустой квадратик вместо за-
полненного. Это означает, что данная точка больше
не является выделенной.
> Переместите указатель мыши в следующую крайнюю точку верхней плоскости левого
крыла самолета и щелчком мыши создайте следующую точку привязки (Рис. 4.111).
> Продолжайте, щелкая мышью, размещать последующие точки привязки, двигаясь
вокруг изображения самолета по часовой стрелке.
Чтобы точнее передать детали контура самолета, размещайте точки привязки на каждом
изгибе его границы.
Если вы по ошибке поставите точку привязки не в том месте, где хотелось бы, то уда-
лить ее можно, щелкнув на ней мышью и нажав клавишу Р**"*!. Но точки можно и не
удалять. В дальнейшем мы увидим, как легко можно изменить их положение в процессе
редактирования контура.
Расставляя описанным выше способом точки привязки и создавая, таким образом, пря-
молинейные сегменты, вы должны оконтурить верхнюю часть, хвост и нижнюю хвосто-
вую часть фюзеляжа самолета и подойти к левому колесу шасси (правому по отношению
к зрителю) (Рис. 4.112). Колесо следует нарисовать как криволинейный контур. Криво-
линейные контуры создаются путем перемещения направляющих линий, которые опре-
деляют наклон и длину кривых. Сделайте это следующим образом:
Рис. 4.112. Часть контура из прямолинейных сегментов
180 Создание Web-сайтов
v Продолжая построение контура, установите указатель мыши в крайней верхней точке
окружности левого колеса и щелкните мышью, чтобы создать точку привязки.
> Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши, пере-
местите указатель мыши вправо на расстояние, примерно равное радиусу колеса.
>• Отпустите левую кнопку мыши. В этой точке появится направляющая линия.
Нажав клавишу {s™J, вы можете ограничить наклон направляющих линий углами, крат-
ными 45°.
> Переместите указатель мыши в нижнюю точку окружности левого колеса, лежащую
на противоположном конце диаметра.
> Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, переместите указатель мыши влево. Появятся две
направляющие линии, длина и наклон которых определяют длину и наклон крк воли-
нейного сегмента.
>• Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон направляю-
щих, добейтесь, чтобы дуга обогнула правую, по отношению к зрителю, часть колеса.
> Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо справа,
зафиксируется (Рис. 4.113).
Рис. 4.113. Первый криволинейный сегмент
> Чтобы закончить построение огибающей, установите указатель мыши в верхней час-
ти окружности колеса.
> Нажмите и, не отпуская левую кнопку мыши, переместите указатель мыши вправо.
Появятся две направляющие линии.
>• Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон направляю-
щих, добейтесь, чтобы дуга обогнула левую, по отношению к зрителю, часть колеса.
>- Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо слева,
зафиксируется (Рис. 4.114).
Точки привязки криволинейных сегментов, имеющие направляющие, называются глад-
кими, в отличие от угловых точек прямолинейных сегментов, которые не имеют направ-
ляющих. Чтобы продолжать построение прямолинейных сегментов, следует преобразо-
вать последнюю гладкую точку с направляющими в угловую.
Подготовка графики
181
Рис. 4.114. Огибающая вокруг колеса создана
> Нажав и удерживая клавишу Ц Al t I, щелкните мышью на последней точке привязки.
Эта точка будет преобразована в угловую. Ее правая направляющая исчезнет.
>• Продолжайте рисование контура, щелчками мыши создавая прямолинейные сегмен-
ты, пока не дойдете до второго колеса.
> Создайте вокруг второго колеса криволинейные огибающие, как это было описано
выше, после чего продолжайте рисовать прямолинейные сегменты, пока не дойдете
до той точки, с которой было начато рисование контура.
>• Для завершения создания замкнутого контура установите указатель мыши на первой
созданной вами точке привязки. Рядом с указателем мыши появится небольшой кру-
жок, предупреждающий вас о том, что следующий щелчок мыши замкнет контур.
>- Щелкните мышью в этом месте. Контур замкнется (Рис. 4.115).
Рис. 4.115. Построение контура завершено
Для завершения рисования не замкнутого, а открытого контура следует щелкнуть мы-
шью на значке инструмента [Й~| на панели инструментов (Tools).
Если вас не устраивает форма получившегося контура, то ее можно отредактировать.
Инструменты для построения контуров, доступные в панели инструментов (Tools),
позволяют легко редактировать любые контуры. Вы можете перемещать точки привязки
и направляющие линии, удалять и добавлять новые точки привязки, а также заменять
гладкие точки привязки угловыми и наоборот.
Чтобы удалить или добавить новую точку привязки, воспользуйтесь, соответственно,
инструментами | ф~| и | 6*|. Выбрать эти инструменты в панели инструментов (Tools)
можно из дополнительной панели инструментов, нажав и удерживая кнопку мыши на
кнопке | ф.|. Для добавления точки привязки, выбрав инструмент | ф+|, установите указа-
182
Создание Web-сайтов
тель мыши на контуре в нужном месте. При этом рядом с указателем мыши появится
знак +. Щелкните мышью в этой точке.
Чтобы удалить точку привязки, выберите инструмент |ф~[ и установите указатель мыши
в той точке привязки, которую вы хотите удалить. При этом рядом с указателем мыши
появится знак -. Щелкните мышью. Точка будет удалена, а форма кривой изменится в
соответствии с оставшимися точками привязки.
Для перемещения всего контура используйте инструмент | >tj. Вы можете изменять форму
контура, перемещая его сегменты, точки привязки и направляющие линии инструментом
[k], который можно выбрать на дополнительной панели, нажав кнопку | \\.
Изменить гладкую точку на угловую и наоборот можно с помощью инструмента [Т"~|.
Для изменения гладкой точки на угловую без направляющих линий достаточно просто
щелкнуть инструментом [ F] на нужной точке. Если вы хотите заменить гладкую точку
угловой с направляющими линиями, нажмите кнопку мыши и слегка сместите указатель
мыши, чтобы получить направляющие линии; после этого переместите одну из направ-
ляющих точек - концевую точку направляющей линии. Направляющие линии станут
независимыми.
После того, как редактирование контура будет закончено, можно создать из него грани-
цу выделенной области.
>• Нажмите кнопку [ТН - Loads path as a selection (Загрузить контур, как выделенную
область) в нижней части палитры Paths (Контуры). Вокруг изображения самолета поя-
вится бегущая рамка выделения, а сам контур будет выключен и исчезнет с экрана.
Уменьшим масштаб отображения документа до 100%.
> Щелчком мыши выберите инструмент [^] - Zoom Tool (Z) (Инструмент «Масштаб»
(Z)) на панели инструментов (Tools) и два раза щелкните мышью на изображении
при нажатой клавише I А11 I. Масштаб отображения документа уменьшится.
> Выберите команду меню File • Save As (Файл • Сохранить как) и сохраните фото-
графию в формате Adobe Photoshop - .psd. Это позволит в дальнейшем, при необхо-
димости, редактировать контур и использовать фотографию в следующих опытах.
Теперь скопируем выделенную область в буфер обмена, чтобы затем вставить ее в доку-
мент Ozero.psd.
> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область
будет скопирована в буфер обмена.
>-. Нажмите кнопку \в\ в правом верхнем углу окна документа, чтобы вернуться к его
исходному размеру.
Файл Samolet.psd можно закрыть.
> Нажмите кнопку [х] в правом верхнем углу окна документа, чтобы закрыть его.
В рабочем окне программы снова станет активным документ Ozero.psd. Вставим в него
изображение из буфера обмена.
> Выберите команду меню Edit • Paste (Правка • Вставить). В центре фотографии
появится изображение самолета, вставленное из буфера обмена (Рис. 4.116).
Подготовка графики
183
Рис. 4.116. Изображение самолета вставлено из буфера обмена
Вставить выделенную область из другого документа можно также, переместив ее инст-
рументом [К*] - Move Tool (V) (Инструмент «Перемещение» (V)).
Обратите внимание, что в палитре Layers (Слои) появился и стал активным новый слой
Layer 1 (Слой 1), на который помещено изображение самолета. Этот слой расположен
непосредственно на слое Background (Фон), который перед этим был активным. При
вставке из буфера обмена или при перемещении выделенной области из другого доку-
мента вставляемое изображение всегда помещается на новый слой, и этот слой распола-
гается над тем, который был активным.
При перемещении или вклеивании области со сглаженной границей в изображении вме-
сте с выделенной областью появляются окружающие ее посторонние пикселы. Это при-
водит к образованию цветной каймы или ореола на границе выделенной области. Такой
ореол особенно хорошо может быть виден вокруг фюзеляжа самолета. Но этот нежела-
тельный эффект можно минимизировать.
Defrinqe
у Выберите команду меню Layer • Matting • Defringe
(Слой • Обработка краев • Устранить кайму). На эк-
ране появится диалог Defringe (Устранить кайму)
(Рис. 4.117).
Данная команда перекрашивает все «посторонние»
пикселы в цвета соседних пикселов, не содержащих
примесей фонового цвета. В поле ввода Width (Шири-
на) следует указать расстояние, в пределах которого программа будет осуществлять по-
иск пикселов для замены цвета. В большинстве случаев для эффективной работы команды
достаточно задать значение, равное 1 или 2 пикселам. Оставим предлагаемое по умолча-
нию значение 1 без изменения.
>• Нажав кнопку ОК, закройте диалог Defringe (Устранить кайму). Команда будет при-
менена, и ореол вокруг объекта исчезнет.
Рис. 4.117. Диалог Defringe
(Устранить кайму)
184
Создание Web-сайтов
Если вклеенное изображение было создано на черном фоне, то черную кайму вокруг его
границ можно удалить командой меню Layer • Matting • Remove Black Matte (Слой •
Обработка краев • Удалить черный ореол), а если на белом фоне, то белая кайма удаля-
ется командой меню Layer • Matting • Remove White Matte (Слой • Обработка краев •
Удалить белый ореол).
Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе».
v Выберите команду меню Edit • Transform • Scale (Правка • Преобразование • Мас-
штаб). Вокруг изображения самолета появится прямоугольная рамка с маркерами в
углах и серединах сторон, а на панели параметров (Options Bar) - элементы управле-
ния преобразованием объекта (Рис. 4.118).
X! I 229-5 рж |
И: | 100,0% 11 А | 0,0 1° | £> Н; | 0,0 \"
О
Рис. 4.118. Панель параметров команды Transform (Преобразование)
Эти элементы управления дают вам возможность выполнить преобразование выделен-
ной области или слоя на основе точных числовых значений.
> Нажмите кнопку Щ - Maintain aspect ratio (Сохранить пропорции) на панели пара-
метров (Options Bar).
>• В поле ввода W (Ширина) на панели параметров (Options Bar) введите 50 процентов.
Такое же значение автоматически появится в поле ввода Н (Высота), так как включен
режим сохранения пропорций.
>- Нажмите кнопку [Vj на панели параметров (Options Bar), чтобы закончить ввод па-
раметров. Размер самолета на фотографии уменьшится в два раза.
Теперь переместим самолет туда, где он должен находиться.
>• Выберите инструмент \**\ - Move Tool (V) (Инструмент «Перемещение» (V)) на па-
нели инструментов (Tools) и переместите изображение самолета в правый верхний
угол фотографии (Рис. 4.119).
**** f .*•• " \ * K*\'<'jC'm'c1'' • -•• ""'"
Рис. 4.119. Изображение самолета перемещено
Подготовка графики 185
Теперь, когда редактирование и комбинирование фотографий почти закончено, следует
выполнить сведение слоев, т.е. совместить имеющиеся в изображении слои в один ос-
новной слой Background (Фон), чтобы уменьшить таким образом размер файла.
Как правило, сведение слоев следует выполнять только тогда, когда вы уверены в том,
что компоновка изображения завершена, и вам не придется редактировать содержимое
отдельных слоев.
> Убедитесь, что все слои являются видимыми. Невидимые слои при сведении будут
удалены.
v Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду Flatten Image (Выполнить сведение). Слои будут совмеще-
ны. В палитре Layers (Слои) останется только один слой - Background (Фон).
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Способом, подобным описанному, вы можете комбинировать любые фотографии, созда-
вая яркие выразительные эффекты.
J№l6. Уменьшаем и обрезаем фото
При подготовке изображений для Web часто возникает необходимость обрезать их, чтобы
выделить нужные части изображения и отсечь ненужные. Кроме чисто художественных
соображений, такая обрезка или, как ее еще называют, кадрирование, необходима для
уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и
тем быстрее оно загружается на Web-страницу.
Посмотрим, как выполняется кадрирование практически, удалив узкую темную полосу у
нижнего края фотографии, которую не удалось в достаточной степени осветлить.
Кадрирование выполняется специальным инструментом \Ц\ - Crop Tool (С)
(Инструмент «Рамка» (С)).
v Нажмите кнопку \%\ - Crop Tool (С) (Инструмент «Рамка» (С)) на панели инст-
рументов (Tools), чтобы выбрать этот инструмент.
> Установите указатель мыши, который примет форму "Щ., в левом верхнем углу
изображения.
>• Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, переместите указатель мыши к нижней части пра-
вого края фотографии так, чтобы появившаяся пунктирная рамка выделения не вклю-
чала узкую темную полосу у нижней границы изображения.
>• Отпустите левую кнопку мыши. Рамка зафиксируется, а в ее углах и серединах сторон
появятся квадратные маркеры. Область изображения за пределами кадрирующей рам-
ки будет затемнена, указывая, таким образом, отсекаемую часть фотографии.
С помощью этих маркеров можно выполнить настройку и поворот границы кадра.
Для перемещения кадрирующей рамки достаточно установить указатель мыши внут-
ри выделенной области и перетащить ее в нужное место. Чтобы изменить размер
выделенной области, следует переместить один из угловых маркеров. Если при пе-
186
Создание Web-сайтов
ремещении удерживать нажатой клавишу llShiftl. то будут сохранены пропорции об-
ласти. Для поворота кадра следует установить указатель мыши, который примет
форму изогнутой стрелки, за пределами области выделения и, перемещая мышь, до-
биться нужного положения рамки. Чтобы отменить кадрирование, достаточно на-
жать клавишу liEsc].
v Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамка вклю-
чала все изображение, кроме узкой темной полосы у нижней границы фотографии
(Рис. 4.120).
г- Pixel Dtnenslons: <ЮО,ЗК ————
Wjdth: |460
tletfit: 1297
Width: [16,23
Height: 110,48
Resolution: [72
|| Pixels
||pl «*
Hem
|| cm
||p>j*/inch
П Constrain Proportions
0 Resample Image: ( Ва йс
П
в
1:1
l-l
LI
L-l
Рис. 4.120. Кадрирующая рамка указывает границы обрезки
> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавиш)1 ji
Фотография будет обрезана по установленной границе.
Но даже после обрезки фотография достаточно
велика для Web-страницы. При разрешении эк-
рана 800x600 пикселов (а с таким разрешением
по статистике в настоящее время работает боль-
шинство пользователей Web) фотография зани-
мает значительное место на экране. Кроме того,
файл с изображением такого размера будет дос-
таточно велик по объему и будет долго загру-
жаться. Потому уменьшим размер изображения,
что, в свою очередь, уменьшит объем файла.
>• Выберите команду меню Image • Image Size
(Изображение • Размер изображения). На
экране появится диалог Image Size (Размер
изображения) (Рис. 4.121).
Puc. 4.121. Диалог Image Size
(Размер изображения)
Подготовка графики 187
В верхней части диалога, в группе элементов управления 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%.
188
Создание Web-сайтов
>• Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость). Резкость
изображения усилится.
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Так как при изменении размеров изображения снижается его качество за счет удаления
избыточной информации, то, по возможности, следует избегать этой операции. Если вы
сканируете изображение, то желательно уже на этом этапе определить его размер и вы-
полнить сканирование с таким разрешением, которое обеспечит наилучшее качество
изображения.
Фпмт JV&17. Сохраняем фото для Web
Теперь, когда редактирование и комбинирование фотографий закончены, получившееся
изображение следует оптимизировать и сохранить для Web.
> Выберите команду меню File • Save for Web (Файл • Сохранить для Web). На экране
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122).
Save Foi Web - Poweied By ImageReady
Рис. 4.122. Диалог Save For Web (Сохранить для Web)
Этот диалог совмещает в себе уже знакомые вам по Adobe ImageReady элементы: окно
просмотра, позволяющее выбирать различные режимы просмотра оптимизированного
изображения; элементы управления оптимизацией - справа вверху и цветовую таблицу
(Color Table) - справа внизу, используемую при оптимизации изображений в форматах
GIF и PNG-8. Кроме того, здесь же присутствует вкладка Image Size (Размер изображе-
ния), элементы управления которой позволяют изменить размер изображения так же,
Подготовка графики 189
как и элементы управления диалога Image Size (Размер изображения), рассмотренного в
предыдущем опыте.
В открывающемся списке со всплывающей подсказкой Zoom Level (Уровень масштаби-
рования) в левом нижнем углу диалога вы можете выбрать масштаб для отображения в
окне просмотра диалога. Масштаб можно изменить также с помощью инструмента | О>| -
Zoom Tool (Z) (Инструмент «Масштаб» (Z)), который включается кнопкой в левом верх-
нем углу диалога. Включенный по умолчанию инструмент | <^| - Hand Tool (H) (Инст-
румент «Рука» (Н)) позволяет перемещать изображение в окне просмотра, если его раз-
меры превышают размеры окна. С помощью кнопки Q - Select Browser Menu (Меню
выбора браузера) в нижней части диалога вы можете открыть меню, из которого выбрать
браузер для просмотра оптимизированного изображения. Можно также нажать кнопку
слева от [»]. чтобы загрузить программу просмотра, определенную по умолчанию,
в которой автоматически откроется оптимизируемое изображение.
Специальное поле под окном просмотра диалога информирует о цветовых координатах
пиксела изображения или цветовой таблицы (Color Table), на котором установлен указа-
тель мыши. Эти координаты указываются как RGB-составляющие в десятичном формате.
Кнопка 0 - 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 (Прогрессивный).
190
Создание 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.
Подготовка графики
191
JV&18. Прозрачные изображения
В одном из предыдущих опытов, в котором «оживлялась» кнопка, мы научились созда-
вать изображение на прозрачном фоне. При этом мы рисовали кнопку «с нуля» и могли
сразу, создав новый документ, начать работать с прозрачным фоном. Теперь рассмотрим
случай, когда требуется сделать прозрачным фон уже готового рисунка.
Формат GIF хотя и не сохраняет прозрачность, но позволяет присвоить в изображении
атрибут прозрачности выделенной области; все пикселы в пределах этой области в брау-
зере показываться не будут, т.е. станут невидимыми. Для примера создания изображения
с прозрачным фоном воспользуемся фотографией из файла Samolet.psd.
>• Откройте файл Samolet.psd, который вы сохранили в опыте о комбинировании фо-
тографий.
Посмотрим, как создать прозрачность для той части изображения, которая находится за
пределами самолета на переднем плане фотографии так, чтобы на Web-странице был
виден только самолет, а все, что его окружает, стало невидимым.
Сначала нужно выделить изображение самолета, преобразовав контур, который мы на-
рисовали вокруг самолета, в выделение. Этот контур автоматически сохранен в палитре
Paths (Контуры).
>• Щелкните мышью на ярлыке Paths (Контуры) в третьем сверху окне палитр, чтобы
открыть эту палитру.
>• Щелчком мыши на имени контура Path 1
(Контур 1) в палитре Paths (Контуры) выде-
лите его. В окне документа вокруг изображе-
ния самолета появится контур.
Создадим выделенную область, ограниченную
контуром.
> Нажмите кнопку 0 в правом верхнем углу
палитры Paths (Контуры) и в появившемся
меню выберите команду Make selection (Соз-
дать выделенную область). На экране появит-
ся диалог Make selection (Создать выделен-
ную область) (Рис. 4.123).
Make Selection
- Rendering —
Eeather Radius: I
<*
Cancel [
- Operation
© yew Selection
О &И to Sanction
О Sub tract torn Selection
О Intersect with Setectton
Рис. 4.123. Диалог Make selection
(Создать выделенную область)
В поле ввода Feather Radius (Радиус растушев-
ки) следует указать величину радиуса растушевки выделения в пикселах. Растушевка
делает края выделенной области более расплывчатыми благодаря созданию «зоны пере-
хода» между пикселами выделенной области и окружающими пикселами. В этой зоне
происходит постепенное смешивание цветов. В результате растушевки может произойти
потеря четкости изображения вблизи границы выделенной области. По умолчанию для
этого параметра предлагается значение 0 (ноль) пикселов. Оставим его без изменения.
Обратите внимание, что по умолчанию установлен флажок Anti-aliased (Сглаживание).
Сглаживание границ происходит за счет частичного наполнения цветом граничных пик-
селов и делает границы выделенных областей более плавными, поэтому оно особенно
эффективно при создании сложных изображений из отдельных фрагментов с использо-
192
Создание Web-сайтов
ванием операций вырезания и вклеивания. При этом не происходит какой-либо потери
качества изображения, поскольку изменения затрагивают только граничные пикселы
выделенных областей.
>• Нажав кнопку ОК, «закройте диалог Make selection (Создать выделенную область).
Изображение самолета будет выделено движущейся пунктирной границей. Автома-
тически будет сброшено выделение контура.
Удалим все изображение за пределами выделенной области. Для этого выделение следу-
ет предварительно инвертировать или обратить.
> Выберите команду меню Select • Inverse (Выделение • Обратить выделение).
Теперь все изображение за пределами самолета стало выделенным, а изображение само-
лета - невыделенным. Удалим выделенную область.
> Нажмите клавишу |[Dalelal. Вся выделенная область будет очищена и окрашена и белый
цвет фона (Рис. 4.124) - тот цвет, на котором создавалось изображение.
Рис. 4.124. Выделенная область очищена
Таким образом, ту область, которая должна стать прозрачной, мы перекрасили в белый
цвет фона. Очистка нажатием клавиши I0""""! - это самый простой способ закрашива-
ния цветом фона, который применим только к выделенной области. Для закраюшвания
фоновым цветом невыделенных фрагментов изображения можно использовать инст-
рументы |£?) - Magic Erazer Tool (Е) (Инструмент «Волшебный ластик» (Е)) и |§?,| -
Background Erazer Tool (E) (Инструмент «Фоновый ластик» (Е)).
Теперь можно создать GIF-файл так, чтобы выделенный белый фон изображения стал
прозрачным.
>• Выберите команду меню Help • Export Transparent Image (Справка • Экспортиро-
1 вать прозрачное изображение). На экране появится первый диалог Export
Transparent Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 4.125).
Мастером называется специальная программа, которая с помощью ряда последователь-
ных диалогов позволяет выполнить некоторую задачу. В первом диалоге мастер предла-
гает указать метод создания прозрачности.
Подготовка графики
193
Export Transparent Image Wizard
This wizard will help you to export an image 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 to select the area to be made transparent
I 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 image be used for?
©Erint
OQnline
Cancel Back IZEe«tZj|
Puc. 4.126. Второй диалог Export Transparent Image Wizard
(Мастер экспорта прозрачных изображений)
7-1210
194
Создание Web-сайтов
> Установите переключатель Online (Web-страница) и нажмите кнопку Next (Далее).
Появится третий диалог Export Transparent Image Wizard (Мастер экспорта прозрач-
ных изображений) (Рис. 4.127).
Export Transparent Imaqe Wizard
Which image format would you like?
0fiF
OPNG
- Description
GIF format only supports 8 bit color but is widely accepted in browsers.
Puc. 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 6F format only supports 8 bit images. The next step will be to
reduce the number of colors in your image by using the Indexed
Color dialog.
Cancel Back
Puc. 4.128. Четвертый диалог Export Transparent Image Wizard
(Мастер экспорта прозрачных изображений)
Нажмите кнопку Next (Далее). На экране появится диалог Indexed Color (Индексиро-
ванные цвета) (Рис. 4.129).
Подготовка графики
195
" Palette: | Web
tolors: 217
B r a * | None
И Transparency
- Options ——————
Matte: | None
Either: | aflusicn g
Id
1-1
В
fimount: 175 | %
П Preserve Exact Colors
Рис. 4.129. Диалог Indexed Color
(Индексированные цвета)
Изображения с индексированными цветами используют цветовые таблицы, содержа-
щие 256 цветов. В процессе преобразования Adobe Photoshop формирует таблицу цве-
тов, использованных в документе. RGB-цвета, не вошедшие в таблицу, заменяются
ближайшими оттенками или имитируются с помощью различных сочетаний доступ-
ных цветов. Использование индексированной цветовой таблицы позволяет уменьшить
объем файла при сохранении необходимого качества изображения.
Для преобразования изображения вы можете выбрать из открывающегося списка
Palette (Палитра) одну из предложенных палитр, которые отличаются способом
формирования цветов. Особенности каждой из палитр описаны в опыте
«Оптимизируем и сохраняем графику». По умолчанию предлагается палитра Web.
При выборе некоторых палитр будет доступно поле ввода Colors (Цвета), в котором
можно указать количество отображаемых цветов - от 2 до 256.
Параметр Forced (Дополнительно), который доступен не для всех палитр, позволяет до-
бавить в цветовую таблицу некоторые дополнительные цвета: чистый белый и чистый
черный (Black and White); первичные (Primaries) - красный, зеленый синий, голубой,
пурпурный, желтый, черный, белый; Web-цвета (Web); цвета, определенные пользовате-
лем (Custom).
Установка флажка Transparency (Прозрачность) предохраняет прозрачные области изо-
бражения в процессе преобразования. Если этот флажок сбросить, то прозрачные облас-
ти будут заполнены цветом, определенным в открывающемся списке Matte (Подложка),
или белым цветом, если для параметра Matte (Подложка) выбрано None (Нет).
Для имитации цветов, не вошедших в цветовую таблицу, в открывающемся списке
Dither (Смешивание) можно выбрать один из способов смешивания. Возможные вариан-
ты описаны в опыте «Оптимизируем и сохраняем графику».
В поле ввода Amount (Эффект) указывается числовое значение параметра Dither (Сме-
шивание) в процентах. Высокие значения смешивают больше цветов, но и могут увели-
чить размер файла.
Установка флажка Preserve Exact Color (Сохранить точные цвета) предохраняет цвета
таблицы от смешивания.
>• Закройте диалог Indexed Color (Индексированные цвета), нажав кнопку ОК. Изобра-
жение будет преобразовано в режим индексированных цветов с параметрами, пред-
ложенными по умолчанию. Появится диалог Save As (Сохранить как).
7*
196
Создание Web-сайтов
Откройте в этом диалоге папку Web, чтобы
сохранить в ней файл.
В поле ввода Имя файла (File name) вместо
предлагаемого по умолчанию имени, укажите
имя сохраняемого файла - Samolet.
Нажмите кнопку Сохранить (Save). Диалог
Save As (Сохранить как) закроется. На экране
появится диалог GIF Options (Параметры GIF)
(Рис. 4.130).
|GIF Options
Row Order —
© Normal
О Interlaced
Cancel
Рис. 4.130. Диалог GIF Options
(Параметры GIF)
> Установите переключатель 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.
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:
•ccenterximg src=Samolet.gif border=lx/center>
> Откройте в браузере файл geoton.html.
Вы увидите, что в конце страницы на синем фоне появился рисунок с изображением
самолета. Причем белый фон этого рисунка в браузере стал таким прозрачным, что
Подготовка графики
197
сквозь него виден синий фон Web-страницы. Мы умышленно включили в HTML-код
атрибут border=l, чтобы видеть в браузере границы фотографии.
Как видите, описанный способ экспорта прозрачного изображения достаточно прост.
Сложность состоит только в выборе области, которая должна стать прозрачной. Мы вос-
пользовались ранее нарисованным контуром, из которого создали выделенную область,
после чего инвертировали ее. Рассмотрим теперь еще один способ выделения областей
сложной формы - посредством выбора диапазона цветов.
>• Не закрывая, сверните окно браузера, нажав кнопку [Г] в правом верхнем его углу,
чтобы вернуться к программе Adobe Photoshop. Программу Блокнот (Notepad) мож-
но закрыть.
> Отмените выделение, выбрав команду меню Select • Deselect (Выделение • Отме-
нить выделение).
Начнем с выделения изображения самолета, но воспользуемся для этого не созданным
ранее контуром, а иным способом.
>• Выберите команду меню Select • Color
Range (Выделение • Цветовой диапазон).
На экране появится диалог Color Range
(Цветовой диапазон) (Рис. 4.132).
Этот диалог используется для выделения в пре-
делах некоторой области или всего изображения
пикселов заданного цвета. Для выделения нуж-
ных оттенков можно выбрать цвет из предла-
гаемого в открывающемся списке Select (Выде-
ление) диапазона цветов или сформировать вы-
деленную область на основе «проб» цвета, взя-
тых пипеткой непосредственно на изображении
(Sampled Colors).
Select: \S Sampled Colors [д]
Euzzhess: [Я |
Selection Preview: |None
Рис. 4.132. Диалог Color Range
(Цветовой диапазон)
При установленном по умолчанию переключателе Selection (Выделение) вы сможете
наблюдать за формированием выделенной области. Если же установить переключатель
Image (Изображение), то в окне просмотра диалога будет отображаться все изображе-
ние. Такой режим удобен, например, при сильном увеличении, когда область, в которой
вы хотите взять «пробу» цвета, не видна в окне документа.
> Чтобы взять «пробу» цвета, установите указатель мыши, который примет форму пи-
петки ^, на белом цвете фона изображения в окне документа и щелкните мышью.
«Проба» будет взята, и таким образом будет отмечена область с белым цветом фона,
которая должна быть выделена.
В окне просмотра диалога Color Range (Цветовой диапазон) черный цвет фона изменит-
ся на белый, так как в этом диалоге область, которая должна стать выделенной, отмеча-
ется белым цветом, а не выделенная - черным, и появится черно-белое изображение са-
молета. В окне документа выделенная область будет создана после закрытия диалога
нажатием кнопки ОК.
198
Создание Web-сайтов
> Установите флажок Invert (Обратить выделение). Теперь в окне просмотра диалога
черным цветом окрасится фон, а белым, соответствующим выделенной области, -
изображение самолета.
Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать в диалоге
Color Range (Цветовой диапазон) инструмент \jQ и щелкнуть на нужном цвете в окне
документа или в поле просмотра диалога.
Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в диалоге
инструмент| ^| и щелкнуть мышью на исключаемых цветах.
Для временной активизации инструмента yQ нужно нажать клавишу liShiftl. а инструмента
| ^ | - клавишу I Alt I.
Вы можете изменить диапазон выделяемых цветов с помощью ползункового регулятора
Fuzziness (Разброс).
> Перемещайте ползунковый регулятор Fuzziness (Разброс) влево и наблюдайте в окне
просмотра диалога Color Range (Цветовой диапазон), как при этом сужается диапа-
зон выделенных цветов и заливается белым цветом контур самолета. Установите зна-
чение этого параметра 0 (ноль).
В открывающемся списке Selection Preview (Предварительный просмотр выделения)
можно выбрать один из вариантов просмотра выделенной области в окне документа:
None (He задан) — исключает возможность просмотра;
Grayscale (Черно-белое) - выделенная область отображается черным цветом, а невыде-
ленная - белым;
Black Matte (Черная подложка) - выделенная область отображается в цвете на черном фоне;
White Matte (Белая подложка) - выделенная область отображается в цвете на белом фоне;
Quick Mask (Быстрая маска) - выделенная область отображается с использованием теку-
щих установок режима «Быстрая маска». Данный режим обеспечивает возможность одно-
временного просмотра маски и изображения. Подробнее об этом мы поговорим нижи.
> Просмотрите выделенную область в окне документа в различных режимах, выби-
рая их из открывающегося списка Selection Preview (Предварительный просмотр
выделения).
> Закройте диалог Color Range (Цветовой диапазон), нажав кнопку ОК. Изображение
самолета в окне документа будет выделено.
Но в пределах этого выделения вы увидите также множество мелких областей выделе-
ния, окрашенных в белый цвет - такой же, как и цвет фона. И выделение этих мелких
областей теперь следует исключить. Удобнее, точнее и быстрее всего это можно сделать
в режиме «Быстрая маска» (Quick Mask).
Маски в программе Adobe Photoshop позволяют изолировать и защищать от модифи-
кации отдельные фрагменты изображения в процессе общего изменения цветов, при-
менения фильтров и других эффектов. Понятие маскирования тесно связано с выделе-
нием областей. Когда вы выделяете в изображении некоторую область, оставшаяся
Подготовка графики
199
часть изображения становится недоступной для редактирования - маскируется. При не-
обходимости можно создавать полупрозрачные маски, которые обеспечивают частичное
применение эффектов преобразований к определенным участкам изображения. Режим
«Быстрая маска» обеспечивает возможность одновременного просмотра маски и изо-
бражения и редактирования маски.
> Нажмите кнопку [•[ - 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) автоматиче-
ски устанавливаются белый цвет переднего плана и черный цвет фона.
> Щелкните мышью на значке *\ - Switch Foreground and Background Colors (X) (Пе-
реключатель цветов переднего плана и фона) на панели инструментов (Tools), чтобы
поменять местами цвета переднего плана и фона. Теперь цветом переднего плана бу-
дет белый.
• Нажмите кнопку Щ - Paintbrush Tool (В) (Инструмент «Кисть» (В)) на панели ин-
струментов (Tools), чтобы выбрать этот инструмент.
>• Откройте палитру Brush (Кисть) на панели параметров (Options Bar) и выберите
жесткую кисть малого диаметра - Hard Round 3 Pixels (Жесткая круглая 3 пиксела).
>• Переместите указатель мыши, который примет форму окружности, в окно документа,
на незащищенную область с изображением самолета и аккуратно, чтобы не выйти за
границы этой области, закрасьте белым цветом все красные пятна, удалив таким об-
разом мелкие области выделения, защищенные от изменения. Для обработки краевых
участков используйте кисть меньшего диаметра.
Заметьте, что при закрашивании белым цветом в этом режиме само изображение само-
лета не изменяется, а только удаляются красные пятна, соответствующие участкам, за-
щищенным от изменения.
Если вы где-то допустите ошибку и выйдете за пределы контура самолета, отмените по-
следнее действие командой меню Edit • Undo (Правка • Отменить) или воспользуйтесь
палитрой History (События).
При увеличенном масштабе вокруг изображения самолета должен быть хорошо виден
белый ореол, обусловленный тем, что применялось сглаживание границы выделения.
Этот ореол, практически незаметный на белом фоне, будет хорошо виден на другом
цветном фоне. Единственный способ борьбы с таким ореолом - выполнение сглажива-
ния на том же фоне, на котором будет находиться изображение, и указание цвета гра-
ничных пикселов, близкого к этому фону.
Следующее, что нужно сделать - это скрыть ореол.
>• Выберите на панели инструментов (Tools) инструмент \W} - Pencil Tool (В) (Инст-
румент «Карандаш» (В)), аккуратно закрасьте теперь уже черным цветом белый
ореол вокруг шасси самолета, крыльев, фюзеляжа, хвоста - везде, где этот ореол
хорошо виден. Это расширит маскирующую область и скроет ореол.
Когда редактирование в режиме «Быстрая маска» будет закончено, переключитесь в
стандартный режим.
>• Нажмите кнопку E3J - 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 (Каналы) позволяет также управлять ото-
бражением отдельных каналов на экране с помощью значка ^, делая их видимыми или
невидимыми.
>• Просмотрите, как выглядит каждый канал, включая и выключая его отображение с
помощью значка ^.
В каждом документе вы можете создавать из выделенных областей дополнительные ка-
налы, которые называются альфа-каналами и используются для хранения масок, позво-
ляющих изолировать и защитить от модификации в процессе редактирования отдельные
фрагменты изображения. Каждое изображение может содержать до 24-х каналов, вклю-
чая все цветовые каналы. Вы можете добавлять и
удалять альфа-каналы, а также задавать для каждого
из них имя, цвет, режим маскирования и непрозрач-
ность. Все новые каналы получают те же размеры и
разрешение, что и исходное изображение. Сохранив
выделенную область в альфа-канале, вы можете много-
кратно использовать ее в любом документе.
Создадим из выделенной области альфа-канал.
> Нажмите кнопку 1 О 1 - Save selection as channel
(Сохранить выделение как канал) в нижней части
палитры Channels (Каналы). В палитре появится
новый канал - Alpha 1 (Альфа 1) (Рис. 4.135).
Рис. 4.135. Альфа-канал создан
Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение объекта в окне документа.
202
Создание Web-сайтов
Созданный альфа-канат можно просмотреть.
v Щелкните мышью в палитре Channels (Каналы) на крайнем левом поле - Indicates
channel visibility (Индикация видимости канала), слева от миниатюры канала
Alpha 1, чтобы включить отображение альфа-канала. В окне документа изображение
будет представлено так же, как и в режиме «Быстрая маска», с помощью полупро-
зрачного красного цвета.
> Щелкните мышью в палитре Channels (Каналы) на значке §5 слева от миниатюры
совмещенного канала 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 (Инвертировать), то выделенной будет за-
щищенная область альфа-канала.
Подготовка графики
203
г- Source — — — — ^ — — ^
Document: | Samdet.psd
Channel: f Alpha 1
П Insert
r- Operation
0 №w selection
0 fidd to Selection
0 Subtract «on Selection
О Jnlsrsect with Selection
R
W
Рис. 4.137. Диалог Load Selection (Загрузить выделение)
> Закройте диалог Load Selection (Загрузить выделение), нажав кнопку ОК. Изображе-
ние самолета в окне документа вновь будет выделено.
Прежде чем повторно экспортировать изображение в формат GIF89a, проверим, как бу-
дет выглядеть наш рисунок на Web-странице с синим цветом фона. Для этого скопируем
в буфер обмена выделенную область с изображением самолета, создадим новый слой,
зальем его синим цветом и вставим из буфера обмена выделенную область.
> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область
будет скопирована в буфер обмена.
> Щелкните мышью на ярлыке Layers (Слои), чтобы показать эту палитру.
>• Нажмите кнопку I В | - 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, перетащив их миниатюры на кнопку I S I - Delete
current layer (Удалить активный слой) в нижней части палитры Layers (Слои).
Активным станет слой Background (Фон).
> Восстановите выделение, выбрав команду меню Select • Load Selection (Выделе-
ние • Загрузить выделение) и в появившемся диалоге Load Selection (Загрузить вы-
деление) нажав кнопку ОК.
204
Создание Web-сайтов
>• Увеличьте масштаб отображения до 300%.
>• Нажав и удерживая кнопку [£>] - 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 (Подложка).
>• Нажмите кнопку ОК, чтобы закрыть диалог Save For Web (Сохранить для Web).
> В появившемся диалоге сохранения Save Optimized As (Сохранить оптимизирован-
ный документ как) откройте папку Web и нажмите кнопку Сохранить (Save), чтобы
сохранить файл под прежним именем - Samolet.gif.
>• В появившемся диалоге Replace Files (Замена файлов) с запросом о необходимости
замены существующего файла с таким же именем (Рис. 4.138) нажмите кнопку
Replace (Заменить). Файл будет перезаписан.
Some of the specified files already exist in the target location. The files marked below wil be replaced:
0 Samolet.gjf
Cancel
Replace
Puc. 4.138. Диалог Replace Files (Замена файлов)
В описанной методике для создания прозрачного слоя мы использовали выделение, по-
лученное с помощью маски, сохраненной в альфа-канале, а для создания маски сформи-
ровали выделенную область, воспользовавшись командой Color Range (Цветовой диапа-
зон) с последующим редактированием в режиме «Быстрая маска». Конечно, создать вы-
деленную область для маски можно было значительно проще, без использования этой
команды и режима, а простым выделением фона инструментом \\\ - Magic Wand (W)
(Инструмент «Волшебная палочка» (W)) с последующим инвертированием выделения.
Но рассмотренные приемы дали нам возможность глубже познакомиться с возможно-
стями программы Adobe Photoshop и практически освоить новые инструменты.
Просмотрим полученный результат в браузере.
> Разверните свернутое окно программы просмотра Web-страниц, щелкнув мышью на
его кнопке на Панели задач (Taskbar).
>• Обновите Web-страницу, нажав соответствующую кнопку на панели инструментов
браузера.
Вы увидите, что теперь фотография самолета в браузере выглядит значительно лучше,
чем прежде. Однако до совершенства все еще далеко: границы изображения самолета
достаточно резкие. И главная причина заключается в том, что сглаживание выполнялось
на фоне, отличающемся от фона Web-страницы.
Если вы хотите получить профессиональное сглаживание, следует сразу
создать рисунок на фоне того цвета, который будет использоваться
для фона Web-страницы. Единственное исключение из этого правила —
пестрый фон Web-страницы.
206
Создание Web-сайтов
>• Не закрывая, сверните окно браузера, нажав кнопку [I] в правом верхнем его углу.
Описанные выше методики выделения и создания прозрачных областей можно и следу-
ет применять в том случае, если вы заранее не знаете, каким будет цвет фона Web-
страницы, на которую будет помещено создаваемое прозрачное изображение. Если же
этот цвет вам известен, то, повторим, именно на нем следует выполнять сглаживание.
В том случае, когда сглаживание выполнено на фоне, отличающемся от фона Web-
страницы, следует окрасить частично прозрачные пикселы, которые всегда присутству-
ют на границе прозрачной области, в цвет фона Web-страницы. Посмотрим, как это сде-
лать практически.
> Выберите команду меню File • Save for Web (Oaiui • Сохранить для Web). На экране
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122).
В этом диалоге сохранены параметры оптимизации, применявшиеся последний pas.
При установленном флажке Transparency (Прозрачность) частично прозрачные пиксе-
лы, которые обычно присутствуют по краям сглаженного изображения, заполняются
цветом, определенным параметром Matte (Подложка). Установим синий цвет подложки,
соответствующий цвету фона Web-страницы geoton.html.
>• Щелкните мышью на поле открывающегося списка Matte (Подложка). На экране поя-
вится диалог Color Picker (Палитра цветов).
>• В полях ввода R, G, В введите значения, соответственно, 0, 0, 255 и нажатием кнопки
ОК закройте диалог Color Picker (Палитра цветов). Заданный синий цвет отобразится
в поле открывающегося списка Matte (Подложка). На образце в диалоге вокруг изо-
бражения самолета появится тонкая линия такого же цвета.
>• Нажмите кнопку ОК. Диалог Save For Web (Сохранить для Web) закроется. На экра-
не появится диалог Save Optimized As (Сохранить оптимизированный документ как).
>• Откройте папку Web и нажмите кнопку Сохранить (Save).
>- В появившемся диалоге Replace Files (Замена файлов) с запросом о замене сущест-
вующего файла с именем Samolet.gif нажмите кнопку Replace (Заменить). Файл бу-
дет перезаписан.
Посмотрим, как будет выглядеть изображение в программе просмотра Web-страниц.
> " Разверните свернутое окно браузера и обновите документ HTML.
Теперь, после того как частично прозрачные пикселы по краям сглаженной области ок-
рашены в цвет фона Web-страницы, изображение смотрится вполне профессионально.
> Закройте браузер, нажав кнопку [х] в правом верхнем его углу.
>• Удалите из файла geoton.html тег, загружающий фотографию Samolet.gif.
>- Закройте документ Samolet.psd в программе Adobe Photoshop, нажав кнопку [х] в
правом верхнем углу его окна, И на предложение сохранить файл ответьте отри-
цательно.
Мы подробно познакомились с приемами и особенностями создания прозрачных
изображений. Еще раз подчеркнем, что качество таких изображений зависит от того, на
каком фоне выполнялось сглаживание. В любом случае сглаживание следует выполнять
на том же фоне, что и фон Web-страницы.
Подготовка графики 207
Ф JV&19. Бесшовный фон
Несомненно, что фон ваших Web-страниц в значительной мере определяет стиль и при-
влекательность всего сайта. Фон в виде рисунка, узора или текстуры оживляет Web-
страницу. С помощью текстур вы можете имитировать создание изображений на раз-
личных поверхностях, таких как мрамор, брезент или кирпичная кладка. Вместе с тем
следует следить, чтобы фон не затруднял чтение основного текста.
Изображение для фона можно взять в одной из многочисленных бесплатных библиотек
в WWW. Но можно изготовить рисунок и самостоятельно. Посмотрим, как это сделать
на примере создания простой фоновой текстуры. Начнем с создания нового документа
размером 100х 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 c t r l 1+Гм.
208
Создание Web-сайтов
>• Нажмите несколько раз комбинацию клавиш
При каждом нажатии этой комбинации клавиш фильтр бу-
дет применяться повторно, а изображение в окне докумен-
та- изменяться. В результате должно получиться что-то
вроде Рис. 4.139.
Далее применим к изображению фильтр Glowing Edges
(Свечение краев) из группы фильтров Stylize (Стилизация).
Все фильтры этой группы создают ярко выраженные эффек-
ты очерчивания за счет смещения пикселов и повышения
контрастности изображения и особенно полезны при обра-
ботке черно-белых изображений. Фильтр Glowing Edges
(Свечение краев) отыскивает границы цветовых областей и
добавляет свечение, подобное неоновому.
Рис. 4.139. Результат
применения фильтра
Difference Clouds
(Облака с наложением)
> Выберите команду меню Filter • Stylize • Glowing Edges (Фильтр • Стилиза-
ция • Свечение краев). На экране появится диалог Glowing Edges (Свечение кра-
ев) (Рис. 4.140), в котором следует определить параметры эффекта.
Glowing Edges ПИК)
- |G lowing Ecl ges^
Edge Width
Edge Brightness
Puc. 4.140. Диалог Glowing Edges (Свечение краев)
> Переместите ползунковый регулятор Edge Width (Ширина границ) влево так, чтобы в
поле ввода над ним появилось значение 1.
>• Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому
краю так, чтобы значение этого параметра стало равно 20.
>• Для параметра Smoothness (Сглаженность) установите значение 1.
Подготовка графики
209
>• Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.
После применения этого фильтра изображение будет затемнено. Поэтому воспользуемся
командой Brightness/Contrast (Яркость/Контраст) для увеличения яркости и контраста.
> Выберите команду меню Image • Adjustments • Brightness/Contrast (Изображение •
Коррекции • Яркость/Контраст). На экране появится диалог Brightness/Contrast (Яр-
кость/Контраст) (Рис. 4.141).
>• Переместите ползунковый регулятор Brightness (Яркость) вправо так, чтобы в поле
ввода над ним отобразилось значение +50.
> Переместив ползунковый регулятор Contrast (Контраст) вправо, установите значение
этого параметра +30.
> Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Контраст). Документ
примет вид примерно как на Рис. 4.142.
Brightness/Contrast
Brightness:
Contrast:
Puc. 4.141. Диалог Brightness/Contrast
(Яркость/Контраст)
Рис. 4.142. Изображение после применения
фильтра Glowing Edges (Свечение краев)
и настройки яркости и контраста
Теперь наше изображение, состоящее пока из оттенков серого, необходимо тонировать
или окрасить.
>• Выберите команду меню Image • Adjustments • Hue/Saturation (Изображение •
Коррекции • Цветовой тон/Насыщенность). На экране появится диалог
Hue/Saturation (Цветовой тон/Насыщенность) (Рис. 4.143).
Hue/Satuiation
Г Edit:
Master
Hue:
Saturation:
Lightness:
ы-
*-*
EZI
EZ1
EH
Jt
Reset
I Save...
• Colorize
0 Preview
Puc. 4.143. Диалог Hue/Saturation (Цветовой тон/Насыщенность)
210
Создание Web-сайтов
С помощью этого диалога вы можете настраивать в изображении цветовой тон, насы-
щенность и яркость отдельных цветовых компонентов.
>• Убедитесь, что установлен флажок Preview (Предварительный просмотр), чтобы
иметь возможность наблюдать в окне документа результаты изменения параметров.
> Установите флажок Colorize (Тонирование). В диалоге изменится положение пол-
зунковых регуляторов, а в окне документа изображение будет тонировано - приобре-
тет красный оттенок.
Чтобы лучше понять закономерности настройки цвето-
вых компонентов, следует представить себе, что все ви-
димые человеческим глазом цвета спектра, располагают-
ся на цветовом круге (Рис. 4.144). Каждый цвет на этом
круге характеризуется тремя базовыми параметрами:
цветовым тоном (Hue), насыщенностью (Saturation) и
яркостью (Lightness). Такое представление соответству-
ет уже рассмотренной нами ранее цветовой модели HSB.
Для описания цветового тона обычно используется на-
звание цвета: красный, оранжевый, желтый, зеленый и
т.д. Каждый цветовой тон занимает определенное поло-
жение на цветовом круге и характеризуется величиной
угла от 0° до 360°.
Рис. 4.144. Цветовой круг
Насыщенность - это степень чистоты цвета, которая определяется соотношением се-
рого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% -
серый - до 100% - полностью насыщенный. На цветовом круге насыщенность увели-
чивается от центра к краю.
Яркость характеризует относительную освещенность или затемненность цвета и измеря-
ется в процентах в диапазоне от 0% - черный - до 100% - белый.
На цветовом круге основные цвета моделей RGB и CMYK находятся в определенной
зависимости: каждый цвет расположен против дополняющего его цвета и находится ме-
жду цветами, из которых он получен. Например, сложение зеленого и красного дает
желтый. Чтобы усилить,какой-либо цвет, нужно ослабить дополняющий его - располо-
женный напротив него на цветовом круге. Так, чтобы изменить общее цветовое решение
в пользу голубых тонов, следует снизить содержание красного. По краю цветового круга
располагаются так называемые спектральные цвета, или цветовые тона. Эти цвета ха-
рактеризуются максимальной насыщенностью.
Сделаем насыщенность красного оттенка изображения в окне документа максимальной.
>• Перемещайте ползунковый регулятор Saturation (Насыщенность) вправо и наблю-
дайте в окне документа, как при этом повышается насыщенность красного цвета.
Напомним, что на цветовом круге это соответствует движению от центра к краю.
Установите значение этого параметра - 100%.
Изменим цветовой тон изображения на синий.
• Перемещайте ползунковый регулятор Hue (Цветовой тон) вправо и наблюдайте, как
изменяется цветовой тон изображения в окне документа. Изменяющееся при этом
Подготовка графики
211
числовое значение в поле ввода над ползунковым регулятором отражает угол пово-
рота на цветовом круге относительно исходного красного цвета.
> Установите значение параметра Hue (Цветовой тон) - 210. Такое значение отражает
тот факт, что на цветовом круге синий цвет, которым тонировано изображение, сме-
щен относительно красного на 210°.
> Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность).
Установленные цветовые параметры будут закреплены.
> Сохраните документ в папке Web, в файле Fon.psd в формате Adobe Photoshop.
На этом создание фоновой текстуры можно считать законченным. Но, так как рисунок
будет повторен на Web-странице много раз, между фрагментами фона будут видны швы.
В Adobe ImageReady имеется специальный фильтр — Tile Maker (Конструктор повторе-
ний), который позволяет удалить швы, создавая таким образом бесшовный фон.
>• Нажмите кнопку
- 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).
Tile Maker
0 Blend Edges
Width: [10 | percent
• Resize Tile to Fill Image
0 Kaleidoscope Tile
|i
1
Ж ,
Reset
.X l
I
1
Puc. 4.145. Диалог We Maker (Конструктор повторений)
Данный фильтр смешивает пикселы на краях изображения для создания бесшовного
фона. При установленном переключателе Blend Edges (Размытие краев) будет выпол-
няться размытие краев рисунка для исключения швов между плитками при повторении
изображения на Web-странице.
В поле ввода Width (Ширина) следует указать ширину полосы у края изображения,
в пределах которой должен происходить плавный переход. Обычно используются зна-
чения от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра,
предлагаемым по умолчанию, - 10 процентов.
При установленном флажке Resize Tile to Fill Image (Изменить размер плитки для за-
полнения изображения), размер плиток подгоняется под размер изображения. Если дан-
ный флажок сбросить, то плитки будут меньше размера изображения на величину', опре-
деленную параметром Width (Ширина), и на Web-странице они не будут вплотную при-
легать друг к другу.
Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдо-
скопа, в котором изображение отражается по горизонтали и вертикали, создавая таким
образом оригинальный узор.
212
Создание Web-сайтов
> Установите флажок Resize Tile to Fill Image (Изменить размер плитки для заполне-
ния изображения).
> Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Уста-
новленные параметры будут применены.
Чтобы увидеть, как будет выглядеть в программе просмотра Web-страниц созданный
фон, следует сначала указать программе, что данное изображение должно использовать-
ся как фон.
>- Выберите команду меню File • Output Settings • Background (Файл • Параметры
вывода • Фон). На экране появится диалог Output Settings (Параметры вывода)
(Рис. 4.146).
Uulpul Settings
Preset: |Default Settings
lEackyound
• View Document As -
© [mage
О Background
p Background Image -
Eath: |
Cancel
I Load.., 1
Рис. 4.146. Элементы управления Background (Фон)
диалога Output Settings (Параметры вывода)
> Установите переключатель Background (Фон), чтобы использовать активное изо-
бражение в качестве фона Web-страницы.
>• Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК.
Теперь можно просмотреть фон в браузере.
> Выберите команду меню File • Preview in (Файл • Предварительный просмотр в)
и в появившемся подменю - программу просмотра Web-страниц. Будет запущен
выбранный браузер, и в его окне вы увидите созданный бесшовный фон.
Для запуска браузера, установленного по умолчанию, вы можете нажать кнопку \Щ\ -
Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в браузере по умол-
чанию (Ctrl+Alt+P)) на панели инструментов (Tools).
Подготовка графики
213
Кроме фонового рисунка в окне программы просмотра выводится информация о формате
изображения (Format), его размерах (Dimensions), размере файла (Size) и параметрах
оптимизации (Settings), а ниже,- HTML-код автоматически сгенерированного файла
(Рис. 4.147).
,„чг-?- -,.-. ,..H;.nmiPTTi;<-irar,mim'rra.r,MirTlr..T^rn.F
£айл Правка Вид Избранное Сервис Справка
ф | 0-
D В
Адрес. |Q C:\Docuntenli and 541i ngi\Va^Motal S«tlingi\T»r»p\linageneildy',TargiMPieview3VFon.hli» [ -[ § J Переход | Lhks
Fomat: OIF
Dimersiuns: lOOw X IDOh
Sixe:4,822K
Settirgs: Selective, 16 Cobra, 100У. Diffusion Dither, Tnnspimicy cm. No Тгапзралгсу Dither, Interlaced, OV. Web Srap
body bg
/body>
C. 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.
214
Создание Web-сайтов
> Откройте в браузере файл geoton.html.
Как видите, Web-страница с изготовленным фоном выглядит значительно интереснее,
чем с однородным. Обратите внимание также, что швы между плитками практически
незаметны.
>• Закройте программу просмотра Web-страниц.
>• Удалите из HTML-кода файла geoton.html вставленный атрибут background»
Fon.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 (Изображение • Коррекции • Цветовой тон/Насыщенность).
Подготовка графики
215
Шлифованная плитка
>- Создайте новый документ размером 100 х 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. Применен
фильтр Add Noise
(Добавить шум)
Рис. 4.151. Применен
фильтр Motion Blur
(Размытие в движении)
Рис. 4.152. Применен
фильтр Emboss
(Рельеф)
> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой
тон/Насыщенность), применив следующие параметры: флажок Colorize (Тонирова-
ние) - установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10,
Lightness (Яркость)=+20.
Облицовочная плитка
> Создайте новый документ размером 100 х 100 пикселов и с белым цветом фона.
> Примените фильтр Add Noise (Добавить шум) с установленным переключателем
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром
Amount (Эффект) равным 120 (Рис. 4.153).
> Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высо-
та)=1, Amount (Эффект)=ЗО (Рис. 4.154).
Рис. 4.153. Применен фильтр Add Noise
(Добавить шум)
Рис. 4.154. Примените фильтр Emboss
(Рельеф)
216
Создание Web-сгйтов
В палитре Channels (Каналы) создайте новый канал Alpha 1, нажав кнопку
Create new channel (Создать новый канал).
Выделите изображение альфа-канала в окне документа командой Select • All (Выде-
ление • Все) и создайте рамку выделения толщиной 3 пиксела командой Select •
Modify • Border (Выделение • Модификация • Граница).
Инвертируйте выделение командой Select • Inverse (Вы-
деление • Обратить выделение) и залейте выделенную об-
ласть белым цветом. Отмените выделение.
Рис. 4.155. Рамка
в альфа-канале
Примените к альфа-каналу фильтр Gaussian Blur (Размы-
тие по Гауссу), воспользовавшись командой меню Filter •
Blur • Gaussian Blur (Фильтр • Размытие • Размытие по
Гауссу) с параметром Radius (Радиус)=2,0 пиксела, чтобы
размыть границу (Рис. 4.155).
В палитре Layers (Слои) выделите слой Background (Фон) и создайте эффект трех-
мерности с помощью фильтра Lighting Effects (Эффекты освещения), воспользовав-
шись командой меню Filter • Render • Lighting Effects (Фильтр • Рендеринг • Эф-
фекты освещения). Установите параметры эффекта как на Рис. 4.156. Результат будет
примерно такой, как на Рис. 4.157.
Lighting Effects
Light type: |Spotlight
0 On
Intensity: Negative 2.1 A
Full
Focus:
Narrow
92
Wide
Matte
-79
Shiny
Properties:
Gloss:
Material: Plastic 68 Metallic
Exposure: .U n d e'
Over
Ambience' Negative 32 Positive
0 Preview
•TextureChannel: | Alpha 1
ЕЭ White is high
Height:
J2-
Flat
50 Mountainous
Puc. 4.156. Диалог Lighting Effects (Эффекты освещения)
с установленными параметрами фильтра
> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/
Насыщенность).
Подготовка графики 217
Для создания фоновых текстур, кроме описанных фильтров,
попробуйте использовать фильтры Colored Pencil (Волшебный
карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Краке-
люры), Chalk & Charcoal (Мел и уголь), Mezzotint (Меццо-
тинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор),
Note Paper (Почтовая бумага), Pointillize (Пуантилизм),
Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Тексту-
ризатор), Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile " ~?
(Цветная плитка). Заметим, что применение некоторых фильт- рименен фильтр
1, • ,__ ." » Lighting Effects
ров, на приме р, Gl a s s ( Стекло), к с плошному цвету дает оче нь /r s,, ,
v v '„ _ 1, J J (Эффекты освещения)
незначительный или нулевой эффект. г
€яьмт, J№w. Разрезаем изображения
и создаем изображения-карты
В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами, стано-
вится разработка интерактивной графики. Одной из разновидностей такой графики яв-
ляются изображения, разбитые на фрагменты (slices). Каждый фрагмент представляет
собой прямоугольный участок изображения, который становится ячейкой таблицы в
HTML-файле. После того, как документ разбит на части, можно оптимизировать каждую
из них, используя наиболее подходящие для нее параметры оптимизации, что позволяет
значительно уменьшить объем файла. Кроме того, каждый фрагмент можно «оживить»,
применив к нему эффект Rollover (Наведение). При просмотре в браузере, в зависимости
от действий мыши, состояние этого фрагмента будет изменяться.
Все части изображения автоматически сохраняются в отдельных GIF- или JPEG-файлах,
а при загрузке картинки в браузер отдельные ее фрагменты размещаются в ячейках таб-
лицы HTML-документа. Каждому фрагменту можно присвоить ссылку на другую Web-
страницу и создать таким образом навигационную панель.
Посмотрим, как выполняется нарезка изображения и создаются изображения-карты.
В опытах первой главы мы создали для нашего сайта навигационную панель или меню
из таблицы HTML и сохранили ее в файле menu.html. Теперь в программе Adobe
ImageReady создадим для этого сайта простую графическую навигационную панель.
>• Убедившись, что в программе Adobe Photoshop закрыты все документы, перейдите в
программу Adobe ImageReady, нажав кнопку | ua^l-Hl - Edit in ImageReady
(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) на панели инструментов
(Toots).
>• Установите на панели инструментов программы Adobe ImageReady белый цвет пе-
реднего плана и синий цвет фона с RGB-составляющими цвета R=0, G=0, B=255 или
в шестнадцатеричном формате - OO00FF.
> Создайте в программе Adobe ImageReady новый документ с размерами 160x400 пик-
селов и цветом фона - Background Color, т.е. синим.
>• Введите названия пунктов меню как на Рис. 4.158, так, чтобы каждый из них распо-
лагался на отдельном слое.
218
Создание Web-CciiiTOB
> Сохраните документ под именем menu.psd.
Теперь можно приступить к нарезке изображения.
Эта операция выполняется с помощью инструмента
\Jf\ - Slice Tool (К) (Инструмент «Фрагмент» (К)).
> Нажмите кнопку \Ж\ - Slice Tool (К) (Инструмент
«Фрагмент» (К)) на панели инструментов (Tools),
чтобы включить этот инструмент.
Фрагменты могут быть двух типов: автоматически
созданные и пользовательские. По умолчанию каж-
дый документ содержит один автоматически создан-
ный фрагмент, включающий все изображение и зани-
мающий одну ячейку HTML-таблицы. Когда вы вруч-
ную создаете новый пользовательский фрагмент, про-
грамма генерирует дополнительные автофрагменты,
необходимые для того, чтобы заполнить ячейки HTML-
таблицы. Пользовательские фрагменты имеют более
широкие возможности модификации параметров, чем
автоматически созданные. При необходимости вы мо-
|тЛРШТЩ|||^|||^Л - |i • | >1|
рОгГ«йм1Ч,ОрЫги1мГ "•' MJp Ч + Цр "• О ]
Главная
страниц;? • ; :
, Чем мы .
занимаемся?
О нашей
хомпании
Новости
Оборудование
Спец. ПО
Наши партнеры
Прайс-лист j,
Связь с
компанией
1
•
S ЮТЛ w ! - i - ж • 28.8 Kbp* »: ^ |
Рис. 4.158. Графическое меню
жете преобразовать автофрагменты в пользовательские. К каждому пользовательскому
фрагменту можно применять индивидуальные установки оптимизации. Можно также свя-
зать несколько пользовательских фрагментов, чтобы применить к ним одинаковые опти-
мизационные параметры. Ко всем автоматически созданным фрагментам применяются
единые установки оптимизации.
Вырежем в изображении первый пользовательский
фрагмент, включающий название пункта меню Глав-
ная страница.
Главная
страница
> Установите указатель мыши, который примет фор-
му /, в левом верхнем углу окна документа.
Нажмите и удерживайте левую кнопку мыши. В левом
верхнем углу фрагмента появятся два серых значка-
индикатора foi|i3|. Левый значок означает порядковый
номер фрагмента, а правый - его тип - изображение.
Фрагменты нумеруются по порядку слева направо и
сверху вниз.
> Не отпуская левую кнопку мыши, переместите ука-
затель мыши вправо и вниз так, чтобы надпись
Главная страница находилась в середине нарисо-
ванного прямоугольника.
>• Отпустите левую кнопку мыши. Первый поль-
зовательский фрагмент будет вырезан и окружен
рамкой выделения с квадратными маркерами в уг-
лах и серединах сторон (Рис. 4.159).
Созданный фрагмент будет выделен также более ярким цветом и ему будет присвоен
номер 01, который вы увидите в его левом верхнем углу. Автоматически будет создан
Она'
котит
Оборудование
Спец. ПО
Наши партнеры
Прайс-лист
Связь с.
•„ компанией
Рис. 4.159. Первый фрагмент
создан
Подготовка графики
219
фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент
будет отличаться от выделенного пользовательского фрагмента оттенком. В его левом
верхнем углу, кроме значков-индикаторов номера и типа, появится значок [§], означаю-
щий, что данный автофрагмент связан с пользовательским.
Если размер вырезанной части изображения вас не
устраивает, то его легко можно изменить, переместив
маркеры выделения с помощью инструмента ^f\ -
Slice Select Tool (О) (Инструмент «Выбор фрагмента»
(О)). Этим же инструментом можно выделить фраг-
мент и переместить его. Для удаления выделенного
фрагмента достаточно нажать клавишу \р»»^\ или вос-
пользоваться командой меню Slices • Delete Slice
(Фрагменты •Удалить фрагмент).
> С помощью инструмента l-^J - Slice Tool (К)
(Инструмент «Фрагмент» (К)) вырежьте второй
фрагмент с надписью Чем мы занимаемся?, а за-
тем - все остальные фрагменты с названиями пунк-
тов меню. Всего должно получиться 9 пользова-
тельских фрагментов (Рис. 4.160).
Разметку нарезанных частей можно временно скрыть,
например, для того, чтобы она не мешала выполнять
другие операции редактирования документа.
Главная
страница
занимаемся?
Оборудование
i s .£з • :! • • ,
Спец. ПО
Наши партнеры
Связь с
компанией
Рис. 4.160. Фрагменты
созданы
> Нажмите кнопку [ЦЦ - Toggle Slices Visibility (Q) (Выключение/включение отображе-
ния фрагментов (Q)) на панели инструментов (Tools). Разметка фрагментов будет
скрыта.
> Чтобы показать скрытую нарезку, повторно нажмите кнопку | Н[ - Toggle Slices
Visibility (Q) (Выключение/включение отображения фрагментов (Q)) на панели инст-
рументов (Tools) или просто щелкните мышью в окне документа при выбранном ин-
струменте \J^\ или \^\.
Нарезать изображение можно и другим способом - создав выделенную область и выбрав
команду меню Select • Create Selection from Slice (Выделить • Создать выделение из
фрагмента).
Для каждого полученного фрагмента документа создадим эффект Rollover (Наведение)
таким образом, чтобы при установке указателя мыши в браузере на каждом из пунктов
меню цвет фона этого фрагмента изменялся с синего на темно-синий. Начнем с первого
фрагмента. Предварительно его следует выделить.
>• Нажмите кнопку [5^] - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)) на
панели инструментов (Tools), чтобы выбрать инструмент.
> Установите указатель мыши, который примет форму Ifi, в окне документа на
фрагменте с надписью Главная страница.
220
Создание Web-сайтов
j Web ContentЧСо1ог^ГаЫГ\ Q
ЕЯ Normal
Image Maps
Slices
Ш11
>- Щелкните мышью в этом месте. Фрагмент бу-
дет выделен.
> Щелкните мышью на ярлыке Web Content
(Содержимое Web) в нижнем окне палитр,
чтобы отобразить палитру на экране.
>• Увеличьте высоту окна палитры, чтобы были
видны все фрагменты (Рис. 4.161).
В палитре Web Content (Содержимое Web) уже
создан первый кадр эффекта для состояния Normal
(Нормальное), при котором указатель мыши нахо-
дится за пределами выбранного фрагмента.
Фрагмент menu_01 выделен. Имя фрагмента со-
стоит из имени файла без расширения и порядково-
го номера фрагмента.
> Нажмите кнопку | а | - Creates rollover state
(Создать новое состояние) в нижней части палит-
ры Web Content (Содержимое Web), чтобы соз-
дать кадр для следующего состояния - Over (Над).
Теперь нам нужно определить, как будет выглядеть
выделенный фрагмент изображения при событии
Over (Над), т.е. когда указатель мыши находится
над фрагментом. При этом цвет фона должен ме-
няться на темно-синий. Для этого, создадим из
фрагмента выделенную область, поместим ее на
новый слой над слоем Layer 1 и зальем темно-
синим цветом.
> Выберите команду меню Select • Create Selection
from Slice (Выделить • Создать выделение из
фрагмента). Выделенная область будет создана.
> Щелчком мыши выделите в палитре Layers (Слои) слой Background (Фон).
>• Нажмите кнопку | И | - Create a new layer (Создать новый слой) в нижней части па-
литры Layers (Слои). Над слоем Background (Фон) появится новый слой Layer 1.
> Установите темно-синий цвет переднего плана, выбрав в открывающихся списках
R (Красный) и G (Зеленый) палитры Color (Цвет) значения 00, а в открывающемся
списке В (Синий) - значение СС.
>• С помощью команды меню Edit • Fill (Правка • Залить) заполните выбранным цве-
том переднего плана выделенную область активного слоя Layer 1.
Таким образом, мы определили состояние Over (Над) эффекта Rollover (Наведение) для
фрагмента изображения с надписью Главная страница.
Обратите внимание на то, что для состояния Normal (Нормальное) фрагмента menu_01
флажок видимости слоя Layer 1 должен быть сброшен, чтобы убедиться этом выпол-
ните следующие шаги.
а" л
Рис. 4.161. Палитра Web Content
(Содержимое Web)
с первым кадром эффекта
для первого фрагмента
Подготовка графики 221
>• Щелкните на имени фрагмента 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). Второй фрагмент с надписью Чем мы занимаемся? бу-
дет выделен в окне документа.
Фрагмент можно выбрать также щелчком мыши в окне документа при активном инст-
рументе | У] - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)).
>• Создайте состояние Over (Над), нажав кнопку I S I - 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 (О) (Инструмент
«Выбор фрагмента» (О)) в окне документа на первом фрагменте изображения с надпи-
сью Главная страница, чтобы выделить его.
222
Создание Web-сайтов
••••••••
| * Mk«\T»blt\lm»gt Map^
Typ«{ |lm»g« _ J
Nam*! IrrwnuJH
* i ni l Hf 1 I I I"- illHHII HV^-'' 4М-Л4Д4*И0ИОЛ41
URLl P
Targeli [~
А»: Г
1 И МИ I I I 1 1 I I 1 I I I
fr DiMenslsns
t> Cel l AHgnawnt
^ Background
^ Stains Bar Message
\ ©
, . |
13
>• Выберите команду меню Window • Slice (Окно •
Фрагмент). На экране появится палитра Slice
(Фрагмент) (Рис. 4.162).
В поле ввода Name (Имя) указано имя фрагмента,
предлагаемое по умолчанию - menu_01, состоящее из
имени файла и порядкового номера. Под этим именем
фрагмент будет сохранен. При необходимости имя
можно изменить.
В открывающемся списке Туре (Тип) вы можете вы-
брать тип фрагмента из трех вариантов: Image
(Изображение), No Image (He изображение) и Table
(Таблица). По умолчанию тип всех фрагментов - Image
(Изображение), т.е. содержащий графические данные. Рис. 4.162. Палитра Ы/ев
Для фрагментов, содержащих не графику, а только ' рагмент)
сплошной цвет или текст, следует устанавливать тип No Image (He изображение).
При этом вид палитры Slice (Фрагмент) изменится, и вы сможете ввести нужный текст в
специальном поле ввода, а в расширяемой части Background (Фон) выбрать цве- фона
для текстового фрагмента из открывающегося списка Color (Цвет) (Рис. 4.163). Текст,
который вы введете, в окне документа не отобразится. Его можно будет увидеть только
в браузере.
Чтобы связать выбранный фрагмент изображения с другим HTML-документом, который
будет загружаться в браузер после щелчка мышью на данном фрагменте, следует в поле
открывающегося списка URL ввести адрес нужного документа.
>• В поле открывающегося списка URL введите имя файла geoton.html.
Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологию фрей-
мов, разделив экран по вертикали на два окна: в левом отображается меню из файла
menu.html, а в правом - страницы сайта. Правому фрейму присвоено имя frame. Чтобы
определить, в какой фрейм должна загружаться Web-страница, следует указать его имя
в поле открывающегося списка Target (Цель).
>• В поле открывающегося списка Target (Цель) введите имя правого фрейма - frame.
Список Target (Цель) станет доступным после того, как вы введете ин-
формацию в поле URL и перейдете в любое другое поле палитры.
В поле ввода Alt (Альтернативный) вы можете указать значение атрибута a l t тега
<ime>. Введенный текст будет отображаться вместо графического фрагмента в тек-
стовых браузерах, а также, если функция загрузки графики выключена, в некоторых
браузерах в процессе загрузки изображения и как всплывающая подсказка.
В поле ввода Alt (Альтернативный) введите Главная.
Нажмите кнопку 0 в правом верхнем углу палитры Slice (Фрагмент) и в появившем-
ся меню выберите команду Show Options (Показать параметры). Палитра развернет-
ся, и вы увидите дополнительные элементы управления (Рис. 4.163).
Подготовка графики
223
UftLi | gioton-Ktml
Target i [frame
«.Г
V: О
7 Dimensions
*£
W; |"кО : |Pixels
Hi 147 \\t*ak
О Cof«tr*n Proportions
VCtl l Alignment
Horin [Default :
"7 Background
Color: Гмогя
T7 Status Bar Message
Рис. 4.163. Развернутая палитра
Slice (Фрагмент)
С помощью элементов управления Dimensions
(Размеры) можно указать точные координаты X и Y
левого верхнего угла фрагмента,^ также изменить
его ширину (W) и высоту (Н). Чтобы сохранить про-
порции фрагмента при изменении одного из парамет-
ров - ширины или высоты, следует установить флажок
Constrain Proportions (Сохранить пропорции).
В поле ввода Status Bar Message (Сообщение в строке
состояния) можно ввести текст, который будет отобра-
жаться в строке состояния (Status Bar) браузера при
установке указателя мыши на данном фрагменте. Если
это поле ввода оставить пустым, то по умолчанию, в
строке состояния браузера отображается адрес URL
связанного с фрагментом документа.
Подобным же образом определим ссылку для вто-
рого фрагмента изображения с надписью Чем мы
занимаемся?
> Щелкните мышью в окне документа на фрагмен-
те 02 с текстом Чем мы занимаемся?, чтобы вы-
делить его. В палитре Slice (Фрагмент) отобра-
зятся параметры этого фрагмента.
>• В поле открывающегося списка URL введите имя
файла - spisok.html, на который фрагмент дол-
жен ссылаться.
>• В поле открывающегося списка Target (Цель) введите имя правого фрейма - frame,
в который должен загружаться файл spisok.html.
> В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?
Повторяя описанные шаги, можно создать ссылки для каждого фрагмента изображения.
После того как ссылки назначены, остается только оптимизировать фрагменты изобра-
жения и сохранить их. Для оптимизации следует поочередно выбирать каждый фрагмент
и устанавливать наиболее подходящие для него параметры. Но, так как все части нашего
документа имеют практически одинаковое графическое содержимое, их можно связать и
применить единые оптимизационные параметры.
>• Нажмите и, удерживая нажатой клавишу \\sm\. щелкайте мышью поочередно на каж-
дом фрагменте, чтобы выделить все части изображения.
> Отпустите клавишу К Shi f t l.
Для выделения всех фрагментов вы можете также воспользоваться командой меню
Select • Ail Slices (Выделение • Все фрагменты).
> Выберите команду меню Slices • Link Slices for Optimization (Фрагменты • Связать
фрагменты для оптимизации). Все части изображения будут связаны и в левом верх-
нем углу каждой из них появится дополнительный значок-индикатор Щ], указываю-
щий на связь. Все значки-индикаторы окрасятся в красный цвет. Это помогает иден-
тифицировать все связанные фрагменты.
224
Создание Web-сайтов
Теперь можно выполнить оптимизацию всех фрагментов одновременно.
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
Будет выполнена оптимизация документа с параметрами, применявшимися при по-
следней оптимизации.
> В палитре 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).
Подготовка графики
225
Preset: (Custom
р HTML 1"»]
D Output XHTML
Tags Case: |Lowercase (body)
Attribute Case: |Lowercase (rowspan)
Indent: [Tabs
Line Endings: (Automatic
Encoding: JAutomatic (windows-1251)
И Include Comments
E Always Add Alt Attribute
E3 Always Quote Attributes
• Close Al Tags
И Include Zero Margins on Body Tag
И
£J
id
Ы
Ld
Рис. 4.164. Диалог 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
226
Создание Web-сайтов
то будут создаваться каскадные таблицы стилей. При этом в открывающемся списке
Referenced (Ссылка) следует выбрать тип ссылки в коде HTML, определяющей по-
ложение фрагмента.
Sice Output
© Generate ТэЫе
Referenced: [
-Default Site Naming -
h 1 underscore j • Ц + | layer name or
- [none |^j + |rone
J3
Example: MyFteJU
Puc. 4.165. Диалог Output Settings (Параметры вывода)
с набором элементов управления Slices (Фрагменты)
Для использования таблиц HTML следует установить флажок Generate Table (Генери-
ровать таблицу) и в открывающемся списке TD W&H указать, включать ли в код HTML
атрибуты ширины и высоты ячеек таблиц: Always (Всегда), Never (Никогда), Auto (Ав-
томатически). С помощью открывающегося списка Empty Cells (Пустые ячейки) можно
определить, как заполняются пустые ячейки.
Preset: [Custom
llmageMaps
Type
© Clent-Sde
О NCSA Server-side
О CERN Server-Side
О Clent-ade and NCSA Saver-Side
О Ctent-Side and CERN Server-Side
- Placement -
О Top
О Body
©Bottom
Puc. 4.166. Диалог Output Settings (Параметры вывода) с набором
элементов управления Image Maps (Навигационные карты)
Подготовка графики
227
Для набора элементов управления навигационных карт (Image Maps) (Рис. 4.166) можно
выбрать тип карты, а с помощью переключателей Placement (Положение) - определить
в каком месте HTML-кода должен быть помещен тег <шар>. Подробнее о картах навига-
ции будет рассказано в следующем опыте.
> Для настройки параметров файлов сохраняемых изображений во втором сверху от-
крывающемся списке без названия выберите Saving Files (Сохранение файлов).
В диалоге отобразятся соответствующие элементы управления (Рис. 4.167).
Output Settings
Preset: [Custom
_H
г- |Sa*ing Files
Г Optimized Hies
0 Put Images in Folder: | images
О Use Long Ftename Extensions Cjpeg, wbmp)
0 Copy Background Image when Saving
•File Naming —
| site name
| underscore
(none
b l + |hyphen
£ j + | rollover state
h l + l"°ne
Example: My9ic&WyTriager_over.gif
I »! + I trigger name - 1 +
\~l + |none ^ | +
I l i + 1 ext
г Ftename Compatblity '
0 Window; В Mac OS 9 В 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 (Сохранение оптимизированного документа).
228
Создание Web сайтов
>- Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут сохранены
в указанных папках с установленными параметрами.
> Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом верхнем
углу его окна.
Проверим созданное меню.
>- Откройте в программе просмотра Web-страниц файл index.html из папки Web
Вы увидите, что в правом фрейме загружен файл geoton.html, а в левом - вместо преж-
него меню-таблицы загружена созданная нами графическая навигационная панель.
> Устанавливайте указатель мыши на разных пунктах меню. При этом будет изменять-
ся цвет фона соответствующей надписи.
>• Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм будет
загружен файл spisok.html.
>- Щелкните мышью на пункте меню Главная страница. В правый фрейм будет загру-
жен файл geoton.html.
В автоматически созданном программой файле menu.html таблица с фрагментами
изображения находится между комментариями <!— ImageReady Preload Script
(menu.psd) --> и <!— End ImageReady Sl i ces -->. При необходимости этот
фрагмент кода можно скопировать в буфер обмена и затем вставить в любой HTML-
документ. Меню.будет работать.
При копировании фрагмента HTML-кода с меню в другой файл необходимо
убедиться, что файлы с изображениями находятся в той папке, которая
указана в значениях атрибутов sic тегов <img>; в противном случае,
изображения не загрузятся в браузер.
В этом опыте мы создали навигационную панель, разрезав изображение на фрагмен-
ты, применив к ним эффект Rollover (Наведение) и поместив фрагменты в ячейки
автоматически созданной HTML-таблицы. Но создать карту навигации можно и дру-
гим способом.
J№%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 (Контуры). Будет создана выделенная
область.
Скопируем выделенную область в буфер обмена и затем вставим содержимое буфера
обмена в эту же область на новый слой.
>• Щелкните мышью на ярлыке Layers (Слои), чтобы отобразить эту палитру.
>• Выберите команду меню Edit • Сору (Правка • Копировать). Выделенный фрагмент
будет скопирован в буфер обмена.
>• Выберите команду меню Edit • Past Into (Правка • Вставить в). Изображение из бу-
фера обмена будет вставлено в выделенную область и помещено на новый слой. Этот
слой - Layer 1 - появится в палитре Layers (Слои). Выделение будет отменено.
Напомним, что созданный таким образом слой Layer 1 почти полностью прозрачен, за
исключением изображения самолета. Чтобы убедиться в этом, выключите, а затем снова
включите отображение слоя Background (Фон).
Для карты навигации нам нужен еще один слой, такой же, как и слой Background (Фон)
т.е. его копия. Создадим этот слой следующим образом:
> В палитре Layers (Слои) щелчком мыши выделите слой Background (Фон).
230
Создание Web-сайтов
Duplicate: Background
&s: | Backoround copy
r- Destination 1
(Document: | Samdet.psd ц д '
1 1
ежи
[""(aricet |
Нажмите кнопку © в правом верхнем
углу палитры Layers (Слои) и в поя-
вившемся меню выберите команду
Duplicate Layer (Дублировать слой).
На экране появится диалог Duplicate
Layer (Дублировать слой) (Рис. 4.168), в
поле ввода которого As (Как) предлага-
ется имя для слоя - Background copy
(Копия Background). Рис. 4.168. Диалог Duplicate Layer (Дубли-
Нажав кнопку ОК, закройте диалог ровать слой)
Duplicate Layer (Дублировать слой). В палитре Layers (Слои) над слоем Background
(Фон) появится новый слой - Background copy (Копия Background).
Теперь, когда необходимые слои имеются, можно переключиться в программу Adobe
ImageReady и создать карту навигации. В общем случае все операции подготовки
слоев для карты навигации можно выполнять и в Adobe ImageReady. Но, к сожале-
нию, в этой программе отсутствуют средства для работы с контурами. Поэтому для
создания выделенной области из контура мы вынуждены воспользоваться програм-
мой Adobe Photoshop.
Нажмите кнопку
- Edit in ImageReady (Shift+Ctrl+M) (Редактировать в
| Sl i ce^ ТэЫе^ ; Image Map4
URL! £
All \2
^ Dimensions
i
LJ
LI
1
i. ^
Рис. 4.169. Палитра Image Map
(Карта навигации)
ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). На экране
появится рабочее окно Adobe ImageReady, и в нем откроется документ Samolet.psd.
Теперь необходимо назначить каждому слою ссылку
на Web-страницу. Эта операция выполняется с по-
мощью палитры Image Map (Карта навигации).
Щелкните мышью на ярлыке Image Map (Карта на-
вигации) в окне палитр в левом нижнем углу рабо-
чей области. Палитра Image Map (Карта навигации)
появится на экране (Рис. 4.169).
Создадим сначала ссылку на Web-страницу для слоя
Layer 1.
> В палитре Layers (Слои) щелкните мышью на
слое Layer 1, чтобы выделить его.
> Выберите команду меню Layer • New Layer
Based Image Map Area (Слой • Новая область
карты навигации из слоя). Элементы управления
палитры Image Map (Карта навигации) станут ак-
тивными, и в нижней части палитры, в ее расши-
ряемой части, Layer Based Settings (Параметры
слоя), появится открывающийся список Shape
(Форма) (Рис. 4.170).
В открывающемся списке Shape (Форма) следует
выбрать форму участка изображения, которому бу-
дет назначена URL-ссылка. В отличие от нарезанных
фрагментов, форма которых может быть только пря-
моугольной, карты навигации, кроме прямоугольной
Name: I Innag*Map_01
URL: Q
Targets 1
All! |~
"^Layer Based Settings
Shape: |rUct<ngi«[T]
( H I
1
LI
1
Рис. 4.170. Развернутая палитра
Image Map (Карта навигации)
Подготовка графики
231
(Rectangle), могут иметь также участки круглой (Circle) и многоугольной (Polygon)
формы. Причем форма и размер этих участков, реагирующих на щелчок мыши и назы-
ваемых «горячими зонами» (hotspots), автоматически подбирается так, чтобы они в мак-
симальной степени соответствовали непрозрачной части слоя. При выборе многоуголь-
ной (Polygon) формы Adobe ImageReady создает контур в виде многоугольника вокруг
непрозрачной области. Если же вы выберете прямоугольную (Rectangle) или круглую
(Circle) форму, то создается фигура минимально возможных размеров, окружающая не-
прозрачный участок слоя, в которую включаются также прозрачные области. Когда, ра-
ботая в программе просмотра Web-страниц, вы щелчком мыши выбираете «горячую зо-
ну» навигационной карты, форма выбранного участка отображается на рисунке в виде
прямоугольника, круга или многоугольника. Предлагаемая по умолчанию прямоуголь-
ная (Rectangle) форма отображается в окне документа в виде прямоугольной рамки, ог-
раничивающей изображение самолета.
Для выбранного прозрачного слоя Layer 1 с непрозрачным изображением самолета луч-
ше всего подойдет форма области ссылки в виде многоугольника, который оконтурит
фигуру самолета.
>• В открывающемся списке Shape (Форма) выбе-
рите Polygon (Многоугольник). Под этим спи-
ском появится поле ввода с ползунковым регуля-
тором Quality (Качество) (Рис. 4.171). В окне до-
кумента форма области, окружающей изображе-
ние самолета, станет многоугольной.
Параметр Quality (Качество) позволяет указать сте-
пень отклонения формы многоугольника от формы
непрозр£1чной части слоя.
>• Нажмите кнопку Ц] у правого края поля ввода
Quality (Качество) и с помощью появившегося
ползункового регулятора установите значение
этого параметра 100, указав таким образом, что
форма многоугольника должна точно соответст-
вовать форме непрозрачного участка слоя, т.е. форме самолета. Щелкните мышью на
поле ввода Quality (Качество), чтобы закончить ввод параметра и скрыть ползунковый
регулятор.
Теперь форма области в окне документа точно повторяет контур самолета.
Изображению на выбранном слое должна быть сопоставлена ссылка на Web-страницу,
адрес которой следует ввести в поле открывающегося списка URL.
> В поле открывающегося списка URL введите имя файла geoton.html.
Открывающийся список Target (Цель) предназначен для указания имени фрейма, в ко-
торый будет загружаться документ, адрес которого указан параметром URL.
В поле ввода Alt (Альтернативный) можно указать альтернативный текст, который будет
отображаться в текстовых браузерах и как всплывающая подсказка при установке указа-
теля мыши на области карты навигации, которой сопоставлен URL.
>• В поле ввода Alt (Альтернативный) введите текст: Главная страница.
> Теперь установим параметры для следующего слоя - Background copy.
I Slice 4 Tibls 1 $ Image Map ^ |
Name; | ImigeMapJU
URLfJ
Target! FJ
«,|
^L«yer Based Settings
Shapei [Polygon Г^
Quality: | 80 | -"!
I xjl
|
L-.J
Ы
1
л
Рис. 4.171. ДЛЯ области ссылки
выбрана форма
Polygon (Многоугольник)
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-кодом карты навигации.
> Закройте программы Adobe ImageReady и Adobe Photoshop.
Подготовка графики 233
Проверим теперь, как работает карта навигации.
> Откройте в программе просмотра Web-страниц файл Samolet.html из папки Web.
>-. Перемещайте указатель мыши по фотографии. В зависимости от положения указате-
ля мыши - на изображении самолета на переднем плане или вне его, в строке состоя-
ния (Status Bar) будет отображаться адрес URL, сопоставленный данному участку
карты навигации. Вблизи указателя мыши будет появляться всплывающая подсказка.
>• Щелкните мышью на изображении самолета. Это изображение будет выделено мно-
гоугольным контуром, произойдет переход по ссылке, и в окно браузера будет за-
гружен файл geoton.html.
> Нажмите кнопку Back (Назад) на панели инструментов программы просмотра.
Программа возвратит вас к предыдущему документу - Samolet.html.
> Щелкните мышью за пределами изображения самолета. Теперь будет выделен пря-
моугольный контур всей фотографии, и в окно браузера загрузится файл spisok.html.
>• Как видите, карта навигации работает правильно. Посмотрим теперь, как выглядит
автоматически созданный документ Samolet.html.
> Откройте в программе Блокнот (Notepad) файл Samolet.html из папки Web.
Обратите внимание, что код карты навигации располагается между комментариями
<!-- ImageReady Sl i ces (Samolet.psd) -->И<!-- End ImageReady Sl i ces -->.
HTML-код навигационной карты включает элемент <IMG>, загружающий изображение
Samolet.jpg, который с помощью атрибута USEMAP связывается с навигационной картой,
определяемой элементом <МАР>...</МАР>. ИМЯ карты задается атрибутом NAME.
Для указания областей, реагирующих на щелчок мыши, используются два элемента
<АНЕА>, в которых атрибут 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 состоит из блоков, расположенных в определенной
последовательности. Выделяют блоки трех типов:
• управляющие блоки - определяют, как будут обрабатываться изображения; они со-
держат заголовок, описание логического экрана, управление графическими расшире-
ниями, признак конца;
v' блоки изображения — содержат графические данные: изображение, текст, описание
палитры;
• специальные блоки - содержат комментарии и прикладные расширения, которые ни-
как не влияют на изображение, но могут обрабатываться прикладными программами
по их усмотрению. Среди подобных блоков особо следует выделить прикладной блок
Netscape Loop. Он присутствует практически в каждой анимации. Если браузер,
236
Создание Web-сайтов
не только Netscape Navigator, видит этот блок, он проигрывает анимацию не одк н раз,
а столько, сколько указано, или бесконечно.
Общая схема следования этих блоков приблизительно такова:
• заголовок - GIF87a или GIF89a - определяет формат файла;
• описание логического экрана - задается размер экрана, на котором будет проигры-
ваться анимация;
• описание глобальной палитры - необязательно, но крайне желательно;
• произвольное количество блоков изображения, в том числе текстовых, или пар бло-
ков: управление графическими расширениями - изображение. Блок управления гра-
фическим расширением может содержать в себе указание на локальную палитру, рас-
положение на логическом экране, задержку и способ удаления изображения и оказы-
вает влияние только на следующий непосредственно за ним блок изображения;
i/ завершитель - признак конца.
Комментарии и специальные блоки, если они есть, могут располагаться в любом месте
файла, но только после описания глобальной палитры или после описания логического
экрана. Блок расширения Netscape Loop должен следовать непосредственно за глобаль-
ной палитрой.
Использование GIF-анимаиии
В следующих главах вы узнаете, как создавать анимацию в различных форматах, в том
числе и GIF-анимацию. Здесь же отметим, что если у вас уже есть готовая GIF-анимация,
то процедура помещения ее на Web-сайт ничем не отличается от помещения туда же про-
стого, не анимированного GIF-файла. Она выполняется с помощью тэга <img> и подроб-
но рассмотрена в предыдущих главах.
К несомненным достоинствам GIF-анимации можно отнести следующие ее особенности:
^ небольшой размер файла за счет оптимизации;
•" не требуется специальных программ для просмотра;
• для проигрывания не требуется постоянной связи с сервером;
• простой способ помещения на Web-страницу.
Но у GIF-файлов есть и недостатки:
i/ палитра не превышает 256 цветов;
^ сжатие фотографических изображений гораздо ниже, чем в формате JPEG
Стандарт GIF89a - весьма мощный инструмент для создания Web-анимаций, однако не-
обходимо учитывать тот факт, что если некоторые специальные графические программы
и поддерживают этот стандарт в полном объеме, то это не относится к некоторым брау-
зерам, поэтому, применяя динамические GIF-файлы для Web, лучше ориентироваться не
на сам стандарт, а на возможности браузеров по его поддержке.
Учитывая проблемы совместимости программ просмотра, при создании анимационных
GIF-файлов рекомендуется соблюдать следующие правила:
• желательно не использовать локальные палитры: в некоторых случаях это приводит
к неправильному отображению цветов;
Анимация на Web-страницах 237
• прозрачный цвет следует определять глобально; локальный прозрачный цвет не под-
держивается;
\/ не всеми браузерами поддерживается замена изображения предыдущим;
^ если изображение не умещается на логическом экране, то может произойти аварийное
завершение работы браузера;
• в некоторых версиях браузеров кадры проигрываются не быстрее, чем с задержкой
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
палитра анимации также присутсвует.
J№-1. Знакомство с палитрой «Анимация»
С программой 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
239
> Выберите команду меню File • Open (Файл • Открыть). На экране появится диалог
Открытие файла (Open) (Рис. 6.2).
> Откройте папку, в которой вы сохранили файл Geoton.psd, и щелчком мыши
выделите его.
flam*
ц
ш
•шине
] £Д Моидокучканты b j Q
CjCaaitatia Studio
aCmelUiei Filet
UMyeBookt
£| My Received File.
И My Virtual Machine.
^) каталог CD
*Ч Цдц вшеоэвпнси
С^Мои РНС9НКИ
j ^ Ноя музыка
Имя файла:
1ип Файлов: |А» Readable Fomtfs
0 Е? G3-
й i CTKpDfIb
NJ j Отмена
Рис. 6.2. Диалог Открытие файла (Open)
> Нажмите кнопку Открыть (Open). Диалог Открытие файла (Open) закроется.
В рабочем окне программы Adobe ImageReady появится окно документа Geoton.psd
(Рис. 6.3).
Рис. 6.3. Окно документа Geoton.psd
Рис. 6.4. Палитра Animation (Анимация) с первым кадром анимации
240
Создание Web-сайтов
Мы уже говорили, что подготовка анимации в Adobe ImageReady заключается в создании
последовательности кадров, для каждого из которых определяется изображение, иремя
задержки и другие параметры. Первый кадр этой последовательности создается про-
граммой автоматически и уже находится в палитре Animation (Анимация) с миниатюрой
и ярлыком 1 в левом верхнем углу (Рис. 6.4). Этот кадр включает все видимые слои ак-
тивного рисунка.
У нижнего края палитры Animation (Анимация) расположены кнопки, управляющие соз-
данием и проигрыванием анимации. Эти кнопки имеют следующее назначение.
т - Selects looping options (Выбор параметров повторения) - открывает меню, с помо-
щью которого вы можете выбрать количество повторений анимации. Выбранный пара-
метр отображается слева от значка т. По умолчанию это - Forever (Непрерывно),
т.е. проигрывание анимации повторяется без перерыва.
Г<<| - Selects first frame (Выбор первого кадра) - переход к первому кадру анимации.
l<ii | - Selects previous frame (Выбор предыдущего кадра) - переход к предыдущему кад-
ру анимации.
I Е> | - Plays/Stops animation (Проигрывание/Остановка анимации) - включает проигры-
вание анимации. После начала воспроизведения изображение кнопки П>~1 меняется на
I a 1, нажатие которой прерывает воспроизведение анимации.
ГП>1 - Selects next frame (Выбор следующего кадра) - переход к следующему кадру.
I "у | - Tween (Создание промежуточных кадров) - автоматически генерирует промежу-
точные кадры между двумя указанными.
| Н | - Duplicates current frame (Дублирование текущего кадра) - создает копию
выбранного кадра.
| Ш | - Deletes selected frames (Удаление выбранных кадров) - удаляет выбранные кадры.
В правом верхнем углу палитры Animation (Анимация) находится кнопка 0, откры-
вающая доступ к меню палитры (Рис. 6.5). С помощью команд этого меню можно соз-
давать, удалять, копировать, вставлять и выделять кадры, генерировать промежуточные
кадры, оптимизировать анимацию и выполнять некоторые другие операции.
Dock to Palette Well
New Frame
0«М«Г(мн
DaMcAlMMtfon
Copy Frame
P«»« FtMM...
StttectAIFrtMS
Tuilin...
R«y*w* FiMMt
Optimize Animation...
Make Frames From Layers
Flatten Frames Into Layers
Create Layer for Each New Frame
v- New Layers Visible in All States/Fr
Palette Options...
antes
Рис. 6.5. Меню палитры Animation (Анимация)
Создаем анимацию с помощью Adobe ImageReady
241
Процесс подготовки анимации в Adobe ImageReady очень прост. В палитре Animation
(Анимация) последовательно создаются кадры. Графическое содержимое каждого кадра
определяется с помощью палитры Layers (Слои). При этом вы можете использовать все
доступные средства редактирования. Для каждого кадра устанавливается длительность
отображения на экране, которую можно изменять в широких пределах. При необходимости
между двумя любыми кадрами автоматически генерируется любое количество промежу-
точных кадров для создания эффекта постепенного изменения. Причем такое постепен-
ное изменение можно создавать для прозрачности, эффектов и положения объектов.
И наконец, указывается количество повторений проифывания анимации в браузере, ко-
торое определяется целым числом или может быть непрерывным. На заключительном
этапе анимация оптимизируется и сохраняется в формате GIF.
€<ПЛУШЬ JV&2. Сменяющиеся кадры
Самый простой вид анимации - это сменяющаяся последовательность кадров. Такая
анимация может быть использована, например, для показа коллекций рисунков, фотогра-
фий и т.п., что, в свою очередь, может быть использовано для привлечения внимания к
соответствующему разделу. Сменяющуюся последовательность фотофафий можно соз-
дать, если предварительно преобразовать их к единому размеру, при необходимости об-
резав, а затем вставить каждую фотофафию через буфер обмена на новый слой.
Напомним, что анимационные GIF-файлы - это последовательность кадров с заданной дли-
тельностью. Эти кадры в Adobe ImageReady создаются из слоев. Слои же, в свою очередь,
следует предварительно подготовить в самой профамме или же в Adobe Photoshop.
Создадим эффект анимации баннера из файла Geoton.psd таким образом, чтобы надписи
Вам нужна локальная сеть? и Заходите СЮДА! последовательно сменяли друг друга
через определенные промежутки времени и чтобы рисунок открытой двери появлялся
после надписи Заходите СЮДА!.
Прежде всего необходимо определить изображение для
первого кадра анимации. Это можно сделать, включив
отображение нужных слоев и выключив отображение
ненужных.
>- Увеличьте высоту палитры Layers (Слои), чтобы в
ней были видны все имеющиеся слои (Рис. 6.6).
Благодаря наличию значков с изображением открытого
глаза ф, вы можете выключить и включить отображение
слоев и эффектов на рисунке и текущем кадре анимации
и таким образом указать профамме, что должно отобра-
жаться на данном кадре. Для первого кадра мультиплика-
ции следует выключить отображение слоя Layer 3 с над-
писью Заходите СЮДА! и слоя Layer 4 с рисунком две-
ри, оставив остальные слои включенными.
>• Щелкните мышью на значке с изображением глаза
ф слева от миниатюры слоя Layer 3. Этот значок
исчезнет. Указанный слой на рисунке и первом кадре
анимации станет невидимым.
Effects
О Drop Shadow
0 Bevel and Emboss
< Background
i И о. a fa а
Puc. 6.6. Слои в палитре
Layers (Слои)
242
Создание Web-сайтов
> Подобным же образом, щелчком мыши, выключите отображение слоя Layer 4.
Включенными должны остаться только слои Background, Layer 1, Effects (Эффекты) и
Layer 2. Эти слои и будут отображаться на первом кадре мультипликации.
Теперь, когда мы определили изображение для первого кадра анимации, следует создать
следующий, второй кадр.
> Нажмите кнопку I И | - Duplicates current frame (Дублирование текущего кадра)
в нижней части палитры Animation (Анимация). В ней появится и будет выделен тем-
ной рамкой второй кадр (Рис. 6.7). Темное выделение указывает на то, что теперь этот
кадр активный, и к нему будут относиться все операции редактирования.
Рис. 6.7. Второй кадр анимации
Изображение на втором кадре полностью совпадает с первым, так как был создан дубли-
кат кадра. И теперь это изображение следует изменить. Для текущего кадра выключим
отображение слоя Layer 2 с текстом Вам нужна локальная сеть? и включим отображе-
ние слоя Layer 3 с надписью Заходите СЮДА!
> Щелкните мышью на значке *ф слева от миниатюры слоя 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 (Анимация) можно с по-
мощью кнопки 1 Ш | - Deletes selected frames (Удаление выбранных кадров), предвари-
тельно выделив их щелчками мыши при нажатой клавише liShifll. если кадры смежные
(в этом случае достаточно щелкнуть мышью только на крайних кадрах), или при нажатой
клавише II Ct r l I. если кадры несмежные. Удалить выбранные кадры можно также коман-
дой меню Delete Frame (Удалить кадр) палитры Animation (Анимация).
Филипп Л®З. Просмотр и настройка параметров «ролика»
Время задержки на экране каждого кадра по умолчанию равно 0 (ноль) секунд. Я это
значение - 0 sec. - отображается в палитре Animation (Анимация) под миниатюрой
каждого кадра. Если воспроизводить анимацию с такой задержкой, то кадры анимации
будут сменять друг друга слишком быстро. Но время задержки можно легко изменить.
Посмотрим, как изменить этот параметр одновременно для всех кадров. Предвари-
тельно кадры анимации нужно выделить. Выделение любого кадра осуществляется
простым щелчком мыши на кадре. Чтобы выделить несколько кадров, следует удержи-
вать нажатой клавишу II c t r l I.
>• Нажмите и удерживайте клавишу! c t r l I.
>• Не отпуская клавишу II c t r l I. щелкните мышью в палитре Animation (Анимация) пооче-
редно на не выделенных темным цветом кадрах анимации. Эти кадры будут выделены.
>• Отпустите клавишу IICtrl I.
Выделить все кадры анимации в палитре Animation (Анимация)
можно также с помощью команды меню палитры Animation (Ани-
мация) Select All Frames (Выделить все кадры).
Теперь, когда все три кадра анимации выделены, установим для
каждого из них время задержки, равное 1 секунде.
No delay
0.1 seconds
0.2
0.5
1.0
2.0
5.0
10.0
Other..
•/ 0 seconds
Щелкните мышью в палитре Animation (Анимация) на миниа-
тюрном значке-треугольнике • - Selects frame delay time
(Выбор времени задержки кадра) справа от надписи 0 sec. под
миниатюрой первого кадра. На экране появится меню времени Рис. 6.9. Меню
задержки (Рис. 6.9). времени задержки
244
Создание Web-сайтов
> В появившемся меню выберите 1.0 (1 секунда). Это значение - 1 sec. - отобразится в
палитре Animation (Анимация) под миниатюрами всех трех кадров.
Просмотрим полученный результат.
> Нажмите кнопку | >'] - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация). Начнете проигрывание эффекта.
Изображение кнопки 11> | изменится на | Р |.
В окне документа вы увидите, как периодически сменяются надписи Вам нужна
локальная сеть? и Заходите СЮДА! Причем после появления надписи Заходите
СЮДА! появляется также рисунок открытой двери. В процессе проигрывания в палит-
ре Animation (Анимация) будет перемещаться выделение, отмечая текущий кадр.
>• Нажмите кнопку I D [ - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация), чтобы прекратить проигрывание
эффекта.
Увеличим время показа на экране первого кадра анимации до 1,5 секунд. Предварительно
этот кадр нужно выделить.
> Нажмите кнопку | « | - Selects first frame (Выбрать первый кадр) в нижней части па-
литры Animation (Анимация). Кадр станет активным.
Перейти к следующим кадрам палитры Animation (Анимация) можно, нажимая кнопку
Ц>| - Selects next frame (Выбрать следующий кадр), а к предыдущим - нажимая кнопку
[ <| | - Selects previous frame (Выбрать предыдущий кадр) в нижней части палитры
Animation (Анимация).
Значение 1,5 секунды в меню времени задержки отсутствует. Поэтому для указания вре-
мени следует воспользоваться специальным диалогом.
> Щелкните мышью в палитре Animation (Анима-
ция) на треугольном значке •*• - Selects frame
delay time (Выбор времени задержки кадра) под
миниатюрой первого кадра и в появившемся ме-
ню времени задержки выберите Other (Другое).
На экране появится диалог Set Frame Delay
(Установка времени задержки кадра) (Рис. 6.10).
>• В поле ввода Set Delay (Установить задержку)
введите 1,5.
> Нажав кнопку ОК, закройте диалог Set Frame Delay (Установка времени задержки
кадра). Указанное время задержки - 1,5 sec. - отобразится под миниатюрой перво-
го кадра.
> Просмотрите анимацию, нажав кнопку П>~1 - Plays/Stops animation (Проигрыва-
ние/Остановка анимации) в палитре Animation (Анимация).
Вы увидите, что теперь надпись Вам нужна локальная сеть? сохраняется на экране
дольше чем прежде, а затем, после ее исчезновения появляется надпись Заходите
СЮДА! и через секунду после нее - рисунок открытой двери.
> Остановите проигрывание анимации нажатием кнопки | Q |.
[Sel Fiame Delay
Set Delay: | l
_]seconds
1
OK
Cancel
Рис. 6.10. Диалог Set Frame Delay
(Установка времени задержки
кадра)
Set Loop Count
Play: | l
times j
OK I
Cancel
Создаем анимацию с помощью Adobe ImageReady 245
Вы, вероятно, уже заметили, что проигрывание мультипликации повторяется беспрерыв-
но, до остановки кнопкой I D |. Так предусмотрено по умолчанию, и информация об этом
режиме проигрывания - Forever (Непрерывно) - выводится у левого края нижней строки
палитры Animation (Анимация).
>• Щелкните мышью на треугольном значке •
справа от надписи Forever (Непрерывно). На эк-
ране появится меню повторений, из которого вы
можете выбрать значение Once (1 раз) или Other
(Другое). В последнем случае на экране появится
диалог Set Loop Count (Установка числа повто- п .',,. ^
-\ /п ^ i i\ Рис. 6.11. Диалог
рении) (Рис. б. 11), в котором следует указать ко- - set LOOD Count
личество повторений анимации. (Установка числа повторений)
>- Щелкните мышью на свободном пространстве
рабочего окна, чтобы скрыть меню повторений.
Итак, мы создали анимацию из сменяющихся кадров и научились настраивать ее пара-
метры. В следующем опыте мы познакомимся с автоматической генерацией кадров.
ФТЬ(УШЬ JVQ4. «Бегущие», постепенно появляющиеся
и исчезающие рисунки
В предыдущих опытах мы создавали и изменяли каждый кадр анимации вручную.
Но Adobe ImageReady позволяет автоматически сгенерировать последовательность кад-
ров между двумя указанными и отличающимися друг от друга кадрами, которые в сово-
купности создадут плавный переход от первого кадра к последнему. Для автоматически
созданных кадров можно также определить, что именно должно изменяться: положение
объектов, их прозрачность или эффекты, или же все эти три атрибута одновременно.
Изменим анимацию таким образом, чтобы надпись Заходите СЮДА!, конкретизируя
приглашение, двигалась в направлении постепенно появляющейся открытой двери и «за-
ходила» в нее. Но сначала изменим время задержки второго и третьего кадров на
0,2 секунды.
> Щелкните мышью на втором кадре в палитре Animation (Анимация), чтобы вы-
делить его.
>• Нажав и удерживая клавишу llShiftl. щелкните мышью на третьем кадре анимации,
Оба кадра будут выделены.
> Отпустите клавишу №Щ.
>• Щелкните мышью в палитре Animation (Анимация) на треугольном значке т -
Selects frame delay time (Выбор времени задержки кадра) под миниатюрой третьего
кадра и в появившемся меню времени задержки выберите 0.2. Это время - 0,2 sec. -
отобразится под миниатюрами второго и третьего кадров.
Теперь для третьего кадра анимации следует изменить положение слоя Layer 3 так, что-
бы правый край надписи Заходите СЮДА! на этом слое «входил» в открытую дверь.
246
Создание Web-c айтов
>• Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным, а выде-
ление второго кадра будет снято.
Переместим слой Layer 3 в окне документа вправо, предварительно выделив его.
> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слой будет выделен.
> Нажмите кнопку \>*\ - Move Tool (V) (Инструмент «Перемещение» (V)) на панели
инструментов (Tools), чтобы выбрать данный инструмент.
>• Нажмите и удерживайте клавишу llsi i ml.
>• Не отпуская клавишу iiShifll. нажмите несколько раз клавишу [ Q. Каждое нажатие
этой клавиши будет перемещать в окне документа надпись Заходите СЮДА! на
10 пикселов вправо. Расположите надпись так, чтобы последний ее символ находился
«в открытой двери» (Рис. 6.12).
Uj j Geolon psd @ 1U02 (Unginal)
шшщ
Заходите СЮШ!
~370К/~)РЕв »
Рис. 6.12. Слой Layer 3 перемещен
> Отпустите клавишу iiShi ft I.
не нажимая
> Откорректируйте положение слоя Layer 3 с помощью клавиш Q И
клавишу liShiftl. Напомним, что в этом случае каждое нажатие стрелочной клавиши пе-
ремещает слой на один пиксел в соответствующем направлении.
Выделим второй и третий кадры, чтобы сгенерировать между ними последовательность
кадров, которые создадут эффект анимации.
>• Нажмите клавишу 11Shift I.
>• В палитре Animation (Анимация) щелкните мышью на миниатюре второго кадра,
чтобы выделить его вдобавок к третьему, уже выделенному кадру.
>• Отпустите клавишу |[ Shift |.
Теперь между вторым и третьим кадрами можно автоматически сгенерировать по-
следовательность кадров, которые создадут эффект плавного перехода.
>• Нажмите кнопку I «у I - Tween (Создание промежуточных кадров) в нижней части па-
литры Animation (Анимация). На экране появится диалог Tween (Промежуточные
кадры) (Рис. 6.13).
Создаем анимацию с помощью Adobe ImageReady
247
I ween Wi th: [Selection СЖ
£rames to Add: | 5 |
Layer s
Cancel
©AI Layers
I O Selected Layers
Parameters -
0 Position
И 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) и, таким образом, создан плавный переход изображения.
ис.' 0,2 stc.' 0.2 « с 0,2 ис.' 0,2 ч с 0,2 ж. * 0,2 sac.
Рис. 6.14. Промежуточные кадры созданы
248
Создание Web-сайтов
> Нажмите кнопку Г>"1 - Plays animation (Проигрывание анимации) в нижней части
палитры Animation (Анимация) и просмотрите созданный эффект.
Вы увидите, что теперь, После исчезновения надписи Вам нужна локальная сеть?,
возникает надпись Заходите СЮДА!, которая движется в направлении постепенно появ-
ляющейся «открытой двери» и «заходит» в нее.
>• Остановите проигрывание анимации нажатием кнопки 1 п |.
Анимация готова. Теперь ее нужно оптимизировать и сохранить в формате GIF.
€n*ywn J№5. Оптимизация и сохранение анимации
В предыдущей главе мы уже подробно рассматривали процесс оптимизации графики для
Web. А теперь остановимся на специфических приемах оптимизации анимации.
Как мы уже не раз подчеркивали в предыдущих главах, оптимизация призвана обеспе-
чить наименьший размер файла при минимальных потерях качества. Размер анимацион-
ного файла зависит от количества кадров в нем. Чем больше кадров, тем больше будет
размер файла. К счастью, существует способ значительно уменьшить размер файла
посредством удаления избыточной информации, то есть такой информации, которая по-
вторяется в каждом кадре. Если созданная мультипликация представляет собой лишь по-
следовательную демонстрацию не связанных между собой картинок, то объем избыточ-
ной информации будет минимальным, и каждый кадр придется почти полностью сохра-
нить в анимационном файле. Если же анимация - это последовательное преобразование
изображения, как в нашем случае, то в каждом последовательном кадре изменяется лишь
небольшая часть рисунка, и нет никакой необходимости в полном сохранении всех кад-
ров анимации. Избыточную информацию можно смело отбросить и этим значительно
уменьшить размер файла.
>• Нажмите кнопку 0 в правом верхнем углу па-
литры Animation (Анимация) и в появившемся
меню выберите команду Optimize Animation
(Оптимизация анимации). На экране появится
диалог Optimize Animation (Оптимизация ани-
мации) (Рис. 6.15), в котором определяются па-
раметры оптимизации анимации.
При установленном по умолчанию флажке Bounding
Box (Граничные области) Adobe ImageReady в каж-
дом кадре удаляет те фрагменты изображения, которые присутствовали в предыдущем
кадре, и сохраняет только измененные, по сравнению с предыдущим кадром, области.
При установленном флажке Redundant Pixel Removal (Удаление избыточных пикселов)
удаляются все пикселы каждого кадра, которые не изменены по сравнению с предыду-
щим кадром. Этот флажок, как и предыдущий, устанавливается по умолчанию и таким
образом Adobe ImageReady автоматически подбирает наилучшие параметры оптимиза-
ции анимации.
> Закройте диалог Optimize Animation (Оптимизация анимации), нажав кнопку ОК.
Установленные параметры будут применены.
Optimize By
В Bounding Box
0 ftedundant pixel Removal
Рис. 6.15. Диалог
Optimize Animation
(Оптимизация анимацьи)
Создаем анимацию с помощью Adobe ImageReady
249
Теперь необходимо оптимизировать изображение.
у Убедитесь, что на экране присутствует палитра Optimize (Оптимизация). В противном
случае выберите команду меню Window • Optimize (Окно • Оптимизация).
v В открывающемся списке Format (Формат) палитры Optimize (Оптимизация) выбе-
рите GIF.
>• В открывающемся списке Colors (Цвета) этой же палитры выберите 32.
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. Будет
выполнена оптимизация документа с установленными параметрами.
Специфика оптимизации изображения, содержащего анимацию, заключается в том, что
необходимо проверить, все ли кадры анимации оптимизированы корректно.
> Переключаясь между кадрами, проверьте, как оптимизирован каждый кадр, и, если
необходимо, измените параметры оптимизации.
Созданную мультипликацию можно просмотреть в браузере.
>• Выберите команду меню File • Preview In (Файл • Предварительный просмотр в) и в
появившемся меню выберите программу просмотра, в которой вы хотите открыть
рисунок. Будет запущен выбранный браузер, в его рабочем окне откроется баннер и
сразу же начнется проигрывание анимации (Рис. 6.16).
«й Geoton - Microsoft Internet Explorer
Файл Правка Вид Избранное Сервис Справка
НаШ
I Назад -
p Поиск <j^> Избранное
- Медиа
Адрес; | Щ СЛР ocumenli and SeUingsWaiilyU.ocal Settings\Temp4ImageReady\TargetPreview4\GtiT*J Q Переход Г Lii
Links
Вам нужна локальная сеть?
Format: GIF
Dimensions: 463w x 60h
Size: 22,43K
ittinp: Selective, 32 Cotois, 100% Diffusion Diiher, 13 frames, Transparency on, No Transparency Dither, Interlaced, 0%
Web Snap
«head*
<meta http-ec[uiv="Ci>ntent-Type'1 concent""te3£t/htiul; ch*rset»windows-12Sl">
</h«ad>
<body bgcolor = "iFFFFFFH le£rmarffin«"O" topttar^in*"0" i
<1— Iaa^eReady Slices (Geoton.psd) —>
g src»"inaag*s/Ceoton. gif" vldth*"468" heighC*"60"
<!-- End ImageReady Slices -->
I Готово
] | Щ. My Computer
Puc. 6.16. Предварительный просмотр анимации в браузере
Просмотреть анимацию в браузере, установленном в операционной системе по умолча-
нию, можно, нажав кнопку \0,\ - Preview in Default Browser (Ctrl+Alt+P) (Предваритель-
ный просмотр в браузере по умолчанию (Ctrl+Alt+P)).
250
Создание 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).
Save Optimized
]3 ©
j l j eoton
| Images Only Coif)
|OefauH Settings
[JUStcst
El
И
Сохранить I
Отмена
Рис. 6.17. Диалог Save Optimized (Сохранение оптимизированного документа)
Создаем анимацию с помощью Adobe ImageReady 251
'> Откройте папку Web, в которой сохранены файлы сайта.
> Убедитесь, что в поле ввода Имя файла (File name) no умолчанию предлагается имя
сохраняемого файла - 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, входящая в состав пакета М!3 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
253
изменения в коде страниц и упорно восстанавливает теги, удаленные 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 Of-
fice FrontPage 2003).
При первом запуске программы на экране появится диалог, в котором сообщается, что
программа FrontPage не является редактором Web-страниц по умолчанию и предлагается
сделать ее таковой (Рис. 7.1).
Microsoft Office FrontPage не является редактором
веб-страниц, используемым по умолчанию.
Назначить эту программу редактором по умолчанию?
0 Выполнять эту проверку при запуске FrontPage
в_гж.
Цет
Рис. 7.1. Диалог с предложением назначить программу
FrontPage редактором Web-страниц по умолчанию
>• Нажмите кнопку Да (Yes). На экране останется только рабочее окно программы (Рис. 7.2).
254
Создание Web-сайтов
~?Т *~ЧЙ>Г5Ч •o^^.mnDa^liuia 0иПи¥Т]
Обычный * Times New Roman
* 3 112 irr) . | Ж К
• Приступая к работе
Off ice в Интернете
• Подключиться к веб-узлу
Microsoft Office Online
« Последние сведения об
использовании FrontPage
• Автоматически обновлять
этот слисок из Веба
Искать:
Пример: "Печать нескольких
коти*
ДДВСр«депенном ®КОД <^Проснотр|рГД
Открыть
ввб-узлы
^
Страницы
£^ Открыть.,.
О Создать страницу или узел...
Рмс. 7.2. Рабочее окно программы FrontPage
В заголовке окна расположен значок системного меню, название программы с именем
редактируемого в данный момент документа и стандартные кнопки для сворачивания и
закрытия окна программы. Ниже находится меню, содержащее команды управления про-
граммой. Во время работы редко используемые пункты меню могут быть скрыты, В, что-
бы их выбрать, нужно дополнительно щелкнуть на стрелке « в нижней части меню вто-
рого уровня (Рис. 7.3).
Под меню расположены две панели инструментов: Стандарт-
ная (Standard) для быстрого вызова наиболее часто используе-
мых команд и Форматирование (Formatting) для форматиро-
вания текста. Как и другие программы из пакета MS Office,
редактор FrontPage позволяет отображать или скрывать опре-
деленные панели инструментов, а также менять набор кнопок
на панелях.
Основную часть рабочего окна занимают вкладки редактируе-
мых документов. Текущий документ - HOB_CTp_1.htm
(new_page_l.htm).
В правой части рабочего окна расположена область задач,
в которой можно найти справку о различных возможностях
программы, выполнять различные действия - поиск, работу
с буфером обмена и т.п. Область задач можно скрыть, освобо-
див место для проектирования страниц.
ш
ш
т
ш
*
В
i
\ Вставка Формаг С»
Страница
Папки
Удаленный веб-узв/;
0ТЧСТЫ i
Переходы
Гнперссыяки
Задачи
Динейка и сетка •
Область задач Ctii +F1
Панели инструмент >в •
Обновить F5
Рис. 7.3. Сокращенный
вид меню
> Закройте область задач, нажав комбинацию клавиш |
Создание Web-сайта с помощью Microsoft FrontPage 2003 255
Чтобы вновь показать область задач, нужно опять нажать комбинацию клавиш )ГС'Г| 1+РЧ.
В нижней части рабочего окна программы находится строка состояния, на которой выво-
дится информация о ходе выполнения различных команд.
В 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-узла или выборочной публикации отдельных файлов. Также можно син-
хронизировать файлы в двух или нескольких расположениях, чтобы обеспечить своевре-
менное обновление узлов с одинаковым содержимым. В представлении можно выпол-
нить отбор для отображения содержимого папки, файлов для публикации, файлов не для
публикации и конфликтующих файлов. ,
256
Создание 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
О Файловая система
Импорт файлов из исходного каталога на локальном компьютере или в локальной сети
© Протокол HTTP]
Импорт файлов с веб-узла в Интернете
Расположение веб-узла (например: htr.p://example.com):
•••••
|http;//
Кодовой катсукг;
1
_ J | Обзор... |
1
D Опочить дочасмя узлы
D йтодьмють гнсстный FTP
О Требуется шифрованное подключение 55L
Рис. 7.4. Диалог Мастер импорта Web-узлов: начало
(Import Web Site Wizard - Welcome)
Вы можете импортировать сайт, находящийся на локальном диске, например взять сайт,
созданный нами в предыдущих главах. Для этого нужно установить переключатель Фай-
ловая система (File System) в группе переключателей Способ получения файлов
Создание Web-сайта с помощью Microsoft FrontPage 2003
257
(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 Ser.tings\Vasily\My Documenr.s\MoH ве6-узлы\мой_узел|
D Добавить на текущий мб-узел
• требуется шифрованное подключение SSL
iniiinni;
Рис. 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 килобайт.
9-1210
258
Создание Web-сайтов
FrontPage импортирует веб-узел из Hhttp://wwvv.gov.ru1\ загрузив домашнюю страницу и все страницы, на
которые она ссылается, Затеи рекурсивно будут загружаться страницы, на которые ссылаются уже
загруженные. Можно ограничить число загружаемых страниц одним из следующих способов:
СЗ г Цп° £ т и Р0 М Т Ь ломащнюю страницу И!
О Импортировать не более
• Импортировать только файлы HTML и изображении
последующих уровней связанных С ней страниц
Г К5
Рис. 7.6. Диалог Мастер импорта Web-узлов: задание ограничений на импорт
(Import Web Site Wizard - Set import limits)
> Установите флажок Импортировать только файлы HTML и изображений (Import
only HTML and image files).
Для ознакомительных целей нам не требуется загружать сайт целиком. Поэтому, если вы
используете медленное соединение с Интернетом, то можно уменьшить объем загружае-
мых файлов и число уровней в структуре сайта.
>. Нажмите кнопку Далее (Next), чтобы перейти к заключительному диалогу мастера
импорта.
> Нажмите кнопку Готово (Finish) в заключительном диалоге мастера. Будет
установлено соединение с Интернетом, и на экране появится диалог Ход импорта
Web-узла (Import Web Site Progress), в котором будет отображаться процесс
загрузки файлов сайта (Рис. 7.7).
Ход импорта веб-узла
Импорт Vi-cik^.jpg' из
•http://www.gov.ru/'
в 'C:/Documents and Settings/VasMy/My
Documents/Мои веб-узлы/мой_узел'
Отмена
Рис. 7.7. Диалог Ход импорта Web-узла
(Import Web Site Progress)
Создание Web-сайта с помощью Microsoft FrontPage 2003
259
В процессе загрузки файлов сайта может появиться диалог Подтвердите замену файла
(Confirm File Replace) (Рис. 7.8).
Подтверждение замены Файла
Этот веб-узел уже содержит документ 'index,htm'.
Заменить существующий файл?
Да 11 : Да для всех > Нет • { Отмена
Рис. 7.8. Диалог Подтвердите замену файла (Confirm File Replace)
> В случае появления диалога Подтвердите замену файла (Confirm File Replace) на-
жмите кнопку Нет (No), чтобы не заменять уже скопированный файл.
Импорт будет завершен после загрузки всех файлов или при достижении установленного
предела размера сайта.
В процессе импорта программа FrontPage копирует файлы сайта с удаленного сервера на
локальный диск и размещает их в отдельной папке. Фактически сайт представляет собой
набор файлов, содержащихся в определенной папке и вложенных папках. Обычно Front-
Page размещает сайты в папке Мои Web-узлы (My Web Sites), которая создается в папке
Мои документы (My Documents). Если для сайта не указано имя, ему по умолчанию при-
сваивается имя мой_узел (mywebl) или похожее.
После завершения импорта сайт будет загружен в редактор FrontPage, и в заголовке окна про-
граммы рядом с названием приложения появится путь к папке сайта на локальном диске. Про-
грамма переключится в представление Папки (Folders). В левой части рабочего окна про-
граммы будет показано дерево папок, а в правой части появится новая вкладка со спи-
ском папок и файлов сайта (Рис. 7.9).
> Щелкните правой кнопкой мыши на вкладке HOB_CTp_1.htm (new_page_l.htm) и в
появившемся контекстном меню выберите команду меню Закрыть (Close), чтобы за-
крыть пустую страницу, созданную при запуске программы.
В представлении Папки (Folders) все страницы, рисунки и другие файлы, составляющие
сайт, представлены так же, как и в программе Проводник (Explorer) операционной систе-
мы Windows. Слева выводится дерево папок, справа - содержимое выбранной папки.
В этом режиме вы можете перемещать, удалять или переименовывать файлы в ходе рабо-
ты над сайтом. Двойной щелчок на имени файла страницы открывает ее для редактиро-
вания. Обычно, файл главной страницы сайта называется index.htm или default.htm. . •
> Найдите файл с таким именем в списке файлов и дважды щелкните на нем мышью. В
правой части рабочего окна появится новая вкладка index.htm, и на ней будет показа-
на выбранная страница в режиме Конструктор (Design) представления Страница
(Page) (Рис. 7.10).
260
Создание Web-сайтов
Правка £ ш Вставка Форцат Сервис Хаблица Данные £амки Дкно £правка
Q vctf • Q М
I Jt
• Р • -в
ж К 3 | № Ш
Список папок П l^a x
£2) -Private
^ ) images
Щ hdex.htm
(^images
index.htm СЕРвЕРССГАНОВГОСУ...
Содержимое 'C:\Documents and Settings\Vasiy\My Documents \Мои веб-узлы\мой_узеп'
^ия I Название
Размер | Тип I Изменен
10КБ htm 23.08.2004 23:24 VA5\Vaaly
5Удаленныйееб-узел БЮтчеты 5°Переходы ^Гиперссылки
Ш
|[
[по умолчан.ю
Рис. 7.9. Представление Папки (Folders) импортированного сайта
Н Microsott FrontPage - CADocumenls and SellingsWasilySMy Documenls\MoM веб-узлы\мои_||зел\т(1ек.Ыг
Файл Правка Дна Вставка Формат Сервис Хаблица Данные £аикн Дкно Справка
Обычный • (шрифт по умолчанию)
ж л н
IА »"11= Е * * l S
Список папок П ^ ) х
^-1 тК'УТиТ, JW7T.•!• . i...
ffi £Э „private
^ ) images
В
1 &°Перехода
Si веб-узел jl index.litm
;<body>i i<di
ОФИЦИАЛЬНАЯ
РОСС
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ИСПОЛНИТЕЛЬНОЙ
ВЛАСТИ
РОССИЙСКОЙ
ФЕДЕРАЦИИ
алдсть *
рогсмйской
фЕДЕРАиИИ
С разделением И Код ^Просмотр! I < 1
П,аг -.. ilnii/ !
_j[0:21 при 56 кбчт/с1[618 х 37о |по чмопчанию |настро|<ка
Рис. 7.10. Режим Конструктор (Design) представления Страница (Page)
Создание Web-сайта с помощью Microsoft FrontPage 2003
261
В меню Вид (View) представление Страница (Page) выделено, а режим Конструктор
(Design) этого представления выделен в нижней части вкладки index.htm.
Режим Конструктор (Design) представления Страница (Page) предназначен для редакти-
рования и просмотра текущей страницы сайта. Это основной рабочий режим, в котором
доступны команды вставки элементов, форматирования текста, работы с таблицами и
другие средства FrontPage для редактирования страниц. В нижней части вкладки распо-
ложены кнопки для выбора других режимов представления страницы.
В режиме С разделением (Split) представления Страница (Page) можно проверять и ре-
дактировать содержимое Web-страницы в формате с разделением экрана, предоставляю-
щем одновременный доступ к режимам Код (Code) и Конструктор (Design) (Рис. 7.11).
- C:\Documents and Settings\Vasily\My DocumenU\MoH веб узлы\мой_узеп\1п<1ех htm
Правка Лиц Вставка 'Рормат Сервис Хаблица Данные Рамки QKHO Справка
-1 <• ЙГЁ~Н Ж\%\ в oTif
• L3 pri vate
•• i3 images
. ^i ndex.ht m
1 <html>
:: <head>
3 Oaeta http-equiv»"Content-Type" content*
'text/h.tal">
<meta name-1
<meta name*
<meta
f <body bgcolor
<div align
description" content-"Ruasian Government offi ci al infornation, ofClofl
keywords" content-"Ru3sia/ rusaian gouermaent, oCficial news, decree й-
author" content*"design: Babenko Vladimir, redesign: Davidov Denis,Ш-*
<title>CEPBEP ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ POCCHH</title>
i </head>
IFFFFFF" text="#000000" link="iC000000" vlink = "|000000"
te с ">< cente t>
'0" cellDaddiM="3" се11зиз^1по="0'г>
ОФИЦИАЛЬНАЯ
РОССИЯ
1
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
|021 при56^бит/с !р>18х185 ijnoамолчанню Цнастрой^а ; ^
Рис. 7.11. Режим С разделением (Split) представления Страница (Page)
Режим Код (Code) представления Страница (Page) позволяет самостоятельно просмат-
ривать, записывать и редактировать теги HTML (Рис. 7.12).
В этом и двух предыдущих режимах в верхней части вкладки index.htm расположена
панель для быстрого выбора тега, которую можно скрыть или показать с помощью ко-
манды меню Вид • Быстрый выбор тега (Quick Tag Selector),
Режим Просмотр (Preview) представления Страница (Page) .позволяет просматривать
внешний вид страницы в Web-обозревателе, не сохраняя ее (Рис. 7.13).
262
Создание Web-сайтов
Н Miciosoll FiontPage - C:\Documents and Setlings\Vasily\My Documents\Mou веб чзлы\мой_чзел\ии)ек htm
Правка £ид Вставка Формат Сервис Лаблица Данные Еамкн QKHO Справка
Обычный • [шри*г по умолчанию)
ж к
т в | А *' 11= :=
I Ш -
Список папок D
"*"•""•""* •
| £3 .private
В
3°Переходь
веб-узел ] j index.htm\4
|<body> j<dtv>
~Е
2 <head>
3 <meta htcp-equiv«"Content-Type'
4 <aeta naae»"descciption" content-"Russian Government offi ci al information, offic:
5 <meta паше-"keywords" content*"Russia, rua3ian government, official news, decree
6 <meta name«"author" content="design: Babenfco Vladimir, redesign: Davidov Denis,H
7 <title>CEPBEP ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ POCCHM</title>
8 </head>
9 <body bgcolor»"#FFFFFF" text»"#000D00" link«"#QOO000" vlink="#000000" alink*"|OC
10 <div align»"center"Xcentei>
11 <table border»"0" cellpadding*"3" cellspacing»"O">
12 <tr><td align*"center" colspan«rT2"><iiig align-"top" srca^ain/img/blank.gif" w:
13 <!— OCRIPT LAUGUAGE-JavaScriptl.l>
14
15 var HH_contentVersion - 5;
16 var plugln - (navigator.aimeTypes && navigator.mimeTypes['*application/x-shockuave-i
17 if ( plugin ) {
18
19
20
21
22
23
24
25
rar words - navigator.plugins["Shocfewave Fl ash"].descri pti on.spl i tf" "J;
:or (var i • 0; i < words.length; ++i)
if (isHaN(parseInt{vo£ds[i])))
:ontinue;
[_Piw5inVersion » woiii3[i];
var MM_FlashCanPlay - HH_PluginVersion >» MH_contentVeision;
QKO
OHCTDVKTOP S С разделением
ЦПросмотр i|< I
'- - - • •"• • - • * - - • ' i
! H ачните оаботч с нажатия этой кнопки L
AZJL
]|пс1 умолчанию
Рис. 7.12. Режим Код (Code) представления Страница (Page)
R Miciosoll FiontPage • CADocuments and SeltingsWasily\My DocuirtenU\MoM веб узлы\мой y^
Дравка йид Вставка Формат Сервис Хаблииа Данные £аики QKHO Справка
31 * * a I ш 9 Ш ш | А ** I i= В tie i* I ffl • Е •
ОФИЦИАЛЬНАЯ
роееия
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
•Конструктор Всраэделением ШЗКод
Рис. 7.13. Режим Просмотр (Preview) представления Страница (Page)
Создание Web-сайта с помощью Microsoft FrontPage 2003
263
Закройте страницу index.htm, нажав комбинацию клавиш I c t r l 1-нгН Мы снова вернемся
на вкладку Web-узел (Web Site) в представлении Папки (Folders) (Рис. 7.9).
Нажмите кнопку Отчеты (Reports) в нижней части вкладки Web-узел (Web Site).
В правой части окна будет отображен отчет Сводка по узлу (Site Summary), содер-
жащий общие сведения о структуре сайта: количество файлов, рисунков, ссылок и
другую информацию (Рис. 7.14).
Н Miciosoft FionlPage • CADocuments and SellingsWdsily\My DocumentsVMou ееб узяы\мой_узе«
Файл Правка £ид
Формат Сервис
Хаблнца Данные £амки QKHO £правка
«!>!•
к ч | ш
IА *' I != Е
I В - £ •
Список папок
£Э .private
BE £ } mam
<5J Index.htm
Сводка по «рлу *
Имя
Число!
Размер I Описание
£ | Рисунки 91
Несвязанные Ф... S
Связанна файлы 117
"} Медленнью стр.,.
Последние лоб...
Гиперсс.ылк,и
? Непроверенные,.,
€9 Неработающие ...
^ Д Внешние гиперс..,
Ef t Внутренние run,,.
( О Ошибки конпон. • •
W Незавершенные.,.
Связи с таблиц,,,
Динанические в..,
О
О
125
1762
105
40
105
1657
О
О
О
О
О
271КБ Файлы рисунков на текущем веб-узле (GIF, JPG, BMP и т.п.)
7КБ Файлы на текущей веб-узле, которых нельзя достигнуть, начав с до...
671КБ Файлы на текущем веб-узле, которых можно достигнуть, начав с дои...
ОКБ Страницы на текущем веб-узле, у которых время загрузки превышав.,.
ОКБ Файлы на текущем веб-узле, не изменявшиеся в течение 72 дней
678КБ Файлы на текущей веб-узле, созданные за последние 30 дней
8се гиперссылки текущего веб-узла
Гиперссылки, указывающие на неподтвержденные файлы
Гиперссылки, указывающие на недоступные файлы
Гиперссылки, указывающие на файлы вне текущего веб-узла
Гиперссылки, указывающие на файлы на текущем веб-узле
Файлы на текущем веб-узле с компонентами, сообщающими об ошибке
Задачи на текущем веб-узле, не помеченные как завершенные
Тены на текущем веб-узле, не примененные ни к одному (райлу
Все связи с таблицами стилей текущего веб-узла.
Все файлы, объединенные с динамическим веб-шаблоном.
ГТ ЙПапки fflУдаленный веб-узел ^ Х f™ Э°Пеовходы 61 Гиперссылки
Для получения справки нажмите клавишу F1
Рис. 7.14. Отчет Сводка по узлу (Site Summary) представления Отчеты (Reports)
Представление Отчеты (Reports) позволяет получать и просматривать статистическую
информацию о Web-сайте и проводить анализ с целью выявления потенциальных проб-
лем и ошибок, допущенных при разработке. Редактор FrontPage предлагает различные
отчеты, собирающие информацию о размере сайта, количестве страниц и рисунков, не-
доступных страницах, разорванных ссылках, «медленных» страницах и другие сведения.
Эти отчеты можно выбрать из открывающегося списка в верхней части вкладки Web-
узел (Web Site).
> Выберите команду меню Вид • Переходы (View • Navigation).
Представление Переходы (Navigation) предназначено для создания структурной схемы,
определяющей связи и возможные пути переходов между страницами сайта. Такая схема
требуется, например, для создания и автоматического обновления навигационных меню
на страницах и оглавления сайта. Схема навигации используется только на этапе проек-
тирования и не хранится на Web-сервере, поэтому у импортированного сайта она отсут-
ствует. Подробнее о структуре навигации мы поговорим в отдельном опыте.
264
Создание Web-сайтов
>• Выберите команду меню Вид • Гиперссылки (View • Hyperlinks) и щелкните мышью
на элементе index.htm в левой части рабочего окна программы, чтобы переключиться
в представление Гиперссылки (Hyperlinks) (Рис. 7.15).
oil FrontPage - C:\Oocuments and SettingsWaiNjAMy ОосшпеШЛМои веб аэлы\мой_алеп
Правка Вид Вставка Формат Сервис Хаблина Данные Самки Якно Справка
#1Ш • К •
Список папок П Г"1 X
£ 3 C:\Oocuments and Setting
* £ 2 -Private
+ £ 3 ffnages
A
SH всб-уэся |
Гиперссылки для 'index.htm'
даленный веб-узел (^Отчеты ^Переходы
m3in/symbo!5/osrf3.2.htinl
:fHc:///cgi-bin/Count.cgi
!mein/page8.html
;main/p*ge3.html
! main/mini stry/isp-vlasr.44. htnnl
mah/pagelO.html
•,§£) http: ffwvwi. serf .gov.ru/
-^ЫЬр://www. cfcrf.ru/
http; //www. sch. gov. ru/
main/regions/regioni-44 .html
'matrVsymbols/gsrf 1 ,html
C:\Documents and SetdngtSVa ij^Mjf Оосшлеп1$\Мои веб-узлы\мой_узеп\|пс1ех.г11т
;no умолчанию :;настройк<! /
Рис. 7.15. Представление Гиперссылки (Hyperlinks)
В этом режиме в правой части рабочего окна отображается схема гипертекстовых связей
между страницами сайта, документами и рисунками. С помощью этой схемы можно про-
следить за входящими и исходящими ссылками для каждой страницы. О гиперссылках
мы поговорим подробнее в отдельном опыте.
Представление Задачи (Tasks) предназначено в основном для планирования коллектив-
ной работы над проектом сайта. В этом режиме можно запланировать задачи, закрепить
их за отдельными разработчиками и следить за ходом их выполнения.
€iu»t/m J\@2. Создаем макет Web-сайта
Сайт в программе FrontPage представляет собой совокупность HTML-страниц, рисунков,
документов и других файлов, хранящихся на локальном диске или на Web-сервере.
Обычно все файлы сайта находятся в единой папке и вложенных в нее папках. Название
папки сайта соответствует названию сайта. Редактор FrontPage позволяет работать с сай-
том как с единым целым - открывать, копировать, настраивать параме