Академический Документы
Профессиональный Документы
Культура Документы
В. Н. Печникова
Создание
Web-страниц и Web-сайтов
Щ Ш
i // 7 /4 I
«Издательство Триумф»
Москва
УДК 004.738.52(075.4)
ББК 32.973.202я78-1
С54
Г Л А В А 7. Создание Web-сайта
с помощью Microsoft FrontPage 2003 ..252
Опыт №1. Знакомство с рабочими окнами программы 253
Опыт №2. Создаем макет Web-сайта 264
Опыт №3. Создаем текст и списки. Бегущая строка 275
6 Создание Web-сайтоЕ
Web-страница изнутри
Как известно, основной объем информации, доступной в сети Интернет, размещается во
«всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной
гигантской библиотеке. В этой библиотеке информация представлена в виде связанных
между собой документов, которые называются Web-страницами. Каждая Web-страницд
может содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие стра-
ницы могут размещаться на компьютерах в любой части света. При подключении к
WWW вы получаете равный доступ к сведениям, разбросанным по всему миру. Собра-
ние страниц, объединенных некоторой общей темой и помещенных, как правило, на од-
ном компьютере, называется Web-узлом или сайтом. Узлы Web подобны книгам, а Web-
страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а такж•.;
программы, обеспечивающие поддержку сайтов, называются серверами. На одном сер-
вере может размещаться множество Web-узлов или сайтов.
Просмотреть любую Web-страницу можно с помощью специальных программ - браузе-
ров, наиболее популярные из которых - Internet Explorer, Opera, Mozilla и Netscape.
На Web-страницах обычно, кроме основного текста, всегда присутствуют выделенные
другим цветом и подчеркнутые слова или фразы и активные изображения, которые из-
меняются при установке на них указателя мыши. Например, кнопка может стать рельеф-
ной или изменить свой цвет. Это - гипертекстовые ссылки, предназначенные для связи :
другими страницами, раскрывающими содержание ссылок. Если щелкнуть мышью на
такой ссылке, то произойдет переход на другую Web-страницу, имеющую отношение к
рассматриваемой или родственной теме, даже если страница помещена на сайте в другой
части планеты.
КНИГИ ОТ ИЗДАТЕЛЕЙ
Телефон для оптовых покупателей (095) 720-07-65
ff (^ 1JEE S 3
Автор(ы): А. Ю. Гаевский
Бестселлер - В книге изложены основы работы на
персональном компьютере. Подробно и доступно описана
«линейка» операционных систем Windows 9S/98/ME/2000,
подробнее ...
> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид •
Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом
этой страницы на языке HTML (Рис. 1.2).
10 Создание Web-сайтов
<script Ianguage-"vbscr1pt">
sub Document_onReadyStateChangeO
I f document.readystate - "complete" Then
w - 400
h - 200
1 - (window, screen, width - w) / 2
t - (window.screen.height - n) / 2
window.open "popup.asp , "„blank", 'left-" & 1 & "px, top-" Л t & "pxl
End I f
End sub
</script>
Возможно, код, который вы увидите на своем экране, будет несколько отличаться от ко-
да, показанного на рисунке. Вид Web-страниц в Интернете очень часто меняется. Но для
нас сейчас это не существенно.
HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собог
довольно простой набор команд, описывающих структуру документа. Этот язык размет-
ки позволяет выделить в документе отдельные логические части - заголовки, абзацы,
таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирова-
ния. Конкретный вид форматирования определяет сам браузер при чтении документа, я
именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Язык 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;
• необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним
или несколькими атрибутами, например, align="center";
• правой угловой скобки >.
Таким образом, открывающий тег <html>, стоящий в начале документа HTML и озна-
чающий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>,
находящийся в конце Web-документа, кроме указанных элементов содержит также
символ слэш /, означающий закрывающий тег и указывающий на конец документа.
Тег < s c r i p t l a n g u a g e = M v b s c r i p t " > означает начало кода встроенной в документ
программы-сценария. Этот тег содержит, кроме имени s c r i p t , атрибут language со
значением "vbscript", означающий, что сценарий написан на языке vbscript.
</head>
<body>
</body>
</html>
Структура HTML-документа содержит следующие обязательные элементы:
• теги <html> и </html>, которые отмечают начало и конец документа;
*^ заголовок, ограниченный тегами <head> и </head>;
^ тело, ограниченное тегами <body>... </body>.
Для создания Web-документов нам понадобится любой браузер - Internet Explorer, Opera,
Firefox или Netscape, а лучше все четыре, так как многие элементы HTML по-разному
отображаются в разных программах просмотра, и весьма желательно контролировать эту
разницу. Браузер Internet Explorer входит в состав операционной системы Windows, а по-
следние бесплатные версии браузеров Opera, Firefox и Netscape вы найдете в папке
\Soft\Browsers компакт-диска, прилагаемого к этой книге. Их также можно скачать из
Интернета с сайтов www.opera.com, www.firefox.com и www.netscape.com.
Кроме браузера нам нужен будет любой текстовой редактор, например, Блокнот
(Notepad) из Windows. Программа Блокнот (Notepad) нужна для подготовки HTML-
файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструмен-
тов мы создадим сайт на своем локальном компьютере, после чего поместим его на один
из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступны-
ми всему миру.
В качестве примера подготовим Web-страницы некой фирмы. Назовем ее «Компа-
ния ГЕОТОН», допустим, что она работает в области автоматизированных систем
управления. Цель сайта — рассказать миру о компании, сфере ее деятельности, найти
партнеров и заказчиков.
Для файлов нашего сайта нужна отдельная папка.
> Создайте папку с именем Web на любом жестком диске вашего компьютера.
Теперь запустим программу Блокнот (Notepad) и приступим к работе.
>• Откройте программу Блокнот (Notepad), нажав кнопку Пуск (Start) на Панели задач
(Taskbar) и выбрав из появившегося меню команду Программы • Стандартные •
Блокнот (Programs • Accessories • Notepad).
Вы можете использовать любой другой текстовый редактор. Однако в этом случае сле-
дует сохранять файл как простой текст, чтобы избежать включения в Web-документ по-
сторонних символов форматирования.
Сначала введем в окне программы Блокнот (Notepad) теги, определяющие структуру лю-
бого HTML-документа. Напомним, что в HTML-коде допускается использовать любой
регистр символов - верхний или нижний.
> Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме
закрывающего тега < / t i t l e > , в новой строке.
Для ввода парных тегов вы можете использовать операции копирования и вставки через
буфер обмена Windows с последующим добавлением символа слэш /.
14 Создание Web-сайтов
<html>
<head>
<titlex/title>
</head>
<body>
</body>
</html>
Напомним, что первый <html> и последний </html> теги означают соответственно на-
чало и конец документа, элемент <head>.. .</head> определяет заголовок Web-
страницы, элемент <body>.. .</body> - тело документа, а в элементе < t i t l e >
< / t i t l e > мы сейчас укажем название Web-страницы.
>• Между открывающим < t i t l e > и закрывающим < / t i t l e > тегами вставьте назва-
ние документа - Компания ГЕОТОН. Этот элемент должен выглядеть следующим
образом:
<ЫЬ1е>Комлания rEOTOH</title>
Напомним, что название Web-страницы должно быть коротким и в максимальной степе-
ни отображать ее содержание.
Наша следующая задача - вставить в тело документа между тегами <body>.. .</body>
короткий текст-приветствие посетителям Web-страницы.
>• Вставьте пустую строку между тегами <body> и </body> и введите в ней следующий
текст:
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о на-
шей деятельности, о программных продуктах нашей компании и об оборудо-
вании, которое мы производим
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполня-
ется с помощью атрибутов bgcolor и t e x t открывающего тега <body>. Для определе-
ния цвета как значения атрибутов существует два варианта:
• словесное указание имени цвета, например, white (белый). В языке HTML преду-
смотрено шестнадцать таких имен;
i/ цифровое обозначение в шестнадцатеричной записи, например, n # f f f f f f " - белый,
которое указывает, каким образом цвет формируется из основных цветов - красного,
зеленого и синего.
Конечно, словесное указание цвета более удобно и понятно. С другой стороны, числовые
обозначения дают больше возможностей, так как позволяют указать практически любой
из 16 777 215 оттенков, тогда как словесные обозначения ограничены только шестнадца-
тью цветами.
Полный перечень цветовых имен и их цифровых эквивалентов приведен в Приложении 2
«Краткий справочник по HTML» компакт-диска. Здесь же перечислим только некоторые
цветовые имена: b l a c k (черный), gray (серый), red (красный), green (зеленый), aqua
(голубой).
Web-страница изнутри 15
Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для
текста - желтый (yellow).
>• Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yellow. Этот
тег должен принять вид:
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так, как на Рис. 1.3.
<head>
ы
<1Ше>Компания ГЕОТОН<ЛШе>
</head>
<body bgcolor=blue text=yellowj»
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей
деятельности, о программных продуктах нашей компании и об оборудовании, которое
мы производим
</body>
</html>
в
Рис. 1.3. Код HTML первой Web-страницы в окне программы Блокнот (Notepad)
Кроме указания цвета, для фона Web-страницы можно использовать также заранее под-
готовленный рисунок. Но об этом мы поговорим в дальнейшем.
Теперь документ следует сохранить.
> В окне программы Блокнот (Notepad) выберите команду меню Файл • Сохранить
(File • Save). На экране появится диалог Сохранение (Save As).
>• Откройте созданную ранее папку Web, в которой должны сохраняться все файлы сайта.
> В поле ввода Имя файла (File name) введите geoton.html - так мы назовем этот файл.
Обратите внимание: вы обязательно должны указать расширение имени файла .html или
.htm, чтобы браузер смог его открыть.
v Нажмите кнопку Сохранить (Save). Диалог Сохранение (Save As) закроется. Файл
будет сохранен в указанной папке, и его имя появится в заголовке окна программы
Блокнот (Notepad).
Теперь можно просмотреть результаты нашей работы.
Не закрывая, сверните окно программы Блокнот (Notepad), нажав кнопку | | в правом
верхнем его углу.
Откройте с помощью программы Проводник (Windows Explorer) папку Web, в кото-
рой вы сохранили файл geoton.html, и дважды щелкните мышью на его значке. Будет
запущен браузер, установленный по умолчанию, и в его окне откроется документ
geoton.html (Рис. 1.4).
16 Создание Web-сайтов
В Done
. Щ М у Computer
а
Рис. 1.4. Текст Web-страницы в окне браузера
Как видите, в заголовке окна браузера указывается название документа, которое мы вве-
ли в элементе < t i t l e x / t i t l e > , а цвет фона и текста страницы - такие, как указаны в
теге <body>. Текст отображается в одном абзаце и выровнен влево.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на
рисунке. В таком случае выберите команду меню Вид • Размер шрифта • Средний
(View • Text Size • Medium) в браузере Internet Explorer, чтобы установить средний раз-
мер шрифта.
> Просмотрите созданный файл в другом браузере. На этом этапе работы отличия бу-
дут незаметны.
>- Не закрывая, сверните окна браузеров, воспользовавшись кнопкой [Г] в правом верх-
нем углу каждого из них.
Так как в элементе <bodyx/body> мы ввели текст без разбивки на абзацы, то в браузе-
ре он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тек-
сту более наглядный вид.
> Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).
> Нажмите клавишу [FSJ ИЛИ кнопку Ja_ - Обновить (Refresh) на панели инструментов
рабочего окна программы Internet Explorer. Файл geoton.html будет перезагружен, и
вы увидите в окне браузера, как выглядит заголовок первого уровня (Рис. 1.5).
ь.
Добро пожаловать на страничку
компании ГЕОТОН!
Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и
об оборудовании, которое мы производим
© Done ;||3 My Computer
> Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в те-
гах номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и
обновлять изображение в окне браузера.
> Когда вы закончите эксперименты, снова восстановите в файле geoton.html теги
18 Создание Web-сайтов
^ $ My Computer
В тегах < f o n t x / f o n t > может использоваться также атрибут c o l o r для указания цвета
шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рас-
смотренных ранее атрибутов, описывающих цвет фона и текста документа. Вы найдете
их в «Кратком справочнике по HTML» в Приложении 2 компакт-диска.
По умолчанию абзац с текстом Здесь Вы у з н а е т е . . . выровнен влево. Центрируем его
по горизонтали с помощью тегов < c e n t e r x / c e n t e r > . Вы можете также выровнять
абзац по правому краю страницы с помощью тегов < r i g h t x / r i g h t > или по левому - с
помощью тегов <lef t x / l e f t>.
> Вставьте теги < c e n t e r x / c e n t e r > , ограничив ими указанный абзац так, чтобы код
HTML принял вид как на Рис. 1.10.
Web-страница изнутри 21
Рис. 1.10. Код HTML после изменения размера шрифта текста и центрирования
В
Рис. 1.12. Код HTML после применения языка каскадных таблиц стилей
Как видите, язык HTML позволяет использовать разные способы стилевого оформле-
ния. Вместе с тем, применение языка каскадных таблиц стилей CSS является более
предпочтительным.
Мы рассмотрели только один вариант использования языка таблиц стилей, когда определе-
ние стиля располагается непосредственно внутри тега элемента, который вы описываете.
24 Создание Web-сайтоз
Это делается с помощью атрибута s t y l e , используемого с большинством стандартных
тегов HTML. Но есть и другие варианты использования CSS.
В стандартном HTML, без применения таблиц стилей, для присвоения какому-либо
элементу определенных свойств, таких как цвет, размер, положение на странице и т. п.,
приходится каждый раз описывать эти свойства для каждого элемента, даже если на
одной странице должны располагаться десятки таких элементов, не отличающихся
один от другого. Приходится десятки раз вставлять один и тот же фрагмент
HTML-кода в страницу, увеличивая размер файла и время его загрузки из сети.
Таблицы стилей действуют другим, более удобным и экономичным способом. Для при-
своения какому-либо элементу определенных характеристик вы должны один раз опи-
сать этот элемент и определить это описание как стиль, а в дальнейшем просто указы-
вать, что элемент, который вы хотите оформить соответствующим образом, должен при-
нять свойства стиля, описанного вами. Удобно, не правда ли?
Более того, вы можете сохранить описание стиля не в тексте вашей Web-страницы, а в от-
дельном файле - это позволит использовать описание стиля на любом количестве
Web-страниц. И еще одно, связанное с этим преимущество - возможность изменить
оформление любого количества страниц, исправив лишь описание стиля в одном отдель-
ном файле.
Кроме того, язык таблиц стилей позволяет работать со шрифтовым оформлением стра-
ниц на гораздо более выс'оком уровне, чем стандартный HTML. Обо всем этом более
подробно мы поговорим в следующих главах.
Описание основных элементов языка каскадных таблиц стилей CSS вы найдете в При-
ложении 3 компакт-диска.
В настоящее время язык CSS насчитывает довольно большое количество свойств элемен-
тов HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с
максимальным количеством браузеров элементы CSS - свойства шрифта, цвета элементов
и фона, свойства текста и границ - вы можете значительно облегчить свою работу и сде-
лать ваши Web-страницы более привлекательными в плане оформления текста.
ли для хранения файлов сайта. Файл CLOUD.GIF можно взять также из папки
\Web\ChapO1\Web компакт-диска, прилагаемого к этой книге.
>• Скопируйте файл CLOUD.GIF или любой другой файл с расширением .GIF в папку Web.
Для вставки изображения в Web-документ используется одиночный тег <img> с ат-
рибутом s r c , значение которого соответствует имени вставляемого файла или его
адресу в Интернете. С помощью необязательного атрибута <border> можно вклю-
чить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст
рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен вы-
глядеть следующим образом: •
<img src=CLOUD.GlF border=l>
;ЦД My Computer
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на
выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет ото-
бражаться черным цветом на белом фоне.
Введенный HTML-код должен иметь вид как на Рис. 1.15.
<html>
<head>
<title>4eM мы занимаемся?<ЛШе>
</head>
<body bgcolor=aqua text=navy>
<li2 align=center>4eM мы занимаемся?</Ь2>
}=/body>
</html>
>• Вставьте пустую строку под строкой с кодом <h2 a l i g n = c e n t e r > Чем мы занима-
емся? </Ь2> и введите в теле документа следующий код:
Обратите внимание: тег < l i > может использоваться как одиночный, т.е. без парного,
закрывающего тега </li>.
Полный HTML-код документа должен иметь вид как на Рис. 1.16.
Чем мы занимаемся?
• Созданием новых и развитием существующих автоматизированных систем
управления технологическими процессами на промышленных объектах.
• Планированием и установкой "под ключ" локальных и глобальных
вычислительных систем.
« Разработкой и внедрением систем корпоративных сетей с построением
кабельных систем (для офисов), а также систем передачи данных с
использованием телефонных, оптоволоконных и радиоканалов.
• Внедрением проектных решений по созданию и использованию глобальных
информационных магистралей для обеспечения совместных работ систем
связи, видеоконференции и мультимедиа.
• Созданием систем слежения и видеонаблюдения.
• Создание систем охранной и пожарной сигнализации, включая системы
пожаротушения и контроля доступа.
£3 Done У м у Computer
> Воспользовавшись командой меню Файл • Открыть (File • Open) в браузере Internet
Explorer, откройте файл spisok.html из папки Web (Рис. 1.17).
Как видите, каждый элемент ненумерованного списка выделяется специальным
маркером. В нумерованном списке каждый элемент будет отмечаться его
порядковым номером. Для создания нумерованных списков используются теги
< o l x / o l > , между которыми помещаются элементы < l i > .
g] [ (g - § Щ D §3, H
•W»- . |tfj blip /<»paitr»"' p)?lio™-n*io<J4e*>do-iegnlea.elpalh.htip 7/na.od yarxto ш ]Q d
Регистрация: шаг 1 из 2
Логин:
должен состоять из символов A-z, 0-9. -. начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не более 20 символов
Ваше имя:
Г
Фамилия:
Ш
Рис. 1.18. Форма регистрации пользователей на сайте www.narod.ru
spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст
приглашения следует выделить в отдельный абзац, ограничив его парой тегов < р х / р > ,
и выровнять по центру с помощью атрибута align=center.
>• Вставьте пустую строку между закрывающим тегом </ul> и закрывающим тегом
</body> и введите в этой строке следующий код:
<р аИдп=сепЬег>Если у Вас есть вопросы или предложения, напишите
нам:</р>
Каждая форма начинается тегом <form> и заканчивается тегом </form>. HTML-
документ может содержать в себе несколько форм, однако они не должны находиться
одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений.
Открывающий тег <form> должен содержать обязательный атрибут action, который
определяет, где находится программа-обработчик или адрес сервера, который будет об-
рабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться
по электронной почте, то значение этого атрибута должно содержать адрес E-mail вла-
дельца сайта, например: a c t i o n = " m a i l t o : geoton9narod.ru".
Еще один атрибут тега <form> - method - определяет, каким образом или с помо-
щью какого протокола данные из формы будут переданы программе-обработчику.
Так как будет использована электронная почта, то значение этого атрибута должно
быть p o s t : method=post. Таким образом, элемент <form>.. .</form> будет иметь
примерно такой вид:
<form action="mailto: geoton@narod.ru" method=post >
</form>
>• Добавьте в документе spisok.html пустую строку перед закрывающим тегом </Ъойу>
и введите указанный код, вставив в качестве значения атрибута a c t i o n вместо
geoton@narod.ru свой адрес электронной почты.
Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообще-
ния. Для этого служат теги < t e x t a r e a x / t e x t a r e a > . В качестве атрибутов открываю-
щего тега <textarea> необходимо указать количество строк (rows) и колонок (cols),
а также имя (name), под которым содержимое текстового поля ввода будет передано
программе-обработчику, например:
•ctextarea rows=5 cols=40 name=Commentsx/textarea>
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов.
Введенный посетителем сайта текст будет передан обработчику под именем Comments
(Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, сле-
дует ограничить его тегами < c e n t e r x / c e n t e r > .
>• Вставьте пустую строку перед закрывающим тегом </form> и введите следующий
элемент, создающий текстовое поле:
<centerxtextarea rows-5 cols-40 name=Comments></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.
В L
©Done viy Corttputer rf
Help
г - [Working Ofll
•1
••Bock » 4 ' 9 S f l ®Se erch Sfl Favorites О History |% -аи»
Address | f i C:\Web\spisok.html <>Go IJUnksi
Если у Вас есть вопросы или предложения, напишите нам:
Отправить
В Done My Computer
> Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с пре-
дупреждением о том, что форма передаст ваш адрес E-mail получателю, а данные, со-
держащиеся в форме, будут переданы без шифрования и, если они конфиденциальны,
это может быть нежелательно для вас (Рис. 1.21).
Microsoft Internet Exploit?!
Отмена
> Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждени-
ем закроется.
Если бы соединение с Интернетом было установлено, то данные из формы были бы от-
правлены и через некоторое время вы получили бы их по электронной почте. Но так как
соединение не установлено, то, в зависимости от настроек вашей почтовой программы,
или появится сообщение о невозможности отправить почту, или данные из формы будут
помещены в папку исходящих сообщений почтовой программы и отправлены при оче-
редном подключении к почтовому серверу.
2-1210
34 Создание Web-сайтов
Отправить
На первую страницу
] @ My Compute
> Установите указатель мыши в окне браузера на ссылке На первую страницу. Указа-
тель мыши, который обычно имеет форму стрелки или текстового курсора, примет
форму Ъ •
> Щелкните мышью на этом месте. В окне браузера появится первая Web-страница из
файла geoton.html. ,
Таким образом, мы осуществили переход по ссылке на другую страницу сайта.
Теперь создадим гиперссылку для перехода с первой страницы - geoton.html - на вто-
рую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент
о нашей деятельности, так как список на второй странице раскрывает содержание
именно этого фрагмента текста. Поэтому нам нужно в файле geoton.html поместить от-
крывающий тег <а> с атрибутом h r e f = " s p i s o k . h t m l " перед фрагментом текста о на-
шей деятельности, а закрывающий тег </а> - после него.
>• Откройте в программе Блокнот (Notepad) файл geoton.html.
> Отредактируйте этот файл, вставив тег <а h r e f = n s p i s o k . h t m l " > перед текстом
о нашей деятельности, а закрывающий тег </а> - после него. Код HTML в файле
geoton.html должен принять вид, как на Рис. 1.23.
> Щелкните мышью на ссылке о нашей деятельности. В окно браузера будет загружен
файл spisok.html.
> Перейдите в конец этой страницы, чтобы отобразить на экране ссылку На первую
страницу.
Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> ат-
рибуты link, v l i n k и a l i n k с подходящими значениями цветов.
2*
36 Создание Web-сайтов
>• Щелкните мышью на ссылке На первую страницу. В окне браузера опять появится
документ geoton.html.
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка.
Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите внимание: пока
переход не вставлен, указатель мыши при установке на рисунке имеет форму стрелки 1л^.
Для создания такой ссылки достаточно в файле geoton.html вставить открывающий тег
<а href= 1 1 spisok.html 1 1 > перед тегом <img src=CLOUD.GiF border=l> и закры-
вающий тег </а> после него.
>• Отредактируйте файл geoton.html так, чтобы окончательный HTML-код документа
имел вид, как на Рис. 1.25.
iij&qeoton.html - Notepad
Eile Edit Fflrmal Help
<html>
<head>
«ЗШеЖомпания rEOTOH</title>
</head>
<body bgcolor=blue text=yellow link=white vlink=yellow alink=red{>
<hl align=center>flo6po пожаловать на страничку компании ГЕОТОН!</Ы>
<centerxa href="spisok.html"ximg src=CLOUD.GIF border=lx/ax/center>
<p style-'font-weight: bold; font-style: italic; font-size: 150%; text-align: center">3flecb
Вы узнаете <a href="spisok.html">o нашей деятельности</а>, о
программных продуктах нашей компании и об оборудовании, которое мы
производим</р>
</body>
</html>
При щелчке мышью на такой ссылке браузер подключится к указанному сайту, найдет
нужный файл и выведет на экран диалог с предложением сохранить этот файл на диске
вашего компьютера,. После того, как вы укажете папку для сохранения, начнется процесс
копирования файла на ваш компьютер.
<trxtd>06opyflOBaime</tdx/tr>
<trxtd>Cne«. no</tdx/tr>
<trxtd>Hanoi napTHepbi</tdx/tr>
<trxtd>Ilpaue^jicT</tdx/tr>
<trxtd>CBHSb с KOMnaHMeu</tdx/tr>
</table>
>• Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню
Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки соот-
ветственно на файлы geoton.html и spisok.html так, чтобы эти строки приняли сле-
дующий вид:
< t r x t h x a href ="geoton.html" target="frame">rnaBHaH
cipaHraia</ax/thx/tr> .
Главная
.html - Notepad страница
£ile Edit Fsrmat Help
<html> Чем мы
<head> занимаемся?
<М]е>Меню<ЛШе>
</head> О нашей
<body>
•stable border=l width=140>
компании
< t r x t h x a href="geoton.html" target="frame">rinaBHaH страница</ах/Й1хДг> Новости
< t r x t h x a href="spisok.html" targeH'frame">4eM мы занимаемся?</ахЛ11хЛг>
(<trXth>0 нашей компании</Й1Х/й-> Оборудование
<trxtli>HoBOCTH</thx/tr>
<Ь-хЛ>Оборудование</и1хЛг> Спец. ПО
<1гхЛ>Спец. nO</thx/tr>
Наши
<Ь-хЛ>Наши napTHepbi</thX/tr>
партнеры
<1гХш>Связь с компанией</тх/1Р»
</table> Прайс-лист
«^body> Связь с
</html>
компанией
Рис. 1.32. Окончательный вид файла menu.html Рис. 1.33. Ссылки
с HTML-кодом таблицы в меню созданы
>• Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад
(Back) на панели инструментов или просто закройте окно, если файл был загружен ъ
новое окно. На экране снова отобразится файл menu.html.
>• Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера поя-
вится файл spisok.html.
Итак, на основе таблицы мы создали меню и убедились, что ссылки в нем работают.
Search
<X Mew Добро пожаловать на
страничку компании
Выберите квтегорис поиске:
f* Поиск вей-
О Предыдущий поиск
с
Предоставлено ГПоиск"
Yandex ________
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на
другие страницы сайта и сами страницы.
Web-страница изнутри 43
Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрей-
ма, в котором будет выводиться меню, установим фиксированную ширину - 160 пиксе-
лов, а размер второго предоставим определить браузеру, заменив его звездочкой *.
>- В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего
тега < /head> и введите следующий код:
<frameset cols="160,*">
</frameset>
Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на
два фрейма. Для описания каждого фрейма в отдельности используются одиночные теги
<frame>, которые должны находиться внутри элемента <frameset>.. .</frameset>.
Обязательным атрибутом тега <frame> является src, значение его - адрес документа,
44 Создание Web-сайтов;
который должен находиться в данном фрейме. Так как в первом фрейме будет находить-
ся файл menu.html, то данный тег следует записать так:
<frame src="menu.html">
>• Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего
тега <£rameset> и введите указанный тег.
Во второй фрейм должен загружаться файл geoton.html, поэтому второй тег <frame>
будет таким:
<frame src="geoton.html">
Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта -
spisok.html и другие, которые, возможно, будут созданы, - необходимо с помощью ат-
рибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого
документа в качестве значения атрибута t a r g e t , определит, в какой именно фрейм сле-
дует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый
документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам
нашего меню страницы открывались не в первом фрейме, в котором расположено меню,
а во втором, мы использовали в предыдущем опыте в ссылках меню атрибут t a r g e t
со значением "frame": target="frame", где "frame" - это имя второго фрейма. И те-
перь имя "frame" следует присвоить второму фрейму, в котором должен открываться
файл geoton.html. Поэтому второй тег <frame> в окончательном виде должен быть за-
писан так:
<frame src="geoton.html" name="frame">
> Введите этот код, вставив пустую строку перед закрывающим тегом </f rameset>.
>• Сохраните файл в папке Web под именем index.html.
Окончательный код файла index.html в окне программы Блокнот (Notepad) должен быть
таким, как на Рис. 1.35.
«index.html - Notepad
File Edit Format Help
<head>
<Й1е>Компання ГЕОТОН<ЛШе>
</head>
<frameset cols=160,*>
<frame src="menu.html"[>
<frame src="geoton.html" name="frame"> |
</frameset> . I
</html>
Добро пожаловать на
Чем мы j
занимаемся?;
страничку компании ГЕОТОН!
О нашей
компании ЗЙСправка
Новости
(оборудование
Г Спец. ПО i
Здесь Вы узнаете о нашей деятельности,
Няши о программных продуктах нашей
партнеры компании и об оборудовании, которое мы
Прайс-лист !
производим
Связь с
компанией \
в
Рис. 1.36. Фреймы созданы
Главная
страница
Добро пожаловать на
Чем мы
занимаемся?
страничку компании ГЕОТОН!
О нашей
компании ЗЦ Справка
Новости
[Оборудование
Спец. ПО
Здесь Вы узнаете о нашей деятельности,
Наши о программных продуктах нашей
партнеры компании и об оборудовании, которое мы
Прайс-лист производим
Связь с
компанией
flndex
Регистрация: шаг 1 из 2
Логин: j
должен состоять из символов A-z. 0-9, -, начинаться с
буквы, заканчиваться буквой или цифрой и содержать
не более 20 символов
Готово!
Регистрация успешно завершена.
Дополнительная информация
Обращение: (Нвуказено _£j
Псевдоним:
С |
Пол: О предпочитаю не указывать
О мужской
0 женский
Яш1ех
Настройка Яндекса
Яндекс Телепрограмма Настройка каналов
Настройка региона
fib Подписки
ютей но
Почт» Письма электронной пичте
geoton5@yandex ги
geoton5@narod.ru Настррйка Почти
Удалить Закладки Каталог ваших
почтовый личных ссылок
П чужой компьютер и
| "в'оп'ти |
xjggfti^_
Рис. 2.5. Страница для ввода имени и пароля
52 Создание Web-сайтов
>• Введите имя и пароль и нажмите кнопку Войти. В окно браузера загрузится страница
для подтверждения адреса e-mail (Рис. 2.6).
{Ыех'^^Паспорт
Регистрация на Яндексе: подтверждение e-mail
После подтверждения этого адреса вы сможете использовать его для
получения информации от служб Яндекса.
ЙГотс.
«Mi
Puc. 2.6. Страница для подтверждения e-mail
Маркет - Деньги - Почта - Народ - Новости - Каталог - Директ - Энциклопедии - Словарь Лингво -
Закладки - Открытки - Бар - Игрушки - Подписки - Гостиная - Мой Яндек
| |ф internet
На адрес e-mail, который был указан при регистрации, вы получите письмо от службы
поддержки Яндекса об успешной регистрации, в котором, кроме регистрационных дан-
ных, будет приведена информация о платных и бесплатных службах Яндекса, которыми
вы теперь можете воспользоваться.
Hndex
Copyright
(В 2001—2004 «Янпекс»
[Jfodffl-Wi'Fi
flndex"JrgVHapofl
Мастерская / Управление файлами / Загрузка файлов Проект: Gcoioiiuainil m
Загрузка в папку «Корневая пяпка» Выбрать папку
Обзор.. Обэор.-
Обзор,. Обэор...
Обэор... Обэор..
Обзор... Обзор...
Обэор... Обэор...
В этом разделе менеджер файлов позволяет вам выбрать файлы для загрузки.
>• Нажмите левую верхнюю кнопку Обзор (Browse). На экране появится диалог Вы-
бор файла (Choose file), который ничем не отличается от стандартного диалога от-
крытия файла.
> Перейдите в папку Web, в которой вы сохранили файлы сайта, и щелчком мыши вы-
берите файл index.html.
> Нажатием кнопки Открыть (Open) закройте диалог Выбор файла (Choose file). Пол-
ное имя выбранного файла появится в верхнем левом поле ввода, слева от кнопки
Обзор (Browse).
> Выберите остальные файлы сайта - geoton.html, spisok.html, menu.html,
CLOUD.GIF - нажимая поочередно каждую следующую кнопку Обзор (Browse).
Размещение страниц в Интернете 55
> Когда все пять файлов будут выбраны, нажмите кнопку Загрузить файлы. Через неко-
торое время, после того как файлы будут загружены, появится страница с сообщением
об этом (Рис. 2.11), а затем вы возвратитесь к странице загрузки файлов (Рис. 2.10).
Начал
Поубивал бы,
да мшмгат» самому возиться. •иды сплма I
Ш index.html
Ш menu.html
html
ы ^. а Ф # ^
OptK Save Publish 3.am. Print
* a ^ #
Unk |га Ч « ТаЫ* Spell
-• «а В / У := |= m л Це ш Ш Ш
. -Iv> J I •.'• I S v . » ,
H<BDl
Программу Composer можно также запустить из рабочего окна браузера Netscape Navi-
gator, выбрав команду меню File • Edit Page (Файл • Редактировать страницу). Данная
Размещение страниц в Интернете 57
> Нажмите кнопку на панели инструментов в верхней части рабочего окна про-
граммы. Если в программе Composer еще не был определен ни один сайт, то на экра-
не появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой Pub-
lish (Опубликовать), на которой необходимо определить параметры доступа к сайту
(Рис. 2.14).
Server Information
Sile Name: Г
I Login Information
j User name: [
Если же в программе Composer был определен хотя бы один сайт, то на экране сразу
появится диалог Publish Page (Опубликовать страницу) с открытой вкладкой Settings
(Установки) (Рис. 2.16).
> В поле ввода Site Name (Имя сайта) введите краткое имя или придуманный вами
псевдоним сайта, на котором вы хотите опубликовать страницу, например, narod.ru.
> В поле ввода Publishing address (Адрес для публикации) нужно набрать адрес для
доступа к сайту по протоколу FTP в виде Яр://ваш_логин:ваш_пароль@Нр.narod.ru.
Например, если ваш логин в Яндексе - 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
PublithfSetting.sj
Puc. 2.16. Вкладка Settings (Установки) диалога Publish Page (Опубликовать страницу)
Если в открывающемся списке Site Name (Имя сайта) нет требуемого сайта, то необхо-
димо нажать кнопку New .Site (Новый сайт), чтобы перейти На вкладку Publish (Опубли-
ковать) диалога Publish Page (Опубликовать страницу) (Рис. 2.14) и определить пара-
метры доступа к сайту.
Размещение страниц в Интернете 59
> В поле ввода Page Title (Заголовок страницы) укажите название страницы, например,
Компания ГЕОТОН, а в поле ввода Filename (Имя файла) - имя, под которым файл
должен быть записан на сервере.
i
При копировании какого-либо файла в каталог, в котором уже имеется файл с таким же
именем, новый файл записывается поверх старого.
Прежде чем продолжить, необходимо подключиться к Интернету.
>• Не закрывая диалог Publish Page (Опубликовать страницу), установите соединение с
провайдером.
>• Нажмите кнопку Publish (Опубликовать). На экране появится диалог с предложением
ввести пароль для доступа к сайту (Рис. 2.17).
г ;
Q Use Password Manager to save this password
{ OK I I Cancel Г
>• Введите пароль и нажмите кнопку ОК. На экране появится диалог, отображающий
процесс публикации файла на сервере (Рис. 2.18).
Publishing: Компания ГЕОТОН
Publishing Status
Publishing...
index, html
Cancel
По окончании процесса публикации файла этот диалог исчезнет, а в заголовке окна про-
граммы Composer появятся название документа Компания ГЕОТОН и имя опубликован-
ного файла index.html (Рис. 2.19).
60 Создание Web-сайтов
•Я Компания ГЕОТОН Ihllp:/.../inde».hlmll - Composi
. File Edil View jnleit Fomat Table Icioli Window Help
Ш
J [ Bndy Тек! 1^1 If- if '•'-• «а В / У := ;S "if
Knowledge Base
|[|ntet 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-адрес будет таким: ftp://Baui_norwH:Bauj_naponb@ftp.narod.ru.
Например, если ваш Логин в Яндексе - myname, а пароль к нему - 12345, то адрес дол-
жен быть таким: ftp://myname:12345@ftp.narod.ru.
>• В поле ввода введите FTP-адрес вашего сайта и нажмите кнопку Далее (Next). На эк-
ране появится второй диалог мастера подключения CuteFTP (Рис. 2.22).
CuteFTP Connection Wn
Username: (geoton
Password;
| _J
> В полях ввода Username (Имя пользователя) и Password (Пароль) введите соответ-
ственно логин и пароль, которые вы получили у провайдера или при регистрации в
бесплатной службе.
> Нажмите кнопку Далее (Next) На экране появится третий диалог мастера подключе-
ния CuteFTP (Рис. 2.23).
CuteFTP Connection Wizard
Для указания папки можно воспользоваться кнопкой £ 2|, расположенной справа от по-
ля Default Local Folder (Локальная папка по умолчанию).
В поле Default Remote Folder (Удаленная папка по умолчанию) можно указать, какая
папка будет автоматически открываться на FTP-сервере. В нашем случае это поле запол-
нять не нужно.
>• Нажмите кнопку Далее (Next) На экране появится заключительный диалог мастера
подключения CuteFTP (Рис. 2.24).
CuteFTP Connection Wizaid
gftoal*
OSCAPIII:
>• Нажмите кнопку Готово (Finish) На экране появится рабочее окно программы
CuteFTP (Рис. 2.26), а поверх него - диалог Tip of the Day (Совет дня) (Рис. 2.25).
l i p ol the Day
Если в диалоге Tip of the Day (Совет дня) сбросить флажок Show tips on the start up
(Показывать советы при запуске), то этот диалог больше появляться не будет.
- CuteFTP ВО - [naiod.ru - ftp.nafod.iu. Status: Connected] Я-JQ
File Edit View Took Window Help
IE 1 J_
/ ttj Item Name | Address \ <-> | SizeTProgfett
J_ r;
I.
. • •
Как и у всех Windows-программ, в верхней части рабочего окна находятся меню и панель
инструментов, предназначенные для управления работой программы. В нижней части
рабочего, окна расположена пока пустая таблица, в которой будет отображаться процесс
пересылки файлов.
Основная часть рабочего окна разделена по вертикали на две панели. На правой панели
отображается каталог удаленного компьютера. На левой панели в настоящий момент ото-
бражается содержимое папки Web, в которой находятся файлы нашего сайта. На правой
панели в окне программы CuteFTP вы увидите список файлов нашего сайта, которые бы-
ли загружены нами в предыдущих опытах.
Панель в нижней части рабочего окна отображает файлы, которые передаются на сервер в
текущий момент времени. Если вы хотите передать файлы позже, то можете временно по-
местить файлы в эту панель.
Выделив любой из файлов, вы можете просмотреть его, нажав кнопку на панели ин-
струментов, отредактировать, нажав кнопку переименовать, нажав кнопку уда-
лить, нажав кнопку X
Удалим загруженные ранее файлы нашего сайта, чтобы затем переслать их снова с по-
мощью программы CuteFTP. Для этого их нужно сначала выделить.
>- Щелчком мыши выделите на правой панели первый файл.
> Не отпуская клавишу \\sm\. щелкните мышью на последнем файле на правой панели.
Все файлы текущей папки будут выделены.
> Нажмите кнопку Да (Yes), чтобы закрыть этот диалог. Файлы будут удалены и их
имена исчезнут с правой панели окна программы CuteFTP.
Чтобы одной командой переслать на сервер все файлы папки Web, их необходимо пред-
варительно выделить.
>• Щелкнув мышью на первом и последнем файлах папки Web на левой панели окна
программы CuteFTP при нажатой клавише l S h m l , выделите их.
ЁЭ DAWeb
id a 1 |a/
I / Size I Type I Name [ Size | Type | Modif
index, hlml 182 b... HTMLDocu...
menu.html 505 b... HTMLDocu...
geoton.html 517 b... HTMLDocu...
spisuk.html 1.23 KB HTMLDocu...
11.03... Рисунок GIF
J
Hem Nan I Address \ <-> t SizeTProgress ! Local
И index.html flp.nar... 182 by... 0% J DAWebVindex.html
О menu.html ftp.nar... 0 bytes J O:\Web\menu.html
0 geoton.html ftp.nar... I D:\Web\geoton.html
О spisok.html ftp.nar... j DAWeb\spisok.html
Q CLOUD.GIF ftp.nar... 0 bytes DAWeb\CLOUD.GIF
D:\Web
Name [ / Size) Type I Name Size [ Type I Modi!
_index.html 182 b... HTML Docu... Й | CLOUD.GIF] 11.03... Рисунок GIF io.os;
|pnienu.Jitml 505 Ь... HTML Docu... Щ geoton.html 508 Ь... HTML Docu... 10.08
'Щ geoton.html 517 b... HTML Docu... ф inden.html 173 b... HTML Docu... 10.08
Ю spisok.html 1.23 KB HTML Docu... <ф[ menu.html 487 b... HTML Docu... 10.08
g) CLOUD.GIF 11.03... Рисунок GIF @ spisok.html 1.21 KB HTML Docu... io. oa
j
UemName
a
I Adflre»! | <-> [ Size! Ргоцгёй"
Иногда при загрузке Web-страниц могут возникнуть некоторые проблемы. Если ваша
страница, находящаяся на сервере www.narod.ru, не загружается, и в окне браузера по-
является сообщение типа: «Извините, запрошенный Вами документ не найден. Попро-
буйте начать с главной страницы» или «Невозможно отобразить страницу» (The page
cannot be displayed), то это значит, что адрес сайта введен вами неправильно. Проверьте
указанный вами адрес. Если же появляется сообщение «Не найден файл index.html или
доступ к каталогу запрещен», то это означает, что страница не Помещена на сервер или
среди посланных вами файлов отсутствует файл index.html. Содержащаяся в этом файле
страница всегда выводится как первая.
Цифровые изображения
Изображение, которое вы видите на экране компьютерного монитора, строится из мел-
ких точек, называемых пикселами. Слово пиксел - это сокращение английских слов 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-страниц
Особенности 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
74 Создание Web-сайтов
не одну восьмую исходного файла, как в GIF, а всего лишь одну шестьдесят четвертую -
и, тем не менее, распознаваемость картинки при этом заметно лучше.
PNG позволяет хранить полную информацию о степени прозрачности в каждой точке
изображения в виде так называемого альфа-канала. Каждый пиксел PNG-файла, вне за-
висимости от его цвета и местоположения, может иметь любую градацию прозрачности:
от нулевой - полная непрозрачность, до абсолютной невидимости.
Чтобы сгладить различия в яркости дисплеев, существующие между разными типами
компьютеров и, соответственно, между создаваемыми на них изображениями, PNG по-
зволяет хранить в файле исходный коэффициент яркости того дисплея, на котором
изображение было создано. Это дает возможность программам просмотра перед выво-
дом на экран регулировать яркость изображения, приспосабливая ее к особенностям
данной видеосистемы - так называемая гамма-коррекция.
PNG-формат не дает возможности создавать анимационные ролики. Поэтому для хране-
ния анимации или нескольких изображений в одном файле используется вариация фор-
мата PNG - формат MNG (Multiple Network Graphics - Множественная сетевая графика).
В настоящее время разработчики формата PNG работают над новым форматом PNP
(Portable Network Photography - Переносимая сетевая фотография), произносится «пи-
нап», который предназначен для хранения фотографических изображений и обладает
мощным алгоритмом сжатия с потерей качества.
Возможности оптимизации
Чтобы любое изображение можно было использовать на Web-странице, его необходимо
предварительно оптимизировать, уменьшив до минимума размер файла и, следователь-
но, время загрузки по сети так, чтобы качество изображения при этом заметно не ухуд-
шилось. Оптимизация - это, по сути, компромисс между размером файла и качеством
изображения.
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и используется
сжатие с потерей информации. У него не так уж много способов оптимизации, точнее
сказать, два:
• использование прогрессивной развертки;
• оптимальный коэффициент сжатия.
Использование прогрессивной развертки не сказывается на размере изображения, но
заметно при загрузке. В случае записи изображения в стандартном формате вывод на
экран осуществляется горизонтальными полосами, и до загрузки всего изображения не-
возможно определить его смысл. Напротив, при записи файла в прогрессивном формате
изображение появляется сразу целиком, но в грубой форме, и затем постепенно улучша-
ется. Это дает посетителям сайта возможность сразу же оценить изображение и решить,
стоит ли ожидать его окончательной загрузки, что позволяет сэкономить немного време-
ни при просмотре страниц. Общее время загрузки страницы при этом не уменьшается,
возникает лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддержива-
ется всеми браузерами, но не каждый графический пакет может записывать в этом фор-
мате. Поэтому проверьте свои программы на возможность сохранять файлы с прогрес-
сивной разверткой. Последние версии Photoshop умеют это делать.
76 Создание Web-сайтои
Оптимальный коэффициент сжатия. Это - другая возможность оптимизации изобра-
жения в формате JPEG. Для осуществления такой оптимизации нужен графический па-
кет или утилита, которая позволяет регулировать степень сжатия изображения. Adobe
Photoshop позволяет выполнить такую регулировку. Другие программы, например, Photo-
Paint и PaintShopPro, также позволяют плавно регулировать степень сжатия в интервале
значений от 1 до 255.
Как определить оптимальную степень сжатия? Для этого нужно сохранить изображение
при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть его.
Критерием потери качества будут так называемые «дрожащие контуры», наиболее за-
метные в местах контрастных переходов, и появление пятен в областях с плавными пе-
реходами. Тот коэффициент сжатия, при котором искажения еще не видны, но с увели-
чением коэффициента на одну ступеньку становятся заметными, и будет оптимальным.
Размер файла при таком коэффициенте сжатия будет минимально возможным при со-
хранении качества.
Формат GIF сильно отличается от JPEG и использует совершенно другие методы опти-
мизации. Он предназначен для хранения изображений с количеством цветов не более 256
и использует сжатие без потерь по методу LZW, который применяется в программах-
архиваторах. Методы оптимизации можно разделить на следующие типы, исключая оп-
тимизацию файлов с анимацией:
• уменьшение количества цветов;
•/ оптимизация палитры изображения;
i/ стилизация изображения;
^ изменение размеров изображения;
• фрагментарная оптимизация;
v' оптимизация «прозрачных» изображений;
• использование чересстрочной развертки.
Теперь разберемся по порядку с этими методами и приемами оптимизации.
Уменьшение количества цветов. Для большинства изображений, не являющихся
фотографическими, количество необходимых для воспроизведения цветов часто
меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его
размер. Это возможно потому, что формат GIF поддерживает размер палитры меньше
256 цветов. Теоретически мы можем задать любое число цветов палитры от 2 до 256,
например, 45 цветов или 99. Практически же количество цветов в изображении выби-
рается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления
цвета используется всегда целое число бит, а приведенный выше ряд является рядом
максимального количества цветов при использовании от 1 до 8 бит на пиксел.
В случае, ерли вы используете в рисунке, допустим, только 97 цветов, для сохранения
одного пиксела все равно будет использовано 7 бит, как и при использовании
128 цветов. Поэтому при оптимизации количества цветов нужно ориентироваться на
приведенный выше ряд. Это позволит получить более качественную картинку.
Уменьшив количество цветов с 256 до 32, можно иногда добиться уменьшения
размера файла в 2 раза без заметной потери качества.
Графика для Web-страниц 77
Напомним, что URL-адрес файла включает протокол доступа к WWW - http://, имя сайта
в Интернете, например, geoton.narod.ru и имя файла - CLOUD.GIF, отделенное от имени
сайта косой чертой /. В общем случае перед именем файла могут присутствовать также;
имена каталогов.
Отредактированный файл будет иметь примерно такой вид, как на Рис. 3.1.
> Сохраните файл geoton.html, выбрав команду меню программы Блокнот (Notepad)
Файл • Сохранить (File • Save).
>• Загрузите браузер и откройте в его окне файл geoton.html из папки Web (Рис. 3.2).
- (Workinq Offline]
Edit » e w Favorites louls Help
ck - •» •* & SiFavorites ^ H i s l o r y \%w <
Address МЦ C:\Web\geoton.html
| й "У Computer
Как видите, пока ваш компьютер не подключен к Интернету, рисунок в окне браузера не
отображается. Вместо .него выводится только рамка, толщина которой определена атри-
бутом border. Чтобы увидеть рисунок, необходимо подключиться к Интернету.
>- Не закрывая окно браузера, установите связь с провайдером.
> Когда связь будет установлена, нажмите кнопку El - Обновить (Refresh) на панели
инструментов браузера Internet Explorer или кнопку Обновить текущую страницу
(Reload Current Page) на той же панели браузера Netscape. Браузер подключится к
вашему сайту и загрузит рисунок CLOUD.GIF.
Возможно, если ваша линия связи недостаточно быстрая, вы увидите, что изображение
как бы постепенно «выкристаллизовывается» из «бесформенной массы». Так как данный
рисунок сохранен с использованием чересстрочной развертки, то браузер отображает его
постепенно, по мере загрузки: сначала показывается каждая восьмая строка пикселов,
затем - каждая четвертая, далее - каждая вторая и, наконец - все оставшиеся нечетные
строки. Приняв из сети очередную порцию данных, браузер не только рисует каждую
строку пикселов на своем месте, но и заполняет копиями предыдущей строки все проме-
жутки между строками. Поэтому вначале чересстрочный рисунок формата GIF состоит
из широких горизонтальных полос, которые сужаются по мере появления изображения.
> Прервите связь с Интернетом.
Таким образом, мы вставили изображение на Web-страницу, указав в теге <img> в каче-
стве значения атрибута src абсолютный адрес файла с рисунком.
Для тех браузеров, которые не могут отображать рисунки, в языке HTML предусмотрен
для тега <img> специальный атрибут a l t , определяющий альтернативный текст, кото-
рый будет выводиться вместо рисунка. Этот текст должен отображать смысл рисунка,
заменяя собой изображение. Атрибут a l t желательно использовать еще и потому, что
многие пользователи отключают в браузере функцию отображения рисунков, чтобы ус-
корить загрузку Web-страниц. В таком случае пользователь должен видеть альтернатив-
ный текст, заменяющий рисунок. Кроме того, существуют специальные речевые браузе-
ры для незрячих, в которых текст выводится голосом.
Вставим в тег <img> файла geoton.html атрибут a l t со значением "Область нашей
деятельности 1 1 , которое в данном случае раскрывает смысл рисунка и ссылки. Значение
атрибута a l t должно быть заключено в кавычки. Этот текст будет появляться в браузе-
рах, не позволяющих показывать изображения на месте рисунка.
> Отредактируйте файл geoton.html, вставив в тег <img> относительную ссылку на
файл с рисунком CLOUD.GIF, находящий в папке Web вашего компьютера, и атрибут
а ^ = " О б л а с т ь нашей деятельности 1 1 так, чтобы элемент, содержащий указанный
тег, принял следующий вид:
<centerxa href=spisok.htmlximg src=CLOUD.GIF border=l а^="Область
нашей деятельности"></ax/center>
Теперь, когда относительный адрес рисунка указывает на файл CLOUD.GIF, находящий-
ся в папке Web вашего компьютера, рисунок сразу показывается в окне браузера после
обновления изображения.
82 Создание Web-сайтов
>- Установите указатель мыши на рисунке в окне браузера так, чтобы указатель мыши
принял форму \). Под ним появится рамка с текстом, определенным в качестве зна-
чения атрибута a l t (Рис. 3.3).
Как видите, даже когда рисунок отображается в браузере, значение атрибута a l t выво-
дится на экран при установке указателя мыши на изображении. Это значит, что с помо-
щью данного атрибута можно также определять подписи для рисунков.
Посмотрим теперь, что происходит, если браузер не показывает графику. Для этого вы-
ключим ее отображение.
> В браузере Internet Explorer выберите команду меню Сервис •Свойства обозрева-
теля (Tools • Internet Options). На экране появится диалог Свойства обозревателя
(Internet Options).
> В браузере Internet Explorer щелкните мышью на ярлыке Дополнительно (Advanced),
чтобы перейти на соответствующую вкладку.
>• В браузере Internet Explorer сбросьте флажок Отображать рисунки (Show pictures).
Чтобы найти его, воспользуйтесь вертикальной полосой прокрутки (Рис. 3.4).
>• В браузере Internet Explorer нажмите кнопку Применить (Apply).
> Нажатием кнопки ОК закройте диалог Свойства обозревателя (Internet Options) или
Параметры (Preferences).
Теперь, когда отображение графики в программе просмотра выключено, посмотрим, что
мы увидим вместо рисунка.
> Обновите изображение в окне браузера, нажав соответствующую кнопку на панели
инструментов. Вы увидите, что вместо рисунка в рамке отображается текст, который
определен атрибутом a l t (Рис. 3.5).
Графика для Web-страниц 83
Свойства обозревателя
Параметры:
ОК [ Отмена*"] \ Применить |
В Done У Щ My Computer
>- Отредактируйте в файле geoton.html тег <img>, добавив указанные атрибуты так,
чтобы этот элемент принял следующий вид:
< c e n t e r x a href = "spisok.html M ximg src=CLOUD.GXF a l t = " Область нашей
деятельности" border=l width=613 height=60x/a></center>
В окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено столько места,
' сколько указано значениями атрибутов width (ширина) и height (высота) (Рис. 3.6).
Когда вы обновите изображение в браузере, то увидите примерно то же, что и на Рис. 3.7.
а Done вд My Computel
| Щ My Computer
Еще один способ определения фона - с помощью языка каскадных таблиц стилей CSS.
Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц значи-
тельно больше возможностей управления фоновым изображением. Чтобы удобнее было
знакомиться с ними, вставим рисунок BG.JPG в качестве фонового изображения второй
Web-страницы нашего сайта, сохраненной в файле spisok.html, воспользовавшись язы-
ком каскадных таблиц стилей.
В опыте со стилями первой главы мы определили вид текста на первой Web-странице: с
помощью языка каскадных таблиц стилей, указав нужные стили как значения атрибута
s t y l e в теге <р>. Но есть другой, более предпочтительный вариант определения стилей,
при котором описание стилей располагается внутри заголовка Web-документа
<head> </head> в открывающем теге <style>. В таком случае вы можете исполь-
зовать описанные стили для HTML-элементов всей страницы.
В теге <style> обязательно должен присутствовать атрибут t y p e = n t e x t / c s s n , кото-
рый служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким
образом, элемент < s t y l e > . . . </style> должен иметь следующий вид:
<style type="tejct/css">
</style>
Вставим этот тег в код HTML файла spisok.html.
> Вставьте пустую строку в файле spisok.html после элемента <title>4eM мы зани-
, маемся?</ь1Ь1е> и введите теги < s t y l e x / s t y l e > , как указано выше. Код HTML
заголовка Web-страницы, заключенный между тегами <head>.. .</head>, должен
иметь такой вид:
<head>
<title>4eM мы занимаемся?</title>
<style type="text/css">
</style>
</head>
Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем случае
присвоение стиля элементу выглядит так:
название_элемента { свойство: значение },
где наэвание_элемента - это имя HTML-тега, например, hi, p, body, а параметры в
фигурных .скобках - перечень свойств элементов и присвоенных им значений. Например,
чтобы указать, что все абзацы, описываемые тегами <р>...</р> текущего Web-
документа, должны иметь полужирное курсивное начертание шрифта с размером 150% и
выравнивание по центру, следует присвоить этому элементу стили следующим образом::
<style type="text/css">
р { font-weight: bold; font-style: italic; font-size: 150%; text-
align: center }
</style>
Напомним, что такие стили мы присвоили элементу <р>.. .</р> на нашей первой Web-
странице - geoton.html - и сделали это с помощью атрибута s t y l e . При этом стили бы-
ли присвоены только данному элементу <р>...</р>. Если же стили определяются
Графика для Web-страниц 89
> Вставьте пустую строку между открывающим тегом <style> и закрывающим тегом
</style> и введите указанный код, определяющий стиль элемента body.
Элемент HTML < s t y l e > . . . </style> должен выглядеть следующим образом:
<style type="text/css">
body { background-image: url("BG.JPG") }
</style>
Графический текст
Многие Web-дизайнеры широко используют в своих проектах графический текст.
Это обычно небольшие надписи, состоящие из одного или нескольких слов, оформленные
с применением различных эффектов и сохраненные в файле одного из графических форма-
тов. Такой графический файл с текстом вставляется в Web-документ как рисунок или как
фон и используется в качестве заголовков, названий,
логотипов, кнопок и т.д. На Рис. 3.11 показаны
примеры таких надписей. Хотя подобная графика
и увеличивает объем Web-страниц и время их за-
ЙНФШРМ
грузки, разумное ее использование придает сайту
привлекательный профессиональный вид.
Графический текст, как и другие изображения, соз-
дается обычно в программах точечной графики и
поэтому состоит из множества пикселов. Если раз-
мер шрифта надписей достаточно крупный, то на
границах символов возникает резкий контраст, в
Internet by
результате чего очертания символов кажутся не-
ровными, особенно в наклонных и закругленных ЗогШпа
элементах (Рис. 3.12, вверху). I
С помощью специального эффекта сглаживания Рис. 3.11. Графический текст
(anti-aliasing) можно минимизировать контраст на
ТРИУМФ
границах символов. В результате их очертания ста-
нут более мягкими и надпись будет выглядеть бо-
лее элегантно (Рис. 3.12, внизу). Однако в тех слу-
ТРИУМФ
чаях, когда надпись создается мелким шрифтом,
использование сглаживания нежелательно, так как
текст может стать плохо читаемым.
С приемами и способами создания графики и, в Рис. 3.12. Графический текст
частности, графического текста мы познакомимся в несглаженный (вверху)
следующей главе. • и сглаженный (внизу)
ГЛАВА 4.
Подготовка графики
с помощью Adobe Photoshop
и Adobe ImageReady
Внешний вид и привлекательность вашего сайта в значительной мере« зависят от напол-
няющей его графики. Графика - это визуальное средство подчеркивания и выделения
информации, раскрываемой текстом Web-страницы, которое в то же время не должно
отвлекать внимание посетителя сайта от самого текста. Поэтому подготовке графики
следует уделить самое серьезное внимание.
В настоящее время существует множество программных продуктов, позволяющих гото-
вить рисунки для Web; наиболее популярными из них являются Macromedia Fireworks и
Adobe ImageReady. Компания Macromedia стала пионером в области создания программ
подготовки Web-графики, когда выпустила свой продукт Macromedia Fireworks, специ-
ально предназначенный для этой цели. Вслед за ним появилась аналогичная программа
компании Adobe System Incorporated - Adobe ImageReady.
Среди программ профессиональной подготовки растровых изображений, пожалуй, нет
программы более совершенной и более популярной, чем Adobe Photoshop. За последние
несколько лет в связи с тем, что требования к Web-графике значительно повысились,
дизайнеры и разработчики ориентируются именно на Adobe Photoshop, как на одно из
основных средств создания графики для World Wide Web. До появления версии Adobe
Photoshop 5.5 программа Adobe ImageReady, ранее распространявшаяся отдельно, счита-
лась неким придатком Adobe Photoshop с очень ограниченным набором функций подго-
товки изображений для Web. Однако, учитывая возрастающие требования, компания
Adobe System решила отказаться от дальнейшего раздельного распространения этих
двух продуктов и слить их в один пакет - Adobe Photoshop. Новая концепция «два в од-
ном» гарантирует совместимость программ, знакомый интерфейс и, в конечном счете,
значительное сокращение времени подготовки графики. По сути, это - единый ком-
плекс, разделенный на две программы только для гибкости. Обе программы имеют оди-
наковые рабочие окна и предлагают много одинаковых инструментов. Между програм-
мами легко переключаться с помощью специальной кнопки и, таким образом, быстро
переходить от создания и обработки изображений к их подготовке и оптимизации для
Web. Все операции, выполненные в каждой из программ, сохраняются и, при необходи-
мости, их можно отменить после переключения.
Adobe Photoshop и Adobe ImageReady хорошо дополняют друг друга. И мы будем рас-
сматривать эти программы совместно: обрабатывать фотографии, создавать графические
кнопки, баннеры и другие изображения для Web-сайта в Adobe Photoshop, а затем пере-
ключаться в Adobe ImageReady, чтобы оптимизировать полученные изображения, разре-
зать их на фрагменты, «оживлять графику» и т.п.
Следует отметить, что работа с Adobe Photoshop требует некоторого навыка, так как боль-
шинство созданных в ней объектов не могут быть легко изменены. Однако к этой особенно-
сти программы достаточно легко привыкнуть, тем более, что она записывает все выполнен-
ные действия, и любые из них можно отменить, вернувшись к предыдущему варианту.
94 Создание Web-сайтов
При запуске программы Adobe Photoshop версии CS2 диалоги, которые мо-
гут появляться на экране будут другими. Но все эти диалоги никак не
влияют на последующую работу с программой.
Виртуальные диски программы Photoshop (Scratch disks) используются тогда, когда для
выполнения операции не хватает оперативной памяти. В диалоге Preferences (Настрой-
ки), который вызывается с помощью команды меню Edit • Preferences • Plug-Ins &
Scratch Disks (Правка • Настройки • Плагины и виртуальные диски) можно назначить
до 4-х виртуальных дисков. Их рекомендуется назначать на наиболее свободных и неф-
рагментированных жестких дисках.
> Нажмите кнопку О К, чтобы закрыть диалог. Adobe Photoshop
На экране появится диалог-запрос Adobe Color settings for Photoshop б will be configured using default
settings.
Photoshop о настройке параметров цвета
Do you wish to customize your color settings now?
(Рис. 4.3).
В этом диалоге программа сообщает, что цве-
товая конфигурация будет установлена по Рис. 4.З. Диалог-запрос о настройке
умолчанию. Задача настройки цветовой кон- параметров цвета
фигурации состоит в том, чтобы, по возмож-
ности, сохранить идентичность цвета на всех стадиях его обработки и приблизить
видимые на экране цвета к тем, которые будут напечатаны принтером. Если вы же-
лаете выполнить собственную настройку цвета, то следует нажать кнопку Yes (Да), а
чтобы принять установки по умолчанию - кнопку No (Нет). При необходимости вы
сможете выполнить настройку цвета позднее, выбрав команду меню Edit • Color
Settings (Правка • Настройка цвета).
>- Нажмите кнопку No (Нет), чтобы закрыть диалог о настройке параметров цвета.
На экране появится диалог, из которого вы можете перейти к руководствам по
использованию программы, настройке цвета и узнать о новых возможностях про-
граммы (Рис. 4.4).
Если сбросить флажок Show this dialog at startup (Показывать этот диалог при запуске),
то диалог больше появляться не будет.
>- Нажмите кнопку Close (Закрыть). На экране появится рабочее окно программы
Photoshop (Рис. 4.5).
96 Создание Web-сайтов
Tutorials S3
Learn the Basics h.
1
Advanced Techniques (Online)
Working With What's New
What's New
Т|!§ New Features At A Glance
^) New Feature Highlights
t& What's New Movie (Online)
Первая строка рабочего окна программы Adobe Photoshop - строка заголовка. В ней ото-
бражается название программы и слева от него значок системного меню, команды которо-
го предназначены для перемещения, изменения размеров и представления окна, а также
для его закрытия. У правого края строки заголовка располагаются три кнопки: [Г] - для
сворачивания, [Н] - для разворачивания и [х] - для закрытия окна программы.
Значок Кнопка Кнопка
системного Заголовок Полоса Кнопка разворачивания закрытия
меню окна меню сворачивания окна
4
Панель параметров
(Option Bar)
Если установить указатель мыши на кнопке с черным треугольником внизу, а затем на-
жать и удерживать левую кнопку мыши, то появится дополнительная панель со списком
других инструментов. Чтобы выбрать для работы любой инструмент из списка, доста-
точно щелкнуть мышью на его имени.
Большинство инструментов панели привычны для художника: кисть (Brush Tool (В)),
карандаш (Pencil Tool (В)), ластик (Erazer Tool (E)). Но есть и такие, которые обычно
используют фотографы, например, размытие/резкость/палец (Blur/Sharpen/Smudge
Tool (R)), осветлитель/затемнитель/губка (Dodge/Burn/Sponge Tool (О)).
Инструменты левого ряда панели Tools имеют следующее назначение:
[ГГЦ - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)) -
создает выделенную область прямоугольной формы. Этой же кнопкой включают-
ся и другие инструменты, создающие области правильной формы: [О] - Elliptical
Marquee Tool (М) (Инструмент «Эллиптическая область» (М)) - создает область
эллиптической формы; Single Row Marquee Tool (Инструмент «Однострочная
область») и Single Column Marquee Tool (Инструмент «Одноколоночная об-
ласть») - позволяют выделить соответственно строку или колонку высотой или
шириной в 1 пиксел.
1
Здесь и далее: латинская буква рядом с названием, в данном случае (V) - это клавиша быстрого
выбора инструмента.
4-1210
98 Создание Web-сайтов
- Lasso Tool (L) (Инструмент «Лассо» (L)) - выделяет область произвольной формы.
Этой же кнопкой включаются инструменты [ § ] - Polygonal Lasso Tool (L) (Инст-
румент «Многоугольное лассо» (L)), создающий выделенную область в форме мно-
гоугольника и | ^ J - Magnetic Lasso Tool (L) (Инструмент «Магнитное лассо» (L)),
создающий выделенную область посредством привязки к резким границам
изображения.
- Crop Tool (С) (Инструмент «Рамка» (С)) - позволяет кадрировать изображение,
обрезав его края.
- Healing Brush Tool (J) (Инструмент «Лечащая кисть» (J)) - позволяет исправить
дефекты изображения, делая их неотличимыми от окружающих частей картинки.
Этой же кнопкой включаются инструменты [©] - Patch Tool (J) (Инструмент «За-
платка» (J)), который позволяет заменить выбранную область пикселами из другой
области, и \W\ - Color Replacement Tool (J) (Инструмент «Замена цвета» (J)), кото-
рый упрощает замену указанного цвета. В версии CS2 в этой группе появилось два
новых иструмента: ly^j - Spot Healing Tool (J) (Инструмент «Кисть лечащая пятна»
(J)) и 1 5 ] - Red Eye Tool (J) (Инструмент «Красный глаз» (J)), а иснтрумент Color
Replacement Tool (J) (Инструмент «Замена цвета» (J)) перенесен в группу выбора
кистей и обзначается кнопкой [§f}-
- Clone Stamp Tool (S) (Инструмент «Штамп» (S)) - позволяет воспроизводить точ-
ные или модифицированные копии элементов изображения и цветовых образцов в
том же изображении или в другом документе. Щ$\ - Pattern Stamp Tool (S) (Инст-
румент «Штамп узора» (S)), который позволяет рисовать выбранным узором.
| - Erazer Tool (Е) (Инструмент «Ластик» (Е)) - подобно ластику, стирает изображение.
Этой кнопкой включается также инструмент |&?| - Magic Erazer Tool (E) (Инструмент
«Волшебный ластик» (Е)) - позволяющий, указав любую точку на рисунке, сделать
прозрачными остальные области с таким же цветом и \&.\ - Background Erazer
Tool (E) (Инструмент «Фоновый ластик» (Е)), который определяет цвета в том месте,
где прошла кисть, ищет аналогичные цвета по всему изображению и удаляет их.
- Blur Tool (R) (Инструмент «Размытие» (R)) - позволяет смягчать слишком резкие
границы или области в изображении, уменьшая контраст между пикселами. Вклю-
чающийся этой же кнопкой инструмент | Д] - Sharpen Tool (R) (Инструмент «Рез-
кость» (R)) повышает четкость изображения, делая слишком мягкие границы более
резкими, а инструмент [ £ ] - Smudge Tool (R) (Инструмент «Палец» (R)) - имити-
рует размазывание пальцем свежей краски.
| - Path Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяет выбирать
контуры. Этой же кнопкой включается инструмент | ^ J - Direct Selection Tool (A)
(Инструмент «Прямой выбор» (А)), который позволяет выбирать сегмент контура.
- Pen Tool (Р) (Инструмент «Перо» (Р)) - создает контур любой формы. Этой кноп-
кой включаются также инструменты, позволяющие добавлять и удалять точки при-
вязки на линии и преобразовывать плавные кривые в ломаные и наоборот.
] - Notes Tool (N) (Инструмент «Комментарии» (N)) - создает текстовые коммента-
рии, которые могут быть добавлены к изображению. Этой кнопкой включается
Подготовка графики
4*
100 Создание Web-сайтов
на концах, | ^ j - Custom Shape Tool (U) (Инструмент «Заказная форма» (U) - для
рисования фигур, форма которых выбирается из предлагаемых образцов.
\^\ - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цвета на ри-
сунке и переопределения основного и фонового цветов. Этой же кнопкой включа-
ются инструменты \t?\ - Color Sampler Tool (I) (Инструмент «Образец цвета» (I)),
который позволяет перемещать/удалять образцы цвета и l ^ l - Measure Tool (I) (Ин-
струмент «Измеритель» (I)), который позволяет определять размеры линий и углов.
[Щ] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) - используется для увеличения и
уменьшения изображения на экране.
Под образцами цвета находятся две кнопки: Edit in Standard Mode (Q) (Редактиро-
вание в стандартном режиме (Q)) и Щ ] - Edit in Quick Mask Mode (Q) (Редактирование в
режиме «Быстрая маска» (Q)) - соответственно для выключения и включения режима
быстрой маски, позволяющего предохранить фрагменты изображения от изменения в
процессе редактирования.
Еще ниже располагаются три кнопки, предназначенные для быстрого переключения ре-
жимов просмотра рисунка: [S] - Standard Screen Mode (F) (Стандартный режим (F).|,
[В] - Full Screen Mode with Menu Bar (F) (Полноэкранный режим с полосой меню (F)),
[О] - Full Screen Mode (F) (Полноэкранный режим (F)).
У нижнего края рабочего окна находится строка состояния (Status Bar), предназначен-
ная для отображения информации о текущем документе, рабочих дисках, активном в
данный момент инструменте. Здесь могут появляться некоторые подсказки.
Теперь, когда мы познакомились с рабочим окном Adobe Photoshop, переключимся в
Adobe ImageReady и посмотрим, чем отличаются эти программы.
Под образцами цвета переднего плана и фона расположены четыре кнопки, имеющие
следующее назначение:
».У.
т а.
\ я. ИЗ
из
еш на
\ Wtb C
h».
aaa
i о. о i m a a
Рис. 4.7. Рабочее окно программы Adobe ImageReady
Name: |untitted-l|
г Beset: | Clipboard
(¥} Advanced
В поле ввода Name (Имя) в верхней части диалога можно указать имя создаваемого до-
кумента. По умолчанию предлагается Untitled-1 (Без имени-1). Не будем пока изменять
его. Мы сможем сделать это в дальнейшем, при сохранении рисунка.
В программе Adobe Photoshop предусмотрена возможность работы с рисунками за-
данного размера. Поэтому, создавая новый документ, следует сразу указать его раз-
мер. Если размер рисунка заранее не известен, то лучше сделать его побольше,
с запасом, а потом обрезать до нужного размера.
В следующих опытах этой главы мы подготовим баннер - рекламный рисунок - для рек-
ламы в Интернете сайта, созданного нами в первой главе. Как правило, баннер - это
графическое изображение прямоугольной формы в формате GIF или JPEG. Баннер по-
мещается на Web-странице и имеет ссылку на сайт рекламодателя. В последнее время в
связи с бурным развитием баннерной рекламы в Интернете, предпринимаются попытки
стандартизировать размеры баннеров. Первым шагом стандартизации стали рекоменда-
ции по размеру баннеров, предложенные Internet Advertising Bureau (Бюро рекламы
в Интернете) (http://www.iab.net/) совместно с CASIE (The Coalition for Advertising
Supported Information & Entertainment) (Коалиция рекламной поддержки информации и
развлечений), приведенные в таблице ниже.
>• В поле ввода Width (Ширина) введите ширину стандартного баннера - 468 пикселов.
>• В открывающемся в строке Width (Ширина) выберите pixels.
>• В поле ввода Height (Высота) введите высоту стандартного баннера - 60 пикселов.
>• В открывающемся в строке Height (Высота) выберите pixels.
Параметр Resolution (Разрешение) определяет разрешение создаваемого рисунка - ко-
личество пикселов на дюйм. .
В открывающемся списке Color Mode (Режим цвета) программа предлагает выбрать цве-
товой режим изображения, определяемый глубиной цвета или битовым разрешением, т.е.
количеством бит на один пиксел. По умолчанию предусмотрен режим RGB Color (Цвет
RGB), в котором на каждый пиксел отводится 24 бита (по 8 бит на каждый из трех цветов),
что дает возможность закодировать 16,7 миллиона оттенков. Этот режим иногда называют
TrueColor (Истинный цвет), так как он достаточно точно отображает цветовое многообра-
зие нашего мира. Именно данный режим наиболее пригоден для изображений, предназна-
ченных для показа на экране монитора. В соседнем открывающемся списке для режима
RGB можно выбрать 16 бит на каждый из трех цветов, т.е. 48 бит на один пиксел.
tl A
i +• ?.:
Ф
A w.
m
k «..
\ T
4 a
i /
ч
•IB »: шиш
ESQ
©>(*
р. аЗ а С в! ЗГI
• Drew м!«с1юп from ctnUr of subtract from existing i«l«clion.
В Adobe Photoshop каждый рисунок имеет свое собственное отдельное окно. Это позво-
ляет работать одновременно с несколькими изображениями.
В заголовке окна созданного документа, кроме его имени - Untitled-1, указан масштаб
изображения, вероятней всего - 66,7%, который зависит от установленного в данный
момент разрешения видеокарты вашего компьютера, а в скобках - цветовой режим -
RGB/8 (RGB, по 8 бит на каждый цвет). Текущий масштаб изображения - 66,67% - вы
можете видеть также в левом нижнем углу строки состояния (Status Bar).
> Введите с клавиатуры новое значение масштаба отображения документа - 100 - и на-
жмите клавишу [[Enter]. Масштаб отображения увеличится, и в окне документа появятся
i
вертикальная и горизонтальная полосы прокрутки, с помощью которых можно увидеть
части рисунка, не помещающиеся в окне.
Но использовать полосы прокрутки для созданного документа малого размера нецелесо-
образно. Удобнее будет увеличить размеры окна документа. Это выполняется так же,
как обычно изменяется размер окна в Windows.
> Установите указатель мыши на правом нижнем углу рамки окна документа так, что-
бы указатель мыши принял форму двунаправленной стрелки \ .
Нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз при-
мерно на расстояние, равное одной третьей части ширины и высоты окна документа.
Размер окна увеличится.
Отпустите левую кнопку мыши.
Если необходимо, повторно откорректируйте размер окна так, чтобы полосы про-
крутки отсутствовали (Рис. 4.10).
fdUntitled 1 & 1003: (RGB/0)
Справа от значения масштаба - 100% - в строке состояния (Status Bar) выводится ин-
формация о текущем документе: Doc: 82,ЗК /0 bytes. Первое число - 82.3К - объем до-
кумента в килобайтах. Этот объем программа вычисляет как произведение размеров до-
кумента в пикселах и глубины цвета. Второе число, после дробной черты - это объем
оперативной памяти, занимаемой неуплотненным файлом, с учетом дополнительных
слоев и альфа-каналов. Пока изображение в документе отсутствует, это число - 0 bytes
(0 байт). Подробнее о слоях и альфа-каналах мы поговорим позднее. Правее информа-
ции о размере документа выводятся сведения о выбранном в данный момент инструмен-
те на панели инструментов (Tools).
области с последующей заливкой или обводкой контура цветом. Это позволит быстрее
освоить весь арсенал инструментов Adobe Photoshop.
Сначала нарисуем прямоугольник, воспользовавшись для этого инструментом |[~].| -
Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)).
>• Убедитесь, что на панели инструментов (Tools) выбран инструмент |[llj -
Rectangular Marquee Tool (M) (Инструмент «Прямоугольная область» (М)): его
кнопка должна быть нажата. В противном случае - нажмите эту кнопку.
>• Установите указатель мыши в окне документа Untitled-1 вблизи левого верхнего его
края. Указатель мыши примет форму крестика + .
>• Нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз, примерно
к середине нижней стороны окна документа. В окне рисунка появится прямоугольная
рамка из движущегося пунктира, которая будет увеличиваться по мере перемещения
указателя мыши, указывая размер создаваемой прямоугольной области.
> Отпустите левую кнопку мыши. На рисунке будет создана прямоугольная область
выделения (Рис. 4.11).
Для окончания создания прямоугольной фигуры следует обвести контур выделения или
заполнить выделенную область цветом. Но предварительно цвет нужно выбрать. Adobe
Photoshop располагает несколькими способами выбора цвета. Наиболее простой - выбор
из образцов палитры Swatches (Каталог).
> Щелкните мышью на ярлыке Swatches (Каталог) в среднем окне палитр у правого края
экрана. Если данный ярлык отсутствует, выберите команду меню Window • Swatches
(Окно • Каталог). На экране появится палитра Swatches (Каталог) (Рис. 4.12).
108 Создание Web-сайтов
[—|x
1
jLColor 1 Swalchej\Sty!es ^t ИИ
f
Ш •I
i
•1
Ml
9 R в t
Pz/e. 4.72. Палитра Swatches (Каталог)
Теперь можно с помощью инструмента \&\ - Paint Bucket Tool (G) (Инструмент «Залив
ка» (G)) залить выбранным цветом выделенную прямоугольную область.
>- Нажмите и удерживайте кнопку |ClJ - Gradient Tool (G) (Инструмент «Градиент» (G))
на панели инструментов (Tools). Появится дополнительная панель с перечнем инст-
рументов, которые включаются данной кнопкой.
>• Щелчком мыши выберите инструмент |<$»J - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)). Его значок отобразится на кнопке, а кнопка будет нажата.
Теперь можно выполнить заливку.
>• Установите указатель мыши, который примет форму <J>, внутри прямоугольной об-
ласти выделения.
>• Щелкните мышью в этом месте. Выделенная область будет залита выбранным цве-
том (Рис. 4.13).
filUntitled-1 @ 100% (RGB/8)
1 1
i
i
Рис. 4.13. Область выделения залита цветом
i
Теперь обведем контур прямоугольника, но другим цветом, для выбора которого вос-
пользуемся палитрой Color (Цвет), предоставляющей более широкие возможности ука-
зания цвета.
Подготовка графики 109
> Щелкните мышью на ярлыке Color (Цвет) в среднем окне палитр. Вместо палитры
Swatches (Каталог) появится палитра Color (Цвет) (Рис. 4.14).
>• Не отпуская клавишу ll А " I. щелкните мышью на кнопке []Д] - Rectangular Marquee
Tool (М) (Инструмент «Прямоугольная область» (М)). Будет выбран инструмент | Q , | -
Ellipticaf Marquee Tool (M) (Инструмент «Эллиптическая область» (М)), и вы увидите
его нажатую кнопку.
Подготовка графики 111
Чтобы нарисовать выделенную область в виде круга, следует при перемещении мыши
удерживать нажатой клавишу l[shlttl. Для рисования эллиптической области от центра
необходимо при перемещении указателя мыши удерживать нажатой клавишу ll A l t I.
Для выбора цвета заливки эллипса воспользуемся еще одним, новым способом.
>• Щелкните мышью на образце цвета переднего плана (Set foreground color) на
панели инструментов (Tools). На экране появится диалог Color Picker (Палитра
цветов) (Рис. 4.18).
® H : l£ _j° ®l- |°
OS:
l£_J % Oa;
|°
OB: |0 [% Ob: \0_
OR: [Я__ С175 j %
OG: [0 M:|68 j %
OB: [£__ Y:|67 J%
Book: [PANTONE®_soMco3ted_
ZJd
~СапсёГ~|
PANTONE 7401 С
PANTONE 7402 С
PANTONE 7403 С
PANTONE 7404 С
> Нажав кнопку ОК, закройте диалог Color Picker (Палитра цветов). Выбранный цвет
отобразится на образцах в палитре Color (Цвет) и на панели инструментов (Tools).
Зальем цветом выделенную эллиптическую область следующим образом.
Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог Fill
(Заливка) (Рис. 4.20).
В открывающемся списке Use (Использовать) вы можете выбрать, какой цвет ис-
пользовать для заливки: Foreground Color (Цвет переднего плана), Background
Color (Цвет фона), Black (Черный), 50% Gray (50% серого), White (Белый) и другие
возможности.
114 Создание Web-сайтов
Г Contents
Use: | Foreground Color
Custom Pattern:
- Blending •
Mode: | Normal El
Opacity: 1100 |%
D Besafye Ti areparercy
> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения). Эллип-
тическая область выделения будет сжата на 16 пикселов.
Чтобы расширить область выделения следует выбрать команду меню Select • Modify •
Expand (Выделение • Модификация • Расширить).
Зальем сжатую выделенную область белым цветом фона.
>• Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог
Fill (Заливка).
>• В открывающемся списке Use (Использовать) выберите Background Color (Цвет фона).
> • Закройте диалог Fill (Заливка), нажав кнопку ОК. Сжатая эллиптическая выделенная
область будет заполнена белым цветом фона (Рис. 4.22).
"KUntilled I @ 1002 (RGB/8)
Щ Contrict
иЗУ! ••
(Окно • События). На экране появится палитра History
(События).
m m 9 •
> Увеличьте высоту окна палитры History (События),
Рис. 4.23. Палитра
чтобы увидеть всю информацию, содержащуюся в ней
History (События)
(Рис. 4.23).
В этой палитре вы видите перечень выполненных при работе над документом операций.
Каждая операция обозначена миниатюрой и названием. Последняя выполненная опера-
ция - Fill (Заливка) - выделена темным цветом. Любую из операций можно отменить
несколькими способами.
>• Чтобы отменить последнюю операцию заливки сжатой эллиптической области цве-
том фона, перетащите значок этой операции - Fill (Заливка) - на кнопку с изображе-
нием корзины | Ш | - Delete current state (Удалить выделенную операцию) в нижней
части палитры History (События). Заливка сжатой эллиптической области белым
116 Создание Web-сайтов
цветом на рисунке будет удалена, а в палитре History (События) будет выделена опе-
рация Contract (Сжатие).
Отменим также и эту операцию.
>• Нажмите кнопку 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 (Кисть) с
образцом активной кисти.
Рис. 4.25. Панель параметров инструмента Eraser Tool (Е)(Инструмент «Ластик» (Е))
Подготовка графики 117
На образце в левой части диалога отображаются текущая форма и размер кисти. Ее на-
звание - Hard Round 50 1 (Жесткая, круглая, 50 1) - указано в поле ввода Name (Имя).
>- В поле ввода Name (Имя) укажите имя Новая кисть и нажмите кнопку ОК, чтобы
закрыть диалог Brush Name (Имя кисти).
Созданная кисть и ее размер отобразятся в палитре Brushes (Кисти) в конце перечня
образцов. Ее имя появляется во всплывающей подсказке при наведении указателя мы-
ши на кисть.
> Щелкните мышью на свободном пространстве рабочего окна, чтобы закрыть палитру
кистей.
Теперь можно с помощью инструмента | ] - Eraser Tool (E) (Инструмент «Ластик» (Е))
удалить прямоугольник на рисунке.
118 Создание Web-сайтов
>• Установите указатель мыши на прямоугольнике в окне документа. Вы увидите, что
теперь размер указателя мыши - круглой кисти - значительно больше, чем прежде.
>* Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, перемещайте указатель мыши по прямоугольнику
вправо и влево, пока весь объект не будет закрашен белым цветом фона.
> Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален.
Итак, мы познакомились с приемами рисования и удаления простых объектов. Теперь
можно приступить к созданию баннера.
>• Удерживая нажатой клавишу иAlt I. три раза нажмите кнопку [Су - Elliptical Marquee
Tool (M) (Инструмент «Эллиптическая область» (М)) на панели инструментов
(Tools). Будет выбран инструмент [О] - Rectangular Marquee Tool (M) (Инструмент
«Прямоугольная область» (М)).
Adobe Photoshop позволяет создавать области выделения заранее заданных размеров,
для указания которых и определения других свойств объекта используется панель пара-
метров (Options Bar) (Рис. 4.29). Панель с параметрами каждого инструмента всегда
открывается при выборе инструмента. Элементы управления этой панели зависят от вы-
бранного инструмента.
Подготовка графики 119
> В открывающемся списке Style (Стиль) панели параметров (Options Bar) выберите
Fixed Size (Фиксированный размер), чтобы создать прямоугольную область опреде-
ленного размера.
Теперь в полях ввода Width (Ширина) и Height (Высота) следует указать размеры облас-
ти выделения.
> Дважды щелкните мышью в поле ввода Width (Ширина), чтобы выделить числовое
значение в нем.
>• Введите с клавиатуры значение ширины прямоугольной области -150 рх (150 пикселов).
> В поле ввода Height (Высота) введите высоту прямоугольника - 50 рх (50 пикселов),
предварительно выделив двойным щелчком мыши находящееся там число.
Установка параметра Feather (Растушевка) создает плавный переход между пикселами
выделенной области и пикселами, окружающими ее. Это делает края выделенной облас-
ти расплывчатыми и исключает резкий переход.
Установка флажка Anti-aliased (Сглаживание) позволяет свести до минимума контраст
на границах между пикселами и создает более мягкие переходы между объектами.
отсчитываются от верхнего левого угла рисунка, причем ось X направлена вправо, а ось
Y - вниз. Координаты указателя мыши по умолчанию измеряются в сантиметрах.
Однако, поскольку размеры прямоугольника мы задали в пикселах, то нам было бы
удобнее, если бы и координаты указателя мыши выражались в пикселах. Поэтому изме-
ним соответствующую установку.
> Нажмите кнопку 0 в правом верхнем углу
палитры Info (Информация) и в появив-
шемся меню выберите команду Palette
Options (Параметры палитры). На экране
появится диалог Info Options (Параметры
палитры «Информация») (Рис. 4.31). Second Color Readout •
указатель мыши.
П Show 16 bit values
Установка флажка Show 16 bit values (Пока-
зывать 16-битные значения) требуется только Рис. 4.31. Диалог Info Options
тогда, когда для рисунка выбрана цветовая (Параметры палитры «Информация»)
модель RGB с 16 битами на каждый цвет.
> В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels (Пикселы).
>• Закройте диалог Info Options (Параметры палитры «Информация»), нажав кнопку ОК.
Теперь в палитре Info (Информация) координаты указателя мыши и размеры объектов
будут отображаться в пикселах.
Создадим прямоугольную область выделения заданного размера и зальем ее цветом.
>• Установите указатель мыши у левого верхнего угла окна документа так, чтобы в па-
литре Info (Информация) отобразились его координаты: Х:5, Y:5.
> Щелкните мышью в этой точке. В окне документа появится прямоугольная область
выделения, а в палитре Info (Информация) отобразятся ее размеры: W: 150, Н: 50.
>• Залейте созданную прямоугольную область выделения выбранным ранее цветом, вос-
пользовавшись инструментом [<j§] - Paint Bucket Tool (G) (Инструмент «Заливка» (G)).
>• Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение области.
Теперь нам нужно создать внутри прямоугольника эллиптическую область с размерами
горизонтальной и вертикальной осей соответственно 140 и 40 пикселов и залить ее бе-
лым цветом фона.
"АИA l t
Удерживая нажатой клавишу И I. нажмите кнопку |[I],| - Rectangular Marquee
Tool (M) (Инструмент «Прямоугольная область» (М)) на панели инструментов
(Tools). Будет выбран инструмент \Q} - Elliptical Marquee Tool (M) (Инструмент
«Эллиптическая область» (М)), а на панели параметров (Options Bar) появятся соот-
ветствующие элементы управления.
Подготовка графики 121
v Убедитесь, что в открывающемся списке Style (Стиль) панели параметров (Options
Ваг) выбрано Fixed Size (Фиксированный размер).
> В полях ввода Width (Ширина) и Height (Высота) панели параметров (Options Bar)
введите соответственно размеры горизонтальной - 140 рх - и вертикальной - 40 рх -
осей эллипса.
Нарисуем эллиптическую область выделения заданного размера внутри прямоугольника.
>- Установите указатель мыши у левого верхнего угла прямоугольника так, чтобы в
палитре Info (Информация) отобразились координаты указателя мыши: X: 10, Y: 10.
> Щелкните мышью в этой точке. Внутри прямоугольника будет создана эллиптиче-
ская выделенная область, размеры которой вы увидите в палитре Info (Информация).
Зальем область выделения белым цветом фона.
>• Выберите команду меню Edit • Fill (Правка • Залить). На экране появится диалог Fill
(Заливка).
> Убедитесь, что в открывающемся списке Use (Использовать) выбрано Background
Color (Цвет фона).
> Закройте диалог Fill (Заливка) нажатием кнопки ОК. Эллиптическая область выделе-
ния будет залита белым цветом.
>• Отмените выделение, выбрав команду меню Select • Deselect (Выделение • Отме-
нить выделение). Изображение примет вид, как на Рис. 4.32.
Так как наш баннер создается на белом фоне, то можно сделать по его периметру тон-
кую рамку, чтобы границы баннера были видны, если фон Web-страницы будет белым1.
Для этого следует выделить весь рисунок.
>• Выберите команду меню Select • All (Выделение • Все). Весь рисунок в окне
документа будет выделен, и вдоль его краев появится рамка выделения.
Обведем контур выделения цветом переднего плана.
> Выберите команду меню Edit • Stroke (Правка • Обвести). На экране появится диа-
лог Stroke (Правка • Обводка).
>• Не изменяя предлагаемых параметров, закройте этот диалог нажатием кнопки ОК.
Следует отметить, что рамку вокруг рисунка на Web-странице можно создать средствами HTML.
122 Создание Web-сайтов
Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не потерять гго
при возможных сбоях в работе компьютера или отключении электропитания. Мы уже
говорили о том, что для использования изображения на Web-странице оно должно быть
сохранено в одном из Web-форматов: GIF, JPG или PNG. Однако промежуточные сохра-
нения следует выполнять в собственном формате Adobe Photoshop - PSD, так как только
в данном формате можно сохранить изображение без потери качества. Это позволит при
необходимости вернуться к редактированию отдельных объектов.
>• Выберите команду меню File • Save (Файл • Сохранить). На экране появится диагсог
Save As (Сохранить как) (Рис. 4.33).
r- Save Options -
Save: D As a Cop* D fenratatons
• Abfcj Channels: Dsoot colors
П1»!
Color: D Use Proof Setup: Waking a-f(К
0 ICC Profile: sRGB IEC61966-2.1
Значок в виде открытого глаза 3$ у левого края строки с названием слоя позволяет вы-
ключить отображение этого слоя, чтобы оно не мешало работе с другими слоями.
Остальные элементы управления палитры Layers (Слои) мы рассмотрим позднее,
а сейчас добавим в логотип надпись — название компании ГЕОТОН. Все надписи на
рисунках выполняются с помощью инструмента | T J - Horisontal Type Tool (T) (Инст-
румент «Горизонтальный текст» (Т)).
>- Нажмите кнопку | T J - Horisontal Type Tool (T) (Инструмент «Горизонтальный
текст» (Т)), чтобы включить этот инструмент. На панели параметров (Options Bar)
отобразятся элементы управления данного инструмента (Рис. 4.35), с помощью кото-
рых можно определить параметры текста.
Кнопки [Щ] - Change the text orientation (Изменить ориентацию текста) позволяет изме-
нить ориентацию текста с горизонтальной на вертикальную и наоборот.
>- В первом слева открывающемся списке Set the font family (Установка семейства
шрифтов) на панели параметров (Options Bar) выберите один из имеющихся на ва-
шем компьютере шрифтов, лучше из группы Arial.
124 Создание Web-сайтов
> Установите указатель мыши на рисунке в центре эллипса. Указатель мыши примет
Форму Ц].
>• Щелкните мышью в этой точке. Появится текстовый курсор. Вид панели параметров
(Options Bar) изменится (Рис. 4.36).
|| |[ X | Ш | О v4
Рис. 4.36. Панель параметров инструмента Horisontal Type Tool (T)
(Инструмент «Горизонтальный текст» (Т))
> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет помещено в
точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так как по умолчанию на
панели параметров (Options Bar) нажата кнопка \Ш\ - Left align text (Левостороннее
выравнивание текста).
Теперь выделим введенный текст и изменим начертание, размер и другие параметры.
>- Во втором слева открывающемся списке 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 (Установка способа
сглаживания) различные значения, просмотрите, как изменяются очертания символов
надписи на рисунке при разных уровнях сглаживания и при отсутствии сглаживания.
Выберите наиболее оптимальный, с вашей точки зрения, вариант сглаживания.
В поле ввода Set the baseline shift (Установка сдвига базовой линии) вы можете указать
сдвиг базовой линии, определяющий начальное смещение текста. Положительное значе-
ние сдвигает текст вправо и вверх, отрицательное - влево и вниз.
В предпоследней строке расположены кнопки для форматирования символов верхнего
или нижнего индекса, подчеркнутых, зачеркнутых и т.п.
В левом нижнем углу палитры расположен открывающийся список Set the language on
selected characters for hyphenation and spelling (Установить язык для выбранных сим-
волов для целей переноса и проверки орфографии).
В меню палитры Character (Символ), которое открывается при нажатии кнопки ©, дос-
тупны дополнительные команды форматирования, среди которых отметим следующие:
Faux Bold (Имитация полужирного) и Faux Italic (Имитация курсива) - позволяют уста-
новить соответствующее начертание даже для семейств шрифтов, которые не содержат
эти стили;
Fractional Width (Дробная ширина). При включенном режиме расстояние между симво-
лами текста измеряется не в целых пикселах, а в дробных. Это позволяет в большинстве
случаев придать тексту более привлекательный вид и улучшить его читаемость. Однако
применение дробной ширины для шрифтов малого размера, менее 20 пунктов, может
ухудшить их представление и затруднить чтение. Для таких шрифтов режим Fractional
Width (Дробная ширина) лучше отменить.
В палитре Paragraph (Абзац) определяются параметры абзаца: выравнивание, отступы,
пробелы до и после абзаца, расстановка переносов.
г
Для отмены ввода текста достаточно нажать на панели параметров кнопку - Cancel
any current ededits (Отменить все текущие правки).
Закончить ввод текста можно также, нажав клавишу | Enter| на цифровой клавиатуре или
Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой, которо-
му по умолчанию присвоено имя, соответствующее введенной надписи. Этот слой поме-
чен символом Т - текстовый - и выделен темным цветом, что означает, что в данный
момент слой активен, т.е. именно к нему будут относиться все ваши действия. На то, что
слой активен, указывает также имя слоя, появившееся в заголовке окна документа.
Подготовка графики 127
Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа имя слоя
отображается неправильно. Это связано с тем, что Adobe Photoshop не всегда правильно
отображает русские шрифты. В таком случае, чтобы в дальнейшем было удобно рабо-
тать, слою нужно присвоить английское имя и порядковый номер.
>• Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду Layer Properties (Свойства слоя). На экране появится диа-
лог Layer Properties (Свойства слоя) (Рис. 4.39).
Layer Properties =s
X
Name: [ ГЕОТОН 1 I OK 1
Color: | • None P| j Cancel
!
Puc. 4.39. Диалог Layer Properties (Свойства слоя)
> В поле ввода Name (Имя) введите новое название слоя - Layer 1 (Слой 1).
> Нажав кнопку ОК, закройте диалог Layer Properties (Свойства слоя). В заголовке
окна документа и в палитре Layers (Слои) отобразится новое имя слоя (Рис. 4.40).
Теперь нам нужно переместить надпись ГЕОТОН в центр
эллипса. Перемещение слоев и выделенных областей в на
Lay»"
Adobe Photoshop выполняется инструментом [•*] - Move
Tool (V) (Инструмент «Перемещение» (V)).
Нажмите кнопку [Ку - Move Tool (V) (Инструмент
«Перемещение» (V)) на панели инструментов (Tools),
чтобы выбрать этот инструмент.
Установите указатель мыши, который примет форму •*,
в окне документа на надписи ГЕОТОН.
Нажмите и удерживайте левую кнопку мыши. Рис. 4.40. Текстовый слой
Не отпуская левую кнопку мыши, переместите над- переименован
пись ГЕОТОН так, чтобы она была расположена в цен-
тре эллипса.
Отпустите левую кнопку мыши. Новое положение надписи будет закреплено
(Рис. 4.41).
" Й Beoton psd <а 100% ILayei 1. RGB/8)
на один пиксел в соответствующем направлении. Если при нажатии одной из этих кла-
Shitl
виш удерживать нажатой клавишу ll l, то объект будет перемещаться на 10 пикселов.
> Сохраните рисунок, выбрав команду меню File • Save (Файл • Сохранить).
При этом может появиться информационный диалог (Рис. 4.42), в котором гово-
рится о том, что если вы сбросите флажок Maximize compatibility (Максимизиро-
вать совместимость), то у вас могут возникнуть проблемы при использовании фай-
лов *.psd в других программах.
Photoshop Format Options
0 Maximize compatibility
Turning off Maximize Compatibility may interfere with the use of PSD files in
other applications or with future versions of Photoshop,
This dialog can be turned off in Preferences > File Handling > File Compatibility.
> Выделите введенный текст в окне документа, протащив по нему указатель мыши.
>•
В первом слева открывающемся списке Set the font family (Установка семейства
шрифтов) на панели параметров (Options Bar) выберите для надписи подходящую
гарнитуру шрифта из установленных на вашем компьютере.
Подготовка графики 129
>• Подберите также начертание и размер шрифта примерно 16-18 пунктов, в зависимо-
сти от выбранной гарнитуры.
>• Нажмите кнопку V у правого края панели параметров (Options Bar). Надпись будет
закреплена. В палитре Layers (Слои) изменится имя нового текстового слоя.
Восстановим прежнее имя нового слоя - Layer 2 (Слой 2).
>- Выберите команду меню Layer • Layer Properties (Слой • Свойства слоя). На экране
появится диалог Layer Properties (Свойства слоя) (Рис. 4.39).
> В поле ввода Name (Имя) введите Layer 2 и закройте диалог Layer Properties (Свой-
ства слоя) нажатием кнопки ОК. Новое имя отобразится в заголовке окна документа
и в палитре Layers (Слои).
> С помощью инструмента [К*] - Move Tool (V) (Инструмент «Перемещение» (V)) или
клавиш управления курсором выровняйте надпись в свободном пространстве окна
рисунка по вертикали и горизонтали (Рис. 4.43).
\У, Geoton psd & ЧШХ (Layer 2. RGB/8)
5-1210
130 Создание Web-сайтов
> Нажмите клавишу F»Tabl. чтобы переместить фокус в поле ввода G (Зеленый) и выде-
лить его числовое значение.
Нажмите комбинацию клавиш IIc t r l |+j[Enter|T чтобы завершить ввод текста. В окне ри-
сунка добавленная надпись будет расположена на новом слое, поверх предыдущей
надписи. Название нового слоя в палитре Layers (Слои) будет изменено в соответст-
вии с введенным текстом.
Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога Layer Properties
(Свойства слоя) щелкните правой кнопкой мыши на названии вновь созданного слоя
в палитре Layers (Слои) и в появившемся контекстном меню выберите комавду
Layer Properties (Свойства слоя).
Воспользовавшись клавишами управления курсором при включенном инструменте
[К{Г| - Move Tool (V) (Инструмент «Перемещение» (V)) совместите начало верхней
надписи с началом нижней и выровняйте верхнюю надпись по вертикали (Рис. 4.44)
V , Geolon.psd & 1002 (Layei 3. RGB/8)
^ сеть?
Кроме уже рассмотренного способа создания нового слоя с помощью кнопки [~Д~| -
Create new Layer (Создать новый слой) у нижнего края палитры Layers (Слои), создать
новый слой вы можете и другими способами, например:
> Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся
меню выберите команду New Layer (Новый слой). На экране появится диалог New
Layer (Новый слой), в поле ввода которого Name (Имя) для нового слоя предлагается
имя Layer 4 (Слой 4) (Рис. 4.45).
Подготовка графики 131
> Нажмите кнопку ОК, чтобы закрыть
этот диалог и принять предлагаемое
имя. В палитре появится и станет ак-
тивным новый слой, которому будет D Use Previous Layer to Create CliDping Mask
присвоено имя Layer 4 (Слой 4).
Название нового слоя вы увидите так-
же в заголовке окна документа. D (bio neutial color exfcts for Normal mode,)
Наша следующая задача - преобразовать выделенную область так, чтобы после заливки
и обводки она выглядела как открытая дверь. Чтобы точнее выполнить эту операцию,
следует увеличить масштаб отображения рисунка. Текущий масштаб - 100% - вы види-
те в заголовке окна документа и в строке состояния (Status Bar). Изменить масштаб
можно с помощью инструмента\*К\ — Zoom Tool (Z) (Инструмент «Масштаб» (Z)).
> Нажмите кнопку [QTJ - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели инст-
рументов (Tools), чтобы выбрать этот инструмент.
v Установите указатель мыши на рисунке, внутри выделенной области. Указатель мы-
ши примет форму <*^.
4
> Щелкните мышью в этом месте. Масштаб отображения рисунка увеличится на 100%
и новое значение масштаба - 200% - отобразится в заголовке окна документа и в
строке состояния.
>• Нажмите кнопку Q3] в правом верхнем углу окна документа, чтобы развернуть его на
весь экран.
>• Щелкните еще несколько раз мышью, установив ее указатель на рисунке. Каждый
щелчок мышью будет увеличивать масштаб изображения на 100%.
Уменьшить масштаб отображения документа можно следующим способом:
Отпустите клавишу li A l t I.
> Удерживая нажатой клавишу il A l t I. нажмите кнопку y/j -Brush Tool (В) (Инструмент
«Кисть» (В)) на панели инструментов (Tools). Будет выбран инструмент |^/] -
Pencil Tool (В) (Инструмент «Карандаш» (В)).
Этот инструмент позволяет рисовать произвольные линии - прямые и кривые.
Для рисования горизонтальной или вертикальной прямой следует удерживать нажа-
той клавишу |shift|.
> Установите указатель мыши примерно у середины левого
края «двери».
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Итак, мы создали рисунок, состоящий из основного слоя Background (Фон) и четырех
слоев - Layer 1, Layer 2, Layer 3, Layer 4. Посмотрим теперь, что можно делать со
слоями.
Заходите СЮДА!
>• Щелкните мышью на строке слоя Background (Фон) в палитре Layers (Слои). Строка
будет выделена темным цветом. Данный слой станет активным, и информацию об
этом вы увидите в заголовке окна документа.
Другой способ активизации слоя позволяет выбирать его из контекстного меню.
>- Установите указатель мыши в окне рисунка на надписи Вам нужна локальная сеть?
>• Нажмите и удерживайте клавишу I cw |. Указатель мыши примет форму Kj.. Это значит,
что при включенном инструменте [•*] - Move Tool (V) (Инструмент «Перемещение»
ctr!
(V)) клавишу Si I можно не нажимать.
ctrl
> Не отпуская клавишу ,1 1. щелкните правой кнопкой
Layer 2
мыши. На экране появится контекстное меню с перечнем Layer 3
доступных в данной точке слоев (Рис. 4.61). Background
> Выберите из контекстного меню слой Layer 3. Этот
слой станет активным и будет выделен в палитре Рис. 4.61. Контекстное
Layers (Слои). меню слоев
> Щелкните мышью в поле Indicates if layer is linked (Индикация связанного слоя)
слева от миниатюры слоя Layer 4. В этом поле появится значок в виде цепи §£, ука-
зывающий на то, что теперь этот слой связан с активным.
Чтобы связать слои в версии CS2, надо сначала выделить все нужные
слои в палитре слоев при нажатой клавише [[shift] или[[ ш ] ta зате
м щелк-
нуть мышью на значке цепи в нижней части палитры слоев.
6 версии 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%, т.е. слои абсолютно непрозрачны.
>• Щелкните мышью на кнопке [•] у правой границы поля ввода 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).
Diop Shadow...
Inner Shadow...
Dulei Glow...
Inner Glow...
Bevel and Emboss...
Satin...
Color Overlay...
Gradient Overlay...
Pattern Overlay...
Stroke...
Global Light...
Create Layet
Hide All Eflecls
Scale Effects...
- Shading
—л—' IS. l %
2paci v
Г Strok» '' '
Shadow Mode: |Multiply jfjM
Opacity:
Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) отмечено
флажком и выделено название выбранного эффекта - Bevel and Emboss (Скос и рель-
еф). На этой же панели вы можете выбрать, установив флажок, другие доступные эф-
фекты из перечисленных выше.
При установленном слева от названия эффекта флажке данный эффект будет применен к
слою после закрытия диалога кнопкой ОК. Чтобы отменить эффект, достаточно, вызвав
диалог, сбросить соответствующий флажок.
> Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажок Preview
(Предварительный просмотр). При этом все изменения параметров, сделанные в
диалоге, будут сразу же отображаться на рисунке.
Следует отметить, однако, что значения параметров, заданные по умолчанию, являются
оптимальными и в большинстве случаев создают наиболее яркие эффекты. На рисунке в
окне документа вы можете видеть, как будет выглядеть надпись ГЕОТОН при значениях
параметров эффекта, определенных по умолчанию.
Эффект рельефности надписи создается комбинацией подсветки (Highlight) и затенения
(Shadow), параметры которых определяются соответствующими элементами управле-
ния. В каждой из групп можно выбрать цвет тени или свечения, щелкнув мышью на об-
разце, степень непрозрачности этого цвета (Opacity) и режим наложения пикселов
(Mode). Значения, установленные по умолчанию, обычно дают наилучший результат.
В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вариантов дан-
ного эффекта.
144 Создание Web-сайтов
Styles OK
Blending Options: Default
Щ Preview
— Quality
Contour: П Anll-ateed
Noise: л
На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи) и справа
отображаются элементы управления эффектом.
Выбранный эффект имитирует тень, которую отбрасывает содержимое слоя. И этот эф-
фект, созданный параметрами по умолчанию, вы видите в окне документа.
Элементы управления Blend Mode (Режим наложения) и Opacity (Непрозрачность) оп-
ределяют соответственно режим наложения пикселов и степень непрозрачности тени.
Применяемая по умолчанию тень создается черным цветом. Однако для выбранного
объекта такой цвет тени не является наилучшим. Выберем другой цвет тени, более близ-
кий к цвету надписи.
> Щелкните мышью на поле с образцом цвета справа от открывающегося списка Blend
Mode (Режим наложения). На экране появится диалог Color Picker (Палитра цветов).
>• Если этот диалог перекрывает окно документа, переместите его в сторону, чтобы
видеть на рисунке результат выбора цвета.
146 Создание Web-сайтов
Следует помнить, что все эффекты, которые применяются к слою, связаны с его содер-
жимым. В процессе редактирования слоя соответственно изменяется и эффект.
е: |UnlMed-l
Image S t e -
: [custom
115 | pixels
> Установите флажок Fixed Size (Фиксированный размер), чтобы создать прямоуголь-
ник определенного размера.
>• В полях ввода Width (Ширина) и Height (Высота) введите размеры кнопки -
235 рх и 35 рх.
>• Нажмите кнопку [и] - Create filled region (Создать заполненную область) на панели
параметров (Options Bar), чтобы создать залитую цветом фигуру.
Теперь, когда параметры прямоугольника заданы, его можно нарисовать.
>- Установите указатель мыши в окне документа, у его левого края
>• Нажмите и удерживайте левую кнопку мыши. В окне документа появится рамка пр;ь
моугольника заданного размера.
> Не отпуская левую кнопку мыши, переместите указатель мыши так, чтобы перемес-
тившийся вместе с ним прямоугольник расположился в центре окна документа.
>• Отпустите левую кнопку мыши. Прямоугольник будет закреплен и залит желтым
цветом переднего плана (Рис. 4.71).
Подготовка графики 149
Применим к слою Layer 1, на котором расположен
прямоугольник, эффект Bevel and Emboss (Скос и "rjUnlitledi @ 1002 (Original) H E I I 3
рельеф), создающий иллюзию рельефности кнопки.
>- Чтобы видеть в палитре Layers (Слои) все эффек-
ты и слои, которые мы создадим, переместите эту
палитру вверх, расположив ее справа от окна до-
кумента так, чтобы она не перекрывала другие па-
литры, и увеличьте ее высоту примерно в 2 раза.
> Нажмите кнопку fjg - Add a layer effect (Добавить !| .. /•• sec @ 2 8 . 8 Kbps • » ;
эффект к слою) в нижней части палитры Layers Рис. 4.71. Залитый цветом
(Слои). На экране появится меню эффектов. прямоугольник
Это меню содержит перечень тех же эффектов, что
и аналогичное меню в Adobe Photoshop.
> Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф). На эк-
ране появится диалог Layer Style (Стиль слоя) с элементами управления эффекта
Bevel and Emboss (Скос и рельеф) (Рис. 4.72).
Layer Style
П Pattern Overlay
• Stroke
Gloss Contoui
Opacity: — i » i ^ ) — |
Opacity i » — ищщ|ц.|...ццф—» | 75
1•
держимое Web) в третьем сверху окне палитр. ; Web Content \ C o l o r Table ©
В
Если такого ярлыка нет, выберите команду ме-
ню Window • Web Content (Окно • Содержи-
мое Web). Палитра отобразится в рабочем окне
Image Maps
(Рис. 4.77).
Slices
кадр для состояния Over (Над) (Рис. 4.78), при кото- Out
ром указатель мыши перемещается по объекту или Up
находится над ним, и кнопки мыши не нажаты. Click
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 В I - Creates rollover state (Создать состояние) в нижней части
палитры Web Content (Содержимое Web). В этой палитре появится новый кадр для
состояния Down (Нажатие).
Для вновь создаваемых кадров Adobe ImageReady по умолчанию предлагает состояния в
том порядке, в каком они располагаются в меню состояний. Но как указывалось выше,
вы можете выбрать из меню другое состояние.
Оставим для нового кадра состояние, предлагаемое по умолчанию. При этом состоянии,
т.е. когда нажимается кнопка мыши, графическая кнопка на Web-странице должна
выглядеть нажатой. Изменим соответствующим образом для текущего кадра параметры
эффекта Bevel and Emboss (Скос и рельеф).
154 Создание Web-сайтов
первую страницу
•
Origirni: "Knopka.psd"
314К
первую страницу
Та первую страницу
GIF
992 byles
100% diihtr
Selective palette
первую страницу
1 sec @ 28.8 Kbps 1в colors
100% -r ;992 by»! Л sec @ 28.8 ...•» | 3I4K/9S2 byl«s GIF •» 100% •» |992 b y « s / l isc 9 28.8 ...• | 31*: / 992 byl« GIF
Рис. 4.83. Режим 2-Up (2 варианта) Рис. 4.84. Режим 2-Up (2 варианта)
с отображаемой информацией со скрытой информацией
156 Создание Web-сайтов
V^ Color Table
> Щелкните мышью на треугольнике ^ слева от Reduction: iGrayscale _Xf|IQI
строки Color Table (Таблица цветов). Эта часть
палитры Optimize (Оптимизация) будет развер-
Colors: | _ ^ _ J j J •
нута (Рис. 4.87). WebSnjp: [o%_ [ j |
& Dither
Чтобы вновь свернуть часть палитры, достаточно [> Transparency
щелкнуть мышью на треугольнике "7 слева от на- 1> Options
звания развернутого раздела. Чтобы развернуть все
разделы палитры Optimize (Оптимизация), надо Рис. 4.87. Элементы управления
нажать кнопку 0 в правом верхнем углу палитры Color Table (Таблица цветов)
и в появившемся меню выбрать команду Show палитры Optimize (Оптимизация)
Options (Показать параметры), а чтобы свернуть -
команду Hide Options (Скрыть параметры).
Одним из лучших способов уменьшения размеров GIF или PNG-8 файлов при сохране-
нии качества является максимально возможное сокращение количества цветов в изобра-
жении. В открывающемся списке Reduction (Уменьшение) расширяемой части Color
158 Создание Web-сайтов
Table (Таблица цветов) (Рис. 4.87) вы можете выбрать одну из предложенных цветовых
палитр или таблиц для преобразования изображения из полноцветного в 256-цветное.
Напомним, что такое преобразование необходимо, так как формат GIF поддерживает не
более 256 цветов. Палитры отличаются способом их формирования:
Perceptual (Воспринимаемая) - формирует пользовательскую палитру из цветов, к кото-
рым наиболее чувствителен глаз человека;
Selective (Выборочная) - создает палитру, подобную предыдущей, но содержит также
Web-цвета. Выбирается по умолчанию;
Adaptive (Адаптивная) - формирует таблицу цветов путем взятия проб в тех участках
спектра, которые наиболее активно использованы в изображении. Например, при обра-
ботке RGB-изображения в зелено-голубых тонах таблица будет составлена преимущест-
венно из оттенков зеленого и голубого цветов. Этот вариант может оказаться достаточно
удобным, поскольку во многих случаях цвета, использованные в изображении, сконцен-
трированы в определенных участках спектра. Если до начала преобразования вы выде-
лите в изображении области, содержащие те цвета, которые вам хотелось бы включить в
адаптированную палитру, то Adobe ImageReady будет формировать таблицу на основе
выделенного диапазона цветов;
RestrictiMy (Web) (Ограниченная (Web)) - использует стандартную Web-палитру из
216 цветов, общих для палитр Windows и Мае, использование которой гарантирует, что
цвета не будут подвергаться смешиванию в браузере. Эту палитру также называют безо-
пасной (Web-safe palette);
Custom (Пользовательская) - сохраняет текущую Perceptual (Воспринимаемая),
Selective (Выборочная) или Adaptive (Адаптированная) палитру как фиксированную,
которая не обновляется для каждого изображения;
Black & White (Черно-белая);
Grayscale (Градации серого) - использует 256 градаций серого;
Mac OS - использует стандартную 256 цветную палитру операционной системы Macintosh,
также основанной на равномерной выборке RGB-цветов по всей длине спектра;
Windows - использует стандартную 256 цветную па-
литру Windows, которая основана на равномерной, с 1
j_Wjb Content4] Color T a b l e \ __(£)
ai
постоянным интервалом, выборке RGB-цветов по всей i
длине спектра.
Набор цветов каждой из перечисленных таблиц вы мо- 1i.
z
t-
жете увидеть в палитре Color Table (Цветовая таблица). мяв •
_
> Выберите из открывающегося списка Reduction - - -
i
(Уменьшение) значение Grayscale (Градации серого).
о
ItCnopka
Id
|HTML end Images ("Wml)
|DelaJ Sellings
Id
|All Slices LTJ
Так как мы уже сохранили документ перед оптимизацией, то на этот запрос можно отве-
тить отрицательно.
>• Нажмите кнопку Нет (No). Программа Adobe ImageReady закроется. Вы возвратитесь
к программе Adobe Photoshop.
Посмотрим, что представляет собой созданный файл.
• Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web.
В этом файле записана автоматически созданная на языке JavaScript программа, изме-
няющая состояние изображения кнопки при различных действиях, выполняемых мы-
шью. Сами изображения находятся в папке images. Такая программа обычно состоит из
команд (операторов) и команд вызова функций. В нашем случае функции находятся в
заголовке HTML-документа между тегами <head> и </head>, а команды, их вызываю-
щие, - в его теле, между тегами <body> и </body>.
164 Создание Web-сайтс в
Обрабатываем фото
На своих Web-страницах вы, конечно же, будете помещать не только баннеры, кнопки и
рисунки, но и фотографические изображения. Фотографии для Web могут быть взяты из
библиотек цифровых фотографий, распространяемых на CD-ROM, загружены из WWW,
получены с помощью видеокамеры, цифрового фотоаппарата или же путем сканирова-
ния фотографий и слайдов, снятых пленочным фотоаппаратом.
Одно из существенных преимуществ цифровой фотографии, помимо оперативности и
удобства, - широкие возможности редактирования изображений. Ретушь, фотомонтаж,
всякого рода художественные эффекты на цифровых фото осуществляются значительно
проще, существенно быстрее и, самое главное, не требуют от исполнителя каких-либо
особых навыков и квалификации. Однако самой впечатляющей является возможность
коррекции и полного исправления таких недостатков экспозиции, перспективных и гео-
метрических искажений, коррекция которых в традиционной фотографии просто невоз-
можна. В очередных опытах мы поговорим о процессе подготовки фотографий для Web,
а для иллюстрации основных возможностей их обработки воспользуемся фотографиями,
хранящимися на прилагаемом к книге компакт-диске в папке Photos.
Mod»; iNormal ',- | Opacity! Пор% I > I Flow: | 100% P;A«gn«d Г ) Use AI Ljytrs
Теперь нам нужно выбрать мягкую кисть, форма и размер которой определяет форму и
размер фрагмента изображения, переносимого на дефектный участок. Поскольку уда-
ляемый блик имеет округлую форму, то и форма кисти должна быть такая же, а размер
кисти — несколько больше блика.
> Нажмите кнопку Q) справа от образца текущей кисти Brush (Кисть) на панели
параметров (Options Bar), чтобы открыть палитру кистей.
Напомним, что название кисти появляется во всплывающей подсказке, если навести и
удерживать на выбранной кисти указатель мыши.
> Выберите кисть Soft Round 35 pixels (Мягкая круглая 35 пикселов), щелкнув на ней
мышью.
> Щелкните мышью на свободном пространстве рабочего окна. Палитра кистей
закроется.
Заметьте, что для клонирования следует воспользоваться кистью с мягкими краями, чтобы
максимально сгладить переход между существующим и перенесенным изображением.
Процесс клонирования состоит из двух операций. Сначала следует выбрать образец для
замены дефектного фрагмента, а затем выполнить замену. Чтобы на месте исправленно-
го дефекта не было заметно «заплатки», нужно правильно выбрать область-источник:
того же оттенка, с такой же освещенностью и т.д. В нашем случае по этим параметрам
для клонирования лучше всего подходит участок справа от блика.
> Установите указатель мыши, который примет форму круга диаметром 35 пикселов, на
фотографии справа от белого блика так, чтобы блик находился за пределами круга.
>• Нажмите и удерживайте клавишу цА '' I. Указатель мыши примет форму @.
Цате: [Levels 1
Color: I D None
В поле ввода Name (Имя) этого диалога по умолчанию предлагается имя слоя - Levels 1
(Уровни 1). Данный тип корректирующего слоя настраивает уровни яркости и контраст-
ности изображения. Это то, что нам нужно.
Подготовка графики 169
Установка флажка Use Previous Layer to Create Clip-
ping Mask (Использовать предыдущий слой для созда-
ния маски) позволяет применить коррекцию яркости и
контрастности только к одному нижележащему слою.
Параметры Opacity (Непрозрачность) и Mode (Режим)
позволяют сразу же определить степень непрозрачно-
сти и режим наложения пикселов. Корректирующие
слои приобретают такие же характеристики непро-
зрачности и режима наложения, что и реальные слои.
>• Нажатием кнопки ОК закройте диалог 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.
> Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
176 Создание Web-сайтс а
> Нажмите кнопку [В] в правом верхнем углу окна документа Samolet.jpg, чтобы раз-
вернуть его на весь экран.
>• Воспользовавшись полосами прокрутки, поместите изображение в центре экрана
(Рис. 4.105).
2JJJE[:VKf!3Sb.
ш
9 О О XX ы аЬ
Рис. 4.107. Палитра
Paths (Контуры)
Несмотря на то, что контуры отображаются на экране, они не содержат пикселов, так как
являются не растровыми, а векторными изображениями. В векторной графике, в отличие
от растровой, изображение строится не из пикселов, а описывается в виде математиче-
ских объектов - контуров.
Контур состоит из одного или нескольких сегментов.
Начало и конец каждого сегмента определяют специ-
альные точки привязки или узлы (Рис. 4.108). Конту-
ры могут быть прямолинейными и криволинейными,
замкнутыми и открытыми. Криволинейный контур
имеет направляющие, с помощью которых можно на-
страивать его форму. Замкнутый контур не имеет на-
Рис
чальной и концевой точек; например, окружность - - 4J08- Сегменты иузлы
это замкнутый контур. Открытый контур имеет кон- (точки привязки)
цевые точки; примером открытого контура является S-образная кривая.
v Выберите команду меню Window • Paths (Окно • Контуры). На экране появится па-
литра Paths (Контуры) (Рис. 4.107). Пока контуры не создавались, эта палитра пуста.
> Переместите эту палитру так, чтобы она не перекрывала изображение самолета.
Прежде чем начать рисование контура, его следует создать. В этом случае контур сохранит-
ся автоматически.
> Нажмите кнопку | Я | - Creates new path (Создать но-
вый контур) в нижней части палитры Paths (Контуры).
В палитре появится и будет выделена строка с миниа-
тюрой и именем созданного контура, предлагаемым по
умолчанию - Path 1 (Контур 1) (Рис. 4.109).
Теперь можно приступить к рисованию контура.
Построение прямолинейных контуров заключается в том,
что концевые точки всех его сегментов, которые называ- хх а а
ются точками привязки, опорными точками или узлами, Рис. 4.109.
последовательно обозначаются щелчками мыши. В ре- Новый контур создан
зультате Adobe Photoshop соединяет каждую пару точек
прямой линией.
>• Установите указатель мыши, который примет форму пера с крестиком фх, у левого
края нижней плоскости ближайшей к зрителю части левого крыла изображения
самолета.
Подготовка графики 179
> Щелкните мышью в этом месте. На изображении
появится точка привязки (Рис. 4.110). Она останет-
ся выделенной - заполненной темным или светлым
цветом, в зависимости от окружающего фона, - до
тех пор, пока вы не укажете следующую точку.
>• Переместите указатель мыши вертикально вверх, к
левому краю верхней плоскости крыла самолета, и Рис. 4.110. Первая точка
щелкните в этой точке мышью. Обе точки будут привязки создана
соединены отрезком прямой - первый прямоли-
нейный сегмент будет создан.
Чтобы провести линию вертикальную, горизонталь-
ную или под углом, кратным 45°, удерживайте нажа-
той клавишу К S h i f l l.
> Продолжая построение контура, установите указатель мыши в крайней верхней точке
окружности левого колеса и щелкните мышью, чтобы создать точку привязки.
>• Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши, пере
местите указатель мыши вправо на расстояние, примерно равное радиусу колеса.
>• Отпустите левую кнопку мыши. В этой точке появится направляющая линия.
Нажав клавишу i! Shift l, вы можете ограничить наклон направляющих линий углами, крат-
ными 45°.
> Переместите указатель мыши в нижнюю точку окружности левого колеса, лежащую
на противоположном конце диаметра.
> Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, переместите указатель мыши влево. Появятся две
направляющие линии, длина и наклон которых определяют длину и наклон криволи-
нейного сегмента.
> Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон направляю-
щих, добейтесь, чтобы дуга обогнула правую, по отношению к зрителю, часть колеса
>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо справа,
зафиксируется (Рис. 4.113).
> Чтобы закончить построение огибающей, установите указатель мыши в верхней час-
ти окружности колеса.
> Нажмите и, не отпуская левую кнопку мыши, переместите указатель мыши вправо.
Появятся две направляющие линии.
>• Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон направляю-
щих, добейтесь, чтобы дуга обогнула левую, по отношению к зрителю, часть колеса.
>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо слева,
зафиксируется (Рис. 4.114).
Точки привязки криволинейных сегментов, имеющие направляющие, называются глад-
кими, в отличие от угловых точек прямолинейных сегментов, которые не имеют направ-
ляющих. Чтобы продолжать построение прямолинейных сегментов, следует преобразо-
вать последнюю гладкую точку с направляющими в угловую.
Подготовка графики 181
тель мыши на контуре в нужном месте. При этом рядом с указателем мыши появится
знак +. Щелкните мышью в этой точке.
Чтобы удалить точку привязки, выберите инструмент (Jf] и установите указатель мыши
в той точке привязки, которую вы хотите удалить. При этом рядом с указателем мыши
появится знак -. Щелкните мышью. Точка будет удалена, а форма кривой изменится в
соответствии с оставшимися точками привязки.
Для перемещения всего контура используйте инструмент [\J. Вы можете изменять форму
контура, перемещая его сегменты, точки привязки и направляющие'линии инструментом
QT], который можно выбрать на дополнительной панели, нажав кнопку | ^.|.
Изменить гладкую точку на угловую и наоборот можно с помощью инструмента [7~].
Для изменения гладкой точки на угловую без направляющих линий достаточно просто
щелкнуть инструментом [К] на нужной точке. Если вы хотите заменить гладкую точку
угловой с направляющими линиями, нажмите кнопку мыши и слегка сместите указатель
мыши, чтобы получить направляющие линии; после этого переместите одну из направ-
ляющих точек - концевую точку направляющей линии. Направляющие линии станут
независимыми.
После того, как редактирование контура будет закончено, можно создать из него гран и-
цу выделенной области.
>• Нажмите кнопку Г~о1 - Loads path as a selection (Загрузить контур, как выделенною
область) в нижней части палитры Paths (Контуры). Вокруг изображения самолета поя-
вится бегущая рамка выделения, а сам контур будет выключен и исчезнет с экрана.
Уменьшим масштаб отображения документа до 100%.
>• Щелчком мыши выберите инструмент | ^ | - Zoom Tool (Z) (Инструмент «Масштаб»
(Z)) на панели инструментов (Tools) и два раза щелкните мышью на изображении
при нажатой клавише il Alt I. Масштаб отображения документа уменьшится.
> Выберите команду меню File • Save As (Файл • Сохранить как) и сохраните фото-
графию в формате Adobe Photoshop - .psd. Это позволит в дальнейшем, при необхо-
димости, редактировать контур и использовать фотографию в следующих опытах.
Теперь скопируем выделенную область в буфер обмена, чтобы затем вставить ее в доку-
мент Ozero.psd.
>• Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область
будет скопирована в буфер обмена.
> Нажмите кнопку \§] в правом верхнем углу окна документа, чтобы вернуться к его
исходнбму размеру.
Файл Samolet.psd можно закрыть.
> Нажмите кнопку [х] в правом верхнем углу окна документа, чтобы закрыть его.
В рабочем окне программы снова станет активным документ Ozero.psd. Вставим в него
изображение из буфера обмена.
>• Выберите команду меню Edit • Paste (Правка • Вставить). В центре фотографии
появится изображение самолета, вставленное из буфера обмена (Рис. 4.116).
Подготовка графики 183
Если вклеенное изображение было создано на черном фоне, то черную кайму вокруг его
границ можно удалить командой меню Layer • Matting • Remove Black Matte (Слой •
Обработка краев • Удалить черный ореол), а если на белом фоне, то белая кайма удаля-
ется командой меню Layer • Matting • Remove White Matte (Слой • Обработка краев •
Удалить белый ореол).
Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе».
>• Выберите команду меню Edit • Transform • Scale (Правка • Преобразование • Мас-
штаб). Вокруг изображения самолета появится прямоугольная рамка с маркерами в
углах и серединах сторон, а на панели параметров (Options Bar) - элементы управле-
ния преобразованием объекта (Рис. 4.118).
Х:| 229,5 рх] Д Vi | 166,5 рх j El W;) 100,0% ~\ Ц Н: [ToM%j| Л I 0,0 |° СГ Н: | 0,0 \" Ц11 0,0 [°
> Нажмите кнопку [V] на панели параметров (Options Bar), чтобы закончить ввод па-
раметров. Размер самолета на фотографии уменьшится в два раза.
Теперь переместим самолет туда, где он должен находиться.
у Выберите инструмент [Kf] - Move Tool (V) (Инструмент «Перемещение» (V)) на па-
нели инструментов (Tools) и переместите изображение самолета в правый верхний
угол фотографии (Рис. 4.119).
> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавишу jiEnteJ.
Фотография будет обрезана по установленной границе.
Но даже после обрезки фотография достаточно
велика для Web-страницы. При разрешении эк-
рана 800x600 пикселов (а с таким разрешением
по статистике в настоящее время работает боль-
шинство пользователей Web) фотография зани-
мает значительное место на экране. Кроме того,
файл с изображением такого размера будет дос-
таточно велик по объему и будет долго загру-
жаться. Потому уменьшим размер изображения,
что, в свою очередь, уменьшит объем файла.
>- Выберите команду меню Image • Image Size
(Изображение • Размер изображения). На
экране появится диалог Image Size (Размер Рис. 4.121. Диалог Image Size
изображения) (Рис. 4.121). (Размер изображения)
Подготовка графики 187
В верхней части диалога, в группе элементов управления Pixel Dimensions (Размерность
в пикселах) указан текущий размер файла в формате PSD - 400,ЗК, а также текущие
ширина (Width) и высота (Height) изображения в пикселах. У вас эти значения после
кадрирования могут быть несколько иными.
В группе элементов управления Document Size (Размер документа) указаны размеры
документа в сантиметрах и его графическое разрешение (Resolution). При установлен-
ном флажке Constrain Proportions (Сохранить пропорции) программа автоматически
сохраняет пропорции изображения при изменении одного из размеров - ширины или
высоты.
При изменении размеров изображения в группе элементов управления Pixel Dimensions
(Размерность в пикселах) соответственно изменяются его характеристики для докумен-
та - либо его размеры, либо графическое разрешение, в зависимости от того, установлен
или сброшен флажок Resample Image (Изменить размер). Если этот флажок установлен,
то изменяется размер документа и, соответственно, объем файла с изображением. Если
же флажок сброшен, то можно изменить только размеры документа. При этом, соответ-
ственно, будет изменяться его графическое разрешение, а размеры изображения в пик-
селах и объем файла останутся без изменения.
При уменьшении размерности или графического разрешения Adobe Photoshop удаляет
из изображения избыточную информацию, а при увеличении этих параметров - форми-
рует недостающую информацию на основе цветовых величин существующих пикселов.
В обоих случаях программа использует один из пяти методов интерполяции, который
можно выбрать в открывающемся списке Resample Image (Изменить размер).
Поскольку фотография, размеры которой мы хотим изменить, предназначена для показа
на экране, то изменять ее графическое разрешение не следует.
> Убедитесь, что установлен флажок Resample Image (Изменить размер), чтобы со-
хранить графическое разрешение изображения и изменить его размер.
>• Установите флажок Constrain Proportions (Сохранить пропорции).
>• В поле ввода Width (Ширина) группы элементов управления Pixel Dimensions (Раз-
мерность в пикселах) введите новое значение ширины изображения в пикселах*- 300.
Автоматически изменится значение высоты изображения в поле ввода Height (Высо-
та), а также размер документа в группе элементов управления Document Size (Размер
документа). В верхней части диалога вы увидите также новое, уменьшенное значение
объема файла и рядом с ним, в скобках прежний объем.
> Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. Установленные
параметры будут применены, и размер изображения в окне документа уменьшится.
Как уже указывалось, уменьшение размерности изображения удаляет из него избыточ-
ную информацию, что приводит к некоторому снижению резкости. Применение фильтра
Unsharp Mask (Контурная резкость) может в известной степени восстановить резкость
изображения.
> Выберите команду меню Filter • Sharpen • Unsharp Mask (Фильтр • Резкость • Кон-
турная резкость). На экране появится диалог Unsharp Mask (Контурная резкость).
> Перемещая ползунковый регулятор Amount (Эффект), восстановите резкость фото-
графии. Значение этого параметра должно быть в пределах 50-60%.
188 Создание Web-сайтов
> Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость). Резкость
изображения усилится.
>• Сохраните документ, выбрав команду меню File • Save (Файл • Сохранить).
Так как при изменении размеров изображения снижается его качество за счет удаления
избыточной информации, то, по возможности, следует избегать этой операции. Если вы
сканируете изображение, то желательно уже на этом этапе определить его размер и вы-
полнить сканирование с таким разрешением, которое обеспечит наилучшее качество
изображения.
Этот диалог совмещает в себе уже знакомые вам по Adobe ImageReady элементы: окно
просмотра, позволяющее выбирать различные режимы просмотра оптимизированного
изображения; элементы управления оптимизацией - справа вверху и цветовую таблицу
(Color Table) - справа внизу, используемую при оптимизации изображений в форматах
GIF и PNG-8. Кроме того, здесь же присутствует вкладка Image Size (Размер изображе-
ния), элементы управления которой позволяют изменить размер изображения так же,
Подготовка графики 189
как и элементы управления диалога Image Size (Размер изображения), рассмотренного в
предыдущем опыте.
В открывающемся списке со всплывающей подсказкой Zoom Level (Уровень масштаби-
рования) в левом нижнем углу диалога вы можете выбрать масштаб для отображения в
окне просмотра диалога. Масштаб можно изменить также с помощью инструмента |Ц,[ -
Zoom Tool (Z) (Инструмент «Масштаб» (Z)), который включается кнопкой в левом верх-
нем углу диалога. Включенный по умолчанию инструмент [Ц] - Hand Tool (H) (Инст-
румент «Рука» (Н)) позволяет перемещать изображение в окне просмотра, если его раз-
меры превышают размеры окна. С помощью кнопки 0 - Select Browser Menu (Меню
выбора браузера) в нижней части диалога вы можете открыть меню, из которого выбрать
браузер для просмотра оптимизированного изображения. Можно также нажать кнопку
слева от 0 , чтобы загрузить программу просмотра, определенную по умолчанию,
в которой автоматически откроется оптимизируемое изображение.
> Закройте диалог Save For Web (Сохранить для Web), нажав кнопку ОК. На экране
появится диалог Save Optimized As (Сохранить оптимизированный документ как),
в поле ввода которого Имя файла (File name) уже указано имя сохраняемого файла -
Ozero.
> Выберите папку для сохранения оптимизированного файла.
> Нажатием кнопки Сохранить (Save) закройте диалог Save Optimized As (Сохранить
оптимизированный документ как). Файл будет сохранен на диске в указанной папке
>• Закройте документ Ozero.psd, выбрав команду меню File • Close (Файл • Закрыть).
Если появится запрос о необходимости сохранения документа, ответьте отрицательно.
Мы познакомились с принципами оптимизации изображений в программе Adobe Photo-
shop. Как вы могли заметить, они практически не отличаются от оптимизации в Adobe
ImageReady.
Подготовка графики 191
> Нажмите клавишу М0""»!. Вся выделенная область будет очищена и окрашена в белый
цвет фона (Рис. 4.124) - тот цвет, на котором создавалось изображение.
Cancel
©Erint
О Qnline
Back
©GIF
О PNG
p Description
GIF format only supports 8 bit color but is widely accepttd in browstrs.
i Cancel
Здесь следует определить, в каком формате нужно сохранить изображение - GIF или
PNG. По умолчанию установлен переключатель GIF. Согласимся с этим предложением,
• Нажмите кнопку Next (Далее). Вы увидите следующий диалог Export Transparent
Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 4.128) с сообщением
о том, что формат GIF поддерживает 8-битные изображения, и поэтому на следую-
щем шаге необходимо будет уменьшить количество цветов в изображении с помо-
щью диалога Indexed Color (Индексированные цвета).
Export Transparent Image Wizard
The GF format only supports 8 bit images. The next step will be to
reduce the number of colors in your image by using the Indexed
Cotor dialog.
Cancel
J gack
> Нажмите кнопку Next (Далее). На экране появится диалог Indexed Color (Индексиро-
ванные цвета) (Рис. 4.129).
Подготовка графики 195
г Рфпе: | Web
Colors: 217
Васе* {More
M
0 Iransparency
p Options
tJatte: | None
Bther: | Diffusion £]
Amount: 175 |%
D Preserve Exact Colors
> Нажмите кнопку Finish (Готово), чтобы закрыть этот диалог. В рабочем окне про-
граммы Adobe Photoshop появится окно документа Samolet.gif, в котором прозрач-
ный фон условно обозначен шахматной мозаикой.
Созданное таким образом прозрачное изображение перед использованием в Web должно
быть еще оптимизировано.
>• Закройте окно рисунка Samolet.gif, нажав кнопку [х] в правом верхнем его углу.
Посмотрим теперь, как выглядит изображение самолета на Web-странице. Вставим файл
Samolet.gif в конец документа geoton.html.
> Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web и вставьте
перед закрывающим тегом </body> строку со следующим кодом HTML:
<centerximg src = Samolet .gif border=lx/center>
>• Установите флажок Invert (Обратить выделение). Теперь в окне просмотра диалога
черным цветом окрасится фон, а белым, соответствующим выделенной области, -
изображение самолета.
Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать в диалог е
Color Range (Цветовой диапазон) инструмент | Д ] и щелкнуть на нужном цвете в окне
документа или в поле просмотра диалога.
Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в диалоге
инструмент | ^ | и щелкнуть мышью на исключаемых цветах.
> Нажмите кнопку О - Edit in Quick Mask Mode (Q) (Редактирование в режиме «Бы-
страя маска» (Q)) на панели инструментов (Tools), чтобы включить этот режим.
Все изображение в окне документа, за исключением выделенных - незащищенных от
изменения - областей, будет маскировано с помощью своего рода «пленки», по
умолчанию окрашенной в красный цвет и имеющей 50-процентную непрозрачность
(Рис. 4.133). Теперь все, что окрашено красным цветом, - это маска - защищенная от
изменения область.
>• Нажмите кнопку |ЕЕ| - Edit in Standard Mode (Q) (Редактирование в стандартном
режиме (Q)) на панели инструментов (Tools). Программа переключится в стандарт-
ный режим.
>• Просмотрите внимательно выделенную область и убедитесь, что вы правильно отре-
дактировали ее в режиме «Быстрая маска». При необходимости можно снова вклю-
чить этот режим и выполнить необходимую корректировку.
Подготовка графики ,201
>• С помощью инструмента (^] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) уменьши-
те масштаб отображения документа до 100%.
Теперь мы должны сохранить выделенную область в альфа-канале.
Каждый документ Adobe Photoshop содержит один или несколько каналов, в которых
хранится информация о цветовых элементах изображения. Например, изображение в
цветовом формате RGB содержит три канала: красный (Red), зеленый (Green) и синий
(Blue). Цветовые каналы создаются автоматически при создании нового документа.
Управлять каналами можно с помощью специальной палитры Channels (Каналы).
>• Щелкните мышью на ярлыке Channels (Каналы)
в третьем сверху окне палитр. Если этот ярлык
отсутствует, выберите команду меню Window •
Show Channels (Окно • Показать палитру «Ка-
налы»). На экране появится палитра Channels
(Каналы) (Рис. 4.134).
Палитра Channels (Каналы) содержит список всех
цветовых каналов данного изображения. В ней ото-
бражаются миниатюры и имена трех каналов - Red
(Красный), Green (Зеленый), Blue (Синий) - в соот-
Рис. 4.134. Палитра Channels
ветствии с действующим цветовым режимом. Кроме
(Каноны)
того, в программе создается еще и совмещенный
канал - RGB, отображающий результирующее изображение, который занимает в па-
литре верхнюю строку. Палитра Channels (Каналы) позволяет также управлять ото-
бражением отдельных каналов на экране с помощью значка •§?, делая их видимыми или
невидимыми.
> Просмотрите, как выглядит каждый канал, включая и выключая его отображение с
помощью значка 1$.
В каждом документе вы можете создавать из выделенных областей дополнительные ка-
налы, которые называются альфа-каналами и используются для хранения масок, позво-
ляющих изолировать и защитить от модификации в процессе редактирования отдельные
фрагменты изображения. Каждое изображение может содержать до 24-х каналов, вклю-
чая все цветовые каналы. Вы можете добавлять и
удалять альфа-каналы, а также задавать для каждого
из них имя, цвет, режим маскирования и непрозрач-
ность. Все новые каналы получают те же размеры и
разрешение, что и исходное изображение. Сохранив
выделенную область в альфа-канале, вы можете много-
кратно использовать ее в любом документе.
Создадим из выделенной области альфа-канал.
>• Нажмите кнопку | Kg | - Save selection as channel
(Сохранить выделение как канал) в нижней части
палитры Channels (Каналы). В палитре появится
новый канал — Alpha 1 (Альфа 1) (Рис. 4.135). Рис. 4.135. Альфа-канал создан
> Выберите команду меню Select • Deselect (Выделение • Отменить выделение), что-
бы снять выделение объекта в окне документа.
202 Создание Web-сайтов
Document: | Samotetpsd H
Channel: | Alpha 1 ill
П Insert
- Operation — ^ — — —
© ijew Selection
О &dd to Selection
О subtract from Setectton
О internet wtth Selection
> Закройте диалог Load Selection (Загрузить выделение), нажав кнопку ОК. Изображе-
ние самолета в окне документа вновь будет выделено.
Прежде чем повторно экспортировать изображение в формат GIF89a, проверим, как бу-
дет выглядеть наш рисунок на Web-странице с синим цветом фона. Для этого скопируем
в буфер обмена выделенную область с изображением самолета, создадим новый слой,
зальем его синим цветом и вставим из буфера обмена выделенную область.
> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенная область
будет скопирована в буфер обмена.
>• Щелкните мышью на ярлыке Layers (Слои), чтобы показать эту палитру.
> Нажмите кнопку | S | - Create new layer (Создать новый слой) в нижней части па-
литры Layers (Слои). Новый слой - Layer 1 - будет создан и станет активным.
>• Откройте палитру Swatches (Каталог) и щелчком мыши выберите пятый слева в
верхнем ряду синий цвет для заливки слоя.
>• Выберите команду меню Select • All (Выделение • Все), чтобы выделить весь документ.
>• Воспользовавшись инструментом \^\ - Paint Bucket Tool (G) (Инструмент «Заливка»
(G)), залейте активный слой выбранным цветом.
>• Выберите команду меню Edit • Paste (Правка • Вставить). Изображение из буфера
обмена будет вставлено на новый слой Layer 2, и в окне документа вы увидите изо-
бражение самолета на синем фоне.
Скорее всего, на синем фоне все еще хорошо видны резкие границы, особенно в области
крыльев и фюзеляжа самолета. Эти края можно растушевать инструментом | ^ , [ -
Smudge Tool (R) (Инструмент «Палец» (R)). Но сделать это нужно на основном слое
Background (Фон).
> Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку | В | - Delete
current layer (Удалить активный слой) в нижней части палитры Layers (Слои).
Активным станет слой Background (Фон).
> Восстановите выделение, выбрав команду меню Select • Load Selection (Выделе-
ние • Загрузить выделение) и в появившемся диалоге Load Selection (Загрузить вы-
деление) нажав кнопку ОК.
204 Создание Web-сайтов
Some of the specified files already exist in the target location. The files marked below w l be replaced:
S Samolet.gif
Cancel [ Replace |
> Не закрывая, сверните окно браузера, нажав кнопку [Г] в правом верхнем его углу.
Описанные выше методики выделения и создания прозрачных областей можно и следу-
ет применять в том случае, если вы заранее не знаете, каким будет цвет фона Web-
страницы, на которую будет помещено создаваемое прозрачное изображение. Если же
этот цвет вам известен, то, повторим, именно на нем следует выполнять сглаживание.
В том случае, когда сглаживание выполнено на фоне, отличающемся от фона Web-
страницы, следует окрасить частично прозрачные пикселы, которые всегда присутству-
ют на границе прозрачной области, в цвет фона Web-страницы. Посмотрим, как это сде-
лать практически.
>• Выберите команду меню File • Save for Web (Фарш •Сохранить для Web). На экране
появится диалог Save For Web (Сохранить для Web) (Рис. 4.122).
В этом диалоге сохранены параметры оптимизации, применявшиеся последний раз.
При установленном флажке Transparency (Прозрачность) частично прозрачные пиксе-
лы, которые обычно присутствуют по краям сглаженного изображения, заполняются
цветом, определенным параметром Matte (Подложка). Установим синий цвет подложки,
соответствующий цвету фона Web-страницы geoton.html.
>• Щелкните мышью на поле открывающегося списка Matte (Подложка). На экране поя-
вится диалог Color Picker (Палитра цветов).
> В полях ввода R, G, В введите значения, соответственно, 0, 0, 255 и нажатием кнопки
ОК закройте диалог Color Picker (Палитра цветов). Заданный синий цвет отобразится
в поле открывающегося списка Matte (Подложка). На образце в диалоге вокруг изо-
бражения самолета появится тонкая линия такого же цвета.
>• Нажмите кнопку ОК. Диалог Save For Web (Сохранить для Web) закроется. На экра-
не появится диалог Save Optimized As (Сохранить оптимизированный документ как).
v Откройте папку Web и нажмите кнопку Сохранить (Save).
> В появившемся диалоге Replace Files (Замена файлов) с запросом о замене сущест-
вующего файла с именем Samolet.gif нажмите кнопку Replace (Заменить). Файл бу-
дет перезаписан.
Посмотрим, как будет выглядеть изображение в программе просмотра Web-страниц.
>• Разверните свернутое окно браузера и обновите документ HTML.
Теперь, после того как частично прозрачные пикселы по краям сглаженной области ок-
рашены в цвет фона Web-страницы, изображение смотрится вполне профессионально.
>• Закройте браузер, нажав кнопку [х] в правом верхнем его углу.
> Удалите из файла geoton.html тег, загружающий фотографию Samolet.gif.
>• Закройте документ Samolet.psd в программе Adobe Photoshop, нажав кнопку [х] в
правом верхнем углу его окна, и на предложение сохранить файл ответьте отри-
цательно.
Мы подробно познакомились с приемами и особенностями создания прозрачных
изображений. Еще раз подчеркнем, что качество таких изображений зависит от того, на
каком фоне выполнялось сглаживание. В любом случае сглаживание следует выполнять
на том же фоне, что и фон Web-страницы.
Подготовка графики 207
Ctrl F
> Нажмите несколько раз комбинацию клавиш И I+1I I.
При каждом нажатии этой комбинации клавиш фильтр бу-
дет применяться повторно, а изображение в окне докумен-
т а - изменяться. В результате должно получиться что-то
вроде Рис. 4.139.
Далее применим к изображению фильтр Glowing Edges
(Свечение краев) из группы фильтров Stylize (Стилизация).
Все фильтры этой группы создают ярко выраженные эффек- Рис. 4.139. Результат
ты очерчивания за счет смещения пикселов и повышения применения фильтра
контрастности изображения и особенно полезны при обра- Difference Clouds
ботке черно-белых изображений. Фильтр Glowing Edges (Облака с наложением)
(Свечение краев) отыскивает границы цветовых областей и
добавляет свечение, подобное неоновому.
> Переместите ползунковый регулятор Edge Width (Ширина границ) влево так, чтобы в
поле ввода над ним появилось значение 1.
>• Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому
краю так, чтобы значение этого параметра стало равно 20.
>• Для параметра Smoothness (Сглаженность) установите значение 1.
Подготовка графики 209
>• Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.
После применения этого фильтра изображение будет затемнено. Поэтому воспользуемся
командой Brightness/Contrast (Яркость/Контраст) для увеличения яркости и контраста.
>• Выберите команду меню Image • Adjustments • Brightness/Contrast (Изображение •
Коррекции • Яркость/Контраст). На экране появится диалог Brightness/Contrast (Яр-
кость/Контраст) (Рис. 4.141).
>• Переместите ползунковыи регулятор Brightness (Яркость) вправо так, чтобы в поле
ввода над ним отобразилось значение +50.
> Переместив ползунковыи регулятор Contrast (Контраст) вправо, установите значение
этого параметра +30.
>• Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Контраст). Документ
примет вид примерно как на Рис. 4.142.
Brightness/Contrast
Brightness: |5 |
I Reset |
Contrast:
13 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).
Output Sellings
[Background | Cancel
Г
View Document As -
I Era» |
©image О Background
1 Next |
|- Background Image -
I Save.,, j
^Избранно*
html»
body bgcolor-"
/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 пикселов и с белым цветом фона.
> Примените фильтр 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 пикселов и с белым цветом фона.
>• Примените фильтр Add Noise (Добавить шум) с установленным переключателем
Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки) и параметром
Amount (Эффект) равным 120 (Рис. 4.153).
>• Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высо-
т а ) ^ , Amount (Эффект)=30 (Рис. 4.154).
Рис. 4.153. Применен фильтр Add Noise Рис. 4.154. Примените фильтр Emboss
(Добавить шум) (Рельеф)
216 Создание Web-сайтов
> В палитре Channels (Каналы) создайте новый канал Alpha 1, нажав кнопку | В | -
Create new channel (Создать новый канал).
> Выделите изображение альфа-канала в окне документа командой Select • All (Выде-
ление • Все) и создайте рамку выделения толщиной 3 пиксела командой Select •
Modify • Border (Выделение • Модификация • Граница).
> Инвертируйте выделение командой Select • Inverse (Вы-
деление • Обратить выделение) и залейте выделенную об-
ласть белым цветом. Отмените выделение.
> Примените к альфа-каналу фильтр Gaussian Blur (Размы-
тие по Гауссу), воспользовавшись командой меню Filter •
Blur • Gaussian Blur (Фильтр • Размытие • Размытие по Рис. 4.155. Рамка
Гауссу) с параметром Radius (Радиус)=2,0 пиксела, чтобы в альфа-канале
размыть границу (Рис. 4.155).
> В палитре Layers (Слои) выделите слой Background (Фон) и создайте эффект трех
мерности с помощью фильтра Lighting Effects (Эффекты освещения), воспользовав
шись командой меню Filter • Render • Lighting Effects (Фильтр • Рендеринг • Эф
фекты освещения). Установите параметры эффекта как на Рис. 4.156. Результат будет
примерно такой, как на Рис. 4.157.
Lighting Effects
N e
Intensity: 9ative
Properties:
Matte •79 Shiny
Gloss:
Material: Metallic
, Under Over
Exposure:
N e a t i v e
Ambience: . 3 32 Positive
зши партнеры
>- Не отпуская левую кнопку мыши, переместите ука-
затель мыши вправо и вниз так, чтобы надпись Прайс-лист
Главная страница находилась в середине нарисо-
ванного прямоугольника.
>- Отпустите левую кнопку мыши. Первый поль-
зовательский фрагмент будет вырезан и окружен Рис. 4.159. Первый фрагмент
рамкой выделения с квадратными маркерами в уг- создан
лах и серединах сторон (Рис. 4.159).
Созданный фрагмент будет выделен также более ярким цветом и ему будет присвоен
номер 01, который вы увидите в его левом верхнем углу. Автоматически будет создан
Подготовка графики 219
фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент
будет отличаться от выделенного пользовательского фрагмента оттенком. В его левом
верхнем углу, кроме значков-индикаторов номера и типа, появится значок g], означаю-
щий, что данный автофрагмент связан с пользовательским.
Если размер вырезанной части изображения вас не
устраивает, то его легко можно изменить, переместив
маркеры выделения с помощью инструмента | У ] -
Slice Select Tool (О) (Инструмент «Выбор фрагмента»
(О)). Этим же инструментом можно выделить фраг-
мент и переместить его. Для удаления выделенного
фрагмента достаточно нажать клавишу I 0 * 1 " 8 ! или вос-
пользоваться командой меню Slices • Delete Slice
(Фрагменты • Удалить фрагмент).
>• Чтобы показать скрытую нарезку, повторно нажмите кнопку [Ш| - Toggle Slices
Visibility (Q) (Выключение/включение отображения фрагментов (Q)) на панели инст-
рументов (Tools) или просто щелкните мышью в окне документа при выбранном ин-
струменте \^\ или | У ] .
Нарезать изображение можно и другим способом - создав выделенную область и выбрав
команду меню Select • Create Selection from Slice (Выделить • Создать выделение из
фрагмента).
Для каждого полученного фрагмента документа создадим эффект Rollover (Наведение)
таким образом, чтобы при установке указателя мыши в браузере на каждом из пунктов
меню цвет фона этого фрагмента изменялся с синего на темно-синий. Начнем с первого
фрагмента. Предварительно его следует выделить.
> Нажмите кнопку |1У| •*• Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)) на
панели инструментов (Tools), чтобы выбрать инструмент.
> Установите указатель мыши, который примет форму >р, в окне документа на
фрагменте с надписью Главная страница.
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). Второй фрагмент с надписью Чем мы занимаемся? бу-
дет выделен в окне документа.
Фрагмент можно выбрать также щелчком мыши в окне документа при активном инст-
рументе ^F\ - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)).
>• Создайте состояние Over (Над), нажав кнопку | В | - Creates new rollover state (Соз-
дать новое состояние) в нижней части палитры Web Content (Содержимое Web).
> Создайте выделенную область из фрагмента с помощью команды меню Select •
Create Selection from Slice (Выделить • Создать выделение из фрагмента).
>- Создайте новый слой - Layer 2 - в палитре Layers (Слои) и залейте выделенную об-
ласть темно-синим цветом.
Убедитесь, что видимось слоя Layer 2 отсутсвует при выборе фрагмента menu_02 в па-
литре Web Content (Содержимое Web) и присутсвует при выборе состояния Over (Над)
для фрагмента menu_02 в палитре Web Content (Содержимое Web).
Будет определен эффект Rollover (Наведение) для второго фрагмента.
>• Действуя описанным способом, создайте эффект Rollover (Наведение) для остальных
фрагментов изображения.
После того как изображение нарезано и для фрагментов создан эффект Rollover (Наведе-
ние), у вас есть два варианта дальнейших действий. Можно сохранить готовые фрагменты
изображения и затем вручную в текстовом редакторе вставить ссылки на них в код
HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe
ImageReady и сохранить вместе с нарезанными частями изображения также и HTML-
файл, который будет создан автоматически с уже готовым меню. Назначение ссылок
фрагментам изображения выполняется с помощью палитры Slice (Фрагмент).
>• Щелкните мышью при выбранном инструменте | У ] - Slice Select Tool (О) (Инструмент
«Выбор фрагмента» (О)) в окне документа на первом фрагменте изображения с надпи-
сью Главная страница, чтобы выделить его.
222 Создание Web-сайтов
Список Target (Цель) станет доступным после того, как вы введете ин-
формацию в поле URL и перейдете в любое другое попе палитры.
>• . Нажмите и, удерживая нажатой клавишу llSfiiftl. щелкайте мышью поочередно на каж-
дом фрагменте, чтобы выделить все части изображения.
• Output XHTML
г Formatting ————————————————
Во втором сверху открывающемся списке без названия можно выбрать один из наборов
элементов управления: HTML - для форматирования файлов HTML; Saving Files (Со-
хранение файлов) - для сохранения файлов изображений; Slices (Фрагменты) - для оп-
ределения имен фрагментов, image Maps (Карты навигации), Background (Фон) - для
установки параметров фона, Saving Files (Сохранение файлов) и Metadata (Метадан-
ные) — для сохранения метаданных. При выборе каждого набора вид диалога будет из-
меняться, отображая соответствующие элементы управления. По умолчанию в диалоге
отображается набор элементов для форматирования HTML-файлов.
В открывающихся списках Tags Case (Регистр тегов) и Attribute Case (Регистр ат-
рибутов) можно выбрать регистр символов для кода HTML: все прописные, все
строчные, начальные прописные. Это помогает при копировании фрагментов кода в
другие документы отличать автоматически созданный код от написанного вручную.
Открывающийся список Indent (Отступы) позволяет определить способ создания
отступов в строках HTML-кода: используя установки табуляции программы (Tabs),
с помощью определенного количества пробелов (Spaces) или же, не используя от-
ступы (None).
В открывающемся списке Line Endings (Концы строк) выбирается платформа для на-
стройки совместимости концов строк: Windows (Win), Macintosh (Mac), Unix.
Установка флажка Include Comments (Включить комментарии) позволяет добавить по-
ясняющие комментарии в HTML-код.
При установленном флажке Always Quote Attributes (Использовать кавычки для атрибу-
тов) значения атрибутов всех тегов будут заключаться в кавычки.
Нарезанные фрагменты можно поместить в таблицу HTML или разместить их
в документе, используя язык каскадных таблиц стилей. Если во втором сверху от-
крывающемся списке без названия выбрать набор элементов управления Slices
(Фрагменты) (Рис. 4.165) и установить переключатель Generate CSS (Генерировать CSS),
8-1210
226 Создание Web-сайтои
Туре
© Client-Side
О NCSA Server-Side
О CERN Server-Side
О dent-Side and NCSA Server-Side
О Chsnt-Slde and CERN Server-Side
Placement -
Preset: [Custom
JJ
|savlng Files
Optimized Files -
•File Naming
| slice name |»Jj + | hyphen
bJ+ | trigger name [» J +
- Filename Compatibility -
BWMcws В Mac OS 9 0 Unix
>• Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут сохранена
в указанных папках с установленными параметрами.
>• Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом верхнем
углу его окна.
Проверим созданное меню.
> Откройте в программе просмотра Web-страниц файл index.html из папки Web.
Вы увидите, что в правом фрейме загружен файл geoton.html, а в левом - вместо преж-
него меню-таблицы загружена созданная нами графическая навигационная панель.
> Устанавливайте указатель мыши на разных пунктах меню. При этом будет изменять-
ся цвет фона соответствующей надписи.
> Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм будет
загружен файл spisok.html.
> Щелкните мышью на пункте меню Главная страница. В правый фрейм будет загру-
жен файл geoton.html.
В автоматически созданном программой файле menu.html таблица с фрагментами
изображения находится Между комментариями <l — ImageReady Preload Script
(menu.psd) --> и < ! - - End ImageReady S l i c e s -->. При необходимости этот
фрагмент кода можно скопировать в буфер обмена и затем вставить в любой HTML-
документ. Меню будет работать.
>• Щелкните мышью на слое Background copy в палитре Layers (Слои), чтобы выде-
лить его.
>• Выберите команду меню Layer • New Layer Based Image Map Area (Слой • Новая
область карты навигации из слоя). В палитре Image Map (Карта навигации) отобра-
зятся элементы управления для новой области карты навигации.
Для выбранного слоя лучше всего подойдет прямоугольная форма области ссылки, т.е.
вся область документа за пределами изображения самолета.
> Убедитесь, что в открывающемся списке Shape (Форма) палитры Image Map (Карта
навигации) выбрано Rectangle (Прямоугольник).
>• В поле ввода URL палитры Image Map (Карта навигации) введите имя файла
spisok.html. Это имя появится в палитре Layers (Слои) под названием слоя
Background copy.
> В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?
Так как область карты навигации для слоя Background copy создана после области для
слоя Layer 1, имеет большие размеры и перекрывает последнюю, то ее - область карты
навигации для слоя Background copy - нужно переместить на задний план.
> В палитре Web Content (Содержимое Web) перетащите мышью слой с одним само-
летом на самый верх. Его имя изменится на lmageMap_02.
Подготовленную таким образом карту навигации следует оптимизировать.
> Если палитра Optimize (Оптимизация) отсутствует на экране, выберите команду ме-
ню Window • Optimize (Окно • Оптимизация).
>• В открывающемся списке Settings (Установки) палитры Optimize (Оптимизация)
выберите набор параметров JPEG (JPEG). Параметры, соответствующие этому набо-
ру, отобразятся в палитре.
>• В открывающемся списке Quality (Качество) выберите High (Высокое).
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
Будет выполнена оптимизация с выбранными параметрами.
>• Сравните оригинальное и оптимизированное изображения и, если считаете нужным,
откорректируйте параметры оптимизации.
Сохраним оптимизированное изображение.
>• Выберите команду меню File • Save Optimized (Файл • Сохранить оптимизирован-
ный документ). На экране появится диалог Save Optimized (Сохранение оптимизиро-
ванного документа) (Рис. 4.92), в поле ввода Имя файла (File name) которого указано
имя сохраняемого документа - Samolet.html.
> Откройте папку Web для сохранения файла.
> Убедитесь, что в открывающемся списке Тип файла (List files of type) выбрано HTML
and Images (\html) (HTML и изображения (*.html)), чтобы сохранить HTML-код с
картой навигации.
>- Закройте диалог Save Optimized (Сохранение оптимизированного документа), нажав
кнопку Сохранить (Save). В папке Web будет сохранено изображение Samolet.jpg и
файл Samolet.html с HTML-кодом карты навигации.
v Закройте программы Adobe ImageReady и Adobe Photoshop.
Подготовка графики 233
Проверим теперь, как работает карта навигации.
>• Откройте в программе просмотра Web-страниц файл Samolet.html из папки Web.
>• Перемещайте указатель мыши по фотографии. В зависимости от положения указате-
ля мыши - на изображении самолета на переднем плане или вне его, в строке состоя-
ния (Status Bar) будет отображаться адрес URL, сопоставленный данному участку
карты навигации. Вблизи указателя мыши будет появляться всплывающая подсказка.
>• Щелкните мышью на изображении самолета. Это изображение будет выделено мно-
гоугольным контуром, произойдет переход по ссылке, и в окно браузера будет за-
гружен файл geoton.html.
>• Нажмите кнопку Back (Назад) на панели инструментов программы просмотра.
Программа возвратит вас к предыдущему документу - Samolet.html.
>• Щелкните мышью за пределами изображения самолета. Теперь будет выделен пря-
моугольный контур всей фотографии, и в окно браузера загрузится файл spisok.html.
> Как видите, карта навигации работает правильно. Посмотрим теперь, как выглядит
автоматически созданный документ Samolet.html.
>• Откройте в программе Блокнот (Notepad) файл Samolet.html из папки Web.
Обратите внимание, что код карты навигации располагается между комментариями
<!— ImageReady S l i c e s (Samolet.psd) —>и<!— End ImageReady S l i c e s —>.
не только Netscape Navigator, видит этот блок, он проигрывает анимацию не один раз,
а столько, сколько указано, или бесконечно.
Общая схема следования этих блоков приблизительно такова:
• заголовок - GIF87a или GIF89a - определяет формат файла;
• описание логического экрана - задается размер экрана, на котором будет проигры-
ваться анимация;
• описание глобальной палитры - необязательно, но крайне желательно;
• произвольное количество блоков изображения, в том числе текстовых, или пар бло-
ков: управление графическими расширениями - изображение. Блок управления гра-
фическим расширением может содержать в себе указание на локальную палитру, рас-
положение на логическом экране, задержку и способ удаления изображения и оказы-
вает влияние только на следующий непосредственно за ним блок изображения;
^ завершитель - признак конца.
Комментарии и специальные блоки, если они есть, могут располагаться в любом месте
файла, но только после описания глобальной палитры или после описания логического
экрана. Блок расширения Netscape Loop должен следовать непосредственно за глобаль-
ной палитрой.
Использование GIF-анимации
В следующих главах вы узнаете, как создавать анимацию в различных форматах, в том
числе и GIF-анимацию. Здесь же отметим, что если у вас уже есть готовая GIF-анимация,
то процедура помещения ее на Web-сайт ничем не отличается от помещения туда же про-
стого, не анимированного GIF-файла. Она выполняется с помощью тэга <img> и подроб-
но рассмотрена в предыдущих главах.
К несомненным достоинствам GIF-анимации можно отнести следующие ее особенности:
•/ небольшой размер файла за счет оптимизации;
• не требуется специальных программ для просмотра;
• для проигрывания не требуется постоянной связи с сервером;
• простой способ помещения на Web-страницу.
Но у GIF-файлов есть и недостатки:
• палитра не превышает 256 цветов;
• сжатие фотографических изображений гораздо ниже, чем в формате JPEG
Стандарт GIF89a - весьма мощный инструмент для создания Web-анимаций, однако не-
обходимо учитывать тот факт, что если некоторые специальные графические программы
и поддерживают этот стандарт в полном объеме, то это не относится к некоторым брау-
зерам, поэтому, применяя динамические GIF-файлы для Web, лучше ориентироваться не
на сам стандарт, а на возможности браузеров по его поддержке.
Учитывая проблемы совместимости программ просмотра, при создании анимационных
GIF-файлов рекомендуется соблюдать следующие правила:
• желательно не использовать локальные палитры: в некоторых случаях это приводит
к неправильному отображению цветов;
Анимация на Web-страницах 237
_*}•** <\ ••
Пока в программе Adobe ImageReady не будет создан новый или открыт существующий
документ, элементы управления данной палитры будут недоступны. Поэтому сразу от-
кроем файл Geoton.psd.
Создаем анимацию с помощью Adobe ImageReady 239
> Выберите команду меню File • Open (Файл • Открыть). На экране появится диалог
Открытие файла (Open) (Рис. 6.2).
• Откройте папку, в которой вы сохранили файл Geoton.psd, и щелчком мыши
выделите его.
^ Camtasia Studio
s a Filet
Books
eceived Files
£ЭМ» Virtual Machines
^ аталог CD
3 Мои внаеозапмси
MOM рисунки
Мои рисинки
Моя музыка
1
:ВНН шшяшш •Е. (ч
| | Aninutioi
«If 1 %. I 5J 9 Ih.
ч
[• Forever
New Frame
D*M*FI*M
DoMtt АммЫйт
Copy Frame
Past* Fram...
SchctMFtMM*
Tmn..
R*vwt* FIMM*
Optimize Animation...
Palette Options...
> Щелкните мышью на значке с изображением глаза Рис. 6.6. Слои в палитре
^ слева от миниатюры слоя Layer 3. Этот значок Layers (Слои)
исчезнет. Указанный слой на рисунке и первом кадре
анимации станет невидимым.
242 Создание Web-сайто з
Изображение на втором кадре полностью совпадает с первым, так как был создан дубли-
кат кадра. И теперь это изображение следует изменить. Для текущего кадра выключим
отображение слоя Layer 2 с текстом Вам нужна локальная сеть? и включим отображе-
ние слоя Layer 3 с надписью Заходите СЮДА!
>• Щелкните мышью на значке £5 слева от миниатюры слоя Layer 2. Этот значок исче$-
нет. Указанный слой будет выключен и надпись Вам нужна локальная сеть? на ри-
сунке и первом кадре анимации исчезнет.
>• Щелкните мышью в палитре Layers (Слои) в крайнем левом пустом поле Indicates
layer visibility (Индикация видимости слоя), слева от названия слоя Layer 3. В этом
поле появится значок с изображением открытого глаза ф . Слой Layer 3 будет вклю-
чен, и надпись Заходите СЮДА! отобразится на рисунке в окне документа и на ми-
ниатюре второго кадра.
Добавим еще один кадр анимации.
>• Нажмите кнопку 0 в правом верхнем углу палитры Animation (Анимация) и в поя-
вившемся меню выберите команду New Frame (Новый кадр), В палитре Animation
(Анимация) появится и станет активным третий кадр, который представляет собой
копию второго (Рис. 6.8).
Для текущего кадра включим дополнительно отображение слоя Layer 4 с рисунком двери.
> Щелкните мышью в поле Indicates layer visibility (Индикация видимости слоя) слоя
Layer 4 палитры Layers (Слои), чтобы включить его отображение.
Теперь в окне документа и на третьем кадре анимации должны отображаться все слои, за
исключением слоя Layer 2.
Действуя описанным способом, вы можете создать для анимации любое количество кад-
ров и для каждого из них определить с помощью палитры Layers (Слои) графическое
содержимое.
Удалить любой кадр или группу кадров из палитры Animation (Анимация) можно с по-
мощью кнопки | V 1 - Deletes selected frames (Удаление выбранных кадров), предвари-
Shift
тельно выделив их щелчками мыши при нажатой клавише li l, если кадры смежные
(в этом случае достаточно щелкнуть мышью только на крайних кадрах), или при нажатой
ctr
клавише li 4 , если кадры несмежные. Удалить выбранные кадры можно также коман-
дой меню Delete Frame (Удалить кадр) палитры Animation (Анимация).
>• В появившемся меню выберите 1.0 (1 секунда). Это значение --1 sec. - отобразится в
палитре Animation (Анимация) под миниатюрами всех трех кадров.
Просмотрим полученный результат.
>• Нажмите кнопку П>~] - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация). Начнется проигрывание эффекта.
Изображение кнопки П>Л изменится на | D |.
В окне документа вы увидите, как периодически сменяются надписи Вам нужна
локальная сеть? и Заходите СЮДА! Причем после появления надписи Заходите
СЮДА! появляется также рисунок открытой двери. В процессе проигрывания в палит-
ре Animation (Анимация) будет перемещаться выделение, отмечая текущий кадр.
> Нажмите кнопку I D | - Plays/Stops animation (Проигрывание/Остановка анимации)
в нижней части палитры Animation (Анимация), чтобы прекратить проигрывание
эффекта.
Увеличим время показа на экране первого кадра анимации до 1,5 секунд. Предварительно
этот кадр нужно выделить.
> Нажмите кнопку | « | - Selects first frame (Выбрать первый кадр) в нижней части па-
литры Animation (Анимация). Кадр станет активным.
Перейти к следующим кадрам палитры Animation (Анимация) можно, нажимая кнопку
П>~1 - Selects next frame (Выбрать следующий кадр), а к предыдущим - нажимая кнопку
К Н - Selects previous frame (Выбрать предыдущий кадр) в нижней части палитры
Animation (Анимация).
Значение 1,5 секунды в меню времени задержки отсутствует. Поэтому для указания вре-
мени следует воспользоваться специальным диалогом.
> Щелкните мышью в палитре Animation (Анима- Set Flame Delay
ция) на треугольном значке -г - Selects frame
delay time (Выбор времени задержки кадра) под
миниатюрой первого кадра и в появившемся ме-
ню времени задержки выберите Other (Другое).
На экране появится диалог Set Frame Delay Рис
. 6 Ж
Диалог Set Frame Delay
(Установка времени задержки кадра) (Рис. 6.10).
(Установка времени задержки
> В поле ввода Set Delay (Установить задержку) кадра)
введите 1,5.
> Нажав кнопку ОК, закройте диалог Set Frame Delay (Установка времени задержки
кадра). Указанное время задержки - 1,5 sec. - отобразится под миниатюрой перво-
го кадра.
> Просмотрите анимацию, нажав кнопку П>П - Plays/Stops animation (Проигрыва-
ние/Остановка анимации) в палитре Animation (Анимация).
Вы увидите, что теперь надпись Вам нужна локальная сеть? сохраняется на экране
дольше чем прежде, а затем, после ее исчезновения появляется надпись Заходите
СЮДА! и через секунду после нее - рисунок открытой двери.
>- Остановите проигрывание анимации нажатием кнопки | D |.
Создаем анимацию с помощью Adobe ImageReady 245
Вы, вероятно, уже заметили, что проигрывание мультипликации повторяется беспрерыв-
но, до остановки кнопкой | о |. Так предусмотрено по умолчанию, и информация об этом
режиме проигрывания - Forever (Непрерывно) - выводится у левого края нижней строки
палитры Animation (Анимация).
> Щелкните мышью на треугольном значке •*•
справа от надписи Forever (Непрерывно). На эк-
•BBH
ране появится меню повторений, из которого вы 1 ~^2 times
можете выбрать значение Once (1 раз) или Other
Play;
I OK |
> Нажав и удерживая клавишу li Shif| I щелкните мышью на третьем кадре анимации.
Оба кадра будут выделены.
>• Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным, а выде-
ление второго кадра будет снято.
Переместим слой Layer 3 в окне документа вправо, предварительно выделив его.
> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слой будет выделен.
>• Нажмите кнопку \*+\ - Move Tool (V) (Инструмент «Перемещение» (V)) на панели
инструментов (Tools), чтобы выбрать данный инструмент.
> Не отпуская клавишу \\sm\. нажмите несколько раз клавишу j ^ j . Каждое нажатие
этой клавиши будет перемещать в окне документа надпись Заходите СЮДА! на
10 пикселов вправо. Расположите надпись так, чтобы последний ее символ находился
«в открытой двери» (Рис. 6.12).
\\2 Geoton.psd @ 100% (Original) Ham!
о!
ГЕОТОН
клавишу ll Shitt l. Напомним, что в этом случае каждое нажатие стрелочной клавиши пе-
ремещает слой на один пиксел в соответствующем направлении.
Выделим второй и третий кадры, чтобы сгенерировать между ними последовательность
кадров, которые создадут эффект анимации.
Layers -
© A I Layers
О Selected Layers
Parameters -
0 Position
0 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) и, таким образом, создан плавный переход изображения.
>• Нажмите кнопку [Т>] - Plays animation (Проигрывание анимации) в нижней части
палитры Animation (Анимация) и просмотрите созданный эффект.
Вы увидите, что теперь, после исчезновения надписи Вам нужна локальная сеть?,
возникает надпись Заходите СЮДА!, которая движется в направлении постепенно появ-
ляющейся «открытой двери» и «заходит» в нее.
> Остановите проигрывание анимации нажатием кнопки | а |.
Анимация готова. Теперь ее нужно оптимизировать и сохранить в формате GIF.
Адрес: Щ
Q
C:\Documentt and Setting*\VasilyU_ocal Settingi\TempMmageReady\TargetPreview4\Ge Q Q Перекод Link
<head>
<ticle>Gaoeon</title>
:»eta hctp-ecruiv«" Content-Type" content* "text /htul; char set «
E
I Готово J g M)iCcmputoi
Папка: в? о-
CLOUD
Fon
Samolet
Создание Web-сайта
с помощью Microsoft FrontPage 2003
Для создания полноценного сайта вовсе необязательно знать язык HTML. Конечно, по-
лезно иметь представление о структуре хранения Web-страниц, но при этом нет необхо-
димости запоминать названия тегов и различных параметров. Специальные редакторы,
ориентированные на визуальную разработку сайтов, позволяют проектировать Web-
страницы так же легко, как и создавать документ в текстовом редакторе. Вы можете раз-
мещать на странице текст, таблицы, рисунки, видео, создавать ссылки, использовать раз-
личные интерактивные компоненты и при этом работать со страницей в режиме
WYSIWYG (What You See Is What You Get - Что видишь, то и получаешь), то есть прак-
тически в том виде, в каком она будет выглядеть в браузере. Визуальный редактор позво-
ляет скрыть внутреннее представление страницы в формате HTML, что существенно об-
легчает разработку и избавляет от поиска синтаксических ошибок.
1
Здесь мы часто будем называть Web-сайты Web-узлами и наоборот. Эти два понятия являются
синонимами.
Создание Web-сайта с помощью Microsoft FrontPage 2003 253
и :ж )
Нет
> Нажмите кнопку Да (Yes). На экране останется только рабочее окно программы (Рис. 7.2).
254 Создание Web-сайтов
BSBB
Office в Интернете
• Подключиться к веб-узлу
Microsoft Office Crime
• Последние сведения об
использовании FrontPage
• Автоматически обновлять
этот список из Веба
Д4гю.'
Открыть
Веб-узлы
{ ^ Открыть узел...
Страницы
£gr Открыть...
Итчеты >
на панелях. А Гиперссылки
Задачи
Панели инструментов
CUI+F1
»
(new_page_l.htm).
И Обновить F5
Чтобы вновь показать область задач, нужно опять нажать комбинацию клавиш
В нижней части рабочего окна программы находится строка состояния, на которой выво-
дится информация о ходе выполнения различных команд.
В 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-сайтов
Можно импортировать файлы с существующего веб-узла или из папки на компьютере или в сети.
L
ГЛ Вкпочить дочерни» узлы
d Использовать пассивный FTP
П Требуется шифрованное подключение SSL
Укажите место для создания локальной копии. Оно может находиться на локальном компьютере, е локальной
сети или на любом сервере, выполняющем серверные расширения FrontPage или службы SharePoint Services.
В поле Расположение локальной копии (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-сайтов
зшыние ограничений на и
• ••••••••••им
Импорт 1<n-dk_.ipg' ив
T*tp://www.gov.ru/'
в 'C/Documents and Settings/Vasily/My
Documents/Мои веб-узлы/мой_уэел'
В процессе загрузки файлов сайта может появиться диалог Подтвердите замену файла
(Confirm File Replace) (Рис. 7.8).
Подтверждение замены Файла
> В случае появления диалога Подтвердите замену файла (Confirm File Replace) на-
жмите кнопку Нет (No), чтобы не заменять уже скопированный файл.
Импорт будет завершен после загрузки всех файлов или при достижении установленного
предела размера сайта.
В процессе импорта программа FrontPage копирует файлы сайта с удаленного сервера на
локальный диск и размещает их в отдельной папке. Фактически сайт представляет собой
набор файлов, содержащихся в определенной папке и вложенных папках. Обычно Front-
Page размещает сайты в папке Мои Web-узлы (My Web Sites), которая создается в папке
Мои документы (My Documents). Если для сайта не указано имя, ему по умолчанию при-
сваивается имя мой_узел (mywebl) или похожее.
После завершения импорта сайт будет загружен в редактор FrontPage, и в заголовке окна про-
граммы рядом с названием приложения появится путь к папке сайта на локальном диске. Про-
грамма переключится в представление Папки (Folders). В левой части рабочего окна про-
граммы будет показано дерево папок, а в правой части появится новая вкладка со спи-
ском папок и файлов сайта (Рис. 7.9).
>• Щелкните правой кнопкой мыши на вкладке нов_стр_1.Мт (new_page_l.htm) и в
появившемся контекстном меню выберите команду меню Закрыть (Close), чтобы за-
крыть пустую страницу, созданную при запуске программы.
В представлении Папки (Folders) все страницы, рисунки и другие файлы, составляющие
сайт, представлены так же, как и в программе Проводник (Explorer) операционной систе-
мы Windows. Слева выводится дерево папок, справа - содержимое выбранной папки.
В этом режиме вы можете перемещать, удалять или переименовывать файлы в ходе рабо-
ты над сайтом. Двойной щелчок на имени файла страницы открывает ее для редактиро-
вания. Обычно файл главной страницы сайта называется index.htm или default.htm.
>• Найдите файл с таким именем в списке файлов и дважды щелкните на нем мышью. В
правой части рабочего окна появится новая вкладка index.htm, и на ней будет показа-
на выбранная страница в режиме Конструктор (Design) представления Страница
(Page) (Рис. 7.10).
260 Создание Web-сайтов
| й Miciosofl FiontPage - C:\Documents and SeltingsWasilySMy Documents\MoH ввв <|злы\иой_9зел Я-IQ!
Файл Правка &нд Вставка Формат Сервис Хаблица Данные Еамки Окно Справка
ж к
3 Н I № в = S | А ** 11= := '=МРЧ В • Е- ;
Список папок Р) f^ii x
Файл Правка В ид В ставка Ф ормат Сервис 1а6яица Данные £амки Дкно Справка
^3 ^3 В к о д ^Просмотр I i I
-nain/symbols/gstt3 2 html j[0:21 при 56 кбитУс J618 x 37 3 [no у мо лчаникГ] j настройка 4
ОФИЦИАЛЬНАЯ
РОССИЯ
СЕРВЕР ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Miciosoft FiontPage - C:\Documents and SetttngsWasilyVMy DocumentsVMoH ьеб уэльЛмой yiieflWidt-x him
: 5£айл Правка В_мд Вставка Формат Сервис 1аблица Данные Рамки £кно Справка
31 ж ^ н I ш ш т ш | А *' 11= ;= i* ?е | ш • Е • !
х
9 | веб-узел
t
ОРГАНЫ 6ЛАСП»
ИСПОЛНИТЕЛЬНОЙ РОССИЙСКОЙ
ВЛАСТИ ФЕДЕРАЦИИ
^Конструктор В с разде
|[635хЗЭ8
ж к з |щ т т т | 1= 1= * iw I ш - £ •
Список папок
Рис. 7.14. Отчет Сводка по узлу (Site Summary) представления Отчеты (Reports)
>• Выберите команду меню Вид • Гиперссылки (View • Hyperlinks) и щелкните мышью
на элементе index.htm в левой части рабочего окна программы, чтобы переключиться
в представление Гиперссылки (Hyperlinks) (Рис. 7.15).
By Microsoft FrontPage - C:\Documenls and SettingsWasilyVMy Documents\Mtm веб-уэпыЧмий «JJ
Правка Дид Вставка Формат Сервис 1абяи*а Данные Панки Окно Справка
main/pages.html
, mairVpage3.html
,mahVmintelry/i5p-vtart«.html
age! 0. html
•—•—*^|l http://w-vvw.scrf.gov.iu/
http://www. cikrF.ru/
main/regions/regioni-44. html
jmain/symbols/gsrf 1 .html
maki/page4.html
В этом режиме в правой части рабочего окна отображается схема гипертекстовых связей
между страницами сайта, документами и рисунками. С помощью этой схемы можно про-
следить за входящими и исходящими ссылками для каждой страницы. О гиперссылках
мы поговорим подробнее в отдельном опыте.
Представление Задачи (Tasks) предназначено в основном для планирования коллектив-
ной работы над проектом сайта. В этом режиме можно запланировать задачи, закрепить
их за отдельными разработчиками и следить за ходом их выполнения.
Начиная разработку собственного сайта, можно взять за основу уже готовый, импортиро-
вав его из Интернета или с локального диска, как было сделано в предыдущем опыте.
А можно создать новый сайт, воспользовавшись шаблоном с готовыми примерами или
мастером.
Создание Web-сайта с помощью Microsoft FrontPage 2003 265
Параметры
укажите расположение нового веб-узла:
ОК [ Отиеиа
В поле ввода Указать расположение Web-узла (Specify the location of the new Web site)
можно указать папку, отличную от предложенной по умолчанию.
> Среди шаблонов диалога Шаблоны Web-узлов (Web Site Templates) выберите значок
Мастер создания корпоративного Web-узла (Corporate Presence Wizard) и нажмите
кнопку ОК. На экране появится первый диалог мастера, содержащий текст о его на-
значении (Рис. 7.18).
Мастер создания корпоративного ьеб-чз!
ЕЗ дсмашняя (обязательная)
ЕЗ продукты и услуги
[Э оглавление
0 обратная ;Свяэь
0 Форма поиска
Вы можете указать мастеру, что в состав сайта нужно включить определенные страницы,
установив следующие флажки: новости (What's new), продукты и услуги (Prod-
ucts/Services), оглавление (Table of Contents), обратная связь (Feedback Form) и форма
поиска (Search Form).
> Сбросьте все флажки, кроме домашняя (обязательная) (Home (required)) - мы потом
самостоятельно создадим страницы с формами и оглавлением. Нажмите кнопку Да-
лее (Next). На экране появится следующий диалог мастера (Рис. 7.20).
О профиль организации
0 контактные сведения
В этом диалоге с помощью флажков можно выбрать условные разделы для первой (до-
машней) страницы сайта. На домашнюю страницу можно поместить выбранную инфор-
мацию, установив следующие флажки: вступление (Introduction), предназначение (Mis-
sion Statement), профиль организации (Company Profile), контактные сведения (Con-
tact Information).
268 Создание Web-сайт о з
>• Сбросьте все флажки. Нажмите кнопку Далее (Next). На экране появится четвертый
диалог мастера (Рис. 7.21).
О Нет
> Установите переключатель Нет (No) и нажмите кнопку Далее (Next). На экране поя-
вится шестой диалог мастера (Рис. 7.23).
Создание Web-сайта с помощью Microsoft FrontPage 2003 269
[Туристическое агентство . !
В этом диалоге имеются три поля ввода, в которых нужно указать полное название орга-
низации, ее краткое название и почтовый адрес. Эти сведения будут сохранены в пере-
менных и могут затем использоваться во многих местах на страницах сайта.
> Заполните поля так, как показано на рисунке и нажмите кнопку Далее (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).
И Miciosolt FiontPage - CADocumenls and SellingsWasilyVMy DocumenUWou веб-узльЛТдрагентство
' Файл ПР<* в к а Ёид Вставка Формат Сервис 1аблнца Данные Рамки QKHO £лравка
* ! • * !
jl ж А- н I ш т т ш | А ** 11= В | ffl • Ж
Список папок D ЁЭ X
£3 C:\Documents and Setting; Содержимое "C:\DocumentS and 5ettings\tfasiy\My Documents\MoM ве6-уэлы\Турагеитство"
S *Ь -borders l Название Размер [ Tun I Изменен \ Кем изненен
i* £D Jpdass .borders
В папке сайта мастер помещает файл домашней страницы, обычно имеющий назва-
ние index.htm. Кроме этого, FrontPage создает в папке нового сайта несколько вло-
женных папок, например: images для хранения рисунков и _private для хранения
скрытых документов. Файлы и папки, помещенные в папку „private, не могут быть
просмотрены посетителем сайта с помощью браузера. В ходе дальнейшей работы, в
зависимости от элементов и средств, используемых при. проектировании сайта,
FrontPage может создавать в папке сайта дополнительные файлы и вложенные пап-
ки. Вы можете создать собственные вложенные папки в папке сайта, например, для
хранения звуковых файлов. Для этого можно нажать кнопку (^] в верхней части па-
нели, в которой отображается дерево папок. Другой способ создать новую папку -
щелкнуть правой кнопкой мыши на свободном пространстве рабочего окна и в поя-
вившемся контекстном меню выбрать команду Создать • Папка (New • Folder).
272 Создание Web-сайтоз
> Закройте дерево папок в левой части рабочего окна, нажав кнопку [х]> расположенную
в правом верхнем углу панели с деревом папок.
> Дважды щелкните мышью на файле index.htm в папке сайта. Домашняя страница
будет открыта на отдельной вкладке и будет установлен режим Конструктор (Design)
для ее редактирования (Рис. 7.28).
JptjMicrosoft FrontPage - tADocumonts and SettingsWasily\My Documents\MoH веб-узлы\Турагентство\т<1ех.М
Правка В ид В ставка Ф ормат Сервис Таблица Данные Рамки Окно Справк а
Всразделением Е к о д QnpocMOTpjI* I
Итак, перед вами первая страница сайта, а точнее макета сайта, созданного мастером. Стра-
ница разделена пунктирной линией на несколько областей. В верхней области находится
навигационное меню (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 выводит в таких местах подсказки курсивным шрифтом.
Обычно, если какой-либо элемент не может быть отображен на странице, на его месте вы-
водится краткая подсказка, как можно сделать этот элемент видимым. В нижней области
страницы показываются контактный адрес и дата последнего обновления.
Области по краям страницы, включающие заголовок страницы, навигационные меню и
контактный адрес - это так называемые общие границы (shared borders). Они содержат
общую информацию для нескольких страниц сайта. В режиме редактирования общие гра-
ницы отделены от основного содержимого страницы пунктирной линией.
В центральной области располагается основное содержимое страницы. При создании
макета сайта с помощью мастера сюда могут быть помещены примеры создания различ-
ных элементов: заголовки, текст, списки, формы и т.д., которые потом можно удалить или
изменить нужным образом. Мастер также вставляет на страницу примечания. Они выде-
лены сиреневым цветом и начинаются со слова Примечание (Comment). Вы можете сами
добавлять комментарии, касающиеся особенностей проектирования страницы. Для этого
необходимо в меню программы выбрать команду Вставка • Примечание (Insert •
Comment). Примечания, естественно, не будут видны в браузере.
Сделаем некоторые настройки, относящиеся к странице в целом.
>- Щелкните правой кнопкой мыши в любой области страницы и в появившемся контек-
стном меню выберите команду Свойства страницы (Page Properties). На экране поя-
вится диалог Свойства страницы (Page Properties) с открытой вкладкой Общие
(General) (Рис. 7.30).
>• В поле ввода Название (Title) укажите текст, который будет появляться в заголовке
окна браузера при просмотре страницы. Обычно он соответствует заголовку страни-
цы или названию раздела сайта.
>• Выберите вкладку Язык (Language) (Рис. 7.31). Скорее всего, вы будете размещать
русскоязычную информацию на страницах сайта, поэтому в открывающемся списке
Пометить текущий документ, указав (Mark current document as) выберите Русский
(Russian), если у вас указан другой язык.
Указание языка для страницы позволяет выполнять автоматическую проверку орфогра-
фии при вводе текста.
>• Нажмите кнопку ОК, чтобы сохранить настройки и закрыть диалог Свойства стра-
ницы (Page Properties).
274 Создание Web-сайтов;
{Свойства страницы
Ключевые слова:
Базовое расположение:
Фоновый звук — —
Расположение: J | Обзор... ]
Число повторов: И Непрерывно
L ок Отмена
Рис. 7.30. Вкладка Общие (General) диалога Свойства страницы (Page Properties)
| Свойства страницы
Язык страницы •
Пометить текущий документ, указав:
Набор знаков
Сохранить документ, используя:
кириплица
Повторить загрузку текущего документа, используя:
I <автоматический выбор>
ОК
JL Отмена
J
Рис. 7.31. Вкладка Язык (Language) диалога Свойства страницы (Page Properties)
Версиа схемы;
(internet Explorer 5.0 Izi
OK | Отмена
Шрифт I ^узна^'ыйТжт^агП
Шри&т; Начертание: Размер:
полужирный 3 (12 пт)
обычный
4 (14 лт) •"
5(18лт) р
полужирный курсив 6 Р4 пт) i_
'(Зблт) £
Цвет:
Видоюменение
П подчеркнули О малье прописные П пример
Q зачеркнутый G все прописные П определение
О надчеркнутый G первые прописные П с_сылка
Q мерцание П скрытый Q переменная
О надстрочный П жирный П клавиатура
П подстрочный. G курсив
Просмотр
АаБбЮюЯя
В верхней части диалога расположены списки для выбора атрибутов шрифта: Шрифт
(Font), Начертание (Font Style) и Размер (Size), которые имеются во всех стандартных
диалогах выбора шрифта. Чуть ниже расположен открывающийся список для выбора
цвета шрифта (Color) и набор флажков Видоизменение (Effects) для задания различных
эффектов. В поле Просмотр (Preview) отображается пример текста с выбранными на-
стройками. Настройки межсимвольных промежутков и положения в строке используются
реже и вынесены на отдельную вкладку Межсимвольный интервал (Character Spacing).
> Выберите какие-нибудь нестандартные настройки для выделенного фрагмента, на-
пример: шрифт АпаГ, стиль Полужирный (Bold).
>• Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки к тексту.
Если в представлении Страница (Page) вы выберете режим Код (Code) или С разделе-
нием (Split), нажав соответствующую кнопку в нижней части вкладки index.htm, то уви-
дите, как выбранные атрибуты текста будут сохранены в виде соответствующих тегов.
>• Убедитесь, что текстовый курсор остался на второй строке набранного ранее текста и
выберите в меню команду Формат • Абзац (Format • Paragraph). На экране появится
диалог Абзац (Paragraph) (Рис. 7.34).
В этом диалоге можно изменить настройки, относящиеся целиком к текущему абзацу.
Открывающийся список Выравнивание (Alignment) задает способ выравнивания строк
на странице. Группы элементов управления Отступ (Indentation) и Интервал (Spacing)
предназначены для регулирования отступов и интервалов для строк абзаца.
)тступ —
слева:
М переаа строка:
справа;
Интервал
гчред:
JH
после: бинарный
Образец
> Выберите в меню команду Формат • Границы и заливка (Format • Borders and Shad
ing). На экране появится диалог Границы и заливка (Borders and Shading) (Рис. 7.35).
Границы и заливка
Стиль: Образец
сплошная Для добавления границ
точечная используйте следующие
пс умолчанию пунктир кнопки
двойная
желобок
рубчик
углубление
возвышение
другая
Цвет:
I D Авт.
Ширина:
Верхнее:
~Щ Ьижнее:
ок Отмена I
Рис. 7.35. Вкладка Граница (Borders) диалога Границы и заливка (Borders and Shading)
Вы можете задать Цвет (Color) и Ширину (Width) рамки, а также установить Поля (Pad-
ding), т.е. отступы от рамки до текста. В панели просмотра Образец (Preview) можно
увидеть пример рамки с выбранными атрибутами, а также включить или отключить ви-
димость произвольных сторон рамки с помощью кнопок ||::Е1|, [ЕВ], ш_ и |Ш|.
>• Выберите вкладку Заливка (Shading) для выбора цвета и способа заливки фона абза-
ца (Рис. 7.36).
Образец
Цвет фона:
|Ю Авто
Цвет, текста:
| • Авто
Уюр
Фоновый рисунок:
ОК ) Отмена |
Рис. 7.36. Вкладка Заливка (Shading) диалога Границы и заливка (Borders and Shading)
> В открывающемся списке Цвет фона (Background color) выберите произвольный цвет
фона.
На данной вкладке для всего абзаца можно также задать Цвет текста (Foreground color) и
установить произвольный Фоновый рисунок (Background picture).
>• Нажмите кнопку ОК, чтобы закрыть диалог и применить выбранные настройки.
> Выберите представление Просмотр (Preview), нажав соответствующую кнопку в
нижней части вкладки index.htm. Страница будет отображена в том виде, в каком она
будет выглядеть в окне браузера (Рис. 7.37).
На странице должен быть виден введенный текст, но видны и линии разметки.
>• Снова переключитесь в режим Конструктор (Design) представления Страница (Page),
нажав соответствующую кнопку в нижней части вкладки index.htm, чтобы вернуться
к редактированию страницы.
280 Создание Web-сайтов
К Miciosofl FrontPage - C:\Documents and Settings WasilvSMii Documents\MoH иеб азл|ЛТ<|рагентстео\тс)ек htm
£айл Правка £ид Вставка Формат Сервис Т_аблица Данные £амки Дкно Справка
II 1 -II Ж К Ч IA *'li=i=
веб-узел
Туристическое агентство
[Измените свойства этой панели для отображения на ней гиперссылок]
ОКонструктор В С разделением Е ) К о д И
Е
•|730 к ЗЭ8 Цвсе Цнастройка _
Мы предлагаем ll Enter l
Enter
Туры по зарубежным странам ll l
Enter
Туры по странам СНГ |[ l
Путевки на лучшие курорты России
nter
Авиабилеты на внутренние и международные рейсы JF l
ОК
J
Рис. 7.38. Вкладка Графические маркеры (Picture Bullets)
диалога Свойства списка (List Properties)
На вкладке Графические маркеры (Picture Bullets) для списка можно выбрать рисунок
маркера либо из текущей темы, либо задать любой рисунок. Количество вкладок в диало-
ге Свойства списка (List Properties) зависит от выбранной темы. Тема предварительно
выбирается в области задач после выполнения команды меню Формат • Тема (Format •
Theme).
282 Создание Web-сайтов
На вкладке Нумерация (Numbers) диалога Свойства списка (List Properties) можно вы-
брать вариант нумерации для создания упорядоченного списка. Чтобы быстро превратить
текст в нумерованный список, можно воспользоваться кнопкой |f~| или выбрать соответ-
ствующий стиль в открывающемся списке Стиль (Style) на панели инструментов Форма-
тирование (Formatting).
Кроме обычных списков с номерами или маркерами, можно создать так называемый
Список определений (Definition List) (Рис. 7.39). Он состоит из набора терминов (De-
fined Term) и их определений (Definition). Для создания такого списка нужно воспользо-
ваться соответствующими стилями.
!•»-•» - О В Д I € Л S i Щ.
| Адрес | £ ] hllpV/bolizm.ihep.iu/Libaf/1nteinet.Gioen/oto»aiy.engfcth_hlml R l ^Пережщ \] Ссылки
ACD
1. Automatic Call Distribution • автоматическое распределение вызовов. В системах
телефонной связи.
2. Automatic Call Distributor - устройство автоматического распределения вызовов.
ACIA
A synchronous Conununicationf Interface Adapter" адаптер асинхронной связи.
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)) делает линию сплошной.
>• В открывающемся списке Цвет (Color) выберите произвольный цвет для линии и на-
жмите кнопку ОК. Разделительная линия будет окрашена выбранным цветом.
Создание Web-сайта с помощью Microsoft FrontPage 2003 283
Цвет:
I D Авто N 1 П Сплошная линия (без мливки)
| Стиль... ]
Чтобы привлечь внимание к фрагменту текста или заголовку, можно придать ему эффект
бегущей строки.
> Выделите первую строку набранного на странице текста Мы рады приветствовать
вас на нашем сайте.
> Выберите команду меню Вставка • Web-компонент (Insert • Web Component). На
экране появится диалог Вставка компонента Web-узла (Insert Web Component)
(Рис. 7.41).
Поиск компонентов
в Интернете I Отмена | [ <Нюад [ Далее > |[ Готово ]
В списке Тип компонента (Component type) можно выбрать один из доступных компо-
нентов, а в списке Выберите эффект (Choose an effect) - вариант выбранного компонен-
та. Сейчас выбран динамический эффект Бегущая строка (Marquee).
>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства бегущей
строки (Marquee Properties) (Рис. 7.42).
284 Создание Web-сайтов
• Свойства бегущей строки
"Размер""™-— "Повторы
О BTCJ4K4X 12 Непрерывно
П Ширина:
О Высота:
О епроцентах Цвет фона:
[_П_Ав
Стиль... Отмена
В поле ввода Текст (Text) находится текст выделенного фрагмента, который будет выво-
диться как бегущая строка. С помощью переключателя Направление (Direction) можно
•выбрать направление движения строки: справа налево (Left) или слева направо (Right).
В группе элементов управления Скорость (Speed) регулируется задержка между после-
довательными сдвигами текста (Delay) и величина сдвига в пикселах (Amount). Группа
элементов управления Поведение (Behavior) задает режим перемещения текста: при ус-
тановке переключателя прокрутка (Scroll) текст периодически пробегает по экрану, как
на информационном табло, при установке переключателя сдвиг (Slide) текст перемеща-
ется до противоположной границы, останавливается и остается на экране, при установке
переключателя попеременно (Alternate) текст перемещается внутри границ области бе-
гущей строки. Группа элементов управления Размер (Size) определяет ширину (Width) и
высоту (Height) прямоугольной области бегущей строки. Если соответствующие флажки
сброшены, то значения определяются по размеру текста. Установленный флажок Непре-
рывно (Continuously) в группе элементов управления Повторы (Repeat) задает неогра-
ниченное число повторений прокрутки строки; если флажок сброшен, то в поле ввода со
счетчиком задается количество повторений. Открывающийся список Цвет фона (Back-
ground color) определяет цвет фона в области перемещения бегущей строки.
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства бегущей строки (Marquee
Properties). Текст заголовка внешне не изменится, но будет преобразован в отдельный
компонент.
Туристическое агентство
{Измените свойства этой панели для отображения нэ ней гиперссылок]
Чтобы отредактировать текст бегущей строки или изменить его свойства, необходимо
снова вызвать диалог Свойства бегущей строки (Marquee Properties), дважды щелкнув
мышью в области текста. Попробуйте изменить настройки бегущей строки и посмотрите,
как это будет выглядеть в режиме просмотра страницы.
В случае, когда текст, который планируется разместить на странице, уже набран в тексто-
вом редакторе и сохранен на диске, вы можете вставить его прямо из файла. FrontPage
позволяет загружать и конвертировать информацию из основных форматов текстовых
документов и документов MS Office. Если, к примеру, требуется вставить фрагмент текста
страницы, взяв его из обычного текстового файла, необходимо сделать следующее.
> Установите текстовый курсор на странице в позицию, начиная с которой будет распо-
лагаться вставленный текст.
>• Если файл содержит текст на русском языке, проверьте, что выбран русский язык вво-
да для клавиатуры. Если это не так, переключитесь на русский язык. При загрузке и
преобразовании текстового файла FrontPage установит язык в соответствии с теку-
щим языком ввода.
> Выберите команду меню Вставка • Файл (Insert • File). На экране появится стан-
дартный диалог открытия файла Выбор файла (Select File) (Рис. 7.44).
286 Создание Web-сайтов
Выбор Файла
Jкаталог CD
^Мои веб-узлы
9Мои видеозаписи
^Мои рисунки
2Мои рисунки
5 Моя музыка
Имя Файла:
Преобразовать текст в:
О один отформатированный абзац
0 ртформатироеаннью ^заць||
О обычные абзацы
О ае преобразовывать
СЖ
JL Отм
Рис. 7.45. Диалог Преобразование текста (Convert Text)
Образец
Типичные Форма Форма
вопросы обрати.,. подтвержд...
L JL
Рис. 7.46. Диалог Шаблоны страниц (Page Templates)
> Выберите шаблон Обычная страница (Normal Page), который служит для создания
пустой страницы, и нажмите кнопку ОК. В рабочей области программы появится но-
вая вкладка с пустой страницей1.
Точнее пустой будет ее основная, центральная часть, а в общих границах по краям стра-
ницы будут отображаться общие для этих областей элементы. Допустим, эта страница
будет содержать новости.
> Выберите в меню команду Файл • Сохранить (File • Save). На экране появится стан-
дартный диалог сохранения файлов Сохранить как (Save As) (Рис. 7.47).
щ
Мое сетевое
Название:
Имя файла:
Новая страница 1
|ное_стр_1
Изменит!....
Ы
|
ы
окружение Тип файле: 1 Веб-страницы
1
Для быстрого создания новой пустой страницы можно воспользоваться также комбинацией кла-
виш (Щ + Щ,
Создание Web-сайта с помощью Microsoft FrontPage 2003 289
> В поле Имя файла (File Name) введите имя файла страницы, например news.
Нажмите кнопку Сохранить (Save). Диалог Сохранить как (Save As) закроется, и
страница будет сохранена на диске.
> Описанным выше образом создайте и сохраните в папке сайта еще три страницы -
например для общего описание услуг'services и для описания туров touri и tour2.
Вкладки этих страниц появятся в рабочем окне программы FrontPage.
ctrl F1
>• Нажмите комбинацию клавиш I! I+| I, чтобы скрыть область задач.
Alt F1
> Нажмите комбинацию клавиш I l+i| l, чтобы показать Список папок (Folder List).
Чтобы посетители смогли попасть с домашней страницы сайта на другие страницы, нуж-
но сделать на них ссылки. Вы можете самостоятельно определить пути возможных пере-
ходов, создать ссылки и связать их с нужными страницами. Но лучше воспользоваться
возможностями FrontPage, позволяющими упростить создание структуры навигации.
>- Выберите команду меню Вид • Переходы (View • Navigation). Программа переклю-
чится в представление Переходы (Navigation), и в ее рабочем окне будет отображена
схема навигации (Рис. 7.48).
(• £2) „overlay
i £ 3 jwtvate
I ^ t _thefr»es
fi ^ i m a g e s
[ news.htm
f services.htm
ftourl.htm
ЭТО представление отобрашавт структуру переходов
(tour2.htm
веб-ysjw Для ветоиатимесксго добавлений кнопок
переходов на эти страницы выберите команду 'Общие
границы" в меню "формат". '
Т.".
Рис. 7.48. Исходный вид схемы навигации
Пока в схему навигации входит лишь домашняя страница. Чтобы новые страницы содер-
жали навигационные меню и стали доступны из меню других страниц, необходимо
включить их в схему навигации.
>- Перетащите с помощью мыши файл news из списка файлов сайта (Folder List) на
схему навигации ниже домашней страницы. На схеме будет установлена связь меж-
ду страницами (Рис. 7.49).
10-1210
290 Создание Web-сайтов
После того, как новая страница будет добавлена в схему навига-
ции, введем для нее новый заголовок, вместо присвоенного по
умолчанию.
>• Щелкните правой кнопкой мыши на изображении страни-
цы на схеме. На экране появится контекстное меню.
у Выберите в контекстном меню команду Переименовать
Рис. 7.49. Схема
(Rename). На месте заголовка страницы на схеме появится
навигации
поле ввода.
после добавления
>• Введите заголовок для страницы, например Новости, и новой страницы
нажмите клавишу llEnterl.
Тексты названий для ссылок или кнопок в меню навигации устанавливаются по заголов-
кам страниц, на которые они ссылаются. Поэтому желательно делать заголовок кратким
(одно-два слова), чтобы соответствующая ссылка выглядела аккуратно.
> Поместите на схему навигации другие страницы так, чтобы страница services нахо-
дилась на одном уровне со страницей новостей, а страницы с описанием туров были
связаны со страницей services и располагались на втором уровне. Поменяйте заго-
ловки для новых страниц (Рис. 7.50).
Туристическое аг,.. |
* а
г г
Новости Услуги
R 1
г 1
Египет Греция
родительская страница:
Предыдущая страница:
[ Па умолчанию j
Рис. 7.51. Вкладка Переходы (Navigation) диалога Параметры узла (Site Settings)
> Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings) и сохра-
нить настройки.
Теперь посмотрим, какие изменения произошли на страницах сайта.
>• Дважды щелкните мышью на изображении домашней страницы на схеме навига-
ции. Будет установлен режим Конструктор (Design) Представления Страница
(Page) (Рис. 7.52).
292 Создание Web-сайтов
Файл Правка Вид Вставка Формат Сервис Хаблица Данные Рамки Дкно Справка
:+) 2Э „overlay
] j j j j _themes
Г
) £ 3 images
^
£ f index.htm
news.htm
Туристическое агентство
Щ services.htm
Щ tout 1.htm
[Измените свойства этой панели для отображения на ней гиперссылок
Мы предлагаем
^^^^Д^Я Не
Рис. 7.52.' Ссылки в навигационном меню для перехода к разделам Новости и Услуги
В левой области страницы в навигационном меню появились ссылки для перехода к раз-
делам услуг и новостей.
> Нажмите и удерживайте клавишу IIc t r i I. Подведите указатель мыши к одной из ссы-
лок. Указатель примет форму ^ J . Щелкните на ссылке. Будет открыта соответствую-
щая страница.
Таким способом можно переходить по ссылкам в режиме редактирования страницы.
В режиме Просмотр (Preview) и в браузере кнопки навигации работают обычным обра-
зом, и нажимать клавишу \ не требуется.
Проверим, как работает созданная структура навигации в браузере и как выглядит каждое
из трех навигационных меню на разных страницах сайта.
>• Запустите браузер, нажав кнопку \Ю>\ на панели инструментов Стандартная (Standard).
> Просмотрите сайт в браузере и закройте его, чтобы вернуться к программе FrontPage.
Навигационное меню можно настроить так, чтобы в нем отображались ссылки на стра-
ницы определенного уровня относительно текущего.
> В режиме редактирования страницы Конструктор (Design) щелкните правой кнопкой
мыши на одном из навигационных меню и в появившемся контекстном меню выбери-
те пункт Свойства панели ссылок (Link Bar Properties). На экране откроется диалог
Свойства панели ссылок (Link Bar Properties) (Рис. 7.53).
Создание Web-сайта с помощью Microsoft FrontPage 2003 293
Добавляемые ссылки -
ОК Отмена
Выберите стиль:
Описание:
Стиль, основанный на тене страницы.
L ок Отмена
> Нажмите кнопку 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
Общие границы
Применить:
{•} £о всем стрэницам^
О к текущей странице
И Сверху
[yj] включить кнопки переходов
0 Слева
[ 3 включить кнопки переходов
• Справа
• ьключмть кнопки ледоход»
В Снизу
Свойства границы...
L J
Рис. 7.55. Диалог Общие границы (Shared Borders)
Недавно использовавшиеся
Щелкните мышью на ярлыке index.htm в верхней части
рабочего окна программы, чтобы открыть домашнюю
страницу, и выберите режим редактирования Конструк-
тор (Design), если у вас установлен другой режим. Волны
Q Яркие цвета
Нажмите комбинацию клавиш чтобы скрыть 13 Активные рисунки
Любая выбранная тема также по умолчанию применяется ко всем страницам сайта. Если
установить указатель мыши на выбранную тему, то в правой части миниатюры появится
кнопка с треугольником (Рис. 7.57) для доступа к меню (Рис. 7.58)
Под списком тем расположены флажки, которые позволяют задать дополнительные пара-
метры для выбранной темы. При установке флажка Яркие цвета (Vivid colors) цвета неко-
торых элементов для данной схемы будут иметь более яркие оттенки. Флажок Активные
рисунки (Active graphics) определяет использование более сложных контуров и узоров при
отображении заголовков, кнопок и других графических элементов. При сброшенном флаж-
ке графические элементы в ряде тем принимают более строгий вид. Флажок Фоновый ри-
сунок (Background picture) разрешает использование фонового рисунка на страницах сайта.
> Установите флажки Яркие цвета (Vivid colors), Активные рисунки (Active graphics) и
Фоновый рисунок (Background picture) по вашему желанию.
Процесс наложения темы может занять несколько секунд, после этого страницы примут
внешний вид в соответствии с выбранной темой (Рис. 7.59). Тема заметно изменяет
внешний облик страницы: ссылки в навигационном меню выглядят как кнопки, заголовок
страницы - как баннер, разделительные линии, маркеры и другие элементы также меня-
ют свой вид.
: Файл Правка Вид Вставка Формат Сервис ^Таблица Данные Рэмки Цкно Справка
© l i t A I® ;|
Обычный • Aiial . з пг mi . i ж к н i ш ш а ш | А ** I i= := f.¥ | щ., «у.,
: Тема
kbody> i -' • • й
Ш Текущая тема: Волны
Домашняя J
Выбрать тему
Туристическое агентство
[Измените свойства этой панели для отображения на ней гиперссылоь
Газета
Мы предлагаем • Яркие цвета
0 Активные рисунки
•Туры по зарубежным странам 0 Фоновый рисунок
ШТ\упм пп г т п я ц я м Г*ИГ Создать новую тему..,
1 Д
разделением ЕКод С1Проснотр[[< [
Ц|0-р2.прн 56 к 6x3?2 ] [[настройка^
Вы можете легко заменить тему, выбрав другую в Области задач (Task Pane). Более того,
на основе уже имеющихся тем можно создать новые, изменяя различные элементы
оформления, цвета и стили.
> Выберите команду Настройка (Customize) в меню темы Волны (Waves). На экране
появится диалог Настройка темы (Customize Theme) (Рис. 7.60).
298 Создание Web-сайтов
Кнопка Кнопка
тиль чягпппиия 1
Предполагаемые изменения.
X
@jЦвета,.. | | ^Графика.., | [ <^1екст... [ [Сохранитькак.,. |
Под областью просмотра расположен ряд кнопок, позволяющих изменить основные па-
раметры темы.
>• Нажмите кнопку Цвета (Colors). На экране появится диалог Настройка темы (Cus-
tomize Theme) для настройки цвета (Рис. 7.61).
I *_'| Настройка темы
Объявление
Автомобильная
ш
Ill
Бомбежка
Винегрет
Волны
Переходы по горизонтали
Горизонт
Горошины
щ
Граффити Кнопка Кнопка Кнопка
Движение
Декорация и • Маркированный список
Детская
Завод ШЯШ1 • Маркированный список 1
• Маркированный список 2
Закругление
Затмение ни H I • Маркированный список 3
Кактус wXlMhU«4U№lt*(Hti4*«h
В правой части диалога Настройка темы (Customize Theme) расположена область про-
смотра. В ней отображается пример оформления элементов страницы при выбранной
цветовой схеме. В левой части диалога расположены три вкладки. На первой вкладке
Создание Web-сайта с помощью Microsoft FrontPage 2003 299
Переходы по горизонтали
Маркированный список
Цвета данной схемы:
• Маркированный список 1
• Маркированный список 2
Яркость:
• Маркированный список 3
J- JL
Палитра темы: 0 Обычные цвета О Яркие, цвета
Здесь отображается цветовая диаграмма, с помощью которой можно более точно подоб-
рать требуемую цветовую гамму для текущей схемы.
> Чтобы изменить набор цветов для текущей схемы, щелкните левой кнопкой мыши на
диаграмме и, не отпуская кнопку, переместите маркер в пределах круга.
> С помощью ползункового регулятора Яркость (Brightness) подберите нужную яркость
для текущей цветовой схемы.
>• Выберите вкладку Другой (Custom).
На этой вкладке можно задать произвольный цвет для основного текста, заголовков, ссы-
лок, фона и других элементов страницы.
>• Нажмите кнопку О К, чтобы установить для темы выбранную цветовую схему или
кнопку Отмена (Cancel), если вы не хотите менять настройки цвета. Вы вернетесь к
диалогу Настройка темы (Customize Theme) (Рис. 7.60).
> Нажмите кнопку Графика (Graphics). На экране появится диалог Настройка темы
(Customize Theme) для настройки графики (Рис. 7.63).
300 Создание Web-сайтов;
Es Настройка темы
Объявление
Рисунок (шрифт |
Рисунок:
Объявление
jwevupa.gif
Переходы по горизонтали
Обзор..
Jwavuph.gjf
Маркированный список
О£зор..
• Маркированный список 1
* Маркированный список 2
• Маркированный список 3
Быстрые ссылки
<1_
Рисунки темы: О Обучная графика Активные рисунки
Шрифт:
>• Нажмите комбинацию клавиш I!С1г| 1+11F11. чтобы скрыть область задач.
Как видите, применение готовой темы позволяет без особых усилий придать сайту ори-
гинальный дизайн и единую стилистическую линию. Благодаря тому, что настройками
цвета, графики и текста страниц можно управлять централизованно, изменение общего
визуального стиля сайта также превращается в простую задачу.
. Создаем таблицу
Основным назначением таблицы является отображение табличных данных, различных
списков и расписаний, но, кроме этого, таблицы часто используются при оформлении
Web-страниц для группировки и выравнивания текста и рисунков. В программе Front-
Page имеется богатый набор средств для создания и оформления таблиц. В ячейки таб-
лицы могут быть помещены текст, рисунки и любые другие элементы. В ячейку таблицы
можно также вставить другую таблицу. Создать таблицу и поместить ее на страницу
можно несколькими способами:
f Домашняя 1
П с м а т ь параметры макета Д И I tf I? I ="="«" I"
Новости
Й1Н
[ Новости ] ( УСЛУГИ ]
[Измените
свойства
этой панели
для
отображения,
на ней
гиперссылок]
>• Отожмите кнопку ||f на панели инструментов Таблицы (Tables), чтобы отключить
режим рисования. Кнопка вернется в исходное состояние, и указатель мыши примет
стандартный вид.
Дня удаления элементов таблицы можно воспользоваться инструментом | | р на панели ин-
струментов Таблицы (Tables), который действует аналогично «карандашу», но при этом
«стирает» линии таблицы. С помощью кнопок ^ | и _ £ можно добавлять новые строк»
или колонки в позицию, где установлен текстовый курсор.
Любую ячейку таблицы можно закрасить произвольным цветом,
v Установите текстовый курсор в одну из ячеек созданной таблицы.
>• Выберите команду меню Таблица • Выделить • Ячейка (Table • Select • Cell). Те-
кущая ячейка будет выделена.
> Установите текстовый курсор в одну из ячеек и щелкните мышью на кнопке |Мй| -
Разбить ячейки (Split Cells) на панели инструментов Таблицы (Tables). На экране
появится диалог Разбиение ячеек (Split Cells) (Рис. 7.69).
• ПИШИ
Число столбцов:
Рис. 7.68. Вспомогательное окно для Рис. 7.69. Диалог Разбиение ячеек
выбора цвета (Split Cells)
>• С помощью мыши или клавиатуры выделите две или более последовательных ячеек в
таблице и нажмите кнопку - Объединить ячейки (Merge Cells) на панели инст-
рументов Таблицы (Tables). Выделенные ячейки будут объединены в одну.
Для выделения текущей ячейки, строки, колонки или всей таблицы можно использовать
команды из меню Таблица • Выделить (Table • Select).
Для таблицы в целом и для каждой отдельной ячейки могут быть настроены различные
параметры, определяющие размеры, выравнивание, цвета и свойства ограничивающих и
разделительных линий.
>• Щелкните правой кнопкой мыши на таблице и в появившемся контекстном меню вы-
берите команду Свойства таблицы (Table Properties). На экране появится диалог
Свойства таблицы (Table Properties) (Рис. 7.70).
Свойства таблицы
Параметры макета — — — — — — — — ^ — ^ — — — — — — —
О Включить параметры макета
(?) выключить параметры макета;
О Задействовать параметры макета на основе содержимого таблицы
Размер
Строк: \г frpj Столбцов: [2 \~\
Положение •
Границы
Размер:
Цвет:
• Свернуть сраницу таблицы
Фон
Цвет: | D Авто
П Использовать фоновый рисунок
По умолчанию
П По умолчанию для новых таблиц
(Specify width) и высоту (Specify height) таблицы. В группе элементов управления Грани-
цы (Borders) можно указать размер внешней границы (Size) таблицы, а также задать цвет
границы (Color). Если задать нулевой размер границы, то она станет невидимой. В груп-
пе элементов управления Фон (Background) определяется цвет фона в области таблицы
(Color) и фоновый рисунок (Use background picture).
>• Нажмите кнопку OK, чтобы закрыть диалог Свойства таблицы (Table Properties).
>• Щелкните правой кнопкой мыши на одной из ячеек таблицы и в появившемся контек-
стном меню выберите команду Свойства ячейки (Cell Properties). На экране появится
диалог Свойства ячейки (Cell Properties) (Рис. 7.71).
П Hg переносить слова
Границы ——.•- •
Цвет; I
Цвет: • ДвТ|
Обгор...
ОК [ Отмена | | Применить |
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства ячейки (Cell Properties).
Если для таблицы нужно вывести ее название, можно воспользоваться командой меню
Таблица • Вставить • Подпись (Table • Insert • Caption).
Закройте панель инструментов Таблицы (Tables), выбрав команду меню Вид Пане-
ли инструментов • Таблицы (View • Toolbars • Tables).
Создание Web-сайта с помощью Microsoft FrontPage 2003 307
В опыте, посвященном вводу текста, мы уже говорили, что текст может быть вставлен на
страницу из заранее подготовленного документа. Точно так же на страницу можно доба-
вить информацию из табличного файла, например из документа, подготовленного про-
граммой MS Excel. Для этого нужно воспользоваться командой меню Вставка • Файл
(Insert • File) и выбрать необходимый тип файла. Данные из табличного файла будут сра-
зу помещены в таблицу.
Создавая новые страницы сайта на основе различных шаблонов, имеющихся в програм-
ме FrontPage, вы можете посмотреть, как используются таблицы для расположения и
выравнивания текста и рисунков на странице.
&
Нон последние
документы
IS
;3_the«et
Рабочий стол
Мои
Мой
компьютер
г \
Мое сетевое
Имяфай/и: Г
Id
Типфаилов: |все имбражеим \ Отмена
: Файя Правка Вид Вставка Формат Сервис Хайяица Данные Рамки £кно Справка
Донашняч ] [
рецня
| Египет ] [ Греция ]
[Измените
свойства AIR AND RAIL COMMUNICATION NETWORK
этой панели RESEAU AERIEN ET FERROVIAIRE
Ьпя
ртображения
FLUG-UND EISENBAHNNETZ
ш ней RETE FERROVIARIA E AEREA
еипврссылок]
1
Содержание указанной страницы может со временем измениться.
Создание Web-сайта с помощью Microsoft FrontPage 2003 309
• с помощью кнопки i^J можно выбрать цвет на изображении формата GIF, который
будет прозрачным;
с помощью кнопки задается багетная рамка, которая придаст рисунку более объ-
емный вид;
>• Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню вы-
берите команду Свойства рисунка (Picture Properties). На экране появится диалог
Свойства рисунка (Picture Properties) (Рис. 7.75).
Обтекание -
но
Размер '
Р5 Задать размер
0 в точках © в точках
О в процентах О в процентах
Свойства рисунка
Вид | Общи»] Видеозапись )
Рисунок:
|../../Му Pictures/all-grcece.jpg
Альтернативные представления -
Расположение: | | Обзор.,,, |
ОК
Вы можете сами выбрать формат для сохранения изображения, нажав кнопку Тип гра-
фических файлов (Picture File Type) и в диалоге Тип графических файлов (Picture File
Туре) (Рис. 7.77) определив дополнительные параметры, такие, как Качество (Quality)
для файлов JPEG и количество проходов при постепенном показе файлов формата GIF.
Тип графическим Файлов
ОК
Имя
JL Папка Действие
Заменить
ОК [ Отмена
> Нажмите кнопку ОК, чтобы сохранить изображения в папке сайта на диске и закрыть
диалог Сохранение внедренных файлов (Save Embedded Files).
Обычно рисунки и текст располагаются на странице последовательно, нередко образуя
при этом пустые места. Поэтому возникает необходимость расположить их более плотно.
В опыте, рассказывающем про таблицы, мы уже упоминали, что с помощью таблиц
Создание Web-сайта с помощью Microsoft FrontPage 2003 313
После завершения первой строки текст сместится вниз, оставив справа от рисунка пустое
пространство.
>• Теперь щелкните на рисунке, чтобы выделить его, и выберите в меню программы ко-
манду Формат • Положение (Format • Position). На экране откроется диалог Поло-
жение (Position) (Рис. 7.79).
Обтекание•
а—| |
XL
Положение -
XL
_•_ абсолютное относительное
Смещение и размер —
Спма:
Jgjj Смеет:
СИМ»! Щ Снизу:
Ширина: Ш Высота:
По оси!!
м
ок
JC Отмена
Рис. 7.79. Диалог Положение (Position)
> В группе элементов управления Обтекание (Wrapping style) выберите позицию сле-
ва (Left)..
Группы элементов управления Положение (Positioning style) и Смещение и размер (Lo-
cation and size) позволяют определить точное абсолютное или относительное расположе-
ние объекта на странице и его размер.
> Нажмите кнопку ОК, чтобы закрыть диалог Положение (Position). Набранный текст
теперь будет размещен справа от рисунка (Рис. 7.80).
Средства редактора FrontPage для позиционирования элементов на странице являются
сравнительно новыми i логут не поддерживаться в ранних версиях браузеров.
314 Создание Web-сайта!
Правке Вид Вставка Формат Сервис Любимце Данные Рэмки QKHO Справна
L Домашняя 11 &р
БКод ^Просмотр!!
G Ёельефная граница
(Wild). Просматривать:
1 Выделенные коллекции
> Нажмите кнопку Начать (Go). В нижней части Об- Искать объекты:
ласти задач (Task Pane) появятся найденные картин- Все файлы мультимедиа
ки (Рис. 7.84).
> Щелкните на одном из изображений. Выбранная картин-
ка будет помещена на текущую страницу сайта.
На странице может быть помещен рисунок, файл которо- [2] Упорядочить картинки...
го физически расположен на внешнем сервере в Интер- ==) Картинки на узле Office Online
нете. Для этого нужно знать адрес рисунка в Сети. Чтобы Щ Советы по поиску клипов
>• Нажмите кнопку OK в диалоге Рисунок (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
Properties)1 (Рис. 7.8:).
1
Если вы используете тему для оформления страниц сайта, то вкладка Background (Фон) в диало-
ге Page Properties (Свойства страницы) отсутствует. В этом случае фоновое изображение для
страниц следует устанавливать в настройках темы.
318 Создание Web-сайтов
I Свойства страницы
Общие*) Форматирование [ дополнительно"! Другие { Язык |"рабочая группа |
Фон — — — — — — — — — — — — — — — — — ^ — —
О фоновый рисунок!
П СД*Л4Т» ПОДООЖЖОЙ
Цвета -
L OK
> Установите флажок Фоновый рисунок (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
Правка Вад Вставка Формат Сервис ±лбтш.» Данные Рамки QKHO £правка
^^ o
(••
[ Домашндя ]
Греция, •; , , .
[ Египет ] [ Греция ]
L Обзор.,, |
СЖ Отмена
Посмотрим, как, например, можно создать ссылку с одной страницы сайта на другую.
> Перейдите в режим просмотра папок и файлов сайта, выбрав команду меню Вид •
Папки (View • Folders), и дважды щелкните мышью на имени news.htm в списке
файлов. Страница news.htm будет открыта в режиме редактирования Конструктор
(Design).
Создание Web-сайта с помощью Microsoft FrontPage 2003 321
> Теперь выделите в набранном тексте слово Грецию с помощью мыши или клавиату-
ры и выберите команду меню Вставка • Гиперссылка (Insert • Hyperlink). На экране
появится диалог Добавление гиперссылки (Create Hyperlink) (Рис. 7.88).
Папка: ЕИ Турагентство
jjjn news.htm (открытый)
£ ] j ||t]
1 fo|l<
* j Закладка.,.
£j) .borders
£Э „derived Выбор рамки..,
просмотрен- ^ ( „overlay
ные Параметры..,
страницы £Э .private
ц
иовьи
t 2 l .themes
последние £=j| _vtl_cnf
ЁЭ _ v t i -P1'1
-
документом файлы
Адрес: i
электронной
почтой
> В списке файлов в центральной области диалога выберите файл tour2 и нажмите
кнопку ОК. На страницу будет вставлена текстовая ссылка на указанную страницу, а
выделенное слово будет выделено цветом и подчеркиванием (Рис. 7.89).
: Файл Правка имя Вставка формат Сервис Таблица Данные £амки QKHO Справка
[ Домашняя ]
НОВОСТИ
[ НОВОСТИ ] [ Услуги ]
11-1210
322 Создание Web-сайтов
файлом, веб-
страницей
Ш Г „ ,
Недавно использовавшиеся адреса электронной почты:
>• Щелкните мышью на ярлыке tour2.htm, чтобы перейти в режим редактирования страницы
на этой вкладке.
> Если вкладки tour2.htm нет, то перейдите в режим просмотра папок и файлов сайта и два-
жды щелкните мышью на имени tour2.htm в списке файлов. Страница tour2.htm будет от-
крыта в режиме редактирования Конструктор (Design).
>• Установите текстовый курсор в конец ранее набранного текста и отступите несколько
Enter
строк нажатием клавиши l l.
>• Выберите команду меню Вставка • Рисунок • Из файла (Insert • Picture • From File)
или нажмите кнопку | Е | на панели инструментов Стандартная (Standard). На экране
появится диалог Рисунок (Picture) (Рис. 7.72).
>• В списке файлов сайта выберите файл рисунка, например, тот, который мы использо-
вали в предыдущем опыте, и нажмите кнопку ОК. На страницу будет помещен вы-
бранный рисунок.
> Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню вы-
берите команду Гиперссылка (Hyperlink). На экране появится диалог Добавление
гиперссылки (Create Hyperlink) (Рис. 7.88).
>• Укажите страницу сайта, файл или введите адрес, так же, как вы делали это для текстовой
ссылки, и нажмите кнопку ОК. К рисунку будет привязана ссылка с указанным адресом.
Если нажать кнопку D_ в диалоге Рисунок (Picture), то будет создана новая страница, на
которую будет указывать ссылка. Проверить, как работает рисунок-ссылка, можно, пере-
ключившись в режим просмотра страницы.
Возможно, вам понадобится более сложный вариант, когда для разных частей рисунка
определяются различные ссылки. Например, можно поместить на страницу карту, назна-
чив каждой области на карте ссылку на страницу с ее описанием. Набор ссылок для раз-
личных областей одного рисунка называется картой навигации (image map). Такие актив-
ные области (hotspot) на рисунке могут иметь форму прямоугольника, круга или произ-
вольного многоугольника.
Создадим на рисунке активную область прямоугольной формы.
> Выделите рисунок, щелкнув на нем мышью и выберите команду меню Вид • Панели
инструментов • Рисунки (View • Toolbars • Pictures). На экране появится панель ин-
струментов Рисунки (Pictures) для работы с изображением (Рис. 7.74).
> Выберите инструмент для создания прямоугольной активной области, щелкнув на кноп-
ке • на панели инструментов Рисунки (Pictures), и наведите указатель мыши на рису-
нок. Указатель примет вид карандаша {/.
> Установите указатель мыши на рисунке в месте, где будет находиться один из углов
прямоугольной области, нажмите левую кнопку мыши и, не отпуская ее, переместите
указатель в противоположный угол. Активная область на рисунке будет выделена
рамкой (Рис. 7.91).
324 Создание Web-сайтов
K.Kalkassoso
FLOWNAO-4/
indeo^i
KASTORIA
ArywOmtB»
> Отпустите кнопку мыши. На экране появится диалог Добавление гиперссылки (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 Hyper-
link). Текст ссылки будет выделен цветом и подчеркиванием.
> Проверьте, как работает ссылка, переключившись в режим предварительного про-
смотра страницы. Щелчок мышью на ссылке должен Вызвать прокрутку текста до
места, отмеченного закладкой.
Обычно текстовые ссылки выделяются на странице цветом и подчеркиванием. Вы може-
те изменить цвет отображения ссылок на странице. Соответствующие настройки распо-
ложены на вкладке Форматирование (Formatting) диалога Свойства страницы (Page
Properties) (Рис. 7.85), который можно вызвать командой Формат • Фон (Format • Back-
ground) из главного меню программы1. Вы можете установить цвет для непросмотренных
гиперссылок (Hyperlink), для просмотренных ссылок (Visited hyperlink) и для текущей
выбранной ссылки (Active hyperlink). Браузер определяет, была ли ссылка просмотрена,
согласно определенному временному периоду. Например, Internet Explorer использует для
этого время хранения истории посещаемых страниц.
Если удалить страницу сайта, на которую указывает ссылка, то происходит разрыв свяли
и ссылка перестает работать. Щелкнув мышью на такой ссылке в браузере, посетитель
сайта получит сообщение об ошибке. Чтобы избежать таких ситуаций, необходимо зара-
нее исправлять или удалять все «разорванные» ссылки. Выявить такие ссылки можно с
помощью отчетов, о которых мы поговорим подробнее в отдельном опыте.
' Если вы используете тему для оформления страниц сайта, то элементы управления на вкладке
Форматирование (Formatting) в диалоге Page Properties (Свойства страницы) недоступны, и
цвет ссылок следует устанавливать в настройках темы.
Создание Web-сайта с помощью Microsoft FrontPage 2003 327
©Текст кнопки
Кнопка:
эриллиант 2
Бриллиант 3
Бриллиант 4
Бриллиант 5
Выступающая вкладка 1
Выступающая вкладке 2
Выступающая вкладка Э
Выступающая вкладка 4
Выступающая вкладка 5
Выступающая вкладка 6
lexer:
Выступающая вкладка 7
J3
|г«кст КНОПКИ
Ссылка:
бы выделить ее.
Удалить
> Выберите команду меню Формат • Поведение
(Format • Behaviors). На экране появится область Сценарии в теге: <img>
Вывод сообщений
Вызов сценария
Загрузка изображений
Задание текста
Замена изображения
Изменение свойства
Меню переходов
Переход по URL
Проверка обозревателя
> В поле ввода URL подставляемого изображения (Swap Image URL) укажите адрес
изображения, которое заменит исходное при наступлении события, и нажмите кнопку
ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый сцена-
рий для события onmouseover (при наведении указателя мыши).
Теперь озвучим кнопку.
>- В Области задач (Task Pane) нажмите кнопку Вставить (Insert) и выберите из меню
действие Воспроизведение звука (Play Sound). На экране появится диалог Воспро-
изведение звука (Play Sound) (Рис. 7.99).
£С Воспроизведение звука
ОК Отмена
> В поле ввода Воспроизвести звук (Play Sound) укажите адрес звукового файла, кото-
рый будет проигрываться при наведении указателя мыши на кнопку и нажмите кнопку
ОК. В списке Сценарии в теге (Scripts On Tag) области задач появится новый сцена-
рий для события onclick (при щелчке мышью).
Нам нужно изменить событие, при котором будет воспроизводиться звуковой файл.
>• Наведите указатель мыши на событие onclick во вновь созданном сценарии и нажми-
те появившуюся в правой части поля кнопку 0 . На экране появится всплывающее
меню для выбора события (Рис. 7.100).
330 Создание Web-сайтов
Как видите, можно задать действия на большое количество событий, которые могут на-
ступить при просмотре страницы.
> В меню для выбора события выберите onmouseover (при наведении указателя мы-
ши). Событие для воспроизведения звука будет изменено (Рис. 7.101).
onabort Поведение
onaflerupdate
onbeforeunload
onchange Вставить Удалить
F1
>• Нажмите комбинацию клавиш ). чтобы скрыть область задач.
>• Чтобы проверить работу кнопки, сохраните страницу и запустите браузер, нажав
кнопку Ё на панели инструментов Стандартная (Standard).
Рекламный баннер обычно используется для отображения рекламных картинок или фо-
тографий. Простой баннер чаще всего представляет собой статический прямоугольный
рисунок. Анимированный рекламный баннер состоит из серии отдельных рисунков, ко-
торые отображаются в одной области страницы по очереди. При этом смена рисунков
может сопровождаться различными переходными эффектами. В более ранних версиях
FrontPage была возможность вставить рекламный баннер как Web-компонент. В про-
грамме FrontPage 2003 можно вставить рекламный баннер из файла, предварительно
создав его в другой программе, например, так, как мы сделали это в главе «Создаем ани-
мацию с помощью Adobe ImageReady».
В языке HTML существует дополнительный набор команд и параметров, позволяющий
добавить к элементам страницы специальные эффекты и связать их появление с опреде-
ленными событиями. Такие эффекты называются динамическими эффектами, или
DHTML (Dynamic HTML) эффектами.
Создание Web-сайта с помощью Microsoft FrontPage 2003 331
О климате Греции
свойства .•
этой панели • Грец»1я[граничкт с Албанией, бывшей Югославией. Болгарией и . .
д л я '•'•'' •' ; Турцией. Протяженность границ составляет 1166 км. Грецию омывают
отббраясеншё, Эгейское, Ионическое, Критское и Ливийское моря. Береговая линия
:
на ней ,- ,: простирается почти на 4000 км. _^
гиперссылок] \
> Закройте панель инструментов Эффекты DHTML (DHTML Effects), выбрав команду
меню Вид • Панели инструментов • Эффекты DHTML (View • Toolbars • DHTML
Effects).
При использовании специальных эффектов следует помнить, что не все браузеры спо-
собны отображать их корректно. Если вы ориентируетесь на массовое посещение вашего
сайта, нужно обязательно проверять правильность работы всех применяемых эффектов в
наиболее распространенных браузерах Internet Explorer, Opera и Netscape.
Название папки, в которой хранятся файлы операционной системы, может отличаться от указанной.
Создание Web-сайта с помощью Microsoft FrontPage 2003 333
В поле ввода Число повторов (Loop) диалога Свойства страницы (Page Properties)
можно указать число последовательных повторений звукового фрагмента или установить
флажок Непрерывно (Forever) для бесконечного воспроизведения.
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства страницы (Page Properties).
Источник видеозаписи:
|dock.avi
Установка переключателя При открытии файла (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).
I
Создание Web-сайта с помощью Microsoft FrontPage 2003 335
1
Дополнительные коипонем
_Н
Вставка на страницу HTML-содержимого, которое не будет изменяться в FrontPage.
Поиск компонентов
в Интернете Отмена Готово |
> Нажмите кнопку Готово (Finish). На экране появится диалог Свойства приложения
Java (Java Applet Properties) (Рис. 7.106).
Источник приложения:
Изменит»., Г\
Удалить
Интервал по вертикали: [О
Размер
> В поле ввода Источник приложения (Applet Source) укажите файл апплета. Обычно
файлы Java-апплетов имеют расширение .class.
Если файл апплета находится вне папки сайта, то в поле ввода Базовый адрес прило-
жения (Applet base URL) нужно указать путь к файлу. В группе элементов Параметры
приложения (Apple^ 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).
ActiveMcvieControl Object
Поиск компонентов
Г> |[ Сотово " |
Рис. 7.107. Второй диалог Вставка компонента Web-узла (Insert Web Component)
> Выберите, например, элемент Microsoft MonthView Control 6.0 (SP4), и нажмите кнопку
Готово (Finish). Выбранный элемент будет добавлен на страницу (Рис. 7.108).
В зависимости от того, какой элемент ActiveX вы выбрали, он может по-разному выгля-
деть на странице. В списке доступных элементов в диалоге Вставка компонента Web-
узла (Insert Web Component) (Рис. 7.107) перечислены не все ActiveX-объекты, зарегист-
рированные в системе. Чтобы увидеть их полный список, нужно нажать на кнопку
Настройка (Customize) и выбрать элемент в диалоге Изменение списка элементов
ActiveX (Customize ActiveX Control List) (Рис. 7.109).
Создание Web-сайта с помощью Microsoft FrontPage 2003 337
свойства
этой панели
для XL С.нт И
отображения
на ней
гипврссъиюк] 30 31
CD 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 21 29 30 1 2 3
4 5 6 7 8 9 10
От. d.j. 01.09.2004
Имя элемента:
Расположение: |C:\WINDOWS\Syscem32\V5FLEX3.OCX
Версия:
E
Рис. 7.109. Диалог Изменение списка элементов ActiveX
(Customize ActiveX Control List)
УаЬе: 101.09.2004
У D ShoK^eekNimbers
MinDate: |01.01.1753
У П M^tiSelect В Enacted
MaxDate: 131.12.9999
У В ShowToday
JlartOIWesk: \2 -mvwMonday
У MonthRows: I
MouKPointei: |0-cc2Oelau«
пе
У MonlhColjirrra: Г Г
OLEDiopMode lO-«20LEPtopN
° У S^rolRate: [О
BoiderSlyte: |0-cc2None
щ
У MaxSeCouj* [
Acpeaonce: |i-cc23D
У
>• Чтобы увеличить размер формы, добавьте в нее строки, нажав несколько раз клавишу
[[Enter] _
> Установите текстовый курсор внутри формы и выберите в меню команду Вставка •
Форма • Поле (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-сайтов
Проверка текстового поля
Выводимое имя;
Тип данных:
Формат текста
• оробелы
Формат чисел -—
Длина данных
Значение данных
О Лоле.: |больше или равно Значение: I I
Отмена
В открывающемся списке Тип данных (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
Свойства раскрывающегося списка
Имя; pl
Цдавимть...
Высота:
Последовательность перехода;
Разрешен выбор нескольких элементов: О Да © Нет
Стиль... 11 Проверить... |
L ок Отмена
> В поле Имя (Name) укажите имя поля формы, например Destination.
>• Нажмите кнопку Добавить (Add). На экране появится диалог Добавление варианта
(Add Choice) (Рис. 7.114).
>- В поле ввода Вариант (Choice) укажите название элемента списка, например Англия.
Если установить флажок Значение (Specify Value),
Добавление варианта
то в поле ввода под флажком можно указать значе-
Вариант;
ние, которое будет передаваться вместо выбранно-
го названия. При сброшенном флажке значение IL
• Значение:
эквивалентно названию элемента списка. Пере-
ключатели Начальное состояние (Initial State) оп-
Начальное состояние:
ределяют, будет ли данный элемент выбран по О выбрано
умолчанию. © не выбрано
мент будет добавлен в список в центральной час- Рис. 7.114. Диалог Добавление
ти диалога Свойства раскрывающегося списка варианта (Add Choice)
(Drop-Down Menu Properties).
> Поместите в список другие возможные значения для открывающегося списка.
С помощью кнопок в правой части диалога можно изменять, удалять и перемещать
элементы списка. Если в поле ввода Высота (Height) указать значение больше единицы,
то открывающийся список будет выглядеть как обычный список. Для обычного списка
можно дать возможность выбора одновременно нескольких элементов с помощью мыши
и клавиши 1Г^*Г| 1. установив переключатель Да (Yes) в группе переключателей Разрешить
выбор нескольких элементов (Allow multiple selection). Нажав кнопку Проверить
(Validate), можно определить правила ввода для открывающегося списка. Они проще,
чем правила для текстового поля ввода.
342 Создание Web-сайтов
> Нажмите кнопку ОК, чтобы закрыть диалог Свойства раскрывающегося списка
(Drop-Down Menu Properties) и сохранить изменения.
> Установите текстовый курсор на следующую строку формы и выберите в меню ко-
манду Вставка • Форма • Флажок (Insert • Form • Check Box). На форму будет по-
мещен флажок.
Флажок предназначен для выбора возможности, которая имеет два варианта: да или нет
В нашем случае с помощью флажка будет указываться необходимость бронирования би-
летов на обратный рейс.
> Введите справа от флажка его заголовок или пояснительный текст, например Зака-
зать обратный билет.
> Щелкните правой кнопкой мыши на флажке и в появившемся контекстном меню вы-
берите команду Свойства поля формы (Form Field Properties). На экране появится
диалог Свойства флажка (Check Box Properties) (Рис. 7.115).
>• В поле Имя (Name) укажите имя поля фор-
мы, например TwoWayTicket.
>- В поле ввода Значение (Value) укажите Значение: |ON
ИМЯ: EL
Значение или подпись: [Отправить
Последовательность перехода: I
| Стиль,.. |
L ОК Отмена
> Введите новый текст, например Заказать, в поле ввода Значение или подпись
(Value/label) и нажмите кнопку ОК.
Создание Web-сайта с помощью Microsoft FrontPage 2003 343
Точно так же вы можете заменить текст на кнопке Сброс (Reset) на более понятный, на-
пример Очистить поля.
>• Сохраните страницу и запустите браузер, выбрав в меню команду Файл • Просмотр
в обозревателе (File • Preview in Browser). В браузере будет отображена страница с
формой (Рис. 7.117).
Ыслуги Microsoft Internet I xploiei н-jn
Файл Цравка Вид Избранное Сервис £лравка
Услуги
[ Новости ] [ Услуги ]
Страна | А н г л и я )
В
^ Готово Щ My Computer
> Проверьте, как работают элементы формы, и затем закройте браузер, чтобы вернуться
к программе FrontPage.
На форму можно поместить еще ряд элементов, имеющихся в меню Вставка • Форма
(Insert • Form). Это Текстовое поле (Text Area) для ввода длинного текста, Переключа-
тель (Option Button) для выбора одного из нескольких вариантов, Кнопка (Push Button)
для выполнения какого-либо действия и другие.
>• Посмотрите самостоятельно, как работают данные элементы, какие имеют свойства и
правила ввода данных.
Чтобы выровнять элементы формы и расположить их нужным образом, можно использо-
вать такие же приемы, как для работы с текстом: добавление символов перевода строки,
установка формата абзацев, применение таблиц и команд позиционирования.
После того как посетитель сайта нажмет кнопку Заказать (Submit), необходимо полу-
чить данные из заполненной формы - результаты формы - и сохранить их для после-
дующей обработки. В программе FrontPage существует несколько способов обработки
результатов формы.
344 Создание Web-сайтов
> Щелкните правой кнопкой мыши в любой области формы и в появившемся контекст-
ном меню выберите команду Свойства формы (Form Properties). На экране появится
диалог Свойства формы (Form Properties) (Рис. 7.118).
Свойства Формы
Сохранение результатов <
© Йтдеавка]
Имя файла: |-PHvatefform_resultS.e5v I Обмр...
Адрес пояты: [
О В базе данных
О В другом месте [Нэораиеземый сценарий ISAPI, МЪАРЬ CGI лпи ASPl *r|
Свойства формы — - — — — — — — — — — — — — — — — — —
Конечная рамка: [
Имя файла:
|_private/fQrrn_resulbs.csv J | Обзор... |
Формат файла:
| Текстовый (разделитель - запятая)
Формат файла:
HTML
2L Отмена
Если в диалоге Свойства формы (Form Properties) (Рис. 7.118) установить переключа-
тель В другом месте (Send to other) в группе элементов управления Сохранение резуль-
татов (Where to store results), то данные будут обрабатываться с помощью скрипта (сце-
нария), то есть небольшой программы, написанной разработчиком сайта. Такую про-
грамму называют также программой-обработчиком, или просто обработчиком. В редак-
торе FrontPage имеются два готовых обработчика: для дискуссионных форм (Discussion
Form Handler) и для регистрационных форм (Registration Form Handler). Эти обработчики
выбираются в открывающемся списке рядом с переключателем В другом месте (Send to
other), а их параметры задаются в отдельных диалогах, вызываемых при нажатии на
кнопку Параметры (Options).
346 Создание Web-сайтов
Подключение — — — — — — — —
Использовать подключение к базе данных:
| т [ | Добавить подключение..
ОК Отмена
Рис. 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)
>• В списке Тип компонента (Component type) выберите Счетчик посещений (Hit
Counter), а в списке Выберите стиль счетчика (Choose a counter style) - один из ва-
риантов счетчика.
> Нажмите кнопку Готово (Finish). На экране появится диалог Свойства счетчика по-
сещений (Hit Counter Properties) (Рис. 7.123).
Свойства счетчика посещений
© 0125456769
О Д р у ™ рисунок
1
П Сбросить счетчик до
EZH
О Фиксированное число разрядов
ОК | Отмена
]
> Выберите вид счетчика, установив один из переключателей Стиль счетчика (Counter
Style).
Если выбрать переключатель Другой рисунок (Custom Picture), то можно указать собст-
венный файл с графическим изображением цифр счетчика. Рисунок должен содержать
равномерно расположенные цифры от 0 до 9. В диалоге Свойства счетчика посеще-
ний (Hit Counter Properties) можно дополнительно указать начальное значение счетчика
с помощью флажка и поля Сбросить счетчик до (Reset counter to), а также количество
отображаемых разрядов (Fixed number of digits).
>• Нажмите кнопку ОК. На страницу будет помещен счетчик посещений.
В режиме редактирования счетчик посещений отображается условно. Работу счетчика
можно увидеть только при загрузке страницы с Web-сервера. Необходимо также, чтобы
на сервере было установлено дополнительное программное обеспечение, которое под-
держивает технологии FrontPage и SharePoint. О том, как поместить страницы сайта на
Web-сервер, мы расскажем в последнем опыте этой главы.
350 Создание Web-сайтов
Когда требуется более подробный анализ посещаемости сайта, нежели просто подсчет
количества обращений к странице, можно воспользоваться услугами готовых систем для
сбора статистики. Для этого необходимо зарегистрироваться и разместить на своей стра-
нице специальный счетчик для получения данных. Наиболее популярные счетчики для
сбора статистики SpyLOG и Rambler. SpyLOG - это набор сервисов для сбора и анализа
статистики вашего сайта. Они предоставляют достаточно полную информацию о поведе-
нии посетителей сайта. На основе такой информации можно сделать выводы об эффек-
тивности сайта в целом, определить направления его развития, выявить устаревшие и
непосещаемые разделы, оценить удобство структуры навигации. Для работы счетчика
SpyLOG на каждую страницу помещается небольшой фрагмент кода, который передает
данные о доступе к странице на специальный сервер. Там данные обрабатываются и за-
писываются в базу данных. По собранной информации могут
быть сформированы различные статистические отчеты: объем Hits ..28488606
аудитории, динамика посещаемости, распределение посещаемо- 31918
Hosts... $456785
сти в течение дня, прогноз посещаемости, просмотренные 7314
страницы, точки входа и выхода, проведенное посетителем Rating 22
время на странице и на сайте, географическое положение по- Visitors 8227989
сетителей, IP-адреса, языки, браузеры, операционные систе- 8518
41
мы, по каким ключевым словам и какие страницы сайта нахо-
дят посетители через поисковые машины и т.п. На страницу Sp L oG
сайта может быть помещен логотип, показывающий основные
сведения о посещаемости (Рис. 7.124). Более подробную ин- Рис. 7.124. Логотип
формацию об этом можно найти на сайте www.spylog.com. SpyLOG
Счетчик Rambler's Top 100 выполняет примерно те же функции, что и SpyLOG Он дает
возможность владельцам собственных страниц определять количество визитов посетите-
лей, собирать и анализировать статистику посещений. Проект Rambler's ToplOO также
имеет цель привлечь владельцев крупных сайтов для сравни-
тельной оценки их популярности, а рекламодателям это позво-
ляет оценить популярность сайтов и принять решение о разме-
щении рекламы. Для сбора статистики на страницу помещается
Рис. 7.125. Логотип
специальный фрагмент кода и небольшой логотип (Рис. 7.125).
Rambler's ToplOO
Подробнее узнать о счетчике Rambler можно на сайте
top100.rambler.ru.
>• В списке Тип компонента (Component type) выберите Поиск в Интернете (Web
Search), а в списке Выберите тип поиска (Choose a type of search) выберите Текущий
Web-узел (Current Web).
>• Нажмите кнопку Готово (Finish). На экране появится диалог Свойства формы поис-
ка (Search Form Properties) (Рис. 7.126).
Ширима в знаках:
L I Отмена |
На первой вкладке диалога можно указать надпись для поля ввода поисковой формы (La-
bel for input), ширину поля ввода в знаках (Width in characters), а также задать текст для
кнопок поисковой формы.
>• Выберите вкладку Результаты поиска (Search Results) (Рис. 7.127).
формат времени:
(01.09.2-004
((нет)
а
3
Рис. 7.127. Вкладка Результаты поиска (Search Results)
диалога Свойства формы поиска (Search Form Properties)
352 Создание Web-сайтов
12-1210
354 Создание Web-сайтов
При импорте файла базы данных MS Access программа FrontPage автоматически соз-
даст соединение и поместит файл в отдельную папку Fpdb, защищенную от просмотра
в браузере.
Для работы с крупной базой данных, такой, как MS SQL Server или Oracle, соединение
может быть создано через службу System DSN (System Data Source Name - служба сис-
темных имен источников данных) для ODBC-совместимых баз данных или установлено
сетевое соединение (network connection) с выделенным сервером баз данных. При этом
необходимо позаботиться, чтобы на Web-сервере были созданы необходимые псевдони-
мы (DSN), а выделенный сервер баз данных был доступен Web-серверу.
СИЗ
О подключение к внешней базе данных
О новое подключение к базе данных
I Создать... I
Об использовании существующей базы данных
<йюад | [овто |
>• Нажмите кнопку Далее (Next). Мастер активизирует соединение и загрузит информа-
цию об объектах базы данных, таблицах и представлениях. Затем на экране появится
второй диалог мастера (Рис. 7.130).
Мастер результатов базы данных
12*
356 Создание Web-сайтов
КодСотрудника | Изменить..
Фамилия
Имя
Нажмите кнопку "Дополнительно", чтобы ввести условия отбора
записей, ограничить их число, настроить сортировку результатов,
задать форму поиска или определить в ней значения по умолчанию.
| Дополнительно...
Условия"!, l l Настройка условий отбора или формы для поиска необходимых записей.
Порядок... "1 Выбор полей для сортировки результатов отбора записей из базы данных.
ОК Отмена
Нажав на кнопку Условие (Criteria), можно в отдельном диалоге указать значения или диа-
пазон значений для определенных полей и таким образом отфильтровать нужные записи.
Ограничения на значения полей устанавливаются с помощью операций сравнения и могут
объединяться логическими операциями «И» и «ИЛИ». Кроме того, здесь же определяются
поля для внесения в поисковую форму. Мастер затем может автоматически создать на стра-
нице поисковую форму, что даст возможность посетителю сайта самостоятельно отбирать
нужные записи из таблицы базы данных. Если заданы поисковые поля, то в диалоге, вызы-
ваемом по кнопке По умолчанию (Defaults), можно задать их начальные значения для по-
исковой формы. Диалог, вызываемый по кнопке Порядок (Ordering), позволяет задать поля
для сортировки отображаемых записей. В диалоге Дополнительно (More Options) можно
также ограничить общее количество возвращаемых запросом записей (Limit number of re-
turned records to) и указать сообщение на случай, если не найдены записи, удовлетворяю-
щие указанному критерию (Message to display if no records are returned).
> Нажмите кнопку ОК, чтобы вернуться к диалогу мастера.
>• Нажмите кнопку Далее (Next). На экране появится четвертый диалог мастера, в кото-
ром определяется формат представления данных (Рис. 7.134).
Maciep результатов базы данных
Рекомендации
Здесь можно указать, будут ли все записи отображаться вместе (Display all records to-
gether) или они будут разбиты по группам (Split records into groups) с заданным количест-
вом записей. Если установлен флажок Добавить форму поиска (Add search form), то на
страницу будет помещена поисковая форма, позволяющая посетителю сайта самостоя-
тельно искать и отбирать данные. Этот флажок доступен, только если на третьем шаге
были выбраны поисковые поля.
>• Нажмите кнопку Готово (Finish), чтобы завершить работу мастера. На экране появит-
ся диалог, в котором предлагается переименовать страницу так, чтобы она имела рас-
ширение .asp (Рис. 7.136).
[Micrusolt Office FiontPage
> Нажмите кнопку ОК. На страницу будет помещена таблица для отображения данных
(Рис. 7.137).
г
fcour2.htm
Строка запроса -
Имя 1 Значение
I о< ! Отмена
> , Нажмите кнопку Добавить (Add). На экране появится диалог Добавление пара-
метра (Add Parameter).
> В открывающемся списке Имя (Name) выберите поле, значение которого будет пере-
даваться в качестве параметра, например, КодСотрудника (EmployeelD). В откры-
вающемся списке Значение (Value) будет отображен скрипт, вызывающий функци о
для получения значения параметра (Рис. 7.139).
Добавление параметра
Имя:
|КодСотрудника
Значение:
|<%=FP_FieldURL(fp_rs,"KoACQTpyjHHKa")%> [ГЦ
L ОК Отмена
> Нажмите кнопку ОК. Параметр будет добавлен в список параметров диалога Пара-
метры гиперссылки (Hyperlink Parameters),
Создание Web-сайта с помощью Microsoft FrontPage 2003 361
Образец
у В разделе Создать страницу (New page) Области задач (Task Pane) щелкните мы-
шью на ссылке Другие шаблоны страниц (More page templates). На экране появится
диалог Шаблоны страниц (Page Templates) (Рис. 7.46).
>• Выберите вкладку Страница рамок (Frames Pages) (Рис. 7.140).
На этой вкладке имеется набор шаблонов для создания страниц с фреймами. При выборе
шаблона, исходный вид страницы отображается справа в поле Образец (Preview), а в
поле Описание (Description) выводится описание шаблона.
>• Выберите один из шаблонов, например Оглавление (Contents), и нажмите кнопку ОК.
Будет создана новая страница с фреймами по выбранному шаблону (Рис. 7.141).
Правка Вия Вставка форцат Сервис Хабямца Данные Рамки цкно Справка
31 веб-узел |[ tourt.asp^[HOB_tTP,liitm
i файл Правка Вид Вставка Формат Сервис Тааямца Данные Рамки Окно Справка
5 I А »' I !Е :Е IН- £
веб-узел [[Tourl.asp^ffraineContainer.htmX^
Туристическое агентство
главную станицу
Мы предлагаем
При щелчке мышью на второй ссылке в правый фрейм должна загружаться начальная
страница фрейма.
При необходимости можно изменить целевой фрейм для отдельной ссылки или для всех
ссылок в текущем фрейме.
> В режиме редактирования Конструктор (Design) представления Страница (Page)
щелкните правой кнопкой мыши на одной из ссылок в левом фрейме и в появившемся
контекстном меню выберите команду Свойства гиперссылки (Hyperlink Properties I.
На экране появится диалог Изменение гиперссылки (Edit Hyperlink).
> В диалоге Изменение гиперссылки (Edit Hyperlink) нажмите кнопку Выбор рамки
(Target Frame). На экране появится диалог Конечная рамка (Target Frame) (Рис. 7.143).
Та же рамка
Страница целиком
Новое окно
Родительская рамка
Настройка объекта
L
О Установить для страницы по умолчанию
ОК Оти
Има: [main
Длинное описание
I J | Обзор...
Название:
Размер райки г
Ширина: [l J Q [Относительное [jjrj
Высота строки: СП?1 - . ' I - - 'Л ',-
Поля — — — — —
. Ширина:
Высота:
Параметры
В Изменять размер в обозревателе Страница рамок... j
[ Стиль.... | ОК | Отмена |
В поле Имя (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-сайтов
• Свойства страницы
Общие | Дополнительно \ Другие | Язык | Ранки | Рабочая группа |
Интервал между рамками:
0 Показать границы
ОК
Рис. 7.145. Вкладка Рамки (Frames) диалога Свойства страницы (Page Properties)
> Чтобы удалить фрейм, выделите его, щелкнув на нем мышью, и в меню програм-
мы выберите команду Рамки • Удалить рамку (Frames • Delete Frame). Фрейм
будет удален.
Удаление фрейма не приводит к удалению страницы, которая в нем отображалась.
Последний фрейм на странице не может быть удален.
Вы можете сохранить текущую страницу с фреймами как шаблон для последующего ис-
пользования. Ваш шаблон будет добавлен к набору шаблонов программы FrontPage.
>• Чтобы сохранить собственный шаблон страницы с фреймами, выберите команду ме-
ню Файл • Сохранить как (File • Save As). На экране появится стандартный диалог
сохранения файлов Сохранить как (Save As) (Рис. 7.147).
щ
Мое сетевое
Название: Новая страница 1
> В открывающемся списке Тип файла (Save as type) выберите Шаблоны FrontPage
(FrontPage Template).
> В поле ввода Имя файла (File Name) укажите имя файла шаблона и нажмите кнопку
Сохранить (Save). На экране появится диалог Сохранить как шаблон (Save As Tem-
plate) (Рис. 7.148).
Сохранить как шаблон Hi
Название: Новая страница 1 обгор... 1
Имя: myFrameContainer
^писание: Введите описание.
1 ок Отмена |
>• В поле ввода Название (Title) укажите название шаблона, которое будет отобра-
жаться в списке шаблонов при создании новой страницы. В поле ввода Описание
(Description) можно кратко описать назначение и вид шаблона.
Флажок Сохранить шаблон на текущем Web-узле (Save Template in Current Web site)
определяет, будет ли шаблон доступен в любом сайте или только в текущем.
>• Нажмите кнопку ОК. Шаблон будет сохранен.
Теперь вы можете использовать собственный шаблон при создании новой страницы с
фреймами, выбирая его в списке шаблонов диалога Шаблоны страниц (Page Templates)
(Рис. 7.140). Если при сохранении шаблона были установлены начальные страницы во
фреймах, то они будут использоваться по умолчанию для всех фреймов, созданных на
основе шаблона.
Фреймы удобно использовать для навигации по сайту или разделу сайта. В одном из
фреймов обычно помещают перечень ссылок в виде текста или рисунков, а в другой за-
гружаются страницы при выборе ссылок из первого фрейма. Альтернативным вариантом
является использование общих границ и навигационных меню, о которых мы уже расска-
зывали. Использовать фреймы и общие границы одновременно не рекомендуется - это
может сделать навигацию по сайту запутанной.
Рис. 7.149. Вкладка Параметры (Parameters) диалога Параметры узла (Site Settings)
> В поле ввода Имя (Name) введите название переменной, например ProjectName.
> В поле ввода Значение (Value) укажите значение переменной, например Опера-
ция «Ы», и нажмите кнопку ОК. Новая переменная будет помещена в список.
>• Нажмите кнопку ОК, чтобы закрыть диалог Параметры узла (Site Settings).
Теперь посмотрим, как использовать переменную в тексте.
> Установите текстовый курсор в том мес-
Добавление имени и значения £3
те, где требуется поместить текст из пе-
ременной, и выберите команду меню Имя:
[index.hti
Еазмер шрифта заголовка: Ь
Параметры: "
13 показывать каждую страницу юлько один раз
EJ3 показывать страницы £ез входящих гиперссылок
О перестраивать оглавление при изменении любой страницы
ОК Отмена
В поле ввода URL-адрес начала оглавления (Page URL for starting point of table) указы-
вается страница, с которой начнется построение оглавления. По умолчанию предлагается
начать с домашней страницы, чтобы создать оглавление для всего сайта. Если требуется
построить оглавление только для определенного раздела, то в качестве начальной стра-
ницы нужно указать главную страницу раздела. Открывающийся список Размер шрифта
заголовка (Heading font size) определяет номер стиля заголовка для начальной страницы
в оглавлении. Если выбрать значение нет (попе), начальная страница не будет включена в
оглавление. Это может потребоваться, например, когда оглавление создается на самой
начальной странице. Флажок Показывать каждую страницу только один раз (Show
each page only once) указывает, что каждая страница будет включена в оглавление только
один раз. Если этот флажок сброшен, страница может войти в оглавление несколько раз,
когда на нее имеются ссылки из разных мест сайта. Флажок Показывать страницы без
входящих гиперссылок (Show pages with no incoming hyperlinks) определяет, будут ли
включены в оглавление страницы, которых нельзя достичь по ссылкам с главной страни-
цы сайта, т.е. на них нет ссылки ни с одной страницы. Если установить флажок Пере-
страивать оглавление при изменении любой страницы (Recompute table of contents
when any other page is edited), то оглавление будет автоматически обновляться при внесе-
нии изменения на страницы сайта. При проектировании большого сайта процесс обнов-
ления оглавления может занимать ощутимое время - в этом случае оглавления лучше
обновлять вручную. Для этого достаточно открыть и сохранить страницу с оглавлением.
>• Нажмите кнопку ОК. На страницу будет помещено оглавление.
В режиме редактирования страницы оглавление обозначено условно. Чтобы увидеть, как
реально выглядит оглавление сайта, запустите браузер, нажав кнопку И - на панели
инструментов Стандартная (Standard) (Рис. 7.154). Щелчок на пункте оглавления должен
вызывать загрузку страницы с соответствующим заголовком.
Если вы отказались от автоматического обновления оглавления, то его нужно обновить
вручную перед загрузкой сайта на Web-сервер. Для этого нужно просто открыть страни-
цу с оглавлением и сохранить ее командой Файл • Сохранить (File • Save).
372 Создание Web-сайтов
Избранно.,
Ш •Q
Адрес. Ш ] CADocumenlt and SettingtWatfrAMy РосипкгйЛМои Be6-a3<uUyareinxTBQ4F[a»eCwitainer.hUi [ ^ | " Перемок | Linki
Поиск: L J
| Найти | Сброс ]
| My Computer
>• Выберите команду меню Вид • Папки (View • Folders), чтобы перейти в режим про-
смотра папок и файлов сайта.
> Выберите команду меню Сервис • Орфография (Tools • Spelling). На экране поя-
вится диалог Орфография (Spelling).
Создание Web-сайта с помощью Microsoft FrontPage 2003 373
Параметры страницы
зад
|53 Автоматически размещать поля в форме
Ё5 Присваивать уникальные коды новьи таблицам
d Задействовать параметры макета для имеющихся таблиц на основе их содержимого
О Показывать тоу.ки привязки для слоя
Р£ Показывать подписи областей динамических веб-шаблонов
Е5 Делать код уникальным при вставке
Орфография • • •"-"' •
Проверить орфографию:
кнопку Начать (Start). Будет запущен О на выбранных страницах
процесс проверки правописания, и в 0 на всем веб-узле
Отмена
После корректировки всех слов на странице или при нажатии кнопки Отмена (Cancel) на
экране появится диалог Перейти к следующей странице? (Continue with next page?),
предлагающий перейти к следующей странице сайта (Рис. 7.158).
Когда текст страницы, содержащий ошибки, нахо- Перейти к. следующей странице?
^
ж /с 3 I E S 3 S I A »" 11= В
Ш ае6-уэея|| Index-htm
Сводка по у аяз •
Имя Число 1 Размер | Описания
.Ьайль) Э4_ __ 1^^„^?.Фа^*!т?!?УШ,ег!о*еб-узла_
[ДРисунки 12 ЗЭ1КБ Файлы рисунков на текущей веб-узле (GIF, 3PG, BMP и т.п.)
Несвязанное Файлы 6 24КБ Файлы не текущем веб-узле, которых нельзя достигнуть, начав с домашней страницы
Связанные файлы 26 981КБ Файлы на текущем веб-узле, которых можно достигнуть, начав с домашней страницы
Медленные страницы 2 444КБ Страницы на текущем веб-узле, у которых время загрузки превышает ожидаемое время 30 с на
Старые файлы 1 81КБ Файлы на текущем веб-узле, не изменявшиеся е течение 72 дней
Последние добавл... 33 923КБ Файлы на текущем веб-ysne, соэданмь* за последние 30 дней
Гиперссылки 57 Все гиперссылки текущего веб-узла
? Непроверенные ги... 0 Гиперссылки, указывающие на неподтвержденные файлы
9* Неработающие гип... 0 Гилерссылки, указывающие на недоступные файлы
3 j Внешние гипеоссы... 0 Гиперссылки, указывающие на файлы вне текущего веб-узла
[ £ Внутренние гипеос.,. 57 Гиперссылки, указьшающие на файлы на текущем веб-узле
(£) Ошибки компонентов 2 Файлы на текущем веб-узле с компонентами, сообщающими об ошибке
fjt Незавершенные за,,,, 1 Задачи на текущем веб-узле, не помеченные как завершенные
ф* Неиспользуемые т... 0 Темы на текущем веб-уэле, не примененные ни к одмоиу файлу
Q L СВЯЗИ С, таблицами ,.. 0 Все связи с таблицами стилей текущего веб-узла.
Д ) Динамические аеб-... 0 Все файлы, объединенные с динамическим веб-шаблоном.
Крупный сайт может содержать несколько сотен страниц и других файлов, которые соз-
даются и добавляются разными разработчиками. С помощью отчетов можно контроли-
ровать состав файлов сайта. Для просмотра файлов, добавленных в течение последних
нескольких дней, служит отчет Недавно добавленные файлы (Recently Added Files).
Отчет Недавно измененные файлы (Recently Changed Files) позволяет просмотреть
файлы, измененные в последнее время. Для отбора «старых» страниц, то есть давно
не изменявшихся, можно использовать отчет Старые файлы (Older Files). Такие страни-
цы, возможно, требуется обновить или переработать. Временной период для этих отчетов
376 Создание Web-сайтов
ОК
При изменении этих параметров некоторые элементы меню и диалоговых окон могут стать недоступными,
J3 Ь J3
E l рамки
Ш сценарии VBScript 0 странниц ASP
0 С И 1.0 (форматирование)
Е приложения Java В CS5 2.0 (положение)
В графика PNG
более поздних (3.0 browsers and later), чтобы обеспечить совместимость с ранними вер-
сиями наиболее распространенных браузеров.
При выборе различных вариантов в группе флажков под открывающимися списками
Обозреватели (Browsers) и Версии обозревателей (Browser versions) для выбранной
версии и типа браузера, вы можете использовать различные компоненты Web-страницы,
но при этом необходимо следить за совместимостью с браузерами.
В зависимости от выбранного браузера в меню и диалогах программы FrontPage могут
быть недоступны некоторые команды или настройки. Например, при выборе браузера
Netscape Navigator становятся недоступными сценарии на языке VBScript, а при выборе
браузера Internet Explorer недоступен эффект мерцания (Blink) для шрифта.
Кроме совместимости с браузерами, FrontPage может обеспечить совместимость с опре-
деленным Web-сервером, на котором будет размещен сайт. В открывающемся списке
Технологии FrontPage и SharePoint (FrontPage and SharePoint technologies) и группе
флажков под этим списком выбираются технологии, которые становятся доступными
только тогда, когда насервере установлены и запущены серверные расширения Front-
Page, службы Microsoft SharePoint Team Services или Microsoft Windows SharePoint Ser-
vices. Эти пакеты предназначены для обеспечения работы ряда компонентов, имеющихся
в редакторе FrontPage.
При необходимости попробуйте найти поставщика, поддерживающего серверные расширения FrontPage или
службы SharePoint Services, при помощи страницы поиска Web Presence Provider.
Дополнительные сведения.
Рис. 7.164. Диалог Свойства удаленного Web-узла (Remote Web Site Properties)
Файл Правка Вия Вставка Формат Сервис Таблица Данные Рамки Окно Справка
D -&#• О 94
Iж к 3 IШ Щ IА
Представление Содержимое папки ' £ § Свойства усаленного веб-узла... *^ Оптимизировать опубликованный HTML
Тональный веб-узел C:\Documents and Sett ing s \ Vastly \Mv Oocum... Удаленный веб-уэел ftp://ftp.narod.ru
atx a tx
I Состоя? f Состоя... i Иэменен I Автор
Не соп. 30.08.2004 14:. VASUl
Не соп. 30.08.2004 14:. VASW
Не соп. 23.08.2001 1С:..
Не соп. 04.03.200413:. VA5\v!
J3global.ua Не соп. 02.03.2004 23:. VASVJ
( 2 «idea.hu» На соп. 04.09 2004 17:. VASWL-
В №3323Б4.д* Не соп. 28.08.2004 21:. VASW
03 09.2004 21:
j ^ П е р е х о д ы йГиперссылки ФЗадачи
, 5С€- О* А
В представлении Удаленный Web-узел (Remote Web Site) можно копировать файлы как
с локального компьютера на удаленный, так и обратно, а можно синхронизировать фай-
лы, установив соответствующий переключатель в правом нижнем углу рабочего окна.
>• Убедитесь, что установлен переключатель Локальный на удаленном (Local to
remote) и нажмите кнопку Опубликовать Web-узел (Publish Web site). В нижней час-
ти рабочего окна будет отображаться ход публикации.
Создание Web-сайта с помощью Microsoft FrontPage 2003 383
В процессе публикации программа FrontPage сначала сравнивает файлы на локаль-
ном компьютере и Web-сервере, затем загружает изменившиеся и новые файлы и
обновляет необходимые связи и компоненты страниц на сервере. По завершении
процесса публикации в нижней части рабочего окна появится сообщение о заверше-
нии загрузки файлов (Рис. 7.167).
г7.|..и.|,11.-та.|1.тм1Д1 1ЧИ.ТДЧ .ллги.г-гтд.ггг.игтд.г.
Правка Вия Вставка формат Сервис Таблица Данные Самки Окно Справка
~1ТТ~~''^
I К ** I t= : = I И•
Iредстзеленые Содержимое папки - @ Свойства каленного веб-дала... *$> Оптимизировать опубликованный HTML
1окальный веб узел C:\Documents and 5ettings\Va5>V\My Docum... Удаленный веб-узел ftp://ftp,narod.ru
J
Опубликовать все иэнененные страницы —
Состояние последней публикации: нет данных «• 0 Локальный на удаленной
Ямсщт «• О Удаленный на локальной
Просмотреть журнап публикации!
£ О Синхронизация
j Опубликовать веб-узел| juirart]
1 Лпо
osteJ
services.htm
13-1210
ГЛАВА 8.
Конечно, число посетителей сайта сильно зависит от рекламных шагов, которые пред-
принимаются для его раскрутки, но всегда следует помнить, что основным критерием
посещаемости Web-сайта является его тематика и содержание. Понятно, что развлека-
тельные сайты при одинаковых рекламных усилиях соберут гораздо большую аудито-
рию, чем, например, сайт о филателии - ведь читать анекдоты любят все пользователи
Интернета, а собирает марки не очень большой процент из них. В случае, если вы созда-
ли узкоспециализированный сайт, число его посетителей будет больше, если все мате-
риалы (или хотя бы часть из них) вы продублируете на английском языке, в расчете ив
иностранную аудиторию - в настоящее время число англоязычных пользователей Ин-
тернета гораздо больше, чем русскоязычных, а следовательно, больше и людей, которых
заинтересует тематика вашего сайта.
13-
388 Создание Web-сайтс в
сайт через некоторое время, например через месяц, чтобы проиндексировать его за-
ново. Если же вы зарегистрировались в Интернет-каталоге, то, как правило, функцию
проверки осуществляет человек - сотрудник каталога. Он проверяет, существует ги
сайт по указанному вами адресу и соответствует ли он данному вами описанию.
Иногда проверяющий сам составляет описание для вашего Web-сайта;
• данные о сайте, который вы зарегистрировали, появляются в поисковой машине или
Интернет-каталоге. Введя в строку поиска слова, которые встречаются на вашем сай-
те, в результатах поиска вы можете увидеть ссылку на соответствующие страницу
вашего ресурса. В зависимости от популярности поисковика, на котором вы регист-
рируетесь, от внесения данных до появления информации может пройти от одного
дня до двух недель.
Как вы могли заметить по собственному опыту, к некоторым поисковым системам вы
обращаетесь каждый день, а к некоторым - время от времени. Большинство пользовате-
лей Интернета поступает точно так же. Поэтому есть сайты, на которых регистрировать-
ся нужно обязательно, чтобы не потерять своих потенциальных посетителей. В осталь-
ных поисковых системах и каталогах можно зарегистрироваться, если у вас есть для это-
го свободное время или воспользоваться системами, регистрирующими ваш ресурс сра-
зу в нескольких поисковиках. На популярных поисковых системах лучше регистриро-
ваться вручную.
Вот список популярных поисковых систем, в которых нужно обязательно зарегистриро-
вать свой сайт:
• Яндекс (http://www.yandex.ru)
• Rambler (http://www.rambler.ru)
• Google (http://www.google.com)
• Апорт (http://www.aport.ru)
• Altavista (http://www.altavista.com)
Из каталогов наиболее популярными являются следующие:
• List.RU (http://www.list.ru)
• Интернет-столица (http://www.data.ru)
• Yahoo (http://www.yahoo.com)
Сейчас все большее число поисковых систем включают в себя также и каталог, так чго
регистрируя сайт в поисковой системе, вы можете одновременно включить его и в ката-
лог при ней.
Регистрация в каталогах наиболее проста: все, что от вас потребуется - это правильно
подобрать раздел, в котором должно находиться описание вашего сайта. В некоторых
каталогах не нужно и этого - сотрудник каталога сам разместит описание вашего сайта в
нужном разделе, а то и в нескольких.
Подготовка к регистрации в автоматических поисковых системах потребует от вас неко-
торых усилий и небольшой корректировки файлов вашего Web-сайта. Сейчас мы рас-
смотрим как подготовить файлы сайта к индексации поисковой системой и зарегистри-
ровать сайт.
Раскрутка вашего Web-сайта в Интернете 389
Свойства обозревателя
( Программы *| Дополнительно
Общие Безопасность
1
Конфиденциальность
Журнал -
Папка журнала содержит ссылки для бькггрого доступа
к страницам, которые БЫ недавно посещали.
ОК | Отмена
Параметры:
OK Отмена I j Применить
>• Нажмите кнопку Применить (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) выберите строку Все документы
(*.*) (All types (*.*)). В списке файлов отобразятся файлы всех типов (Рис. 8.3).
392 Создание Web-сайтов
Ем
I CLOUD
|Fon
| Fun
Inert!»
IGsolon
ISeoloci
I index
Имя Файла:
[Все документы ('.•) ш
J3
> Выберите папку, в которой размещены страницы вашего сайта и откройте Ьйш-фаш:,
в котором вы хотите изменить служебные теги. Откроется файл с кодом Web-
страницы.
> Измените или наберите теги < t i t l e > и <meta> с описанием и ключевыми словами
для вашей страницы аналогично тому, как это показано на рисунке (Рис. 8.4).
<head>
<title>BnOop стройматериалов для peMOHTa</title>
</head>
<body>
<img scc= n iinage3/kafel.jpg" кафеля">
Зля справки нажмите F1 J|NUM| л
Disallow: /forum .
Строка с полем Disallow может запретить индексирование документов только с одним
префиксом. Для запрета нескольких префиксов нужно написать несколько строк.
Например, чтобы запретить индексирование документов, начинающихся с / c g i - b i n и
/forum, необходимо написать.
User-Agent: *
Disallow: /cgi-bin
Disallow: /forum
А следующий фрагмент будет неверным
User-Agent: *
Disallow: /cgi-bin /forum
В строках с полем Disallow записываются не абсолютные, а относительные префиксы.
То есть файл:
User-Agent: *
Disallow: www.myhost.ru/cgi-bin
запрещает, например, индексирование документа
http://www.myhost.ru/www.myhost.ru/cgi-bin/counter.cgi,
но не запрещает индексирование документа http://www.myhost.ru/cgi-bin/counter.cgi.
394 Создание Web-сайтов
• Сляпать Ячл^кс ^ а г т о *
-
ЮНЗЕМ Шшж ?Сшиш ьЬ&тл й * г ^
У Нади^ть пнсьно
|Д
врвыэ
У Ней.и )[
ш
Найдётся к »
Ввгжш '• (Саталог i Ноаосги ' Маокет ' Эши^лабДИИ Картинки
в
Рис. 8.5. Страница www.yandex.ru
> Щелкните мышью на ссылке Все службы в верхней части страницы. Загрузится
страница с перечнем служб Яндекса (Рис. 8.6).
?Jffl
«аи
г*
Щмим" Вид Избрапно* Сярпис £правкл
О На•« • О• В 91
А«»с| Й http //wwwjpandei.iu/л!LMJMM Т| Q ПирвиоА [ Link*
1 рв"ГмыМ318ИРУ"В11 автоматически *
Сайты, отобранные Энлййнсеая ролевая
вручную В Швы trpa
U. I I» Н"*
J j И "I»"» 11
Катапог@та11 (
Лсчдцк JlemqjcTai
Но»остаиСМИ
Наияя ^мгп! Журналы ТВ Вчбары Bntcn. ПРМР 1>аУТИ
Э H f i b i ЕЫИ£
Тдбота и заработо
ц Вщггуцвлп Курсы
Ттмаыши
hap Мер Ы iu/co«i!*f?«'2rfi673j*-'
> Определите желательную для себя категорию, перейдите на страницу данной катего-
рии в каталоге и щелкните мышью на ссылке Добавить сайт. Загрузится начальная!
страница регистрации (Рис. 8.9).
it.M«.ru/)a*M»n/i*9ttirtofl.l»l?id>l<»UO
Баонант рвтщиции нз пмпюЙ основе обеспечивгет быстрое (в течении 3-х рабочих дней) появление
описания на араницаи каталога и ряд дополнительных преимуществ. Поэтому, прежде чей приступить к
регистрации, инипатеньно прочтите:
талог*
. П о л ь ж т а и с об оплат? УСЛУГ р м м е щ е н н я 1шфармашю » каталог» Liat-
Проверьте! возможно, ваш сайт относится к группе сайтов, бесплатная регистрация которых о каталоге
KaTanorfamall.ru
Проверьте, воэможао ваш сайт уже зарегистрирован в каталоге Введите ОН своего ресурса и нажмите
кнопку 'Далее*.
Если ваш сайт уже зарегистрирован в каталоге Mau.ru. вам будет отказано в повторной f-егис грации
При положительном ответе, продолжит» заполнение регистрационной формы.
Ь Ь Интернет. О к
/"мс. S./0. Страница для ввода адреса сайта для регистрации в каталоге List.Mail.ru
Введите адрес вашего сайта в поле URL сайта и нажмите кнопку далее. В окно браузера
загрузится форма для ввода регистрационных данных (Рис. 8.11).
«£а#я
н
Ирака Им* Иэбрмто* Сервис Справка 1
о —-©-а а с />.*- * « и — « _ 9Ш-Ш ш -Уив
Заголовок: *
1аголовок должай давать пользователю общее представление о содержании сайта
паже ties обращения к аннотации. Для корпоративных и персональных СЙЙТСВ
_
аголовок должен отражать пазваиие и основной вид деятельности фирмы {лица)
Владелец СЛИТ* :
I
Автор сайта или владелец сайта (юридическое или физическое лицо). Приналичии
я«цсы1ькня копирайтов (информация/ общий, д т а й н , автор, составитель),
1рвдпочтение должно быть отдано владельцу обшего копирайта, либо том Г, кто
_ lacnonaieei правами нл информацию сайта.
Адрес в л а д е л ь ц а :
Юридический, или физический
(заполняется желающими).
(анное М П запслмвется тени владелец «at*, которые хотела 4ы, чтобы вл чсани* их
контактные телефоны.
Кдмчевы* слова:
черв! пробел !
Аннотация: *
(до 300 символов')
13
Ц Готово
О - йИ — Lj
Адрес. Щ Mlp7/lopll)0.[»nibl»f.rii/loplOO/Ccii»pul«r./nKlt>i.ihlmlru
J 3 ЕЛ "•""""•« I
компькнеры
Антивирус H.i Рамблере: проверьте ваши файлы
п
Компьютеры: высшая проб».железа: тесты, обзоры, новости
FTP: поиск пр огрьмм, игр, МРЗ
Товары: Компьютеры н Интернет
Рамблер-Медиа: Intel: будущее замногоядерными процессорами / Playboy внедряет компьютерных супермоделей
["П««и|1 126 I 61 179 1101 ~>' 170 12P1 ' SS5 » 100.03 2004 02:55]
1 iXBT: AMD Sempron и Intel Celeron D: тесты бюджетных пр.. 2«! 2 499 3 043 Л
2 НИКС Компьюмархет: Первые дарты для PCI Fjpresa 312 320 374 вШ
3 'Ф-UEHTP - NVIDIA GeFnree 6600GT: ЯОВЧЙОРЦ среднего к... 306 303 354 Л Дети
4 ; 275 276 304 *J
263 169 330 Й?
б 258 261 273 иП>
7 Упмпчолет» - Вышел ВТОРОЙ сесвис-пак ша Windows XP 230 233 274 Л
! ТЕСТЫ жм»э« - ЕЖЕНЕДЕЛЬНО! 203 203 240 оШ
177 пПп В
S.
Рмс. 5.72. Раздел Компьютеры рейтинга Rambler's Topi 00
Участие в рейтингах необходимо, так как часто пользователи ищут сайты с нужной ин-
формацией именно в них, а попадание в верхушку рейтинга само по себе способно зна-
чительно увеличить посещаемость вашего Web-сайта.
Еще один плюс, который дает участие в рейтингах - это получение обширной статисти-
ки о посещаемости вашего сайта. Для того, чтобы система получала данные о числе об-
ращений к главной странице вашего сайта, вам будет выдан специальный код счетчика,
который нужно будет разместить на страницах вашего сайта. Благодаря этому же коду
будет получена и другая информация о ваших посетителях, которая будет представлена
в виде четкой статистики.
В настоящее время практически все рейтинги предоставляют подобную статистику,
причем зачастую есть возможность пользоваться только услугами статистики, не участ-
вуя собственно в самом рейтинге. Но, конечно, лучше воспользоваться плюсами как
рейтинга, так и статистики. Одним из самых «весомых» рейтингов является рейтинг
Rambler's ToplOO (http://top100.rambler.ru), а самую подробную, хотя и несколько
сложную, статистику предоставляет рейтинг Spylog (http://www.spylog.ru).
Рассмотрим регистрацию Web-сайта в рейтинге.
14-1210
402 Создание Web-сайтов
> Наберите в адресной строке вашего браузера адрес Интернет-рейтинга, например
http://top100.rambler.ru. Загрузится главная страница рейтинга.
> Справа, в разделе Rambler's ТорЮО, или в нижней части страницы найдите ссылку
Добавить ресурс и щелкните на ней мышью. В окно браузера загрузится страница,
на которой нужно выбрать место регистрации (Рис. 8.13).
Регистрация
О проекте
Приглашаем Вас зарегистрировать Баш сайг:
- Нздэ. статистика
• в поисковой системе Rambler, - Вакансии
• в интернет-рейтинге Rambler's ТорЮО;
• в рейтинге интернет-магазинов Rambler's TopShop. - ОФис в Санкт-Петербурге
-Связаться снами
Регистрация в поисковой системе Rambler Но воет
-Новости компании
Регистрация сайта в поисковой системе Rambler есть приглашение роботу
посетить страницы ресурса. Обычно между регистрацией сайта и появлением - Онлайновые СМИ о нас
Ваших документов в результатах поиска проходит 2-4 недели.
Поиск
,n.n^,r Е
:
l I il
Рис. 8.13. Страница для выбора места регистрации
Можно зарегистрироваться:
• в поисковой системе Rambler;
• в интернет-рейтинге Rambler's ТорЮО;
• в рейтинге интернет-магазинов Rambler's TopShop.
> Прокрутите страницу и в разделе Регистрация в интернет-рейтинге Rambler's
ТорЮО щелкните мышью на ссылке Правилами ТорЮО. В окно браузера загру-
зится страница, на которой размещены правила регистрации в системе (Рис. 8.14,
Рис. 8.15).
> Прочитайте внимательно правила регистрации в рейтинге и, если вы с ними соглас-
ны, установите переключатель Зарегистрировать и нажмите кнопку Далее (в дру-
гих рейтингах надписи могут быть другими). В окно браузера загрузится вторая
страница регистрации (Рис. 8.16, Рис. 8.17).
Раскрутка вашего Web-сайта в Интернете 403
QH
Адрес: |3]Ы[р:,7|Оо100 I«nb4ei."j/lo|>100/lop^add.thlml.ru
net
JVJ В Перепои [
О зарегистрировать
О не регистрировать
I Далее I
S. Щ Internet
14'
404 Создание Web-сайтов
*Название ресурса:
i I
Краткое описание:
JB
^ • В @1
Адрес; Ц у Ы!|. /,'к>р1Ш| i^mhlci ш/t-iji bif./mod_top100 cgi?ieg-accept j 3 6 3 Перюоя Lrks
| йогаЫм'» |
|e«oo4t»|
©Да ОНет
Зарегистрироваться
(не нажимайте дважды)
.1..РП»1"
Рис. 8.17. Регистрационная форма рейтинга Rambler's ToplOO (окончание)
Раскрутка вашего Web-сайта в Интернете 405
Заполните поля регистрационной формы и нажмите кнопку Зарегистрироваться.
Откроется страница с сообщением об успешной регистрации и фрагментом html-
1
кода , который нужно включить в код своей главной страницы (Рис. 8.18). Через не-
сколько секунд на указанный вами при регистрации адрес электронной почты придет
письмо с подтверждением регистрации, кодами для включения, а также указанными
вами при регистрации именем и паролем.
Rambler's Тор100
- О npoei?»
Регистрация в Rambler's ToplOO успешно проведена - Новостепроеки
Для того, чтобы система начала подсчет Вашей статистики. Вам необходимо разместить на
зарегистрированной странице Пензенский научно-учебный центр следующий Н*1^[Ь-код: • Регламент
Владельцам сайтов
<!-ЬЧ1исГТ.р100~>
- Изменить
- Удалить
Код должен быть размещен так, чтобы иконка счетчика была видна на странице
Щ Internet
> Внесите в специальную заведенную вами таблицу название рейтинга, его адрес, дату
регистрации, а также имя и пароль для доступа к статистике. Отметьте для себя дату,
когда вы зайдете на данный рейтинг и проверите, появился ли ваш сайт в общем спи-
ске после проверки модератором.
1
Если вы выбрали установку на своей странице логотипа «Участник Rambler's ToplOO» (Рис. 8.17), то
будет два фрагмента html-кода—один для свернутого большого счетчика, а другой для логотипа.
406 Создание Web-сайтов
На этом первая часть регистрации в рейтинге закончена. Теперь, чтобы рейтинг смог
получать информацию о заходящих на нее посетителях с главной страницы вашего сай-
та, необходимо установить на эту страницу выданный при регистрации счетчик.
Установка счетчика
Установка счетчика потребует от вас ручной корректировки html-кода главной страни-
цы. Даже если вы никогда не редактировали страницы своего сайта вручную, не пугай-
тесь. Этот процесс совсем несложен и не отнимет у вас много времени.
>• Нажмите кнопку Пуск (Start) на панели задач. Откроется главное меню Windows.
>- В главном меню выберите команду Программы • Стандартные • WordPad (Programs
• Accessories • WordPad). На экране появится рабочее окно программы WordPad.
> Выберите команду меню Файл • Открыть (File • Open). На экране появится диалог
Открыть (Open).
> В открывающемся списке Тип файлов (File types) выберите строку Все документы
(*.*) (АИ types (*.*)); в списке файлов отобразятся файлы всех типов (Рис. 8.19).
|вс
)CLOUD
)Fon
|Fon
Jgeoton
JGeolon
|Geoton
jinde»
JKnopka
jKnopka
Имя Файла:
ИЗ
Хил Файлов: [Вседоку-1енты(*,')
Выделите текст кода, начиная со строки <!—begin of Rambler's ToplOO code —>
и заканчивая строкой < l --end of ToplOO code—>.
Выберите команду меню почтовой программы Правка • Копировать (Edit • Сору),
чтобы скопировать выделенный фрагмент в буфер обмена.
Не закрывая почтовую программу, перейдите в программу WordPad, в которой от-
крыт html-документ для редактирования.
Установите текстовый курсор на пустую строку после текста, который должен пред-
шествовать изображению счетчика, и вставьте скопированный ранее фрагмент кода,
используя команды меню Правка • Вставить (Edit • Paste). Код будет вставлен в
текст страницы.
Несмотря на эти сложности, можно принять число хостов равным числу посетителей.
Попробуем проанализировать посещаемость сайта, после регистрации которого прошло
уже достаточное время, используя статистику рейтинга Rambler's ToplOO.
> Наберите в адресной строке вашего браузера адрес Интернет-рейтинга, в котором вы
зарегистрировались, например http://top100.rambler.ru. Загрузится главная страница
рейтинга.
>• Справа, в разделе Владельцам сайтов, найдите ссылку Статистика и щелкните на
ней мышью (в других системах ссылка перехода к статистике может называться ина-
че, например Вход для пользователей). На экране появится диалог с полями для
ввода имени и пароля (Рис. 8.22).
410 Создание Web-сайтов
Подключение к lopiUUiamblcnu
на
Authorised User
Пользователь:
Пароль:
г~
j Q Сохранить пароль
... 1
} Отмена |
Рис. 8.22. Диалог для ввода имени и пароля при запросе статистики
> Введите имя пользователя и пароль, выданные вам в системе при регистрации.
Загрузится страница со статистикой о распределении посещений за последний
день (Рис. 8.23).
шт.-яшшшш
Дата регистрации
• Добавить ресурс
Дата последнего обращения 10 09 200418:45:31
- Регламент
Статксткка пас«1Ценкй . ">"" iota, страница Сайт
Владельцам сайтов
Уникальных адресов (хостов) сегодня: 88 101
Посетителей сегодня' 105
ШШШВЖР -
Показов страниц (хитов) сегодня 104
ш
- Забыли пароль?
Сегохмя | Поаробны статистика | ПрТШИЯ • «•Йгннгах! Посещаемость сайта 1 A m
DHecn. посетителей 1
Htnn.il География! Настройка
0 1 2 3 4 5 6 7 8 9 10 11 12 13 И 15 16 17 18 19 20 21 22 23
• Сеговия Недели НЙЗАД ^ ^ — Среднее с иоментй
Сентябрь 20СИ
1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31
Август 2004
!1 И 13 15 17 19 21 23 25 27 29 31
Разумеется, при анализе такого графика следует помнить, что на субботние, воскресные
и праздничные дни всегда приходится спад посещений, а следующий за ними пик объ-
ясняется началом рабочей недели, а вовсе не вашими рекламными действиями. Спад
посещаемости по выходным дням хорошо виден на графиках, приведенных на Рис. 8.24.
Еще одним видом статистики, который бывает полезно изучить, является география по-
сетителей.
> Найдите ссылку География и щелкните на ней мышью. Загрузится страница с диа-
граммами распределения хостов по регионам России.
>• Выберите ссылку Период: 30 дней. Загрузится страница с диаграммой с географииг-
скими данными за 30 дней (Рис. 8.25).
i ресурса 444609 - Mictosoft Internet Explo
Файл Правка {£ив Избранное Сервис Справке
• Забыли пароль?
Сегодня | Подробная статистика | Позиция в рейтингах! Посещаемость сайта -Войти под другим
посетителей | Хосты | Страницы | География | Настройка
Москве (19.83Z) •
<з,4Ш Ш
Краснодарский КРАЙ (1,672) •
Свердловская ОБЛ. (2.142) •
КРЙСХОЯРСКИЙ КРАЙ (1.802) •
Иркутск** ОБЛ. (1.782) •
ТОМСКАЯ ОБЛ. (1,292) •
Остальные регионы <32.022) G
Зарубежные СТРАНЫ (34.542) •
Расположение ив огееделено (1.502) D
т*
аТх"
Файл Правка Вид Избранное Сервис 1 2
Шштт
WplOC'.pUFWWd: topi ОС)
Сортировать по: млхчсс Т¥ги»сеще1ой/Е£и__ «спи последнего обе 1ГГШ
Алресапосетителей: чиср^вь t |IF1 U P e c i ' i™*i« кя итамтерож
«Пр«|1|31|а1|й|81|1Ш.|Дмьп»»
'• • • ;:••:,• Сайте целом ai страница
Время
' Возвр Переэа „ после дяего
8 Не
Обретший ; • пйсле грузок ~г' обращениз
стретлги. . " " »
ч а с а
• - . ; • . • . • . • . •
1 Mfuia-Wabans.glazov.net 5 D 0 5 0 14:44.43
2 62.183 50164 В В П 4 2 : 0 0 4 1623.40
3 prony.bU.bg 3 1 О 3 0 13Л2И5
4 I95.201.109.22tf 3 1 0 .3 0 13:41.41
5 mx.vkl.iu 2 0 0 2 0 13J934
6 nj ino*uiedu.ru 2 1 0 0 2 0 18Ш4
7 195.Й9.160.6 2 1 0 0 0 2 12:36:56
8 dialup S3 209 220 95.telecom.mogilev.by 2 1 0 0 2 0 12:34:01
9 h99.212-l-77.utapack.net 2 0 1 0 2 0 13:44:02
10 gwradioc.ni 2 1 0 0 1 1 0628:10
11 21726144.73 2 1 0 0 2 0 13:01:24
12 212.17634.6 2 0 1 0 2 0 №'5626
13 195.128.94.20 2 0 1 0 2 0 1305:54
14 cache2.uninet.ee 2 l 0 2 0 17Я303
15 ln.hiUnv.ui 0 0 0 1 0 XJ9S5
1(5 pan.riss-lebcoiti.ru 0 0 0 1 0 15:17:33
17 cel-atf32-violet.&ftftnettu 0 0 0 1 0 18:31:14
IS hott-80-95-32-242Jeuedlines.euriJM о .. 0 0 1 0 огза-Si
19 host-80-95-35-232 dialup sura ru 0 0 0 1 0 1848 22
0 14Л931
IHBH
20 host-SO-9^38-43 diLiunni 0 0 1
Процент от всех: ЗЗДК
С помощью этой таблицы вы можете увидеть конкретные адреса хостов, с которых при-
ходят к вам посетители. Чтобы более подробно узнать об этих хостах, можно прибегнуть
к такому трюку. В адресной строке браузера наберите фрагмент любого адреса, начиная
со второй с конца точки, вставив впереди www. Например, если взять третий адрес из
таблицы proxy.bta.bg и ввести преобразованный адрес www.bta.bg в адресную строку
браузера, то мы попадем на сайт болгарского телеграфного агентства. То есть, три об-
ращения, которые дал этот хост в течение дня, идут от сотрудников этого агентства.
414 Создание Web-сайтов
Часто знание адресов позволяет более точно определить, из какого города идет приток
посетителей, а также узнавать некоторых посетителей «в лицо», особенно, если ваш сайт
невелик, и число ежедневных посетителей ограничивается несколькими десятками. То-
гда, зная адреса обратившихся хостов и адреса электронной почты, по которым вы осу-
ществили рассылку новостей своего сайта, можно довольно точно определить, какие из
подписчиков откликнулись на рассылку новостей.
Для большинства сайтов регулярного анализа подобной статистики вполне достаточно,
чтобы сделать выводы об эффективности или неэффективности предпринимаемых рек-
ламных шагов. Если же вам хочется получить еще более подробные сведения о посети-
телях вашего сайта, то можно пойти еще дальше, и зарегистрироваться в системах с бо-
лее подробной статистикой. Но для этого придется установить счетчик системы на каж-
дую страницу вашего Web-сайта. Подобные услуги предоставляют, например, системы
Spylog (http://www.spylog.ru) и Rambler (http://top100.rambler.ru). Системы с подробной
статистикой предоставят не только сведения, о которых было рассказано выше, но также
информацию о ссылающихся на ваш сайт серверах, количестве посетителей, пришедших
с поисковых машин и каталогов, наиболее популярные пути и страницы сайта, время,
проведенное посетителями на сайте. Регистрация и установка счетчиков на страницах
для участия в таких системах совсем несложны и аналогичны тем, о которых было рас-
сказано выше.
Баннеры могут быть в формате gif, jpeg и flash. О том, как самому создать графический
или анимированный баннер, было рассказано в главе о графике и анимации этой книги.
В этой же главе мы расскажем о том, как сделать так, чтобы каждый ваш рекламный
блок успешно выполнял задачу по раскрутке сайта.
Раскрутка вашего Web-сайта в Интернете 415
Rambler
ф | 5 К
iflwfi»flpifl ] В Ираке уничгп
a
турецкой *Afflt:K .WttM* I Накануне годовщины 11 сентября
Московское время: 09:51:08
Частицы солнечного вятра не пострадали При ударе капсул
рееланская школа
Qanesin о земгро, | Грузия получит часть вздвифимрстк
Помогите пострадавшим от
теракта в Беслане
Л и п е к з и л Ми Э л Jft 7 7 - 4 4 0 0
«Загадочный» баннер (Рис. 8.29). Рисунок и текст на таком баннере настолько стран-
ны, что непонятно о чем вообще идет речь или их можно истолковать сразу в не-
скольких смыслах. Заинтригованный пользователь часто не может пройти мимо та-
кого баннера, чтобы не узнать, что за сайт за ним скрывается. Также CTR «загадоч-
ного» баннера может сильно увеличиться, если баннер содержит не только Загадку,
но и намек на эротические мотивы.
ДАЛЬШЕ ЫЛЕ
Рис. 8.29. «Загадочный» баннер
• «Нажми на баннер». Вообще считается, что слова «щелкни», «нажми здесь», «клик-
ни», побуждающие посетителя к активным действиям, очень повышают CTR банне-
ра, тем более, если предлагается щёлкнуть мышью, чтобы узнать что-то интересное,
выиграть приз и так далее. Как ни странно, но срабатывает и обратное - призыв не
нажимать на баннер (Рис. 8.31).
НИКОГДА
НЕ НАЖИМАЙ
НА ЭТОТ БАННЕР
Рис. 8.31. Баннер с призывом не нажимать на него
Хотя все перечисленные выше способы необходимо знать всем, кто хочет изготовить
для своего сайта рекламный баннер, следует помнить, что не всегда баннер с высоким
CTR реально приведет на ваш сайт большое число посетителей. Многие из них, соблаз-
нившись интригующим изображением или надписью, щелкнут мышью на баннере, но
уже через пару секунд обнаружат, что изображение на баннере имеет мало общего с те-
матикой рекламируемого сайта. В этом случае посетитель просто нажмет кнопку своего
браузера, которая вернет его на тот сайт, на котором он находился вначале. Таким обра-
зом, получив клик, вы не получите постоянного посетителя, который будет часто воз-
вращаться на ваш ресурс.
Кроме того, есть опасность, что посетитель запомнит, что именно ваш сайт использует
не совсем честные методы, а когда ему действительно понадобится информация с ваше-
го ресурса, он предпочтет сайт-конкурент. Поэтому лучше всего, пользуясь советами по
повышению CTR, одновременно стараться не обманывать посетителя и на сайте, по воз-
можности, предлагать то, что обещает баннер. Например, баннер с фрагментом игры
«Сапер» с изображением частично разминированного игрового поля (Рис. 8.33) призы-
вает скорее продолжить игру, потому что время идет.
Ф
1 1 I:..'
1 2| 1131 Быстрее! Время
1 ПНжН рляминнртдть! 1 z идет!
1Ш
Хотя такой баннер содержит «хитрые» элементы, тем не менее он почти не обманыва-
е т - баннер ведет на сайт интерактивных игр с призами RaxGames (http://games.rax.ru).
Правда, игры «Сапер» там нет, но зато есть множество других интерактивных игр по-
добного плана.
Если отклик изготовленного вами баннера не так высок, как хотелось бы, это еще не
означает, что сам баннер не эффективен. Посетитель может и не щелкнуть мышью на
баннере, но тем не менее, запомнить название и адрес сайта, который баннер рекламиру-
ет. Для этого, конечно, название и адрес должны быть указаны. Иногда баннеры делают,
ориентируясь, главным образом, на этот случай - тогда баннер должен содержать яркое
название сайта и несколько ключевых слов, описывающих его содержание. Аналогич-
ным образом часто поступают компании для рекламы своего имиджа - мы часто видим
на улицах рекламные щиты, на которых, кроме логотипа и названия компании, нет ниче-
го. Такая реклама направлена на то, чтобы сделать узнаваемым и привычным название
компании, ведь большинство покупателей предпочитает покупать товары известных
фирм. Так почему бы не поступить точно так же для того, чтобы сделать известным имя
своего сайта?
molotokiTu
О Компьютеры П Коллекционирование О Сотовая связь О Авто, Мото, Запчасти
чает канал, когда там начинается реклама. А так как рекламные баннеры на страницах
сайтов обычно находятся на одном и том же месте - вверху или внизу страницы - поль-
зователи попросту перестают обращать на них внимание. По этой причине во всем мире
сейчас наблюдается снижение рекламной отдачи баннеров всех баннерных сетей. Вдо-
бавок, если рекламных баннеров слишком много, посетитель вашего Web-сайта даже
может с раздражением уйти с него - ведь он пришел на ваш сайт не для того, чтобы
смотреть рекламу.
Есть еще одна причина, по которой следует подумать, стоит ли вам размещать на своих
страницах баннеры, которые предоставляет вам баннерная сеть в обмен на показ вашей
рекламы на других сайтах. Это - невозможность контролировать содержание баннеров,
которые появятся на страницах вашего сайта. Над этим особо стоит задуматься владель-
цам серьезных тематических ресурсов. Хотя в большинстве баннерообменных сетей за-
прещено использование некоторых приемов в баннерах, зачастую баннеры, формально
отвечая правилам, имеют довольно фривольный вид и тексты, что называется, «на грани
фола». Если учесть, что очень часто посетители вашего серьезного, интересного сайта
будут распечатывать статьи для своих друзей, не имеющих Интернета, то достаточно
представить, как будет выглядеть распечатанная серьезная статья, сверху и снизу обрам-
ленная странными рисунками и надписями, чтобы отказаться от баннерного обмена со-
всем. Тем более, что если посещаемость вашего сайта не более 100 человек в день, то
сколько-нибудь заметного выигрыша от участия в баннерном обмене вы все равно не
получите.
Баннерообменные сети
Баннерообменная сеть - это служба, которая помогает всем желающим размещать баннеры
на других сайтах. При этом система обмена баннерами работает следующим образом.
Раскрутка вашего Web-сайта в Интернете 421
Вы, как владелец сайта, регистрируете его в системе, загружаете свои баннеры и взамен
получаете код, который -вставляете на свои страницы. При просмотре страниц вашего
сайта в том месте, куда вы вставили код, посетитель увидит баннер одного из участни-
ков баннерной сети. Система регистрирует каждый показ чужого баннера на ваших
страницах и суммирует общее их число. С учетом этого числа баннеры, рекламирующие
ваш сайт, появляются на сайтах других участников.
За свои услуги баннерообменная сеть взимает определенную комиссию - например, вы
показываете на своих страницах 100 чужих баннеров, а взамен сеть показывает 90 ваших
баннеров на других сайтах. Десять показов баннеров из ста сеть забирает себе - для про-
дажи желающим за деньги или для рекламы самой баннерной службы. Как правило, чем
крупнее сеть, тем более высок процент ее комиссии. Есть сети, которые обменивают
показы баннеров «один к одному». Как правило, это небольшие или только начинающие
работать сети.
Большинство баннерообменных сетей предоставляет своим пользователям подробную
статистику, в которой содержится информация о количестве показов чужих баннеров на
странице пользователя, количестве показов собственных баннеров на чужих сайтах, CTR
каждого баннера и некоторые другие сведения. Некоторые баннерные сети позволяют
своим участникам самим выбирать, на сайтах каких тематических групп будут показы-
ваться баннеры участника, позволяют запретить показ на своих страницах баннеров оп-
ределенных сайтов (например, если эти сайты являются конкурентами вашего), а также
показывать свои баннеры только в определенные дни недели, в определенное время и
для посетителей из определенного региона страны. В некоторых баннерных службах
услуги настройки показов на определенную аудиторию оказываются не всем участни-
кам, а только тем, которые на своих страницах показывают оговоренное число баннеров
других участников.
Почти все крупные баннерные службы разрешают управлять показом баннеров, что по-
зволяет участникам сети создавать гибкие схемы для своих баннерных рекламных кам-
паний. Например, вы, как владелец сайта, можете, показывая баннеры других участни-
ков, запретить показы своих, чтобы накопить их. Когда в данной сети накопится боль-
шое число показов баннеров, можно будет разрешить их демонстрацию, и тогда некото-
рое время на сайтах, входящих в данную сеть, будут преобладать ваши баннеры, что
положительно скажется на притоке ваших посетителей. Такой вариант массированной
рекламной кампании рекомендуется владельцам сайтов с изначально невысокой посе-
щаемостью, баннеры которых, действуй они по обычной схеме, просто потонули бы в
массе баннеров других участников сети.
Кроме возможности запретить показ баннеров до особого распоряжения, многие службы
дают возможность перенаправить показы баннеров, заработанные одним сайтом, на счет
другого. Например, если вы владелец двух сайтов - серьезного и развлекательного, то у
вас есть возможность перенаправить показы, заработанные хорошо посещаемым развле-
кательным сайтом на рекламу серьезного, который в силу специфичности аудитории сам
не способен заработать такое количество показов. Схема с перенаправлением показов на
другой счет удобна также, если вы захотите использовать показы баннеров как виртуаль-
ные деньги, чтобы, например, расплатиться показами баннеров за товар или услугу, или,
наоборот, - поменяться с кем-то, получив взамен оговоренное число показов баннеров.
Выбирая баннерообменную сеть, необходимо внимательно ознакомиться с условиями
вступления в нее, количеством и уровнем сайтов-участников, размерами комиссии, пра-
422 Создание Web-сайтов
вилами сети и оценить, насколько все это соответствует тематике, содержанию и стилю
вашего сайта. Например, для некоторых сайтов будет только плюсом, что баннерная
сеть строго следит за содержанием сайтов-участников и демонстрируемых баннеров, для
других же сайтов это может стать сдерживающим фактором. Так что при выборе бан-
нерной сети вам самим придется решить, насколько для вашего сайта приемлемы ее
условия. Информация о правилах и условиях вступления в баннерную сеть обычно под-
робно представлена в специальном разделе на сайте сети.
Ниже приводятся адреса наиболее крупных баннерных сетей.
• Russian Link Exchange (http://www.rle.ru) - охватывает более 20 000 сайтов различной
тематики, ежедневно показывает более 19 миллионов баннеров размером
468x60 пикселов. Принимаются все сайты за исключением сайтов с содержанием
«для взрослых» и посвященных заработку в сети на основе пирамид. Эта баннерная
сеть берет комиссию в размере от 14% до 33%. Чем больше чужих баннеров на своих
страницах вы сможете показать, тем меньшую комиссию взимает сеть. Сеть строго
следит за содержанием баннеров и соответствием сайтов заявленной тематике.
Управлять аудиторией показа своих баннеров могут только участники сети, показы-
вающие в сутки более 400 чужих баннеров на своих страницах.
мата. В начале баннерной кампании может быть полезно попробовать несколько баннер-
ных служб, чтобы выбрать ту, которая наиболее подходит для вашего сайта.
Еще одна важная вещь, которую следует оценить перед вступлением в баннерную сеть -
это размер комиссии, взимаемой сетью. Необходимо подсчитать, как комиссия данной
сети соотносится с возможностями вашего сайта, и оценить потенциальную отдачу от
баннерной рекламы.
Предположим, ваш сайт ежедневно посещает 100 человек. В среднем, каждый посети-
тель просматривает 2 страницы сайта (многие службы статистики предоставляют ин-
формацию о глубине просмотра сайта посетителями). Если на каждой вашей странице
размещен баннер баннерной службы, значит, общее число баннеров, показанных на ва-
шем сайте в сутки, будет 200. Если размер комиссии, взимаемый баннерной системой,
составляет, например 20%, то 200 баннеров, показанных вами, принесут 160 показов
рекламы вашего сайта. Если учесть, что средний CTR большинства баннеров составляет
0,5%, то получается, что участие в баннерной системе принесет вашему Web-сайту
0,8 посетителя в день или примерно одного нового посетителя раз в два дня. Это очень
мало. Вдобавок, этот посетитель может быть случайным и может сразу же уйти с вашего
сайта, чтобы никогда на него не вернуться.
Получается, что если число ежедневных посещений вашего сайта невелико, то участие
в баннерной сети не очень выгодно. Если же ваш сайт активно посещаем, кроме того,
каждый посетитель просматривает за один раз несколько страниц, то участие в баннеро-
обменной сети может быть очень полезным для вашего сайта.
I
U, I d hj В Пе
гггишгттгттп rrri—--тгтгттгт г-т
шггм
D / C BANNER
I\L.C NETWORK
-Ф®-~-о-
- | О СЕТИ КАТАЛОГ
САЙ1О»
ИНФО-UEHTP
Не бойтесь будущего.
• Правила участия в сети RLE
TJBT
Рис. 8.35. Страница с правилами участия в сети RLE
424 Создание Web-сайтов
ние об успешной регистрации (Рис. 8.37), и через пару минут на указанный вами ад-
рес электронной почты придет письмо с указанием вашего идентификационного но-
мера (ID) в системе .. кода, который нужно вставить на страницы вашего сайта.
После получения идентификационного номера вы становитесь полноправным участни-
ком баннерной сети.
> Это число на каждой Web-странице, куда вы вставляете код, должно быть разным.
Если этого не сделать, баннеры на ваших страницах будут сменяться некорректно,
Сохраните исправленный файл Web-страницы с помощью команды меню Файл •
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены.
>- Замените фрагмент Rnd_Num (он встречается в тексте кода два раза) на любое число.
> Дважды щелкните мышью на имени Web-страницы в программе Проводник (Ex-
plorer). Откроется окно браузера с отредактированной страницей (Рис. 8.39).
> Убедитесь, что баннер отображается правильно и закройте окно браузера.
> Повторите все описанные выше шаги для всех страниц, на которых вы хотите раз-
местить баннеры баннерообменной сети.
ваиэ]
Файл Правка Дщ Избранное Сервис Справка
) http://www.lle.tu
Ы
01.06,04 Открыт обмен бвняерамн трех новых размеров: 120x240,600x90,120x600 Подробнее
АРХИ1 НОВОСТЕЙ ( ^
Т [ ВОПРОС ДНЯ
в Что нового в RLE? О Зарегистрировать новый ЦГ'У^
© Вход по безопасному протоколу https
© ©• @ j—j ©
AdRiver
Рис. 8.40. Ввод номера участника и пароля для входа в баннерную сеть
428 Создание Web-сайтов
Перейдите в нижнюю часть страницы и в поле Login введите свой идентификацион-
ный номер в системе, который вам прислали по почте, а в поле Password введите па-
роль и нажмите кнопку ® (Рис. 8.40). Откроется первая страница внутреннего разде-
ла участника баннерной сети (Рис. 8.41).
I T / C BANNER
Авто / Мото +
Бизнес и Компании +
Игры ±
Интернет сервис +
Интернет-торговля +
Искусство и культура ±
Кино и Телевидение +
Компьютеры ±
Люди +
Медицина и здоровье +
Музыка и радио +
Наука и Образование ±
Прочее +
Развлечения, отдых +
Страны и города, путешествия-!
СМИ / Интернет периодика +
Спорт ±
Хобби ±
Когда вы находитесь внутри раздела для участника сети, вам предоставляется множест-
во возможностей по управлению вашими баннерами, показами баннеров на вашем сайте,
а также по получению статистики по страницам вашего Web-сайта.
Теперь попробуем добавить в систему собственные баннеры, рекламирующие ваш
Web-сайт.
D / C BANNER
IV.I IEIWORK
[Главное меню
Поле ALT - это текстовая строка, которая будет видна на месте баннера
до того, как он загрузится. Данная возможность реализована только на
сайгах, использующих для показа баннера новый расширенный код (код
с возможностью показа HTML баннеров).
Добавить баннер
~ Л | j|jj> Интернет
ттшшмштшттштятшштттт
\ файл Правка йид Избранное Сервис £прввка
|<Ё htlp|//www.rla:ru:8DaD/cgi-bin/managsf.c9i
l-a-RLE-А
£Цайл Цравка Й.ид Избранное Сервис Справка
http://www.rle.ru:e080/cgi-bin/manager.cgi
Для того, чтобы закачать баннер, надо нажать кнопку BROWSE, выбрать
баннер на локальной машине, затем нажать на пиктограмму "закачать".
После зтого баннер будет проверен и результат проверки появится на
экране.
Если вы не видите кнопку "BROWSE" - это значит, что ваш броузер не
поддерживает закачку файлов. Используйте Netscape Navigator версии
3.0 или выше, или Internet Explorer версии 4.0.'
Выберите файл: | , || Обзор... |
закачать
TIP: Поле ALT - это текстовая строка, которая будет видна на месте
баннера до того, как он загрузится. Данная возможность реализована
только на сайтах, использующих для показа баннера новый расширенный
код (код с возможностью показа HTML баннеров).
> В поле Дата старта (Рис. 8.43) впишите дату, с которой вы хотите начать показ бан-
неров, например 01.10.2004 00:00:00.
Дата может быть текущая, если вы хотите начать показ своих баннеров немедленно, или
отдаленная, если вы хотите сначала накопить достаточное число показов чужих баннеров.
>• Прокрутите страницу и нажмите кнопку Обзор (Browse), расположенную в средней
части страницы (Рис. 8.44). На экране появится диалог Выбор файла (Рис. 8.45).
k3banner1.gif
1 index html
porl html
pnr2.html
pnr3.html
stntyn.html
I [ Открыт
а
I n n файлов: |Всв файлы (*.*) Отмена
> Откройте папку, в которой вы разместили готовые баннеры, выберите файл с нуж-
ным баннером и нажмите кнопку Открыть (Open). На экране появится сообщение
о том, что баннер принят системой и отправлен на проверку (Рис. 8.46).
Раскрутка вашего Web-сайта в Интернете 431
|<Й hHp//www.rle.ru:aO8D/cqi-binAatchil.cg
Интернет
На этом процесс добавления баннера закончен. Если вы хотите добавить в систему другие
баннеры, то в открывающемся списке снова выберите пункт Добавление нового баннера
и повторите всю последовательность действий, но уже для другого файла с баннером.
драс |g hHp://web-linkBxchQnge.ru.8080/c9'bin/
D/C BANNEl
сегодня: 18 сегодня: 13
всего: I486 всего: 1064
[Упавноб меню
ПЗ®
0 УПРАВЛЕНИЕ ПОКАЗАМИ ЕАННЕРОВ АМКАУНТ И 45477
Ш Включен П Удалить
ф подробим mcipofta @
| , » Интернет
Рис. 8.48. Страница для управления показами баннеров в баннерной системе (начало)
Раскрутка вашего Web-сайта в Интернете 433
В Включен D Уд агат,
Сценарий: [не определен£
| подробная настроим
_L
/"we. 8.49. Страница для управления показами баннеров в баннерной системе (окончание)
15-1210
434 Создание Web-сайтов
Главное меню
П включить фильтр
О Разрешить показ баннеров следующих аккаунтов на моем сайте
<£ Запретить показ баннеров следующих аккаунтов на моем сайте
L _._._ j
Введите через пробел Ю тех сайтов, для которых вы хотите
запретить или разрешить баннерные показы.
Полный список сайтов и их ГО представлен за? :ь
сохранить изменения
\Ш Интернет
Рис. 8.50. Страница для настройки показов чужих баннеров на вашем сайте
> Сбросьте флажки напротив типов баннеров, которые вы не хотели бы видеть на сво-
ем сайте. Например, вы можете сбросить флажки напротив всех типов, кроме Про-
стых графических. Тогда баннеры, использующие технологии CGI, JavaScript, Flash
и Java, на вашем сайте показываться не будут.
v Сбросьте или оставьте установленным флажок напротив пункта Открывать новое
окно. В зависимости от этого сайт, загружаемый по щелчку мышью пользователя на
баннере, будет загружаться либо в текущее окно браузера, замещая собой страншгу
вашего сайта, либо открываться в новом окне, оставляя окно со страницей вашего
сайта неизменным.
> Нажмите кнопку Ц возле надписи Сохранить изменения, чтобы сохранить в систе-
ме сделанные вами настройки.
Вы также можете запретить показ на своем сайте баннеров вполне определенных ресур-
сов. Список ресурсов с их номерами можно получить, нажав на соответствующую ссыл-
ку в разделе Фильтр показов на приведенной странице (Рис. 8.50). Это может быть ра-
зумным, если среди сайтов, реклама которых будет размещаться на ваших страницах,
есть сайты со сходной тематикой. Чтобы ваш пользователь не ушел к «конкуренту»,
имеет смысл запретить демонстрацию баннеров подобных сайтов у себя.
> Введите через пробел в специальном поле номера сайтов, показ рекламы которых ны
хотите запретить на страницах вашего Web-сайта.
>- Установите флажок Включить фильтр.
> Нажмите кнопку @ возле надписи Сохранить изменения, чтобы сохранить в систе-
ме сделанные вами настройки.
Раскрутка вашего Web-сайта в Интернете 435
Статистика Web-страниц
Участие в системах баннерного обмена дает дополнительный плюс: загрузка каждой
страницы вашего Web-сайта с размещенным на ней баннером тщательно учитывается
баннерной системой, а потому система получает полную информацию для сбора стати-
стики посещаемости вашего сайта. В данном случае баннеры, размещенные на каждой
странице вашего сайта, выступают как своеобразные счетчики посещений.
Статистика аналогична той, которую выдают своим пользователям рейтинговые систе-
мы и специальные системы учета статистики посещений.
>• Выберите пункт Статистика Web-страниц в открывающемся списке и нажмите кноп-
ку ф. В окно браузера загрузится соответствующая страница системы (Рис. 8.51).
|ИТ1ГТ11ГТ1Р1ИЛИН
Правка Пив Избранное Сервис Справка
Гпавное меню
15'
436 Создание Web-сайтов
• .Гостевая книга. Это раздел, на страницах которого посетителям предоставляется
возможность оставлять записи с мнением о содержании сайта в целом и отдельных
его статей. Во многих гостевых книгах есть возможность для автора сайта под каж-
дым замечанием посетителя помещать свой ответ.
• Форум. Этот раздел представляет собой расширенный вариант гостевой книги. В нем
есть возможность обсуждать отдельные темы, связанные с тематикой сайта, причем
сообщения в форуме группируются по темам обсуждения для удобства чтения.
• Чат. Это специальный раздел сайта, предназначенный для разговоров посетителей в
реальном времени.
Организация гостевой книги, форума и чата может значительно повысить посещаемость
вашего сайта. Иногда случается так, что посетители постоянно посещают какой-либо
ресурс, предпочитая его сходным по тематике, только потому, что на его форуме прохо-
дят любопытные дискуссии, а в чате постоянно можно встретить интересных людей.
Разумеется, чтобы все эти разделы привлекали посетителей, вам, как владельцу ресурса,
необходимо приложить некоторые усилия. Если вы завели гостевую книгу, то желатель-
но почаще отвечать на критические замечания, оставленные посетителями. Необяза-
тельно отвечать на все подряд, но самые интересные вопросы и замечания пропускать,
конечно, никак нельзя.
Сложнее сделать интересным форум. Очень часто владельцам только что открывшихся
форумов приходится самим начинать новые темы для обсуждения, которые могут быть
интересны многим, в надежде на продолжение дискуссии, а то и выступать под вымыш-
ленными именами, продолжая ее. Необязательно прибегать к таким способам, достаточ-
но на первых порах поддерживать все темы, которые начинают посетители, и отвечать
по мере сил на вопросы, которые они будут задавать. Через некоторое время уже не вы
будете помогать форуму, а форум будет помогать росту популярности вашего сайта.
Самой сложной является поддержка чата в самом начале его работы. Нередка ситуация,
когда посетителей в чат заходит много, но делают они это в разное время, не пересека-
ясь друг с другом. Естественно, когда в чате не с кем поговорить, ни один посетитель не
будет находиться там дольше нескольких минут, а значит, следующий посетитель тоже
рискует застать чат пустым. Чтобы этого не произошло, вам, как владельцу чата, имеет
смысл установить своеобразное дежурство - то есть находиться в чате столько времени,
сколько вы сможете. Если у вас есть друзья, которым интересна тематика вашего сайта,
можно попросить их «подежурить» на первых порах в чате, поддерживая разговор со
всеми, кто туда заходит. Когда каждый посетитель вашего сайта будет знать, что ваш
чат не пустует и там можно всегда поговорить с единомышленниками, в чате сформиру-
ется свой круг общения. Вы сможете познакомиться с множеством людей, которым ин-
тересна тема сайта, причем некоторые из них, возможно, станут вашими добровольными
помощниками по поддержанию и расширению вашего ресурса. Ну и конечно, завсегда-
таи чата будут постоянно заходить на ваш сайт, а новички, благодаря чату, смогут полу-
чить теплый прием и ответы на вопросы, связанные с темой сайта.
Конечно, не всегда следует устраивать на своем сайте сразу и гостевую книгу, и форум, и
чат, но хотя бы один из перечисленных разделов желательно организовать. Какой именно -
это зависит от тематики вашего сайта. Гостевая книга будет полезна практически любому
сайту, форум будет уместен на тематических сайтах, которые часто обновляются, чат хоро-
шо приживется на развлекательных ресурсах с относительно высокой посещаемостью.
Раскрутка вашего Web-сайта в Интернете 437
Самый простой способ открыть на своем сайте гостевую книгу, форум или чат - это
воспользоваться услугами специальной бесплатной службы, которая поможет вам их
организовать. В этом случае форум или чат физически будут размещаться на сервере
данной службы, но для посетителя они будут являться частью вашего сайта.
Рассмотрим подробнее создание интерактивных разделов для вашего сайта с использо-
ванием бесплатных служб.
гостевые
Регистрация
ТРЕБУЮТС5
ОТЛИЧНЫЕ 4
Guestbook предлагает вам самые лучшие гостевые книги IT СПЕЦИАЛИСТЕ
бесплатно! Дайте возможность посетителям ваших
страниц оставить свое мнение о вашей рабств! Получайте
сообщения от посетителей ваших страниц, не имеющих
V) В
a ••
Перепад [ Links
Чтобы получить Гостевую Книгуv сначала ...
придумайте для нее имя.
Читать
И После прочтения Правил пользоеания челками Гдстеры^
Книг www ouestbook tit, выберите уникальное алфавитно-
цифровое имя для своей книги. Помните, что в имени
можно использовать только латинские буквы и цифры Это
имя также буает вашим именем, как владельца книги.
Готово || Очистить ~ ]
J ?•»!!
книги
гостевые
D A T A E H Q ШГГЕРИИ
о
НА ЗАГЛАВНУЮ I РЕГИСТРАЦИЯ . ТЕХНИЧЕСКИЙ ЦЕНТР | ПОМОЩЬ I СПРАВОЧНИК ВЕБМАСТЕРА | OCEPI
94216
вашей гостевой книгой.
гостевые
книги О
ПЕТЕРЛИНК.ЖЕВ
НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ ТЕХНИЧЕСКИЙ ЦЕНТР ПОМОЩЬ СПРАВОЧНИК ВЕБМАСТЕРА
Gue*tBook.iu
Вы зарегистрированы!
Ниже приведен пример кода, который надо вставить в
вашу страница, тгобы Гостевая Книга заработала. Просто
скопируйте и вставьте его. это так просто)
> Запишите для себя, чтобы не забыть, имя вашей гостевой книги и пароль.
Через несколько секунд на указанный вами при регистрации адрес электронной почты
придет письмо с повторением сообщения об успешной регистрации, а также кода, который
нужно вставить в свои страницы для появления на них ссылок Оставить запись в книге и
Читать книгу.
440 Создание Web-сайтов
> Установите текстовый курсор на пустую строку после текста, который должен пред-
шествовать ссылке на гостевую книгу, и вставьте скопированный ранее фрагмент ко-
да, используя команду меню Правка • Вставить (Edit • Paste). Код будет вставлен в
текст страницы (Рис. 8.56).
> Сохраните исправленный файл Web-страницы с помощью команды меню Файл •
Сохранить (File • Save) и закройте его. Изменения в код страницы будут внесены.
> Подключитесь к Интернету.
>• Дважды щелкните мышью на имени Web-страницы в программе Проводник (Ex-
plorer). Откроется окно браузера с отредактированной страницей (Рис. 8.57).
> Убедитесь, что ссылки отображаются правильно, и закройте окно браузера.
Раскрутка вашего Web-сайта в Интернете 441
книгу</аХЬг>
<а hrefe"http://www.guestbook.ru/"><img
src="http://www.guestbook.ru/gif2/guestbook_logol.gif"
tit.le="www.guestbook.ru - лучший сервер гостевых книг"
</html>
Для :а справки нажмите <F1> | ||NUMJ
>• Повторите операцию вставки кода для других страниц, на которых вы хотите видеть
ссылки на свою гостевую книгу.
:
АДР«=: Щ hllp://w»n».gu<nlbook.iu/?utei-EEOTONtaclion-ihow Переход Unks
книги
гоотввыв
ЛОПАВИГЬ ЗАПИСЬ
g»oton
Всего записей 2
Страницы \
Q Готово
JUUDI1 **«*•
Рис. 8.58. Гостевая книга в системе Guestbook.RU
В гостевой книге несколько записей, причем самые поздние из них отображаются пер
выми. Ответим на некоторые их них.
>• Наберите в адресной строке браузера адрес сайта гостевых книг http://www.guestbook.ru
В окно браузера загрузится главная страница сайта (Рис. 8.59).
Раскрутка вашего Web-сайта в Интернете 443
H.,«-Q - g] gj У
Mpeq W) Mlpt//«KW guetlbook.ru/ Г*| g j Переход j Links
Приколы < Каталог сайтов 1 Звуковые SMS l{ Откро
гостевые
О
КНИГИ
I НА ЭАГШШНУК} I РКИС ГРАЦИЯ ПгПШЧХКИИ UFHTf I IWMOlltb
ОАТАЕЗШ
I
ПЕТЕРИИНК.'Л'СО
СПРАВОЧНИК BBatMCIEPA
uiVcgi-bir№
Адрес; \Щ http://vmw.guestbook.ru/sjxteiii/
книги
гостевые
D A T A E H 5 1 ПЕТЕРЛШНК.'
О
НА ЗАГЛАВНУЮ РЕГИСТРАЦИЯ : ТЕХНИЧЕСКИЙ lifcHfP ПОМОЩЬ СПРАВОЧНИК UtbMACJtPA 1 ОСЕРЕ
Пароль: j
jHDL
Рис. 8.61. Страница для ввода имени и пароля
Введите имя (логин) и пароль и нажмите кнопку Войти. В окно браузера загрузится
страница для редактирования гостевой книги (Рис. 8.62).
гостевые
Логик Г"
|Москвв 1
Пароль: |
| I
1
\Щ Internet
> Если вы хотите удалить некоторые сообщения, то установите флажок Удалить эту
запись, расположенный в начале соответствующего сообщения.
>• Напишите ответы под нужными сообщениями в полях ввода Ваш Ответ (Рис. 8.63).
Раскрутка вашего Web-сайта в Интернете 445
Текст Комментария:
Занимается ли Ваша фирма обучен 1ек по поставляемым
продуктам?
Ваш Ответ:
Да, конечно
Внести Изменения |
I
_| -
иг IИ | [ 9 Internet А
гостевые
КНИГИ
gtoton
Создаем форум
Бесплатные форумы для персональных Web-сайтов предлагают следующие российские
службы:
• WebForum.ru (http://www.webforum.ru)
• Форумы @mail.ru (http://talk.mail.ru)
Создадим форум для Web-сайта с помощью службы WebForum.ru.
• Наберите в адресной строке браузера адрес http://www.webforum.ru. В окно браузера
загрузится главная страница сайта (Рис. 8.65).
I ULJEBFDRLMRU
СЕРВИС -КОНФЕРЕНЦИЙ . . - •. .••:.•:. : . ; : : : ; : : ; :
НАЦИИ (ШЛЬЗОВлШЛН
В.Путин
И ПОСТАВЬ НА СВОЙ САЙТ!
предлагает
изменить NMW.HF1.RU
1L
J&J Ошибка ма странице.
Адрес. [@hltp://nw¥».web(o(u«.iii/ig1.ph(j
РосБизнесКонсалтинг | Новости | CNews | ГАЗЯТВ Утро | Спорт | Погооа | ТВ | Рабата j Почта [ Форум | Услуги | Ин фермер |*
UJEBFORUM.RU
•СЕРВИС КОНФЕРЕНЦИЙ:
по «ашмчу
s ».T.p)iittSe ль
поп ь зов ore л t> с к л й
Ж-ук^би.»» книга интерфейс
S t a n d a r t [тестовая версия) • больше вюэможмосп
Ю КЖЛАНА
Кликнув по этой кнопке. Вы сможете зарегистрироваться м )
создать тестовую (бесплатную) конференцию, чтобы
ознакомиться с возможностями системы WebFofum Plm.
| В.Путин Г LBN.Ri) ~|
предлагает
изменить .
систему
! власти
mEBFDRUM.RU
СЕРВИС КОНФЕРЕНЦИЙ
Адрес. |^http7/www.web(o!um.ru/reg1.php? I l l ШЛ Пе
НАШ | Й010СТИ СЕНЕМ
0e.09.29Ul Запущен
Webfoium Standard является основной моделью для построения
Регистрация всех форумов rfdWebfoium.ru. Главные преимущества конференций - WebFor
Webfoium Standard следующие: Plus, Вы можете заказ
Каталог ко нф ер «ниим>. или
Использование шаблонов для настройки дизайна не с кальке и мы совам
Настройка отдельных тех. параметров конференции ее АЛЯ вас!
- дизайн - по вашему
Размещение конференции в каталоге Webfoium
Стабильная и быстрая работа . - удобный, вариабвл»
Жалобная книга Форумы Webfoium Standaid являются бесплатными, но слева в
Ш РЕКЛАМА ' - '
конференции размещается баннер 12GxBG0.
^ Internet
.0.Дй Ш О Ш,
НАШИМ ПОШОЫШЛИ
Гпаяная 06.09.2*01 Запушен
Webfoium Slandaid является основной моделью для гюстроенм: сиряис ппаггмых
всех Форумов на Webfoium.ш. Главные преимущества мин^>ер«нций • WebFo
Webfoium Slandaid следующие: Plu». Вы м а ж и « хака
Каталог конференцию или
Примеры Использование шаблонов для настройки дизайна
Настройка отдельных тех. параметров конференции
Новости Размещение конференции в каталоге Webfoiuni
Стабильная и быстрая работа
шт
• ?|хП
MediaLand
Подьэоеатель:
in И
Пароль:
с
П Сохранить пароль
1 ок || Отмена 1
> Введите ваш пользовательский номер и пароль, которые вы получили при регистра-
ции, и нажмите кнопку ОК. В окно браузера загрузится страница для добавления фо-
рума (Рис. 8.71).
WebBoaid.ru - Microsoft Internet Explore! Bsi€3
Ф^айя Дравка ЕЗид Избранное Сервис £правка
Q Назад П о и с к
Из6
Раи»«>
mEBFDRUM.RU
ЬКСМЛАТИЫЕ
Логин: 34107
Логин: 3-4107
1. Без названия
Удалить этот Форум
(открывается в новом окне)
Время создания: 14-03-04 02:56 Дизайн. "Стандартный"
1
• Состояние: Акгивирован Адрес Форума: toto://webfMiim.land.m/wb.Dhp?boarth35817
Редактировать внешний вщ Форума
New! При выборе какого-либо Форума его параметры копируются во вновь создаваемый
1 ^ И . а р а н н о е «g* На.иа
РБК g П у т и н
i п р е д л а г а е т изменить
0ПОЧТа.1Ги Горячая почта власти в
Бесплатные Веб-конференции
О Hd
о»а а
Адрес; . ://«»« иеЫогшп ш/wb php?boaid-3581 7lf.=0luid-U H Перчсод |
РБК: В.Пцтин
Love is... систенц впасти в
стране
СраД-flTh Н Р В Ч Ю темч 1
Теперь, когда форумом можно пользоваться, необходимо на главную страницу вашего Web-
сайта вставить ссылку на адрес, присвоенный форуму при регистрации. Как сделать ссылку
с кнопки или текста было рассказано в главе о создании Web-страниц данной книги.
Администрируем форум
Чтобы поддерживать форум в рабочем состоянии, необходимо время от времени удалять
устаревшие и случайные сообщения.
> Введите в адресной строке браузера адрес http://www.webboard.ru. Откроется глав-
ная страница сайта (Рис. 8.65).
> Щелкните мышью на ссылке Вход для зарегистрированных пользователей.
На экране появится диалог для ввода пароля (Рис. 8.70).
> Введите имя и пароль и нажмите кнопку ОК. Загрузится страница с настройками фо-
рума (Рис. 8.75).
у Нажмите кнопку Удалить избранные сообщения. Откроется страница для удаления
сообщений (Рис. 8.76).
>• Отметьте флажками сообщения, которые необходимо удалить, и нажмите кнопку
Удалить отмеченные сообщения. Откроется страница с уведомлением об удалении
и оставшимися сообщениями (Рис. 8.77).
452 Создание Web-сайтов
• j Wtibboaid ш - Microsoft Internet Explwer
Правка Вид Избранное Сервис Справка
!—5 1 ] »
- j * j [ g | <& | р Пииск •£/Избранное <£> Медиа
HJEBFDRUM.RIJ
New! При выборе какого-либо Форума его параметры копируются во вновь создаваемый.
JEJ
] Вьитолнено. мо с ошибками иа странице. [ Q Inlfflnel
mEBFDRUM.RU t КОНФЕРЕНЦИИ
Ф
J ИГ
} Выполнено, но с ошибками на странице.
Сообщения удалены!
ГОТОБО
Создаем чат
Вот адреса некоторых российских служб, которые предлагают услуги бесплатных чатов
для персональных Web-сайтов:
• CHAT.ru (http://www.chat.ru)
• chats.RU (http://www.chats.ru)
• Япс1ех Народ (http://www.narod.ru)
Создадим чат для собственного сайта в системе ilndex Народ. О том, как зарегистриро-
ваться в системе .Hndex Народ, было подробно рассказано в опыте «Создание адреса ва-
шего сайта в Интернете» главы «Размещение страниц в Интернете».
> Наберите в адресной строке браузера адрес http://www.narod.ru. Загрузится главная
страница сайта Япс!ех Народ (Рис. 8.78).
>- Введите полученные при регистрации логин и пароль в поля ввода в правой верхней
части страницы и нажмите кнопку Войти. Вы попадете в раздел Мастерская сайта
Япс1ех Народ (Рис. 8.79).
454 Создание Web-сайтов
д
АРес; | & hKp://nar0d.yandex.ru/
ГТ7
Щ
Шж» Шшд
Мастерская 1>»ект:
тений •
• Главная
^ ф^йдамииНТМ^редактор #
•Про МЕНЯ
Доступ к ф а ^ а м п о FTP
Индексирование в поисковых систем»
Отддоченив б&ннсса
•Для фанатое и
поклонников
• Романтика Хостинг AQAVA m 100M6 отЦ/мес'ЗООМб от^7.3/мес Домвн ш com n a l o t y
Щ ЕЕСПЛАТНО1 НвогриоРШтоД трафик Поддержка COL PHP. MySQL i t k .
ЮРЛМАР/ЗМТР, в«6-по^та. Помошь в первносс сайта Специальное
газатаожйшм апяподьговмад^йHarod.ru • ' " " , - .
I&
ch<[.l]ei 91341471 «01 ЕЭЭ5в j 3 О г'=Ре»«» •
! •*«
Первая российская
онлайновая ролевая игра
Название чата [
Пароль (необязательно): £_
Подтверждение пароля Г"
О Отправлять e-mail при активизации чата
; Создать чат |
Дизайн
чг
> Заполните поле Название чата, установите флажок Отправлять e-mail при активи-
зации чата и нажмите кнопку Создать чат. В окно браузера загрузится страница
с адресом созданного чата (Рис. 8.81).
Г|
^gj^^ В
Чаш
Мастерская / Персональный чат Првект- Ge>i»n3jiarpdj'u
Изменения сохранены
Чтобы посетители вашей странички могли посетить ваш чат, необходимо вставить в одну из ваших страниц
ссылку на адрес: littp://naiod yandex.iWfhat'chatwentei-.xlitml?myrhat_id=-)9483902
Дизайн
J
6Г •
Рис. 8.81. Страница с адресом созданного чата
456 Создание Web-сайтов
На этой странице вы можете изменить название чата и пароль для входа в него.
Через некоторое время на указанный вами при регистрации электронный адрес придет
письмо с напоминанием идентификатора и пароля.
>• Запишите для себя пароль и адрес вашего чата, чтобы не забыть их.
Теперь зайдем на созданный чат.
• Щелкните мышью на ссылке Войти в чат (с возможностью администрирования)
или наберите в адресной строке браузера адрес вашего чата. Откроется страница, на
которой можно произвести настройки чата (Рис. 8.82).
QH— . | 0. ЦИ
Jj-j g ] Переход | Links
^ -
Вход в чат
Выберите; Участники
себе имя
Назван ие |
tornados (персональный)
чата 1
Цвет
b J
обновления' -
Количество
выводимых|20Д
строк
В Использовать JavaScript
т
Файл Правка Вид Избранное Сервис Справка
Участники: •
OPV
[Удалить I
j Штраф I
Hndex
[ Отправить |[ Обновить || Настройки | Выйти ]
представляют:
E
B i Готово
Удаление из чата - это, конечно, крайняя мера. Перед этим нарушающего правила поль-
зователя можно предупредить, «выписав» ему штраф. Штраф заключается в том, что
вход в чат для нарушителя будет закрыт на три дня. При отметке пользователя флажком
и нажатии кнопки Штраф, он получит уведомление о штрафе (Рис. 8.84).
Q И— • Q • S SI «ft | / W О
Адрес; Щ hHp://naiodyandeii:iu/chat/eiror.iiht»l?ShHaf=Uchalid-320fi24
Бас оштрафовал».
Вы оштрафованы администратором чата. До 17.09.2004 23:38 вход в чат для вас будет закрыт.
В каждом чате установлены свои правила, грубое или систематическое нарушение которых приводит к
штрафу. Ознакомьтесь, например, с правилами чата «Давай познакомимся» (эти правила также
рекомендуются для всех чатов на Narod.ru).
Б чате запрещается:
За соблюдением правил в чате следят администраторы. В случае нарушений участники чата могут быть
оштрафованы или удалены из чата. Администратором в чате выступает владелец сайта, на котором
находится чат. или координатор сообщества (если это чат сообщества).
Выйти
в Москве
• «Молодая гвардия» Б. Полянка ул., д. 28. М «Полянка»
• «Библио-Глобус» Мясницкая ул., д. 6. М «Лубянка»
• «Московский дом книги» Новый Арбат, д. 8
• «Торговый дом Москва» Тверская ул., д. 8. М «Тверская»
• МКТП «Мир» на Соколе Ленинградский пр-т, д. 78. М «Сокол»
• Магазин «Ладожский» Ладожская ул., д. 8. М «Бауманская»
• Магазин «Новый» шоссе Энтузиастов, д. 24/43.
М «Авиамоторная»
• «Дом книги в Медведково» Заревый пр-д, д. 12. М «Медведково»
• «Дом технической книги» Ленинский пр-т, д. 40.
М «Ленинский проспект»
• «Дом книги в Сокольниках» Русаковская ул., д. 27. М «Сокольники»
• «Музыкальный парк» Новочеркасский б-р, д. 41, к. 1. М «Марьино»
• Магазин «Русский Путь» - Нижняя Радищевская ул., д. 2.
М «Таганская»
• Сеть магазинов «Новый книжный»
в Санкт-Петербурге