Академический Документы
Профессиональный Документы
Культура Документы
Создание 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 содержит один или несколько каналов, в которых
хранится информация о цветовых элементах изображения. Например, изображение в
цветовом формате RGB содержит три канала: красный (Red), зеленый (Green) и синий
(Blue). Цветовые каналы создаются автоматически при создании нового документа.
Управлять каналами можно с помощью специальной палитры Channels (Каналы).
> Щелкните мышью на ярлыке Channels (Каналы)
в третьем сверху окне палитр. Если этот ярлык
отсутствует, выберите команду меню Window •
Show Channels (Окно • Показать палитру «Ка-
налы»). На экране появится палитра Channels
(Каналы) (Рис. 4.134).
Палитра Channels (Каналы) содержит список всех
цветовых каналов данного изображения. В ней ото-
бражаются миниатюры и имена трех каналов - Red
(Красный), Green (Зеленый), Blue (Синий) - в соот- Рис. 4.134. Палитра Channels
ветствии с действующим цветовым режимом. Кроме
(Каналы)
того, в программе создается еще и совмещенный
канал - RGB, отображающий результирующее изображение, который занимает в па-
литре верхнюю строку. Палитра Channels (Каналы) позволяет также управлять ото-
бражением отдельных каналов на экране с помощью значка ^ , делая их видимыми или
невидимыми.
>• Просмотрите, как выглядит каждый канал, включая и выключая его отображение с
помощью значка ^ .
В каждом документе вы можете создавать из выделенных областей дополнительные ка-
налы, которые называются альфа-каналами и используются для хранения масок, позво-
ляющих изолировать и защитить от модификации в процессе редактирования отдельные
фрагменты изображения. Каждое изображение может содержать до 24-х каналов, вклю-
чая все цветовые каналы. Вы можете добавлять и
удалять альфа-каналы, а также задавать для каждого
из них имя, цвет, режим маскирования и непрозрач-
ность. Все новые каналы получают те же размеры и
разрешение, что и исходное изображение. Сохранив
выделенную область в альфа-канале, вы можете много-
кратно использовать ее в любом документе.
Создадим из выделенной области альфа-канал.
> Нажмите кнопку 1 О 1 - Save selection as channel
(Сохранить выделение как канал) в нижней части
палитры Channels (Каналы). В палитре появится
новый канал - Alpha 1 (Альфа 1) (Рис. 4.135). Рис. 4.135. Альфа-канал создан
г- Source — — — — ^ — — ^
Document: | Samdet.psd R
Channel: f Alpha 1 W
П Insert
r- Operation
0 №w selection
0 fidd to Selection
0 Subtract «on Selection
О Jnlsrsect with Selection
> Закройте диалог Load Selection (Загрузить выделение), нажав кнопку ОК. Изображе-
ние самолета в окне документа вновь будет выделено.
Прежде чем повторно экспортировать изображение в формат GIF89a, проверим, как бу-
дет выглядеть наш рисунок на Web-странице с синим цветом фона. Для этого скопируем
в буфер обмена выделенную область с изображением самолета, создадим новый слой,
зальем его синим цветом и вставим из буфера обмена выделенную область.
> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область
будет скопирована в буфер обмена.
> Щелкните мышью на ярлыке Layers (Слои), чтобы показать эту палитру.
>• Нажмите кнопку I В | - Create new layer (Создать новый слой) в нижней части па-
литры Layers (Слои). Новый слой - Layer 1 - будет создан и станет активным.
>• Откройте палитру Swatches (Каталог) и щелчком мыши выберите пятый слева в
верхнем ряду синий цвет для заливки слоя.
> Выберите команду меню Select • All (Выделение • Все), чтобы выделить весь документ.
> Воспользовавшись инструментом \$ь\ - Paint Bucket Tool (G) (Инструмент «Заливка»
(G)), залейте активный слой выбранным цветом.
>• Выберите команду меню Edit • Paste (Правка • Вставить). Изображение из буфера
обмена будет вставлено на новый слой Layer 2, и в окне документа вы увидите изо-
бражение самолета на синем фоне.
Скорее всего, на синем фоне все еще хорошо видны резкие границы, особенно в области
крыльев и фюзеляжа самолета. Эти края можно растушевать инструментом \$>\ -
Smudge Tool (R) (Инструмент «Палец» (R)). Но сделать это нужно на основном слое
Background (Фон).
>• Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку I S I - Delete
current layer (Удалить активный слой) в нижней части палитры Layers (Слои).
Активным станет слой Background (Фон).
> Восстановите выделение, выбрав команду меню Select • Load Selection (Выделе-
ние • Загрузить выделение) и в появившемся диалоге Load Selection (Загрузить вы-
деление) нажав кнопку ОК.
204 Создание Web-сайтов
Some of the specified files already exist in the target location. The files marked below wil be replaced:
0 Samolet.gjf
Cancel Replace
>• Не закрывая, сверните окно браузера, нажав кнопку [I] в правом верхнем его углу.
Описанные выше методики выделения и создания прозрачных областей можно и следу-
ет применять в том случае, если вы заранее не знаете, каким будет цвет фона Web-
страницы, на которую будет помещено создаваемое прозрачное изображение. Если же
этот цвет вам известен, то, повторим, именно на нем следует выполнять сглаживание.
В том случае, когда сглаживание выполнено на фоне, отличающемся от фона Web-
страницы, следует окрасить частично прозрачные пикселы, которые всегда присутству-
ют на границе прозрачной области, в цвет фона Web-страницы. Посмотрим, как это сде-
лать практически.
> Выберите команду меню File • Save for Web (Oaiui • Сохранить для Web). На экране
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122).
В этом диалоге сохранены параметры оптимизации, применявшиеся последний pas.
При установленном флажке Transparency (Прозрачность) частично прозрачные пиксе-
лы, которые обычно присутствуют по краям сглаженного изображения, заполняются
цветом, определенным параметром Matte (Подложка). Установим синий цвет подложки,
соответствующий цвету фона Web-страницы geoton.html.
>• Щелкните мышью на поле открывающегося списка Matte (Подложка). На экране поя-
вится диалог Color Picker (Палитра цветов).
>• В полях ввода R, G, В введите значения, соответственно, 0, 0, 255 и нажатием кнопки
ОК закройте диалог Color Picker (Палитра цветов). Заданный синий цвет отобразится
в поле открывающегося списка Matte (Подложка). На образце в диалоге вокруг изо-
бражения самолета появится тонкая линия такого же цвета.
>• Нажмите кнопку ОК. Диалог Save For Web (Сохранить для Web) закроется. На экра-
не появится диалог Save Optimized As (Сохранить оптимизированный документ как).
>• Откройте папку Web и нажмите кнопку Сохранить (Save).
>- В появившемся диалоге Replace Files (Замена файлов) с запросом о замене сущест-
вующего файла с именем Samolet.gif нажмите кнопку Replace (Заменить). Файл бу-
дет перезаписан.
Посмотрим, как будет выглядеть изображение в программе просмотра Web-страниц.
> " Разверните свернутое окно браузера и обновите документ HTML.
Теперь, после того как частично прозрачные пикселы по краям сглаженной области ок-
рашены в цвет фона Web-страницы, изображение смотрится вполне профессионально.
> Закройте браузер, нажав кнопку [х] в правом верхнем его углу.
>• Удалите из файла geoton.html тег, загружающий фотографию Samolet.gif.
>- Закройте документ Samolet.psd в программе Adobe Photoshop, нажав кнопку [х] в
правом верхнем углу его окна, И на предложение сохранить файл ответьте отри-
цательно.
Мы подробно познакомились с приемами и особенностями создания прозрачных
изображений. Еще раз подчеркнем, что качество таких изображений зависит от того, на
каком фоне выполнялось сглаживание. В любом случае сглаживание следует выполнять
на том же фоне, что и фон Web-страницы.
Подготовка графики 207
- |G lowing Eclges^
Edge Width
Edge Brightness
> Переместите ползунковый регулятор Edge Width (Ширина границ) влево так, чтобы в
поле ввода над ним появилось значение 1.
>• Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому
краю так, чтобы значение этого параметра стало равно 20.
>• Для параметра Smoothness (Сглаженность) установите значение 1.
Подготовка графики 209
>• Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.
После применения этого фильтра изображение будет затемнено. Поэтому воспользуемся
командой Brightness/Contrast (Яркость/Контраст) для увеличения яркости и контраста.
> Выберите команду меню Image • Adjustments • Brightness/Contrast (Изображение •
Коррекции • Яркость/Контраст). На экране появится диалог Brightness/Contrast (Яр-
кость/Контраст) (Рис. 4.141).
>• Переместите ползунковый регулятор Brightness (Яркость) вправо так, чтобы в поле
ввода над ним отобразилось значение +50.
> Переместив ползунковый регулятор Contrast (Контраст) вправо, установите значение
этого параметра +30.
> Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Контраст). Документ
примет вид примерно как на Рис. 4.142.
Brightness/Contrast
Brightness:
Contrast:
Г Edit: Master ы-
Hue:
EZI Reset
Saturation:
EZ1
I Save...
*-*EH
Lightness:
• Colorize
Jt 0 Preview
числовое значение в поле ввода над ползунковым регулятором отражает угол пово-
рота на цветовом круге относительно исходного красного цвета.
> Установите значение параметра Hue (Цветовой тон) - 210. Такое значение отражает
тот факт, что на цветовом круге синий цвет, которым тонировано изображение, сме-
щен относительно красного на 210°.
> Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность).
Установленные цветовые параметры будут закреплены.
> Сохраните документ в папке Web, в файле Fon.psd в формате Adobe Photoshop.
На этом создание фоновой текстуры можно считать законченным. Но, так как рисунок
будет повторен на Web-странице много раз, между фрагментами фона будут видны швы.
В Adobe ImageReady имеется специальный фильтр — Tile Maker (Конструктор повторе-
ний), который позволяет удалить швы, создавая таким образом бесшовный фон.
> Установите флажок Resize Tile to Fill Image (Изменить размер плитки для заполне-
ния изображения).
> Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Уста-
новленные параметры будут применены.
Чтобы увидеть, как будет выглядеть в программе просмотра Web-страниц созданный
фон, следует сначала указать программе, что данное изображение должно использовать-
ся как фон.
>- Выберите команду меню File • Output Settings • Background (Файл • Параметры
вывода • Фон). На экране появится диалог Output Settings (Параметры вывода)
(Рис. 4.146).
Uulpul Settings
lEackyound Cancel
• View Document As -
© [mage О Background
p Background Image -
I Load.., 1
Eath: |
ф | 0- DВ
Адрес. | Q C:\Docuntenli and 5 4 1 i n g i \ V a ^ M o t a l S«tlingi\T»r»p\linageneildy',TargiMPieview3VFon.hli» [ - [ § J Переход | Lhks
Fomat: OIF
Dimersiuns: lOOw X IDOh
Sixe:4,822K
Settirgs: Selective, 16 Cobra, 100У. Diffusion Dither, Tnnspimicy cm. No Тгапзралгсу Dither, Interlaced, OV. Web Srap
body bg
/body>
> Закройте окно браузера, нажав кнопку \х\ в правом верхнем его углу.
Чтобы изготовленное изображение можно было использовать как фон Web-страницы,
его необходимо оптимизировать и сохранить в Web-формате.
>• Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
Будет выполнена оптимизация с последними установленными параметрами, и вы
увидите оригинальное и оптимизированное изображения.
>• Подберите наилучшие, с вашей точки зрения, параметры оптимизации в формате GIF.
>• Сохраните оптимизированный документ в папке Web под именем Fon.gif, выбрав
команду меню File • Save Optimized (Файл • Сохранить оптимизированный до-
кумент).
>• Закройте программу Adobe ImageReady без сохранения документа Fon.psd, нажав
кнопку [х] в правом верхнем углу ее окна.
Посмотрим теперь, как будет выглядеть изготовленный фон на Web-странице
geoton.html.
> Откройте файл geoton.html из папки Web в программе Блокнот (Notepad) и вставьте
в открывающий тег <body> атрибут background=Fon.gif.
214 Создание Web-сайтов
Шероховатость
В программе Adobe Photoshop создайте новый документ размером 100x100 пикселов с
белым цветом фона и черным цветом переднего плана.
> Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter • Noise •
Add Noise (Фильтр • Шум • Добавить шум) с установленным переключателем
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром
Amount (Эффект) равным 400 (Рис. 4.148).
Рис. 4.148. Применен фильтр Add Noise Рис. 4.149. Применен фильтр Emboss
(Добавить шум) (Рельеф)
Шлифованная плитка
>- Создайте новый документ размером 100 х 100 пикселов и с белым цветом фона.
>• Примените фильтр Add Noise (Добавить шум) с установленным переключателем
Gaussian (По Гауссу), флажком Monochromatic (Сохранить оттенки) и параметром
Amount (Эффект) равным 125 (Рис. 4.150).
>• Примените фильтр Motion Blur (Размытие в движении), воспользовавшись командой
меню Filter • Blur • Motion Blur (Фильтр • Размытие • Размытие в движении), с па-
раметрами: Angle (Угол)=-45, Distance (Расстояние)=100 (Рис. 4.151). Последний
параметр должен быть не меньше размера изображения.
>• Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высо-
та)=2, Amount (Эффект)=35 (Рис. 4.152). Обратите внимание, что параметр Angle (Угол)
должен отличаться от того же параметра фильтра Motion Blur (Размытие в движении).
Облицовочная плитка
> Создайте новый документ размером 100 х 100 пикселов и с белым цветом фона.
> Примените фильтр Add Noise (Добавить шум) с установленным переключателем
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром
Amount (Эффект) равным 120 (Рис. 4.153).
> Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высо-
та)=1, Amount (Эффект)=ЗО (Рис. 4.154).
Рис. 4.153. Применен фильтр Add Noise Рис. 4.154. Примените фильтр Emboss
(Добавить шум) (Рельеф)
216 Создание Web-сгйтов
Lighting Effects
Focus:
Narrow 92 Wide
Properties:
Gloss:
Matte -79 Shiny
•TextureChannel:
ЕЭ White is high
| Alpha 1
J2-
Height: Flat 50 Mountainous
0 Preview
занимаемся?
> Нажмите кнопку \Ж\ - Slice Tool (К) (Инструмент
«Фрагмент» (К)) на панели инструментов (Tools), О нашей
хомпании •
> Нажмите кнопку [ЦЦ - Toggle Slices Visibility (Q) (Выключение/включение отображе-
ния фрагментов (Q)) на панели инструментов (Tools). Разметка фрагментов будет
скрыта.
> Чтобы показать скрытую нарезку, повторно нажмите кнопку | Н [ - Toggle Slices
Visibility (Q) (Выключение/включение отображения фрагментов (Q)) на панели инст-
рументов (Tools) или просто щелкните мышью в окне документа при выбранном ин-
струменте \J^\ или \^\.
Нарезать изображение можно и другим способом - создав выделенную область и выбрав
команду меню Select • Create Selection from Slice (Выделить • Создать выделение из
фрагмента).
Для каждого полученного фрагмента документа создадим эффект Rollover (Наведение)
таким образом, чтобы при установке указателя мыши в браузере на каждом из пунктов
меню цвет фона этого фрагмента изменялся с синего на темно-синий. Начнем с первого
фрагмента. Предварительно его следует выделить.
>• Нажмите кнопку [5^] - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)) на
панели инструментов (Tools), чтобы выбрать инструмент.
> Установите указатель мыши, который примет форму Ifi, в окне документа на
фрагменте с надписью Главная страница.
220 Создание Web-сайтов
>• Щелкните на имени фрагмента menu_01 в палитре Web Content (Содержимое Web).
> Если флажок видимости слоя - значок глаза присутсвует напротив слоя Layer 1 в палит-
ре Layers (Слои), сбросьте данный флажок щелчком мыши.
>• Щелкните мышью на строке Over (Над) под фрагментом menu_01 в палитре Web
Content (Содержимое Web), чтобы выделить состояние эффекта Rollover (Наведение)
для этого фрагмента.
>• Если флажок видимости слоя - значок глаза отсутсвует напротив слоя Layer 1 в палитре
Layers (Слои), установите данный флажок щелчком мыши.
Таким образом мы убедились, что изображение слоя Layer 1 будет появляться на экране,
только при наведении указателя мыши на фрагмент menu_01.
Создадим такой же эффект для второго фрагмента с надписью Чем мы занимаемся?
> Выберите следующий фрагмент - menu_02, щелкнув на нем мышью в палитре Web
Content (Содержимое Web). Второй фрагмент с надписью Чем мы занимаемся? бу-
дет выделен в окне документа.
Фрагмент можно выбрать также щелчком мыши в окне документа при активном инст-
рументе | У ] - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)).
>• Создайте состояние Over (Над), нажав кнопку I S I - Creates new rollover state (Соз-
дать новое состояние) в нижней части палитры Web Content (Содержимое Web).
>• Создайте выделенную область из фрагмента с помощью команды меню Select •
Create Selection from Slice (Выделить • Создать выделение из фрагмента).
>• Создайте новый слой - Layer 2 - в палитре Layers (Слои) и залейте выделенную об-
ласть темно-синим цветом.
Убедитесь, что видимось слоя Layer 2 отсутсвует при выборе фрагмента menu_02 в па-
литре Web Content (Содержимое Web) и присутсвует при выборе состояния Over (Над)
для фрагмента menu_02 в палитре Web Content (Содержимое Web).
Будет определен эффект Rollover (Наведение) для второго фрагмента.
>• Действуя описанным способом, создайте эффект Rollover (Наведение) для остальных
фрагментов изображения.
После того как изображение нарезано и для фрагментов создан эффект Rollover (Наведе-
ние), у вас есть два варианта дальнейших действий. Можно сохранить готовые фрагменты
изображения и затем вручную в текстовом редакторе вставить ссылки на них в код
HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe
ImageReady и сохранить вместе с нарезанными частями изображения также и HTML-
файл, который будет создан автоматически с уже готовым меню. Назначение ссылок
фрагментам изображения выполняется с помощью палитры Slice (Фрагмент).
>• Щелкните мышью при выбранном инструменте [Ц^] - Slice Select Tool (О) (Инструмент
«Выбор фрагмента» (О)) в окне документа на первом фрагменте изображения с надпи-
сью Главная страница, чтобы выделить его.
222 Создание Web-сайтов
fr DiMenslsns
В открывающемся списке Туре (Тип) вы можете вы- t> Cell AHgnawnt
^ Background
брать тип фрагмента из трех вариантов: Image
^ Stains Bar Message
(Изображение), No Image (He изображение) и Table
(Таблица). По умолчанию тип всех фрагментов - Image
(Изображение), т.е. содержащий графические данные. Рис. 4.162. Палитра Ы/ев
Для фрагментов, содержащих не графику, а только ' рагмент)
сплошной цвет или текст, следует устанавливать тип No Image (He изображение).
При этом вид палитры Slice (Фрагмент) изменится, и вы сможете ввести нужный текст в
специальном поле ввода, а в расширяемой части Background (Фон) выбрать цве- фона
для текстового фрагмента из открывающегося списка Color (Цвет) (Рис. 4.163). Текст,
который вы введете, в окне документа не отобразится. Его можно будет увидеть только
в браузере.
Чтобы связать выбранный фрагмент изображения с другим HTML-документом, который
будет загружаться в браузер после щелчка мышью на данном фрагменте, следует в поле
открывающегося списка URL ввести адрес нужного документа.
>• В поле открывающегося списка URL введите имя файла geoton.html.
Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологию фрей-
мов, разделив экран по вертикали на два окна: в левом отображается меню из файла
menu.html, а в правом - страницы сайта. Правому фрейму присвоено имя frame. Чтобы
определить, в какой фрейм должна загружаться Web-страница, следует указать его имя
в поле открывающегося списка Target (Цель).
>• В поле открывающегося списка Target (Цель) введите имя правого фрейма - frame.
Список Target (Цель) станет доступным после того, как вы введете ин-
формацию в поле URL и перейдете в любое другое поле палитры.
Preset: (Custom
р HTML 1"»]
D Output XHTML
И Include Comments
E Always Add Alt Attribute
E3 Always Quote Attributes
• Close Al Tags
И Include Zero Margins on Body Tag
8-1210
226 Создание Web-сайтов
Sice Output
© Generate ТэЫе
Referenced: [
Preset: [Custom
llmageMaps
Type
© Clent-Sde
О NCSA Server-side
О CERN Server-Side
О Clent-ade and NCSA Saver-Side
О Ctent-Side and CERN Server-Side
- Placement -
О Top О Body ©Bottom
Preset: [Custom
_H
г- |Sa*ing Files
Г Optimized Hies
•File Naming —
| site name b l + |hyphen I » ! + I trigger name -1 +
>- Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут сохранены
в указанных папках с установленными параметрами.
> Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом верхнем
углу его окна.
Проверим созданное меню.
>- Откройте в программе просмотра Web-страниц файл index.html из папки Web
Вы увидите, что в правом фрейме загружен файл geoton.html, а в левом - вместо преж-
него меню-таблицы загружена созданная нами графическая навигационная панель.
> Устанавливайте указатель мыши на разных пунктах меню. При этом будет изменять-
ся цвет фона соответствующей надписи.
>• Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм будет
загружен файл spisok.html.
>- Щелкните мышью на пункте меню Главная страница. В правый фрейм будет загру-
жен файл geoton.html.
В автоматически созданном программой файле menu.html таблица с фрагментами
изображения находится между комментариями < ! — ImageReady Preload Script
(menu.psd) --> и < ! — End ImageReady S l i c e s -->. При необходимости этот
фрагмент кода можно скопировать в буфер обмена и затем вставить в любой HTML-
документ. Меню.будет работать.
Layer 1.
Рис. 4.169. Палитра Image Map
> В палитре Layers (Слои) щелкните мышью на (Карта навигации)
слое Layer 1, чтобы выделить его.
> Выберите команду меню Layer • New Layer
Based Image Map Area (Слой • Новая область (HI
> Щелкните мышью на слое Background copy в палитре Layers (Слои), чтобы выде-
лить его.
>- Выберите команду меню Layer • New Layer Based Image Map Area (Слой • Новая
область карты навигации из слоя). В палитре Image Map (Карта навигации) отобра-
зятся элементы управления для новой области карты навигации.
Для выбранного слоя лучше всего подойдет прямоугольная форма области ссылки, т.е.
вся область документа за пределами изображения самолета.
>- Убедитесь, что в открывающемся списке Shape (Форма) палитры Image Map* (Карта
навигации) выбрано Rectangle (Прямоугольник).
>• В поле ввода URL палитры Image Map (Карта навигации) введите имя файла
spisok.html. Это имя появится в палитре Layers (Слои) под названием слоя
Background copy.
> В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?
Так как область карты навигации для слоя Background copy создана после области для
слоя Layer 1, имеет большие размеры и перекрывает последнюю, то ее - область карты
навигации для слоя Background copy- нужно переместить на задний план.
> В палитре Web Content (Содержимое Web) перетащите мышью слой с одним само-
летом на самый верх. Его имя изменится на lmageMap_02.
Подготовленную таким образом карту навигации следует оптимизировать.
> Если палитра Optimize (Оптимизация) отсутствует на экране, выберите команду ме-
ню Window • Optimize (Окно • Оптимизация).
>• В открывающемся списке Settings (Установки) палитры Optimize (Оптимизация)
выберите набор параметров JPEG (JPEG). Параметры, соответствующие этому набо-
ру, отобразятся в палитре.
> В открывающемся списке Quality (Качество) выберите High (Высокое).
>• Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
Будет выполнена оптимизация с выбранными параметрами.
>- Сравните оригинальное и оптимизированное изображения и, если считаете нужным,
откорректируйте параметры оптимизации.
Сохраним оптимизированное изображение.
> Выберите команду меню File • Save Optimized (Файл • Сохранить оптимизирован-
ный документ). На экране появится диалог Save Optimized (Сохранение оптимизиро-
ванного документа) (Рис. 4.92), в поле ввода Имя файла (File name) которого указано
имя сохраняемого документа - Samolet.html.
>- Откройте папку Web для сохранения файла.
>• Убедитесь, что в открывающемся списке Тип файла (List files of type) выбрано HTML
and Images (\html) (HTML и изображения (*.html)), чтобы сохранить HTML-код с
картой навигации.
>• Закройте диалог Save Optimized (Сохранение оптимизированного документа), нажав
кнопку Сохранить (Save). В папке Web будет сохранено изображение Samolet.jpg и
файл Samolet.html с HTML-кодом карты навигации.
> Закройте программы Adobe ImageReady и Adobe Photoshop.
Подготовка графики 233
не только Netscape Navigator, видит этот блок, он проигрывает анимацию не одк н раз,
а столько, сколько указано, или бесконечно.
Общая схема следования этих блоков приблизительно такова:
• заголовок - GIF87a или GIF89a - определяет формат файла;
• описание логического экрана - задается размер экрана, на котором будет проигры-
ваться анимация;
• описание глобальной палитры - необязательно, но крайне желательно;
• произвольное количество блоков изображения, в том числе текстовых, или пар бло-
ков: управление графическими расширениями - изображение. Блок управления гра-
фическим расширением может содержать в себе указание на локальную палитру, рас-
положение на логическом экране, задержку и способ удаления изображения и оказы-
вает влияние только на следующий непосредственно за ним блок изображения;
i/ завершитель - признак конца.
Комментарии и специальные блоки, если они есть, могут располагаться в любом месте
файла, но только после описания глобальной палитры или после описания логического
экрана. Блок расширения Netscape Loop должен следовать непосредственно за глобаль-
ной палитрой.
Использование GIF-анимаиии
В следующих главах вы узнаете, как создавать анимацию в различных форматах, в том
числе и GIF-анимацию. Здесь же отметим, что если у вас уже есть готовая GIF-анимация,
то процедура помещения ее на Web-сайт ничем не отличается от помещения туда же про-
стого, не анимированного GIF-файла. Она выполняется с помощью тэга <img> и подроб-
но рассмотрена в предыдущих главах.
К несомненным достоинствам GIF-анимации можно отнести следующие ее особенности:
^ небольшой размер файла за счет оптимизации;
•" не требуется специальных программ для просмотра;
• для проигрывания не требуется постоянной связи с сервером;
• простой способ помещения на Web-страницу.
Но у GIF-файлов есть и недостатки:
i/ палитра не превышает 256 цветов;
^ сжатие фотографических изображений гораздо ниже, чем в формате JPEG
Стандарт GIF89a - весьма мощный инструмент для создания Web-анимаций, однако не-
обходимо учитывать тот факт, что если некоторые специальные графические программы
и поддерживают этот стандарт в полном объеме, то это не относится к некоторым брау-
зерам, поэтому, применяя динамические GIF-файлы для Web, лучше ориентироваться не
на сам стандарт, а на возможности браузеров по его поддержке.
Учитывая проблемы совместимости программ просмотра, при создании анимационных
GIF-файлов рекомендуется соблюдать следующие правила:
• желательно не использовать локальные палитры: в некоторых случаях это приводит
к неправильному отображению цветов;
Анимация на Web-страницах 237
ш жтшшшшшшш
Пока в программе Adobe ImageReady не будет создан новый или открыт существующий
документ, элементы управления данной палитры будут недоступны. Поэтому сразу от-
кроем файл Geoton.psd.
Создаем анимацию с помощью Adobe ImageReady 239
> Выберите команду меню File • Open (Файл • Открыть). На экране появится диалог
Открытие файла (Open) (Рис. 6.2).
> Откройте папку, в которой вы сохранили файл Geoton.psd, и щелчком мыши
выделите его.
ц
flam* ] £Д Моидокучканты bj Q 0 Е? G3-
CjCaaitatia Studio
aCmelUiei Filet
UMyeBookt
£ | My Received File.
И My Virtual Machine.
ш
^ ) каталог CD
*Ч Цдц вшеоэвпнси
С^Мои РНС9НКИ
j ^ Ноя музыка
Имя файла:
й i CTKpDfIb
•шине 1ип Файлов: |А» Readable Fomtfs NJ j Отмена
New Frame
0«М«Г(мн
DaMcAlMMtfon
Copy Frame
P«»« FtMM...
StttectAIFrtMS
Tuilin...
R«y*w* FiMMt
Optimize Animation...
Palette Options...
Для текущего кадра включим дополнительно отображение слоя Layer 4 с рисунком двери.
> Щелкните мышью в поле Indicates layer visibility (Индикация видимости слоя) слоя
Layer 4 палитры Layers (Слои), чтобы включить его отображение.
Теперь в окне документа и на третьем кадре анимации должны отображаться все слои, за
исключением слоя Layer 2.
Действуя описанным способом, вы можете создать для анимации любое количество кад-
ров и для каждого из них определить с помощью палитры Layers (Слои) графическое
содержимое.
Удалить любой кадр или группу кадров из палитры Animation (Анимация) можно с по-
мощью кнопки 1 Ш | - Deletes selected frames (Удаление выбранных кадров), предвари-
тельно выделив их щелчками мыши при нажатой клавише li Shifl l. если кадры смежные
(в этом случае достаточно щелкнуть мышью только на крайних кадрах), или при нажатой
клавише IIC t r l I. если кадры несмежные. Удалить выбранные кадры можно также коман-
дой меню Delete Frame (Удалить кадр) палитры Animation (Анимация).
>• Не отпуская клавишу IIc t r l I. щелкните мышью в палитре Animation (Анимация) пооче-
редно на не выделенных темным цветом кадрах анимации. Эти кадры будут выделены.
>• Отпустите клавишу II Ctrl I. No delay
0.1 seconds
Выделить все кадры анимации в палитре Animation (Анимация) 0.2
можно также с помощью команды меню палитры Animation (Ани- 0.5
мация) Select All Frames (Выделить все кадры). 1.0
2.0
Теперь, когда все три кадра анимации выделены, установим для 5.0
каждого из них время задержки, равное 1 секунде. 10.0
Щелкните мышью в палитре Animation (Анимация) на миниа- Other..
тюрном значке-треугольнике • - Selects frame delay time •/ 0 seconds
(Выбор времени задержки кадра) справа от надписи 0 sec. под
миниатюрой первого кадра. На экране появится меню времени Рис. 6.9. Меню
задержки (Рис. 6.9). времени задержки
244 Создание Web-сайтов
> В появившемся меню выберите 1.0 (1 секунда). Это значение - 1 sec. - отобразится в
палитре Animation (Анимация) под миниатюрами всех трех кадров.
Просмотрим полученный результат.
> Нажмите кнопку | >'] - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация). Начнете проигрывание эффекта.
Изображение кнопки 11> | изменится на | Р |.
В окне документа вы увидите, как периодически сменяются надписи Вам нужна
локальная сеть? и Заходите СЮДА! Причем после появления надписи Заходите
СЮДА! появляется также рисунок открытой двери. В процессе проигрывания в палит-
ре Animation (Анимация) будет перемещаться выделение, отмечая текущий кадр.
>• Нажмите кнопку I D [ - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация), чтобы прекратить проигрывание
эффекта.
Увеличим время показа на экране первого кадра анимации до 1,5 секунд. Предварительно
этот кадр нужно выделить.
> Нажмите кнопку | « | - Selects first frame (Выбрать первый кадр) в нижней части па-
литры Animation (Анимация). Кадр станет активным.
Перейти к следующим кадрам палитры Animation (Анимация) можно, нажимая кнопку
Ц>| - Selects next frame (Выбрать следующий кадр), а к предыдущим - нажимая кнопку
[ < | | - Selects previous frame (Выбрать предыдущий кадр) в нижней части палитры
Animation (Анимация).
Значение 1,5 секунды в меню времени задержки отсутствует. Поэтому для указания вре-
мени следует воспользоваться специальным диалогом.
> Щелкните мышью в палитре Animation (Анима- [Sel Fiame Delay 1
ция) на треугольном значке •*• - Selects frame
delay time (Выбор времени задержки кадра) под Set Delay: | l _]seconds OK
>• Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным, а выде-
ление второго кадра будет снято.
Переместим слой Layer 3 в окне документа вправо, предварительно выделив его.
> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слой будет выделен.
> Нажмите кнопку \>*\ - Move Tool (V) (Инструмент «Перемещение» (V)) на панели
инструментов (Tools), чтобы выбрать данный инструмент.
siim
>• Нажмите и удерживайте клавишу ll l.
Shifl
>• Не отпуская клавишу ii l. нажмите несколько раз клавишу [ Q . Каждое нажатие
этой клавиши будет перемещать в окне документа надпись Заходите СЮДА! на
10 пикселов вправо. Расположите надпись так, чтобы последний ее символ находился
«в открытой двери» (Рис. 6.12).
Заходите СЮШ!
~370К/~)РЕв »
I w e e n With: [Selection СЖ
© A I Layers
I O Selected Layers
Parameters -
0 Position
И Opacity
0 Effects
Этот диалог можно вызвать также командой Tween (Промежуточные кадры) из меню
палитры Animation (Анимация).
В данном диалоге переключатели Layers (Слои) позволяют указать, должны ли присутст-
вовать в добавленных кадрах все видимые слои (All Layers) или только активный слой
(Selected Layer).
> Убедитесь, что установлен переключатель All Layers (Все слои).
Группа элементов управления Parameters (Атрибуты) позволяет определить, какие атри-
буты слоев будут изменяться в добавляемых кадрах: Position (Положение), Opacity (Не-
прозрачность) или Effects (Эффекты).
> Убедитесь, что установлены флажки Position (Положение) и Opacity (Непрозрач-
ность) Состояние флажка Effects (Эффекты) для нашей анимации значения не имеет,
так как этот атрибут на выбранных кадрах не используется.
> Убедитесь, что в открывающемся списке Tween with (Промежуточные кадры между)
выбрано Selection (Выделение). При этом эффект плавного перехода будет создан
между выделенными кадрами.
В поле ввода Frames to Add (Добавить кадров) по умолчанию предлагается добавить
5 кадров. Увеличим количество промежуточных кадров до десяти.
> В поле ввода Frames to Add (Добавить кадров) введите 10.
>• Нажатием кнопки ОК закройте диалог Tween (Промежуточные кадры). В палитре
Animation (Анимация) между вторым и третьим будет добавлено еще 10 кадров
(Рис. 6.14) и, таким образом, создан плавный переход изображения.
ис.' 0,2 stc.' 0.2 « с 0,2 ис.' 0,2 ч с 0,2 ж . * 0,2 sac.
> Нажмите кнопку Г>"1 - Plays animation (Проигрывание анимации) в нижней части
палитры Animation (Анимация) и просмотрите созданный эффект.
Вы увидите, что теперь, После исчезновения надписи Вам нужна локальная сеть?,
возникает надпись Заходите СЮДА!, которая движется в направлении постепенно появ-
ляющейся «открытой двери» и «заходит» в нее.
>• Остановите проигрывание анимации нажатием кнопки 1 п |.
Анимация готова. Теперь ее нужно оптимизировать и сохранить в формате GIF.
«head*
I Готово ] | Щ . My Computer
]3 ©
jljeoton Сохранить I
|OefauH Settings
[JUStcst И
Создание Web-сайта
с помощью Microsoft FrontPage 2003
Для создания полноценного сайта вовсе необязательно знать язык HTML. Конечно, по-
лезно иметь представление о структуре хранения Web-страниц, но при этом нет необхо-
димости запоминать названия тегов и различных параметров. Специальные редакторы,
ориентированные на визуальную разработку сайтов, позволяют проектировать Web-
страницы так же легко, как и создавать документ в текстовом редакторе. Вы можете раз-
мещать на странице текст, таблицы, рисунки, видео, создавать ссылки, использовать раз-
личные интерактивные компоненты и при этом работать со страницей в режиме
WYSIWYG (What You See Is What You Get - Что видишь, то и получаешь), то есть прак-
тически в том виде, в каком она будет выглядеть в браузере. Визуальный редактор позво-
ляет скрыть внутреннее представление страницы в формате HTML, что существенно об-
легчает разработку и избавляет от поиска синтаксических ошибок.
1
Одним из редакторов для визуального проектирования Web-сайтов , обладающим на се-
годняшний день, наверное, самым широким спектром возможностей, является програм-
ма FrontPage [Франт Пейдж] компании Microsoft, входящая в состав пакета М!3 Office
System Professional 2003. Редактор FrontPage содержит большой набор шаблонов и мас-
теров для создания сайтов по различной тематике. Для форматирования текста можно
использовать все возможности, предусмотренные в основном стандарте HTML, а также
применять специальные динамические эффекты и анимацию. Редактор имеет удобные
инструменты для работы с таблицами, встроенные средства для обработки изображений,
позволяет легко размещать на страницах различные мультимедиа-объекты: рисунки, ви-
деофильмы* анимацию, звуковые фрагменты. Тесная интеграция с пакетом MS Office по-
зволяет отображать на страницах документы MS Word, таблицы и графики MS Excel, ди-
намически получать данные из MS Access, использовать язык VBA, средства проверки
орфографии и десятки готовых тем для оформления страниц сайта. В программе Front-
Page реализована поддержка современных Web-технологий, таких, как каскадные "аблицы
стилей (CSS), динамические эффекты (DHTML), фреймы, активные страницы (ASP),
элементы ActiveX и Java-апплеты. Если Web-сервер поддерживает технологии FrontPage и
SharePoint, то появляются дополнительные возможности при создании страниц - формы
поиска, счетчики посещений, оглавление сайта и другие. Программа FrontPage является не
только редактором Web-страниц, но и содержит средства управления сайтом, такие, как
схема навигации по страницам, анализ сайта с помощью различных отчетов, коллективная
разработка, настройка на определенные браузеры, загрузка сайта на Web-сервер по прото-
колам HTTP и FTP. Все эти возможности позволяют создавать с помощью FrontPage пол-
ноценные Web-сайты, такие, например, как электронные магазины или игровые сайты.
1
Здесь мы часто будем называть Web-сайты Web-узлами и наоборот. Эти два понятия являются
синонимами. ,
Создание Web-сайта с помощью Microsoft FrontPage 2003 253
Требования к компьютеру для установки и работы редактора FrontPage такие же, как у
других приложений MS Office. Для загрузки сайта на Web-сервер понадобится доступ в
Интернет и модем для передачи данных либо сетевая карта. Для проверки страниц, со-
держащих звук или видео, потребуется звуковая карта.
Если вы уже знакомы с другими программами из пакета MS Office, вам будет проще ос-
воить возможности FrontPage.
Заказать компакт-диск с пробной 30-дневной версией программы FrontPage 2003 можно
на странице http://www.microsoft.com/office/frontpage/prodinfo/trial.mspx- надо будет
заплатить только за пересылку компакт-диска.
в_гж. Цет
>• Нажмите кнопку Да (Yes). На экране останется только рабочее окно программы (Рис. 7.2).
254 Создание Web-сайтов
• Приступая к работе
Искать:
Открыть
ввб-узлы
^
Страницы
£ ^ Открыть.,.
Папки
на панелях. Задачи
Динейка и сетка •
Основную часть рабочего окна занимают вкладки редактируе-
мых документов. Текущий документ - HOB_CTp_1.htm В Область задач
•
(new_page_l.htm).
i Обновить F5
С Г|
Чтобы вновь показать область задач, нужно опять нажать комбинацию клавиш )Г ' 1+РЧ.
В нижней части рабочего окна программы находится строка состояния, на которой выво-
дится информация о ходе выполнения различных команд.
В Microsoft FrontPage существует несколько способов просмотра содержимого Web-узла,
облегчающих разработку, публикацию и управление им. Работать с Web-страницами
можно, используя одно из следующих представлений:
Страница (Page).
Папки (Folders).
Удаленный Web-узел (Remote Web Site).
Отчеты (Reports).
Переходы (Navigation).
Гиперссылки (Hyperlinks).
Задачи (Tasks).
Представление Страница (Page) показано на Рис. 7.2. В этом представлении можно ис-
пользовать один из четырех режимов представления страницы:
^ Конструктор (Design) - режим по умолчанию. В этом режиме можно разрабатывать и
редактировать Web-страницы, используя практически все возможности концепции
WYSIWIG
• Код (Code). Позволяет самостоятельно просматривать, записывать и редактировать
теги HTML. Используя средства оптимизации кода в Microsoft FrontPage, можно соз-
дать чистый код HTML; также упрощается процедура удаления ненужного кода.
^ С разделением (Split). В этом режиме можно проверять и редактировать содержимое
Web-страницы в формате с разделением экрана, предоставляющем одновременный
доступ к режимам Код (Code) и Конструктор (Design).
• Просмотр (Preview). Позволяет просматривать внешний вид страницы в Web-
обозревателе, не сохраняя ее. Этот режим используется для проверки страницы перед
сохранением после внесения небольших вызывающих сомнения изменений.
В представлении Страница (Page) режим ее представления выбирается в левой нижней
части рабочего окна программы FrontPage (Рис. 7.2).
В представлении Папки (Folders) можно использовать папки для непосредственной рабо-
ты с файлами и папками, а также для организации содержимого Web-узла. В этом пред-
ставлении папки можно создавать, удалять, копировать и перемещать, как и в Проводнике
(Explorer) Microsoft Windows.
Представление Удаленный Web-узел (Remote Web Site) можно использовать для публи-
кации всего Web-узла или выборочной публикации отдельных файлов. Также можно син-
хронизировать файлы в двух или нескольких расположениях, чтобы обеспечить своевре-
менное обновление узлов с одинаковым содержимым. В представлении можно выпол-
нить отбор для отображения содержимого папки, файлов для публикации, файлов не для
публикации и конфликтующих файлов. ,
256 Создание Web-сайтов
Можно импортировать файлы с существующего веб-узла или из папки на компьютере или в сети.
1 1
D Опочить дочасмя узлы
D йтодьмють гнсстный FTP
О Требуется шифрованное подключение 55L
Укажите место для создания локальной копии. Оно может находиться на локальном компьютере, в локальной
сети или на любом сервере, выполняющем серверные расширения FrontPage или службы SharePoint Services.
iniiinni;
В поле Расположение локальной копии (Local copy location) можно указать папку на
вашем жестком диске, в которую будут скопированы импортируемые файлы. Оставим в
этом поле имя папки, предлагаемое по умолчанию.
>- Нажмите кнопку Далее (Next). На экране появится диалог Мастер импорта Web-
узлов: задание ограничений на импорт (Import Web Site Wizard - Set import limits), в
котором можно ограничить размер загружаемого сайта (Рис. 7.6).
>• Установите флажок Импортировать доменную страницу и (Import the home page plus
linked pages) и в поле ввода со счетчиком справа от этого флажка введите 5, чтобы ог-
раничить вложенность в структуре папок и файлов сайта пятью уровнями.
>• Установите флажок Импортировать не более (Import a maximum of) и в поле ввода
справа от этого флажка введите 1000, чтобы ограничить общий объем импортируе-
мых файлов в 1000 килобайт.
9-1210
258 Создание Web-сайтов
О Импортировать не более Г К5
• Импортировать только файлы HTML и изображении
Импорт Vi-cik^.jpg' из
•http://www.gov.ru/'
в 'C:/Documents and Settings/VasMy/My
Documents/Мои веб-узлы/мой_узел'
Отмена
> В случае появления диалога Подтвердите замену файла (Confirm File Replace) на-
жмите кнопку Нет (No), чтобы не заменять уже скопированный файл.
Импорт будет завершен после загрузки всех файлов или при достижении установленного
предела размера сайта.
В процессе импорта программа FrontPage копирует файлы сайта с удаленного сервера на
локальный диск и размещает их в отдельной папке. Фактически сайт представляет собой
набор файлов, содержащихся в определенной папке и вложенных папках. Обычно Front-
Page размещает сайты в папке Мои Web-узлы (My Web Sites), которая создается в папке
Мои документы (My Documents). Если для сайта не указано имя, ему по умолчанию при-
сваивается имя мой_узел (mywebl) или похожее.
После завершения импорта сайт будет загружен в редактор FrontPage, и в заголовке окна про-
граммы рядом с названием приложения появится путь к папке сайта на локальном диске. Про-
грамма переключится в представление Папки (Folders). В левой части рабочего окна про-
граммы будет показано дерево папок, а в правой части появится новая вкладка со спи-
ском папок и файлов сайта (Рис. 7.9).
> Щелкните правой кнопкой мыши на вкладке HOB_CTp_1.htm (new_page_l.htm) и в
появившемся контекстном меню выберите команду меню Закрыть (Close), чтобы за-
крыть пустую страницу, созданную при запуске программы.
В представлении Папки (Folders) все страницы, рисунки и другие файлы, составляющие
сайт, представлены так же, как и в программе Проводник (Explorer) операционной систе-
мы Windows. Слева выводится дерево папок, справа - содержимое выбранной папки.
В этом режиме вы можете перемещать, удалять или переименовывать файлы в ходе рабо-
ты над сайтом. Двойной щелчок на имени файла страницы открывает ее для редактиро-
вания. Обычно, файл главной страницы сайта называется index.htm или default.htm. . •
> Найдите файл с таким именем в списке файлов и дважды щелкните на нем мышью. В
правой части рабочего окна появится новая вкладка index.htm, и на ней будет показа-
на выбранная страница в режиме Конструктор (Design) представления Страница
(Page) (Рис. 7.10).
260 Создание Web-сайтов
Q vctf • Q М I Jt
ж К 3 |№ Ш
• Р • -в
Список папок П l^a x
Ш
5Удаленныйееб-узел БЮтчеты 5°Переходы ^Гиперссылки
|[[по умолчан.ю
Файл Правка Дна Вставка Формат Сервис Хаблица Данные £аикн Дкно Справка
ОФИЦИАЛЬНАЯ
РОСС
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
алдсть *
ИСПОЛНИТЕЛЬНОЙ РОССИЙСКОЙ рогсмйской
ВЛАСТИ ФЕДЕРАЦИИ фЕДЕРАиИИ
• L 3 private
•• i3 images 1 <html>
. ^index.htm :: <head>
3 Oaeta http-equiv»"Content-Type" content* 'text/h.tal">
<meta name-1 description" content-"Ruasian Government o f f i c i a l infornation, ofClofl
<meta name* keywords" content-"Ru3sia / rusaian gouermaent, oCficial news, decree й-
<meta author" content*"design: Babenko Vladimir, redesign: Davidov Denis,Ш-*
<title>CEPBEP ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ POCCHH</title>
i </head>
<body bgcolor IFFFFFF" text="#000000" link="iC000000" vlink = "|000000"
f
ОФИЦИАЛЬНАЯ 1
РОССИЯ
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
31 * * a I ш 9 Ш ш | А ** I i= В tie i* I ffl • Е •
ОФИЦИАЛЬНАЯ
роееия
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ctrl
Закройте страницу index.htm, нажав комбинацию клавиш I 1-нгН Мы снова вернемся
на вкладку Web-узел (Web Site) в представлении Папки (Folders) (Рис. 7.9).
Нажмите кнопку Отчеты (Reports) в нижней части вкладки Web-узел (Web Site).
В правой части окна будет отображен отчет Сводка по узлу (Site Summary), содер-
жащий общие сведения о структуре сайта: количество файлов, рисунков, ссылок и
другую информацию (Рис. 7.14).
Н Miciosoft FionlPage • CADocuments and SellingsWdsily\My DocumentsVMou ееб узяы\мой_узе«
Файл Правка £ид Формат Сервис Хаблнца Данные £амки QKHO £правка
«!>!•
к ч |ш IА *' I != Е I В -£ •
Список папок
Сводка по «рлу *
£ Э .private
Имя Число! Размер I Описание
BE £ } mam
£ | Рисунки 91 271КБ Файлы рисунков на текущем веб-узле (GIF, JPG, BMP и т.п.)
<5J Index.htm Несвязанные Ф... S 7КБ Файлы на текущей веб-узле, которых нельзя достигнуть, начав с до...
Связанна файлы 117 671КБ Файлы на текущем веб-узле, которых можно достигнуть, начав с дои...
"} Медленнью стр.,. О ОКБ Страницы на текущем веб-узле, у которых время загрузки превышав.,.
О ОКБ Файлы на текущем веб-узле, не изменявшиеся в течение 72 дней
Последние лоб... 125 678КБ Файлы на текущей веб-узле, созданные за последние 30 дней
Гиперсс.ылк,и 1762 8се гиперссылки текущего веб-узла
? Непроверенные,., 105 Гиперссылки, указывающие на неподтвержденные файлы
€9 Неработающие ... 40 Гиперссылки, указывающие на недоступные файлы
^ Д Внешние гиперс.., 105 Гиперссылки, указывающие на файлы вне текущего веб-узла
E f t Внутренние run,,. 1657 Гиперссылки, указывающие на файлы на текущем веб-узле
( О Ошибки конпон. • • О Файлы на текущем веб-узле с компонентами, сообщающими об ошибке
W Незавершенные.,. О Задачи на текущем веб-узле, не помеченные как завершенные
О Тены на текущем веб-узле, не примененные ни к одному (райлу
Связи с таблиц,,, О Все связи с таблицами стилей текущего веб-узла.
Динанические в.., О Все файлы, объединенные с динамическим веб-шаблоном.
Рис. 7.14. Отчет Сводка по узлу (Site Summary) представления Отчеты (Reports)
>• Выберите команду меню Вид • Гиперссылки (View • Hyperlinks) и щелкните мышью
на элементе index.htm в левой части рабочего окна программы, чтобы переключиться
в представление Гиперссылки (Hyperlinks) (Рис. 7.15).
oil FrontPage - C:\Oocuments and SettingsWaiNjAMy ОосшпеШЛМои веб аэлы\мой_алеп
Правка Вид Вставка Формат Сервис Хаблина Данные Самки Якно Справка
#1Ш • К •
Список папок П Г"1 X SH всб-уэся |
£ 3 C:\Oocuments and Setting Гиперссылки для 'index.htm'
* £ 2 -Private
+ £ 3 ffnages
m3in/symbo!5/osrf3.2.htinl
A :fHc:///cgi-bin/Count.cgi
!mein/page8.html
;main/p*ge3.html
mah/pagelO.html
-^ЫЬр://www. cfcrf.ru/
main/regions/regioni-44 .html
'matrVsymbols/gsrf 1 ,html
В этом режиме в правой части рабочего окна отображается схема гипертекстовых связей
между страницами сайта, документами и рисунками. С помощью этой схемы можно про-
следить за входящими и исходящими ссылками для каждой страницы. О гиперссылках
мы поговорим подробнее в отдельном опыте.
Представление Задачи (Tasks) предназначено в основном для планирования коллектив-
ной работы над проектом сайта. В этом режиме можно запланировать задачи, закрепить
их за отдельными разработчиками и следить за ходом их выполнения.
|C:\Documents
Мастер [обзор... j
интерфейс.
О добавить на текущий аеб-ужл
D IJ»6V«TO> подключение SSL
В поле ввода Указать расположение Web-узла (Specify the location of the new Web site)
можно указать папку, отличную от предложенной по умолчанию.
> Среди шаблонов диалога Шаблоны Web-узлов (Web Site Templates) выберите значок
Мастер создания корпоративного Web-узла (Corporate Presence Wizard) и нажмите
кнопку ОК. На экране появится первый диалог мастера, содержащий текст о его на-
значении (Рис. 7.18).
> Нажмите кнопку Далее (Next). На экране появится второй диалог мастера, в котором
выбираются основные страницы сайта (Рис. 7.19).
Мастер создания корпоративного веб-чзла
В качестве основы для построения веб-узла будут
использованы домашняя страница и несколько
другим распространенных страниц.
Выберите основные страницы для включения
в веб-узел:
( 3 домашняя (обязательная!
Вы можете указать мастеру, что в состав сайта нужно включить определенные страницы,
установив следующие флажки: новости (What's new), продукты и услуги (Prod-
ucts/Services), оглавление (Table of Contents), обратная связь (Feedback Form) и форма
поиска (Search Form).
• Сбросьте все флажки, кроме домашняя (обязательная) (Home (required)) - мы потом
самостоятельно создадим страницы с формами и оглавлением. Нажмите кнопку Да-
лее (Next). На экране появится следующий диалог мастера (Рис. 7.20).
* —*•'•? • i ' i l ' l TVi
Домашняя страница служит входом на веб-узел.
Она должна лаконично объяснить посетителю,
чем занимается организация и что можно найти
на веб-узле.
|7| предназначение
О профиль организации
Е ) контактные сведения
В этом диалоге с помощью флажков можно выбрать условные разделы для первой (до-
машней) страницы сайта. На домашнюю страницу можно поместить выбранную инфор-
мацию, установив следующие флажки: вступление (Introduction), предназначение (Mis-
sion Statement), профиль организации (Company Profile), контактные сведения (Con-
tact Information).
268 Создание Web-сайтов
> Сбросьте все флажки. Нажмите кнопку Далее (Next). На экране появится четвертый
диалог мастера (Рис. 7.21).
О Нет
> Установите переключатель Нет (No) и нажмите кнопку Далее (Next). На экране поя-
вится шестой диалог мастера (Рис. 7.23).
Создание Web-сайта с помощью Microsoft FrontPage 2003 269
| Т уристичесное агентство I
В этом диалоге имеются три поля ввода, в которых нужно указать полное название орга-
низации, ее краткое название и почтовый адрес. Эти сведения будут сохранены в пере-
менных и могут затем использоваться во многих местах на страницах сайта.
> Заполните поля так, как показано на рисунке и нажмите кнопку Далее (Next).
На экране появится седьмой диалог мастера, в котором нужно ввести телефон компа-
нии, номер факса и адреса электронной почты для обращений к Web-мастеру и по
общим вопросам (Рис. 7.24).
Мастер создания корпоративного веб-узла
Заполните поля, как показано на рисунке, и нажмите кнопку Далее (Next). На экране
появится заключительный диалог мастера, в котором сообщается об успешном за-
вершении работы (Рис. 7.25).
270 Создание Web-сайтов
> Сбросьте флажок Показать "Задачи" после загрузки Web-узла (Show Tasks View
after Web site is uploaded) и нажмите кнопку Готово (Finish). Мастер создаст макет
сайта по указанным данным и откроет его. В заголовке окна программы рядсм с на-
званием появится путь к папке сайта.
В этом примере мы использовали минимальные возможности мастера и создали макет
сайта с одной домашней страницей. Если указать мастеру на необходимость включения в
состав макета дополнительных страниц - новостей, описания товаров и услуг, формы
заявок и других - то будет запрошена дополнительная информация и количество шагов
мастера увеличится.
Рис. 7.26. Вкладка Общие (General) диалога Параметры узла (Site Settings)
Создание Web-сайта с помощью Microsoft FrontPage 2003 271
> Выберите в меню программы команду Сервис • Параметры узла (Tools • Site Set-
tings). На экране появится диалог Параметры узла (Site Settings) с открытой вкладкой
Общие (General) (Рис. 7.26).
> В поле ввода Имя Web-узла (Web name) укажите новое имя сайта, например соответ-
ствующее названию компании, и нажмите кнопку ОК. Сайт будет переименован, на-
звание папки сайта также изменится.
Сейчас Web-узел отображается в рабочем окне программы FrontPage в представлении
Папки (Folders), в котором можно просматривать папки и файлы сайта (Рис. 7.27).
Н Microsoft FrontPage - CADocumenls and Seltmgs4Vasily\My DocumentsVMou веб узльЛТурагентство в-ЛЭ
Цравка £мд Вставка Формат Сервис Таблица Данные £амкн QKHO Справка
ж к ч \ш ш ш ш \к * \В \а iw ir\ ш• &.-
Список папок P i $41 х
) C:\Documents and Setting
' е э borders
Содержимое 'C:\Documents and Settings\Vasly\My Documents\MoM веб-узлы\Турагентство' Deal
Имя I Название Размер I Тип; I Изменен [. кем H3f
: ££) „overlay
• £ э „private
i Й Jhemes
£jjthemes
^images
( Д index, htm Домой 25.08,20CK0:20 VAS\VasHy
Е
О Удаленный веб-узел ВОтчеты ^Переходы ft Гиперссылкл (^Задачи
В папке сайта мастер помещает файл домашней страницы, обычно имеющий назва-
ние index.htm. Кроме этого, FrontPage создает в папке нового сайта несколько вло-
женных папок, например: images для хранения рисунков и „private для хранения
скрытых документов. Файлы и папки, помещенные в папку _private, не могут быть
просмотрены посетителем сайта с помощью браузера. В ходе дальнейшей работы, в
зависимости от элементов и средств, используемых при проектировании сайта,
FrontPage может создавать в папке сайта дополнительные файлы и вложенные пап-
ки. Вы можете создать собственные вложенные папки в папке сайта, например, для
хранения звуковых файлов. Для этого можно нажать кнопку (^] в верхней части па-
нели, в которой отображается дерево папок. Другой способ создать новую папку -
щелкнуть правой кнопкой мыши на свободном пространстве рабочего окна и в поя-
вившемся контекстном меню выбрать команду Создать • Папка (New • Folder).
272 Создание Web-сайтов
>• Закройте дерево папок в левой части рабочего окна, нажав кнопку [х], расположенную
в правом верхнем углу панели с деревом папок.
> Дважды щелкните мышью на файле index.htm в папке сайта. Домашняя страница
будет открыта на отдельной вкладке и будет установлен режим Конструктор (Eiesign)
для ее редактирования (Рис. 7.28).
| Microsoft FiontPage - C:\Documents ancl Settings WasilyVMy DocumentsVMou веб-узяы\Турагентство\т(!е
Файл Правка Вид Вставка Формат Сервис Таблица Данные Рамки Дкно Справка
Итак, перед вами первая страница сайта, а точнее макета сайта, созданного мастером. Стра-
ница разделена пунктирной линией на несколько областей. В верхней области находится
навигационное меню (navigation bar) - это группа ссылок или кнопок для перехода к основ-
ным разделам сайта и на соседние страницы. В данном
Свойства объявления на странице
случае навигационное меню содержит единственную
ссылку Домашняя (Ноте), поскольку в нашем сайте пока Свойства -
только одна страница. О Текст
Текст абъявления
Ниже находится заголовок (Page Banner) с названием
страницы Домой (Номе).
Чтобы изменить заголовок, дважды щелкните на нем.
Откроется диалог Свойства объявления на страни-
це (Page Banner Properties) (Рис. 7.29). Рис. 7.29. Диалог Свойства
объявления на странице
В поле ввода Текст объявления (Page banner text)
(Page Banner Properties)
введите новый заголовок, например Туристическое
агентство.
Создание Web-сайта с помощью Microsoft FrontPage 2003 273
Обычно в качестве заголовка страницы указывается название раздела сайта, а для первой
страницы это может быть название сайта или компании.
>• Нажмите кнопку ОК. Диалог Свойства объявления на странице (Page Banner Properties)
закроется, и новый заголовок будет отображен в верхней области страницы.
Под заголовком, а также слева расположены еще два навигационных меню, но они не со-
держат ссылок, поэтому FrontPage выводит в таких местах подсказки курсивным шрифтом.
Обычно, если какой-либо элемент не может быть отображен на странице, на его месте вы-
водится краткая подсказка, как можно сделать этот элемент видимым. В нижней области
страницы показываются контактный адрес и дата последнего обновления.
Свойства страницы
1
Общие | Форматирование [Дополнительно | [ Язык j Рабочая группа |
Ключевые слова:
Базовое расположение:
Фоновый звук —
Расположение:
Рис. 7.30. Вкладка Общие (General) диалога Свойства страницы (Page Properties)
Свойства страницы
Язык страницы — — — — ^ - ^ — —
Пометить текущий документ, указав:
ОК | Отмена ~
Рис. 7.31. Вкладка Язык (Language) диалога Свойства страницы (Page Properties)
(Яванки
ЕЗ сценарии VB5cript G3 страницы ASP
0 CSS 1,0 (форматирование)
0 приложения Java Е CSS 2.0 (положение)
13 графика PNG
в
Версид схемы:
(internet Explorer 5.0
1 ок | Отмена
Убедитесь, что у вас открыта домашняя страница созданного в прошлом опыте, сайта
в режиме редактирования Конструктор (Design). Если это не так, дважды щелкните
мышью на файле index.htm в представлении сайта Папки (Folders).
Щелкните на тексте примечания в центральной области страницы, чтобы выделить
его, и нажмите клавишу I 0 8 "' 8 !. Примечание будет удалено, а текстовый курсор оста-
нется в начале первой строки.
Введите следующий текст:
> Чтобы увидеть символы конца абзаца и разделителя строки, щелкните на кнопке
на панели инструментов Стандартная (Standard). При повторном нажатии на эту
кнопку разделители будут скрыты.
Помимо различных стилей, к тексту могут быть применены дополнительные элементы
форматирования. Для любого фрагмента текста может быть установлен нужный шрифт,
размер, цвет, межсимвольный промежуток и другие атрибуты, такие, например, как под-
черкивание. Для абзаца может быть установлен отступ, межстрочный интервал, вырав-
нивание, границы, цвет фона и другие параметры.
v Во второй строке набранного текста выделите с помощью мыши или клавиатуры первые
четыре слова Здесь вы сможете найти, а затем выберите в меню команду Формат •
Шрифт (Format • Font). На экране появится диалог Шрифт (Font) (Рис. 7.33).
Создание Web-сайта с помощью Microsoft FrontPage 2003 277
Шрифт~[не>юнаияый интервал]
N
£2
Turma [полужирньм курсив 6 (24 пт)
7 (36 пт)
Цвет; |]
Видоизменение —-—
О подчеркнутый О малые прописные • припер
О зачеркнутый D все прописные О определение
П кадчеркнутый О первые прописные О ссылка
П мерцание О скрытый • переменная
D надстрочный О &ИОНЫЙ • клавиатура
О подстрочный О курсив • код
Просмотр
ДаБбЮюЯя
В верхней части диалога расположены списки для выбора атрибутов шрифта: Шрифт
(Font), Начертание (Font Style) и Размер (Size), которые имеются во всех стандартных
диалогах выбора шрифта. Чуть ниже расположен открывающийся список для выбора
цвета шрифта (Color) и набор флажков Видоизменение (Effects) для задания различных
эффектов. В поле Просмотр (Preview) отображается пример текста с выбранными на-
стройками. Настройки межсимвольных промежутков и положения в строке используются
реже и вынесены на отдельную вкладку Межсимвольный интервал (Character Spacing).
> Выберите какие-нибудь нестандартные настройки для выделенного фрагмента, на-
пример: шрифт Arial, стиль Полужирный (Bold).
> Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки к тексту.
Если в представлении Страница (Page) вы выберете режим Код (Code) или С разделе-
нием (Split), нажав соответствующую кнопку в нижней части вкладки index.htm, то уви-
дите, как выбранные атрибуты текста будут сохранены в виде соответствующих тегов.
>• Убедитесь, что текстовый курсор остался на второй строке набранного ранее текста и
выберите в меню команду Формат • Абзац (Format • Paragraph). На экране появится
диалог Абзац (Paragraph) (Рис. 7.34).
В этом диалоге можно изменить'настройки, относящиеся целиком к текущему абзацу.
Открывающийся список Выравнивание (Alignment) задает способ выравнивания строк
на странице. Группы элементов управления Отступ (Indentation) и Интервал (Spacing)
предназначены для регулирования отступов и интервалов для строк абзаца.
>• Нажмите кнопку ОК, чтобы закрыть диалог Абзац (Paragraph).
278 Создание Web-c айтов
шшшШШ
Отступы и интереалы |
Их
Отступ —
сдевв;
1° N первад строка;
справа: Ё Н ю В
Интервал
перед: 1 N Иёжду строк:
после; 1 Н [одинарньй
а
между £лов: J0
Н
Образец -
1",' У'.*
'. Ml I*-. ..
1 «. | Отпена
Выберите в меню команду Формат • Границы и заливка (Format • Borders and Shad-
ing). На экране появится диалог Границы и заливка (Borders and Shading) (Рис. 7.35).
Стиль: Образец
сплошная Для добавления границ
точечная используйте следующие
i = r l П Й умолчанию пунктир кнопки
двойная
желобок
рубчик
углубление
возвышение
Цвет:
Ширина:
Jti
Цевов: Щ Верхнее: |0
Вы можете задать Цвет (Color) и Ширину (Width) рамки, а также установить Поля (Pad-
ding), т.е. отступы от рамки до текста. В панели просмотра Образец (Preview) можно
увидеть пример рамки с выбранными атрибутами, а также включить или отключить ви-
димость произвольных сторон рамки с помощью кнопок гп
> Выберите вкладку Заливка (Shading) для выбора цвета и способа заливки фона абза-
ца (Рис. 7.36).
Границы и j.jiiMtiK.j
в
Граница | Заливка |
Цвет фона:
J
Цр Авто Щ
Цвет, тексте:
| • Авто |»|
Узор
ОК Отмена
Рис. 7.36. Вкладка Заливка (Shading) диалога Границы и заливка (Borders and Shading)
> В открывающемся списке Цвет фона (Background color) выберите произвольный цвет
фона. . ,
На данной вкладке для всего абзаца можно также задать Цвет текста (Foreground color) и
установить произвольный Фоновый рисунок (Background picture).
> Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки.
>• Выберите представление Просмотр (Preview), нажав соответствующую кнопку в
нижней части вкладки index.htm. Страница будет отображена в том виде, в каком она
будет выглядеть в окне браузера (Рис. 7.37).
На странице должен быть виден введенный текст, но видны и линии разметки. -
>• Снова переключитесь в режим Конструктор (Design) представления Страница (Page),
нажав соответствующую кнопку в нижней части вкладки index.htm, чтобы вернуться
к редактированию страницы.
280 Создание Web-сайтов
its and SellingsWasilyVMy Documents\MoH веб-уэпы\Турагенгство\1паех.Ы
Правка Вид Вставка Формат СЕРВИС Хабяыца Данные £анкн QKHO Справка
а I ш ш т т [ А ** 11= := * v IШ • Е • -
\Ш веб-узел indeH-htm
Туристическое агентство
[измените свойства этой панели для отображения на ней гиперссылок/
• Конструктор ЭС разделением В К о д И
Рисунок
О гадать рисунок:
Отмена
На вкладке Графические маркеры (Picture Bullets) для списка можно выбрать рисунок
маркера либо из текущей темы, либо задать любой рисунок. Количество вкладок в диало-
ге Свойства списка (List Properties) зависит от выбранной темы. Тема предварительно
выбирается в области задач после выполнения команды меню Формат • Тема (Format •
Theme).
282 Создание Web-сайтов
На вкладке Нумерация (Numbers) диалога Свойства списка (List Properties) можно вы-
брать вариант нумерации для создания упорядоченного списка. Чтобы быстро превратить
текст в нумерованный список, можно воспользоваться кнопкой |i—[ или выбрать соответ-
ствующий стиль в открывающемся списке Стиль (Style) на панели инструментов Форма-
тирование (Formatting).
Кроме обычных списков с номерами или маркерами, можно создать так называемый
Список определений (Definition List) (Рис. 7.39). Он состоит из набора терминов (De-
fined Term) и их определений (Definition). Для создания такого списка нужно воспользо-
ваться соответствующими стилями.
ACD
1. Automatic С ail Distribution- автоматическое распределение вызовов. 6 системах
телефонной связи.
2. Automatic Call Distributor -устройство автоматического р&спределекиявмзовав
ACM
Association for Computing Machinery • ассоциация по вычислительным машинам. США.
Основана в 1947 г. как общество специалистов по компьютерам. Имеет своей цепью
способствовать развитию методов обработки информации как научной дисциплины и
ответственному использованию компьютеров в возрастающем многообразии приложении,
свободному обмену информацией между специалистами и общественностью, повышать и
поддерживать единство и способности отдельных личностей в дайной области знаний.
Интернет
Чтобы разделить текст на отдельные секции, например для выделения отдельных темати-
ческих фрагментов, на Web-страницах часто используют горизонтальную
разделительную линию.
> Установите текстовый курсор на странице в начало строки, перед словами Мы пред-
лагаем, и выберите команду меню Вставка • Горизонтальная линия (Insert <• Hori-
zontal Line). На страницу будет вставлена горизонтальная линия.
>• Дважды щелкните мышью на разделительной линии. На экране появится диалог
Свойства горизонтальной линии (Horizontal Line Properties) (Рис. 7.40).
Группа элементов управления Размер (Size) позволяет изменить ширину (Width) и высоту
(Height) линии. С помощью переключателей Выравнивание (Alignment) линию можно
выровнять по левому краю (Left), по центру (Center) или по правому краю (Right). Фла-
жок Сплошная линия (без заливки) (Solid line (no shading)) делает линию сплошной.
v В открывающемся списке Цвет (Color) выберите произвольный цвет для линии и на-
жмите кнопку ОК. Разделительная линия будет окрашена выбранным цветом.
Создание Web-сайта с помощью Microsoft FrontPage 2003 283
Размер
Ширина: |шо frr\ Высота: |2 j ~ | (в точках)
Цвет:
I D Авто Т^Л 1-3 Сплошная линия (без мливки)
ОК
JL
Рис. 7.40. Диалог Свойства горизонтальной линии (Horizontal Line Properties)
Чтобы привлечь внимание к фрагменту текста или заголовку, можно придать ему эффект
бегущей строки.
>- Выделите первую строку набранного на странице текста Мы рады приветствовать
вас на нашем сайте.
> Выберите команду меню Вставка • Web-компонент (Insert • Web Component). На
экране появится диалог Вставка компонента Web-узла (Insert Web Component)
(Рис. 7.41).
^ Поиск в Интернете
Электронные таблицы и ди|
тщ Счетчик посещений
J j | Коллекция фотографий
Включенное содержимое |
гага Панели ссылок
JF] Оглавление
Щ] Лучшая десятка
Представление епиос.э [^
Поиск компонентов
в Интернете < Нааад j | [ Готово ]
В списке Тип компонента (Component type) можно выбрать один из доступных компо-
нентов, а в списке Выберите эффект (Choose an effect) - вариант выбранного компонен-
та. Сейчас выбран динамический эффект Бегущая строка (Marquee).
>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства бегущей
строки (Marquee Properties) (Рис. 7.42).
284 Создание Web-сайтов
-Размер- -Повторы
03 Непрерывно
Цвет фона:
ш. Авто
В
Стиль..,,
L ок
В поле ввода Текст (Text) находится текст выделенного фрагмента, который будет выво-
диться как бегущая строка. С помощью переключателя Направление (Direction) можно
выбрать направление движения строки: справа налево (Left) или слева направо (Right).
В группе элементов управления Скорость (Speed) регулируется задержка между после-
довательными сдвигами текста (Delay) и величина сдвига в пикселах (Amount). Группа
элементов управления Поведение (Behavior) задает режим перемещения текста: при ус-
тановке переключателя прокрутка (Scroll) текст периодически пробегает по экрану, как
на информационном табло, при установке переключателя сдвиг (Slide) текст перемеща-
ется до противоположной границы, останавливается и остается на экране, при установке
переключателя попеременно (Alternate) текст перемещается внутри границ области бе-
гущей строки. Группа элементов управления Размер (Size) определяет ширину (Width) и
высоту (Height) прямоугольной области бегущей строки. Если соответствующие флажки
сброшены, то значения определяются по размеру текста. Установленный флажок Непре-
рывно (Continuously) в группе элементов управления Повторы (Repeat) задает неогра-
ниченное число повторений прокрутки строки; если флажок сброшен, то в поле нвода со
счетчиком задается количество повторений. Открывающийся список Цвет фона (Back-
ground color) определяет цвет фона в области перемещения бегущей строки.
у Нажмите кнопку ОК, чтобы закрыть диалог Свойства бегущей строки (Marquee
Properties). Текст заголовка внешне не изменится, но будет преобразован в отдельный
компонент.
> Эффект бегущей строки нельзя наблюдать в режиме редактирования страницы,
поэтому нажмите кнопку Просмотр (Preview) в нижней части вкладки index.htm,
чтобы переключиться в режим просмотра страницы и увидеть бегущую строку
(Рис. 7.43).
>• Вернитесь к режиму редактирования страницы, щелкнув мышью на кнопке Конструк-
тор (Design) в нижней части вкладки index.htm.
Создание Web-сайта с помощью Microsoft FrontPage 2003 285
rosoft FiontPage - CADocuments and SeUingsWasii.y\My DocumentsVMoH веб-чзльЛТчр
Драена £ид Вставка Формат Сервис Хаблнца «Данные £амки Цкно Справка
ж л н • IА *" I != := Ф * I ЕВ • Е -
веб-узея
Туристическое агентство
{Измените свойства этой панели для отображения на ней гиперссылок]
Чтобы отредактировать текст бегущей строки или изменить его свойства, необходимо
снова вызвать диалог Свойства бегущей строки (Marquee Properties), дважды щелкнув
мышью в области текста. Попробуйте изменить настройки бегущей строки и посмотрите,
как это будет выглядеть в режиме просмотра страницы.
В случае, когда текст, который планируется разместить на странице, уже набран в тексто-
вом редакторе и сохранен на диске, вы можете вставить его прямо из файла. FrontPage
позволяет загружать и конвертировать информацию из основных форматов текстовых
документов и документов MS Office. Если, к примеру, требуется вставить фрагмент текста
страницы, взяв его из обычного текстового файла, необходимо сделать следующее.
> Установите текстовый курсор на странице в позицию, начиная с которой будет распо-
лагаться вставленный текст.
> Если файл содержит текст на русском языке, проверьте, что выбран русский язык вво-
да для клавиатуры. Если это не так, переключитесь на русский язык. При загрузке и
преобразовании текстового файла FrontPage установит язык в соответствии с теку-
щим языком ввода.
> Выберите команду меню Вставка • Файл (Insert • File). На экране появится стан-
дартный диалог открытия файла Выбор файла (Select File) (Рис. 7.44). '
286 Создание Web-сайтов
S| Adobe
5)CoielUteiFile»
3)My eBookn
Mji Received File»
3 j My Virtual Machines
3) PGP
J2|vai
2) каталог CD
Мои веб-узлы
Мои видеозаписи
§5 Мои рисунки
13 Мои рисунки
^ М о я музыка
Имя Файла:
L
Тип Файлов: |файлыНТМЦ'.ЫтЛЬЫ)
Преобразовать текст е:
О один отформатированный абзац
© feteP?!?™P!???!1l*!l?.M?3!iM
О обычные абзацы
О обычные абзацы с разрывами строк
О не преобразовывать
Пока в нашем сайте всего одна страница, поэтому прежде чем перейти к изучению струк-
туры навигации, добавим в макет сайта несколько новых страниц.
>• Выберите команду меню Файл • Создать (File • New). В правой части рабочего окна
программы появится Область задач (Task Pane) с активной задачей Создание (New)
(Рис. 7.16).
>• В разделе Создать страницу (New Page) Области задач (Task Pane) щелкните мы-
шью на ссылке Другие шаблоны страниц (More page templates). На экране появится
диалог Шаблоны страниц (Page Templates) (Рис. 7.46).
В этом диалоге можно выбрать шаблон для новой страницы. В программе FrontPage
имеется достаточно большой набор шаблонов, с помощью которых можно создать опре-
деленным образом скомпонованную и оформленную страницу. Затем останется лишь
наполнить ее необходимым содержанием: текстом, рисунками и т.п. При выборе шаблона
исходный вид страницы отображается справа в поле Образец (Preview), а в поле Описа-
ние (Description) выводится описание шаблона.
288 Создание Web-сайтов
Описание - ——
Мастер Оглавление Регистраци... Страница Создание пустой веб-страницы.
страни... форма поиска
Образец
Типичные Форма Форма
вопросы обрати.., подтвержд..,
L
Рис. 7.46. Диалог Шаблоны страниц (Page Templates)
> Выберите шаблон Обычная страница (Normal Page), который служит для создания
пустой страницы, и нажмите кнопку ОК. В рабочей области программы появится но-
1
вая вкладка с пустой страницей .
Точнее пустой будет ее основная, центральная часть, а в общих границах по краям стра-
ницы будут отображаться общие для этих областей элементы. Допустим, эта страница
будет содержать новости.
> Выберите в меню команду Файл • Сохранить (File • Save). На экране появится стан-
дартный диалог сохранения файлов Сохранить как (Save As) (Рис. 7.47).
Мои последние
документы
1
Для быстрого создания новой пустой страницы можно воспользоваться также комбинацией кла-
виш ТЩ + Щ.
Создание Web-сайта с помощью Microsoft FrontPage 2003 289
> В поле Имя файла (File Name) введите имя файла страницы, например news.
Нажмите кнопку Сохранить (Save). Диалог Сохранить как (Save As) закроется, и
страница будет сохранена на диске.
> Описанным выше образом создайте и сохраните в папке сайта еще три страницы -
например для общего описание услуг services и для описания туров touri и tour2.
Вкладки этих страниц появятся в рабочем окне программы FrontPage.
> Нажмите комбинацию клавиш IIc t r l l-HlF1i. чтобы скрыть область задач.
Alt
> Нажмите комбинацию клавиш II l+llF1l. чтобы показать Список папок (Folder List).
Чтобы посетители смогли попасть с домашней страницы сайта на другие страницы, нуж-
но сделать на них ссылки. Вы можете самостоятельно определить пути возможных пере-
ходов, создать ссылки и связать их с нужными страницами. Но лучше воспользоваться
возможностями FrontPage, позволяющими упростить создание структуры навигации.
>• Выберите команду меню Вид • Переходы (View • Navigation). Программа переклю-
чится в представление Переходы (Navigation), и в ее рабочем окне будет отображена
схема навигации (Рис. 7.48).
: Файя Правка QUA Вставка формат Сервис Таблица Данные Рамки Окно Справка
| А *'! 1= : i * WIЕЭ • Е -
+ £S) images
щ news, htm
^ f servfces.htm
Пока в схему навигации входит лишь домашняя страница. Чтобы новые страницы содер-
жали навигационные меню и стали доступны из меню других страниц, необходимо
включить их в схему навигации.
>• Перетащите с помощью мыши файл news из списка файлов сайта (Folder List) на
схему навигации ниже домашней страницы. На схеме будет установлена связь меж-
ду страницами (Рис. 7.49).
10-1210
290 Создание Web-сайтов
Тексты названий для ссылок или кнопок в меню навигации устанавливаются по заголов-
кам страниц, на которые они ссылаются. Поэтому желательно делать заголовок кратким
(одно-два слова), чтобы соответствующая ссылка выглядела аккуратно.
> Поместите на схему навигации другие страницы так, чтобы страница services нахо-
дилась на одном уровне со страницей новостей, а страницы с описанием туров были
связаны со страницей services и располагались на втором уровне. Поменяйте заго-
ловки для новых страниц (Рис. 7.50).
Туристическое аг.., |
й g
г
1
i
Новости Услуги
—3—
. .Г
Египет Греция
Домашняя страница:
[ Па умолчанию |
Рис. 7.51. Вкладка Переходы (Navigation) диалога Параметры узла (Site Settings)
> Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings) и сохра-
нить настройки.
Теперь посмотрим, какие изменения произошли на страницах сайта.
> Дважды щелкните мышью на изображении домашней страницы на схеме навига-
ции. Будет установлен режим Конструктор (Design) Представления Страница
(Page) (Рис. 7.52).
ю*
292 Создание Web-сайтов
Правка Вид Вставка Формат Сервис .Таблица Данные Рамки Окно Справка
Мы предлагаем
Э»Пере В С разделение* Нкод Чпросиотр | П Т
j|0:01 при 66 кби! /с ib [ice j [настройка ; /
Рис. 7.52. Ссылки в навигационном меню для перехода к разделам Новости и Услуги
В левой области страницы в навигационном меню появились ссылки для перехода к раз-
делам услуг и новостей.
Проверим, как работает созданная структура навигации в браузере и как выглядит каждое
из трех навигационных меню на разных страницах сайта.
Общие [ётйль]__
Выберите стиль:
Ххххх
_Е
Описание:
Стиль, основанный на теме страницы.
| Отмена ~|
> Нажмите кнопку OK или кнопку Отмена (Cancel), чтобы закрыть диалог Свойства
панели ссылок (Link Bar Properties).
Если требуется поместить на страницы дополнительное навигационное меню, нужно вос-
пользоваться командой меню Вставка • Панель ссылок (Insert • Navigation).
Иногда может потребоваться не отображать навигационное меню на определенной стра-
нице и исключить ссылки на эту страницу с других страниц, но при этом оставить ее в
схеме навигации. Для этого нужно щелкнуть правой кнопкой мыши на Изображении
страницы в представлении сайта Переходы (Navigation) и в появившемся контекстном
меню выбрать команду Включено в панели ссылок (Included in Link Bars). Повторный
выбор этой команды восстанавливает ссылки на страницу.
При создании макета сайта мастер установил по краям страницы общие границы. В ре-
жиме редактирования они отделены от основного содержимого страницы пунктирной
линией. Мы уже отмечали, что общие границы (shared borders) - это области, содержа-
щие единую информацию для нескольких страниц сайта. Например, чтобы не всгавлять
логотип фирмы на каждую страницу, можно включить общую границу для всех страниц и
поместить туда логотип.
Общие границы можно установить для всех страниц сайта или только для определенных,
либо отменить для определенных страниц.
> Выберите команду меню Формат • Общие границы (Format • Shared Borders).
На экране появится диалог Общие границы (Shared Borders) (Рис. 7.55).
Создание Web-сайта с помощью Microsoft FrontPage 2003 295
Общие границы а\
Применить:
ф (со всем страницам;
О к хек ушей странице
Ш Сверху
13 вкгиочить кнопки переходов
13 C/тева
к!
03 включить кнопки переходов
• Справа
D включит^ кнопки переход»
ЕЗ Снизу
Под списком тем расположены флажки, которые позволяют задать дополнительные пара-
метры для выбранной темы. При установке флажка Яркие цвета (Vivid colors) цвета неко-
торых элементов для данной схемы будут иметь более яркие оттенки. Флажок Активные
рисунки (Active graphics) определяет использование более сложных контуров и узоров при
отображении заголовков, кнопок и других графических элементов. При сброшенном флаж-
ке графические элементы в ряде тем принимают более строгий вид. Флажок Фоновый ри-
сунок (Background picture) разрешает использование фонового рисунка на страницах сайта.
>• Установите флажки Яркие цвета (Vivid colors), Активные рисунки (Active graphics) и
Фоновый рисунок (Background picture) по вашему желанию.
Процесс наложения темы может занять несколько секунд, после этого страницы примут
внешний вид в соответствии с выбранной темой (Рис. 7.59). Тема заметно изменяет
внешний облик страницы: ссылки в навигационном меню выглядят как кнопки, заголовок
страницы - как баннер, разделительные линии, маркеры и другие элементы также меня-
ют свой вид.
И Microsoft FrontPage - CADocumenls and SettingsWasilyVMy D
Файл Правка Вил Вставка Формат Сервис Хабямца Данные Рамки Окно Справка
a a «ы#,Г
Обычный • Afial - 3 (12 ml - | Ж К Н I!
»* 11= в
! Тема
i<body>-
S Текущая тема: Вол
« Домашняя
Выбрать тему
Туристическое агентство
(Измените свойства этой панели для отображения на ней гипврссыло1<
Газета
Мы предлагаем • Яркие цвета
53 Активные рисунки
•Туры по зарубежным странам й Фоновый рисунок
•Типы п п г т я и я м ГНГ Создать новую тему...
Н С разделением ЕЗ Код ^Просмотр . [ < |
6 к 372 j | все
Вы можете легко заменить тему, выбрав другую в Области задач (Task Pane). Более того,
на основе уже имеющихся тем можно создать новые, изменяя различные элементы
оформления, цвета и стили.
> Выберите команду Настройка (Customize) в меню темы Волны (Waves). На экране
появится диалог Настройка темы (Customize Theme) (Рис. 7.60).
298 Создание Web-сайтов
Просмотр: Волны
Объявление
: Кнопка
1тиль аягплпика 1
Предполагаемые изменения.
-J
& Цвета,- | | У )Графика,,. | p j g f 1екст...] | [ Сохранить как... |
Под областью просмотра расположен ряд кнопок, позволяющих изменить основные па-
раметры темы.
>• Нажмите кнопку Цвета (Colors). На экране появится диалог Настройка темы (Cus-
tomize Theme) для настройки цвета (Рис. 7.61).
Маркированный список
• Маркированный список 1
• Маркированный список 2
• Маркированный список 3
Отмена
В правой части диалога Настройка темы (Customize Theme) расположена область про-
смотра. В ней отображается пример оформления элементов страницы при выбранной
цветовой схеме. В левой части диалога расположены три вкладки. На первой вкладке
Создание Web-сайта с помощью Microsoft FrontPage 2003 299
Цветовые схемы (Color Schemes) расположен список доступных цветовых схем.
Выбирая различные цветовые схемы, вы можете наблюдать результат их использования в
области просмотра.
> Выберите вкладку Цветовой круг (Color Wheel) (Рис. 7.62).
Маркированный список
Цвета данной схемы:
• Маркированный список 1
• Маркированный список 2
Яркость:
. • Маркированный список 3
Здесь отображается цветовая диаграмма, с помощью которой можно более точно подоб-
рать требуемую цветовую гамму для текущей схемы.
> Чтобы изменить набор цветов для текущей схемы, щелкните левой кнопкой мыши на
диаграмме и, не отпуская кнопку, переместите маркер в пределах круга.
> С помощью ползункового регулятора Яркость (Brightness) подберите нужную яркость
для текущей цветовой схемы.
> Выберите вкладку Другой (Custom).
На этой вкладке можно задать произвольный цвет для основного текста, заголовков, ссы-
лок, фона и других элементов страницы.
> Нажмите кнопку О К, чтобы установить для темы выбранную цветовую схему или
кнопку Отмена (Cancel), если вы не хотите менять настройки цвета. Вы вернетесь к
диалогу Настройка темы (Customize Theme) (Рис. 7.60).
> Нажмите кнопку Графика (Graphics). На экране появится диалог Настройка темы
(Customize Theme) для настройки графики (Рис. 7.63).
300 Создание Web-сайтов
\Ш Настройка темы
Пркмотр: Волны
Объявление
Рисунок:
Объявление
|wavupa.glf
Переходы по горизонтали
,| assop...
Изменившийся рисунок: Кнопка Кнопка ; Кнопка
А- Домой 1
Вверх* Далее А
'•.: .. j l j
Рисунки темы: О Обычная графика : Активные рисунки
Стиль заголовка 1
Шрифт:
liter dana.Arial.Helvetica
Стиль заголовка 2
AGOpus
Arial
Arial Black
Arial Narrow
Arial Unicode MS Стиль заголовка 3
ArtScript
AvantGardeBkBT Стиль заголовка 4
AvanKarde Md ВТ
BetunaScript Стиль заголовка 5
Book Antiqua (Times New Roman)
Bookman Old Style Стиль заголовка 6
Bookshelf Symbol 7
Century
Century Gothic (Times New Roman) Образец обычного текста
Comic Sans MS (Arial)
Courier New Обычная гиперссылка
Domkrat
Estrangelo Edessa Использованная гиперссылка
EuroStyie
Активная гиперссылка
Другие стили текста... j
iciziiz:
Рис. 7.65. Диалог с запросом на изменение темы
Как видите, применение готовой темы позволяет без особых усилий придать сайту ори-
гинальный дизайн и единую стилистическую линию. Благодаря тому, что настройками
цвета, графики и текста страниц можно управлять централизованно, изменение общего
визуального стиля сайта также превращается в простую задачу.
> Выберите в меню команду Таблица • Нарисовать таблицу (Table • Draw Table).
На экране появится панель инструментов Таблицы (Tables) (Рис. 7.66) для работы с
таблицами. Кнопка на панели инструментов Таблицы (Tables) будет нажата, и
указатель мыши примет вид карандаша
ИI 3! m Ш I lft IB
Рис. 7.66. Панель инструментов Таблицы (Tables)
[ Домашняя ]
J/] Показать параметры макета = № "й"
Новости
[ Новости ] [ Услуги ]
[Измените
свойства
этой панели
для
отображения,
на ней
гиперссыпок]
Разбиение ячеек
© разбить на столбцы]
Стандартные цвета О Раэбить на строки
I I1BI1
Число столбцов:
Рис. 7.68. Вспомогательное окно для Рис. 7.69. Диалог Разбиение ячеек
выбора цвета (Split Cells)
>• С помощью мыши или клавиатуры выделите две или более последовательных ячеек в
таблице и нажмите кнопку - Объединить ячейки (Merge Cells) на панели инст-
рументов Таблицы (Tables). Выделенные ячейки будут объединены в одну.
Для выделения текущей ячейки, строки, колонки или всей таблицы можно использовать
команды из меню Таблица • Выделить (Table • Select).
Для таблицы в целом и для каждой отдельной ячейки могут быть настроены различные
параметры, определяющие размеры, выравнивание, цвета и свойства ограничивающих и
разделительных линий.
> Щелкните правой кнопкой мыши на таблице и в появившемся контекстном меню вы-
берите команду Свойства таблицы (Table Properties). На экране появится диалог
Свойства таблицы (Table Properties) (Рис. 7.70).
Свойства таблицы
Параметры макета
О Включить параметры макета
© |ыключить пгтг^аметры иакета]
О Задействовать параметры макета на основе содержимого таблицы
Размер "
Строк: |2 Столбцов:
Границы ———————————
Цвет: | D Авто
L J | Обгор...
По умолчанию
По умолчанию для новых таблиц
(Specify width) и высоту (Specify height) таблицы. В группе элементов управления Грани-
цы (Borders) можно указать размер внешней границы (Size) таблицы, а также задать цвет
границы (Color). Если задать нулевой размер границы, то она станет невидимой. В груп-
пе элементов управления Фон (Background) определяется цвет фона в области таблицы
(Color) и фоновый рисунок (Use background picture).
>• Нажмите кнопку OK, чтобы закрыть диалог Свойства таблицы (Table Properties).
>• Щелкните правой кнопкой мыши на одной из ячеек таблицы и в появившемся контек-
стном меню выберите команду Свойства ячейки (Cell Properties). На экране появится
диалог Свойства ячейки (Cell Properties) (Рис. 7.71).
Границы __
Цвет :
L
Светлая: D Авто
Темная: D Авто
Цвет:
) [П_
D использовать фоновый рисунок
L O6iop... I [
L Применить
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства ячейки (Cell Properties).
Если для таблицы нужно вывести ее название, можно воспользоваться командой меню
Таблица • Вставить • Подпись (Table • Insert • Caption).
>• Закройте панель инструментов Таблицы (Tables), выбрав команду меню Вид • Пане-
ли инструментов • Таблицы (View • Toolbars • Tables).
Создание Web-сайта с помощью Microsoft FrontPage 2003 307
В опыте, посвященном вводу текста, мы уже говорили, что текст может быть вставлен на
страницу из заранее подготовленного документа. Точно так же на страницу можно доба-
вить информацию из табличного файла, например из документа, подготовленного про-
граммой MS Excel. Для этого нужно воспользоваться командой меню Вставка • Файл
(Insert • File) и выбрать необходимый тип файла. Данные из табличного файла будут сра-
зу помещены в таблицу.
Создавая новые страницы сайта на основе различных шаблонов, имеющихся в програм-
ме FrontPage, вы можете посмотреть, как используются таблицы для расположения и
выравнивания текста и рисунков на странице.
£Э wages
Мои
документы
9 Мой
компьютер
«8 Имя файла:
Тип файлов:
Г
юбражетя
£айя Правка Вия Вставка Формат Сервис Хабяица Данные £амки Окно Справка
Домашняя
"рецня
Египет ] [ Греция ]
'Измените
свойства AIR AND RAIL COMMUNICATION NETWORK
этой панели RESEAU AERIEN ET FERROVIAIRE
км FLUG-UND EISENBAHNNETZ
отображения
ча ней RETE FERROVIARIA E AEREA
гиперссылск]
HIAil! 2k ль з i or «i i # = si к I k • о а ти •
Рис. 7.74. Панель инструментов Рисунки (Pictures)
1
Содержание указанной страницы может со временем измениться.
Создание Web-сайта с помощью Microsoft FrontPage 2003 309
Вы можете использовать различные инструменты для придания изображению требуемого
вида и формы:
с помощью кнопки задается багетная рамка, которая придаст рисунку более объ-
емный вид;
•/ с помощью кнопок •
О » 5 а
на рисунке создаются гипертекстовые области пря-
моугольной, эллиптической и многоугольной формы;
PI!
lull
справа
Размер
0 Задать размер
© в точках © в точках
О в процентах О в процентах
0 Сохранять пропорции
Низкое разрешение: £
П 1екст:
Длинное описание: [
Распо лощение:
_ ] 1 06з°Е- 1
конечная рамка: [_ | \j\ | Параметры.,7|
ОК Отмена >
Вы можете сами выбрать формат для сохранения изображения, нажав кнопку Тип гра-
фических файлов (Picture File Type) и в диалоге Тип графических файлов (Picture File
Туре) (Рис. 7.77) определив дополнительные параметры, такие, как Качество (Quality)
для файлов JPEG и количество проходов при постепенном показе файлов формата GIF.
Тип графических Файлов
Исходный файл: el-greece.jpg Исходный размер: 227,97 КБ
Измененный файл: Измененный размер:
О 1 GIF Подходит для простых компьютерных рисунков и штриховой графики.
Всего 256 цветов. Этого недостаточно для большинства фотографий.
0 g JPEG! Подходит для фотографий. Точная цветопередача и небольшой размер
файла. Не годится для простых компьютерных рисунков и штриховой
графики.
О 2 PNG-8 Подобен GIF, но с лучшей поддержкой цвета. Не является стандартным
и поддерживается не всеии обозревателями.
О ! PNG-24 Подобен JPEG, но со сжатием без потерь, и обычно имеет больший
размер файла. Не является стандартным и поддерживается не всеми
обозревателями.
Приоцж«иик«ч»ст»»утиь
Оослмомтмьны» проходы! | 4|~)
Быстро» отобрккями» м р и т т * с иижми рирымниеи и
постапаннм улучшение «го к«чвстм.
Отмена
Имя
X. Папка Действие
Заменить
<
OK
JL Отмена
>• Нажмите кнопку О К, чтобы сохранить изображения в папке сайта на диске и закрыть
диалог Сохранение внедренных файлов (Save Embedded Files).
Обычно рисунки и текст располагаются на странице последовательно, нередко образуя
при этом пустые места. Поэтому возникает необходимость расположить их более плотно.
В опыте, рассказывающем про таблицы, мы уже упоминали, что с помощью таблиц
Создание Web-сайта с помощью Microsoft FrontPage 2003 313
можно выровнять и выбрать нужное расположение для рисунков и окружающего текста.
Кроме этого, в программе FrontPage имеются специальные средства для точного пози-
ционирования рисунков и других элементов на странице и внутри текста.
>- Установите текстовый курсор справа от рисунка, щелкнув мышью на области страни-
цы справа от рисунка, и наберите следующий текст:
Греция граничит с Албанией, бывшей Югославией/ Болгарией и Турцией.
Протяженность границ составляет 1166 км. Грецию омывают Эгейское, Ио-
ническое, Критское и Ливийское моря. Береговая линия простирается поч-
ти на 4000 км. i!Enterl
После завершения первой строки текст сместится вниз, оставив справа от рисунка пустое
пространство.
> Теперь щелкните на рисунке, чтобы выделить его, и выберите в меню программы ко-
манду Формат • Положение (Format • Position). На экране откроется диалог Поло-
жение (Position) (Рис. 7.79).
Обтекание •
IS!
IIIIII
не! справа
Положение -
ок
> В группе элементов управления Обтекание (Wrapping style) выберите позицию сле-
ва (Left).
Группы элементов управления Положение (Positioning style) и Смещение и размер (Lo-
cation and size) позволяют определить точное абсолютное или относительное расположе-
ние объекта на странице и его размер.
>• Нажмите кнопку ОК, чтобы закрыть диалог Положение (Position). Набранный текст
теперь будет размещен справа от рисунка (Рис. 7.80).
Средства редактора FrontPage для позиционирования элементов на странице являются
сравнительно новыми и могут не поддерживаться в ранних версиях браузеров.
314 Создание Web-сайтов
Файл Цравка Вил Вставка Фордет Сервис Хабяица Данные Еамки Цкно Справка
£«Йя Правка &ид Вставка Формат Cfipewc Хабшта Данные Еамкм QKHO Справка
Обычный • Тик.-. New Roman . 3 (12 пт) . [ Ж К ШЩШ ЩШ\Д * * ! ! = . = <W & I Ш
j | А а I в a tj | &
ja < | от т. £-т а ж 1 Д а о д ^ i ta
[ Египет ] [ Греция
Греция JJ
[71
iln.Pl при 5£ кбит/с ||772)( 372Лвсе .^настройка |
О Еельефная граница
ки (Рис. 7.84).
> Щелкните на одном из изображений. Выбранная картин-
ка будет помещена на текущую страницу сайта.
На странице может быть помещен рисунок, файл которо- Упорядочить картинки...
го физически расположен на внешнем сервере в Интер- Картинки на узле Office Onlhe
нете. Для этого нужно знать адрес рисунка в Сети. Чтобы Советы по поиску клипов
> Нажмите кнопку ОК в диалоге Рисунок (Picture). На страницу будет помещена ссылка
на рисунок.
Если вы используете браузер Microsoft Internet Explorer версии 4 или выше, сделайте
следующее.
> Щелкните правой кнопкой мыши на рисунке на странице сайта и выберите в появив-
шемся контекстном меню команду Копировать (Сору). Ссылка на рисунок будет по-
мещена в буфер обмена Windows.
>• Переключитесь обратно на программу FrontPage и нажмите кнопку Отмена (Cancel),
чтобы закрыть диалог Рисунок (Picture).
> Выберите в меню команду Правка • Вставить (Edit • Paste), чтобы поместить на
страницу ссылку на рисунок на другом сайте.
В режиме редактирования страницы изображение рисунка с внешнего сайта может заме-
няться значком [х]. Тогда, чтобы увидеть рисунок, нужно перейти в режим предваритель-
ного просмотра, щелкнув на кнопке Просмотр (Preview) в нижней части вкладки с теку-
щей страницей. Следует помнить, что в данном случае на страницу помещен не сам ри-
сунок, а ссылка, поэтому после удаления рисунка с внешнего сайта на вашем сайте он
также не будет виден.
>• Прервите связь с Интернетом.
Если у вас уже подготовлены файлы с изображениями, которые вы собираетесь исполь-
зовать при создании сайта, вы можете заранее поместить их в папку сайта, чтобы можно
было быстро находить и вставлять их на страницу.
>- Чтобы перенести файлы рисунков в папку текущего сайта, скопируйте нужные файлы
в буфер обмена из программы Проводник (Explorer), перейдите в программу Front-
Page, включите режим просмотра папок и файлов сайта (представление Папки (Fold-
ers)) и вставьте файлы из буфера обмена в папку сайта или в одну из вложенных па-
пок.
Для придания странице более привлекательного вида можно установить для нее фоновый
рисунок. Желательно, чтобы фоновый рисунок был бледным, однотонным и не отвлекал
внимание от текста и других элементов страницы.
> Щелкните правой кнопкой мыши в любой области страницы и в появившемся контек-
стном меню выберите команду Свойства страницы (Page Properties). На экране поя-
вится диалог Свойства страницы (Page Properties) (Рис. 7.30).
> Выберите вкладку Форматирование (Formatting) диалога Свойства страницы (Page
1
Properties) (Рис. 7.85).
1
Если вы используете тему для оформления страниц сайта, то вкладка Background (Фон) в диало-
ге Page Properties (Свойства страницы) отсутствует. В этом случае фоновое изображение для
страниц следует устанавливать в настройках темы.
318 Создание Web-сайтов
Свойства страницы
Общие | Форматирование | Дополнительно { Другие j Язык [ Рабочая группа |
Фон
О *&ОНОБЫЙ РИ^УНОк]
О Сделать ПОД0О4.ИЭЙ
Цвета•
ш
1екст: I D Авто р | Просмотренная ссылка: | D Авто
Активная ссылка:
ОК
J Отмена
> Установите флажок Фоновый рисунок (Background picture) и нажмите кнопку Обзор
(Browse). На экране появится диалог Выбрать фоновый рисунок (Select Background
picture), аналогичный диалогу выбора обычного рисунка для вставки на страницу.
> Выберите рисунок, указав файл с изображением в папке сайта.
> Нажмите кнопку ОК. Вы вернетесь к диалогу Свойства страницы (Page Properties),
а адрес выбранного рисунка будет отображен в поле ввода слева от кнопки Обзор
(Browse).
Если установить флажок Сделать подложкой (Make it a watermark), то фоновый рисунок
будет оставаться неподвижным при прокрутке содержимого страницы в браузере. Такой
эффект хорошо смотрится для крупного фонового рисунка.
>• Нажмите кнопку ОК. Выбранный фоновый рисунок будет отображен на странице
(Рис. 7.86).
Иногда бывает нужно отображать рисунок на странице сайта в определенное время.
Например, на сайте может быть размещен рекламный баннер, который Должен демонст-
рироваться в течение недели. В программе FrontPage имеется специальный компонент,
представляющий собой рисунок, видимый только в заданном временном промежутке.
Чтобы поместить такой рисунок на страницу, необходимо выбрать в меню команду
Вставка • Web-компонент (Insert • Web Component) и затем в открывшемся диалоге
Вставка компонента Web-узла (Insert Web Component) (Рис. 7.41) в списке Тип компо-
нента (Component type) выбрать Включенное содержимое (Included Content), а справа -
Страница с расписанием (Page Based On Schedule).
Создание Web-сайта с помощью Microsoft FrontPage 2003 319
Правка Вид Вставка Формат Cepewc ±аб тща Данный £ам*м Окно Справка
i ж к s mmт я л *"И= е
L
до и после времени по расписанию (необязательно):
Начало: 12004
29 августа 2004 г.
JC Отмена
Посмотрим, как, например, можно создать ссылку с одной страницы сайта на другую.
> Перейдите в режим просмотра папок и файлов сайта, выбрав команду меню Вид •
Папки (View • Folders), и дважды щелкните мышью на имени news.htm в списке
файлов. Страница news.htm будет открыта в режиме редактирования Конструктор
(Design).
Создание Web-сайта с помощью Microsoft FrontPage 2003 321
>• Установите текстовый курсор в начало страницы и наберите следующий текст:
На нашем сайте появилась информация про Грецию. F n t e r l
>• Теперь выделите в набранном тексте слово Грецию с помощью мыши или клавиату-
ры и выберите команду меню Вставка • Гиперссылка (Insert • Hyperlink). На экране
появится диалог Добавление гиперссылки (Create Hyperlink) (Рис. 7.88).
Правка {1ня Вставка Формат Сервис Таблица Данные Рамкн Окно Справка
Новости
[ Новости ] [
1
для
отображения,
на ней
гиперссыпок]
11 -1210
322 Создание Web-сайтов
Кроме перехода на другую страницу, показа картинки или открытия файла, активизация
ссылки может также вызывать создание электронного письма, адресованного определен-
ному абоненту. Для добавления такой ссылки на страницу нужно нажать кнопку элек-
тронной почтой (E-mail Address) в списке Связать с (Link to) в левой части диалога
Добавление гиперссылки (Create Hyperlink) и затем ввести адрес электронной почты и
тему сообщения в соответствующие поля (Рис. 7.90).
В
>айпон, веб-
страницей
>• Щелкните мышью на ярлыке tour2.htm, чтобы перейти в режим редактирования страницы
на этой вкладке.
>• Если вкладки tour2.htm нет, то перейдите в-режим просмотра папок и файлов сайта и два-
жды щелкните мышью на имени tour2.htm в списке файлов. Страница tour2.htm будет от-
1
крыта в режиме редактирования Конструктор (Design).
> Установите текстовый курсор в конец ранее набранного текста и отступите несколько
Enter
строк нажатием клавиши ll l.
>• Выберите команду меню Вставка • Рисунок • Из файла (Insert • Picture • From File)
или нажмите кнопку на панели инструментов Стандартная (Standard). На экране
появится диалог Рисунок (Picture) (Рис. 7.72).
В списке файлов сайта выберите файл рисунка, например, тот, который мы использо-
вали в предыдущем опыте, и нажмите кнопку ОК. На страницу будет помещен вы-
бранный рисунок.
> Отпустите кнопку мыши. На экране появится диалог Добавление гиперссылки (Cre-
ate Hyperlink) (Рис. 7.88).
> Укажите страницу сайта, файл или введите адрес ссылки и нажмите кногоу ОК.
С выделенной областью на рисунке будет связана ссылка с указанным адресом.
Перейти |
| ОК || Отмека |
> В поле ввода Имя закладки (Bookmark Name) укажите название для закладки.
По умолчанию предлагается название, взятое из выделенного фрагмента текста.
>• Нажмите кнопку ОК. Место закладки будет отмечено в тексте в виде подчеркивания
пунктирной линией (Рис. 7.93).
*?~
Перейдите в начало страницы, введите текст для ссылки, например, О климате Гре-
ции, выделите текст с помощью мыши или клавиатуры и нажмите кнопку ^ на па-
нели инструментов Стандартная (Standard). На экране появится диалог Добавление
гиперссылки (Create Hyperlink) (Рис. 7.88).
Нажмите кнопку местом в документе (Place in The Document) в списке Связать с
(Link to) в левой части диалога Добавление гиперссылки (Create Hyperlink) и
в списке закладок выберите ранее созданную закладку Климат Греции (Рис. 7.94).
>• Нажмите кнопку ОК, чтобы закрыть диалог Добавление гиперссылки (Create H>per-
link). Текст ссылки будет выделен цветом и подчеркиванием.
> Проверьте, как работает ссылка, переключившись в режим предварительного про-
смотра страницы. Щелчок мышью на ссылке должен вызвать прокрутку текста до
места, отмеченного закладкой.
Обычно текстовые ссылки выделяются на странице цветом и подчеркиванием. Вы мэже-
те изменить цвет отображения ссылок на странице. Соответствующие настройки распо-
ложены на вкладке Форматирование (Formatting) диалога Свойства страницы (Page
Properties) (Рис. 7.85), который можно вызвать командой Формат • Фон (Format • E.ack-
ground) из главного меню программы1. Вы можете установить цвет для непросмотренных
гиперссылок (Hyperlink), для просмотренных ссылок (Visited hyperlink) и для текущей
выбранной ссылки (Active hyperlink). Браузер определяет, была ли ссылка просмотрена,
согласно определенному временному периоду. Например, Internet Explorer использует для
этого время хранения истории посещаемых страниц.
Если удалить страницу сайта, на которую указывает ссылка, то происходит разрыв связи
и ссылка перестает работать. Щелкнув мышью на такой ссылке в браузере, посетитель
сайта получит сообщение об ошибке. Чтобы избежать таких ситуаций, необходимо зара-
нее исправлять или удалять все «разорванные» ссылки. Выявить такие ссылки можно с
помощью отчетов, о которых мы поговорим подробнее в отдельном опыте.
1
Если вы используете тему для оформления страниц сайта, то элементы управления на вкладке
Форматирование (Formatting) в диалоге Page Properties (Свойства страницы) недоступны, и
цвет ссылок следует устанавливать в настройках темы.
Создание Web-сайта с помощью Microsoft FrontPage 2003 327
(Зтекг-т кнопки
урилпиамт 2
бриллиант 3
Бриллиант 4
Бриллиант 5
Выступающая вкладка 1
Выступающая вкладка 2
Выступающая вкладка 3
Выступающая вкладка 4
Выступающая вкладка 5
Выступающая вкладка 6
Выступающая вкладка 7
D 0*р*залис«п исходны*
Изменим вид кнопки при наведении на нее указателя мыши и воспроизведем при этом
звуковой файл.
328 Создание Web-сайтов
Вывод сообщения
Вызов сценария
Загрузка изображений
Задание текста
Замена изображения
Изменение свойства
Мен» переходов
Переход по URL
Проверка обозревателя
ш Загрузить изображения
OK Отмена
П Восстановить по событию mouseout
> В поле ввода URL подставляемого изображения (Swap Image URL) укажите адрес
изображения, которое заменит исходное при наступлении события, и нажмите кнопку
ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый сцена-
рий для события onmouseover (при наведении указателя мыши).
Теперь озвучим кнопку.
>• В Области задач (Task Pane) нажмите кнопку Вставить (Insert) и выберите из меню
действие Воспроизведение звука (Play Sound). На экране появится диалог Воспро-
изведение звука (Play Sound) (Рис. 7.99).
К Воспроизведение звука
ОК
> В поле ввода Воспроизвести звук (Play Sound) укажите адрес звукового файла, кото-
рый будет проигрываться при наведении указателя мыши на кнопку и нажмите кнопку
ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый сцена-
рий для события onclick (при щелчке мышью).
Нам нужно изменить событие, при котором будет воспроизводиться звуковой файл.
>• Наведите указатель мыши на событие onclick во вновь созданном сценарии и нажми-
те появившуюся в правой части поля кнопку Q - На экране появится всплывающее
меню для выбора события (Рис. 7.100).
330 Создание Web-сайтов
Как видите, можно задать действия на большое количество событий, которые могуг на-
ступить при просмотре страницы.
> В меню для выбора события выберите onmouseover (при наведении указателя мы-
ши). Событие для воспроизведения звука будет изменено (Рис. 7.101).
г
> Нажмите комбинацию клавиш |с' Ч+|[^П. чтобы скрыть область задач.
> Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав
кнопку на панели инструментов Стандартная (Standard).
Рекламный баннер обычно используется для отображения рекламных картинок или фо-
тографий. Простой баннер чаще всего представляет собой статический прямоугольный
рисунок. Анимированный рекламный баннер состоит из серии отдельных рисунков, ко-
торые отображаются в одной области страницы по очереди. При этом смена рисунков
может сопровождаться различными переходными эффектами. В более ранних версиях
FrontPage была возможность вставить рекламный баннер как Web-компонент. В про-
грамме FrontPage 2003 можно вставить рекламный баннер из файла, предварительно
создав его в другой программе, например, так, как мы сделали это в главе «Создаем ани-
мацию с помощью Adobe ImageReady».
О'климате Греции .
свойства
этой панели Грецш^граничит с Албанией, бывшей Югославией, Болгарией и Н
для '-'•-' . "•- Турцией. Протяженность границ составляет 1166 км. Грецию омывают
отображения?, Эгейское, Ионическое'Критское и Ливийское моря. Береговая линия
на ней у-
гиперссылок]
> Закройте панель инструментов Эффекты DHTML (DHTML Effects), выбрав команду
меню Вид • Панели инструментов • Эффекты DHTML (View • Toolbars • DHTML
Effects).
При использовании специальных эффектов следует помнить, что не все браузеры спо-
собны отображать их корректно. Если вы ориентируетесь на массовое посещение вашего
сайта, нужно обязательно проверять правильность работы всех применяемых эффектов в
наиболее распространенных браузерах Internet Explorer, Opera и Netscape.
1
Название папки, в которой хранятся файлы операционной системы, может отличаться от указанной.
Создание Web-сайта с помощью Microsoft FrontPage 2003 333
В поле ввода Число повторов (Loop) диалога Свойства страницы (Page Properties)
можно указать число последовательных повторений звукового фрагмента или установить
флажок Непрерывно (Forever) для бесконечного воспроизведения.
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства страницы (Page Properties).
Установка переключателя При открытии файла (On file open) указывает, что воспро-
изведение видеоролика будет происходить каждый раз при загрузке страницы в брау-
зер. Установка флажка При наведении указателя мыши (On mouse over) позволяет
запускать видеоролик при наведении на него указателя мыши. В поле ввода со счетчи-
ком Число повторов (Loop) можно указать, сколько раз должен показываться ролик
или установить флажок Непрерывно (Forever) для бесконечного воспроизведения.
Время задержки в миллисекундах между показами можно установить в поле Задержка
повтора (Loop delay).
>• Выполните нужные настройки для воспроизведения видео и закройте диалог Свойст-
ва рисунка (Picture Properties), нажав кнопку ОК.
>• Чтобы посмотреть, как будет выглядеть видео, сохраните страницу и запустите брау-
зер, нажав кнопку на панели инструментов Стандартная (Standard).
Если основным браузером в вашей системе является MS Internet Explorer, вы можете по-
смотреть, как будет выглядеть видеоизображение, просто переключившись в режим Про-
смотр (Preview) представления Страница (Page).
Настройки для видео не случайно находятся в диалоге Свойства рисунка (Picture Proper-
ties). Поместив на страницу видеофрагмент, вы также можете указать рисунок для той же
области страницы на вкладке Общие (General). Если браузер посетителя сайта не под-
держивает воспроизведение видео, то тогда он увидит рисунок.
Набор стандартных элементов и настроек для оформления страниц сайта достаточно
широк, но в тех случаях, когда требуется, чтобы какой-то элемент функционироват осо-
бым образом, его можно реализовать в виде отдельного подключаемого модуля или ком-
понента. Такой компонент содержит в себе данные для отображения на странице и про-
граммный код, который выполняется браузером при различных событиях: загрузке стра-
ницы, щелчке мышью на компоненте и т.п.
Существует несколько технологий создания компонентов для Web-страниц. В программе
FrontPage реализована возможность работы с несколькими их видами: элементами
ActiveX (ActiveX controls), Java-апплетами (Java applets), фильмами в формате Flash и
подключаемыми модулями (plug-ins). Между ними много общего, разница лишь в спосо-
бах реализации и подключения. С помощью подключаемых компонентов можно ревизо-
вать как простой объект - кнопку или изменяющуюся надпись, так и достаточно слож-
ный - интерактивную карту или игру на странице сайта. Например, анимированную
кнопку или рекламный баннер невозможно реализовать с помощью стандартных команд
HTML. Они представляют собой заранее подготовленные Java-апплеты. Если у вас есть
Java-апплет, реализующий работу нестандартного элемента пользовательского интерфей-
с а - какой-либо кнопки, списка, рисунка, таблицы с определенным поведением, то вы
можете поместить его на Web-страницу.
> Откройте одну из страниц сайта, например tour1.htm, дважды щелкнув на имени
файла в режиме просмотра файлов и папок сайта.
> Чтобы добавить на страницу Java-апплет, выберите в меню команду Вставка • Web-
компонент (Insert • Web Component). На экране появится диалог Вставка компонен-
та Web-узла (Insert Web Component).
Создание Web-сайта с помощью Microsoft FrontPage 2003 335
ХМ Счетчик посещений TZ
Коллекция фотографий Приложение Java
Включенное содержимое <jj( Подключаемый иодуль
«<Н Панели ссылок Поле подтверждения
Оглавление Элемент ActiveX
М\ Лучшая десятка Элемент управления времени разработки
щ" Представление списка Фильм в формате Flash
Представ ли* ie библиотек*
Дополнительные компонеп
Поиск компонентов
Готово
> Нажмите кнопку Готово (Finish). На экране появится диалог Свойства приложения
Java (Java Applet Properties) (Рис. 7.106).
[Параметры приложения:
интервал по вертикали:
Высота: 126
> В поле ввода Источник приложения (Applet Source) укажите файл апплета. Обычно
файлы Java-апплетов имеют расширение .class.
Если файл апплета находится вне папки сайта, то в поле ввода Базовый адрес прило-
жения (Applet base URL) нужно указать путь к файлу. В группе элементов Параметры
приложения (Applet parameters) определяются параметры, передаваемые апплету перед
336 Создание Web-сайтов
выполнением его кода. В нижней части диалога можно указать положение (Layout) ап-
плета на странице и размеры его изображения (Size). Если браузер посетителя сайта не
поддерживает возможность работы с Java-апплетами или такая возможность отключена,
то вместо апплета на странице будет отображен текст, указанный в поле Сообщение для
обозревателей, не поддерживающих Java (Message for browsers without Java support).
> Нажмите кнопку ОК. Выбранный апплет будет добавлен на страницу.
В отличие от Java-апплетов, элементы ActiveX широко применяются не только на Web-
страницах, но и во многих приложениях Windows, где требуется использование нестандарт-
ных элементов пользовательского интерфейса. ActiveX представляет собой программный
компонент, способный выводить изображение в определенную область окна или страницы
и реагировать на различные события от мыши, клавиатуры или других устройств. Это мо-
жет быть, например электронная таблица или мультимедиа-проигрыватель. Элементы
ActiveX входят в состав многих программных продуктов, таких, как графические редакто-
ры, редакторы электронных таблиц, системы разработки приложений и др. Существуют
также элементы ActiveX, специально ориентированные на Интернет.
>• Чтобы поместить на страницу элемент ActiveX, в диалоге Вставка компонента Web-
узла (Insert Web Component) (Рис. 7.105), в списке Тип компонента (Component type)
выберите Дополнительные элементы управления (Advanced Controls), а справа -
Элемент ActiveX (ActiveX Control).
> Нажмите кнопку Далее (Next). На экране появится второй диалог Вставка компо-
нента Web-узла (Insert Web Component) (Рис. 7.107).
Вставка компонента веб-узла MB
Выберите элемент управления:
Рис. 7.107. Второй диалог Вставка компонента Web-узла (Insert Web Component)
> Выберите, например, элемент Microsoft MonthView Control 6.0 (SP4), и нажмите кнопку
Готово (Finish). Выбранный элемент будет добаапен на страницу (Рис. 7.108).
В зависимости от того, какой элемент ActiveX вы выбрали, он может по-разному выгля-
деть на странице. В списке доступных элементов в диалоге Вставка компонента Web-
узла (Insert Web Component) (Рис. 7.107) перечислены не все ActiveX-объекты, зарегист-
рированные в системе. Чтобы увидеть их полный список, нужно нажать на кнопку
Настройка (Customize) и выбрать элемент в диалоге Изменение списка элементов
ActiveX (Customize ActiveX Control List) (Рис. 7.109).
Создание Web-сайта с помощью Microsoft FrontPage 2003 337
свойства -
этой панели
длг
отображения хп Cem«6pi 2004
•
на ней
гиперссыпок] 30 31
б 7
<8D29 3
10 11
4 5
12
13 И 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
4 5 6 7 8 9 10
От. day: 01.0S.200'
Имя элемента:
Л. 1
-
:-) VideoSoft FlexString Control
ActionBvr Class
1
ActiveMovieControl Object
ActiveXPlugin Object
ActorBvr Class
adbanner Class
Adobe Acrobat Control for ActiveX
Application Data Control
Выделить все |
Axis Control
Axis Control 2,0
CDDBControl Class Снять флажки j
CDDBWinampControl Class
CoIorBvr Class
COMN5View Class
и
CoverEdCtrl Control
Версия:
C:\WINDOW5\Systcrr,32\VSFLE)(3.OCX
|3.0
1
1
MinOale: 101.01.1753
У П MdliSelecl H Enabled
MaxDate: |31.12.9999
У И ShowToday
StarlOWmk: l^.mwMonday
У MonlhRows: I
MousePointei: |0-cc2Delaull
У MonlhCdumri!: |1
QLEDiopMode lo-c^OLED.opN
"""У ScralBale:
BotdeiStyle: |0-cc2None
• У
MaxSelCowt
Aapeatance. [1-CC23O
У
>• Установите текстовый курсор внутри формы и выберите в меню команду Вставка •
Форма • Поле (Insert • Form • Textbox). На форму будет помещено поле ввода.
Ширину поля ввода можно изменить, перемещая его край с помощью мыши. Рядом с
полем ввода вы можете указать заголовок или поясняющий текст, который вводится пря-
мо на форме. В данном случае поле ввода будет использоваться для ввода имени клиента,
заказывающего авиабилет.
>• Установите текстовый курсор в строке над полем ввода на форме и введите заголовок
поля Фамилия Имя Отчество.
> Щелкните правой кнопкой мыши на поле ввода и в появившемся контекстном меню
выберите команду Свойства поля формы (Form Field Properties). На экране появится
диалог Свойства текстового поля (Text Box Properties) (Рис. 7.111).
Иия:
Начальное |
значение: *
> В поле Имя (Name) укажите имя поля формы, например ClientName.
Имя поля не отображается на форме, а является внутренним идентификатором, кото-
рый используется при сохранении значений поля в файле или базе данных. В поле вво-
да Начальное значение (Initial Value) можно указать текст, который будет присутство-
вать в поле по умолчанию. Поле Ширина в знаках (Width in characters) определяет
ширину видимой области поля ввода. Если в группе переключателей Поле пароля
(Password field) установить переключатель Да (Yes), то вводимый текст будет отобра-
жаться в виде звездочек.
> Нажмите кнопку Проверить (Validate). На экране появится диалог Проверка тексто-
вого поля (Text Box Validation) (Рис. 7.112).
В этом диалоге можно определить правила ввода данных для элемента формы. Правила
ввода устанавливают ограничения на формат данных и позволяют предупредить ввод
некорректной информации. Для текстового поля имеет смысл установить минимальное
(Min length) и максимальное (Max length) количество символов в группе элементов
управления Длина данных (Data length). Например, имя клиента можно ограничить ин-
тервалом от 5 до 50 символов.
340 Создание Web-сайтов
Выводимое имя:
1ип данных:
Формат текста
Формат чисел
Значение данных
О Поле: |бол
ок
J Отмена
В открывающемся списке Тип данных (Data type) можно выбрать тип поля и затем опре-
делить допустимый набор символов в группе элементов управления Формат текста (Text
format) и Формат чисел (Numeric Format). Например, для ввода телефонного номера раз-
решить использовать только цифры, скобки и дефис.
В поле ввода Выводимое имя (Display name) указывается имя поля, которое будет зыво-
диться в сообщении в случае нарушения установленных правил.
>• Нажмите кнопку ОК. Вы вернетесь к диалогу Свойства текстового поля (Text Box
Properties).
> Нажмите кнопку OK, чтобы закрыть диалог и сохранить изменения.
>• Установите текстовый курсор на следующую строку формы и введите заголовок для
следующего элемента Страна.
> Выберите в меню команду Вставка • Форма • Раскрывающийся список (Insert •
Form • Drop-Down Menu). На форму будет помещен открывающийся список.
Открывающийся список предназначен для выбора одного или нескольких значений из
списка. На нашей форме в открывающемся списке будет выбираться место назначения
для полета, то есть страна.
> Щелкните правой кнопкой мыши на открывающемся списке на форме и в появив-
шемся контекстном меню выберите команду Свойства поля формы (Form Field
Properties). На экране появится диалог Свойства раскрывающегося списка (Drop-
Down Box Properties) (Рис. 7.113).
Создание Web-сайта с помощью Microsoft FrontPage 2003 341
Свойства раскрывающегося списка
Имя: EL
Высота:
Последовательность перехода:
Разрешен выбор нескольких элементов: О Да © Hej
Стиль... | [Проверить... [
L ок
> В поле Имя (Name) укажите имя поля формы, например Destination.
>• Нажмите кнопку Добавить (Add). На экране появится диалог Добавление варианта
(Add Choice) (Рис. 7.114).
> В поле ввода Вариант (Choice) укажите название элемента списка, например Англия.
Если установить флажою Значение (Specify Value),
то в поле ввода под флажком можно указать значе-
ние, которое будет передаваться вместо выбранно-
го названия. При сброшенном флажке значение
О Значение:
эквивалентно названию элемента списка. Пере-
ключатели Начальное состояние (Initial State) оп-
Начапьное состояние:
ределяют, будет ли данный элемент выбран по О выбрано
умолчанию. © не выбрано
>• Нажмите кнопку ОК, чтобы закрыть диалог Свойства раскрывающегося списка
(Drop-Down Menu Properties) и сохранить изменения.
> Установите текстовый курсор на следующую строку формы и выберите в меню ко-
манду Вставка • Форма • Флажок (Insert • Form • Check Box). На форму будет по-
мещен флажок.
Флажок предназначен для выбора возможности, которая имеет два варианта: да или нет.
В нашем случае с помощью флажка будет указываться необходимость бронирования би-
летов на обратный рейс.
> Введите справа от флажка его заголовок или пояснительный текст, например Зака-
зать обратный билет.
>- Щелкните правой кнопкой мыши на флажке и в появившемся контекстном меню вы-
берите команду Свойства поля формы (Form Field Properties). На экране появится
диалог Свойства флажка (Check Box Properties) (Рис. 7.115).
>• В поле Имя (Name) укажите имя поля фор-
мы, например TwoWayTicket.
ша И
1
> В поле ввода Значение (Value) укажите Значение; |оЙ
|
значение, которое будет передаваться в ка- Начальное состояние: О установлен ©Срт
честве результата при установленном флаж-
ке, например Да.
Qoeледсвательность переходе: •
Переключатели Начальное значение (Initial
1 <* II Отмена
1
Value) определяют, будет ли флажок по умол- Рис. 7.115. Диалог Свойства
чанию установлен (Checked) или сброшен (Un- флажка (Check Box Properties)
checked).
Нажмите кнопку OK, чтобы закрыть диалог Свойства флажка (Check Box Properties)
и сохранить изменения.
Чтобы изменить текст на кнопке Отправить (Submit), щелкните правой кнопкой мы-
ши на кнопке и в появившемся контекстном меню выберите команду Свойства поля
формы (Form Field Properties). На экране появится диалог Свойства кнопки (Push
Button Properties) (Рис. 7.116).
1 Свойства кнопки X ||
Имя; |В1
1
Значение или подпись |Отправить
I
Тип кнопки: О р_бычная © Отправить О Серое
| Стиль... | Ьк | Отмена
1
Рис. 7.116. Диалог Свойства кнопки (Push Button Properties)
> Введите новый текст, например Заказать, в поле ввода Значение или подпись
(Value/label) и нажмите кнопку ОК.
Создание Web-сайта с помощью Microsoft FrontPage 2003 343
Точно так же вы можете заменить текст на кнопке Сброс (Reset) на более понятный, на-
пример Очистить поля.
>• Сохраните страницу и запустите браузер, выбрав в меню команду Файл • Просмотр
в обозревателе (File • Preview in Browser). В браузере будет отображена страница с
формой (Рис. 7.117).
2s Услуги - Miciosoft Internet Explorer НаШ
Файл Правка Вид Избранное Сервис Справка
Услуги
[ Новости ] [ Услуги ]
Готово
II8
Рис. 7. Л 7. Форма на странице при просмотре в браузере
> Проверьте, как работают элементы формы, и затем закройте браузер, чтобы вернуться
к программе FrontPage.
На форму можно поместить еще ряд элементов, имеющихся в меню Вставка • Форма
(Insert • Form). Это Текстовое поле (Text Area) для ввода длинного текста, Переключа-
тель (Option Button) для выбора одного из нескольких вариантов, Кнопка (Push Button)
для выполнения какого-либо действия и другие.
>• Посмотрите самостоятельно, как работают данные элементы, какие имеют свойства и
правила ввода данных.
Чтобы выровнять элементы формы и расположить их нужным образом, можно использо-
вать такие же приемы, как для работы с текстом: добавление символов перевода строки,
установка формата абзацев, применение таблиц и команд позиционирования.
После того как посетитель сайта нажмет кнопку Заказать (Submit), необходимо полу-
чить данные из заполненной формы - результаты формы - и сохранить их для после-
дующей обработки. В программе FrontPage существует несколько способов обработки
результатов формы.
344 Создание Web-сайтов
> Щелкните правой кнопкой мыши в любой области формы и в появившемся контекст-
ном меню выберите команду Свойства формы (Form Properties). На экране появится
диалог Свойства формы (Form Properties) (Рис. 7.118).
Свойства формы
Сохранение результатов
Адрес поатъг. Г
О В базе данных
Ими формы:
конечная рамка: 1
[параметры... I (Дополнительно... 1
Имя файла:
|_private/form_results.csv
Формат файла:
[Текстовьй (разделитель - запятая)
Отмена
£Ж
Рис. 7.119. Диалог Сохранение результатов (Saving Results)
Создание Web-сайта с помощью Microsoft FrontPage 2003 345
Если в диалоге Свойства формы (Form Properties) (Рис. 7.118) установить переключа-
тель В другом месте (Send to other) в группе элементов управления Сохранение резуль-
татов (Where to store results), то данные будут обрабатываться с помощью скрипта (сце-
нария), то есть небольшой программы, написанной разработчиком сайта. Такую про-
грамму называют также программой-обработчиком, или просто обработчиком. В редак-
торе FrontPage имеются два готовых обработчика: для дискуссионных форм (Discussion
Form Handler) и для регистрационных форм (Registration Form Handler). Эти обработчики
выбираются в открывающемся списке рядом с переключателем В другом месте (Send to
other), а их параметры задаются в отдельных диалогах, вызываемых при нажатии на
кнопку Параметры (Options).
346 Создание Web-сайтов
Параметры сохранения результатов базы данных
Подключение
Использовать подключение к базе данных:
j Добавить подключение... |
ОК
Действие: |--WEBBOT-SELF-
Метод: (POST
Хип кодировки: Г
IJ
| Стиль... ок
J Отмена
Рис. 7.121. Диалог Параметры обработчика форм (Options for Custom Form Handler)
> В поле ввода Действие (Action) необходимо указать полный адрес программы-
обработчика.
>• В открывающемся списке Метод (Method) необходимо выбрать метод пересылки
данных.
В соответствии с вышеперечисленными технологиями отправки клиентских данных су-
ществуют два стандартных метода пересылки POST и GET, которые отличаются спосо-
бом пересылки информации. В обоих случаях информация передается в виде пар
имя_поля=значение, разделенных амперсандами &. Программа-обработчик должна разо-
брать эти данные и выполнить определенные действия, например произвести поиск в
базе данных и вывести результат в виде HTML-страницы, которая пересылается обратно
для просмотра в браузере. В нашем примере (заказ авиабилетов) обработчик должен со-
хранить сведения о клиенте, забронировать за ним билет и сообщить об этом, передав в
браузер страницу с подтверждением. Либо передать страницу с отказом в регистрации с
указанием причин.
>• Нажмите кнопку ОК, чтобы закрыть диалог Параметры обработчика форм (Op-
tions for Custom Form Handler), и затем кнопку ОК в диалоге Свойства формы
(Form Properties).
В этой главе мы не будем касаться вопросов самостоятельного создания скриптов для
обработки данных. Это тема для отдельной беседы.
Завершающим шагом при создании формы является включение в состав сайта страницы
подтверждения (confirmation page). Страница подтверждения выводится в ответ на от-
правку данных при нажатии кнопки Отправить (Submit). Обычно она содержит некото-
рый текст, подтверждающий отправку, и информацию, введенную посетителем сайта в
поля формы. Посетитель может проверить правильность указанных данных и при необ-
ходимости вернуться к форме для повторного заполнения. При использовании формы
программа FrontPage автоматически создает страницу подтверждения и обеспечивает ее
работу, но только если для обработки результатов формы не используется собственный
скрипт. По умолчанию на страницу подтверждения выводятся названия полей и их зна-
чения. Вы можете самостоятельно создать страницу подтверждения и связать ее с фор-
мой. Для этого нужно создать новую страницу и поместить на нее поля подтверждения
(confirmation fields), которые будут отображать данные из формы, а также другие элементы
348 Создание Web-сайтов
по вашему усмотрению. Чтобы добавить поле подтверждения на страницу, выберите до-
полнительный элемент управления Поле подтверждения (Confirmation Field) в диалоге
Вставка компонента Web-узла (Insert Web Component) (Рис. 7.105).
В этом опыте мы создали форму и поместили на нее нужные элементы. Чтобы создать
форму, можно также воспользоваться готовыми шаблонами или мастером создания форм.
Для этого нужно выбрать в меню команду Файл • Создать (File • New), в Области задач
(Task Pane) (Рис. 7.16) щелкнуть мышью на ссылке Другие шаблоны страниц (More page
templates) и в диалоге Шаблоны страниц (Page Templates) (Рис. 7.122) выбрать один из
шаблонов, например: Гостевая книга (Guest Book), Регистрационная форма (User Reg-
istration) или Форма обратной связи (Feedback Form). Либо выбрать Мастер страницы
формы (Form Page Wizard), который запросит необходимую информацию для создания
страницы с формой.
• О Л Ф Ы Т Ь е текущей раите
Описание
Г. JL
Рис. 7.122. Диалог Шаблоны страниц (Page Templates)
шиит
0125456769
о 112145171!
О Друсой рисунок
П Спросить счетчик до |Q
ОК | Отмена |
> Выберите вид счетчика, установив один из переключателей Стиль счетчика (Counter
Style).
Если выбрать переключатель Другой рисунок (Custom Picture), то можно указать собст-
венный файл с графическим изображением цифр счетчика. Рисунок должен содержать
равномерно расположенные цифры от 0 до 9. В диалоге Свойства счетчика посеще-
ний (Hit Counter Properties) можно дополнительно указать начальное значение счетчика
с помощью флажка и поля Сбросить счетчик д о (Reset counter to), а также количество
отображаемых разрядов (Fixed number of digits).
Когда требуется более подробный анализ посещаемости сайта, нежели просто подсчет
количества обращений к странице, можно воспользоваться услугами готовых систем для
сбора статистики. Для этого необходимо зарегистрироваться и разместить на своей стра-
нице специальный счетчик для получения данных. Наиболее популярные счетчики для
сбора статистики SpyLOG и Rambler. SpyLOG - это набор сервисов для сбора и анализа
статистики вашего сайта. Они предоставляют достаточно полную информацию о поведе-
нии посетителей сайта. На основе такой информации можно сделать выводы об эффек-
тивности сайта в целом, определить направления его развития, выявить устаревшие и
непосещаемые разделы, оценить удобство структуры навигации. Для работы счетчика
SpyLOG на каждую страницу помещается небольшой фрагмент кода, который передает
данные о доступе к странице на специальный сервер. Там данные обрабатываются и за-
писываются в базу данных. По собранной информации могут
быть сформированы различные статистические отчеты: объем Hits.... ...2848860ii
аудитории, динамика посещаемости, распределение посещаемо- 319W
Hosts.. 645678s
сти в течение дня, прогноз посещаемости, просмотренные 7314
страницы, точки входа и выхода, проведенное посетителем Rating 22
время на странице и на сайте, географическое положение по- Visitors 8227989
сетителей, IP-адреса, языки, браузеры, операционные систе- 8516
41
мы, по каким ключевым словам и какие страницы сайта нахо- 4
дят посетители через поисковые машины и т.п. На страницу Sp ! oG
сайта может быть помещен логотип, показывающий основные
сведения о посещаемости (Рис. 7.124). Более подробную ин- Рис. 7.124. Логотип
формацию об этом можно найти на сайте www.spylog.com. SpyLOG
Счетчик Rambler's Top 100 выполняет примерно те же функции, что и SpyLOG Он дает
возможность владельцам собственных страниц определять количество визитов посетите-
лей, собирать и анализировать статистику посещений. Проект Rambler's Top 100 также
имеет цель привлечь владельцев крупных сайтов для сравни-
тельной оценки их популярности, а рекламодателям это позво-
ляет оценить популярность сайтов и принять решение о разме-
щении рекламы. Для сбора статистики на страницу помещается Рис. 7.125. Логотип
специальный фрагмент кода и небольшой логотип (Рис. 7.125). Rambler's TopJOO
Подробнее узнать о счетчике Rambler можно на сайте
top100.rambler.ru.
На большом сайте обычно размещают отдельную страницу с поисковой формой (search
form), чтобы посетители могли быстро и легко найти информацию по определенной те-
ме. В поисковой форме посетитель вводит ключевое слово или фразу и получает список
страниц сайта, на которых встречаются указанные слова. В программе FrontPage имеют-
ся средства, облегчающие создание и поддержку функционирования поисковой формы,
но для обеспечения работы механизма поиска необходимо, чтобы на сервере, ГДЕ: будет
находиться сайт, были запущены серверные расширения FrontPage, службы Microsoft
SharePoint Team Services или Microsoft Windows SharePoint Services.
> Чтобы поместить на страницу поисковую форму, установите текстовый курсор в нуж-
ную позицию и выберите команду меню Вставка • Web-компонент (Insert • Web
Component). На экране появится диалог Вставка компонента Web-узла (Insert Web
Component) (Рис. 7.41).
Создание Web-сайта с помощью Microsoft FrontPage 2003 351
>• В списке Тип компонента (Component type) выберите Поиск в Интернете (Web
Search), а в списке Выберите тип поиска (Choose a type of search) выберите Текущий
Web-узел (Current Web).
>- Нажмите кнопку Готово (Finish). На экране появится диалог Свойства формы поис-
ка (Search Form Properties) (Рис. 7.126).
CD!
Свойства формы поиска | Результаты поиска |
1 Отмена
На первой вкладке диалога можно указать надпись для поля ввода поисковой формы (La-
bel for input), ширину поля ввода в знаках (Width in characters), а также задать текст для
кнопок поисковой формы.
> Выберите вкладку Результаты поиска (Search Results) (Рис. 7.127).
Результаты:
область поиска;
формат даты: Ы
формат времени: |(нет)
L
Рис. 7.127. Вкладка Результаты поиска (Search Results)
диалога Свойства формы поиска (Search Form Properties)
352 Создание УУеЬ-сайтов
12-1210
354 Создание Web-сайтов
При импорте файла базы данных MS Access программа FrontPage автоматически соз-
даст соединение и поместит файл в отдельную папку Fpdb, защищенную от просмотра
в браузере.
Для работы с крупной базой данных, такой, как MS SQL Server или Oracle, соединение
может быть создано через службу System DSN (System Data Source Name - служба сис-
темных имен источников данных) для ODBC-совместимых баз данных или установлено
сетевое соединение (network connection) с выделенным сервером баз данных. При этом
необходимо позаботиться, чтобы на Web-сервере были созданы необходимые псеЕдони-
мы (DSN), а выделенный сервер баз данных был доступен Web-серверу.
В состав программы FrontPage входит специальный Мастер результатов базы данных
(Database Results Wizard), позволяющий создать необходимый запрос к базе данных и
определить способ представления результатов запроса на странице сайта. Мастер может
использовать уже существующее соединение или создать новое. Кроме того, есть воз-
можность использовать уже готовое соединение с демонстрационной базой данных Бо-
рей (Northwind) формата MS Access, которая устанавливается при инсталляции редакто-
ра FrontPage. На примере этой демонстрационной базы данных мы рассмотрим работу
мастера.
v В режиме редактирования страницы установите текстовый курсор в позицию, где бу-
дет помещена информация из базы данных.
v Выберите в меню команду Вставка • База данных • Результаты (Insert • Database •
Results). На экране появится первый диалог Мастер результатов базы данных (Da-
tabase Results Wizard) (Рис. 7.129).
Мастер результатов базы данным
Использовать:
ПЗ
О подключение к внешней базе данных
I Создать... I
Об использовании существующей базы данных
Отмена
I DJgJTQ [ратмо |
|доставка [3
О Пользовательский запрос
12*
356 Создание Web-сайтов
КодСотрудника Изменить... I
Фамилия
Ащ
I Дополнительно^!
Дополнительно
_Усяовия.. Настройка условий отбора или формы для поиска необходимых записей.
Порядок.. Выбор полей для сортировки результатов отбора записей из базы данных.
Нажав на кнопку Условие (Criteria), можно в отдельном диалоге указать значения или диа-
пазон значений для определенных полей и таким образом отфильтровать нужные записи.
Ограничения на значения полей устанавливаются с помощью операций сравнения и могут
объединяться логическими операциями «И» и «ИЛИ». Кроме того, здесь же определяются
поля для внесения в поисковую форму. Мастер затем может автоматически создать на стра-
нице поисковую форму, что даст возможность посетителю сайта самостоятельно отбирать
нужные записи из таблицы базы данных. Если заданы поисковые поля, то в диалоге, вызы-
ваемом по кнопке По умолчанию (Defaults), можно задать их начальные значения для по-
исковой формы. Диалог, вызываемый по кнопке Порядок (Ordering), позволяет задать поля
для сортировки отображаемых записей. В диалоге Дополнительно (More Options) можно
также ограничить общее количество возвращаемых запросом записей (Limit number of re-
turned records to) и указать сообщение на случай, если не найдены записи, удовлетворяю-
щие указанному критерию (Message to display if no records are returned).
>• Нажмите кнопку OK, чтобы вернуться к диалогу мастера.
>• Нажмите кнопку Далее (Next). На экране появится четвертый диалог мастера, в кото-
ром определяется формат представления данных (Рис. 7.134).
Мастер результатов базы данных
Щ j записей в группе
Рекомендации
ш 1
> Нажмите кнопку ОК. На страницу будет помещена таблица для отображения данных
(Рис. 7.137).
Строка запроса
I Значение Вне*
> Нажмите кнопку Добавить (Add). На экране появится диалог Добавление пара-
метра (Add Parameter).
>• В открывающемся списке Имя (Name) выберите поле, значение которого будет пере-
даваться в качестве параметра, например, КодСотрудника (EmployeelD). В откры-
вающемся списке Значение (Value) будет отображен скрипт, вызывающий функцию
для получения значения параметра (Рис. 7.139).
Добавление параметра
Имя;
|КодСотрудника
Значение:
|<%=FPJieldURUfP-i's,"KoflCQTpyAHHKa")%> [ГЦ
ОК Отмена
v Нажмите кнопку ОК. Параметр будет добавлен в список параметров диалога Пара-
метры гиперссылки (Hyperlink Parameters).
Создание Web-сайта с помощью Microsoft FrontPage 2003 361
> Нажмите кнопку ОК в диалоге Параметры гиперссылки (Hyperlink Parameters).
Мы вернемся в диалог Добавление гиперссылки (Create Hyperlink).
>• Нажмите кнопку ОК в диалоге Добавление гиперссылки (Create Hyperlink).
Выбранное поле примет формат ссылки. .
Посетителям сайта можно дать возможность самостоятельно вносить информацию в базу
данных. Для этого необходимо создать форму и установить в настройках формы возмож-
• ность сохранения результата в базе данных. При сохранении данных можно использовать
существующее соединение или создать новый файл базы данных формата MS Access.
О том, как поместить форму на страницу и выбрать способ обработки результатов ввода,
мы уже говорили в одном из предыдущих опытов.
Образец
L
Рис. 7.140. Вкладка Страница рамок (Frames Pages)
диалога Шаблоны страниц (Page Templates)
362 Создание Web-сайтов
> В разделе Создать страницу (New page) Области задач (Task Pane) щелкните мы-
шью на ссылке Другие шаблоны страниц (More page templates). На экране появится
диалог Шаблоны страниц (Page Templates) (Рис. 7.46).
> Выберите вкладку Страница рамок (Frames Pages) (Рис. 7.140).
На этой вкладке имеется набор шаблонов для создания страниц с фреймами. При выборе
шаблона, исходный вид страницы отображается справа в поле Образец (Previev/), а в
поле Описание (Description) выводится описание шаблона.
v Выберите один из шаблонов, например Оглавление (Contents), и нажмите кнопку ОК.
Будет создана новая страница с фреймами по выбранному шаблону (Рис. 7.141).
В Ш& |А *" I 1= В IШ •
Й| веб-узел | | tourl.asp^|HOB_CTp_tJTtm
[<body >] И
аЛя Правка Вия Е ставка Формат Серо Таблиц Данные Е1МКН Окно Справка
Мы предлагаем
При щелчке мышью на второй ссылке в правый фрейм должна зафужаться начальная
страница фрейма.
При необходимости можно изменить целевой фрейм для отдельной ссылки или для всех
ссылок в текущем фрейме.
>• В режиме редактирования Конструктор (Design) представления Страница (Page)
щелкните правой кнопкой мыши на одной из ссылок в левом фрейме и в появившемся
контекстном меню выберите команду Свойства гиперссылки (Hyperlink Properties).
На экране появится диалог Изменение гиперссылки (Edit Hyperlink).
>• В диалоге Изменение гиперссылки (Edit Hyperlink) нажмите кнопку Выбор рамки
(Target Frame). На экране появится диалог Конечная рамка (Target Frame) (Рис. 7.143).
Та же рамка
Страница целиком
Новое окно
Родительская рамка
Настройка объекта
В поле Настройка объекта (Target setting) можно указать целевой фрейм или выбрать
один из вариантов в списке Общие объекты (Common targets). Флажок Установить для
страницы по умолчанию (Set as page default) позволяет использовать выбранный целе-
вой фрейм для всех ссылок страницы, где явно не указан какой-либо другой.
> Нажмите кнопку ОК, чтобы закрыть диалог Конечная рамка (Target Frame), и затем
кнопку ОК в диалоге Изменение гиперссылки (Edit Hyperlink).
Хотя фреймы не содержат собственных визуальных элементов, страница с фреймами и
сами фреймы имеют ряд настроек, позволяющих управлять их отображением.
> Щелкните правой кнопкой мыши в любом месте на одном из фреймов и в появив-
шемся контекстном меню выберите команду Свойства рамки (Frame Properties).
На экране появится диалог Свойства рамки (Frame Properties) (Рис. 7.144).
Свойства рамки
Имя: [main
Начальная страница: [ J i g ! *
Длинное описание:
Название:
Размер рамки
Ширина: [Относительное
Высота строки:
F—НЕ носитепьное
Поля
Ширина:
Высота:
Параметры — — — — — — — — —
Е Изменять размер в обозревателе Сдмница рамок... 1
Стиль..,. |
Г ОК Отмена
В поле Имя (Name) указано внутреннее имя фрейма, оно используется также при выборе
целевого фрейма для ссылки. В поле Начальная страница (Initial page) указана страни-
ца, отображаемая во фрейме при его загрузке. В группе элементов управления Размер
рамки (Frame size) можно указать ширину (Width) и высоту (Height) фрейма относитель-
но соседних фреймов (Relative), относительно размеров окна браузера в процентах (Per-
cent) или фиксированный размер в пикселах (Pixels). В группе элементов управления По-
ля (Margins) определяются значения отступа от вертикальных (Width) и горизонтальных
(Height) границ фрейма до содержимого внутри фрейма. Если установлен флажок Изме-
нять размер в обозревателе (Resizable in browser), то посетитель сайта может менять
размер фрейма, передвигая мышью разделитель между соседними фреймами.
В открывающемся списке Полосы прокрутки (Show scrollbars) задается режим отобра-
жения полос прокрутки: при необходимости, (If needed), то есть когда страница целиком
не помещается во фрейме, никогда (Never) или всегда (Always).
> Нажмите кнопку Страница рамок (Frames Page). На экране появится диалог Свойст-
ва страницы (Page Properties) с открытой вкладкой Рамки (Frames) (Рис. 7.145).
366 Создание Web-сайтов
Свойства страницы
G9 Показать границы
ОК | Отмена )
Рис. 7.145. Вкладка Рамки (Frames) диалога Свойства страницы (Page Properties)
>• Чтобы удалить фрейм, выделите его, щелкнув на нем мышью, и в меню програм-
мы выберите команду Рамки • Удалить рамку (Frames • Delete Frame). Фрейм
будет удален.
Удаление фрейма не приводит к удалению страницы, которая в нем отображалась.
Последний фрейм на странице не может быть удален.
Вы можете сохранить текущую страницу с фреймами как шаблон для последующего ис-
пользования. Ваш шаблон будет добавлен к набору шаблонов программы FrontPage.
> Чтобы сохранить собственный шаблон страницы с фреймами, выберите команду ме-
ню Файл • Сохранить как (File • Save As). На экране появится стандартный диалог
сохранения файлов Сохранить как (Save As) (Рис. 7.147).
| IMi Тураге
Мои последние
документы
Рабс**1Й стоп
Мои
щ
документы
Мой
компьютер
Новая страница 1
И м файла:- |FrameContatner
Мое сетевое
окружение Тип файла: [Вебстраницы
> В открывающемся списке Тип файла (Save as type) выберите Шаблоны FrontPage
(FrontPage Template).
> В поле ввода Имя файла (File Name) укажите имя файла шаблона и нажмите кнопку
Сохранить (Save). На экране появится диалог Сохранить как шаблон (Save As Tem-
plate) (Рис. 7.148).
j Сохранить как. шаблон
Ш1
1
Название: Новая страница 1 Обзор,..
Имя: myFrameContalner
Описание: Введите описание.
1 ок | Отмена |
> В поле ввода Название (Title) укажите название шаблона, которое будет отобра-
жаться в списке шаблонов при создании новой страницы. В поле ввода Описание
(Description) можно кратко описать назначение и вид шаблона.
Флажок Сохранить шаблон на текущем Web-узле (Save Template in Current Web site)
определяет, будет ли шаблон доступен в любом сайте или только в текущем.
> Нажмите кнопку ОК. Шаблон будет сохранен.
Теперь вы можете использовать собственный шаблон при создании новой страницы с
фреймами, выбирая его в списке шаблонов диалога Шаблоны страниц (Page Templates)
(Рис. 7.140). Если при сохранении шаблона были установлены начальные страницы во
фреймах, то они будут использоваться по умолчанию для всех фреймов, созданных на
основе шаблона.
Фреймы удобно использовать для навигации по сайту или разделу сайта. В одном из
фреймов обычно помещают перечень ссылок в виде текста или рисунков, а в другой за-
гружаются страницы при выборе ссылок из первого фрейма. Альтернативным вариантом
является использование общих границ и навигационных меню, о которых мы уже расска-
зывали. Использовать фреймы и общие границы одновременно не рекомендуется - это
может сделать навигацию по сайту запутанной.
vti_scnoprompt 1 gtJHWHTfe,*. |
CompanyLongName Туристическое агенте...
CompanyFAX 999-9999 удалить |
Company5hortName ТА
GeneratedBy Мастер корпоративной..
CompanyEmail info@zl.com
CompanyAddress Москва, ул. Космонавт...
CompanyWebmaster web@flfl.com
vti_htmiex tensions . htm. html, asp. aspx. sht...
vtijextextensions .txt.
Рис. 7.149. Вкладка Параметры (Parameters) диалога Параметры узла (Site Settings)
> В поле ввода Имя (Name) введите название переменной, например ProjectName
>• В поле ввода Значение (Value) укажите значение переменной, например Опера-
ция «Ы», и нажмите кнопку ОК. Новая переменная будет помещена в список.
>• Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings).
Теперь посмотрим, как использовать переменную в тексте.
>• Установите текстовый курсор в том мес-
Добавление имени и значения
те, где требуется поместить текст из пе-
Имя:
ременной, и выберите команду меню
Вставка • Web-компонент (Insert • Web Значение:
>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства оглавления
(Table of Contents Properties) (Рис. 7.153).
Параметры:
13 показывать каждую страницу только однн раз
В показывать страницы £ез входящих гиперссылок
• перестраивать оглавление при изменении любой страницы
г ок ]Г Отнена
В поле ввода URL-адрес начала оглавления (Page URL for starting point of table) указы-
вается страница, с которой начнется построение оглавления. По умолчанию предлагается
начать с домашней страницы, чтобы создать оглавление для всего сайта. Если требуется
построить оглавление только для определенного раздела, то в качестве начальной стра-
ницы нужно указать главную страницу раздела. Открывающийся список Размер шрифта
заголовка (Heading font size) определяет номер стиля заголовка для начальной страницы
в оглавлении. Если выбрать значение нет (попе), начальная страница не будет включена в
оглавление. Это может потребоваться, например, когда оглавление создается на самой
начальной странице. Флажок Показывать каждую страницу только один раз (Show
each page only once) указывает, что каждая страница будет включена в оглавление только
один раз. Если этот флажок сброшен, страница может войти в оглавление несколько раз,
когда на нее имеются ссылки из разных мест сайта. Флажок Показывать страницы без
входящих гиперссылок (Show pages with no incoming hyperlinks) определяет, будут ли
включены в оглавление страницы, которых нельзя достичь по ссылкам с главной страни-
цы сайта, т.е. на них нет ссылки ни с одной страницы. Если установить флажок Пере-
страивать оглавление при изменении любой страницы (Recompute table of contents
when any other page is edited), то оглавление будет автоматически обновляться при внесе-
нии изменения на страницы сайта. При проектировании большого сайта процесс обнов-
ления оглавления может занимать ощутимое время - в этом случае оглавления лучше
обновлять вручную. Для этого достаточно открыть и сохранить страницу с оглавлением.
> Нажмите кнопку ОК. На страницу будет помещено оглавление.
В режиме редактирования страницы оглавление обозначено условно. Чтобы увидеть, как
реально выглядит оглавление сайта, запустите браузер, нажав кнопку l<Sl T на панели
инструментов Стандартная (Standard) (Рис. 7.154). Щелчок на пункте оглавления должен
вызывать загрузку страницы с соответствующим заголовком.
Если вы отказались от автоматического обновления оглавления, то его нужно обновить
вручную перед загрузкой сайта на Web-сервер. Для этого нужно просто открыть страни-
цу с оглавлением и сохранить ее командой Файл • Сохранить (File • Save).
372 Создание Web-сайтов
•
файл Правка Лвд Избранное Сервис £правка
Мы предлагаем
• Новая страница 2
• Новая страница 3 . Туры по зарубежным странам
• Новая страница 1 • Туры по странам СНГ
• Путевки на лучшие курорты России
• Авиабилеты на внутренние и
международные рейсы
Поиск: Г_
сарос |
^ Фрагменты
р кода Линейка и сетка
Шрифты поумолчанню | Форматирование кода | "" "цветовое выделение
п теги Diyj
(5i Автоматически размешать поля в форме
153 Присваивать уникальные коды новым таблицам
О Задействовать параметры макета для имеющихся таблиц на основе их содержимого
d Показывать тоуки привязки для слоя
0 Показывать подписи областей динамических веб-шаблонов
ЕЗ Д§лать код уникальным при вставке
Орфография • ™ -—
I5J3 автоматически проверять орфографию
О скрыть орфографические ошибки во всех документах
язык по умолчанию: [русский
Заменить на: 1
раничат
Варианту:
граничат
граничит
гранит
гранича
граничу
граничь
После корректировки всех слов на странице или при нажатии кнопки Отмена (Cancel) на
экране появится диалог Перейти к следующей странице? (Continue with next page?),
предлагающий перейти к следующей странице сайта (Рис. 7.158).
Когда текст страницы, содержащий ошибки, нахо- Перейти к следующей странице?
дится в общей границе, диалог Орфография Проверка этой страницы завершена.
(Spelling) может не появиться, а вы сразу увидите
диалог Перейти к следующей странице? (Con-
tinue with next page?). Е пэ>ранить >• ?» CMTt >ту страницу.
> Нажмите кнопку Следующая страница (Next | Следующая страница | j Назад в с п и с о < |
страницы (Page Properties) (Рис. 7.31). Все символы, не входящие в текущую кодировку,
сохраняются в виде числовых кодов стандарта Unicode.
Набор отчетов, входящих в состав редактора FrontPage, позволяет провести всесторон-
ний анализ сайта с целью получения статистических данных и выявления различных
ошибок и неоптимальных решений.
> Выберите команду меню Вид • Отчеты • Сводка Web-узла (View • Reports • Site
Summary). Программа перейдет в представление Отчеты (Reports) и в центральной
области окна будет выведен сводный отчет о структуре сайта (Рис. 7.160).
файл Правке £ня Вставка формат Сервис Таблица Рамки QKHO Справка
J^*j**^
ДРисунки 331КБ Файлы рисунков на текущем веб-узле (GIF, JPG, BMP и т.п.)
\ Несвязанные Файлы 21КБ Файлы на текущем веб-уэле, которых нельзя достигнуть, начав с домашней страницы
Ь Связанные файлы 26 981КБ Файлы на текущем веб-узле, которых можно достигнуть, начав с домашней страницы
^ Медленные дтоанты 2 444КБ Страницы на текущей веб-узле, у которых время загрузки превышает ожидаемое время 30 с на
Я| Старые Файлы 81КБ Файлы на текущем веб-ysne, не изменявшиеся в течение 72 дней
1)1 Последние добавл... 923KS Файлы на текущем веб-узле, созданные за последние 30 дней
57 Все гиперссылки текущего веб-узла
? Непроверенные ги... О Гиперссылки, указывающие на неподтвержденные файлы
4 £ (Неработающие гип... о Гиперссылки, указывающие на недоступные файлы
Efc Внешние гипеоссы.., о Гиперссылки, указывающие на файлы вне текущего веб-узла
Lft Внутренние гилем... 57 Гиперссылки, указывающие на файлы на текущем веб-узле
(Т) Ошибки компонентов 2 Файлы на текущем веб-узле с компонентами, сообщающими об ошибке
I Задачи на текущей веб-узле, не помеченные кап завершенные
О Темы на текущем веб-узле, не примененные ни к одному файлу
^ Связи с таблицами .., 0 Все связи с таблицами стилей текущего веб-узла.
Динамические веб-.., о Все файлы, объединенные с динамическим веб-шаблоном.
Иаанки
ЕЗ сценарии VBScript 0 страницы ASP
E « « a p m JavaScript/Bo** И CSS 1.0 (Форматирование)
[ 3 приложения Java HCSS 2-0 (положение)
0 графика PN5
более поздних (3.0 browsers and later), чтобы обеспечить совместимость с ранними вер-
сиями наиболее распространенных браузеров.
При выборе различных вариантов в группе флажков под открывающимися списками
Обозреватели (Browsers) и Версии обозревателей (Browser versions) для выбранной
версии и типа браузера, вы можете использовать различные компоненты Web-страиицы,
но при этом необходимо следить за совместимостью с браузерами.
В зависимости от выбранного браузера в меню и диалогах программы FrontPage могут
быть недоступны некоторые команды или настройки. Например, при выборе браузера
Netscape Navigator становятся недоступными сценарии на языке VBScript, а при выборе
браузера Internet Explorer недоступен эффект мерцания (Blink) для шрифта.
Кроме совместимости с браузерами, FrontPage может обеспечить совместимость с опре-
деленным Web-сервером, на котором будет размещен сайт. В открывающемся списке
Технологии FrontPage и SharePoint (FrontPage and SharePoint technologies) и группе
флажков под этим списком выбираются технологии, которые становятся доступными
только тогда, когда на сервере установлены и запущены серверные расширения rront-
Раде, службы Microsoft SharePoint Team Services или Microsoft Windows SharePoint Ser-
vices. Эти пакеты предназначены для обеспечения работы ряда компонентов, имеющихся
в редакторе FrontPage.
Удаленный ееб-сервер поддерживает серверные расширения FrontPage или службы SharePoint Services,
О Протокол WebOAV
Удаленный ееб-сервер поддерживает протокол WebDAV,
О Протокол FTP
Удаленный веб-сервер поддерживает протокол FTP.
О Файловая система
Использование в качестве удаленного веб-узла папки на локальном компьютере или в локальной сети.
Расположение удаленного веб-узла:
При необходимости попробуйте найти поставщика, поддерживающего серверные расширения FrontPage или
службы SharePoint Services, при помощи страницы поиска Web Presence Provider.
Дополнительные сведения.
Рис. 7.164. Диалог Свойства удаленного Web-узла (Remote Web Site Properties)
публикации. Этот процесс может занять некото- Рис. 7.165. Диалог Требуются имя и
рое время, после чего на экране появится диалог пароль (Name and Password
Требуются имя и пароль (Name and Password Required) для регистрации
Required) (Рис. 7.165). на Web-сервере
> Введите имя и пароль, которые вы указали при регистрации на Web-сервере и нажми-
те кнопку ОК. Web-сервер проверит указанные сведения и разрешит загрузку файлов,
а программа FrontPage переключится в представление Удаленный Web-узел (Remote
Web Site) (Рис. 7.166).
: Фай» Правка Вид Вставка формат 'ервис Iadnutta Данные Рамки QKHO Справка
В представлении Удаленный Web-узел (Remote Web Site) можно копировать файлы как
с локального компьютера на удаленный, так и обратно, а можно синхронизировать фай-
лы, установив соответствующий переключатель в правом нижнем углу рабочего окна.
> Убедитесь, что установлен переключатель Локальный на удаленном (Local to
remote) и нажмите кнопку Опубликовать Web-узел (Publish Web site). В нижней час-
ти рабочего окна будет отображаться ход публикации.
Создание Web-сайта с помощью Microsoft FrontPage 2003 383
В процессе публикации программа FrontPage сначала сравнивает файлы на локаль-
ном компьютере и Web-сервере, затем загружает изменившиеся и новые файлы и
обновляет необходимые связи и компоненты страниц на сервере. По завершении
процесса публикации в нижней части рабочего окна появится сообщение о заверше-
нии загрузки файлов (Рис. 7.167).
: Файл Правке Вид Вставка Формат Сервис Ja6ямяа Данные Рамки QKHO Справка
н А *' 11= Е * * I в •!
Представление Содержимое папки • £ 0 Свойстве дяменного веб-зэм... ^J» Оптимизировать опублмкованмый HTML
Локальный веб-узел C:\Documents and Sett«i9s\Vasi(y\My Docum... Удаленный веб-узел ftp://ftp.narctl.ru
а *х а
[Состоя... 1И ^ Состоя, f Изменяя I
jbutton8.jpg KOM4>J 30.08.2004 14:.. VASW ij_bo.d.r«
I button?, jpg
Uclock.avi
Коиф| 30 08.2004 14:..
Конфликт 23.08.2001 16:..
VASW P
Q.lpclat.
g К 04.03.2004 13:.. VASW O.ovMlay
Конфлик 02.03.2004 23:.. VASMJ Й .private
КонФлши 04.03.2004 17:.. VAS\\L Q.lheant
3»332364. B il КонФлнк 28.08.2004 21:.. VASW
l КОНФЛИКТ 03.03.2004 21: . VASWjp 1С) images
J
- Опубликовать все измененные страницы -
Состояние последней публикации: нет данных •Ф 0 Локальный не удаленной
Завершено.:. <• О Удаленны! на локальной
Проснотпять уужал nvfinw:auHnl
£f О Синхронизация
I с^тубликовать веб-узел | | Стоп j
4 Э°Переходы ft Гиперссыл
13-1210
ГЛАВА 8.
Конечно, число посетителей сайта сильно зависит от рекламных шагов, которые пред-
принимаются для его раскрутки, но всегда следует помнить, что основным критерием
посещаемости Web-сайта является его тематика и содержание. Понятно, что развлека-
тельные сайты при одинаковых рекламных усилиях соберут гораздо большую аудито-
рию, чем, например, сайт о филателии - ведь читать анекдоты любят все пользователи
Интернета, а собирает марки не очень большой процент из них. В случае, если вы созда-
ли узкоспециализированный сайт, число его посетителей будет больше, если все мате-
риалы (или хотя бы часть из них) вы продублируете на английском языке, в расчете на
иностранную аудиторию - в настоящее время число англоязычных пользователей Ин-
тернета гораздо больше, чем русскоязычных, а следовательно, больше и людей, которых
заинтересует тематика вашего сайта.
сайт через некоторое время, например через месяц, чтобы проиндексировать его за-
ново. Если же вы зарегистрировались в Интернет-каталоге, то, как правило, функцию
проверки осуществляет человек - сотрудник каталога. Он проверяет, существует ли
сайт по указанному вами адресу и соответствует ли он данному вами описанию.
Иногда проверяющий сам составляет описание для вашего Web-сайта;
• данные о сайте, который вы зарегистрировали, появляются в поисковой машине или
Интернет-каталоге. Введя в строку поиска слова, которые встречаются на вашем сай-
те, в результатах поиска вы можете увидеть ссылку на соответствующие страницы
вашего ресурса. В зависимости от популярности поисковика, на котором вы регист-
рируетесь, от внесения данных до появления информации может пройти от одного
дня до двух недель.
Как вы могли заметить по собственному опыту, к некоторым поисковым системам вы
обращаетесь каждый день, а к некоторым - время от времени. Большинство пользовате-
лей Интернета поступает точно так же. Поэтому есть сайты, на которых регистрировать-
ся нужно обязательно, чтобы не потерять своих потенциальных посетителей. В осталь-
ных поисковых системах и каталогах можно зарегистрироваться, если у вас есть для это-
го свободное время или воспользоваться системами, регистрирующими ваш ресурс сра-
зу в нескольких поисковиках. На популярных поисковых системах лучше регистриро-
ваться вручную.
Домашняя страница-
Укажите страницу, с которой следует начинать обзор,
| [ С исходной | | Сдутой \
-Журнал-
Папка журнала содержит ссылки для быстрого доступа
к страницам, которые вы недавно посещали.
0К Отмена Прицепить
Параметры
JL J.
| Восстановить значения по умолчанию |
Отмена I [ Применить |
> Нажмите кнопку Применить (Apply) и кнопку ОК, чтобы закрыть диалог.
>• Нажмите кнопку Обновить (Refresh) на панели инструментов браузера. Рисунки
будут заменены на прямоугольники соответствующего размера с пояснительными
надписями.
Теперь можно просмотреть все страницы вашего Web-сайта, чтобы проверить правиль-
ность составления пояснительных надписей. Запишите или запомните названия страниц
с неправильными надписями. Как отредактировать надписи вручную, будет рассказано
чуть дальше.
Еще одним тегом, составлению которого нужно уделить особое внимание на каждой
странице вашего сайта, является тег <meta>:
• тег <meta> с параметром keywords. В нем необходимо перечислить ключевые слова
и словосочетания, которые наиболее точно отражают содержимое страницы. Напри-
мер, для сайта, посвященного ремонту, на странице со статьей о выборе строймате-
риалов тег <meta> может выглядеть следующим образом: <meta name= "keywords"
contentв"ремонт, выбор стройматериалов, обои, кафель, гилсокартон,
расчет количества ">. В данном примере применены не только отдельные ключе-
вые слова, но и словосочетания. Если пользователь задаст в качестве запроса к поис-
ковой системе одно из подобных словосочетаний, то данная страница будет разме-
щена системой в начале списка подходящих страниц. Вы можете использовать боль-
шое число ключевых слов, но их общая длина не должна превышать 200 символов;
• тег <meta> с параметром d e s c r i p t i o n . Этот тег задает, какой текст покажет поис-
ковая машина вместе с заголовком страницы при отображении в списке подходящих
страниц. Если этот тег не задан, то в качестве описания страницы будут отображены
первые 100 символов страницы. Естественно, что они далеко не всегда правильно от-
ражают ее содержание. Для страницы предыдущего примера тег <meta> может вы-
глядеть следующим образом: <МЕТА name= "description" content="Подробные
советы по выбору стройматериалов для ремонта: кафеля, обоев и
гипсокартона, советы и примеры по расчету количества необходимых
стройматериалов">.
Все специальные теги можно отредактировать или создать (если их нет) вручную.
> Нажмите кнопку Пуск (Start) на панели задач; Откроется главное меню Windows.
> В главном меню выберите команду Программы • Стандартные • WordPad (Programs
• Accessories • WordPad). На экране появится рабочее окно программы WordPad.
> Выберите команду меню Файл • Открыть (File • Open). На экране появится диалог
Открыть (Open).
>• В открывающемся списке Тип файлов (File types) выберите строку Все документы
(V) (All types (*.*)). В списке файлов отобразятся файлы всех типов (Рис. 8.3).
392 Создание Web-сайтов
1
ИЗ-
L
Хип Файлов: |Вса документы ('.*)
<head>
<title>Bn6op стройматериалов для peMOHTa</title>'
</head>
<body>
=p
<img src *i.mages/kafel. jpg" alt-''Виды кафеля">
|ля справки нажмите F1
Disallow: /forum
Строка с полем D i s a l l o w может запретить индексирование документов только с одним
префиксом. Для запрета нескольких префиксов нужно написать несколько строк.
Например, чтобы запретить индексирование документов, начинающихся с /cgi-bin и
/forum, необходимо написать.
User-Agent: * .
Disallow: /cgi-bin
Disallow: /forum
А следующий фрагмент будет неверным
User-Agent: *
Disallow: /cgi-bin /forum
В строках с полем D i s a l l o w записываются не абсолютные, а относительные префиксы.
То есть файл:
User-Agent: *
Disallow: www.iqyho8t.ru/cgi-bin
запрещает, например, индексирование документа
http://www.myhost.ru/www.myhost.ru/cgi-bin/counter.cgi,
но не запрещает индексирование документа http://www.myhost.ru/cgi-bin/counter.cgi.
394 Создание Web-сайтов
Адрес; НВ hUp://m*m.fmib*.M да в
> Яндекс уаоторой стран
Hndex
Найдётся .гё
П о г м а ; П е л а , 7 сентября
Сегодня в Завтра
Ночью: *€...->в Ночью: +10... +12
Красст; Днем: +17...-И9 Днём +16...+16
~. фМ«ыа &\0-'$
I*
-
Адрес; J 2 htt p : //» w w . r M > d«s.ru/«l_Mrvic«t.ht«l Qnepmw
оыпускТосЩДЖтЯ ^ ;фава
<tt Каталог
Сайты, отобранные
рекламы автоматически Онлайновая ролевая
-
вручную 0 Спаиооборона. Дрогада гре
Антиспамовэя
Открытки
фильтрация К 12Л£ПйО£рцШ1 '
выбор моделей и
Центральные, _
поиск товаров М Народ остита
Бесплатный хостинг Общение
Д Картинки региональные каналы
интересными
Поиск изображений
Расчеты через
Даль, Брокгауз, ,
Москва и область. БСЭ...
беспроводной доступ
Санкт-Петербург,
at ^ловдри
Киев, Россия. Европа Поисковая реклама
АНГЛИЙСКИЙ.
it кубо» •tf Зякликн немецкий
Соревнование по и французский
поиску в интернете
ft Они
Вебмастеру Специальные виды * ) f Устаизеиа_Бар
Добавить сайт пеист Все службы и поиск на панели браузера
удалить страницу
_ j^HrtTH'
-
Региональный поиск
ПОИСКАЛИ
сда&мцяших
в
Рис. 8.6. Страница с перечнем служб Яндекса
> В разделе Web-мастеру щелкните мышью на ссылке Добавить сайт, В разных сис-
темах эта ссылка может называться, по разному, например Добавить ресурс, Доба-
вить URL, Add URL, Submit a site и так далее. После щелчка мышью на ссылке от-
кроется страница добавления сайта в поисковую систему (Рис. 8.7).
396 Создание Web-сайтов
Karanorpmaileu
Вшнес н финансы
Торгами Алтеттор Н<моям f/flHTIUIIiif T" Я"до^* Юристы
К о м п о т еры » и ИСКУССТВО
Umiiat Н ш и ш а Qa&i ШЕЛ»
Статики
> Определите желательную для себя категорию, перейдите на страницу данной кагего-
рии в каталоге и щелкните мышью на ссылке Добавить сайт. Загрузится начальная
страница регистрации (Рис. 8.9).
Dw»u I - Ил»«««|»
Вариэнт регистрации н а платной основе обеспечивает быстрое (в течение 3-х рабочих дней) появление
описания на V раницах каталога и ряд дополнительных преимуществ. Поэтому, прежде ч е й приступить к
регистрации, внимательно прочтите:
Проверьте! Возможно, ваш сайт относится к группе сайтов, бесплатная регистрация которых в каталоге
. но с ошибками на странице
Сервис £прмя«
ав ..па
ЬмщуиЕтород^. Палаш*
Проверьте, возможно ваш сайт уже зарегистрирован в каталоге.. Введите Ш своего ресурса и нажмите
кнопку "Далее"
Если ваш сайт уже зарегистрирован в каталоге Mafl.ni, вам будет отказано в повторное регистрации.
При положительно*! ответе, продолжит* заполнение регистрационной формы.
• П р а в и л а регистрации ш к а т о д е т * Mafl-гв
В ьгга/ивно. но е ошибками но с т м п и и .
Рис. 8.10. Страница для ввода адреса сайта для регистрации в каталоге List.Mail.ru
Введите адрес вашего сайта в поле URL сайта и нажмите кнопку далее. В окно браузера
загрузится форма для ввода регистрационных данных (Рис. 8.11).
ан
Заголовок яоп»»и А » « Т Ь полыоваталю обш»« лредстмпенчв о содержанки м и г а
Д1ж# 6 e j обр«И»нна к аинат«ции. Для корпоративных и лорсонапьных сайтов
заголовок должен отражать на»апна п основной вид Д»*тальност фирмы (пнцв).
Владелец сайт» :
Автор сайта или в л и в л а ц сайта (юрндич*скоа или фм>ичаское лице). При напичи
нескольких копмрайтоа (инфориаиия, общий, аи>айн, « п о р , составитель),
предпочтение ДОЛЖНА быть отдано владельцу общего копирайта, либо тому, кто
располагает правами н я нпфорнлцию слита.
Адрес
Юридический, или физический
Заполняется жалающнии).
Данное лоле »аполн*втся теми аладфльианн, которые хотели бы, чтоб)» описание №
сайта иожмо было бы найти пси поиске ло м р е е т . Разрешается тек же разместить
контактные телефоны.
1 Д ф Т : AMD Semptpfi и Infol Cejeron D: тесты б^^исат^ыхпр... 2 «5 2.1» 3 043 „Do Ещрпвснсси
2 Н^КС Комдьнзмархет: Первые карты дгс?РС1 Едрге?? 312 320 374 Бизнес к финансы
Города и регионы
3 'Ф-ЦЕНТР* - NVIDIA GeForce «СОРТ- новый GPU среднего к... 306 303 ЗМ „00
От
Дизайн
4 gTJl^Rigg - первый KQMnbK)Tepiff.|gГипермаркет в Москве откр... 275 276 304 &
5 НРС.ш: 350+ КПК 4200+ программ д ш Р д М и Pocket PC 263 269 320 & 3af;gHbi
Участие в рейтингах необходимо, так как часто пользователи ищут сайты с нужной ин-
формацией именно в них, а попадание в верхушку рейтинга само по себе способно зна-
чительно увеличить посещаемость вашего Web-сайта.
Еще один плюс, который дает участие в рейтингах - это получение обширной статисти-
ки о посещаемости вашего сайта. Для того, чтобы система получала данные о числе об-
ращений к главной странице вашего сайта, вам будет выдан специальный код счетчика,
который нужно будет разместить на страницах вашего сайта. Благодаря этому же коду
будет получена и другая информация о ваших посетителях, которая будет представлена
в виде четкой статистики.
14-1210
402 Создание Web-сайтов
0Г £, Н U Ю.
Адрес, Щ Ы>р://н«п l»mbler.!u/doc/a<id_iite.«M«l
W1H НОЮ MAC ISO DOS [ ^
, который сближает...
Регистрация
Можно зарегистрироваться:
• в поисковой системе Rambler;
• в интернет-рейтинге Rambler's ТорЮО;
• в рейтинге интернет-магазинов Rambler's TopShop.
> Прокрутите страницу и в разделе Регистрация в интернет-рейтинге Rambler's
ТорЮО щелкните мышью на ссылке Правилами ТорЮО. В окно браузера загру-
зится страница, на которой размещены правила регистрации в системе (Рис. 8.14,
Рис. 8.15).
>• Прочитайте внимательно правила регистрации в рейтинге и, если вы с ними соглас-
ны, установите переключатель Зарегистрировать и нажмите кнопку Далее (в дру-
гих рейтингах надписи могут быть другими). В окно браузера загрузится вторая
страница регистрации (Рис. 8.16, Рис. 8.17).
Раскрутка вашего Web-сайта в Интернете 403
О зарегистрировать
О не регистрировать
I Далее I
Hntartf
14'
404 Создание Web-сайтов
1 j l llamblei's ToplUO Miciosoll Internet Eiploiei Я-ID.
1 файл Правка Вид Избранное Сервис Справка
1*
п е е»о.
•»«р< .. аи ' Link.
Rambler's TOPIOO
••L
Шв&тМййШшШ » Реппрюттюа форма
i
•Сраткое описание:
|
в
•1 К Е
1|_Г_ J»lrte™(
Qll—>-О*[5) Щ
Адрес; j ^ J hitp://top100.iambl«rru/cgi btn/mod_top100.cgiVieg*afccept
| ВотЫю'» |
10000417SI
а О Нет
••••/
Зарегистрироваться
(не нажимайте дважды)
МШ • •D j 3 В П«Р"
Rambler's TOPIOO
Rambler's ТорШО
- О проекте
Регистрация в Rambler's ToplOO успешно проведена
Для того, чтобы система начала подсчет Вашей статистики. Вам необходимо разместить на
зарегистрированной странице Пензенский научно-учебный центр следующий HTML-код:
Владельцам сайтов
<J»lM(iiitfT«pl00-->
" l O O - Изменить
- Забыли пароль?
Код должен быть размещен так. чтобы иконка счетчика была видна на странице
• В ойти под другим
Для модификации параметров счетчика, просмотра закрытой статистики, и прочих действий, « т м н : up 100,
доступных только при указании имени пользователя и пароля используйте:
Имя пользователя: 624925
Паропъ: заданный Вами при заполнении регистрационной формы
L
Копия этого сообщения выслана Вам по E-mail на адрес liv@penxa.com.ru
> Внесите в специальную заведенную вами таблицу название рейтинга, его адрес, дату
регистрации, а также имя и пароль для доступа к статистике. Отметьте для себя дату,
когда вы зайдете на данный рейтинг и проверите, появился ли ваш сайт в общем спи-
ске после проверки модератором.
1
Если вы выбрали установку на своей странице логотипа «Участник Rambler's ToplOO» (Рис. 8.17), то
будет два фрагмента html-кода - один для свернутого большого счетчика, а другой для логотипа.
406 Создание Web-сайтов
На этом первая часть регистрации в рейтинге закончена. Теперь, чтобы рейтинг смог
получать информацию о заходящих на нее посетителях с главной страницы вашего сай-
та, необходимо установить на эту страницу выданный при регистрации счетчик.
Установка счетчика
Установка счетчика потребует от вас ручной корректировки html-кода главной страни-
цы. Даже если вы никогда не редактировали страницы своего сайта вручную, не iryraft-
тесь. Этот процесс совсем несложен и не отнимет у вас много времени.
> Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows.
>- В главном меню выберите команду Программы • Стандартные • WordPad (Programs
• Accessories • WordPad). На экране появится рабочее окно программы WordPad.
v Выберите команду меню Файл • Открыть (File • Open). На экране появится диалог
Открыть (Open).
> В открывающемся списке Тип файлов (File types) выберите строку Все документы
(*.*) (All types (*.*)); в списке файлов отобразятся файлы всех типов (Рис. 8.19).
> Выберите папку, в которой размещены страницы вашего сайта, и откройте htrnl-файл
главной страницы вашего сайта. Этот файл может называться index.htm, indcx.html,
default.htm и т.п.
Раскрутка вашего Web-сайта в Интернете 407
> Выделите текст кода, начиная со строки <!—begin of Rambler's Topioo code —>
и заканчивая строкой <!—end of ToplOO code—>.
у Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору),
чтобы скопировать выделенный фрагмент в буфер обмена.
> Не закрывая почтовую программу, перейдите в программу WordPad, в которой от-
крыт html-документ для редактирования.
>• Установите текстовый курсор на пустую строку после текста, который должен пред-
шествовать изображению счетчика, и вставьте скопированный ранее фрагмент кода,
используя команды меню Правка • Вставить (Edit • Paste). Код будет вставлен в
текст страницы.
</html>
> 1 О Первкол l
Добро пожаловать на
страничку компании ГЕОТОН!
О нашей
компании
Новости
Здесь Вы у таете о нашей деятельности, о
программных продуктах нашей компании
i Спец. ПО об оборудовании, которое мы производим
i Наши партнеры
.1 Прайс-лист
1 Свя1ь с
•| компанией
Несмотря на эти сложности, можно принять число хостов равным числу посетителей.
Попробуем проанализировать посещаемость сайта, после регистрации которого прошло
уже достаточное время, используя статистику рейтинга Rambler's ToplOO.
>• Наберите в адресной строке вашего браузера адрес Интернет-рейтинга, в котором вы
зарегистрировались, например http://top100.rambler.ru. Загрузится главная страница
рейтинга.
> Справа, в разделе Владельцам сайтов, найдите ссылку Статистика и щелкните на
ней мышью (в других системах ссылка перехода к статистике может называться ина-
че, например Вход для пользователей). На экране появится диалог с полями для
ввода имени и пароля (Рис. 8.22).
410 Создание Web-сайтов
Authorised User
Псдьювателы
(Даролы 1
1~3 Сохранить пароль
Рис. 8.22. Диалог для ввода имени и пароля при запросе статистики
> Введите имя пользователя и пароль, выданные вам в системе при регистрации.
Загрузится страница со статистикой о распределении посещений за последний
день (Рис. 8.23).
- Забыли пароль?
:айта | Активность посетнг«ий|
Р а с п р е д е л е н и е п о с е щ е н и й (хитов) п о в р е м е н и суток:
0 1 2 3 4 5 E 7 8 Э 10 11 12 13 14 15 1G 17 18 19 20 21 22 23
• Сегодня Нелеп* НЯЗЙД Среднее с номентя
Сентябрь 2004
1 3 5 7 9 11 13 15 17 19 23 25 27 29 31
I кости Ш посетите/м
Август 2004
9 U 13 15 17 19 21 23 25 27 29 31
- Забыли пароль?
С е г о д и [ Подробим статистика j Цо. :ость сайта| Активности - Войти под другим
посетителей | Хосты | I Геогртфня | Настройка
Иоскм (19.S3Z) •
Сйнкт-ПетеРБфГ ( 3 . 4 Ш В
КРАСНОДАРСКИ* КРАЙ (1.G7Z) •
Свердловскяя ОБЛ. (2.14Z) В
КРЙСНОЯРСКН<1 КРАЙ (1.80Z) •
ИРКУТСКАЯ ОБЛ. <1.782> D
ТОМСКАЯ ОБЛ. (1.232) Ш
Остальные регион.! (32.022) D
Зйруьежчме СТРАН.) (34.542) •
Рйсположение не определено <1.50Х) •
••"••; 1
Ciutr в целом :.' Зияавиая страниц : ,
18 host-80-?5-32-242.1easedlmei.sura.m 0 0 0 1 0 0230J3
19 host-SO-95-35-232.dialup.sura.ru 0 0 0 1 0 1843:22
, о 0
/
20 ho«t-80.95-3M3.dfl.fur*fu 0 1 0 14SJ31
Процент от всех 33.614
р
Puc. 8.26. Статистика с.таблицей адресов хостов в системе Rambler's ToplOO
С помощью этой таблицы вы можете увидеть конкретные адреса хостов, с которых при-
ходят к вам посетители. Чтобы более подробно узнать об этих хостах, можно прибегнуть
к такому трюку. В адресной строке браузера наберите фрагмент любого адреса, начиная
со второй с конца точки, вставив впереди www. Например, если взять третий адрес из
таблицы proxy.bta.bg и ввести преобразованный адрес www.bta.bg в адресную строку
браузера, то мы попадем на сайт болгарского телеграфного агентства. То есть, три об-
ращения, которые дал этот хост в течение дня, идут от сотрудников этого агентства.
414 Создание Web-сайтов
Часто знание адресов позволяет более точно определить, из какого города идет приток
посетителей, а также узнавать некоторых посетителей «в лицо», особенно, если ваш сайт
невелик, и число ежедневных посетителей ограничивается несколькими десятками. То-
гда, зная адреса обратившихся хостов и адреса электронной почты, по которым вы осу-
ществили рассылку новостей своего сайта, можно довольно точно определить, какие из
подписчиков откликнулись на рассылку новостей.
Для большинства сайтов регулярного анализа подобной статистики вполне достаточно,
чтобы сделать выводы об эффективности или неэффективности предпринимаемых рек-
ламных шагов. Если же вам хочется получить еще более подробные сведения о посети-
телях вашего сайта, то можно пойти еще дальше, и зарегистрироваться в системах с бо-
лее подробной статистикой. Но для этого придется установить счетчик системы ыа каж-
дую страницу вашего Web-сайта. Подобные услуги предоставляют, например, системы
Spylog (http://www.spy1og.ru) и Rambler (http://top100.rambler.ru). Системы с подробной
статистикой предоставят не только сведения, о которых было рассказано выше, но также
информацию о ссылающихся на ваш сайт серверах, количестве посетителей, пришедших
с поисковых машин и каталогов, наиболее популярные пути и страницы сайта, время,
проведенное посетителями на сайте. Регистрация и установка счетчиков на страницах
для участия в таких системах совсем несложны и аналогичны тем, о которых было рас-
сказано выше.
Баннеры могут быть в формате gif, jpeg и flash. О том, как самому создать графический
или анимированный баннер, было рассказано в главе о графике и анимации этой книги.
В этой же главе мы расскажем о том, как сделать так, чтобы каждый ваш рекламный
блок успешно выполнял задачу по раскрутке сайта.
Раскрутка вашего Web-сайта в Интернете 415
;
Адрес; Lj8 hUp://m»w.lenla.iu Перегон | Lmk.
«Загадочный» баннер (Рис. 8.29). Рисунок и текст на таком баннере настолько стран-
ны, что непонятно о чем вообще идет речь или их можно истолковать сразу в не-
скольких смыслах. Заинтригованный пользователь часто не может пройти мимо та-
кого баннера, чтобы не узнать, что за сайт за ним скрывается. Также CTR «загадоч-
ного» баннера может сильно увеличиться, если баннер содержит не только загадку,
но и намек на эротические мотивы.
«Нажми на баннер». Вообще считается, что слова «щелкни», «нажми здесь», «клик-
ни», побуждающие посетителя к активным действиям, очень повышают CTR банне-
ра, тем более, если предлагается щелкнуть мышью, чтобы узнать что-то интересное,
выиграть приз и так далее. Как ни странно, но срабатывает и обратное - призыв не
нажимать на баннер (Рис. 8.31).
НИКОГДА
НЕ НАЖИМАЙ
НА ЭТОТ БАННЕР
Рис. 8.31. Баннер с призывом не нажимать на него
Хотя все перечисленные выше способы необходимо знать всем, кто хочет изготовить
для своего сайта рекламный баннер, следует помнить, что не всегда баннер с высоким
CTR реально приведет на ваш сайт большое число посетителей. Многие из них, соблаз-
нившись интригующим изображением или надписью, щелкнут мышью на баннере, но
уже через пару секунд обнаружат, что изображение на баннере имеет мало общего с те-
матикой рекламируемого сайта. В этом случае посетитель просто нажмет кнопку своего
браузера, которая вернет его на тот сайт, на котором он находился вначале. Таким обра-
зом, получив клик, вы не получите постоянного посетителя, который будет часто воз-
вращаться на ваш ресурс.
Кроме того, есть опасность, что посетитель запомнит, что именно ваш сайт использует
не совсем честные методы, а когда ему действительно понадобится информация с ваше-
го ресурса, он предпочтет сайт-конкурент. Поэтому лучше всего, пользуясь советами по
повышению CTR, одновременно стараться не обманывать посетителя и на сайте, по воз-
можности, предлагать то, что обещает баннер. Например, баннер с фрагментом игры
«Сапер» с изображением частично разминированного игрового поля (Рис. 8.33) призы-
вает скорее продолжить игру, потому что время идет.
Sи..?.iljijii
_j.—_i—i_j,
Хотя такой баннер содержит «хитрые» элементы, тем не менее он почти не обманыва-
е т - баннер ведет на сайт интерактивных игр с призами RaxGames (http://games.rax.ru).
Правда, игры «Сапер» там нет, но зато есть множество других интерактивных игр по-
добного плана.
Если отклик изготовленного вами баннера не так высок, как хотелось бы, это еще не
означает, что сам баннер не эффективен. Посетитель может и не щелкнуть мышью на
баннере, но тем не менее, запомнить название и адрес сайта, который баннер рекламиру-
ет. Для этого, конечно, название и адрес должны быть указаны. Иногда баннеры дехают,
ориентируясь, главным образом, на этот случай - тогда баннер должен содержать яркое
название сайта и несколько ключевых слов, описывающих его содержание. Аналогич-
ным образом часто поступают компании для рекламы своего имиджа - мы часто видим
на улицах рекламные щиты, на которых, кроме логотипа и названия компании, нет ниче-
го. Такая реклама направлена на то, чтобы сделать узнаваемым и привычным название
компании, ведь большинство покупателей предпочитает покупать товары известных
фирм. Так почему бы не поступить точно так же для того, чтобы сделать известным имя
своего сайта?
molotoktru
О Сотовая связь О Авто, Мото, Запчасти
Естественно, чтобы баннер не только служил привлекательной дверью, ведущей HEI ваш
сайт, но и способствовал росту его имиджа, баннер должен быть сделан достаточно ка-
чественно и профессионально. Хорошо продуманные дизайн, фотоизображения и рек-
ламный текст должны показать, что ваш Web-сайт тоже «на уровне». Если вы рассчиты-
ваете, что баннер, помимо привлечения посетителей на сайт, должен выполнять и имид-
жевые функции, то следует очень осторожно использовать «хитрые» приемы - псевдо-
кнопки, полосы прокрутки и тому подобное - или не использовать их вовсе.
Чтобы посетители увидели ваш баннер, а не прошли мимо него, необходимо знать о не-
которых особенностях. Приведем несколько моментов, на которые советуют обратить
внимание специалисты баннерной рекламы.
• Размер баннера в байтах. Как и любое компьютерное изображение, чем баннер
меньше, тем быстрее он загружается через Интернет, а следовательно, больше и ве-
роятность того, что посетитель, перемещающийся по странице, увидит полностью за-
груженный баннер, а не прямоугольник с загружающейся картинкой. Баннерные
Раскрутка вашего Web-сайта в Интернете 419
чает канал, когда там начинается реклама. А так как рекламные баннеры на страницах
сайтов обычно находятся на одном и том же месте -^ вверху или внизу страницы - поль-
зователи попросту перестают обращать на них внимание. По этой причине во всем мире
сейчас наблюдается снижение рекламной отдачи баннеров все баннерных сетей. Вдо-
бавок, если рекламных баннеров слишком много, посетитель вашего Web-сайта даже
может с раздражением уйти с него - ведь он пришел на ваш сайт не для того, чтобы
смотреть рекламу.
Есть еще одна причина, по которой следует подумать, стоит ли вам размещать на своих
страницах баннеры, которые предоставляет вам баннерная сеть в обмен на показ вашей
рекламы на других сайтах. Это - невозможность контролировать содержание баннеров,
которые появятся на страницах вашего сайта. Над этим особо стоит задуматься владель-
цам серьезных тематических ресурсов. Хотя в большинстве баннерообменных сетей за-
прещено использование некоторых приемов в баннерах, зачастую баннеры, формально
отвечая правилам, имеют довольно фривольный вид и тексты, что называется, «на грани
фола». Если учесть, что очень часто посетители вашего серьезного, интересного сайта
будут распечатывать статьи для своих друзей, не имеющих Интернета, то достаточно
представить, как будет выглядеть распечатанная серьезная статья, сверху и снизу обрам-
ленная странными рисунками и надписями, чтобы отказаться от баннерного обмена со-
всем. Тем более, что если посещаемость вашего сайта не боле > 100 человек в день, то
сколько-нибудь заметного выигрыша от участия в баннерном обмене вы все равно не
получите.
Баннерообменные сети
Баннерообменная сеть - это служба, которая помогает всем желающим размещать баннеры
на других сайтах. При этом система обмена баннерами работает следующим образом.
Раскрутка вашего Web-сайта в Интернете 421
Вы, как владелец сайта, регистрируете его в системе, загружаете свои баннеры и взамен
получаете код, который вставляете на свои страницы. При просмотре страниц вашего
сайта в том месте, куда вы вставили код, посетитель увидит баннер одного из участни-
ков баннерной сети. Система регистрирует каждый показ чужого баннера на ваших
страницах и суммирует общее их число. С учетом этого числа баннеры, рекламирующие
ваш сайт, появляются на сайтах других участников.
За свои услуги баннерообменная сеть взимает определенную комиссию - например, вы
показываете на своих страницах 100 чужих баннеров, а взамен сеть показывает 90 ваших
баннеров на других сайтах. Десять показов баннеров из ста сеть забирает себе - для про-
дажи желающим за деньги или для рекламы самой баннерной службы. Как правило, чем
крупнее сеть, тем более высок процент ее комиссии. Есть сети, которые обменивают
показы баннеров «один к одному». Как правило, это небольшие или только начинающие
работать сети.
Большинство баннерообменных сетей предоставляет своим пользователям подробную
статистику, в которой содержится информация о количестве показов чужих баннеров на
странице пользователя, количестве показов собственных баннеров на чужих сайтах, CTR
каждого баннера и некоторые другие сведения. Некоторые баннерные сети позволяют
своим участникам самим выбирать, на сайтах каких тематических групп будут показы-
ваться баннеры участника, позволяют запретить показ на своих страницах баннеров оп-
ределенных сайтов (например, если эти сайты являются конкурентами вашего), а также
показывать свои баннеры только в определенные дни недели, в определенное время и
для посетителей из определенного региона страны. В некоторых баннерных службах
услуги настройки показов на определенную аудиторию оказываются не всем участни-
кам, а только тем, которые на своих страницах показывают оговоренное число баннеров
других участников.
Почти все крупные баннерные службы разрешают управлять показом баннеров, что по-
зволяет участникам сети создавать гибкие схемы для своих баннерных рекламных кам-
паний. Например, вы, как владелец сайта, можете, показывая баннеры других участни-
ков, запретить показы своих, чтобы накопить их. Когда в данной сети накопится боль-
шое число показов баннеров, можно будет разрешить их демонстрацию, и тогда некото-
рое время на сайтах, входящих в данную сеть, будут преобладать ваши баннеры, что
положительно скажется на притоке ваших посетителей. Такой вариант массированной
рекламной кампании рекомендуется владельцам сайтов с изначально невысокой посе-
щаемостью, баннеры которых, действуй они по обычной схеме, просто потонули бы в
массе баннеров других участников сети.
Кроме возможности запретить показ баннеров до особого распоряжения, многие службы
дают возможность перенаправить показы баннеров, заработанные одним сайтом, на счет
другого. Например, если вы владелец двух сайтов - серьезного и развлекательного, то у
вас есть возможность перенаправить показы, заработанные хорошо посещаемым развле-
кательным сайтом на рекламу серьезного, который в силу специфичности аудитории сам
не способен заработать такое количество показов. Схема с перенаправлением показов на
другой счет удобна также, если вы захотите использовать показы баннеров как виртуаль-
ные деньги, чтобы, например, расплатиться показами баннеров за товар или услугу, или,
наоборот, - поменяться с кем-то, получив взамен оговоренное'число показов баннеров.
Выбирая баннерообменную сеть, необходимо внимательно ознакомиться с условиями
вступления в нее, количеством и уровнем сайтов-участников, размерами комиссии, пра-
422 Создание Web-сайтов
вилами сети и оценить, насколько все это соответствует тематике, содержанию и стилю
вашего сайта. Например, для некоторых сайтов будет только плюсом, что баннерная
сеть строго следит за содержанием сайтов-участников и демонстрируемых баннеров, для
других же сайтов это может стать сдерживающим фактором. Так что при выборе бан-
нерной сети вам самим придется решить, насколько для вашего сайта приемлемы ее
условия. Информация о правилах и условиях вступления в баннерную сеть обычно под-
робно представлена в специальном разделе на сайте сети.
Ниже приводятся адреса наиболее крупных баннерных сетей.
• Russian Link Exchange (http://www.rle.ru) - охватывает более 20 000 сайтов различной
тематики, ежедневно показывает более 19 миллионов баннеров размером
468 х 60 пикселов. Принимаются все сайты за исключением сайтов с содержанием
«для взрослых» и посвященных заработку в сети на основе пирамид. Эта баннерная
сеть берет комиссию в размере от 14% до 33%. Чем больше чужих баннеров на своих
страницах вы сможете показать, тем меньшую комиссию взимает сеть! Сеть с-грого
следит за содержанием баннеров и соответствием сайтов заявленной тематике.
Управлять аудиторией показа своих баннеров могут только участники сети, показы-
вающие в сутки более 400 чужих баннеров на своих страницах.
• RB2 (http://www.rb2.design.ru) - баннерная система, работающая с баннерами
формата 100x100 пикселов, ежедневно показывает их более 4-х миллионов.
В баннерную систему принимаются не все сайты, а только сайты достаточно высоко-
го уровня по оформлению и содержанию. Для вступления в сеть необходимо подать
заявку, после чего работник сети осмотрит ваш ресурс и решит, принимается он в
сеть или нет. Сеть приветствует новостные ресурсы, серьезные специализированные
сайты различных тематик, сайты культурных проектов. Каждому новому участнику
даются «подъемные» в размере 20 000 показов. Все участники имеют возможность
настраивать аудиторию показа своих баннеров - по времени, по географии и зрителям.
Получается, что если число ежедневных посещений вашего сайта невелико, то участие
в баннерной сети не очень выгодно. Если же ваш сайт активно посещаем, кроме того,
каждый посетитель просматривает за один раз несколько страниц, то участие в баннеро-
обменной сети может быть очень полезным для вашего сайта.
- га (
Назад на-RLE Ьаппип „и. _
j 3 В Пе
П/С
Г\СС
BANNER
NETWOUK
,
J
^ p j В Перепое
бдрес [j]b11p-.//www.rleju:8080/cgi-bin/ioinxgi
ее
ШАЛОТ CUMCWM
т
M I K инг»
Не бойтесь будущего.
ние об успешной регистрации (Рис. 8.37), и через пару минут на указанный вами ад-
рес электронной почты придет письмо с указанием вашего идентификационного но-
мера (ID) в системе .. кода, который нужно вставить на страницы вашего сайта.
После получения идентификационного номера вы становитесь полноправным участни-
ком баннерной сети.
1PIB15HJ [
<html>
<head>
<title>Пpeдcтaвлeниe о снимке как о KapTHHe</title>
</head>
<body>
> Это число на каждой Web-странице, куда вы вставляете код, должно быть разным.
Если этого не сделать, баннеры на ваших страницах будут сменяться некорректно.
Сохраните исправленный файл Web-страницы с помощью команды меню Файл •
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены.
> Замените фрагмент Rnd_Num (он встречается в тексте кода два раза) на любое число.
>• Дважды щелкните мышью на имени Web-страницы в программе Проводник (Ex-
plorer). Откроется окно браузера с отредактированной страницей (Рис. 8.39).
>• Убедитесь, что баннер отображается правильно и закройте окно браузера.
>• Повторите все описанные выше шаги для всех страниц, на которых вы хотите раз-
местить баннеры баннерообменной сети.
ВВ Ц
Адрес. Шу http://www.ile.nj Jjjj В Перепоя |
АРХИ1 НОВОСТЕЙ I •
• j ВОПРОС дна
в Что нов ого в RLE ? о Зарегистрировать новый аккелгкт
о Вход по безопасному ПРОТОКОЛУ https
© @©©
9УТЯ • инФс-ц>итр
I hom< I f-mait 1 пом<и I KJPTJ CJMTJ I
AdRiver
Рис. 8.40. Ввод номера участника и пароля для входа в баннерную сеть
428 Создание Web-сайтов
D / Г BANNER
IV.C. NETWOIK
•
ШШШШЕЕЕЛЕШШИШМШ
шшшшшшшшшшшшшшшшшшшшшвш шшшж
{Главное меню
•1®
Ф ВЫБОР КАТЕГОРИИ САЙТА АККА УНТ #45477
Авто / М о ю +
Бизнес и Компании ±
Игры +
Интернет сервис ±
Интернет-торговля +
Искусство и культура ±
•
Кино и Телевидение +
Компьютеры +
Люди ±
Медицина и здоровье +;
Музыка и радио ±
Наука и Образование +
Прочее +
Развлечения, отдых +
Страны и города, путешествия +
СМИ / Интернет периодика +
Спорт +
Хобби +
| Ф Интернет
1
Рис. 8.41. Первая страница внутреннего раздела участника баннерной сети
Когда вы находитесь внутри раздела для участника сети, вам предоставляется множест-
во возможностей по управлению вашими баннерами, показами баннеров на вашем сайте,
а также по получению статистики по страницам вашего Web-сайта.
Теперь попробуем добавить в систему собственные баннеры, рекламирующие ваш
Web-сайт.
Адрес | Д bttp://wv»w.rle.tii:808a/cgi-tiin/manager.cgi
Поле ALT • это текстовая строка, которая будет видна на месте баннера
до того, как он загрузится. Данная возможность реализована только на
сайтах, использующих для показа баннера новый расширенный код (код
с возможностью показа HTML баннеров).
добавить баннер
Ц» Интернет
щ http://www.rie-ru:8Dao/cgi-binAnanagef,cgi
[Главное меню
Адрес Щ} http://w4ww.rle.ru:8080/cqi-bin/manoger.cgi
сохранить изменения ы
Для того, чтобы закачать баннер, надо нажать кнопку BROWSE, выбрать
баннер на локальной машине, затем нажать на пиктограмму "закачать"
После этого баннер будет проверен и результат проверки появится на
экране.
Если вы не видите кнопку "BROWSE" - это значит, что ваш броузер не
поддерживает закачку файлов. Используйте Netscape Navigator версии
3.0 или выше, или Internet Explorer версии 4.0.
Выберите файл: | || Обзор...
ТГР: Поле ALT - это текстовая строка, которая будет видна на месте
баннера до того, как он загрузится. Данная возможность реализована
только на сайтах, использующих для показа баннера новый расширенный
код (код с возможностью показа HTML баннеров).
> В поле Дата старта (Рис. 8.43) впишите дату, с которой вы хотите начать показ бан-
неров, например 01.10.2004 00:00:00.
Дата может быть текущая, если вы хотите начать показ своих баннеров немедленно, или
отдаленная, если вы хотите сначала накопить достаточное число показов чужих баннеров.
> Прокрутите страницу и нажмите кнопку Обзор (Browse), расположенную в средней
части страницы (Рис. 8.44). На экране появится диалог Выбор файла (Рис. 8.45).
gbanner1.gif
" index hlml
pnrt .html
par2.html
par3.html
slntya.html
> Откройте папку, в которой вы разместили готовые баннеры, выберите файл с нуж-
ным баннером и нажмите кнопку Открыть (Open). На экране появится сообщение
о том, что баннер принят системой и отправлен на проверку (Рис. 8.46).
Раскрутка вашего Web-сайта в Интернете 431
j Адрес |ф hWp://ww».rla.ru:8080/cgi-bin/tetchitcg
В Готово Инт
Рис. 8.46. Сообщение об успешной загрузке файла баннера в систему
На этом процесс добавления баннера закончен. Если вы хотите добавить в систему другие
баннеры, то в открывающемся списке снова выберите пункт Добавление нового баннера
и повторите всю последовательность действий, но уже для другого файла с баннером.
.—гг.
Оровив Вид Избранное Серви
сегодня; 13
всего: 1064
сегодня: 0.00
о5щее: 0.38
В / С BANNER
•В
| Главное меню *1 ©
. . . ^
ЯН
сегодня: 11 сегодня: 0 сегодня:
вчера:_ 4 вчера: _ 0 вчера. 0.00%
в«го: 338 всего: 0 общий: 0.00%
а Готово i !•>'чтерввт
Pwc. 8.48. Страница для управления показами баннеров в баннерной системе (начало)
Раскрутка вашего Web-сайта в Интернете 433
1Щ
Ш Вкгаоч ен
Ваша собака слушается вас?
G Удалить
С^арий
,7!°'^f'"t!in'VI'U>'-Ul u j W
mmj»
сегодня: 1_1 сегодня. 0 сегодня: Р-Р?И
вчер»: 5 вчера. О вчера. . 0.00е/»
всего: 336 всего: 1 общий: 6.30*/о
;( Г
/"мс. 8.49. Страница для управления показами баннеров в баннерной системе (окончание)
15-1210
434 Создание Web-сайтов
МштшШашшкшшшшшш/шшшшшшшишшшшш
9>вйл Правка йии избранное Сервис Справка
О включить фильтр
С Разрешить Показ баннеров следующих аккауктов на моем csftre
© Запретить показ баннеров следующих зккаунтов на моем сайт«
Рис. 8.50. Страница для настройки показов чужих баннеров на вашем сайте
> Сбросьте флажки напротив типов баннеров, которые вы не хотели бы видеть на сво-
ем сайте. Например, вы можете сбросить флажки напротив всех типов, кроме Про-
стых графических. Тогда баннеры, использующие технологии CGI, JavaScript, Flash
и Java, на вашем сайте показываться не будут.
>• Сбросьте или оставьте установленным флажок напротив пункта Открывать новое
окно. В зависимости от этого сайт, загружаемый по щелчку мышью пользователя на
баннере, будет загружаться либо в текущее окно браузера, замещая собой страницу
вашего сайта, либо открываться в новом окне, оставляя окно со страницей вашего
сайта неизменным.
>• Нажмите кнопку ©I возле надписи Сохранить изменения, чтобы сохранить в систе-
ме сделанные вами настройки.
Вы также можете запретить показ на своем сайте баннеров вполне определенных ресур-
сов. Список ресурсов с их номерами можно получить, нажав на соответствующую ссыл-
ку в разделе Фильтр показов на приведенной странице (Рис. 8.50). Это может быть ра-
зумным, если среди сайтов, реклама которых будет размещаться на ваших страницах,
есть сайты со сходной тематикой. Чтобы ваш пользователь не ушел к «конкуренту»,
имеет смысл запретить демонстрацию баннеров подобных сайтов у себя.
> Введите через пробел в специальном поле номера сайтов, показ рекламы которых вы
хотите запретить на страницах вашего Web-сайта.
>• Установите флажрк Включить фильтр.
v Нажмите кнопку ф возле надписи Сохранить изменения, чтобы сохранить в систе-
ме сделанные вами настройки.
Раскрутка вашего Web-сайта в Интернете 435
Статистика Web-страниц
Участие в системах баннерного обмена дает дополнительный плюс: загрузка каждой
страницы вашего Web-сайта с размещенным на ней баннером тщательно учитывается
баннерной системой, а потому система получает полную информацию для сбора стати-
стики посещаемости вашего сайта. В данном случае баннеры, размещенные на каждой
странице вашего сайта, выступают как своеобразные счетчики посещений.
Статистика аналогична той, которую выдают своим пользователям рейтинговые систе-
мы и специальные системы учета статистики посещений.
v Выберите пункт Статистика Web-страниц в открывающемся списке и нажмите кноп-
ку @. В окно браузера зафузится соответствующая страница системы (Рис. 8.51).
^ <>П«р«сод
Главное меню
"
>
1
Уникальных пользователей всего:
Средняя продолжительность просмотра.
"in
751.90
* Средняя прслолжнтельность сессии: 1019 41
* Среднее число страниц за сессию.
1 ш
Среднее число показов в сутки:
ш15 33
""" 1710.60-
' Среднее число сессий за сутки.
1
Среднее число пользователей в сутки:
» Нс-вьк пользователей за вчера. 9
15"
436 Создание Web-сайтов
• Гостевая книга. Это раздел, на страницах которого посетителям предоставляется
возможность оставлять записи с мнением о содержании сайта в целом и отдельных
его статей. Во многих гостевых книгах есть возможность для автора сайта под, каж-
дым замечанием посетителя помещать свой ответ.
• Форум. Этот раздел представляет собой расширенный вариант гостевой книги. В нем
есть возможность обсуждать отдельные темы, связанные с тематикой сайта, причем
сообщения в форуме группируются по темам обсуждения для удобства чтения.
• Чат. Это специальный раздел сайта, предназначенный для разговоров посетителей в
реальном времени.
Организация гостевой книги, форума и чата может значительно повысить посещаемость
вашего сайта. Иногда случается так, что посетители постоянно посещают какой-либо
ресурс, предпочитая его сходным по тематике, только потому, что на его форуме прохо-
дят любопытные дискуссии, а в чате постоянно можно встретить интересных людей.
Разумеется, чтобы все эти разделы привлекали посетителей, вам, как владельцу ресурса,
необходимо приложить некоторые усилия. Если вы завели гостевую книгу, то желатель-
но почаще отвечать на критические замечания, оставленные посетителями. Необяза-
тельно отвечать на все подряд, но самые интересные вопросы и замечания пропускать,
конечно, никак нельзя.
Сложнее сделать интересным форум. Очень часто владельцам только что открывшихся
форумов приходится самим начинать новые темы для обсуждения, которые могу" быть
интересны многим, в надежде на продолжение дискуссии, а то и выступать под вымыш-
ленными именами, продолжая ее. Необязательно прибегать к таким способам, достаточ-
но на первых порах поддерживать все темы, которые начинают посетители, и отвечать
по мере сил на вопросы, которые они будут задавать. Через некоторое время уже не вы
будете помогать форуму, а форум будет помогать росту популярности вашего сайта.
Самой сложной является поддержка чата в самом начале его работы. Нередка ситуация,
когда посетителей в чат заходит много, но делают они это в разное время, не пересека-
ясь друг с другом. Естественно, когда в чате не с кем поговорить, ни один посетитель не
будет находиться там дольше нескольких минут, а значит, следующий посетитель тоже
рискует застать чат пустым. Чтобы этого не произошло, вам, как владельцу чата, имеет
смысл установить своеобразное дежурство - то есть находиться в чате столько вргмени,
сколько вы сможете. Если у вас есть друзья, которым интересна тематика вашего сайта,
можно попросить их «подежурить» на первых порах в чате, поддерживая разговор со
всеми, кто туда заходит. Когда каждый посетитель вашего сайта будет знать, ч-i-o ваш
чат не пустует и там можно всегда поговорить с единомышленниками, в чате сформиру-
ется свой круг общения. Вы сможете познакомиться с множеством людей, которым ин-
тересна тема сайта, причем некоторые из них, возможно, станут вашими добровольными
помощниками по поддержанию и расширению вашего ресурса. Ну и конечно, завсегда-
таи чата будут постоянно заходить на ваш сайт, а новички, благодаря чату, смогут полу-
чить теплый прием и ответы на вопросы, связанные с темой сайта.
Конечно, не всегда следует устраивать на своем сайте сразу и гостевую книгу, и форум, и
чат, но хотя бы один из перечисленных разделов желательно организовать. Какой именно -
это зависит от тематики вашего сайта. Гостевая книга будет полезна практически любому
сайту, форум будет уместен на тематических сайтах, которые часто обновляются, чат хоро-
шо приживется на развлекательных ресурсах с относительно высокой посещаемостью.
Раскрутка вашего Web-сайта в Интернете 437
Самый простой способ открыть на своем сайте гостевую книгу, форум или чат - это
воспользоваться услугами специальной бесплатной службы, которая поможет вам их
организовать. В этом случае форум или чат физически будут размещаться на сервере
данной службы, но для посетителя они будут являться частью вашего сайта.
Рассмотрим подробнее создание интерактивных разделвв для вашего сайта с использо-
ванием бесплатных служб.
Медиа %: Щ ' \J
с. И ] hUp://www.guestbook.iu/iegislei/regislraUan.php J
. * ? ? " ^ ~ . - - - ... - • ' - -- - • .•• " м •- . ' ' ..••-.•...••. •_ .
гостевые
КНИГИ
НАЗЛГПЛВНУЮ РЕГИСТРАиНЯ ТЕХНИЧЕСКИЙ ЦЕНТР ПОМОЩЬ
Р А Т А П Ш ПЕТЕК/1
, СПРАВОЧНИК ВЕБМАСТЕРЛ OCEPI
Регистрация
ОТЛИЧНЫЕ (Я
Guestbook предлагает вам саг^ые лучшие гостевые книги IT СПЕЦИАЛИСТ!
бесплатно! Дайте возможность посетителям евших
страниц оставить свое мнение о вашей работе! Получайте
сообщения от посетителей ваших страниц, не имеющих
.ie>. l n l w n e t .
Рис. 8.52. Первая страница регистрации (начало)
) hHp://www.gue»tbook.iuAegi»terAegirifation-php 7 Д В Порекад
Чтобы получить Гостевую Книгу, сначала...
придумайте для нее имя.
Читать
: После прочтения Правил пользования чслчгами Г
: К,ниг ул'лд.дцр^одкги, выберите уникальное алфавитно-
: цифровое имя для своей книги Помните, что в имени
: можно использовать только латинские буквы и цифры. Это
- имя также будет вашим именем, как владельца книги.
Готово I; Очистить
;[jjtrtemel
gj ^ И а б р а н н о . ф Медиа
.SDtt
_ Ц { 3 Партам [ Шя
Каталог самим .[ Заукоаыа SI4S Огирытки
гостевые
КНИГИ D A T A H 3 Q питомник.WEB
о
НА ЗАГЛАВНУЮ Pt t ИС1РАШ1Я ТЕХНИЧЕСКИЙ ЦЕНТР ПОМОЩЬ СПРАВОЧНИК ВЕБМАСТЕРА
№'
Рис. 8.54. Страница с регистрационной формой системы Guestbook.RU (начало)
Q н«« . 0 •Л
J3 В п«
Прйколм | Каталог сайтом ;Г; Зруковтд SMS J^|| OTKI>»ITKH
гостевые
КНИГИ D A T A Q X Q ПЕТЕРЛИИК-WEB
о
НЛ ЗАГЛАВНУЮ | РЕГИСТРАЦИЯ ! ТЕХНИЧЕСКИЙ U t H I P I ПОМОЩЬ ! СПРАВОЧНИК ВЕБМАСТГРА
GuestBookiu
TPEBYTOTCJ
Вы зарегистрированы! ОТЛИЧНЫЕ 4
IT СПЕЦИАЛИСТ!
Н и ж е приведен пример кода, который надо вставить в
вашу страницу, чтобы Гостевая Книге заработала. Просто
скопируйте и вставьте его, это так просто!
Ж '""•""...
ш
Рис. 8.55. Сообщение об успешной регистрации
> Запишите для себя, чтобы не забыть, имя вашей гостевой книги и пароль.
Через несколько секунд на указанный вами при регистрации адрес электронной почты
придет письмо с повторением сообщения об успешной регистрации, а также кода, который
нужно вставить в свои страницы для появления на них ссылок Оставить запись в книге и
Читать книгу.
440 Создание Web-сайтов
Вставим код для обращения к гостевой книге на страницу.
>• Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows.
> В главном меню выберите команду Программы • Стандартные • WordPad (Pro-
grams • Accessories • WordPad). Откроется рабочее окно программы WordPad.
v Выберите команду меню Файл • Открыть (File • Open). На экране появится диалог
Открыть (Open).
v В открывающемся списке Тип файлов (File types) выберите строку Все документы (*.*)
(All types (*.*)). В списке файлов отобразятся файлы всех типов (Рис. 8.19).
>• Выберите папку, в которой размещены страницы вашего сайта и откройте html- файл
страницы, на которой вы хотите вставить ссылки для добавления и чтения записей
гостевой книги, например файл index.html.
> Не закрывая программу WordPad, откройте вашу почтовую программу и откройте
письмо от администрации службы гостевых книг с указанием текста кода, который
необходимо включить в код страниц.
> Выделите текст кода, начиная со строки < i — Начало кода Гостевой Книги —>
И заканчивая строкой < ! — Конец кода Гостевой Книги —>.
>• Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору),
чтобы скопировать выделенный фрагмент в буфер обмена.
>• Не закрывая почтовую программу, перейдите в программу WordPad, в которой от-
крыт html-документ для редактирования.
Установите текстовый курсор на пустую строку после текста, который должен пред-
шествовать ссылке на гостевую книгу, и вставьте скопированный ранее фрагмент ко-
да, используя команду меню Правка • Вставить (Edit • Paste). Код будет вставлен в
текст страницы (Рис. 8.56).
Сохраните исправленный файл Web-страницы с помощью команды меню Файл •
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены.
Подключитесь к Интернету.
Дважды щелкните мышью на имени Web-страницы в программе Проводник (Ex-
plorer). Откроется окно браузера с отредактированной страницей (Рис. 8.57).
Убедитесь, что ссылки отображаются правильно, и закройте окно браузера.
Раскрутка вашего Web-сайта в Интернете 441
И geolon - WoidPad
йл Правка Вид В ставка Ф ормат ^правка
нэп
<br>
</html>
Для вывода справки нажмите <F1 >
>• Повторите операцию вставки кода для других страниц, на которых вы хотите видеть
ссылки на свою гостевую книгу.
Назад •
©- f J j | . P Поиск ^Избранно, ф Медиа
Адрес: Ш McpV/www gueilbook.iu/?u»ei-BEOTDNtaclion4how
J 3 ВП"Р™«
Приколы |[ Каталог сайта» |;' Зеукорме SMS^ |{ ' Открыт
гостевые
КНИГИ
g«oton
Страницы:1
Е
В гостевой книге несколько записей, причем самые поздние из них отображаются пер-
выми. Ответим на некоторые их них.
> Наберите в адресной строке браузера адрес сайта гостевых книг http://www.guestbock.ru.
В окно браузера загрузится главная страница сайта (Рис. 8.59).
Раскрутка вашего Web-сайта в Интернете 443
книги
гостевые
ОАТАЕГЩ ПЕ
о
I НДЗАГПЛВИУЮ ' ЩИСГРДЦИЯ I гекНИЧЕСКИИЦШТР ПОМОЩЬ СПРАВОЧНИК ВЕБМАСТЕРА
94217
ОДИННЭДЦЗТИ ЯЗЫКОВ.
г.г
Рис. 8.59. Главная страница сайта Guestbook.RU
Qн
Адрес; tp:y7www.gueitbook.iu/*yttem/
» УДАЛИТЬ КНИГУ
Логик 1
Пароль: \ггз^^т^
J1 Если вы звбыяй свой пароль, но помните имя гостевой книги -
введите его здесь и на емейл, который вы указывали при регистрации
придет письмо с вашим паролем!
] Зайти снова
Получить Пароль
-. — |
]Г_Т
т
Рис. 8.60. Страница настроек гостевой книги
D A T A L l i l l ПЕТЕРИИНК-WI:
Введите имя (логин) и пароль и нажмите кнопку Войти. В окно браузера загрузится
страница для редактирования гостевой книги (Рис. 8.62).
гостевые
КНИГИ D A T A D E O nETEPHUHK.WEB
о
НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ ТИПИЧЕСКИЙ ЦЕНТР ПОМ01Ш I СПРАВОЧНИК ВШМАСТЕРД
> Если вы хотите удалить некоторые сообщения, то установите флажок Удалить эту
запись, расположенный в начале соответствующего сообщения.
> Напишите ответы под нужными сообщениями в полях ввода Ваш Ответ (Рис. 8.63).
Раскрутка вашего Web-сайта в Интернете 445
т*
-]П|х
Адрес; Щ М1р://«W«.gue*U)Ook.ru/iVJtem/?actioiTed.t
*Й*
messages
Р ^ Г Медиа -@
£• % • * Q
r^j В Переход Lnks "
IP-адрес: 80.95.35131 I
Ваш Ответ:
Да, конечно
Внести Изменения |: :
1.
|в Мели
«.т, , f
З'айп Правка
книги
гостевые
gtoton
Создаем форум
Бесплатные форумы для персональных Web-сайтов предлагают следующие российские
службы:
• WebForum.ru (http://www.webforum.ru)
• Форумы ©mail.ru (http://talk.mail.ru)
Создадим форум для Web-сайта с помощью службы WebForum.ru.
> Наберите в адресной строке браузера адрес http://www.webforum.ru. В окно браузера
загрузится главная страница сайта (Рис. 8.65).
•Q 4® | 13 '
Адрес, | ^ 1 http://www.webforum.nl J 3 В Псре«од | Links
I HOIOCT» | l l t a i | Г»»«та Утро | Спорт | № « u | ТВ | Работа | Почта | »орум | Услуги | Информер
mEBFORUM.RU
C КОНФЕРЕНЦИЙ1
H PLUI
В.Лутин
И ПОСТАВЬ НА СВОЙ САЙТ!
LSI
предлагает
MWW.ltn.RU
Щ Ошибка на странице.
UUEBFDRLMRU
СЕР8ИС:КОНФЕРЕНЦИЙ. . .
"WSZZZZT
Webforum Plus p
нинфвранцпй * WabFo
Кликнув по этой кнопке. Вы сможете ознакомиться с
возможностями платной версии и подать ззяьку-
В.Путин
1
• .:: •'•;''' ( Ознакомиться с Weblofurti S'ardatd i LBN.RU
предлагает
изменить
систему
власти
©"
*дрес, [ И hllp://»w..»»bloru».ru/ieg.ph;?
шгинг j Нокогш | С New* | Газета V*po | Спорт | ПОГОАЙ | Ты | РЛЙОТ* 1 Почт» | Форум | Успуги | Ииформ«р
g И "«
UUEBFORIMRU
СЕРВИС КОЙФ1ЕРЕНЦЙЙ .•'•.••:.•••: •'••:..•::• •.•::•.•;•••••••; •. : . : • : • • • : :•.•••:••• • •::
- И01ССТК СЕМЕМ
06.09.Zt01 Запущен
Webfoium Slandaid является основной моделью для построения
всех форумов HaWebfoium.ru. Главные преимущества конференций - Web Forum
Webfoium Slandaid следующие: : Plus* Вы можете закйзяги
комф«ра)<цик> «ли
Использование шаблонов для настройки дизайна несколько и мы саадад»*м
Настройка отдельным тех. параметров конференции
Размещение конференции в каталоге Webfoium
,.'.- Стабильная и быстрая работа
MediaLand
ШШШш 1
Подьэоватепь: «I III
Пароль: i 1
Q Сохранить пароль
1 ок II о™ юна 1
> Введите ваш пользовательский номер и пароль, которые вы получили при регистра-
ции, и нажмите кнопку ОК. В окно браузера загрузится страница для добавления фо-
рума (Рис. 8.71).
IWebBoafd.ru - Microsoft Internet Explorer
BIslQ
Дравка Вид Избранное Сервис Справка
Q Назад . Q . Д Поиск « ^ И з б р а н н о е
ft
mEBFDRUM.HU ЯВИВЙН
*, Логин: 34107
Interne)
mEBFORUM.RU
Форум добавлен!
Рекомендуем перейти в раздел редактирования этого Форума с помощью
соответствующей кнопки "Внешний вид Форума".
По умолчанию у Форума установлен "стандартый" дизайн.
New! При еьйоре какого-либо Форума его параметры копируются ео вновь создаваемый.
РБК: В.Пдтин
предлагает изменить
Горячая почта'
jeinte.net
РБК: В.П^тнн
Love is... Предлагает
(Жшшшитткмяит
Теперь, когда форумом можно пользоваться, необходимо на главную страницу вашего Web-
сайта вставить ссылку на адрес, присвоенный форуму при регистрации. Как сделать ссылку
с кнопки или текста было рассказано в главе о создании Web-страниц данной книги.
Администрируем форум
Чтобы поддерживать форум в рабочем состоянии, необходимо время от времени удалять
устаревшие и случайные сообщения.
>• Введите в адресной строке браузера адрес http://www.webboard.ru. Откроется глав-
ная страница сайта (Рис. 8.65).
• Щелкните мышью на ссылке Вход для зарегистрированных пользователей.
На экране появится диалог для ввода пароля (Рис. 8.70).
>• Введите имя и пароль и нажмите кнопку ОК. Загрузится страница с настройками фо-
рума (Рис. 8.75).
> Нажмите кнопку Удалить избранные сообщения. Откроется страница для удаления
сообщений (Рис. 8.76).
>• Отметьте флажками сообщения, которые необходимо удалить, и нажмите кнопку
Удалить отмеченные сообщения. Откроется страница с уведомлением об удалении
и оставшимися сообщениями (Рис. 8.77).
452 Создание Web-сайтов
I UJEBFPRUM.RU
New! При выборе каксго-либо Форума его параметры копируются во вновь создаваемый.
IB
Выполнено, но с ошибками на странице. 1 0 Interne:
швш
| WebBodid.iu - Miciosoft Internet Explorer
Q Назад Ш Й|Р П о м с к
^Избранное ^ Медиа
Адрес: Щ Mtp://wHw.webforum.ru/gbuj'indeKted.php Щ В Перех Links
mEBFORUM.RU
Обратно б е з изменений
- _ . .• .,;. . . ,- . , .. .„ ' .
liJEBFaRUM.RU
itClUATKt МЖФЕГСЯМ
Сообщения удалены!
Создаем чат
Вот адреса некоторых российских служб, которые предлагают услуги бесплатных чатов
для персональных Web-сайтов:
• CHAT.ru (http://www.chat.ru)
• chats.RU (http://www.chats.ru)
• flndex Народ (http://www.narod.ru)
Создадим чат для собственного сайта в системе Япс1ех Народ. О том, как зарегистриро-
ваться в системе Япс1ех Народ, было подробно рассказано в опыте «Создание адреса ва-
шего сайта в Интернете» главы «Размещение страниц в Интернете».
>• Наберите в адресной строке браузера адрес http://www.narod.ru. Загрузится главная
страница сайта Япс1ех Народ (Рис. 8.78).
> Введите полученные при регистрации логин и пароль в поля ввода в правой верхней
части страницы и нажмите кнопку Войти. Вы попадете в раздел Мастерская сайта
Япс1ех Народ (Рис. 8.79).
454 Создание Web-сайтов
Адрес: №{ http://narod.jpandex.ru/
Оцените р г ж л а ю ш £ р « л х к :
«32 норм*», зубная паста
JU В
tj : c
t ' - ^Uhttp://n M_igyl<MnhlirJ?rMin<j.<74«43 I H Перегон bnks '
Нин . Ш*ам •
Мастерская
>вка с&йт#
• Фотоальбом
• Доступ к Файла!
• Для фан&трр и
J *
Щ Готово
Первая российская
онлайновая ролевая игра
fader*
Нин ТЬ retire Нымд
Мастерская / Персональный чат
Чтобы посетители вашей странички могли посетить ваш чат, необходимо вставить в одну иэ ваших страниц
ссылку на адрес. http://narod.yand#x.ra/chat/chat_enter.xhtml?mychat_id= 19483902
Название чата: [_
Пароль (необязательно): \
Подтверждение пароля: [
П Отправлять e-mail при активизации чата
f Создать мат |
Дизайн
> Заполните поле Название чата, установите флажок Отправлять e-mail при активи-
зации чата и нажмите кнопку Создать чат. В окно браузера загрузится страница
с адресом созданного чата (Рис. 8.81).
Адресjj
а &|/)п° »><•«-
c^.»Mi»nCCWa»«.loin«Jo«t^M£I^CCP»d2-tCCSlJliMH И Переча» |
Шменення сохранены
Чтобы посетители вашей странички могли посетить ваш чат, необходимо вставить в одну иэ ваших страниц
ссылку на адрес: http://narod.yandex.rWchat/chat_enter.xhtml?mychat_id= 19483902
Дизайн
м in
Рис. 8.81. Страница с адресом созданного чата
456 Создание Web-сайтов
На этой странице вы можете изменить название чата и пароль для входа в него.
Через некоторое время на указанный вами при регистрации электронный адрес придет
письмо с напоминанием идентификатора и пароля.
> Запишите для себя пароль и адрес вашего чата, чтобы не забыть их.
Теперь зайдем на созданный чат.
>- Щелкните мышью на ссылке Войти в чат (с возможностью администрирования)
или наберите в адресной строке браузера адрес вашего чата. Откроется страница, на
которой можно произвести настройки чата (Рис. 8.82).
111 В "»
li
В ход в чат
Выберите Участники
себе имя
Название
tornados ("брсрнвльнь1й)
J3
Р?ГИ
обновления' • Ь|1И"
Количество
выводимых 12Q jjjj
строк
ЕЗ Использовать JavaScript
Войти в чет I
arod.ru
tornados
Hndex
представляют:
| Отправить | Обновить || Настройки | Выйти |
ЛИl
Рис. 8.83. Рабочее окно чата на сайте Япйех Народ
Удаление из чата - это, конечно, крайняя мера. Перед этим нарушающего правила поль-
зователя можно предупредить, «выписав» ему штраф. Штраф заключается в том, что
вход в чат для нарушителя будет закрыт на три дня. При отметке пользователя флажком
и нажатии кнопки Штраф, он получит уведомление о штрафе (Рис. 8.84).
Вас оштрафовали.
Бы оштрафованы администратором чата. До 17.09.2004 23:38 вход в чат для вас будет закрыт.
В каждом чате установлены свои правила, грубое или систематическое нарушение которых приводит к
штрафу. Ознакомьтесь, например, с правилами чата «Давай познакомимся» (эти правила также
рекомендуются для всех чатов на Karod.ru).
В чате запрещается:
За соблюдением правил в чате следят администраторы. В случае нарушений участники чата могут быть
оштрафованы или удалены из чата. Администратором в чате выступает владелец сайта, на котором
находится чат. или координатор сообщества (если это чат сообщества).
Выйти
в Москве
• «Молодая гвардия» Б. Полянка ул., д. 28. М «Полянка»
• «Библио-Глобус» Мясницкая ул., д. 6. М «Лубянка»
• «Московский дом книги» Новый Арбат, д. 8
• «Торговый дом Москва» Тверская ул., д. 8. М «Тверская»
• МКТП «Мир» на Соколе Ленинградский пр-т, д. 78. М «Сокол»
• Магазин «Ладожский» Ладожская ул., д. 8. М «Бауманская»
• Магазин «Новый» шоссе Энтузиастов, д. 24/43.
М «Авиамоторная»
• «Дом книги в Медведково» Заревый пр-д, д. 12. М «Медведково»
• «Дом технической книги» Ленинский пр-т, д. 40.
М «Ленинский проспект»
• «Дом книги в Сокольниках» Русаковская ул., д. 27. М «Сокольники»
• «Музыкальный парк» Новочеркасский б-р, д. 41, к. 1. М «Марьино»
• Магазин «Русский Путь» Нижняя Радищевская ул., д. 2.
М «Таганская»
• Сеть магазинов «Новый книжный»
в Санкт-Петербурге
• «Дом книги» Невский пр-т, д. 62
• «Новая техническая книга» Измайловский пр-т, д. 29
• Книжный клуб Пр-т Обуховской обороны, д. 105
в ДК им.Крупской
ЩВЯВНШШВШШШЯШШККЕШШ&*'