Открыть Электронные книги
Категории
Открыть Аудиокниги
Категории
Открыть Журналы
Категории
Открыть Документы
Категории
Создание Web-сайтов
без посторонней помощи
«ТЕХНИЧЕСКИЙ БЕСТСЕЛЛЕР»
Москва
УДК 004.738.52(075.4)
ББК 32.973.202я78-1
С54
Г Л А В А 7. Создание Web-сайта
с помошью Microsoft FrontPage 2003 252
Опыт №1. Знакомство с рабочими окнами программы 253
i
Опыт №2. Создаем макет Web-сайта 264
Опыт №3. Создаем текст и списки. Бегущая строка •. 275
Создание Web-сайтов
Web-страница изнутри
Как известно, основной объем информации, доступной в сети Интернет, размещается во
«всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной
гигантской библиотеке. В этой библиотеке информация представлена в виде связанных
между собой документов, которые называются Web-страницами. Каждая Web-страница
может содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие стра-
ницы могут размещаться на компьютерах в любой части света. При подключении к
WWW вы получаете равный доступ к сведениям, разбросанным по всему миру. Собра-
ние страниц, объединенных некоторой общей темой и помещенных, как правило, на од-
ном компьютере, называется Web-узлом или сайтом. Узлы Web подобны книгам, а Web-
страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также
программы, обеспечивающие поддержку сайтов, называются серверами. На одном сер-
вере может размещаться множество Web-узлов или сайтов.
Просмотреть любую Web-страницу можно с помощью специальных программ - браузе-
ров, наиболее популярные из которых - Internet Explorer, Opera, Mozilla и Netscape.
На Web-страницах обычно, кроме основного текста, всегда присутствуют выделенные
другим цветом и подчеркнутые слова или фразы и активные изображения, которые из-
меняются при установке на них указателя мыши. Например, кнопка может стать рельеф-
ной или изменить свой цвет. Это - гипертекстовые ссылки, предназначенные для связи с
другими страницами, раскрывающими содержание ссылок. Если щелкнуть мышью на
такой ссылке, то произойдет переход на другую Web-страницу, имеющую отношение к
рассматриваемой или родственной теме, даже если страница помещена на сайте в другой
части планеты.
Во «всемирной паутине» вы можете найти огромный массив данных - биржевые коти-
ровки и предложения работы, электронные доски объявлений, анонсы новых фильмов,
литературные, экономические и политические обзоры, игры и многое другое.
Но WWW - это не только сведения от организаций, компаний или фирм. Поскольку ин-
формацию в Web очень легко опубликовать, многие пользователи создают свои личные
«домашние» страницы, где помещают информацию о себе, своих интересах, своих
друзьях с фотографиями и другими сведениями.
КНИГИ от ИЗДАТЕЛЕЙ I
Телефон для оптовых покупателей (09S) 720-07-65
Автор(ы): А. Ю. Гаевский
Бестселлер • в книге изложены основы работы на
персональном компьютере. Подробно и доступно описана
ПОМОЩЬ «линейка» операционных систем Windows 95/98/ME/2000,
подробнее ...
КНИГА ЖАЛ06 (gjj
> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид •
Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом
этой страницы на языке HTML (Рис. 1.2).
10 Создание Web-сайтов
F,WHW.3stIH-Блокнот НЭЕЗ!
Файл Цравка Формат Дид Справка
!— obsolete —>
!— # ! Include P i l e - "./ADO.inc.asp" —>
script src-"scr1pt.js"x/scr1pt>
<script Ianguage-"vbscr1pt">
sub Document_onReadystatechangeO
I f document.readystate - "complete" Then
w . 400
h - 200
1 - (window, screen, width - w) / 2
t - (window.screen.height - n) / 2
window.open "Popup.asp , "_blank", " l e f t - " & 1 & "px, top-" & t * "px
End I f
End sub
</script> P
1:..,: .....•.' L.LJZU
Возможно, код, который вы увидите на своем экране, будет несколько отличаться от ко-
да, показанного на рисунке. Вид 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' необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним
или несколькими атрибутами, например, a l i g n » " c e n t e r " ;
• правой угловой скобки >.
Таким образом, открывающий тег <html>, стоящий в начале документа HTML и озна-
чающий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>,
находящийся в конце Web-документа, кроме указанных элементов содержит также
символ слэш /, означающий закрывающий тег и указывающий на конец документа.
Тег < s c r i p t language^ " v b s c r i p t " > означает начало кода встроенной в документ
программы-сценария. Этот тег содержит, кроме имени s c r i p t , атрибут language со
значением " v b s c r i p t " , означающий, что сценарий написан на языке v b s c r i p t .
В тегах могут использоваться только символы латинского алфавита, а в значениях атри-
бутов - любые символы. Если в качестве значений атрибута используются, например,
символы кириллицы, то они должны быть заключены в кавычки, например,
name="Раздел 1".
Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head>
эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре.
Большинство тегов являются парными: за открывающим тегом следует соответствую-
щий ему закрывающий тег, а между ними содержится текст или другие теги, например:
<title>Kmi3KHbrii Интернет-магазин Три Ступвньки</ЬхЬ1в>
В таких случаях два тега и часть документа, заключенная между ними, образуют блок,
называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными
и для них закрывающий тег не применяется. Такие теги сами по себе являются элемен-
тами HTML.
Большинство тегов могут иметь один или несколько, атрибутов - параметров, дающих
дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Од-
нако атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, a l i g n ,
знака равенства • и значения, которое задается строкой символов, например, " c e n t e r " :
a i i g n = " c e n t e r " . Значения атрибутов обычно заключаются в кавычки. Однако если эти
12 Создание Web-сайтов
</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-Type n c o n t e n t = " t e x t / h t m l ;
charset=windows-l251">, для указания информации о документе. Открывающий тег
<meta> включает пары имя=значение, описывающие свойства документа, например, тип
документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используют-
ся также поисковыми серверами при индексации документов.
Файл HTML может содержать комментарии, дающие пояснения человеку, читающему
HTML-код. Комментарии начинаются с четырехсимвольной последовательности < ! — и
завершаются трехсимвольной последовательностью —>, например: <i—Главная
страница —>. Комментарии игнорируются браузером и не влияют на представление
документа на экране. Комментарии желательно использовать в редких случаях, когда это
необходимо, например, для объяснения кода HTML. Следует помнить, что они являются
частью файла и передаются по сети вместе с документом. Большое количество коммен-
тариев может значительно увеличить размер файла и, соответственно, время его загруз-
ки, что нежелательно.
Изучая язык HTML, очень полезно просматривать и анализировать HTML-код Web-
страниц, созданных опытными мастерами. Это помогает быстрее освоить и понять прин-
ципы и структуру языка.
> Закройте окно с кодом HTML, нажав кнопку [х] в правом верхнем его углу.
Web-страница изнутри 13
Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для
текста - желтый (yellow).
>• Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yellow. Этот
тег должен принять вид:
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так, как на Рис. 1.3.
<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-сайтов
Как видите, в заголовке окна браузера указывается название документа, которое мы вве-
ли в элементе < t i t l e x / t i t l e > , а цвет фона и текста страницы - такие, как указаны в
теге <body>. Текст отображается в одном абзаце и выровнен влево.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на
рисунке. В таком случае выберите команду меню Вид • Размер шрифта • Средний
(View • Text Size • Medium) в браузере Internet Explorer, чтобы установить средний раз-
мер шрифта.
> Просмотрите созданный файл в другом браузере. На этом этапе работы отличия бу-
дут незаметны.
> Не закрывая, сверните окна браузеров, воспользовавшись кнопкой (Т) в правом верх-
нем углу каждого из них.
Так как в элементе <bodyx/body> мы ввели текст без разбивки на абзацы, то в браузе-
ре он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тек-
сту более наглядный вид.
> Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).
>- Нажмите клавишу [{FSJ ИЛИ кнопку _©_ - Обновить (Refresh) на панели инструментов
рабочего окна программы Internet Explorer. Файл geoton.html будет перезагружен, и
вы увидите в окне браузера, как выглядит заголовок первого уровня (Рис. 1.5).
- [Working Offline!
File Edit View Favorites Iools Help
*• Back » •• • в ® <Я | ^Search QJFavoriles (jHistory | %*•
Address |£) CAWBtAGeoton.html
> Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в те-
гах номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и
обновлять изображение в окне браузера.
> Когда вы закончите эксперименты, снова восстановите в файле geoton.html теги
18 Создание Web-сайтов
Теги < b i g x / b i g > увеличивают размер шрифта текста, заключенного между ними.
> Добавьте в начало и конец вышеуказанного фрагмента кода соответственно теги
<big> и </big> так, чтобы элемент принял следующий вид:
20 Создание Web-сайтов
< Ы д х Ь х 1 > З д е с ь Вы узнаете о нашей деятельности, о программных продуктах
нашей компании и об оборудовании, которое мы проиэводим</1х/Ьх/Ыд>
Результат будет примерно таким, как на Рис. 1.9.
*••• TfaTxl
File Edit View Favorites Jools Uelp
m
1 •fBock - » > 8 B f l | USeorch [liF&vorites (^History | В
I
j Links"!
• Address | dC:\Web\Geoton.html
Id
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах
нашей компании и об оборудовании, которое мы производим
0Done My Computer
Рис. 1.10. Код HTML после изменения размера шрифта текста и центриров.ания
Посмотрим, как с помощью языка каскадных таблиц стилей указать стиль текстового
фрагмента, который начинается словами Здесь Вы узнаете...
Для указания толщины шрифта используется свойство font-weight со значениями
l i g h t e r (тонкий), bold (полужирный), bolder (жирный), например, s t y l e = " f o n t -
weight: bold".
Для определения курсивного начертания применяется свойство f o n t - s t y l e со значени-
ем i t a l i c . Поэтому, чтобы придать тексту полужирное курсивное начертание, следует
атрибут style определить так: style="font-weight: bold; font-style: i t a l i c " .
Обратите внимание: свойства могут располагаться в любом порядке и обязательно долж-
ны разделяться точкой с запятой.
Если требуется указать размер шрифта, то следует воспользоваться свойством font-
s i z e , значения которого можно указать в относительных или абсолютных величинах.
Относительные величины - это проценты, а в качестве абсолютных величин использу-
ются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). Например:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: ЮОрх"
Web-страница изнутри 23
Код HTML в файле geotbn.html должен иметь вид как на Рис. 1.12, а результат в окне
браузера практически не будет отличаться от приведенного на Рис. 1.11.
Рис. 1.12. Код HTML после применения языка каскадных таблиц стилей
Как видите, язык HTML позволяет использовать разные способы стилевого оформле-
ния. Вместе с тем, применение языка каскадных таблиц стилей CSS является более
предпочтительным.
Мы рассмотрели только один вариант использования языка таблиц стилей, когда определе-
ние стиля располагается непосредственно внутри тега элемента, который вы описываете.
24 Создание Web-сайтов
ли для хранения файлов сайта. Файл CLOUD.GIF можно взять также из папки
\Web\ChapO1\Web компакт-диска, прилагаемого к этой книге.
>• Скопируйте файл CLOUD.GIF или любой другой файл с расширением .GIF в папку Web.
Для вставки изображения в Web-документ используется одиночный тег <img> с ат-
рибутом src, значение которого соответствует имени вставляемого файла или его
адресу в Интернете. С помощью необязательного атрибута <border> можно вклю-
чить отображение рамки вокруг рисунка. Значение 1 .для этого атрибута создаст
рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен вы-
глядеть следующим образом:
<img src=CLOUD.GIF border=l>
Й iioi Щ My Computer
Обратите внимание: тег < l i > может использоваться как одиночный, т.е. без парного,
закрывающего тега </li>.
Полный HTML-код документа должен иметь вид как на Рис. 1.16.
</body>
</html>
>- Воспользовавшись командой меню Файл • Открыть (File • Open) в браузере Internet
Explorer, откройте файл spisok.html из папки Web (Рис. 1.17).
Как видите, каждый элемент ненумерованного списка выделяется специальным
маркером. В нумерованном списке каждый элемент будет отмечаться его
порядковым номером. Для создания нумерованных списков используются теги
< o l x / o l > , между которыми помещаются элементы < l i > .
| 0- Ш В D
Адрес. Щ\ h»p:/>pa*«pofLyandeii iu/cgi-bin/'Reg-pl?ttom-naiodbwoclB=li-q.iletbrfilt.alri-hUp://naiod.yandex.iu/ W j ffj Перепад j Link;
Регистрация: шаг 1 из 2
Логин:
должен состоять из символов A-z. 0-9, -. начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не'более 20 символов
Ваше имя:
L
Фамилия:
spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст
приглашения следует выделить в отдельный абзац, ограничив его парой тегов <рх/р>,
и выровнять по центру с помощью атрибута a l i g n = c e n t e r .
> Вставьте пустую строку между закрывающим тегом </ul> и закрывающим тегом
</body> и введите в этой строке следующий код:
<р аИдп=сепЬег>Если у Вас есть вопросы или предложения, напишите
нам:</р>
Каждая форма начинается тегом <form> и заканчивается тегом </form>. HTML-
документ может содержать в себе несколько форм, однако они не должны находиться
одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений.
Открывающий тег <form> должен содержать обязательный атрибут a c t i o n , который
определяет, где находится программа-обработчик или адрес сервера, который будет об-
рабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться
по электронной почте, то значение этого атрибута должно содержать адрес E-mail вла-
дельца сайта, например: a c t i o n = " m a i l t o : geoton@narod.ru".
Еще один атрибут тега <form> - method - определяет, каким образом или с помо-
щью какого протокола данные из формы будут переданы программе-обработчику.
Так как будет использована электронная почта, то значение этого атрибута должно
быть p o s t : metnod=post. Таким образом, элемент <form>.. . </form> будет иметь
примерно такой вид:
<form a c t i o n - " m a i l t o : geoton9narod.ru" method=post >
</form>
> Добавьте в документе spisok.html пустую строку перед закрывающим тегом </body>
и введите указанный код, вставив в качестве значения атрибута a c t i o n вместо
geotonenarod.ru свой адрес электронной почты.
Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообще-
ния. Для этого служат теги < t e x t a r e a x / t e x t a r e a > . В качестве атрибутов открываю-
щего тега <textarea> необходимо указать количество строк (rows) и колонок (cols),
а также имя (паше), под которым содержимое текстового поля ввода будет передано
программе-обработчику, например:
•ctextarea rows=5 cols=40 name=Coiranentsx/textarea>
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов.
Введенный посетителем сайта текст будет передан обработчику под именем comments
(Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, сле-
дует ограничить его тегами < c e n t e r x / c e n t e r > .
>• Вставьте пустую строку перед закрывающим тегом </form> и введите следующий
элемент, создающий текстовое поле:
< c e n t e r x t e x t a r e a rows=5 cols=40 name=Commentsx/textareax/center>
Здесь для центрирования текстового поля мы использовали теги < c e n t e r x / c e n t e r > ,
а не атрибут a l i g n = c e n t e r тега <р>, так как данный атрибут предназначен преимуще-
ственно для выравнивания текстовых фрагментов, и некоторые браузеры могут игнори-
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. Текстовое поле формы
П
| Отправить |
_J
jSjDone ] Щ My Computer A
>• Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с пре-
дупреждением о том, что форма передаст ваш адрес E-mail получателю, а данные, со-
держащиеся в форме, будут переданы без шифрования и, если они конфиденциальны,
это может быть нежелательно для вас (Рис. 1.21).
Microsoft Internet Exploiei
liiiiir::::;! r Отмена
> Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждени-
ем закроется.
Если бы соединение с Интернетом было установлено, то данные из формы были бы от-
правлены и через некоторое время вы получили бы их по электронной почте. Но так как
соединение не установлено, то, в зависимости от настроек вашей почтойой программы,
или появится сообщение о невозможности отправить почту, или данные из формы будут
помещены в папку исходящих сообщений почтовой программы и отправлены при оче-
редном подключении к почтовому серверу.
2-1210
34 Создание Web-сайтов
| Отправить
На первую страницу
>• Установите указатель мыши в окне браузера на ссылке На первую страницу. Указа-
тель мыши, который обычно имеет форму стрелки или текстового курсора, примет
форму "Ь •
> Щелкните мышью на этом месте. В окне браузера появится первая Web-страница из
файла geoton.html.
Таким образом, мы осуществили переход по ссылке на другую страницу сайта.
Теперь создадим гиперссылку для перехода с первой страницы - geoton.html - на вто-
рую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент
о нашей деятельности, так как список на второй странице раскрывает содержание
именно этого фрагмента текста. Поэтому^нам нужно в файле geoton.html поместить от-
крывающий тег <а> с атрибутом h r e f = " s p i s o k . h t m l " перед фрагментом текста о на-
шей деятельности, а закрывающий тег </а> - после него.
Скорее всего, что когда вы просмотрите результат в браузере, вы обнаружите, что ссыл-
ка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем,
что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом
фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовав-
шись атрибутами l i n k и v l i n k тега <body>. Атрибут l i n k определяет цвет непросмот-
ренной ссылки, a v l i n k - просмотренной. Еще один атрибут - a l i n k определяет цвет
ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Установим для непросмотренной ссылки белый цвет (white), для просмотренной - свет-
ло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red).
> Щелкните мышью на ссылке о нашей деятельности. В окно браузера будет загружен
файл spisok.html.
> Перейдите в конец этой страницы, чтобы отобразить на экране ссылку На первую
страницу.
Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> ат-
рибуты link, v l i n k и a l i n k с подходящими значениями цветов.
36 Создание Web-сайтов
>• Щелкните мышью на ссылке >1а первую страницу. В окне браузера опять появится
документ geoton.html.
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка.
Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите внимание: пока
переход не вставлен, указатель мыши при установке на рисунке имеет форму стрелки 1^.
Для создания такой ссылки достаточно в файле geoton.html вставить открывающий тег
<а href ="spisok.html"> перед тегом <img src=CLOUD.GIF border=l> И закры-
вающий тег </а> после него.
>• Отредактируйте файл geoton.html так, чтобы окончательный HTML-код документа
имел вид, как на Рис. 1.25.
> Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее со-
стояние.
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вста-
вив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
> Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для
таблицы.
Нам осталось теперь создать ссылки из двух первых пунктов меню на соответствующие
страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся
этими двумя ссылками. Как и прежде, воспользуемся тегами < а х / а > с атрибутом href.
В качестве значения этого атрибута для первого пункта меню - Главная страница - сле-
дует указать файл geoton.html, т.е. href = "geoton.html 11 , а для второго - Чем мы за-
нимаемся? - файл spisok.html, т.е. href =•• spisok.html".
В следующем опыте мы разделим экран по вертикали на два окна так, чтобы у левого
края экрана постоянно отображалась таблица с меню, а справа от нее - страницы нашего
Web-страница изнутри 41
сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке
новый документ отображается в том же окне, что и исходный, в котором была ссылка.
Чтобы отобразить его в другом окне, необходимо в открывающем теге <а> использовать
атрибут target, параметром которого должно быть имя того окна, в которое будет за-
гружен документ. В следующем опыте мы подробнее поговорим об этом и присвоим
соответствующему окну имя "frame", а сейчас укажем это имя как значение атрибута
t a r g e t в ссылке: target= "frame". Еще раз подчеркнем, что в этом опыте Web-
страница будет загружаться в то же окно браузера, в котором находится ссылка, а атри-
бут t a r g e t позволит загружать документ в другое окно, которое мы создадим в сле-
дующем опыте.
> Отредактируйте в файле 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 Рис. 1.33. Ссылки
с HTML-кодом таблицы в меню созданы
>• Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад
(Back) на панели инструментов или просто закройте окно, если файл был загружен в
новое окно. На экране снова отобразится файл menu.html.
>• Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера поя-
вится файл spisok.html.
Итак, на основе таблицы мы создали меню и убедились, что ссылки в нем работают.
ЗН Справка
й I My Computer
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на
другие страницы сайта и сами страницы.
Web-страница изнутри 43
<html>
<head>
<title>KoMnajo«i rE0TOH</title>
</head>
</html>
Вместо тегов <bodyx/body> в файле, описывающем фреймы, используется пара тегов
<framesetx/frameset> с атрибутами rows или c o l s , определяющими, как делится
экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно
использовать числовое значение высоты или ширины фрейма в пикселах или в процен-
тах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали
на два равных по размеру фрейма, то код HTML должен быть таким:
<frameset rows="50%,50%">
Обратите внимание: значения атрибутов отделяются один от другого запятой.
Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пиксе-
лов, следует написать:
<£ratneset c o l 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, определит, в какой именно фрейм сле-
дует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый
документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам
нашего меню страницы открывались не в первом фрейме, в котором расположено меню,
а во втором, мы использовали в предыдущем опыте в ссылках меню атрибут t a r g e t
со значением "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
Добро пожаловать на
Чем мы I
занимаемся?!
страничку компании ГЕОТОН!
О нашей
компании I 53 Справка
Новости
|Оборудовани^
I Спец. ПО j
Здесь Вы узнаете о нашей деятельности,
Наши о программных продуктах нашей
партнеры компании и об оборудовании, которое мы
j Прайс-лист
производим
Связь с
компанией I
I My Computer
ии
Рис. 1.36. Фреймы созданы
Добро пожаловать на
Чем
занимаемся?
страничку компании ГЕОТОН!
О нашей
компании
ЗДСправка
Новости
[[Оборудование
I Спец. ПО
Здесь Вы узнаете о нашей деятельности,
Наши о программных продуктах нашей
партнеры компании и об оборудовании, которое мы
Прайс-лист
производим
Связь с
компанией
Где же можно поместить ваш сайт?-Возможны два варианта: либо на сервере своего про-
вайдера, либо на сервере одной из бесплатных служб.
Каждый провайдер обычно предоставляет всем своим пользователям небольшой объем
дискового пространства - несколько мегабайт - для Web-страниц. В одних случаях это
бесплатно, в других •* взимается некоторая плата, в третьих - плата взимается за допол-
нительное место, если выделенного пространства не хватает. Конкретные условия раз-
мещения Web-страниц вы должны выяснить у провайдера.
В настоящее время в Интернете существует большое количество бесплатных служб, пре-
доставляющих всем желающим возможность поместить сайт на своем Web-сервере и не
требующих денежной оплаты за его поддержку. Такие бесплатные службы существуют
за счет средств, получаемых от рекламодателей. Предоставляя бесплатно место на серве-
ре всем зарегистрировавшимся пользователям, они размещают рекламу на их страницах
и за это получают деньги от рекламодателя. Поэтому предоставление бесплатного места
48 Создание Web-сайтов
Hndex
Регистрация: шаг 1 из 2
Логин:
должен состоять из символов А-г. 0-9. -. начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не более 20 символов
Готово!
Регистрация успешно завершена.
Дополнительная информация
Обращение:
Псевдоним:
Япёех
Настройка Яндекса
Яндекс Телепрограмма Настройка каналов I
[бгиоча
Подписки Доставка
поиска
L
it^ ВЕЗ " " Р * " * **:
Hndex
С чужой компьютер а
Г'Войтп
©На,- [J
*дас: |$hUp://validatoi.yande».!u,'c(>nliim xinl?Ke>.b67ca33386ld1[)47c405neaa5*5beb3864137110B330313 j £ | Ц Переход j Lrtt
~ ~ у
Маркет - Деньги - Почта - Народ - Новости - Каталог - Директ - Энциклопедии - Словарь Лингво -
Закладки- Открытки - Бар - Игрушки - Подписки - Гостиная - Мой Яндекс - Отпуск
Jfc
Рис. 2.6. Страница для подтверждения e-mail
g| gj 0' Ш Й ' •
Апрвс.|ghUp//vali.iaKir >and««.iu/conlirni.»iiil?teit-b6yca93986ld1047e405lleja!i<bbeli98HI371108930313ТД Ы Перещц | Link!
Маркет - Деньги - Почта - Народ - Новости - Каталог - Директ - Энциклопедии - Словарь Лингво -
Закладки - Открытки - Бар - Игрушки - Подписки - Гостиная - Мой Яндякс - Отпуск
На адрес e-mai], который был указан при регистрации, вы получите письмо от службы
поддержки Яндекса об успешной регистрации, в котором, кроме регистрационных дан-
ных, будет приведена информация о платных и бесплатных службах Яндекса, которыми
вы теперь можете воспользоваться.
Hndex
Создать
Copyright
© 2001—2004 «ЯНДЕКС»
О компании
_Е
Рис. 2.8. Страница для создания сайта
> Нажмите кнопку Создать. В окно браузера загрузится страница Мастерская, на ко-
торой можно выбрать один из готовых шаблонов страницы и произвести действия по
управлению сайтом (Рис. 2.9).
>• Выберите в меню ссылку Загрузка файлов на сайт. На экране появится страница
Мастерская / Управление файлами / Загрузка файлов (Рис. 2.10).
54 Создание Web-сайтов
Обзор.. 1 Обзор .
ОВэор... ! Обзор...
Обзор... Обзор...
Обзор . Обуор.
Обзор.. 1 Обзор .
Объём каждого файла недолжен превышать 5 Мб!
Загрузить файлы | i Очистить |
л
Рис. 2.10. Раздел Загрузка файлов
В этом разделе менеджер файлов позволяет вам выбрать файлы для загрузки.
> Нажмите левую верхнюю кнопку Обзор (Browse). На экране появится диалог Вы-
бор файла (Choose file), который ничем не отличается от стандартного диалога от-
крытия файла.
> Перейдите в папку Web, в которой вы сохранили файлы сайта, и щелчком мыши вы-
берите файл index.html.
>• Нажатием кнопки Открыть (Open) закройте диалог Выбор файла (Choosefile).Пол-
ное имя выбранного файла появится в верхнем левом поле ввода, слева от кнопки
Обзор (Browse).
> Выберите остальные файлы сайта - geoton.html, spisok.html, menu.html,
CLOUD.GIF - нажимая поочередно каждую следующую кнопку Обзор (Browse).
Размещение страниц в Интернете 55
>• Когда все пять файлов будут выбраны, нажмите кнопку Загрузить файлы. Через неко-
торое время, после того как файлы будут загружены, появится страница с сообщением
об этом (Рис. 2.11), а затем вы возвратитесь к странице загрузки файлов (Рис. 2.10).
Начал
J3
Рис. 2.11. Файлы загружены на сервер
Программу Composer можно также запустить из рабочего окна браузера Netscape Navi-
gator, выбрав команду меню File • Edit Page (Файл • Редактировать страницу). Данная
Размещение страниц в Интернете 57
> Нажмите кнопку на панели инструментов в верхней части рабочего окна про-
граммы и в появившемся диалоге Open (Открыть) выберите папку Web, а в ней файл
index.html. Однако рабочее окно останется пустым, так как код HTML данного файла
не содержит тегов <bodyx/body>.
>• Нажмите кнопку на панели инструментов в верхней части рабочего окна про-
граммы. Если в программе Composer еще не был определен ни один сайт, то на экра-
не появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой Pub-
lish (Опубликовать), на которой необходимо определить параметры доступа к сайту
(Рис. 2.14).
Server Information
Site Name:
•1С
Login Information
Usei name:
Если же в программе 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).
> Нажмите кнопку ОК. На экране появится диалог Publish Page (Опубликовать стра-
ницу) с открытой вкладкой Settings (Установки).
Publish Page
Publish j Settings]
1
r 0 Include images and other files
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).
г Publishing Status
Publishing...
index.html
I Cancel
По окончании процесса публикации файла этот диалог исчезнет, а в заголовке окна про-
граммы Composer появятся название документа Компания ГЕОТОН и имя опубликован-
ного файла index.html (Рис. 2.19).
60 Создание Web-сайтов
>• Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося меню вы-
берите команду Программы • GlobalSCAPE • CuteFTP Home • CuteFTP Home (Pro-
grams • CuteFTP • CuteFTP).
При первом запуске программы появится окно приветствия, в котором вам напоминают
о количестве оставшихся дней бесплатного использования программы (Рис. 2.20).
Welcome to CuteFTP Home!
Knowledge Base
J [ Continue
Если вы купили программу, то можете ввести ее серийный номер, нажав кнопку Enter
Serial Number (Введите серийный номер).
>• Если у вас серийного номера еще нет, то нажмите кнопку Continue (Продолжить). На эк-
ране появится первый диалог мастера подключения CuteFTP, в котором необходимо вве-
сти адрес сайта, на который вы будете передавать файлы по протоколу FTP (Рис. 2.21).
CuteFTP Connection Wizard
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.
В поле ввода следует ввести 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: [geoton
Password;
!••••• i
> В полях ввода Username (Имя пользователя) и Password (Пароль) введите соответ-
ственно логин и пароль, которые вы получили у провайдера или при регистрации в
бесплатной службе.
>• Нажмите кнопку Далее (Next) На экране появится третий диалог мастера подключе-
ния CuteFTP (Рис. 2.23).
>• В поле Default Local Folder (Локальная папка по умолчанию) укажите путь к папке
Web, в которой находятся файлы нашего сайта. Эта папка будет автоматически откры-
ваться на локальном жестком диске пш подключении к FTP-серверу.
> Нажмите кнопку Готово (Finish) На экране появится рабочее окно программы
CuteFTP (Рис. 2.26), а поверх него - диалог Tip of the Day (Совет дня) (Рис. 2.25).
Если в диалоге Tip of the Day (Совет дня) сбросить флажок Show tips on the start up
(Показывать советы при запуске), то этот диалог больше появляться не будет.
lite GlobalSCAPE - CuteFTP 6.0 • [naiod.iu - ftp.naiod.iu. Status: Connected) BEIQII
File Edit View Tools Window Help
...Eh* Ш
• loo 13" f ! xEl О
Ы1 U
Q D:\Web
Name. / Size I T fe./
/ Name Size I Type IModi
g j index, html 182 b... HTML Docu... 0 Й CLOUD. G F 11.03... Рисунок GIF 10.0
tgQmenu.html 505 b... HTML Docu... D ^geoton.ht nl 517 b... HTML Docu... 10.0
30geoton.html 517 b... HTMLDocu... 0 ^ J index, htm 271 b... HTML Docu... 15.0
ЗЙ spisok.html 1.23 KB HTML Docu... 0 © menu, htm 505 b... HTML Docu... 10.0
QCLOUD.GIF 11.03... Рисунок GIF G ^Jspisok.htnll 1.23 KB HTML Docu... 10.0
<t I l>
* f Size j Progress ( • > : •
\_J7
/ « Item Name \ Address | <-> Local
чттятw<«
Sim
For Help, press FI Hftp.narod.ru, 5 object's). 13.52 KB
Как и у всех Windows-программ, в верхней части рабочего окна находятся меню и панель
инструментов, предназначенные для управления работой программы. В нижней части
рабочего окна расположена пока пустая таблица, в которой будет отображаться процесс
пересылки фадпов.
Основная часть рабочего окна разделена по вертикали на две панели. На правой панели
отображается каталог удаленного компьютера. На левой панели в настоящий момент ото-
бражается содержимое папки Web, в которой находятся файлы нашего сайта. На правой
панели в окне программы CuteFTP вы увидите список файлов нашего сайта, которые бы-
ли загружены нами в предыдущих опытах.
Панель в нижней части рабочего окна отображает файлы, которые передаются на сервер в
текущий момент времени. Если вы хотите передать файлы позже, то можете временно по-
местить файлы в эту панель.
Выделив любой из файлов, вы можете просмотреть его, нажав кнопку на панели ин-
струментов, отредактировать, нажав кнопку , переименовать, нажав кнопку уда-
лить, нажав кнопку
Удалим загруженные ранее файлы нашего сайта, чтобы затем переслать их снова с по-
мощью программы CuteFTP. Для этого их нужно сначала выделить.
> Щелчком мыши выделите на правой панели первый файл.
> He отпуская клавишу il Shift l. щелкните мышью на последнем файле на правой панели.
Все файлы текущей папки будут выделены.
Shin
>• Отпустите клавишу il l.
Теперь выделенные файлы можно удалить.
>• Нажмите клавишу I0*1*"!. На экране появится диалог с требованием подтвердить ваше
намерение удалить пять файлов (Рис. 2.27).
> Нажмите кнопку Да (Yes), чтобы закрыть этот диалог. Файлы будут удалены и их
имена исчезнут с правой панели окна программы CuteFTP.
Чтобы одной командой переслать на сервер все файлы папки Web, их необходимо пред-
варительно выделить.
> Щелкнув мышью на первом и последнем файлах папки Web на левой панели окна
программы CuteFTP при нажатой клавише !l Shitl l. выделите их.
Й ) DAWeb ...Hi* l
I / Size I Type JJ / Name I Size! Type f Modif
index html 182 b... HTMLDocu...
menu, hi ml 505 b... HTMLDocu...
geolonhlnil 517 b... HTMLDocu...
spisok.html 1.23 KB HTMLDocu...
11.03... Рисунок GIF
Когда пересылка файлов будет закончена, их список отобразится на правой панели рабо-
чего окна программы CuteFTP (Рис. 2.29), а в строке состояния будет показано общее
количество перемещенных файлов и их суммарный размер (Рис. 2.29).
I N GlobalSCAPE - CuteFTP 6.0 - (naiod.ru - ftp.naiod.iu. Status. Enor]
«ЗИ
File Edit View Tool» Window Help
ЕШ
/ IT Item Na I Addren I <-> Size [ Proqren [ Local
Цифровые изображения
Изображение, которое вы видите на экране компьютерного монитора, строится из мел-
ких точек, называемых пикселами. Слово пиксел - это сокращение английских слов 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 единицы имеет
24
2 , или 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 килобайт.
В 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 - Переносимая сетевая фотография), произносится «пи-
нап», который предназначен для хранения фотографических изображений и обладает
мощным алгоритмом сжатия с потерей качества.
Возможности оптимизации
Чтобы любое изображение можно было использовать на Web-странице, его необходимо
предварительно оптимизировать, уменьшив до минимума размер файла и, следователь-
но, время загрузки по сети так, чтобы качество изображения при этом заметно не ухуд-
шилось. Оптимизация - это, по сути, компромисс между размером файла и качеством
изображения. \
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и используется
сжатие с потерей информации. У него не так уж много способов оптимизации, точнее
сказать, два:
• использование прогрессивной развертки;
• оптимальный коэффициент сжатия.
Использование прогрессивной развертки не сказывается на размере изображения, но
заметно при загрузке. В случае записи изображения в стандартном формате вывод на
экран осуществляется горизонтальными полосами, и до загрузки всего изображения не-
возможно определить его смысл. Напротив, при записи файла в прогрессивном формате
изображение появляется сразу целиком, но в грубой форме, и затем постепенно улучша-
ется. Это дает посетителям сайта возможность сразу же оценить изображение и решить,
стоит ли ожидать его окончательной загрузки, что позволяет сэкономить немного време-
ни при просмотре страниц. Общее время загрузки страницы при этом не уменьшается,
возникает лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддержива-
ется всеми браузерами, но не каждый графический пакет может записывать в этом фор-
мате. Поэтому проверьте свои программы на возможность сохранять файлы с прогрес-
сивной разверткой. Последние версии Photoshop умеют это делать.
76 Создание Web-сайтов
| Щ My Computer
>• Установите указатель мыши на рисунке в окне браузера так, чтобы указатель мыши
принял форму \). Под ним появится рамка с текстом, определенным в качестве зна-
чения атрибута a l t (Рис. 3.3).
Свойства обозревателя
Общие
Содержониер
Безопасность
Подключения f
X
П рограммы
КонФ^енциальность ___
Дополнительно
Параметры
г
• Удалять все Файлы из папки временных Файлов Интернет!
QQt Мультимедиа
0 Включить автоматическую подгонку размеров изображени]
0 Включить панель изображений (требуется перезапуск)
0 Воспроизводить анимацию на веб-страницах
0 Воспроизводить видео на веб-страницах
0 Воспроизводить звуки на веб-страницах
• Не отображать оперативное медиа-содержимое на панели
OK | Отмена
0 Don»
>• Отредактируйте в файле geoton.html тег <img>, добавив указанные атрибуты так,
чтобы этот элемент принял следующий вид:
11 11
< c e n t e r x a href= spisok.htnu ><img src=CLOUD.GIF a l t = " Область нашей
деятельности" border=l width=613 height=60x/ax/oenter>
В окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено столько места,
сколько указано значениями атрибутов width (ширина) и height (высота) (Рис. 3.6).
n]
Eilo Edit w Fflvorites Iools Help
4* Back » в 1Й tSJ j ^ S e o r c h QlFav irites O H.«tory |H6" в И »
i Address | £ C:\W b\geolan.html
,[J Links "1
a Done ;@ My Computer
Э Done
Еще один способ определения фона - с помощью языка каскадных таблиц стилей CSS.
Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц значи-
тельно больше возможностей управления фоновым изображением. Чтобы удобнее: было
знакомиться с ними, вставим рисунок BG.JPG в качестве фонового изображения второй
Web-страницы нашего сайта, сохраненной в файле spisok.html, воспользовавшись язы-
ком каскадных таблиц стилей.
В опыте со стилями первой главы мы определили вид текста на первой Web-странице с
помощью языка каскадных таблиц стилей, указав нужные стили как значения атрибута
s t y l e в теге <р>. Но есть другой, более предпочтительный вариант определения стилей,
при котором описание стилей располагается внутри заголовка Web-документа
< h e a d > . . . </head> в открывающем теге <style>. В таком случае вы можете исполь-
зовать описанные стили для HTML-элементов всей страницы.
В теге < s t y l e > обязательно должен присутствовать атрибут t y p e = " t e x t / c s s " , кото-
рый служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким
образом, элемент < s t y l e > . . . </style> должен иметь следующий вид:
<style type="text/css">
</style>
Вставим этот тег в код HTML файла spisok.html.
>- Вставьте пустую строку в файле spisok.html после элемента <title>4eM мы зани-
MaeMcs3?</title> и введите теги < s t y l e x / s t y l e > , как указано выше. Код HTML
заголовка Web-страницы, заключенный между тегами < h e a d > . . . </head>, должен
иметь такой вид:
<head>
<title>4eM мы занимаемся?</title>
<style type=ntext/css">
</style>
</head>
Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем случае
присвоение стиля элементу выглядит так:
название_элемента { свойство: значение },
где название_элемента — это имя HTML-тега, например, h i , p, body, а параметры в
фигурных скобках - перечень свойств элементов и присвоенных им значений. Например,
чтобы указать, что все абзацы, описываемые тегами < р > . . . < / р > текущего Web-
документа, должны иметь полужирное курсивное начертание шрифта с размером 150% и
выравнивание по центру, следует присвоить этому элементу стили следующим образом:
<style type="text/css">
р { font-weight: bold; font-style: i t a l i c ; font-size: 150%; text-
align: center }
</style>
Напомним, что такие стили мы присвоили элементу <р>.. .</р> на нашей первой Web-
странице - geoton.html - и сделали это с помощью атрибута s t y l e . При этом стили бы-
ли присвоены только данному элементу < р > . . . < /р>. Если же стили определяются
Графика для Web-страниц 89
Графический текст
Многие Web-дизайнеры широко используют в своих проектах графический текст.
Это обычно небольшие надписи, состоящие из одного или нескольких слов, оформленные
с применением различных эффектов и сохраненные в файле одного из графических форма-
тов. Такой графический файл с текстом вставляется в Web-документ как рисунок кчи как
фон и используется в качестве заголовков, названий,
оюзИНФВРМ
логотипов, кнопок и т.д. На Рис. 3.11 показаны
шшж
примеры таких надписей. Хотя подобная графика
и увеличивает объем Web-страниц и время их за-
грузки, разумное ее использование придает сайту
привлекательный профессиональный вид.
Графический текст, как и другие изображения, соз-
дается обычно в программах точечной графики и
VABANK
поэтому состоит из множества пикселов. Если раз-
мер шрифта надписей достаточно крупный, то на
границах символов возникает резкий контраст, в
результате чего очертания символов кажутся не-
ровными, особенно в наклонных и закругленных
internet by
Jorbina Г©
элементах (Рис. 3.12, вверху), книга
С помощью специального эффекта сглаживания Рис. 3.11. Графический текст
(anti-aliasing) можно минимизировать контраст на
ТРИУМФ
границах символов. В результате их очертания ста-
нут более мягкими и надпись будет выглядеть бо-
лее элегантно (Рис. 3.12, внизу). Однако в тех слу-
ТРИУМФ
чаях, когда надпись создается мелким шрифтом,
использование сглаживания нежелательно, так как
текст может стать плохо читаемым.
С приемами и способами создания графики и, в Рис. 3.12. Графический текст
частности, графического текста мы познакомимся в несглаженный (вверху)
следующей главе.. и сглаженный (внизу)
Г Л А В А 4.
Подготовка графики
с помощью Adobe Photoshop
и Adobe ImageReady
Внешний вид и привлекательность вашего сайта в значительной мере зависят от напол-
няющей его графики. Графика - это визуальное средство подчеркивания и выделения
информации, раскрываемой текстом Web-страницы, которое в то же время не должно
отвлекать внимание посетителя сайта от самого текста. Поэтому подготовке графики
следует уделить самое серьезное внимание.
В настоящее время существует множество программных продуктов, позволяющих гото-
вить рисунки для Web; наиболее популярными из них являются Macromedia Fireworks и
Adobe ImageReady. Компания Macromedia стала пионером в области создания программ
подготовки Web-графики, когда выпустила свой продукт Macromedia Fireworks, специ-
ально предназначенный для этой цели. Вслед за ним появилась аналогичная программа
компании Adobe System Incorporated - Adobe ImageReady.
Среди программ профессиональной подготовки растровых изображений, пожалуй, нет
программы более совершенной и более популярной, чем Adobe Photoshop. За последние
несколько лет в связи с тем, что требования к Web-графике значительно повысились,
дизайнеры и разработчики ориентируются именно на Adobe Photoshop, как на одно из
основных средств создания графики для World Wide Web. До появления версии Adobe
Photoshop 5.5 программа Adobe ImageReady, ранее распространявшаяся отдельно, счита-
лась неким придатком Adobe Photoshop с очень ограниченным набором функций подго-
товки изображений для Web. Однако, учитывая возрастающие требования, компания
Adobe System решила отказаться от дальнейшего раздельного распространения этих
двух продуктов и слить их в один пакет - Adobe Photoshop. Новая концепция «два в од-
ном» гарантирует совместимость программ, знакомый интерфейс и, в конечном счете,
значительное сокращение времени подготовки графики. По сути, это - единый ком-
плекс, разделенный на две программы только для гибкости. Обе программы имеют оди-
наковые рабочие окна и предлагают много одинаковых инструментов. Между програм-
мами легко переключаться с помощью специальной кнопки и, таким образом, быстро
переходить от создания и обработки изображений к их подготовке и оптимизации для
Web. Все операции, выполненные в каждой из программ, сохраняются и, при необходи-
мости, их можно отменить после переключения.
Adobe Photoshop и Adobe ImageReady хорошо дополняют друг друга. И мы будем рас-
сматривать эти программы совместно: обрабатывать фотографии, создавать графические
кнопки, баннеры и другие изображения для Web-сайта в Adobe Photoshop, а затем пере-
ключаться в Adobe ImageReady, чтобы оптимизировать полученные изображения, разре-
зать их на фрагменты, «оживлять графику» и т.п.
Следует отметить, что работа с Adobe Photoshop требует некоторого навыка, так как боль-.
шинство созданных в ней объектов не могут быть легко изменены. Однако к этой особенно-
сти программы достаточно легко привыкнуть, тем более, что она записывает все выполнен-
ные действия, и любые из них можно отменить, вернувшись к предыдущему варианту.
94 Создание Web-сайтов
При запуске программы Adobe Photoshop версии CS2 диалоги, которые мо-
гут появляться на экране будут другими. Но все эти диалоги никак не
влияют на последующую работу с программой.
Виртуальные диски программы Photoshop (Scratch disks) используются тогда, когда для
выполнения операции не хватает оперативной памяти. В диалоге Preferences (Настрой-
ки), который вызывается с помощью команды меню Edit • Preferences • Plug-Ins &
Scratch Disks (Правка • Настройки • Плагины и виртуальные диски) можно назначить
до 4-х виртуальных дисков. Их рекомендуется назначать на наиболее свободных и неф-
рагментированных жестких дисках.
>• Нажмите кнопку ОК, чтобы закрыть диалог. Adobe Photoshop
На экране появится диалог-запрос Adobe
Photoshop о настройке параметров цвета Ф Color settings for Photoshop 6 will be configured using default
settings.
setti
Tutorials
I
i
Learn the Basics
Advanced Techniques (Online)
Working With What's New
tues At A Glance
New Feature Highlights
What's New Movie (Online)
Ub
Первая строка рабочего окна программы Adobe Photoshop - строка заголовка. В ней ото-
бражается название программы и слева от него значок системного меню, команды которо-
го предназначены для перемещения, изменения размеров и представления окна, а также
для его закрытия. У правого края строки заголовка располагаются три кнопки: [I] - для
сворачивания, \5\ - для разворачивания и [х] - для закрытия окна программы. (
Кнопка
Значок Кнопка
Кнопка 3aK bl f
системного Заголовок Полоса
меню сворачивания разворачивания
v
^ P ™
окна-
меню окна
Панель параметров
(Option Bar)
Если установить указатель мыши на кнопке с черным треугольником внизу, а затем на-
жать и удерживать левую кнопку мыши, то появится дополнительная панель со списком
других инструментов. Чтобы выбрать для работы любой инструмент из списка, доста-
точно щелкнуть мышью на его имени.
Большинство инструментов панели привычны для художника: кисть (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)),
создающий выделенную область посредством привязки к резким границам
изображения.
| ^ 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_
Ё
гменты для ускорения их загрузки в браузер. При помощи другого инструмента -
- 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 (О) (Инструмент «Губка» (О)) изменяет насыщенность цветов.
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)) - используется для увеличения и
уменьшения изображения на экране.
Под образцами цвета находятся две кнопки: |Ю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)).
Под образцами цвета переднего плана и фона расположены четыре кнопки, имеющие
следующее назначение:
*|; ||
Op:
tr.s.
T И.
\ a
В
8 9 1
•<i i» | o . a i ьд ы
•МЛ н*
№те ]untitledl| 1 OK |
tterght [_600 II P l ^
Ы I betete Preset... |
ResoLton
72
I 11 pixels/Inch id
Cotaraode | RGB Cokir
Ы
и
image Size:
Background Contents | White
В поле ввода Name (Имя) в верхней части диалога можно указать имя создаваемого до-
кумента. По умолчанию предлагается Untitled-1 (Без имени-1). Не будем пока изменять
его. Мы сможем сделать это в дальнейшем, при сохранении рисунка.
В программе Adobe Photoshop предусмотрена возможность работы с рисунками за-
данного размера. Поэтому, создавая новый документ, следует сразу указать его раз-
мер. Если размер рисунка заранее не известен, то лучше сделать его побольше,
с запасом, а потом обрезать до нужного размера.
В следующих опытах этой главы мы подготовим баннер - рекламный рисунок - для рек-
ламы в Интернете сайта, созданного нами в первой главе. Как правило, баннер - это
графическое изображение прямоугольной формы в формате GIF или JPEG. Баннер по-
мещается на Web-странице и имеет ссылку на сайт рекламодателя. В последнее время в
связи с бурным развитием баннерной рекламы в Интернете, предпринимаются попытки
стандартизировать размеры баннеров. Первым шагом стандартизации стали рекоменда-
ции по размеру баннеров, предложенные Internet Advertising Bureau (Бюро рекламы
в Интернете) (http://www.iab.net/) совместно с CASIE (The Coalition for Advertising
Supported Information & Entertainment) (Коалиция рекламной поддержки информации и
развлечений), приведенные в таблице ниже.
BO
4 " J . . ^ O,|
У
А. Я.
а 13
Д. •,.
Ит
4. а
if. / .
ОЧ
•Яи
то
К,Ь7%П Doci К.ЭК/0 byUs Г>aw Mleclton front c«f4«r w subtrict from tihling swtdion.
В Adobe Photoshop каждый рисунок имеет свое собственное отдельное окно. Это позво-
ляет работать одновременно с несколькими изображениями.
В заголовке окна созданного документа, кроме его имени - Untitled-1, указан масштаб
изображения, вероятней всего - 66,7%, который зависит от установленного в данный
момент разрешения видеокарты вашего компьютера, а в скобках - цветовой режим -
RGB/8 (RGB, по 8 бит на каждый цвет). Текущий масштаб изображения - 66,67% - вы
можете видеть также в левом нижнем углу строки состояния (Status Bar).
>• Введите с клавиатуры новое значение масштаба отображения документа - 100 - и на-
жмите клавишу pntar]. Масштаб отображения увеличится, и в окне документа появятся
вертикальная и горизонтальная полосы прокрутки, с помощью которых можно увидеть
части рисунка, не помещающиеся в окне. >
Но использовать полосы прокрутки для созданного документа малого размера нецелесо-
образно. Удобнее будет увеличить размеры окна документа. Это выполняется так же,
как обычно изменяется размер окна в Windows.
>• Установите указатель мыши на правом нижнем углу рамки окна документа так, что-
бы указатель мыши принял форму двунаправленной стрелки "S..
>• Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз при-
мерно на расстояние, равное одной третьей части ширины и высоты окна документа.
Размер окна увеличится.
> Отпустите левую кнопку мыши.
> Если необходимо, повторно откорректируйте размер окна так, чтобы полосы про-
крутки отсутствовали (Рис. 4.10).
Справа от значения масштаба - 100% - в строке состояния (Status Bar) выводится ин-
формация о текущем документе: Doc: 82.3K /0 bytes. Первое число - 82,ЗК - объем до-
кумента в килобайтах. Этот объем программа вычисляет как произведение размеров до-
кумента в пикселах и глубины цвета. Второе число, после дробной черты - это объем
оперативной памяти, занимаемой неуплотненным файлом, с учетом дополнительных
слоев и альфа-каналов. Пока изображение в документе отсутствует, это число - 0 bytes
(0 байт). Подробнее о слоях и альфа-каналах мы поговорим позднее. Правее информа-
ции о размере документа выводятся сведения о выбранном в данный момент инструмен-
те на панели инструментов (Tools).
Теперь можно с помощью инструмента |<$»J - Paint Bucket Tool (G) (Инструмент «Залив-
ка» (G)) залить выбранным цветом выделенную прямоугольную область.
v Нажмите и удерживайте кнопку [Ш] - Gradient Tool (G) (Инструмент «Градиент» (G))
на панели инструментов (Tools). Появится дополнительная панель с перечнем инст-
рументов, которые включаются данной кнопкой.
>• Щелчком мыши выберите инструмент [ § ] - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)). Его значок отобразится на кнопке, а кнопка будет нажата.
Теперь можно выполнить заливку.
>• Установите указатель мыши, который примет форму ф , внутри прямоугольной об-
ласти выделения.
> Щелкните мышью в этом месте. Выделенная область будет залита выбранным цве-
том (Рис. 4.13).
Теперь обведем контур прямоугольника, но другим цветом, для выбора которого вос-
пользуемся палитрой Color (Цвет), предоставляющей более широкие возможности ука-
зания цвета.
Подготовка графики 109
>- Щелкните мышью на ярлыке Color (Цвет) в среднем окне палитр. Вместо палитры
Swatches (Каталог) появится палитра Color (Цвет) (Рис. 4.14).
Чтобы нарисовать выделенную область в виде круга, следует при перемещении мыши
удерживать нажатой клавишу li S h m l. Для рисования эллиптической области от центра
Alt
необходимо при перемещении указателя мыши удерживать нажатой клавишу!! I.
Для выбора цвета заливки эллипса воспользуемся еще одним, новым способом.
v Щелкните мышью на образце цвета переднего плана (Set foreground color) на
панели инструментов (Tools). На экране появится диалог Color Picker (Палитра
цветов) (Рис. 4Л 8).
[""Cancel I
Qjstom
©H:|0 (• OL;
OS:
12 | % О a:
OR: [ F C:[75j%
OG:(T^ M:[&Bj%
OB:
[°Z Y:|67j%
K:
П Only Web Colors
IE>
Puc. 4.18. Диалог Color Picker (Палитра цветов)
112 Создание Web-сайтов
После выбора цвета в поле ввода # в нижней части диалога отобразится его шестнадца-
теричное числовое значение, каждые два символа которого слева направо характеризуют
значения соответственно красной, зеленой и синей RGB-составляющей.
Если установить флажок Only Web Colors (Только цвета Web), то на спектральной шка-
ле и в цветовом поле будут отображаться только безопасные цвета Web. Подробно о
назначении этих цветов мы уже говорили в предыдущей главе.
Нажатие кнопки Custom (Пользовательские) вызовет на экран диалог Custom Colors
(Пользовательские цвета) (Рис. 4.19), в котором вы можете выбрать подходящий цвет из
различных цветовых библиотек.
Custom Colors
PANTONE 7107 С
> Нажав кнопку OK, закройте диалог Color Picker (Палитра цветов). Выбранный цвет
отобразится на образцах в палитре Color (Цвет) и на панели инструментов (Tools).
Зальем цветом выделенную эллиптическую область следующим образом.
Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог Fill
(Заливка) (Рис. 4.20).
В открывающемся списке Use (Использовать) вы можете выбрать, какой цвет ис-
пользовать для заливки: Foreground Color (Цвет переднего плана), Background
Color (Цвет фона), Black (Черный), 50% Gray (50% серого), White (Белый) и другие
возможности.
114 Создание Web-сайтов
ЭЙ Щх II
[- Contents ; I—OK—|
Use: | Forepjound Color QJ
| Cancel 1
Custom Pattern: | -|
[-Blending 1
Mode: | Normal J^J
Opacity: [ 100 |%
• Beserve Transparency
> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения). Эллип-
тическая область выделения будет сжата на 16 пикселов.
Чтобы расширить область выделения следует выбрать команду меню Select • Modify •
Expand (Выделение • Модификация • Расширить).
Зальем сжатую выделенную область белым цветом фона.
> Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог
Fill (Заливка).
>• В открывающемся списке Use (Использовать) выберите Background Color (Цвет фона).
>• Закройте диалог Fill (Заливка), нажав кнопку ОК. Сжатая эллиптическая выделенная
область будет заполнена белым цветом фона (Рис. 4.22).
(События) в нижнем окне палитр. Если этот ярлык от- ) Elliptical Marquee
Fill
сутствует, выберите команду меню Window • History
\ Contract
(Окно • События). На экране появится палитра History
(События).
Увеличьте высоту окна палитры History (События),
Рис. 4.23. Палитра
чтобы увидеть всю информацию, содержащуюся в ней
History (События)
(Рис. 4.23).
В этой палитре вы видите перечень выполненных при работе над документом операций.
Каждая операция обозначена миниатюрой и названием. Последняя выполненная опера-
ция - Fill (Заливка) - выделена темным цветом. Любую из операций можно отменить
несколькими способами.
> Чтобы отменить последнюю операцию заливки сжатой эллиптической области цве-
том фона, перетащите значок этой операции - Fill (Заливка) - на кнопку с изображе-
нием корзины | Ш | - Delete current state (Удалить выделенную операцию) в нижней
части палитры History (События). Заливка сжатой эллиптической области белым
116 Создание Web-сайтов
цветом на рисунке будет удалена, а в палитре History (События) будет выделена опе-
рация Contract (Сжатие).
Отменим также и эту операцию.
> Нажмите кнопку I ffl I - Delete current state (Удалить выделенную операцию) в
нижней части палитры History (События). На экране появится диалог с запросом
подтверждения удаления выделенной операции (Рис. 4.24).
Adobe Photoshop
> Нажмите кнопку 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
OK
Name: | Hard Round 50 1
Cancel |
На образце в левой части диалога отображаются текущая форма и размер кисти. Ее на-
звание - Hard Round 50 1 (Жесткая, круглая, 50 1) - указано в поле ввода Name (Имя).
>- В поле ввода Name (Имя) укажите имя Новая кисть и нажмите кнопку ОК, чтобы
закрыть диалог Brush Name (Имя кисти).
Созданная кисть и ее размер отобразятся в палитре Brushes (Кисти) в конце перечня
образцов. Ее имя появляется во всплывающей подсказке при наведении указателя мы-
ши на кисть.
>• Щелкните мышью на свободном пространстве рабочего окна, чтобы закрыть палитру
кистей.
Теперь можно с помощью инструмента | I - Eraser Tool (E) (Инструмент «Ластик» (Е))
удалить прямоугольник на рисунке.
118 Создание Web-сайтов
> В открывающемся списке Style (Стиль) панели параметров (Options Bar) выберите
Fixed Size (Фиксированный размер), чтобы создать прямоугольную область опреде-
ленного размера.
Теперь в полях ввода Width (Ширина) и Height (Высота) следует указать размеры облас-
ти выделения.
v Дважды щелкните мышью в поле ввода Width (Ширина), чтобы выделить числовое
значение в нем.
> Введите с клавиатуры значение ширины прямоугольной области -150 рх (150 пикселов).
> В поле ввода Height (Высота) введите высоту прямоугольника - 50 рх (50 пикселов),
предварительно выделив двойным щелчком мыши находящееся там число.
Установка параметра Feather (Растушевка) создает плавный переход между пикселами
выделенной области и пикселами, окружающими ее. Это делает края выделенной облас-
ти расплывчатыми и исключает резкий переход.
Установка флажка Anti-aliased (Сглаживание) позволяет свести до минимума контраст
на границах между пикселами и создает более мягкие переходы между объектами.
отсчитываются от верхнего левого угла рисунка, причем ось X направлена вправо, а ось
Y - вниз. Координаты указателя мыши по умолчанию измеряются в сантиметрах.
Однако, поскольку размеры прямоугольника мы задали в пикселах, то нам было бы
удобнее, если бы и координаты указателя мыши выражались в пикселах. Поэтому изме-
ним соответствующую установку.
>• Нажмите кнопку 0 в правом верхнем углу
палитры Info (Информация) и в появив- Info Options
указатель мыши.
П Show 16 bit values
Установка флажка Show 16 bit values (Пока-
зывать 16-битные значения) требуется только Рис. 4.31. Диалог Info Options
тогда, когда для рисунка выбрана цветовая (Параметры палитры «Информация»)
модель RGB с 16 битами на каждый цвет.
> В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels (Пикселы).
>• Закройте диалог Info Options (Параметры палитры «Информация»), нажав кнопку ОК.
Теперь в палитре Info (Информация) координаты указателя мыши и размеры объектов
будут отображаться в пикселах.
Создадим прямоугольную область выделения заданного размера и зальем ее цветом.
>• Установите указатель мыши у левого верхнего угла окна документа так, чтобы в па-
литре Info (Информация) отобразились его координаты: Х:5, Y:5.
>• Щелкните мышью в этой точке. В окне документа появится прямоугольная область
выделения, а в палитре Info (Информация) отобразятся ее размеры: W: 150, Н: 50.
>• Залейте созданную прямоугольную область выделения выбранным ранее цветом, вос-
пользовавшись инструментом \&\ - Paint Bucket Tool (G) (Инструмент «Заливка» (G)).
> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение области.
Теперь нам нужно создать внутри прямоугольника эллиптическую область с размерами
горизонтальной и вертикальной осей соответственно 140 и 40 пикселов и залить ее бе-
лым цветом фона.
>• Убедитесь, что в открывающемся списке 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.
Так как наш баннер создается на белом фоне, то можно сделать по его периметру тон-
кую рамку, чтобы границы баннера были видны, если фон Web-страницы будет белым1.
Для этого следует выделить весь рисунок.
> Выберите команду меню Select • АН (Выделение • Все). Весь рисунок в окне
документа будет выделен, и вдоль его краев появится рамка выделения.
Обведем контур выделения цветом переднего плана.
>• Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится диа-
лог Stroke (Правка • Обводка).
> Не изменяя предлагаемых параметров, закройте этот диалог нажатием кнопки ОК.
1
Следует отметить, что рамку вокруг рисунка на Web-странице можно создать средствами HTML.
122 Создание Web-сайтов
Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не потерять его
при возможных сбоях в работе компьютера или отключении электропитания. Мы уже
говорили о том, что для использования изображения на Web^cTpaHnue оно должно быть
сохранено в одном из Web-форматов: GIF, JPG или PNG. Однако промежуточные сохра-
нения следует выполнять в собственном формате Adobe Photoshop - PSD, так как только
в данном формате можно сохранить изображение без потери качества. Это позволит при
необходимости вернуться к редактированию отдельных объектов.
у Выберите команду меню File • Save (Файл • Сохранить). На экране появится диалог
Save As (Сохранить как) (Рис. 4.33).
Save Options -
Save: • As a Copy.
• M*a Channels DSoPtCobts
OUyers
Color;
D U » Proof Setup; Waking CMYK
И ICC Profile: SRQ8IEC61966-2.1
Значок в виде открытого глаза §5 у левого края строки с названием слоя позволяет вы-
ключить отображение этого слоя, чтобы оно не мешало работе с другими слоями.
Остальные элементы управления палитры Layers (Слои) мы рассмотрим позднее,
а сейчас добавим в логотип надпись - название компании ГЕОТОН. Все надписи на
рисунках выполняются с помощью инструмента [ Т ] - Horisontal Type Tool (T) (Инст-
румент «Горизонтальный текст» (Т)).
IUI в
Рис. 4.35. Панель параметров инструмента Horisontal Туре ТооЦТ)
(Инструмент «Горизонтальный текст» (Т))
Кнопки ^ - Change the text orientation (Изменить ориентацию текста) позволяет изме-
нить ориентацию текста с горизонтальной на вертикальную и наоборот.
>• В первом слева открывающемся списке Set the font family (Установка семейства
шрифтов) на панели параметров (Options Bar) выберите один из имеющихся на ва-
шем компьютере шрифтов, лучше из группы Arial.
124 Создание Web-сайтов
> Установите указатель мыши на рисунке в центре эллипса. Указатель мыши примет
форму ill.
>• Щелкните мышью в этой точке. Появится текстовый курсор. Вид панели параметров
(Options Bar) изменится (Рис. 4.36).
> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет помещено в
точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так как по умолчанию на
панели параметров (Options Bar) нажата кнопка [S] - Left align text (Левостороннее
выравнивание текста).
Теперь выделим введенный текст и изменим начертание, размер и другие параметры.
> Не отпуская клавишу fshift], нажмите 6 раз клавишу [ Q , чтобы выделить введенную
надпись.
> Во втором слева открывающемся списке 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). На экране появится со- [Ага1_
вмещенная палитра Character/Paragraph (Символ/Абзац).
Палитра Character (Символ) будет активной (Рис. 4.37). L?_p»
м 5
а
»*$. а
Палитру Character (Символ) можно вызвать на экран также I *". a
командой меню Window • Character (Окно • Символ), а
палитру Paragraph (Абзац) - командой меню Window •
Paragraph (Окно • Абзац). Т Т ТТ Тг Г Т,
В поле ввода 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)
Для отмены ввода текста достаточно нажать на панели параметров кнопку | Cancel
any current ededits (Отменить все текущие правки).
Закончить ввод текста можно также, нажав клавишу |[Enter| на цифровой клавиатуре или
Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой, которо-
му по умолчанию присвоено имя, соответствующее введенной надписи. Этот слой поме-
чен символом Т - текстовый - и выделен темным цветом, что означает, что в данный
момент слой активен, т.е. именно к нему будут относиться все ваши действия. На то, что
слой активен, указывает также имя слоя, появившееся в заголовке окна документа.
Подготовка графики 127
Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа имя слоя
отображается неправильно. Это связано с тем, что Adobe Photoshop не всегда правильно
отображает русские шрифты. В таком случае, чтобы в дальнейшем было удобно рабо-
тать, слою нужно присвоить английское имя и порядковый номер.
>• Нажмите кнопку © в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду Layer Properties (Свойства слоя). На экране появится диа-
лог Layer Properties (Свойства слоя) (Рис. 4.39).
Layer Properties
Name: | ГЕОТОН
I OK
I
Cobr: | • None И Cancel
I
Рис. 4.39. Диалог Layer Properties (Свойства слоя)
В поле ввода Name (Имя) введите новое название слоя - Layer 1 (Слой 1).
Нажав кнопку ОК, закройте диалог Layer Properties (Свойства слоя). В заголовке
окна документа и в палитре Layers (Слои) отобразится новое имя слоя (Рис. 4.40).
Теперь нам нужно переместить надпись ГЕОТОН в центр
эллипса. Перемещение слоев и выделенных областей в
Adobe Photoshop выполняется инструментом [К*] - Move
|Norma[___ j ' J Opacity: I 100% I >
Tool (V) (Инструмент «Перемещение» (V)).
>• Нажмите кнопку [•*] - Move Tool (V) (Инструмент
«Перемещение» (V)) на панели инструментов (Tools),
чтобы выбрать этот инструмент.
> Установите указатель мыши, который примет форму Kj.,
i
• .
на один пиксел в соответствующем направлении. Если при нажатии одной из этих кла-
виш удерживать нажатой клавишу l S h i 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. I Cancel ~|
This dialog can be turned off in Preferences > Pile Handling > File Compatibility.
> Подберите также начертание и размер шрифта примерно 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|
] Вам нужна локальнаясеть?
5-1210
130 Создание Web-сайтов
>• Нажмите клавишу рт*ь|. чтобы переместить фокус в поле ввода G (Зеленый) и выде-
лить его числовое значение.
>• Нажмите комбинацию клавиш IIc 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)
тивным новый слой, которому будет • Use Previous Layer to Create Cliaping Mask
v Отпустите клавишу ll A l t I.
>• Удерживая нажатой клавишу || Alt I, нажмите кнопку [j/J -Brush Tool (В) (Инструмент
«Кисть» (В)) на панели инструментов (Tools). Будет выбран инструмент |./J -
Pencil Tool (В) (Инструмент «Карандаш» (В)).
Этот инструмент позволяет рисовать произвольные линии - прямые и кривые.
Для рисования горизонтальной или вертикальной прямой следует удерживать нажа-
той клавишу |[shm].
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Итак, мы создали рисунок, состоящий из основного слоя Background (Фон) и четырех
слоев - Layer 1, Layer 2, Layer 3, Layer 4. Посмотрим теперь, что можно делать со
слоями.
Заходите СЮДА'
>• Щелкните мышью на строке слоя Background (Фон) в палитре Layers (Слои). Строка
будет выделена темным цветом. Данный слой станет активным, и информацию об
этом вы увидите в заголовке окна документа.
Другой способ активизации слоя позволяет выбирать его из контекстного меню.
>• Установите указатель мыши в окне рисунка на надписи Вам нужна локальная сеть?
ctrl
>• Нажмите и удерживайте клавишу I I. Указатель мыши примет форму К}.. Это значит,
что при включенном инструменте |К^| - Move Tool (V) (Инструмент «Перемещение»
ctrl
(V)) клавишу II I можно не нажимать.
> Щелкните мышью в поле Indicates if layer is linked (Индикация связанного слоя)
слева от миниатюры слоя Layer 4. В этом поле появится значок в виде цепи jg, ука-
зывающий на то, что теперь этот слой связан с активным.
Чтобы связать слои в версии CS2, надо сначала выделить все нужные
слои в палитре слоев при нажатой клавише [[shift] или| ctrl | а затем щелк-
нуть мышью на значке цепи в нижней части палитры слоев.
В версии 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).
Drop Shadow...
Inner Shadow...
Outer Glow...
Inner Glow...
Bevel and Embost...
Satin...
Color Overlay...
Gradient Overlay...
Pattern Overlay...
Stroke...
Global Light...
Create Layer
Hide AD Elfect.
Scale Elfectj...
Drop Shadow (Тень снаружи) - добавляет тень, которую отбрасывает содержимое слоя;
Inner Shadow (Тень внутри) - добавляет тень, которая лежит внутри слоя, создавая
ощущение его отодвинутое™ или приподнятости;
Satin (Атлас) - добавляет затенение внутри слоя, создавая эффект изменения формы слоя;
>• Выберите из меню Layer • Layer Style (Слой • Стиль слоя) команду Bevel and Emboss
(Скос и рельеф). На экране появится диалог Layer Style (Стиль слоя) (Рис. 4.63).
> Расположите этот диалог так, чтобы он не перекрывал изображение в окне документа,
чтобы видеть изменения, которые будут происходить при настройке параметров
эффекта.
Подготовка графики 143
Level Style
- Shading
О
Angle:
3 Use global Light
f j Satin
Altitude:
\A
Г* Color Overlay
Gloss Contour's £ 3 Anti-aliased
Г" Gradient Overlay
Г Stroke
Opacity: 1 , ,
EH _J
•^ • [7S | *
Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) отмечено
флажком и выделено название выбранного эффекта - Bevel and Emboss (Скос и рель-
еф). На этой же панели вы можете выбрать, установив флажок, другие доступные эф-
фекты из перечисленных выше.
При установленном слева от названия эффекта флажке данный эффект будет применен к
слою после закрытия диалога кнопкой ОК. Чтобы отменить эффект, достаточно, вызвав
диалог, сбросить соответствующий флажок.
>- Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажок Preview
(Предварительный просмотр). При этом все изменения параметров, сделанные в
диалоге, будут сразу же отображаться на рисунке.
Следует отметить, однако, что значения параметров, заданные по умолчанию, являются
оптимальными и в большинстве случаев создают наиболее яркие эффекты. На рисунке в
окне документа вы можете видеть, как будет выглядеть надпись ГЕОТОН при значениях
параметров эффекта, определенных по умолчанию.
Эффект рельефности надписи создается комбинацией подсветки (Highlight) и затенения
(Shadow), параметры которых определяются соответствующими элементами управле-
ния. В каждой из групп можно выбрать цвет тени или свечения, щелкнув мышью на об-
разце, степень непрозрачности этого цвета (Opacity) и режим наложения пикселов
(Mode). Значения, установленные по умолчанию, обычно дают наилучший результат.
В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вариантов дан-
ного эффекта. <
144 Создание Web-c айтов
ЩLayer 1
белого круга, который означает, что к слою применен
эффект (Рис. 4.65). Слева от этого значка находится тре- Efrects ' •'•:
Drop Shadow OK
—• Structure —
Blend Mode; [Multiply Reset
Opacity:
j~New Style...
Г~ Inner Shadow
( 3 Use global Light В Preview
Г"! Outer Glow
Г" Contour
Г Texture — Quality
Contour: • An<Mi«ed
Г Stroke
На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи) и справа
отображаются элементы управления эффектом.
Выбранный эффект имитирует тень, которую отбрасывает содержимое слоя. И этот эф-
фект, созданный параметрами по умолчанию, вы видите в окне документа.
Элементы управления Blend Mode (Режим наложения) и Opacity (Непрозрачность) оп-
ределяют соответственно режим наложения пикселов и степень непрозрачности тени.
Применяемая по умолчанию тень создается черным цветом. Однако для выбранного
объекта такой цвет тени не является наилучшим. Выберем другой цвет тени, более близ-
кий к цвету надписи.
> Щелкните мышью на поле с образцом цвета справа от открывающегося списка Blend
Mode (Режим наложения). На экране появится диалог Color Picker (Палитра цветов).
>• Если этот диалог перекрывает окно документа, переместите его в сторону, чтобы
видеть на рисунке результат выбора цвета.
146 Создание Web-сайтов
: |Untitted-l
re: | Custom
Ipheh
> Установите флажок 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 Рис. 4.71. Залитый цветом
(Слои). На экране появится меню эффектов. прямоугольник
Это меню содержит перечень тех же эффектов, что
и аналогичное меню в Adobe Photoshop.
>• Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф). На эк-
ране появится диалог Layer Style (Стиль слоя) с элементами управления эффекта
Bevel and Emboss (Скос и рельеф) (Рис. 4.72).
Layei Style
О
Angle:
• Stroke 3 Use global Light
Altitude: 30 |°
Gloss Contour:
H
Highlight Mode: [Screen
ai
Opacity: иммм — 0 — 1 7Б [%
Shadow Mode: | Multiply
—avH
Opacity:
— 0 — 00*
> Нажмите комбинацию клавиш IICtrl |+|| Р[, чтобы Рис. 4.76. Рисунок обрезан
по размеру кнопки
отменить выделение объекта (Рис. 4.76).
152 Создание Web-сайтов
Custom..
Состояние Over (Над) программа предлагает для вто-
рого кадра по умолчанию. Но вы можете выбрать для 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 Создание ШеЬ-слйтов
100% -г \ 1992 bylts / I s« ® 28.8 ...^ | j 314K / 992 byt« GIF • I | ж ф ZS.8 • •••> | 3MKf99Zbyl«GIF »
Рис. 4.83. Режим 2-Up (2 варианта) Рис. 4.84. Режим 2-Up (2 варианта)
с отображаемой информацией со скрытой информацией
156 Создание 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 цветную па-
s!1
литру Windows, которая основана на равномерной, с
постоянным интервалом, выборке RGB-цветов по всей
длине спектра.
Набор цветов каждой из перечисленных таблиц вы мо-
жете увидеть в палитре Color Table (Цветовая таблица). |
\ | !
\
> Выберите из открывающегося списка Reduction
(Уменьшение) значение Grayscale (Градации серого).
> Щелкните мышью на ярлыке Color Table (Цветовая
таблица) в третьем сверху окне палитр у правого F1
256 | Ы 1 Л
края рабочего окна или выберите команду меню
Window • Color Table (Окно • Цветовая таблица), Р и с 4 8 8
Палитра Color Table
чтобы вывести на экран эту палитру (Рис. 4.88). (Цветовая таблица)
Подготовка графики 159
В палитре Color Table (Цветовая таблица) отображаются образцы 256 градаций серого
цвета.
> Выбирая из открывающегося списка Reduction (Уменьшение) палитры Optimize
(Оптимизация) различные цветовые таблицы, просмотрите, как при этом изменяет-
ся оптимизированное изображение, его параметры, а также набор цветов таблицы
(Color Table), после чего снова выберите таблицу Selective (Выборочная).
Используя все доступные средства, вы можете добавлять, удалять, редактировать или
блокировать некоторые цвета в палитре Color Table (Цветовая таблица). Блокирование
цветов гарантирует, что цвет останется нетронутым, когда вы выбираете другие цвета
или преобразовываете их в Web-безопасные цвета. Для выбора любого цвета достаточно
щелкнуть на нем мышью; для выбора группы цветов - щелкать мышью при нажатой
клавише ! S h 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-сайтов
-Если вам заранее известен цвет фона Web- > Color Table
> Dither
страницы, на которую будет помещено создавае-
^Transparency
мое изображение, вы можете указать программе
окрасить прозрачные пикселы изображения цве-
J*£ Transparency
El
том, соответствующим фону Web-страницы. Это Dilher: )NO Dither •> [
Sample Picture»
Slices:
|Delault Settings
[All Slices
ы
Так как мы уже сохранили документ перед оптимизацией, то на этот запрос можно отве-
тить отрицательно.
> Нажмите кнопку Нет (No). Программа Adobe ImageReady закроется. Вы возвратитесь
к программе Adobe Photoshop.
Посмотрим, что представляет собой созданный файл.
>• Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web.
В этом файле записана автоматически созданная на языке JavaScript программа, изме-
няющая состояние изображения кнопки при различных действиях, выполняемых мы-
шью. Сами изображения находятся в папке images. Такая программа обычно состоит из
команд (операторов) и команд вызова функций. В нашем случае функции находятся в
заголовке HTML-документа между тегами <head> и </head>, а команды, их вызываю-
щие, - в его теле, между тегами <body> и </body>.
6-
164 Создание Web-сайтов
> Сохраните файл spisok.html, выбрав команду меню программы Блокнот (Notepad)
Файл • Сохранить (File • Save).
> Закройте обе копии программы Блокнот (Notepad).
Проверим, как работает созданная нами кнопка.
> Откройте документ spisok.html из папки Web в программе просмотра Web-страниц.
>• Перейдите в конец страницы, где находится вставленная кнопка.
Пока указатель мыши находится за пределами графической кнопки, ее изображение
плоское.
>• Установите указатель мыши на желтой кнопке с надписью На первую страницу.
Кнопка станет рельефной.
>• Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое состояние
графической кнопки.
> Отпустите левую кнопку мыши. Произойдет переход по ссылке, и в окно браузера
будет загружен файл geoton.html.
Если у вас что-либо не получается, проверьте, правильно ли вы скопировали программу
в файл spisok.html.
>• Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.
Таким образом, мы убедились, что созданный нами эффект Rollover (Наведение) работа-
ет. Подобным образом вы можете создавать большое количество разнообразных эффек-
Подготовка графики 165
тов. Кроме того, каждое состояние эффекта может быть анимировано, например, так,
чтобы при нажатии кнопки буквы «убегали» с нее. Можно придумать множество инте-
ресных и необычных эффектов.
>• Выберите команду меню 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
> Нажмите кнопку Q | справа от образца текущей кисти Brush (Кисть) на панели
параметров (Options Bar), чтобы открыть палитру кистей.
Напомним, что название кисти появляется во всплывающей подсказке, если навести и
удерживать на выбранной кисти указатель мыши.
>• Выберите кисть Soft Round 35 pixels (Мягкая круглая 35 пикселов), щелкнув на ней
мышью.
> Щелкните мышью на свободном пространстве рабочего окна. Палитра кистей
закроется.
Заметьте, что для клонирования следует воспользоваться кистью с мягкими краями, чтобы
максимально сгладить переход между существующим и перенесенным изображением.
Процесс клонирования состоит из двух операций. Сначала следует выбрать образец для
замены дефектного фрагмента, а затем выполнить замену. Чтобы на месте исправленно-
го дефекта не было заметно «заплатки», нужно правильно выбрать область-источник:
того же оттенка, с такой же освещенностью и т.д. В нашем случае по этим параметрам
для клонирования лучше всего подходит участок справа от блика.
> Установите указатель мыши, который примет форму круга диаметром 35 пикселов, на
фотографии справа от белого блика так, чтобы блик находился за пределами круга.
Alt
>• Нажмите и удерживайте клавишу II I. Указатель мыши примет форму @.
Alt
> Не отпуская клавишу II I. щелкните мышью в этом месте.
Ail
>• Отпустите клавишу ][ I.
Таким образом, мы зафиксировали центр клонируемой области.
Alt
Нажав клавишу i! I. вы можете взять образец для инструмента [jy в любом открытом
окне документа программы Adobe Photoshop, не меняя при этом активного окна.
Теперь можно перенести образец на блик и, таким образом, ликвидировать его.
>• Установите указатель мыши, который примет форму круга диаметром 35 пикселов,
на белый блик так, чтобы блик находился в центре круга.
>• Щелкните мышью в этом месте. В момент щелчка справа от указателя мыши-круга
появится крестик, обозначая центр клонируемой области. Белый блик исчезнет - на
него будет наложен клонированный образец.
Если полученный результат вас не удовлетворяет, отмените клонирование и попробуйте
клонировать другие области вокруг дефекта, пока не найдется подходящая замена.
Клонирование можно выполнять также, «рисуя» кистью при нажатой левой кнопке мы-
ши. При этом нужно следить за крестиком, определяющим место, с которого копируется
изображение, и одновременно видеть и правильно направлять процесс клонирования.
168 Создание Web-сайтов
№пле:|(.е»ек1 1 OK |
D Use Previous Layer to Create eloping M a i 1 Cancel |
a
Color: | • None
В поле ввода Name (Имя) этого диалога по умолчанию предлагается имя слоя - Levels 1
(Уровни 1). Данный тип корректирующего слоя настраивает уровни яркости и контраст-
ности изображения. Это то, что нам нужно.
Подготовка графики 169
•
Lock: • J & t } HI!: [ 100%
Параметры Opacity (Непрозрачность) и Mode (Режим)
позволяют сразу же определить степень непрозрачно-
сти и режим наложения пикселов. Корректирующие
eH
и
слои приобретают такие же характеристики непро-
зрачности и режима наложения, что и реальные слои. в. JJ
> Нажатием кнопки ОК закройте диалог New Layer (Но- Рис. 4.97. Корректирующий
вый слой). В палитре Layers (Слои) появится и станет слой создан
активным новый слой Levels 1 (Уровни 1) (Рис. 4.97).
Вновь созданный корректирующий слой располагается в палитре слоев непосредст-
венно на слое, который перед этим был активным. При необходимости можно изме-
нять его положение в пачке слоев, удалять, скрывать и дублировать по аналогии
с обычными слоями.
Одновременно с созданием корректирующего слоя на экране появился диалог Levels
(Уровни) (Рис. 4.98).
Поля ввода Output Levels (Выходные уровни) и шкала под ними в нижней части диалога
Levels (Уровни) используются для снижения контраста в изображении. Черны? тре-
угольник управляет тенями, а белый - светлыми областями. Вы также можете вводить
выходные значения в явном виде. Если в параметре Input Levels (Входные уровни) уча-
сток гистограммы справа от светлого треугольника соответствует белому цвету, то в
параметре Output Levels (Выходные уровни) этот же участок соответствует текущему
уровню, на который указывает треугольный бегунок.
Предположим, что необходимо снизить контраст. Если вы переместите белый треуголь-
ник нижней шкалы к отметке 225, то яркость самых светлых пикселов будет изменена с
255 до 225, а яркость всех остальных пикселов будет пропорционально уменьшена в со-
ответствии с изменившимся диапазоном значений. В результате изображение станет
темнее, а контраст в светлых областях снизится.
> Закройте диалог Levels (Уровни) нажатием кнопки ОК. Установленные параметры
коррекции будут применены. Изображение примет вид примерно как на Рис. 4.99.
Load..
gave..
Auto
liiliilliiL-M .U
: Options,,
l?j Preview
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
176 Создание Web-сайтов
а о о а
Рис. 4.107. Палитра
Paths (Контуры)
Несмотря на то, что контуры отображаются на экране, они не содержат пикселов, так как
являются не растровыми, а векторными изображениями. В векторной графике, в отличие
от растровой, изображение строится не из пикселов, а описывается в виде математиче-
ских объектов - контуров.
Контур состоит из одного или нескольких сегментов.
Начало и конец каждого сегмента определяют специ-
альные точки привязки или узлы (Рис. 4.108). Конту-
ры могут быть прямолинейными и криволинейными,
замкнутыми и открытыми. Криволинейный контур
имеет направляющие, с помощью которых можно на-
страивать его форму. Замкнутый контур не имеет на-
чальной и концевой точек; например, окружность - Рис. 4.108. Сегменты и узлы
это замкнутый контур. Открытый контур имеет кон- (точки привязки)
цевые точки; примером открытого контура является S-образная кривая.
> Выберите команду меню Window • Paths (Окно • Контуры). На экране появится па-
литра Paths (Контуры) (Рис. 4.107). Пока контуры не создавались, эта палитра пуста.
>• Переместите эту палитру так, чтобы она не перекрывала изображение самолета.
Прежде чем начать рисование контура, его следует создать. В этом случае контур сохранит-
ся автоматически.
> Нажмите кнопку j Ш \ - Creates new path (Создать но-
•—
вый контур) в нижней части палитры Paths (Контуры). Ik'О
В палитре появится и будет выделена строка с миниа-
тюрой и именем созданного контура, предлагаемым по
Path 1
В
умолчанию - Path 1 (Контур 1) (Рис. 4.109).
Теперь можно приступить к рисованию контура.
Построение прямолинейных контуров заключается в том,
а о о .о.
R
что концевые точки всех его сегментов, которые называ- Si
aL
ются точками привязки, опорными точками или узлами, Рис. 4.109.
последовательно обозначаются щелчками мыши. В ре- Новый контур создан
зультате Adobe Photoshop соединяет каждую пару точек
прямой линией.
> Установите указатель мыши, который примет форму пера с крестиком ф*, у левого
края нижней плоскости ближайшей к зрителю части левого крыла изображения
самолета.
Подготовка графики 179
> Щелкните мышью в этом месте. На изображении
появится точка привязки (Рис. 4.110). Она останет-
ся выделенной — заполненной темным или светлым
цветом, в зависимости от окружающего фона, - до
тех пор, пока вы не укажете следующую точку.
> Переместите указатель мыши вертикально вверх, к
левому краю верхней плоскости крыла самолета, и Рис. 4.110. Первая точка
щелкните в этой точке мышью. Обе точки будут привязки создана
соединены отрезком прямой - первый прямоли-
нейный сегмент будет создан.
Чтобы провести линию вертикальную, горизонталь-
ную или под углом, кратным 45°, удерживайте нажа-
той клавишу il shift l.
> Чтобы закончить построение огибающей, установите указатель мыши в верхней час-
ти окружности колеса.
> Нажмите и, не отпуская левую кнопку мыши, переместите указатель мыши вправо.
Появятся две направляющие линии.
>• Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон направляю-
щих, добейтесь, чтобы дуга обогнула левую, по отношению к зрителю, часть колеса.
>- Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо слева,
зафиксируется (Рис. 4.114).
Точки привязки криволинейных сегментов, имеющие направляющие, называются глад-
кими, в отличие от угловых точек прямолинейных сегментов, которые не имеют направ-
ляющих. Чтобы продолжать построение прямолинейных сегментов, следует преобразо-
вать последнюю гладкую точку с направляющими в угловую.
Подготовка графики 181
тель мыши на контуре в нужном месте. При этом рядом с указателем мыши появится
знак +. Щелкните мышью в этой точке.
Чтобы удалить точку привязки, выберите инструмент |ф~[ и установите указатель мыши
в той точке привязки, которую вы хотите удалить. При этом рядом с указателем мыши
появится знак -. Щелкните мышью. Точка будет удалена, а форма кривой изменится в
соответствии с оставшимися точками привязки.
Для перемещения всего контура используйте инструмент | >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
>• Нажав кнопку ОК, закройте диалог Defringe (Устранить кайму). Команда будет при-
менена, и ореол вокруг объекта исчезнет.
184 Создание Web-сайтов
Если вклеенное изображение было создано на черном фоне, то черную кайму вокруг его
границ можно удалить командой меню Layer • Matting • Remove Black Matte (Слой •
Обработка краев • Удалить черный ореол), а если на белом фоне, то белая кайма удаля-
ется командой меню Layer • Matting • Remove White Matte (Слой • Обработка краев •
Удалить белый ореол).
Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе».
v Выберите команду меню Edit • Transform • Scale (Правка • Преобразование • Мас-
штаб). Вокруг изображения самолета появится прямоугольная рамка с маркерами в
углах и серединах сторон, а на панели параметров (Options Bar) - элементы управле-
ния преобразованием объекта (Рис. 4.118).
>- Нажмите кнопку [Vj на панели параметров (Options Bar), чтобы закончить ввод па-
раметров. Размер самолета на фотографии уменьшится в два раза.
Теперь переместим самолет туда, где он должен находиться.
>• Выберите инструмент \**\ - Move Tool (V) (Инструмент «Перемещение» (V)) на па-
нели инструментов (Tools) и переместите изображение самолета в правый верхний
угол фотографии (Рис. 4.119).
Shift
ремещении удерживать нажатой клавишу ll l. то будут сохранены пропорции об-
ласти. Для поворота кадра следует установить указатель мыши, который примет
форму изогнутой стрелки, за пределами области выделения и, перемещая мышь, до-
биться нужного положения рамки. Чтобы отменить кадрирование, достаточно на-
жать клавишу liEsc].
v Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамка вклю-
чала все изображение, кроме узкой темной полосы у нижней границы фотографии
(Рис. 4.120).
> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавиш)1 ji
Фотография будет обрезана по установленной границе.
Но даже после обрезки фотография достаточно
велика для Web-страницы. При разрешении эк- г- Pixel Dtnenslons: <ЮО,ЗК — — — —
рана 800x600 пикселов (а с таким разрешением Wjdth: |460 || Pixels
П
по статистике в настоящее время работает боль-
шинство пользователей Web) фотография зани-
tletfit: 1297 ||pl«*
в
мает значительное место на экране. Кроме того,
файл с изображением такого размера будет дос- Width: [16,23 Hem 1:1
таточно велик по объему и будет долго загру- Height: 110,48 || cm
l-l
жаться. Потому уменьшим размер изображения, Resolution: [ 7 2 ||p>j*/inch
LI
что, в свою очередь, уменьшит объем файла.
П Constrain Proportions
>• Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость). Резкость
изображения усилится.
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Так как при изменении размеров изображения снижается его качество за счет удаления
избыточной информации, то, по возможности, следует избегать этой операции. Если вы
сканируете изображение, то желательно уже на этом этапе определить его размер и вы-
полнить сканирование с таким разрешением, которое обеспечит наилучшее качество
изображения.
Этот диалог совмещает в себе уже знакомые вам по Adobe ImageReady элементы: окно
просмотра, позволяющее выбирать различные режимы просмотра оптимизированного
изображения; элементы управления оптимизацией - справа вверху и цветовую таблицу
(Color Table) - справа внизу, используемую при оптимизации изображений в форматах
GIF и PNG-8. Кроме того, здесь же присутствует вкладка Image Size (Размер изображе-
ния), элементы управления которой позволяют изменить размер изображения так же,
Подготовка графики 189
В поле ввода или с помощью ползункового регулятора Blur (Размытие) можно указать
степень размытия изображения в пределах от 0 до 2.0 для легкого размытия границ
цветовых областей. Данный параметр всегда следует использовать применительно к изо-
бражениям с глубиной цвета 8 бит на пиксел. Для изображений с глубиной цвета 24 бита
на пиксел потребность в таком сглаживании невелика. Размытие оказывается особенно
полезным для изображений, имеющих большие участки фона однородной окраски. Если
в изображении имеется текст, то величину сглаживания нужно уменьшить, иначе текст
будет трудно прочесть. Этот параметр уменьшает размер файла, но в то же время
размывает детали изображения, действуя подобно фильтру Gaussian Blur (Размытие по
Гауссу). Рекомендуется использовать значения от 0.1 до 0.5.
Установка флажка ICC Profile (Профиль ICC) позволяет сохранить в файле профиль ICC,
который используется некоторыми браузерами для цветовой коррекции. Данный флажок
доступен только для изображений, созданных в формате Adobe Photoshop.
Если исходное изображение содержит прозрачные области, то в открывающемся списке
Matte (Подложка) можно выбрать цвет для имитации цвета фона Web-страницы, на ко-
торую будет помещено изображение.
> Закройте диалог Save For Web (Сохранить для Web), нажав кнопку ОК. На экране
появится диалог Save Optimized As (Сохранить оптимизированный документ как),
в поле ввода которого Имя файла (File name) уже указано имя сохраняемого файла -
Ozero.
> Выберите папку для сохранения оптимизированного файла.
> Нажатием кнопки Сохранить (Save) закройте диалог Save Optimized As (Сохранить
оптимизированный документ как). Файл будет сохранен на диске в указанной папке.
>• Закройте документ Ozero.psd, выбрав команду меню File • Close (Файл • Закрыть).
Если появится запрос о необходимости сохранения документа, ответьте отрицательно.
Мы познакомились с принципами оптимизации изображений в программе Adobe Photo-
shop. Как вы могли заметить, они практически не отличаются от оптимизации в Adobe
ImageReady.
Подготовка графики 191
> Нажмите клавишу |[Dalelal. Вся выделенная область будет очищена и окрашена и белый
цвет фона (Рис. 4.124) - тот цвет, на котором создавалось изображение.
I Cancel в**
©Erint
OQnline
0fiF
OPNG
- Description
GIF format only supports 8 bit color but is widely accepted in browsers.
Здесь следует определить, в каком формате нужно сохранить изображение - 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
Нажмите кнопку Next (Далее). На экране появится диалог Indexed Color (Индексиро-
ванные цвета) (Рис. 4.129).
Подготовка графики 195
B r a * | None
И Transparency
1-1
- Options — — — — — —
Matte: | None
Either: | aflusicn g
В
fimount: 175 |%
П Preserve Exact Colors
> Нажмите кнопку 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>
> Установите флажок Invert (Обратить выделение). Теперь в окне просмотра диалога
черным цветом окрасится фон, а белым, соответствующим выделенной области, -
изображение самолета.
Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать в диалоге
Color Range (Цветовой диапазон) инструмент \jQ и щелкнуть на нужном цвете в окне
документа или в поле просмотра диалога.
Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в диалоге
инструмент|^| и щелкнуть мышью на исключаемых цветах.
> Нажмите кнопку [•[ - Edit in Quick Mask Mode (Q) (Редактирование в режиме «Бы-
страя маска» (Q)) на панели инструментов (Tools), чтобы включить этот режим.
Все изображение в окне документа, за исключением выделенных - незащищенных от
изменения - областей, будет маскировано с помощью своего рода «пленки», по
умолчанию окрашенной в красный цвет и имеющей 50-процентную непрозрачность
(Рис. 4.133). Теперь все, что окрашено красным цветом, - это маска — защищенная от
изменения область.
>• Нажмите кнопку E3J - Edit in Standard Mode (Q) (Редактирование в стандартном
режиме (Q)) на панели инструментов (Tools). Программа переключится в стандарт-
ный режим.
Просмотрите внимательно выделенную область и убедитесь, что вы правильно отре-
дактировали ее в режиме «Быстрая маска». При необходимости можно снова вклю-
чить этот режим и выполнить необходимую корректировку.
Подготовка графики 201
> С помощью инструмента [Ч] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) уменьши-
те масштаб отображения документа до 100%.
Теперь мы должны сохранить выделенную область в альфа-канале.
Каждый документ Adobe Photoshop содержит один или несколько каналов, в которых
хранится