Немного о графических редакторах

Существует множество графических редакторов. Из них для WEB-дизайнера могут представлять ин­терес лишь некоторые.

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

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

Начну с Xara WEB Style. Здесь много шаблонов двумерных и трехмерных заголовков, кнопок, ука­зателей, разделителей и текстур.

Вы можете взять любой понравившейся шаблон и поэкспериментировать с ним: поменять цветовую гамму, убрать или наложить тень, сменить шрифт, поменять размер, сохранить как свой шаблон и, конечно же, сохранить для самой страницы в фор­мате GIF или JPEG. Она не требует специфичных знаний, достаточно лишь грамотно подобрать цве­та (чтобы не было аляповатости или не резала глаз их несовместимость).

ЗБ-графику также можно создавать с помощью специализированных программ. Они тоже весьма просты в использовании и не требуют специальных знаний. Я говорю о Хага 3D и Ulead Cool 3D.

Обе эти программы предлагают множество шаб­лонов. Эти шаблоны также можно редактировать под свои нужды: изменять шрифт, цветовую гам­му, располагать под разным углом и менять сам вид букв.

Ulead Cool 3D имеет шаблоны не только на текст, но и на разные картинки, кнопки. Но един­ственное что в нем нельзя изменить, так это фон. Все всегда располагается только на черном фоне. Конечно, можно сказать, что фон — это какая-то текстура из его коллекции (есть и такое), но тогда заголовок необходимо сохранять в формате JPEG. Также Ulead Cool 3D позволяет создавать анима­ции. Возможности редактора в этом весьма неогра-ничены.

Хага 3D будет немного посложнее, но лишь в об­ласти настройки вида самого текста. Текст можно поворачивать под разными углами, крутить вокруг своей оси. Можно поиграться с источниками осве­щения. Одним словом, простор для фантазии этот редактор не ограничивает.

Вместе с Microsoft FrontPage 98 в одном пакете поставляется и графический редактор — Microsoft Image Composer. У него много разных возможнос­тей, он хорош для начинающих в графике тем, что не требует абсолютно никаких знаний. Достаточно разобраться в механизме работы с ним, и можно создавать простые заголовки и кнопки.

Упрощенный по сравнению с Adobe Photoshop графический редактор — это PaintShop Pro фир­мы Jasc. Последняя его версия, б-я, стала еще бо­лее продвинутой. Теперь в нем появились слои, ко­торые позволяют, создавать сложную графику с легким ее изменением, размещая отдельные эле-

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

На мой взгляд, Adobe Photoshop — наиболее удобный и милый редактор для создания всевоз­можной графики. А версия 5.5 — мечта каждого дизайнера. Хотя обещанная компанией Adobe вер­сия 6.0 обещает предоставить еще больше удобств для WEB-разработчиков.

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

Инструментов у него множество. Этим он увели­чивает возможность обработки любой графики до невозможного.

А если к нему подключить и сторонние фильт­ры... И такое Adobe Photoshop поддерживает. Луч­ший набор фильтров для дизайнеров — это фильт­ры Ulead (Art.Plugln, Type.Plugln, WEB.Plugln и другие), фильтры Extensis (Mask Pro, Intellihance, PhotoFrame, PhotoGraphics, PhotoTools) и многие другие.

Есть у него и возможность создавать операции — Actions. Тем самым редактор позволяет механизи­ровать процесс создания графики. В Microsoft Word этому соответствует такое понятие, как макрос.

И чего нет у других редакторов, палитра History (История). Теперь можно экспериментировать.над картинкой сколько угодно, а зайдя в History, отме­нить до 20 произведенных операций (если, конеч­но, не настроить в опциях это число по умолчанию на свое, большее).

Для создания анимаций используются разнооб­разные редакторы. Я отмечу лишь три.

Animator Shop фирмы Jasc идет в одном пакете с PaintShop Pro, начиная с версии 5.0. Позволяет создавать достаточно оригинальные анимашки. У аниматора для этого существуют разные эффекты, причем каждый эффект сопровождается кратким описанием и демонстрацией типа «что получится, если вы примените сей эффект». Также он позволя­ет менять размер уже существующей анимации, уменьшать число кадров в анимации. Один лишь недостаток — качество сохраняемой графики очень посредственное.

Ulead GIF Animator версии 4.0 — мечта любо­го дизайнера. Предыдущие версии тоже были не­плохи, но эта — нечто!

Очень удобный дизайн редактора — все на своих местах, наглядно. Можно создать анимацию из су­ществующих кадров; любой из кадров можно отре­дактировать в GIF Animator, если возникает в том необходимость; произвести оптимизацию создавае­мой анимации и посмотреть, что получится. Для этого служат закладки в центральном окне — Compose, Edit, Optimize, Preview. Можно существу­ющую палитру, которую предлагает аниматор, за­менить, а можно добавить свою (палитру эту мож­но создать, например, в Adobe Photoshop, в кото­ром создавался кадр анимации). У него свой набор эффектов, не менее оригинальных (если сравнивать с Animator Shop).

Самое большое достоинство GIF Animatora — очень удобный интерфейс.

И простенький аниматор — Animagic GIF Animator. Минимум возможностей, но очень прост в использовании.

Глава 29

Несколько слов о цвете в web-дизайне

От выбора правильной цветовой схемы для ва­шей WEB-публикации зависит многое и в первую очередь именно популярность вашего творения. Достигнуть цветовой гармонии не просто. Но имен­но применяемые цветовые схемы влияют на наст­роение ваших посетителей, привлекая их к стра­ничке или отталкивая от нее.

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

Отчего стоит отталкиваться? В первую очередь от того, для кого — какой аудитории — вы созда­ете вашу WEB-страничку. Например, яркие оттен­ки красного, желтого и синего предназначаются для маленьких детей. А светлые оттенки желтого и зеленого в комбинации с голубым и белым подчер­кивают обновление, живость и оптимизм.

И не следует забывать, что каждый человек об­ладает своим, субъективным восприятием. У раз­ных людей разнятся не только любимые цвета, но и ощущения, связанные с тем или иным цветом.

Лучший пример этого, как мне кажется, соот­ветствие цветов и знаков Зодиака: человек интуи-

---------------------------------- 204------------------------------------

тивно предрасположен к своему цвету. Так счита­ют астрологи. А вот какое соответствие они пред­лагают:

• Овен — красный цвет;

• Телец — светло-зеленый;

• Близнецы — все цвета радуги;

• Лев — оранжевый, желтый и белый;

• Девы — синий;

• Весы — темно-зеленый;

• Скорпион — пурпурный;

• Стрелец — все цвета радуги;

• Козерог — белый, черный, лиловый;

• Водолей — фиолетовый;

• Рыбы — сине-зеленый;

• Рак — зеленый.

Не стоит забывать и о том, какое физическое воздействие оказывает тот или иной цвет на чело­века. Возбуждающе действуют красный, оранже­вый и желтый; угнетающе — фиолетовый, темно-серый, черный; успокаивающе — зеленый и голу­бой.

Красный цвет мы воспринимаем как наиболее действенный, активный. Светлые его оттенки дей­ствуют возбуждающе и наступательно, а темные, наоборот, серьезно и солидно.

Оранжевый сопутствует тщеславию.

А желтый активизирует умственную деятель­ность человека. Зато зеленовато-желтый и серо-желтый представляют собой символы зависти, из­мены, фальши.

---------------------------------- 205------------------------------------

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

Голубой считается холодным цветом и в боль­шом количестве вызывает лень, апатию, равноду­шие. Становясь синим, вызывает серьезность, стро­гость в поведении. Темно-синий зовет человека к бесконечному, будит в нем голод к чистоте и сверх­чувственному. Чем темнее становится синий, тем больший покой дает он.

Фиолетовый обладает большей выразительнос­тью и глубиной, настраивая на роскошный, торже-стенный лад. Но в большом количестве вызывает меланхолию, но легко подавляется другими цвета­ми. А вот розовый вызывает лирическое настрое­ние.

Серый цвет (наиболее популярен в WEB-дизай-не) является равновесной точкой между белым и черным. Он абсолютно нейтрален.

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

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

Не все эти цвета хорошо сочетаются друг с дру­гом. При комбинации цветов часто рождается боль-

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

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

Роль WEB-дизайнеров сводится к тому, чтобы при украшении виртуальных апартаментов добить­ся гармонии между всеми элементами страниц. Графическая тема составляется из множества эле­ментов — это и фон (background), заголовки как графические, так и текстовые, кнопки, маркеры, разделители, фотографии и рисунки, которые все вместе должны обеспечить согласованный, прият­ный глазу посетителя вид. Цвета в графической те­ме должны гармонировать друг с другом, не вызы­вать диссонанса (если, конечно, именно это и хочет получить дизайнер-авангардист).

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

Начнем с фона. На фоне, именно на нем, распо­лагаются все остальные элементы графической те­мы, а также и текст страниц. Первое, основопола­гающее правило: цвет фона (он может быть один,

может быть набором цветов с наличием преоблада­ющего) должен контрастировать с цветом текста. Чтобы посетитель не был вынужден сидеть и раз­бирать по буковке — а что же там написано. Когда вы используете в качестве фона какую-то свою кар­тинку, то вы должны обеспечить:

• цвет заднего плана у backgrounds, близким к основному цвету этой картинки;

• «бесшовность» вашей картинки, т. е. у посети­теля не должно создаваться впечатление, что ваш background состоит из плиток;

• идеальность фона, т. е. фон должен становить­ся относительно незаметным при просмотре страниц.

Кроме фона немаловажную роль играет цвет ос­тальных элементов.

Что касается заголовков, текста и гиперссылок — они должны быть заметны на фоне. Заголовки — чтобы бросаться в глаза посетителя, завлекать и привлекать. Текст — чтобы посетитель мог легко читать его. То же самое касается и гиперссылок — они должны быть легко заметны не только на фо­не, но и посреди текста. Это достигается примене­нием цвета, отличного от цвета текста, но гармони­рующего с ним. И еще — цвет гиперссылок должен быть таким, чтобы они были заметны на фоне.

Кнопки и маркеры могут быть как контрастны­ми к фону страницы, так и чуть-чуть отличимыми от него (т. е. или немного темнее, или немного светлее). Тут уж все зависит от того, чего хочет сам WEB-д изайнер.

Глава 30

Делаем наш первый сайт

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

В качестве примера сайта возьмем предпослед­ний дизайн моей персональной страницы «СЕЛЕ­НА» (http://selena.uralnet.ru).

Структура моей персональной страницы следую­щая:

• стартовая страница с приветствием;
•страница «Обо мне»;

•страница «Хобби»;

•страница «Знания»;

•набор страниц «Портфолио»;

• ссылка e-mail;

•страницы «Гостевая книга».

Поскольку моя страница сделана по типу резю­ме, то именно такие разделы я посчитала нужным на ней поместить.

---------------------------------- 209------------------------------------

В качестве примера мы рассмотрим создание стартовой страницы и страницы «Хобби». Также мы ознакомимся с принципом создания «Гостевой книги».

Сразу же хочу заметить: вид вашей персональ­ной страницы, что на ней будет (какие страницы и тексты) — вы придумаете сами. Я же, чтобы озна­комить вас с процессом создания сайта во FrontPage, за основу возьму свою персональную страницу.

Структура всех страниц одинакова:

• «шапка» сайта (рис. 129);

• текстовая часть;

• подпись.

Как вы видите, в «шапке» сайта я посчитала вы­годным совместить название (заголовок) самого сайта (моей персональной страницы) и названий страниц, составляющих сайт, — так сказать, меню для перемещения по ряду страниц, составляющих сайт.

Кроме того, нам еще понадобится текстура (bkg.gif) — графический файл, в котором располо­жена картинка, которой мы зальем фон наших страниц (рис. 130). На стартовой странице также располагается картинка (selena.gif) — мой порт­рет (рис. 130). В странице «Хобби» мы создадим маркированный список — для него нам понадо-

бится маркер. В его качестве мы будем использо­вать сделанный нами графический символ bul-let.gif (рис. 130).

Поскольку в книге все картинки нецветные, за­мечу лишь, что в качестве основной цветовой гам­мы использован голубой цвет и его оттенки.

Теперь определимся с текстами. Для стартовой страницы я использовала следующий текст:

Мне нравится создавать WWW-публикации. Для меня это лучшая возможность выразить свой внутренний мир, свое настроение. Да и сидеть без дела или просто долго отдыхать я не могу. ' Именно поэтому мне нравится моя "дополнительная работа", на которую я трачу вечера, выходные и отпуск. В моем виртуальном домике Вы найдете информацию обо мне и моих работах. Приятного Вам плавания!

а для страницы «Хобби» —

Мне нравится читать книги. Большим
преимуществом перед остальными жанрами
обладает ФАНТАСТИКА. Потом следуют Детектив,
---------------------------------- 211------------------------------------

Историко-приключенческие. Поэзия совсем по-

настроению.

В жанре Фантастика мои любимые авторы - это:

Айзек Азимов, Клиффорд Саймак, Джон Уиндем,

Роджер Желязны, Саймон Грин, Урсула Ле Гуин,

Пол Андерсон, Альфред Бестер, Кейт Лаумер,

братья Стругацкие, Андрей Белянин, Иван

Ефремов.

Писатели детективов, которых я ценю:

Агата Кристи, Эдгар Уоллес, Эллис Питере,

Роберт ван Гулик, Джон Кризи.

Историко-приключенческие романы интересно

читать мне у - Генри Хаггарда, Вальтера

Скотта, Александра Дюма, Генриха Манна.

Ну а стихи - Сергея Есенина, Михаила

Лермонтова, Александра Фета.

Из музыки я предпочитаю Rock'n'Roll. Все мои

любимцы - это группы и исполнители 60-70-х

годов. Именно в те времена, как мне кажется,

появились настоящие монстры (в хорошем смысле

слова) музыки.

The Rolling Stones, David Bowie, Led Zeppelin,

Sweet, Ritchie Blackmore, Elton John, Smokie,

Сергей Захаров, Воскресенье, ЧайФ, Машина

времени, Юрий Антонов.

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

Первым делом мы запускаем FrontPage 2000 (его вы найдете в панели «Программы», если на­жмете кнопку «Старт»). На экране монитора мы увидим редактор FrontPage (рис. 122).

Теперь мы создаем наш WEB-сайт, который бу­
дет располагаться локально (на компьютере, за ко­
торым мы сидим). Для этого в меню «File» выбира-
---------------------------------- 212------------------------------------

ем опцию «New». Редактор предлагает создать но­вую страницу на основе шаблонов («Page») или но­вый WEB-сайт, используя готовые конструкции («Web»). Мы выбираем опцию «Web».

Редактор загружает окно, в котором предлагает нам выбрать конструкцию создаваемого сайта (рис. 131). Мы выберем шаблон «One Page Web» — со­здать новый WEB-сайт с одной пустой страницей.

Среди прочих конструкции FrontPage предлага­ет также:

• Empty Web — создать пустой WEB-сайт (без единого html-файла);

• Personal Web — шаблон вашего персонально­го сайта с шаблонами страниц ваших интере­сов, фотоальбома и ссылок на любимые сайты;

• Corporate Presence Wizard — мастер создания сайта-презентации вашей компании (FrontPage

---------------------------------- 213------------------------------------

предлагает в несколько шагов сформировать структуру такого сайта путем ответа на ряд во­просов);

• Discussion Wizard — мастер создания сайта-
конференции с необходимыми страницами,
оглавлением и полнотекстовой поисковой сис­
темой.

Также в этом окне (рис. 131) он предлагает вве­сти имени вашего сайта в строке «Specify the loca­tion on the new web». Обратите внимание, что сама строка;, предлагаемая FrontPage по умолчанию, со­стоит из трех элементов:

• типа протокола (заканчивается двоеточием и двумя косыми чертами —://);

• имени компьютера (заканчивается косой чер­той — /);

• имени сайта.

Редактор предлагает нам протокол http — про­токол доступа к WEB-страницам. Этот элемент мы не трогаем. Я сижу за компьютером, который зовут «aloha», поэтому значение элемента «имя компью­тера», правильное для меня, — «aloha». А как зо­вут ваш компьютер? Ведь именно это имя укажет редактор в качестве значения элемента «имя ком­пьютера». И этот элемент мы оставляем без изме­нений. FrontPage предлагает в качестве имени сай­та имя «myweb». Вот его мы и заменяем на имя «test».

Теперь будет достаточно ввести в строке запроса URL браузера этот адрес (для моего компьютера — http://aloha/test) и нажать кнопку «ОК». Теперь редактор будет создавать наш сайт (рис. 132)

Итак, наш WEB-сайт «test» создан. Однако пока мы не обеспечим хотя бы index.htm, браузер будет сообщать нам об ошибке — отсутствии файла. Что ж, сохраним пустую страницу, созданную редакто­ром как index.htm.

В меню «File» выберем опцию «Save as...» (рис. 133). В строке «File name» введем текст:

index.htm

Чтобы исправить заголовок страницы (этот за­головок будет отображаться в заголовке браузера перед именем самого браузера), нажмем кнопку «Change...» и в появившемся окошке введем текст:

Персональная страница

Не забудем и добавить уже готовую графику в каталог images. Скопируем графику в буфер обме­на Windows и, кликнув правой кнопкой мыши по названию images в дереве сайта (окно редактора

---------------------------------- 215------------------------------------

Folder List), получим контекстное меню. Выберем опцию Paste, и графика добавлена в наш проект.

Рис. 133

Если окно Folder List отсутствует в вашем редак­торе, то войдите в меню «View» и выберите опцию «Folder List». В этом окне FrontPage показывает дерево вашего сайта.

Рассмотрим, из чего состоит FrontPage. Его со­ставляют, кроме меню и панели инструментов, три окна:

• окно Views (слева) — позволяет переключать­
ся между задачами. FrontPage поддерживает
следующие задачи (все или большую часть вы
обязательно используете в процессе создания
сайта, однако далее мы не будем останавли­
ваться на них):

• Page — режим редактирования html-стра-ниц (он сейчас активен),

• Folders — режим работы с каталогами на­шего WEB-сайта. Да, любой WEB-сайт — это набор файлов (текстовых и графичес­ких), которые еще можно разложить по ка­талогам,

• Reports — редактор представляет общий отчет о состоянии разрабатываемого WEB-сайта,

• Navigation — рисует структурную схему
■ сайта,

• Hyperlinks — выводит состояние всех ссы­лок, используемых на страницах сайта,

• Tasks — используется, когда работу над сайтом ведут несколько человек;

• окно Folder List — в нем отрисовывается
структура нашего WEB-сайта;

• окно с именем текущего редактируемого фай­ла. В этом окне, внизу, вы увидите три заклад­ки:

• Normal — режим работы WYSWYG (имен­но о работе в нем мы и будем говорить),

• HTML — режим работы прямо с кодом HTML (тегами и текстами), то есть само программирование,

• Preview — режим быстрого просмотра на­шей страницы: так она будет отображаться в браузере.

Давайте еще раз внимательно взглянем на окно редактора FrontPage. Мы видим, что меню редак­тора и панель инструментов мало отличаются от тех же меню и панели инструментов часто исполь­зуемого текстового редактора Windows Word. Ос­новные меню и кнопки, которые мы будем исполь­зовать для создания наших гипертекстовых доку­ментов, те же самые, что мы использовали в Windows Word для редактирования текста. Поэто­му я лишь буду говорить о названии кнопок пане­ли инструментов и дороге к нужной опции через меню.

Что ж, теперь можно начать заполнять наши страницы.

Глава 31

Использование графики, цвета и текста

Первым делом мы установим на нашей страни­це фон и зададим основные цвета текста и ссы­лок.

Фон нашей страницы может состоять либо из холста, либо из комбинации холст-текстура. Холст — это цвет вашей страницы в браузере. Вы его можете не изменять, надеясь на то, что посети­тель Интернета пользуется стандартной схемой Windows (в ней он белый). Но все же рекомендует­ся установить его самому, чтобы избежать недора­зумений, когда цвет холста посетителя вашего сай­та окажется одним цветом с цветом текста вашей страницы. Однако когда вы используете текстуру, вы должны цвет холста установить очень близким к преобладающему цвету в вашей текстуре.

Зайдем в меню «Format» и выберем опцию «Background». В открывшемся окне (рис. 135) включим опцию «Background Picture» и нажмем кнопку «Browse...». В открывшемся окне войдем в каталог images и выберем файл bkg.gif, нажмем кнопку «ОК». Файл, содержащий текстуру, мы подключили к нашему гипертекстовому документу.

---------------------------------- 219------------------------------------

Мы можем включить опцию «Watermark», если хотим, чтобы наша текстура оставалась неподвиж­ной, в то время как текст перемещался в результа­те прокрутки страницы.

Теперь отстроим цвета — «Colors». Они должны хорошо читаться на используемой нами текстуре (а значит, и холсте). Мы настраиваем следующие па­раметры:

• Background — задаем цвет холста;

• Text — задаем цвет текста на странице;

• Hyperlink, Visited Hyperlink, Active Hyperlink — определяем цвет ссылок.

Нажав на стрелку вниз в каждом из этих пара­метров, мы получим контекстное меню, в котором

увидим:

---------------------------------- 220------------------------------------

• Standard colors — 16 основных цветов;

• Document's colors — уже выбранные нами дру­гие цвета;

• «More colors...» — возможность перейти в ок­но с расширенной цветовой гаммой.

Что ж, текстуру мы разместили, основные цве­та страницы мы настроили. Теперь по центру стра­ницы разместим «шапку» гипертекстового доку­мента.

Любой элемент страницы, будь то текст или гра­фика, можно выровнять влево, вправо, сцентрить. Это позволяют сделать инструменты форматирова­ния FrontPage (они находятся в панели инструмен­тов редактора или можно загрузить окно настрой­ки абзаца через меню «Format» опцию «Para­graph»), те же самые, что мы используем в редак­торе Windows Word для выравнивания текста и картинок.

В меню «Insert» выберем опцию «Picture». Она предложит воспользоваться коллекцией графики Microsoft Office («Clip Art») или разместить гра­фический файл («From File»). Выберем пункт «From File». Более короткий путь к тому же окну выбора файлов лежит через кнопку «Insert Picture From File», находящуюся на панели инструментов редактора.

Итак, мы получили окно «Picture», приглашаю­щее нас выбрать файл (рис. 136). Выделяем файл «titul-map.gif» и нажимаем кнопку «ОК». Теперь на нашей странице появилась «шапка» — заголо­вок сайта, совмещенный с картой.

В контекстном меню этой картинки выберем оп­цию «Picture Properties...» (рис. 137, 138).

В закладке General в поле «Text» введем назва­ние картинки:

Заголовок и карта сайта

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

В закладке Appearance укажем тип выравнива­ния картинки: установим значение «Alignment» в «Absmiddle» (выравнивать по центру одновременно по горизонтали и по вертикали).

Теперь дошла очередь и до текста. При вводе текста мы можем использовать:

• клавишу «Enter» — один абзац от другого бу­дет отделяться (между ними вы увидите немно­го пустого пространства);

• комбинацией клавиш «Shift-Enter» — новый абзац будет сразу идти за предшествующим.

Вводимый текст для этой страницы мы сцент-рим, для чего нажмем на кнопку «Center» в пане­ли инструментов.

Выделим весь текст и либо в контекстном меню, либо в меню «Format» выберем опцию «Font...». В появившемся окне (рис. 139) выберем шрифт Arial (параметр «Font») и размер в 12 пунктов (12 pt, па­раметр «Size»).

Здесь также можно изменить цвет символов (па­раметр «Color») и стиль написания (параметр «Font Style»). Что мы и сделаем для строчки «Приятного Вам плавания!».

Также FrontPage позволяет применить эффекты к выводимым символам (параметр «Effects»).

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

Размещение картинки selena.gif ничем не отли­чается от вставки на страницу «шапки». Размещая курсор в начале первого абзаца и используя меню или панель инструментов, добавим на страницу картинку. В свойствах этой картинки («Picture Properties...») в закладке Appearance значение па­раметра «Alignment» установим в «left». Весь текст будет выровнен относительно картинки спра­ва, а сама картинка будет располагаться слева.

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

А я лишь коротко охарактеризую основные па­раметры «Alignment»:

• left, right — разместить картинку слева или
справа относительно текста;

* top, texttop — строчка текста абзаца, перед ко­
торой была размещена картинка, располагает­
ся вверху, остальной текст этого абзаца идет
после картинки;

---------------------------------- 225------------------------------------

• middle, absmiddle, center — та же строчка того же абзаца располагается уже посередине кар­тинки;

• bottom, absbottom — та же строчка того же аб­заца располагается внизу картинки.

Теперь разместим альтернативную область ссы­лок. Для этого введем следующую строку:

Сцентрим ее и в качестве шрифта (окно Font) укажем Courier New размером 10 pt. Альтерна­тивная область ссылок сформирована. Зачем она нужна, я расскажу в главе «Гипертекстовые ссыл­ки».

Теперь перейдем к созданию подписи. Мы ее ог­раничим двумя разделителями. А в качестве под­писи используем строку:

В этой строке я указываю свое имя (ник), свой электронный адрес, по которому можно со мной связаться, и год или года существования страницы. 1998—2000 в моем примере означают, что страница была создана в 1998 году и изменялась (обновля­лась графика, информация) до 2000 года включи­тельно.

Размещаем первый разделитель, для чего в ме­ню «Insert» выберем опцию «Horizontal Line». FrontPage размещает на странице линию. Изменим ее немного: в контекстном меню выберем опцию «Horizontal Line Properties...» и в появившемся окошке (рис. 140) изменим:

------------------------------------------- 226---------------------------------------------

• устанавливаем длину линии в 500 пикселов (можно и в процентах. Например, 80 percent of window означает, что длина линии будет со­ставлять 80% от ширины окна браузера);

• выровняем посередине: параметр «Alignment» установим в значение «Center»;

• изменим цвет и включим опцию «Solid Line».

Теперь введем текст подписи и изменим шрифт и цвет. Воспользовавшись окном Font, изменим шрифт на Courier New и размер установим в 10 pt. Цвет сделаем светло-синим.

И вновь добавляем разделитель. Теперь нам нет
нужды его редактировать — FrontPage запомнил
наши установки и разместил на странице раздели­
тель, полностью совпадающий с предыдущим.
---------------------------------- 227------------------------------------

Страница, вообще-то, готова. Однако у нее есть маленький недостаток. В то время как длина «шап­ки» фиксирована, текст может показываться по-разному на разных разрешениях мониторов (речь идет о наиболее популярных в данный момент: 800x600 и 1024x768). Чтобы этого не происходило, давайте занесем текст в таблицу фиксированной ширины — 600 пикселов.

Для этого нажмем на кнопку «Insert Table» и укажем, что в нашей таблице всего одна строка и одна ячейка. Затем в контекстном меню выберем опцию «Table Properties» (рис. 141)

Произведем изменение следующих параметров по умолчанию:

• в разделе «Layout» значение «Alignment» уста­новим в «Center»;

• в разделе «Layout» в опции «Specify Width» переключатель установим в строку «In pixels» и в окошке введем значение «600»;

• в разделе «Borders» значение параметра «Size» установим в ноль — тем самым мы получим таблицу с невидимыми границами.

Мы сформировали нужную нам таблицу. Теперь выделяем весь текст и просто втаскиваем в эту таб­лицу.

Все — стартовая страница закончена:

Процесс создания страницы «Хобби» почти не отличается от создания стартовой страницы. Одна­ко стоит обратить внимание на следующее: FrontPage предлагает уже готовые шаблоны стра­ниц. Этим стоит воспользоваться и при создании страницы «Хобби».

Зайдем в меню «File» в опцию «New» — выбе­рем «Page». Редактор предлагает нам свою боль­шую подборку (рис. 143).

Мы остановимся на шаблоне «Wide Body with Headings» — шаблон создания форматированного текста с заголовками (рис. 144).

В эту страницу нам нужно будет лишь внести не­которые изменения, как то:

• добавить текстуру и «шапку»;

• отредактировать текст;

• сформировать заголовки самой страницы и подзаголовки;

• добавить альтернативную область ссылок и подпись.

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

Bo FrontPage есть возможность создания спис­ков. Списки — это инструмент структурирования текста, позволяющий подать материал более на­глядно и эффективно.

Существует несколько видов списков. Из них на­ибольшей популярностью пользуются:

• нумерованные списки;

• маркированные списки;

• списки определений.

Нумерованные списки служат для вывода стро­чек текста, которым предшествуют числовые или буквенные значения, нумирующие эти строчки по порядку.

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

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

Давайте сделаем маркированный список из имен музыкантов. Каждое имя мы напишем в новой строке, причем строки одна от другой отделяются клавишей «Enter» (обратите внимание). Выделим весь список и в меню «Format» выберем опцию «Bullets and Numbering...». В появившемся окне в закладке Picture Bullets в разделе «Picture» пере­ключим на опцию «Specify picture:» и нажмем

---------------------------------- 232------------------------------------

кнопку «Browse...». Из списка каталога images вы­берем файл bullet.gif и нажмем «ОК>> (рис. 145).

Глава 32

Гипертекстовые ссылки

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

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

Существует и частный способ реализации гипер­текстовых ссылок: использование точек привязки (bookmark). Они позволяют вам предоставлять ин­формацию, разбитую на части или логические об­ласти. Такие точки привязки чаще всего использу­ются тогда, когда информация, выложенная на странице, достаточно объемна и разбивать ее на не­сколько страниц нецелесообразно.

Такая информация бьется на несколько логичес­ких областей (частей), возле которых проставляют­ся точки привязки. В начале или конце такого до-

кумента располагаются ссылки на эти точки при­вязки. Вот такой подход.

Давайте начнем более подробное знакомство с гипертекстовыми ссылками с размещения на стра­нице «Хобби» точек привязки — bookmarks.

Эту страницу мы можем разбить на две логичес­кие области:

• область 1 — Литература;

• область 2 — Музыка.

Именно это мы и пишем в пустой строке после заголовка страницы (рис. 146):

Литература | Музыка

Теперь проименуем эти две области. Для этого установим курсор в строке «Литература» (это тре­тья строчка в нашей таблице) и в меню «Insert» выберем опцию «Bookmark». Мы получим окно Bookmark (рис. 147).

В строке «Bookmark name:» введем имя области

Liter

и нажмем кнопку «ОК». Рядом со словом «Литера­тура» появится флажок:

Литература

Рис. 148 Флажок — указатель именованной области.

Повторим то же самое, установив курсор в стро­ке «Музыка». Эту область мы назовем

Music

Логические области мы создали и обименовали. Создадим ссылки на эти области. Для этого ис­пользуем введенный нами текст во второй строке таблицы.

Установим курсор в слове «Литература» (можно его выделить) и нажмем на кнопку «Hyperlink» в панели инструментов (рис. 149). Можно получить то же самое окно, если войти в меню «Insert» и вы­брать опцию «Hyperlink...».

В этом окне мы увидим перечень файлов. Теку­щий файл (с которым мы сейчас работаем) выделен и прописан в строке «URL».

Поскольку нам нужно задать Bookmark, мы в разделе «Options» устанавливаем значение параме­тру «Bookmark», выбирая из предложенного спис­ка имен логических областей имя «Liter». И гово­рим «ОК». Точно так же создаем ссылку для слова «Музыка».

Итак, ссылки для перемещения по логическим областям мы создали (рис. 150).

---------------------------------- 236------------------------------------

Используя ту же самую кнопку, можно сформи­ровать относительные и внешние ссылки.

Чтобы сформировать относительные ссылки, нужно выбрать имя файла, на который вы хотите сослаться. Для этого просто выделите имя нужного html-файла в списке. Это имя вы увидите в строке «URL». Параметр «Bookmark» вам устанавливать не нужно.

Давайте сформируем ссылку на страницу «Хоб­
би» на стартовой странице. Выделим слово «Хоб­
би» и нажмем кнопку «Hyperlink». В появившем-
---------------------------------- 237-------------- ■-------------------

ся окне (рис. 150) выделим имя файла hobbies.htm и нажмем кнопку «ОК». Ссылка создана.

Чтобы превратить кнопку в ссылку, нужно вы­делить кнопку (картинку) и повторить тот же на­бор действий. Если вы не хотите, чтобы ваша ссылка-картинка имела бордюр вокруг себя, в свойствах картинки в закладке «Appearance» (рис. 138) укажите параметру «Border...» значе­ние «0».

Если вам нужно сформировать ссылку на ваш e-mail, нажмите третью кнопку от строки «URL» (на этой кнопке изображен конверт, подпись «Make a hyperlink that sends E-mail»). В возникшем окош­ке вам всего лишь нужно будет ввести адрес ваше­го e-mail.

Давайте превратим фразу «E-mail» в ссылку. В окне Create Hyperlink нажмем на кнопку «Make a hyperlink that sends E-mail». В возникшем окошке (рис. 151) введем наш e-mail. Большая просьба — когда будете создавать свою страницу, не исполь­зуйте мой e-mail. Используйте свой!

Также вы можете сформировать ссылку на еще не созданный файл — в этом вам поможет четвер­тая кнопка (на ней изображен лист с отогнутым уголком, подпись «Create a page and link to the new page»). Она загрузит окно New с шаблонами гипер­текстовых документов.

Чтобы подключить какой-то текстовый доку­мент (файл) к вашей странице, вам нужно нажать на вторую кнопку (на ней изображена папка с лин­зой, подпись). После нажания на эту кнопку, за­грузится окно Select File, в котором, перемещаясь по дискам и каталогам на вашем компьютере, вы выбираете нужный вам файл (рис. 152)

Давайте создадим внешнюю ссылку на другой ёдйт. Для этого на странице в конце строки альтер­нативного меню добавим перенос комбинацией клавиш <Shift-Enter> и словосочетание:

Лучшая поисковая система

Выделим это словосочетание и нажмем кнопку «Hyperlink». В появившемся окне (рис. 150) в стро­ке URL после текста «http://» введем:

www.yandex.ru

О параметре «Target name» раздела «Options» (рис. 150) мы подробно поговорим в главе, посвя­щенной Image Map.

На закуску я расскажу немного о принципах формирования ссылок.

В любом случае, будь то текстовая ссылка, будь то графическая, вам очень тщательно нужно выби­рать фразу, которую вы сделаете ссылкой. Если вы формируете ссылки по странице в виде кнопок, то название такой ссылки может состоять из одного слова, реже двух (но тогда они должны образовы­вать словосочетание, например, «Обо мне»). В кнопках вы можете перед текстом размещать ма­ленькие картинки — иконки, поясняющие назна­чение ваших ссылок.

Если вы создаете текстовые ссылки, то в их ка­честве вы можете использовать как одно слово (или словосочетание), так и целое предложение. Однако фразы, образующие текст вашей ссылки, должны быть короткими, емкими и меткими. Они должны привлекать пользователя, вынуждая его нажать на ссылку. Нет ничего хуже, нежели использование в качестве ссылки фразы «Щелкните здесь». Увидев

такую фразу, посетитель вашей страницы думает: «А зачем мне щелкать здесь? Куда я попаду?»

Немного сложнее будет подобрать фразу для кнопки — графический текст вынуждает писать фразы как можно короче. А значит, их нужно под­бирать еще тщательнее. Зато, используя строчку «Text» в закладке General окна Picture Properties (рис. 137), вы можете написать текст, разъясняю­щий, куда ведет эта ссылка.

Что предпочесть, графику или текст, вам нужно решить самому, исходя из назначения вашей стра­ницы и выбранного стиля ее оформления. Если вы используете графические ссылки, то их лучше вам продублировать текстовыми аналогами, располо­женными внизу страницы. Как мы сделали это на стартовой странице и странице «Хобби». Это не займет много времени, зато покажет посетителю ваших страниц, что вы заботитесь о нем.

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

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

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

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

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

Такая навигационная панель может представ­лять собой:

• графическую карту, продублированную одно­именными текстовыми ссылками, выводящи­ми на те же страницы;

• текстовый блок, оформленный с использовани­ем таблицы.

Графическая карта может быть узкой горизон­тальной полоской, вертикальным прямоугольни­ком, где ссылки расположены одна под другой, или «шапкой» сайта, совмещая в себе логотип сай­та, название и основные ссылки.

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

Глава 33 Добавляем фреймы

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

Но мы рассматривали процесс создания страниц без использования фреймов (кадров).

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

Такой подход позволяет уменьшить время, затра­чиваемое браузером на перерисовку страницы. В чем это проявляется? Любая WEB-страница, кроме статической области, содержит и динамически об­новляемую. Статическая область — это блок нави­гации по сайту (например, навигационная панель; в нашем примере — «шапка» сайта). Динамически обновляемая часть страницы — эта область инфор­мации, меняющаяся от страницы к странице. Та­кую страницу можно разбить на два кадра:

• статистический, в котором будет находиться блок навигации по сайту;

• динамически обновляемый, который составят ряд страниц с разной информацией и разными именами.

---------------------------------- 243------------------------------------

Тем самым, нажимая на любую ссылку в стати­стическом кадре, мы будем лишь изменять содер­жимое динамически обновляемого кадра.

Однако такой способ представления страниц имеет и свой недостаток, заключающийся в том, что число страниц, составляющих наш сайт, увели­чивается.

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

Лучшие способы применения фреймов:

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

• для работы с формой, когда в одном кадре на­ходится форма, а в другом — результаты ее за­полнения;

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

Давайте теперь познакомимся с фреймовым спо­собом формирования страниц и создадим одну та­кую страницу (для примера).

---------------------------------- 244------------------------------------

Но чтобы мы могли познакомиться с двумя спо­собами включения файлов в фреймовую структуру, давайте создадим файл frame_map.htm.

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

Как вы могли заметить, в окне New (рис. 143), в котором мы выбирали шаблон для создаваемой страницы «Хобби», кроме закладки General есть еще закладки Frame Pages и Style Sheets. Давайте вновь запустим это окошко и войдем в закладку Frame Pages (рис. 153).

FrontPage предлагает много разных шаблонов страниц фреймовой структуры. Для нашего приме­ра нас интересует шаблон «Header», состоящий из двух кадров — верхнего узкого и нижнего.

---------------------------------- 245------------------------------------

В нижнем кадре нажмем на кнопку «New Page», тем самым создадим новую страницу в кад­ре.

Сохраним его как файл frame.htm (рис. 155). Как вы видите, при сохранении FrontPage выде­ляет сохраняемую область синим цветом. После того как мы нажмем кнопку «Save», FrontPage предложит также сохранить созданный нами но­вый файл. Этот кадр он зальет синим цветом (рис. 156). Имя нового файла будет frame_hob-bies.htm.

Теперь в верхнем кадре нажмем на кнопку «Set Initial Page». FrontPage загрузит окно Create Hyperlink, в котором предложит выбрать подклю­чаемый к кадру файл (рис. 157). В качестве такого файла мы выбираем только что созданный нами файл frame_map.htm.

Давайте немного настроим показ фреймов: скро­ем разделительную линию между фреймами (бор­дюр, border) и изменим высоту верхнего кадра. По­этому активируем верхний кадр (достаточно клик­нуть по нему мышкой). Активный кадр в редакто­ре показывается синей рамкой. В контекстном ме­ню выберем опцию «Frame Properties...» (рис. 158). Изменим следующие параметры:

• параметр «Name» — присвоим ему значение «title-map»;

• параметр «Height» раздела «Margins» устано­вим в значение 65 pixel;

• включим опцию «Resizable in Browser».

Ширину и высоту кадров FrontPage по умолча­нию предлагает выставлять в пикселях (pixel). Од­нако можно использовать и другие значения —

• percent — в процентах от текущей ширины (высоты) окна браузера;

• relative — это значение указывается в том ка­дре фрейма, у которого размер не зафиксиро­ван.

Нажмем на кнопку «Frame Page...». В появив­шемся окне (рис. 159) отключим опцию «Show Borders». Больше мы не будем видеть бордюр меж­ду фреймами.

Загрузим окно настройки параметров и для нижнего кадра фрейма (рис. 158) и изменим значе­ние параметра «Name» в «text». Это нам еще при­годится в дальнейшем.

Теперь оформим нижний кадр: превратим его в страницу «Хобби», у которой нет «шапки».

Теперь, если вы в окне Normal переключите за­кладки на Preview, вы увидите следующее:

---- 250

Глава 34 Создание Image Map

Мы использовали в качестве «шапки» сайта за­головок с совмещенной с ним навигационной пане­лью. Теперь надо превратить его из просто картин­ки в средство навигации по сайту. Поскольку он совмещает в себе наименования всех разделов пер­сональной страницы, мы не можем выделить кар­тинку и нажать кнопку «Hyperlink». Ведь тогда наша навигационная панель будет ссылаться толь­ко на один файл, а она должна ссылаться на не­сколько.

Для осуществления этого нужно превратить ее в карту ссылок — Image Map (его еще называют ак­тивным изображением, сенсорной картой).

Карта ссылок — это такое изображение, которое чувствует щелчки мышки. Карта ссылок может со­держать любое число гипертекстовых ссылок, свя­занных с областью картинки. Тем самым на карте ссылок создается активная область (зона), которая воспринимает клик мышки, и этот клик мышки ничем не отличается от клика по любой ссылке.

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

Существует два типа карты ссылок:

• обрабатываемые на стороне клиента (то есть у посетителя вашего сайта);

• обрабатываемые на стороне сервера.

Мы познакомимся с картой ссылок, обрабатыва­емых на стороне клиента. Именно такие карты пользуются наибольшей популярностью среди раз­работчиков WEB-сайтов. Именно потому, что:

• они более дружелюбны к браузеру посетителя;

• могут подсказывать ему месторасположение ссылок на карте;

• гипертекстовые докумены с ними обладают большей переносимостью, поскольку информа­ция хранится в самом документе;

• уменьшается нагрузка на WEB-сервер, по­скольку серверу не нужно обрабатывать полу­чаемые с карты ссылок запросы;

• не нужно обхаживать администратора сервера, чтобы разместить свой сценарий обработки за­просов с карты ссылок в специализированном каталоге (что необходимо для карт, обрабаты­ваемых на стороне сервера).

Для создания карты ссылок нам нужна картин­ка. Она уже есть — это «шапка» сайта.

Для создания карт ссылок во FrontPage сущест­вует панель инструментов Picture:

Мы используем маску «Rectangular Hotspot».

Загрузим в режиме «Normal» файл frame.htm. На панели инструментов «Picture» выделим маску «Rectangular Hotspot». С помощью курсора мыши обведем текст «Хобби» верхнего кадра фрейма (по­ка не доведете прямоугольную область до логичес­кого конца, левую кнопку на мышке лучше не от­пускать). После того как мы сформируем вокруг графического текста прямоугольную область, FrontPage предложит в окне Create Hyperlink вы­брать имя файла, на которое данная область будет ссылаться (рис. 162).

Поскольку мы работаем с фреймовой структу­рой, мы должны указать имя кадра фрейма, в ко­тором должен отрисоваться гипертекстовый доку­мент (рис. 163). В разделе «Optional» того же окна, в строчке «Target Name» нажмем на кнопку «Change Target Frame». Редактор предложит в ок-, не Target Frame выбрать кадр. В разделе «Current frames page» кликнем по нижнему кадру фрейма. FrontPage в строке «Target setting» пропишет имя кадра — «text».

В разделе «Common targets» вы можете увидеть ряд возможных вариантов отрисовок:

• Page Default — в кадре, который объявлен страницей по умолчанию. Если вы включите опцию «Set as page default» (рис. 163), то кадр по имени «text» будет объявлен страницей по умолчанию;

• Same Frame — в том же кадре, в котором нахо­дится активируемая ссылка;

• Whole Page — страница, вызываемая по ссыл­ке, будет отрисовываться во всем окне браузе­ра. Если она вызывается из страницы фреймо­вой структуры, то такое представление страни­цы не сохранится;

• New Window — нарисовать страницу, вызыва­емую ссылкой, в новом окне. Этот вариант от-рисовки может использоваться на любые ссыл­ки, даже в окне не фреймовой структуры;

• Parent Frame — страница открывается в кадре родительского окна. Под родительским окном понимают кадр фрейма, чье описание следует непосредственно перед описанием фрейма, в котором находится активируемая ссылка. Если такого кадра нет, то этот вариант отрисовки становится тождественным варианту отрисов­ки Same Frame.

Таким образом настраивается карта ссылок во FrontPage.

---------------------------------- 256-----------------------------------

Глава 35 Внедряем таблицы стилей

Таблицы стилей (CSS — Cascading Style Sheets) были предложены W3C еще при разработке специ­фикации HTML 3.0. Однако фактически они стали доступны в четвертых версиях Internet Explorer и Netscape Navigator.

В основу таблиц стилей была положена простая идея: HTML позволяет описывать язык, используя разные теги. Эти теги (большую часть) можно на­страивать. Например, тег Р описывает абзац. Для него в листах стилей можно задать:

• шрифт;

• его размер;

• стиль (начертание — обычный, курсив, полу­жирный, полужирный курсив);

• эффекты (подчеркнутый, перечеркнутый, без эффектов);

• цвет;

• выравнивание (влево, вправо, по центру).

То же самое можно сделать для заголовков (HI, Н2... Н6), для гипертекстовых ссылок А и многих других элементов.

---------------------------------- 257-----------------------------------

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

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

Давайте создадим свои таблицы стилей теми способами, что предлагает FrontPage.

Самое простое — это включить CSS в каждый файл. Для этого в меню «Format» надо выбрать оп­цию «Style» (рис. 164).

В нем вы можете выбрать любое имя стиля (Р — это текст абзаца, А — ссылка, В и STRONG — это полужирный, I и ЕМ — это курсив, HI, H2 и так далее — это заголовки) и, нажав на кнопку «Modify», перейти в окно Modify Style. Нажав кнопку «Format» вы сможете настроить:

• Pont — параметры шрифта (с этим окном мы познакомились);

• Paragraph — параметры абзаца (отступы, вы­равнивание, красная линия);

• Border — обтекание текста рамкой или бордю­ры таблицы;

• Numbering — параметры списков (маркирован­ных, нумерованных);

• Position — выравнивание рисунка относитель­но текста.

Мы настроим параметры шрифта для следую­щих имен предлагаемых стилей: Р, A, HI, H2 на странице «Хобби» (hobbies.htm). Причем наши на­стройки останутся теми же, что мы применяли до этого при настройке текстуры и основных цветов (окно Page Properties закладка Background) и при изменении параметров шрифтов для заголовка «Мои увлечения» и подзаголовков «Литература» и «Музыка» на странице «Хобби».

Теперь можно в настройках окна Page-Properties в закладке Background параметрам раздела «Colors» установить цвета по умолчанию (значение «Automatic»).

Выделим словосочетание «Мои увлечения» и в панели инструментов в списке «Style» выберем стиль «Heading 1». Выделим слово «Литература» и

в списке «Style» выберем стиль «Heading 2». Выде­лим первый абзац текста и нажмем на кнопку «Align Left» в панели инструментов. И так далее.

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

Я вновь возвращаюсь к окну New, но уже за­кладке Style Sheets (рис. 165).

В этом окне FrontPage предлагает пустой бланк и много своих уже сформированных таблиц сти­лей. Мы выберем пустой бланк — «Normal Style Sheet».

В редакторе появится новое окно, в центре кото­рого будет располагаться менюшка «Style»:

Достаточно нажать на опцию «Style...», как мы увидим привычное нам окно Style (рис. 164). Да­вайте в нем тем же именам стилей точно так же (как и в предыдущем варианте создания CSS) изме­ним параметры шрифта.

После нажатия кнопки «ОК» в этом окне пустая страница заполнится текстом, который и представ­ляет собой код CSS-файла (рис. 168)

Сохраним этот файл, выбрав для этого в меню «File» опцию «Save as...» (рис. 169). Файл наш мы назовем «main». Расширение CSS редактор предла­гает сам.

После того как мы его сохранили, мы можем разместить ссылку на него как в конкретном ги­пертекстовом документе, так и во всех сразу.

Разместим ссылку на наш CSS-файл в странице index.htm. Для этого в меню «Format» выберем оп­цию «Style Sheet Links...».

В появившемся окошке убедимся, что выбрана опция «Selected page(s)» и нажмем на кнопку «Add...». Редактор загрузит окно Select Hyperlink, в котором мы выбираем файл main.ess (рис. 170).

После этого в окне Link Style Sheet мы нажима­ем на кнопку «ОК».

Чтобы увидеть, что страница осталась без изме­нений, в настройках окна Page Properties в заклад­ке Background параметрам раздела «Colors» уста­новить цвета по умолчанию.

Если вы х