Как писать собственные функции

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

записать их один раз в самом начале, поставив впереди ключевое слово function, то есть, определив их как функцию.

Как создать списки на веб-странице

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

В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы “Лентяй”. Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.

Линейки и буквицы

Какие же графические элементы возможно применять в качестве такого “украшения”? Здесь надо проявить фантазию. Если вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно, “не как другие”, и запомнится посетителю. Однако перечислим несколько ставших уже традиционными вариантов такого применения графики. Во-первых, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (<HR>). Хотя тег <HR> и поддается настройке, графический разделитель часто выглядит лучше.

Применение графических элементов оформления — различные кнопки и маркеры списков. О них специально пойдет речь в следующем разделе.

Можно также применить графический элемент в качестве буквицы. Вообще-то, в скором времени поддержка буквицы предполагается и в

HTML,

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

авным-давно жил-был на белом свете царь Горох. И были у него поля гороховые, и леса гороховые, и...

Для экономии места мы не приводим текст странички целиком, а только то место где вставлена буквица.) Установка атрибута ALIGN="left" обеспечивает обтекание текстом рисунка (буквицы). На всякий случай в качестве альтернативного текста дается буква “Д”, чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.

Для завершения оформления можно еще создать градиентный фон . Не забывайте только обязательно указывать значение атрибута ALT= во всех тегах

<IMG>.

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

Маленькие хитрости

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

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

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

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

Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег

<UL>

. Все, что находится между ним и его открывающим тегом (

</UL>

), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом

<LI>.

Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:

<LI>Вкручивание электрических лампочек или

<LI>Вкручивание электрических лампочек</LI>

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

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

<OL>

, а элементы списка также обозначаются тегом

<LI>

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

<HTML>

<HEAD>

<TITLE> фирма "ЛЕНТЯЙ"</TITLE>

</HEAD>

<BODY BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A"

VLINK="#006A6A" ALINK="#006A6A">

<DIV ALIGN""center"><H1> фирма «ЛЕНТЯЙ «</H1></DIV>

<FONT SIZE="+l">Haшa фирма предоставляет следующие услуги </FONT>

<UL> <li>Вкручивание электрических лампочек

<li>Подметание пола

<li>Вынесение мусора из квартиры

<li>Мытье посуды

<li>Дефрагментация жестких дисков </UL>

<FONT SIZE="+l">Чтобы воспользоваться нашими услугами,следует: </FONT>

<OL>

<li>Зарегистрироваться (<a HRЕF="#reg.html"> здесь</a>)

<li>Заполнить форму заказа

(<a HRЕF="forml.html">здесь</a>)

<li>Получив письмо с паролем, послать пустой ответ

<li>Заполнить форму-подтверждение заказа

(<a HRЕF="form2.html">здесь</a>)

<li> Приготовить деньги для оплаты услуг </OL>

</BODY>

</HTML>

Рис. 2.9. Применение маркированного и нумерованного списков

Результат показан на рис. 2.9. Как видите, мы здесь не употребляли закрывающий тег

</LI>

. Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента

<U>

, либо тег завершения списка

</UL>

или

</OL>.

Другой вопрос, что будет, если код написан некорректно: например, указаны теги

<LI>

без тега списка

<OL>

или

<UL>

, или в списке есть элементы без тега

<LI>

?

Вообще говоря, такого допускать не следует, так как некоторые “строгие” браузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги

<LI>

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

<LI>

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

Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:

<UL>

<UL>

<UL>

</UL>

</UL>

</UL>

Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится. Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию.

Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы второго — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге

<UL>

следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.

В теге нумерованного списка

<OL>

можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE="1", то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерацию римскими цифрами (соответственно, с использованием прописных или строчных букв).

И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись

<OL START="43">

вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.

Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW,? Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, в разделе Si.3. А пока приведем пример веб-странички фирмы “Лентяй” с использованием вложенных списков:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<head>

<title>Фирма "ЛЕНТЯЙ"</title>

</head>

<body BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A"

VLINK="#006A6A" ALINK="#006A6A">

<DIV ALING="center"><H1>Фирма «ЛEHTЯЙ»</H1></DIV>

<FONT SIZE="+l">Haшa фирма предоставляет следующие услуги:

</FONТ>

<UL TYPE="disc">

<LI>Бытовые услуги

<UL TYPE="square">

<LI>Вкручивание электрических лампочек

<LI>Услуги по наведению чистоты

<UL TYPE="circle">

<LI>Подметание пола

<LI>Вынесение мусора из квартиры

<LI>Мытье посуды

</UL>

</UL>

<LI>Приготовление пищи

<LI>Компьютерные услуги

<UL TYPE="square">

<LI>Дефрагментация жестких дисков

<LI>Переустановка Windows

</UL>

</UL>

<FONT SIZE="+1"> Для того, чтобы воспользоваться нашими услугами,

следует:</FONT>

<OL>

<LI>Зарегистрироваться

(<A HREF="reg.html">здесь</A>)

<LI>Заполнить форму заказа

(<A HREF="forml.htm1">здесь</А>)

<LI>Пoдтвepдить заказ:

<OL TYPE="I">

<LI>Получив письмо с паролем подтверждения, послать пустой ответ,

нажав "Reply"

<LI>Заполнить форму-подтверждение заказа

(<A HREF="form2.html">здесь</A>)

</OL>

<LI>Приготовить деньги для оплаты услуг

</OL>

</body>

</html>

Результат показан на рис .2.10. Между прочим, при желании можно изменить вид маркера даже у отдельного элемента списка. Для этого следует установить атрибут TYPE= у тега

<LI>

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

Мы пока намеренно не приводим примеры того, что могло бы быть в файлах reg.html, form! .html и form2.html, на которые есть ссылки в этом примере. Списки определений

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

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

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

Рис. 2.10. Применение вложенных списков

щее место в словаре. Для этого каждая буква алфавита должна быть оформлена как гиперссылка, например:

<A HREF="#BukvaV">B</A>

а в соответствующее место в словаре нужно не забыть поставить соответствующий якорь, например:

<A NAME="BukvaV">B</A>

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

<Н1>

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

<HR ALIGN="left" WIDTH="40%">

Кстати, цветовую схему нужно в этом случае выбрать тоже достаточно строгую. Можно вообще подать черные буквы на белом фоне, но в нашем примере мы решили все же чуть-чуть смягчить контраст.

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

<SMALL><A HREF="#Top">B начало</А></SMALL>

Теперь обсудим, как организовать объяснение терминов. Для этого в

HTML

предусмотрен тег

<DL>

.

Все, что находится между ним и его закрывающей парой

</DL>

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

<DT>

для выделения самих терминов и

<DD>

для их определений. Теги

<DT>

и

<DD>

могут использоваться без соответствующей закрывающей пары (сравните с рассмотренным ранее тегом

<LI>

). Элементы, обозначенные как термины (

<DT>

), выводятся практически без отступа, а элементы, обозначенные как определения (

<DD>

) — с довольно большим отступом. Ни те, ни другие элементы не маркируются.

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

<В>...</В>.

Итак, приведем пример странички-словаря терминов. Для экономии места алфавит здесь обрывается на букве “Е”. Далее его легко можно продолжить самостоятельно (а если терминов много, то, возможно, стоит его продолжить в другом файле, чтобы не заставлять пользователя ждать загрузки слишком большого файла с сервера). Более того, здесь заполнены только разделы на буквы “А” и “Б”, чего для примера вполне достаточно.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>Словарь терминов</TITLE>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;charset=windows-1251">

</HEAD>

<BODY BGCOLOR="#EAEAEA" TEXT="Black" LINK="#7A3F51" VLINK="#7A3F51" ALINK="#7A3F51">

<H1><A NАМЕ="Тор">Словарь терминов</А></Н1>

<HR ALIGN="left" WIDTH="40%">

<BR>

<А HREF=="#BukvaA">A</A>

<А HREF="#BukvaB">Б</A>

<А HREF="#BukvaV">B</A> <А HREF="#BukvaG">Г</A>

<А HREF="#BukvaD">Д</A> <А HREF="#BukvaE">E</A> </НR>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaA">A</A></H> <DL>

<DT><A NAME="avtentich"><B>ABTEHTИЧECKИЙ КАДАНС</В></А>

<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой

<DT><A NAME="aliquot"><B>AЛИKBOTHЫE СТРУНЫ</В></А>

<DD>резонирующие струны, к которым исполнитель не прикасается во время игры

<DT><A NAME="atakta"><B>ATAKTA</B></A>

<DD>гармоническйй элемент на басу нижнего или верхнего вводного тона

</DL>

<SMALL><A HREF="#Top">B начало</А></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaB">B</A></H1> <DL>

<DT><A NAME="bagatel"><B>БАГАТЕЛЬ</B></A>

<DD>небольшая нетрудная для исполнения пьеса

<DT><A NAME="bartok"><B>БAPTOKOBCKOE ПИЦЦИКАТО</В></А>

<DD>сильный щипок струны с последующим ударом струны о гриф

<DT><A NAME="bonang"><B>БOHAHГ</B></A>

<DD>Ha6op из 10-12 гонгов разного размера </DL>

<SMALL><A HREF="#Top">B начало</А></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaV">B</A></Hl>

<DL>

</DL>

<SMALL><A HREF=<"#Top">B начало</А></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1XA NAME=<"#BukvaG">Г</A></H1>

<DL>

</DL> <SMALL><A HREF="#Top">B начало</А></Small>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME=="#BukvaD">A</A></H1> <DL>

</DL>

<SMALL><A HREF="#Top">B начало</А></Small>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaE">E</A></Hl> <DL>

</DL>

</DL>

<SMALL><A HREF="#Top">B начало</А></Small>

</BODY>

</HTML>

Результат показан на рис. 2.11. Как видите, все достаточно строго и наглядно. Кстати, обратите внимание на то, что каждый термин мы также оформили как якорь. Это сделано для того, чтобы с других страниц нашего предполагаемого сайта можно было ссылаться непосредственно на объяснение этого термина. Например, если наш файл-словарь терминов называется glossary, html, то в каком-нибудь другом файле на этом сайте мы можем написать приблизительно следующее:

...характеризуется частым использованием

<А HREF="glossary.html #bartok">6apтоковскoгo пиццикато</А>, а

также приемов типа постукивания по декам и обечайке...

В этом случае, пользователь, читающий этот текст и не понявший смысл термина

бартоковское пиццикато

может щелкнуть на нем и попасть в

Рис. 2.11. Использование списка терминов

соответствующий раздел словаря терминов, причем не куда-нибудь, а точно в то место, где этот термин поясняется.

Если вы внимательно просмотрели последний листинг, то, вероятно, заметили еще одну строку, значение которой ранее не пояснялось:

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1251">

Здесь применен тег

< МЕТА>

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

веб-страницы, указания ее автора, программы-генератора и т. п. Но в дан- ном случае этот тег используется для определения кодировки символов. Поскольку в тексте используются русские буквы, то есть, символы с ASCII-кодами, большими 128, необходимо указать, в какой кодировке эти символы нужно отображать. Если кто не совсем понял, о чем речь, тому можно это место пропустить, но лучше обратиться к соответствующей литературе. Большинство броузеров обычно это делают автоматически, и кроме того, имеют встроенную возможность выбора кодировки. Как правило она находится в меню View (Вид). Однако иногда бывает полезно указать кодировку в явном виде.

В данном случае мы имеем дело с файлом в кодировке Windows, поэтому в качестве значение свойства charset указано "windows-1251". Кстати, если вы работаете в другой кодировке, например,

KOI8,

вам следует ввести другое значение — "koi8-r", иначе эта страничка будет нечитаемой.

К сожалению, для явного указания кодировки приходится использовать столь длинный тег. Правда, многие броузеры сейчас начинают понимать и просто указание “без лишних слов”:

<МЕТА CHARSET="windows-1251">

. Однако этот метод не универсален, поэтому для лучшей совместимости стоит всегда писать длинную строку, приведенную выше.

Начнем с конца

Представим себе, что наша веб-страничка (или сайт) уже готова и мы с умилением любуемся ею на экране своего компьютера. Как же теперь сделать так, чтобы и другие посетители Интернета тоже могли ею любоваться?

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

Наложение элементов веб-страницы

Для полного завершения картины неплохо бы еще добавить какой-либо фоновый рисунок типа “водяного знака”, символизирующий профиль деятельности фирмы. Поскольку фирма называется “Лентяй”, возьмем за основу фотографию компании, занятой бездельем. Чтобы она стала похожа на “ водяной знак ”, вначале обработаем ее в графическом редакторе, например в Adobe Photoshop.

Исходное изображение сначала несколько размоем. В Adobe Photoshop это делается фильтром фильтр> Размытие > Сильное размытие (Filter > Blur > Blur More). Для усиления эффекта применим этот фильтр несколько раз подряд. Затем дайте команду Изображение > Настройка > Оттенок и насыщенность (Image > Adjust > Hue>Saturation). Здесь можно придать изображению оттенок, сходный с цветом фона. Затем необходимо уменьшить контрастность изображения, чтобы оно не отвлекало на себя слишком много внимания, и увеличить его яркость, поскольку у нас светлый фон: Изображение > Настройка > Яркость/Контраст (Image > Adjust > Brightness/Contrast). После этого обрежем изображение по контуру основного рисунка и сохраним в формате GIF с прозрачным фоном.

— Стоп! — скажете вы, — а что же делать дальше? Ведь у нас уже есть на веб-странице один фоновый рисунок — градиент! Ведь сразу два фоновых рисунка назначить нельзя!?

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

.logo { position: absolute; left: 150; top: 220; } Теперь присвоим этот класс нашему рисунку:

Действительно, при абсолютном (да и относительном) позиционировании блоки могут накладываться друг на друга, и тогда возникает проблема “третьего измерения” — какой из них окажется “выше”? Для решения этой проблемы придумали стилевое свойство z-index. Чем больше его значение, тем “выше” располагается блок при наложении.

Чтобы наш “водяной знак” не загораживал все остальное, определим для класса logo отрицательное значение

z-index:

z-index: -5;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitionai//EN"> <HTML>

<HEAD>

<TITLE>ФИРМА "ЛЕНТЯЙ"</ТIТLЕ>

<STYLE> BODY {

background-color: #D2FFFF;

color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y;

} A:link,A:active,A:visited { color: #006A6A;

} A:hover { font-weight: bold; text-decoration: none;

}.hdr { position: absolute; left: 50px; top: 10рх; text-align: center; font-family: OdessaScriptFWF, fantasy, font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10рх outset #003163; color: #3163CE;

} .rght { position: absolute; font-size: large; left: 565px; top: 160px; width: 160px; height: 400px; overflow-x: visible; }

.Ink { border-width: thick; border-style: ridge; margin: 10рх; padding: 5px; border-color: #319CFF; background-image: uri("Images/backlnki.jpg") ; color: red; text-align:center;

} .Ink A { text-decoration: none; color: white; } .1ft { position: absolute; font-size: meduim; left: 10рх; top: 160px; width: 550px; height: 400px; overflow: auto; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 150; top: 220; z-index: -5; }

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="hdr">ФИРМА &1аquо;ЛЕНТЯЙ&raquо;</DIV>

<DIV CLASS="rght"> <DIV CLASS="lnk">УСЛУГИ</DIV>

<DIV CLASS="lnk"><A HREF="prices.html">ЦЕНЫ</A></DIV>

<DIV CLASS="lnk"><A HREF="forml.html">ФОРMA 3AKA3A</AX/DIV>

<DIV CLASS="lnk"><A HREF”"history.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3px; ">КОМПАНИЯ</SPAN>

</A>

</DIV>

<DIV CLASS="lnk"><A HREF="guestbook.html">КНИГА ОТЗЫВОВ</А> </DIV>

</DIV> <DIV CLASS="lft"> <DIV CLASS="bigger">Haшa фирма предоставляет услуги:</DIV>

<UL STYLE=list-style-image: url('Images\markerl.gif);">

<LI>Бытовые услуги <UL STYLE="list-style-image: url('Images\rriarker2.gif');">

<LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL STYLE="list-style-image: url('Images\marker3.gif');"> <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды </UL>

</UL> <LI>Приготовление пищи <LI Компьютерные услуги <UL STYLE="list-style-image: url('Images\marker2.gif');"> <LI>Дефрагментация жестких дисков

<LI>Переустановка Windows </UL> </UL>

<DIV CLASS="bigger">Чтобы воспользоваться услугами, следует: </DIV>

<OL> <LI> Зарегистрироваться (<А НRЕF="reg.htm1">здесь</А>)

<LI>Заполнить форму заказа (<А HREF="forml.htm1">здесь</А>)

<LI>Подтвердить заказ:

<OL TYPE="I">

<LI>Получив письмо с паролем, послать пустой ответ

<LI>Заполнить форму-подтверждение заказа

(<А НRЕF="form2.htm1">здесь</А>)

</OL> <LI> Приготовить деньги для оплаты услуг </OL> </DIV>

<IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">

</BODY>

</HTML>

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

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

Настройка параметров рисунка

Выбрав шаблон, приступим собственно к созданию нашего элемента. Для этого можно воспользоваться кнопками, расположенными в левой части экрана: Text (Текст), Color (Цвет), Texture (Текстура), Shadow (Тень) и Size (Размер).

Чтобы ввести текст заголовка, нажмите кнопку Text. Далее можно набрать любое словосочетание, а также выбрать шрифт, которым оно будет начертано. Шрифт выбирается любой из числа установленных в операционной системе. Все происходящие изменения тотчас же отображаются в области просмотра. Удобно, что название каждого шрифта отображается самим этим шрифтом (кроме тех случаев, когда шрифт не алфавитный, например Maestro или Wingdings).

Нажатие на кнопку Color (Цвет) открывает возможность выбора цвета будущего заголовка. В зависимости от выбранного шаблона этих цветов может быть несколько. Например, шаблон заголовка Embossed (Тиснение) позволяет выбрать три цвета: цвет светлых краев, цвет темных краев и цвет тени. Кроме того, обычно есть еще возможность выбрать цвет фона (Background color), которая не влияет, собственно, на наш элемент, однако может помочь в его настройке, если заранее известно, на каком фоне он будет расположен.

Для выбора цвета предлагается интересная палитра, составленная из 216 (36х6) цветов и шести градаций серого цвета. Один из предлагаемых цветов выбирается щелчком мыши. Если же этих цветов недостаточно, можно нажать кнопку Advanced (Дополнительно) и перейти к выбору цвета из полной TrueColor-палитры или даже ввести код цвета в цифровом виде, указав насыщенность красной, зеленой и синей составляющей в процентах или абсолютных значениях (десятичных или шестнадцатеричных), а также ввести параметры цвета в режиме

HSV.

Кнопка Texture позволяет выбрать текстурное покрытие для графического элемента. Возможность наложения текстур также зависит от шаблона. Как и в предыдущем случае, предоставляется возможность выбора фоновой текстуры для просмотра.

Следующая кнопка, Shadow, позволяет отрегулировать тени, отбрасываемые графическим элементом. Для начала предлагаются восемь вариантов отбрасываемой тени. Если они не устраивают, нажмите на кнопку Advanced (Дополнительно) — откроется окно, средствами которого тени можно настроить аккуратнее. В левой части этого окна задают тип тени (Wail — тень, падающая на стену, или Floor — тень, падающая вниз, “ на пол ”; есть еще вариант None — без тени). В следующем разделе (projection) можно задать угол отбрасывания тени и ее размер по вертикали (в процентах). И, наконец, в правой части окна задают насыщенность тени (darkness) и степень размытия ее краев (blur).

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

Навигация между фреймами

А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылкп на различные разделы сайта, но при создании примера эти гиперссылю i не действовали. А ведь по крайней мере три из них могут действовать, поскольку три раздела: “Услуги”, “Цены” и “Книга отзывов” уже созданы!

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

Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями г нескольких HTML-файлах сразу, мы не будем дублировать таблицу стилей в каждом из файлов, а тоже выделим ее в отдельный файл. Назовем и, его lent.css. Давайте вначале взглянем на его содержимое:

BODY { background-color: #D2FFFF;

color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y;

} A:link,A:active,A:visited { color: #006A6A; }

A:hover { font-weight: bold; text-decoration: none;

}

.hdr { position: absolute; left: 50px; top: 10px; text-align: center; font-family: OdessaScriptFWF, fantasy;

font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10px outset #003163; color: #3163CE;

} .rght { font-size: large;

}

.Ink { border-width: thick; border-style: ridged; margin: 10px; padding: 5px; border-color: #319CFF;

background-image: url("Images\backlnkl.jpg");

color: red; text-align: center; }

.Ink A:link, .Ink A:visited {

text-decoration: none; color: white;

} .Ink A:active ( text-decoration: none;

color: red; }

.1ft { font-size: meduim; }

.bigger { font-size: larger;

font-family: sans-serif; }

.logo

{ position: absolute;

left: 70; top: 120; z-index: -5;

}

Как видите, эта таблица стилей очень похожа на ту, однако в нее пришлось внести некоторые изменения. Поскольку все разделы будут теперь располагаться в отдельных фреймах, отпадает необходимость в позиционировании, поэтому для классов Ift и rght свойства position, left, top, width и height мы вообще не опре делили. Кроме того, изменена позиция (свойства left и top) логотипа, то есть класса logo. Для выделения красным цветом ссылки на текущий раз дел (то есть тот, который в данный момент просматривает пользователь) пришлось добавить псевдокласс .Ink Aactive.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HEAD>

<ТIТLЕ>Фирма "Лентяй"</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="150," FRAMES РАСING="0" FRAMEBORDER="0">

<FRAME SRC="lenthdr.html" NAME="header" FRAMEBORDER="0" SCROLLING="no">

<FRAMESET COLS="*,200" FRAMESPACING="0" FRAMEBORDER="0">

<FRAME NAME="main" SRC=°"main.html" FRAMEBORDER="0" NORESIZE>

<FRAME NAME="link" SRC="lentlink.html" FRAMEBORDER="0" NORESIZE>

</FRAMESET> </FRAMESET>

</HTML>

Теперь создадим файл заголовка lenthdr.html. Собственно говоря, он будет очень коротким, поскольку в нем не должно быть ничего, кроме заголовка, написанного классом hdr, уже определенным в файле lent.css.

Надо только не забыть подключить файл таблицы стилей с помощью тега <LINK>:

<LINK REL="stylesheet" HREF="lent.css"> Взглянем на текст этого файла целиком.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Фиpмa "ЛEHTЯЙ"</TITLE>

<LINK REL="stylesheet" HREF="lent.css"> </HEAD>

<BODY> <DIV CLASS="hdr">Фиpмa «ЛEHTЯЙ»</DIV>

</BODY>

</HTML>

Итак, посмотрим целиком на текст файла lentlink.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<title>Фирма "ЛEHTЯЙ"</title>

<LINK REL="stylesheet" HREF="lent.css"> </HEAD>

<BODY>

<DIV CLASS="rght"> <DIV CLASS="lnk">

<A HREF="main.html" target="niain">ycnyги</A></DIV>

<DIV CLASS="lnk">

<A HREF="prices .html" target="main">цены</A></DI

<DIV CLASS="lnk">

<A HREF="forml.html" tаrgеt="main">ФОРМА 3AKA3A</A></DIV>

<DIV CLASS="lnk">

<A HREF="history.html" target="main">История

<SPAN STYLE="letter-spacing: -3px; ">KOMПAHИЯ</SPAN></A></DIV>

<DIV CLASS="lnk"><A HREF="guestbook.html" target="main">KHИГA OT3ЫBOB</A></DIV>

</DIV>

</BODY>

</HTML>

Собственно говоря, на этом этапе можно уже открыть основной файл и броузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.html и guestbook.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Фиpмa "ЛEHTЯЙ"</TITLE>

<LINK REL="stylesheet" HREF="lent.css">

<STYLE> BODY { background-image: none } </STYLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

var foodlist = new Array(25, 60, 10, 14, 100, 24, 7, 144); var foodingr = new Array<50, 26, 5, 28, 32, 11, 3, 96); function calclamp() {

document.forms[0].lamptotal.value= parseint(document.forms[0].lamp.value)*7;

calcall();

} function calcchist() {

document.forms[0].chisttotal.value= parseint(document.forms[0].chist.selectedlndex)*35;

calcall() ;

}

function calcfood() { document.forms[0].foodtotal.value=0; for (var i=0; i<8; i++)

( if (document.forms[0].food[i].selected) {

document.forms[0].foodtotal.value= parseint(document.forms[0].foodtotal.value)+parselnt(foodlist[i]);

if (document.forms[0].ingred.checked)

document.forms[0].foodtotal.value= parseint(document.forms[0].foodtotal.value)+parselnt(foodingr[i]);

} } calcall();

} f unction calccomp() {

document.forms[0].comptotal.value= parseint(document.forms[0].comp.selectedlndex)*101;

calcall() ;

function calcall() {

document.forms[0].total.value= parseint(document.forms[0].lamptotal.value)+ parseint(document.forms[0].chisttotal.value)+ parseint(document.forms[0].foodtotal.value)+ parseint(document.forms[0].comptotal.value) ;

//-->

</SCRIPT>

</HEAD>

<BODY>

<DIV CLASS="lft">

<DIV CLASS="bigger">

Здecь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа !</DIV>

<BR>

<FORM>

<TABLE WIDTH="99%" CELLSPACING="0"> <TR>

<TH WIDTH="70%">Услуги</TH>

<TH WIDTH="15%" ALIGN="left">ЦЕHA</TH>

<TH WIDTH="15%">CTOИMOCTb</TH> </TR> <TR> <TD>

Количество вкручиваемых лампочек:

<INPUT TYPE="text" NAME="lamp" VALUE="0" SIZE="2" MAXLENGTH="2" onChange="calclamp () "></TD>

<TD ALIGN="center">

<INPUT TYPE="text" NAME="lampprice" VALUE="7" SIZE="3" READONLY> p.</TD>

<TD ALIGN="right">

<INPUT TYPE="text" NAME="lamptotal" VALUE="0" SIZE="3" READONLY> p.</TD>

</TR> <TR>

<TD> Количество услуг по наведению чистоты:

<SELECT NAME="chist" onChange="calcchist()">

<OPTION VALUE="0">0

<OPTION VALUE="1">1

<OPTION VALUE="2">2

<OPTION VALUE="3">3 </SELECT> </TD>

<TD ALIGN="center">

<INPUT TYPE="text" NAME="chistprice" VALUE="35" SIZE="3" READONLY> p.</TD>

<TD ALIGN="right">

<INPUT TYPE="text" NAME="chisttotal" VALUE="0" SIZE="3" READONLY> p.</TD>

</TR> <ТR><ТD>Приготовление пищи:<ВR>

<SELECT NAME="food" SIZE="4" MULTIPLE onChange="calcfood() ">

<OPTION VALUE="25">Cyп <OPTION VALUE="60">Kypинные котлеты

<OPTION VALUE="10">Maкapoны

<OPTION VALUE="14">Koмпoт

<OPTION VALUE="100">ПЛOB

<OPTION VALUE="24">КАША

<OPTION VALUE ="7">Кофе

<OPTION VALUE="144">Caлaт </SELECT><BR>

<INPUT TYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood()">Привезти ингредиенты с собой

</TD>

<TD ALIGN="center">

<INPUT TYPE="text" NAME="foodprice" VALUE="OT 10" SIZE="4" READONLY> p.</TD>

<TD ALIGN="right">

<INPUT TYPE="text" NAME="foodtotal" VALUE="0" SIZE="3" READONLY> p.</TD>

</TR> <TR><TD STYLE="padding-bottom: 15px;"> Количество компьютерных услуг: <SELECT NAME="comp" onChange="calccomp () ">

<OPTION VALUE="0">0 <OPTION VALUE="1">1 <OPTION VALUE="2">2 </SELECT></TD>

<TD ALIGN="center" STYLE="padding-bottom: 15px;">

< INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD>

<TD STYLE="padding-bottom: 15px;" ALIGN="right">

<lNPUT TYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.</TD>

</TR> <TR>

<TD COLSPAN”"2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; "><В>ИТОГО:</В></ТD>

<TD ALIGN="right" STYLE="padding-top: 15px; border-top: double black; ">

<INPUT TYPE="text" NAME="total" VALUE="0" SI'ZE="3" READONLY> p.</TD>

</TR>

</TABLE>

</FORM>

</DIV>

<IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">

</BODY>

</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Baш отзыв</ТITLЕ>

<LINK REL="stylesheet" HREF="lent.css">

<STYLE> BODY { background-image: none } </STYLE>

</HEAD>

<BODY>

<DIV CLASS="lft"> <Н1>Ваш отзыв о наших услугах</Н1>

<DIV ALIGN="center">

<FORM ACTION="http://cgi.lentyay.corn/guest.cgi" METHOD="post">

<LABEL FOR="Name">Baшe имя:</LABEL>

<INPUT TYPE="text" NAME="Name" VALUE="AHOHИM" SIZE="30"><BR> <LABEL FOR="Opinion">Bame мнение:</LABEL>

<TEXTAREA COLS="30" ROWS="4" NAME="Opinion " STYLE="vertical-align: middle;"></TEXTAREA>

<BR><BR>

<INPUT TYPE="submit" VALUE="Отправить">

<INPUT TYPE="reset" VALUE="Очистить форму"> </FORM> </DIV>

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

Нейтрализация шумов

Следующим мешающим моментом при сжатии могут быть шумы, присутствующие в записи. Для удаления шумов в звуковых программах также есть специальные средства. Например, в программе Sound Forge в меню Tools (Сервис) имеется пункт Noise Reduction (Шумоподавление). Однако здесь не все так просто. Конечно, “шумливая” запись после сжатия слушается не лучшим образом. Однако если шумов в записи много и они широкополосные, то их следует фильтровать очень осторожно. Дело в том, что при сильном понижении уровня широкополосного шума в самой фонограмме появляются спектральные провалы, часто слышимые как “присвист”, не говоря уже об изменении тембра полезного сигнала (инструментов, голоса и т.,п.). Если такую испорченную шумоподавлением фонограмму сжать в формате RealAudio или MPEG 1 Layer 3, то эффект спектральных провалов усилится, “присвисты” или другие артефакты будут гораздо слышнее, чем в несжатом звуке. При сжатии в формате TwinVQ этот эффект не так заметен, но все же присутствует.

Поэтому при шумоподавлении не стоит снижать уровень шумов более, чем на 15 дБ. В отдельных случаях (очень плохие записи, смешанные практически с белым шумом) приходится вообще отказаться от шумоподавления. Можно, конечно, произвести предварительную реставрацию специальными профессиональными средствами, но они, как правило, недоступны обычному пользователю ПК.

Netscape Composer

Еще одна WYSIWYG-ориентированная программа для редактирования .HTML-файлов встроена в броузер Netscape. Она называется Netscape Composer гораздо меньше, чем в предыдущей, однако, поскольку это модуль популярного броузера, ее тоже используют активно. Средства верхней инструментальной панели позволяют вставить в файл изображение (Image), горизонтальную линию (H.Line), таблицу, гиперссылку (Link) или якорь (Anchor). Ниже расположена небольшая панель для управления начертанием шрифта (полужирное, курсивное, подчеркнутое), а также его размером, отступом и выключкой. Здесь же можно выбрать цвет фона. С помощью выпадающих меню доступно еще несколько HTML-элементов.

Несмотря на доступность и популярность программы, мы вряд ли можем посоветовать использовать WYSIWYG-редакторы типа Netscape Composer для создания веб-страниц, за исключением каких-либо очень простых случаев. Если вам непременно хочется визуально отслеживать все вносимые изменения, то установите программу Arachnophilia и воспользуйтесь функцией Instant View.

Отметим, что все рассмотренные в этом разделе программы распространяются бесплатно. В принципе, таких средств, как TextPad и Arachnophilia, вполне достаточно, чтобы чувствовать себя комфортно при создании веб-страниц любой сложности. Однако некоторые разработчики предлагают еще более продвинутые средства разработки веб-страниц, стремясь обеспечить максимальное удобство для пользователя и автоматизацию рутинной работы. К сожалению, как правило, такие программы уже не бесплатными, но из-за удобства в использовании они тоже пользуются большой популярностью. Далее мы перейдем к рассмотрению таких “продвинутых” средств создания веб-страниц.

Объединение ячеек

Иногда в таблицах встречаются так называемые

объединенные ячейки —

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

COLSPAN=

(для объединения соседних столбцов) или

ROWSPAN=

(для объединения соседних строк):

<TR>

<TD WIDTH="33%">Этo первая ячейка</ТD>

<TD WIDTH="33%">Это вторая ячейка</ТD>

<TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую ячейку</ТD>

</TR> <TR>

<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD>

</TR>

<TR>

<TD>3ro первая ячейка третьей строки</ТD>

<TD>A это вторая ячейка третьей строки</ТD> </TR>

</TABLE>

Результат показан на рис. 2.21. Здесь, как видите, отображена таблица из трех строк по три ячейки. Однако третья ячейка первой строки с помощью атрибута

ROWSPAN="3"

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

COLSPAN="2"

объединяем две оставшиеся ячейки этого ряда в одну.

Кстати, обратите внимание на то, что, хотя ширина первых двух столбцов таблицы задана равной 33%, то есть примерно треть ширины таблицы приходится на каждый столбец, правый столбец на самом деле занимает явно больше места. Это произошло потому, что иначе броузеру не удалось бы уместить в ширину этого столбца длинное слово “объединились”. В результате броузер самостоятельно чуть расширил этот столбец за счет двух остальных.

Мы с вами еще не рассмотрели такие элементы таблицы, как заголовок и заключение. В

HTML 4.0

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

<TBODY>

Тогда заголовок таблицы обозначается тегом

<THEAD>

а заключение — тегом

<TFOOT>

Все три тега употребляются с

Обзор других возможностей стилевых таблиц

В примерах предыдущих двух разделов мы кратко продемонстрировали способы применения стилевых таблиц CSS и их удобство. Однако, помимо упорядочивания стилевой информации, таблицы стилей CSS открывают для создателя веб-страниц и многие новые возможности, которые недоступны в стандартном языке HTML. Правда, к сожалению, употребляя новые возможности CSS, нужно четко представлять себе, что не все броузеры смогут их проинтерпретировать правильно. На сегодняшний день существует два “абстрактных” стандарта CSS — так называемый стандарт CSS1 и более новый стандарт CSS2. Реальные броузеры по-разному поддерживают (или не поддерживают) их. Некоторые свойства стилей, описанные в CSS1 и, особенно, CSS2, до сих пор не получили поддержки в ряде броузеров, а некоторые не поддерживаются вообще. И, наоборот, существуют броузерные расширения, не описанные в стандартах CSS1/CSS2.

Однако не надо этого пугаться: все равно новые возможности использовать стоит, просто надо проверять результаты своей работы в разных бро-узерах и сравнивать их. Впрочем, это относится даже не столько к CSS, сколько к динамическим страницам, создаваемым с использованием JavaScript Итак, давайте познакомимся с некоторыми новыми возможностями CSS. Замечательно, что многие стилевые свойства здесь можно применять практически ко всем элементам. Например, цвет фона (свойство background-color), который мы в предыдущих примерах определяли для элемента

<BODY>

, может с таким же успехом задаваться и для отдельных текстовых блоков и даже слов. Более того, все элементы могут иметь свой фоновый рисунок (свойство background-image).

Практически для всех элементов можно теперь также определить поля (свойство margin), рамки различного вида и толщины (свойство border), и отступы (свойство padding). Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле — вне нее. Свойства полей, рамок и отступов могут задаваться индивидуально для каждой из сторон блока. Более гибко можно выбирать свойства шрифта: его начертание, размер, степень “жирности”, гарнитуру и оформление (это, соответственно, свойства: font-stlye, font-size, font-weight, font-family, text-decoration). Интересное свойство text-decoration позволяет, например, не только зачеркнуть или подчеркнуть текст, но и сделать его подчеркнутым (text-decoration: overline) или даже мигающим (text-decoration: blink). Правда, значение blink поддерживается пока только в Netscapel и Opera 4. Можно несколько “оживить заголовки с помощью свойства font-variant: small-caps. Правда, пока что это работает только в Netscape 6, a Internet Explorer просто преобра зует строчные буквы в прописные, а прописные не увеличивает.

Чтобы было интереснее, давайте рассмотрим некоторые свойства на кон кретном примере. Помните веб-страничку гипотетической фирмы “Лентяй” из главы 2? Сейчас мы попробуем взять ее за основу и улучшить оформление.

Оформление абзацев

Вообще говоря, для разделения абзацев вместо тега

<BR>

можно также использовать тег

<Р>

. Он, надо сказать, и был создан для этого. Но поскольку придумывали его не у нас в России, то он делит абзацы в соответствии с зарубежными правилами книгопечатания — между абзацами пропускается строка, а сам абзац начинается без отступа слева (“красной строки”). Такое оформление непривычно для нас, и поэтому попробуем отформатировать абзацы по-другому — без пропуска строки и с отступом слева.

Собственно, используя тег

<BR>

вместо тега

<Р>

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

Если вы еще помните, в былые времена в примитивных текстовых редакторах некоторые использовали для отступа несколько пробелов, как на пишущей машинке. Здесь можно попробовать применить этот допотопный прием. Правда, “в лоб” он работать не будет, поскольку броузеры игнорируют лишние пробелы. Однако мы можем поставить специальный символ, называемый неразрывным пробелом. Он никогда не игнорируется, и несколько таких символов вполне могут заменить нам отступ первой строки. Для того чтобы создать неразрывный пробел, следует ввести:

Поясним, что в языке HTML подобная конструкция всегда используется для ввода так называемых специальных символов. Как только броузер встречает в тексте знак амперсенд (&), он начинает интерпретировать сле-дующие за ним буквы как код специального символа. Так продолжается до тех пор, пока не встретится точка с запятой. Специальные символы используются, в частности, для кодирования букв с различными “добав-ками” типа селиля, циркумфлекса и пр. (для текстов, например, на фран-цузском языке), ввода знаков торговой марки и авторского права, символов денежных единиц, знаков “больше” и “меньше” и т. д.

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

Оформление кнопок

Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. В этом разделе мы не будем рассматривать методы такого взаимодействия — о них речь пойдет ниже. Пока же мы только научимся создавать кнопки и использовать в них элементы графики.

Чтобы создать кнопку, достаточно поместить некоторый текст между тегами

</BUTTON>

, например, вот так:

<BUTTON>ЭТO KHОПKА</BUTTON>

Правда, повторим, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет. Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.

Вообще говоря, такие кнопки можно было создать и в старых версиях языка HTML, хотя там не было тега

< BUTTON >

. Интереснее тот факт, что между тегами

можно поместить не только текст, а все, что угодно. Если мы поместим туда тег

<IMG>

, то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании — например, надо вставлять теги

<BR>

для переноса строк и т. д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок

НТМL! В нашем примере мы поместили туда целую таблицу с разноцветными клетками.

Итак, проиллюстрируем сказанное таким файлом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

<HTML>

<HEAD>

<TITLE>KHOПKИ</TITLE>

<STYLE>

TD {color: white;} </STYLE>

</HEAD> <BODY> <BUTTON>ПРОСТО КНОПКА</BUTTON>

<button><img SRC="Images/email_b-l.gif" BORDER="0" WIDTH="26"

HEIGHT="23" ALT=""></BUTTON><BR><BR>

<BUTTON>Internet Explorer<BR>

<IMG SRC="Images/ie4.jpg" WIDTH="62" HEIGHT="61" BORDER="0"><>BR> 4.0 </BUTTON><BR><BR> <BUTTON><H1> Это большая кнопка</Н1>

<TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="280" CELLSPACING="2" CELLPADDING="2" BORDER="3">

<TR>

<TD ALIGN="center" BGCOLOR-"#400040">Oнa содержит</ТD>

<TD ALIGN="center">целую таблицу</ТR> </TR> <TR>

<TD ALIGN="center">c разноцветными</ТD>

<TD ALIGN="center" BGCOLOR="#400040">Клеточки</TD> </TR>

</TABLE>

<BR>И ГОРИЗОНТАЛЬНУЮ ЛИНИЮ <HR WIDTH="400" SIZE="10" COLOR="Navy"> </BUTTON> </BODY>

</HTML>

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

Можете пока не обращать внимание на тег

<STYLE>

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

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

Оформление с помощью атрибута STYLE

В предыдущих главах мы рассмотрели некоторые способы создания веб- страниц, однако до сих пор почти ничего не говорили о том, как оформляют текст. И это не случайно. Дело в том, что в спецификации HTML 4.0 было рекомендовано использовать для оформления страниц новое мощное сред ство — каскадные таблицы стилей (CSS), которые мы сейчас и рассмот рим. При этом многие теги и атрибуты (собственно говоря, почти все, относящиеся к оформлению) были отменены, в том числе и некого рые из тех, что были рассмотрены нами ранее.

— Стоп! — скажете вы. — А для чего же мы их тогда рассматривали?

Не волнуйтесь, во-первых, мы почти не рассматривали отмененные теги, за исключением наиболее часто встречающихся, а во-вторых, отмена тегов в HTML 4.0 вовсе не означает, что всем нужно немедленно прекратить их использование. В некоторых случаях все равно бывает удобнее восполь зоваться одним из этих тегов, и этого не нужно бояться. Отмененные теги все еще поддерживаются текущими версиями броузеров, по крайней мере для совместимости со старыми веб-страницами. Скорее всего, они будут поддерживаться еще очень долго (как, например, до сих пор поддержива ются теги <ХМР> и <BL>, хотя первый из них не используется со времен HTML+, а второй вовсе никогда не входил в его спецификацию). Да и вообще, было бы странно, если бы новая версия какого-либо броузера вдруг “отказалась” от некоторых тегов — это явно не прибавило бы ей популяр ности. Так вот, отмена тегов означает, что WWW-консорциум не реко мендует более ими пользоваться, поскольку CSS действительно намного удобнее, и возможности автора при этом гораздо шире.

Атрибут STYLE

Итак, давайте начнем изучение оформления веб-страниц с использованием каскадных таблиц стилей CSS. И для начала рассмотрим такое понятие, как атрибут STYLE=.

Самый примитивный способ использования CSS — это ввести в код HTML атрибут STYLE= с соответствующим значением. Его можно добавить практически ко всем тегам (кроме таких, как, например,

<HEAD>

и

<HTML>

). Таким образом, вместо отмененных атрибутов в HTML 4.0 всегда следует применять атрибут STYLE=.

Давайте рассмотрим пример. Возьмем для начала веб-страничку из вто рой главы (“Домашняя страница Сергея Сергеева”, см. рис.2.8), в кото рой немного использовались отмененные теги и атрибуты, и попробуем “переписать” ее по всем правилам HTML 4.0, сохранив пока что старое оформление.

Во-первых, вместо

<BODY BGCOLOR="#BABAAO" TEXT="#1D1D18" LINK="#634438" VLINK="#634438" ALINK="Black">

рдует написать так:

Кстати, возможен и более простой вариант:

<Н1 ALIGN="centerг">Домашняя страница Сергея Сергеева</Н1>

Вместо этого применим атрибут STYLE= взамен отмененного атрибута ALIGN= и напишем:

<Н1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</Н1>

Этому атрибуту соответствует свойство text-align, принимающее те же зна чения, что и атрибут ALIGN=. Точно так же выровняем следующий тег

<DIV>.

Оформление текста

Теперь давайте займемся информационным блоком. Чтобы информация хорошо читалась и воспринималась, он не должен особо страдать излишествами, однако, чтобы выделить заголовки списков, их можно написать более крупно и шрифтом другого начертания. Для этого определим соответствующий класс: .bigger { font-size: larger; font-family: sans-serif; }а в тексте документа применим его:

<DIV CLASS="bigger">Haшa фирма предоставляет следующие услуги:</DIV>

Как вы уже, наверное, поняли, свойство font-family определяет гарнитуру шрифта. Значение sans-serif соответствует шрифтам, не имеющим засечек. По умолчанию обычно определен шрифт serif (с засечками, обычно это Times New Roman).

Кроме того, воспользуемся уже знакомым нам стилевым свойством list- style-image для использования графических маркеров списка. Поскольку список у нас трехуровневый, то логично создать три маркера разных цветов. Как применить графические маркеры, вы уже знаете:

Можно было, конечно, создать специальные классы для каждого уровня списка, но мы этого делать пока не будем, потому что списков немного и, соответственно, вполне достаточно атрибута STYLE=.

Далее будем немного изменять вид гиперссылки при наведении на нее мыши. Здесь можно придумать различные варианты. В нашем примере мы решили изменять шрифт на полужирный и убирать подчеркивание при наведении мыши:

A:hover { font-weight: bold; text-decoration: none; }

Все эти свойства вам уже знакомы. Давайте взглянем, что у нас получается (рис. 4.7).

Оформление заголовка

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

width: 90%; height: 100рх;

Эти значения мы определяем для класса hdr. Значение height выбираем с таким расчетом, чтобы осталось еще немного пространства сверху от остальных блоков нашей веб-странички. Далее для заголовка лучше назначить шрифт покрупнее:

font-size: 6Орх;

Кроме того, будет лучше, если шрифт заголовка будет контрастен относительно всех остальных шрифтов. Выберем какую-нибудь необычную гарнитуру:

font-family: OdessaScriptFWF;

Однако, указывая в явном виде название гарнитуры шрифта, следует предусмотреть случай, когда на компьютере пользователя этого шрифта не окажется. Для этого можно определить (через запятую) еще несколько вариантов начертания шрифта в порядке убывания предпочтительности. Последним обязательно укажите начертание из стандартного набора (serif, sans-serif, cursive, fantasy, monospace). В данном случае нам нужен необычный шрифт, поэтому укажем значение fantasy:

font-family: OdessaScriptFWF, fantasy;

Теперь расставим буквы немного пошире с помощью уже знакомого нам свойства letter-spacing, а также определим высоту строки, равной высоте нашего блока:

letter-spacing: 0.05em; line-height: 100рх;

font-weight: 900;

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

color: #3163CE;

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

border: 10рх outset #003163;

В этой записи определены сразу три свойства: border-width, border-style и border-color. В некоторых случаях допустимо подобное объединение значений нескольких свойств в одну строку. Это можно написать быстрее, хотя и менее наглядно.

В принципе заголовок готов. Давайте только добавим к нему еще визуальный эффект с помощью свойства filter. Это работает, правда, только в броузере Internet Explorer и отсутствует в спецификациях CSS, однако смотрится очень красиво. Можно применить это свойство, например, так:

filter: shadow;

В результате наш блок будет отбрасывать тень. Существуют такие значения свойства filter, как dropshadow (другой тип тени), blur (размытие), wave (отражение в волне) и прочие.

Оформление заголовков

Посмотрим еще раз на нашу страничку. Еще один ее недостаток заключается в том, что весь текст написан шрифтом одного размера. Вообще говоря заголовки выделяют более крупным шрифтом (причем обычно полужирным). Для того чтобы выделять заголовки, в HTML существуют так называемые теги заголовков. Это

<Н1>, <Н2>, <НЗ>, <Н4>, <Н5>

<Н6>

(и из закрывающие теги). Для самых крупных заголовков можно использовав тег

<Н1>

, для заголовков помельче —

<Н2>

и так далее. Например, так:

<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Н2>

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

<Н2>

</Н2>

<Н2><Р ALING="сеntег">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2>

Если этого не сделать, то заголовок будет выровнен по левому краю.

В нашем случае имеет смысл использовать для заголовков рассказа тем

<Н2>

, а для заголовка всей странички — тег

<Н1>

(общий заголовок дол жен быть крупнее). Для выравнивания общего заголовка по центру мы можем написать так:

<H1><DIV ALING="сеntег">Домашняя страница Сергея Сергеева</DIV></Н1>

Обратите внимание на то, что вместо тега

<Р>

для выравнивания мы: использовали тег

<DIV>

. Этот тег означает разделитель и определяет фрагмент, который можно наделить какими-либо стилевыми свойствами, Текст, расположенный между тегами

<DIV>

</DIV>

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

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

< Р ALIGN="left">

. Здесь значение "left" означает выравнивание по левому краю, однако это значение атрибута ALIGN= определено по умолчанию. То есть, для опреде-

пия абзаца, выровненного по левому краю, достаточно было просто "ставить тег

<Р>.

Однако текст рассказа обычно смотрится лучше, если него ровные оба края, а не только левый — мы к этому привыкли по бумажным” изданиям. Чтобы выровнять текст по обоим краям, можно добавить атрибут ALIGN= со значением "justify". Но следует иметь в виду, о такое выравнивание не поддерживалось в старых версиях броузеров. (юузеры Internet Explorer и Netscape Navigator поддерживают его только начиная со своих четвертых версий.

Описание функции

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

function fct(a)

{ if (<а==0)||(a==l)) return 1;

else { var i=1;

for (a; a>1; a--) i*=a; return i; } }

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

function fct(a)

Это означает, что функция будет называться fct() (можно использовать любое незарезервированное сочетание символов), а ее аргумент мы пока условно обозначили “а”.

Далее идет, собственно, “тело” функции, которое должно быть заключено а в фигурные скобки. В первой ее строке

if ((а==0)||(а==1)) return 1;

мы проверяем, не равен ли аргумент 0 или 1, и если это так, то функция возвращает результат — 1. Для возвращения результата применяется one- ратор return,

Если же аргумент не равен 0 или 1, выполняется следующий блок (идущий после ключевого слова else). Здесь мы определяем временную переменную i, в которую будем сохранять промежуточные результаты. Затем организуем цикл, причем в качестве счетчика используем сам аргумент, чтобы не вводить еще одну переменную. Запись i*=a — это просто сокращенная форма записи i=i*a, то есть мы перемножаем значения i и а, присваивая результат переменной i. Кстати, такая сокращенная форма записи существует для всех арифметических и логических операций, то есть можно записать х+=2 вместо х=х+2; z%=y вместо z=z%y и т. д.

Теперь, когда функция написана, ее можно вызвать из любого места. Например, если мы напишем где-нибудь выражение x=fct(5), то переменной х будет присвоено значение факториала от числа 5, то есть 120.

Чтобы не возникло ошибки вызова еще не определенной функции, рекомендуется определять их в разделе
<HEAD>
своего .HTML-файла. Теперь давайте попробуем проиллюстрировать сказанное.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Вычисление факториала</ТITLЕ>
<SCRIPT> function fct(a) {
if ((a==0)||(a==l)) return 1;
else
{
var i=l; for (a; a>1; a--) i*=a; return i;
} } </SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var q; q=prompt ("Введите целое число от 0 до 170", "5");
q=parselnt(q) ;
if (isNaN(q)) alert ("Должно быть введено ЧИСЛО в пределах от 0 до 170");
else if (<q<0)||(q>170)) alert ("Число должно быть в пределах от 0 до 170") ;
else document.write(q+"l = "+fct(q)+"<BR>");
</SCRIPT>
</BODY>
</HTML>
При загрузке этой веб-страницы пользователю будет предложено ввести число в пределах от 0 до 170 поскольку для отрицательных чисел факториал не определен, а для чисел, больших 170, обычным способом вычис лить его не удастся — возникнет переполнение, и интерпретатор JavaScript выдаст в качестве результата ключевое слово Infinity, то есть бесконечность). Затем с помощью функции parselnt() мы выделяем из введенной строки целое число (если это не удается — выдается предупреждающее сообщение). Затем мы проверяем, входит ли это число в “разрешенный” диапазон (от 0 до 170). И, наконец, если все правильно, записываем результат, “попутно” вызывая нашу функцию fct().

Определение стилей в специальной таблице

Читая предыдущий раздел, некоторые, скорее всего, несколько раз поду мали: “Ну и где же здесь обещанное удобство? Неужели удобнее написать <SPAN STYLE="text-style: italic;">, чем просто <I>?”

Все верно, в некоторых случаях Сев-запись действительно немного длиннее, но мы и не утверждали, что теперь нужно использовать только CSS, ~ в некоторых случаях можно воспользоваться и старыми тегами, ничего в этом предосудительного нет. Однако с помощью CSS мы имеем, во-первых, гораздо более широкие возможности, а во-вторых, получаем удобство работы над собственно стилями. В предыдущем разделе вы это удобство почувствовать не могли, поскольку в учебных целях мы записывали все свойства стилей как значения атрибута STYLE=. Этот способ широко применяется, но лишь в тех случаях, когда нужно применить какой-либо стиль к отдельно взятому фрагменту. А в большинстве случаев используют так называемые таблицы, стилей.

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

Основные атрибуты таблицы

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

WIDTH=

можно устанавливать любую желаемую ширину

таблицы. Например, если мы напишем

<TABLE WIDTH="50" BORDER="3">,

Рис. 2.1

. Таблица из одной ячейки

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

WIDTH-50%,

то таблица растянется на половину ширины окна броузеоа (рис. 2.1

4).

Рис. 2.1

. Установка ширины таблицы

А что делать, чтобы текст не “прилеплялся” так сильно к границе ячейки как показано на рис. 2.14 и 2.15? Для этого тоже существует специальный атрибут —

CELLPADDING=.

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

<TD> Это уже таблица! </TD> </TR>

</TABLE>

Результат показан на рис. 2.1

. Разумеется, в обычных ситуациях величину

CELLPADDING=

устанавливают приблизительно равной 3-5 точек, чтобы просто немного отступить от края ячейки.

Рис. 2.1

Применение атрибута

CELLPADDING=

Кроме того, имеется еще атрибут

CELLSPACING=,

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

<TD> Это уже таблица! </TD> </TR> </TABLE>

Результат представлен на рис. 2.1

Рис. 2.1

6

. Применение атрибута

CELLSPACING=

Кстати, рамка таблицы совершенно не обязана быть серой, по крайней мере в броузере

Internet Explorer

(версии 3 и выше). Для этого служит атрибут

BORDERCOLOR=,

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

BORDERCOLOR="green"

и сравнить результат с предыдущим, то он, скорее всего, вам не понравится: в предыдущем случае табличная рамка слева и

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

Поэтому вместо одного атрибута

BORDERCOLOR=

мы рекомендуем употреблять два:

BORDERCOLORLIGHT=

и

BORDERCOLORDARK=,

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

Internet Explorer.

<TABLE WIDTH="50%" BORDER=="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime" BORDERCOLORDARK="green">

<TR>

<TD> Это уже таблица! </TD>

</TR>

</TABLE>

Результат показан на рис. 2.17. Кстати, при просмотре на экране компьютера обратите внимание на то, что

lime

и

green —

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

Рис. 2.1

7

. Окрашивание рамки таблицы

Цвет фона таблицы можно задать с помощью атрибута

BGCOLOR=.

Он может отличаться от цвета общего фона всей страницы, определенного атрибутом

BGCOLOR=

тега

<BODY>.

Чтобы выровнять таблицу по центру или правому краю, можно установить в теге

<TABLE>

атрибут

ALIGN=.

Все это мы сейчас проиллюстрируем, а заодно.давайте добавим еще одну ячейку в нашу таблицу:

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR>

<ТD>Это первая ячейка</ТD>

<ТD>Это вторая ячейка</ТD> </TR>

</TABLE>

Результат представлен на рис. 2.1

8

. Как видите, расстояние между ячейками сохраняется равным значению атрибута

CELLSPACING=

теперь это заметно особенно хорошо.

Рис. 2.1

8

. Таблица из двух ячеек

Теперь добавим в нашу таблицу вторую строку:

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN=="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR>

<ТD>Это первая ячейка</ТD>

<TD>Это вторая ячейка</ТD> </TR>

<TR>

<ТD>Это первая ячейка второй строки</ТD>

</TR>

</TABLE>

Поскольку во второй строке всего одна ячейка (см. рис. 2.

19

), на месте отсутствующей второй ячейки второй строки осталось пустое пространство.

Иногда это бывает полезно, но чаще требуется оставить пустую рамку незаполненной ячейки. Как это сделать? Если мы просто добавим в таблицу пару тегов

<TD> </TD>,

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

HTML

лишние пробелы игнорируются...

Рис. 2.

19

. Пример таблицы с “недостающей” ячейкой

Рис. 2.2

0

. Пример таблицы с пустой ячейкой

До сих пор мы рассматривали только атрибуты тега

<TABLE>

.

Однако теги

<TR>

и

<TD>

тоже могут иметь собственные атрибуты, такие, как

BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK=

и

ALIGN=.

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

VALIGN=,

с помощью которого можно управлять вертикальным выравниванием текста строки или ячейки. Этот атрибут может принимать значения

top

(выровнять по верхнему краю),

middle

(по середине) и

bottom

(по нижнему краю). Кроме того, в некоторых броузерах, например

Opera,

поддерживается также атрибут

NOWRAP,

запрещающий перенос текста ячейки на следующую строку.

Основные способы применения графики

В предыдущей главе мы рассмотрели несколько примеров создания веб-страниц. Вы, очевидно, уже обратили внимание, что все они смотрятся довольно “строго”. А все дело в том, что в них не использовались графические элементы. Сейчас, вообще говоря, в Интернете осталось не так много страниц без графических элементов, поскольку с помощью графики можно не только проиллюстрировать предлагаемый материал, но и немного “оживить” общее оформление, о чем речь пойдет в этой главе.

От автора

Меня часто спрашивают: “Легко ли создавать веб-страницы и как это делается? ” При этом выясняется, что под словом

создавать

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

Вообще говоря, нельзя однозначно ответить, легко ли этим заниматься. Все зависит от того, какую страницу вы создаете, и сколько готовы вложить в нее труда. Чем больше труда будет вложено, тем качественнее будет результат тем интереснее и эффектнее будет выглядеть ваша страница, тем больше посетителей она будет привлекать. Самое сложное при этом — придумать, заранее представить себе в уме (или на бумаге), какой результат надо получить. Если заранее детально не представить себе, что хочется создать, то, скорее всего, качественная и привлекательная веб-страница не получится, какие бы “навороченные” средства ни привлекались.

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

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

Панель редактирования

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

Edit (Правка), Browse (Просмотр) и Design (Оформление). На первой

HTML-

документ представлен в виде исходного текста. При этом происходит автоматическая подсветка тегов. Ссылки и якоря выделяются темно-зеленым цветом, графические теги — бордовым, остальные теги — темно-синим. Теги встроенных сценариев выделяются коричневым цветом, а встроенные функции и другие зарезервированные слова и элементы языка сценариев — полужирным начертанием. Различными цветами подсвечиваются также и стилевые блоки, что намного облегчает восприятие и позволяет “ на лету” устранять случайные ошибки. Все цвета можно изменить по желанию, выбрав в меню Options (Параметры) команду Settings (Настройки) и, далее, нажав кнопку Edit Scheme (Правка цветовой схемы) в окне Editor

Color Coding (Изменить

Цветовая маркировка).

При ручном вводе

HTML-текста,

происходит автоматическая проверка правильности введенных тегов (если этого не происходит, ее можно включить, установив флажок Options > Settings

Validation

Tag validation (Параметры

Настройки

Проверка

Проверка тегов). При вводе заключительного ограничителя тега (>) программа проверяет правильность тега. Если тег правильный, в строке состояния отображается запись Tag validated (Тег проверен). В противном случае строка состояния подсвечивается красным цветом и в сопровождении одного из системных звуков Windows в строке состояния появляется надпись, поясняющая, что такой тег не существует или его использование не рекомендовано в текущей версии

HTML.

Если эстетичность кода вас не очень заботит, то можно смело игнорировать сообщения о нерекомендованных тегах.

Однако совершенно не обязательно вводить теги вручную. Для облегчения работы можно использовать функцию Tag Insight (Построитель тегов). Если она выключена, включите ее установкой флажка Options

Settings

Editor

Tag Insight

>

Enable Tag Insight (Параметры

>

Настройки

>

Редактор

>

Построитель тегов

>

Задействовать построитель). В этом случае через две секунды

после ввода символа начала тега (время можно изменить в том же разделе настроек Options

>

Settings > Editor

>

Tag Insight) откроется раскрывающийся

список доступных тегов. Остается только выбрать нужный. Этот же механизм можно использовать при вводе функций сценариев JavaScript.

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

>

Settings

>

Editor

>

Tag Completion (Параметры

>

Настройки

>

Редактор

>

Завершение тегов). В этом случае при вводе, например, тега BODY>, сразу вместе с ним автоматически вводится тег </BODY>. Можно также включить функцию Options

>

Settings

>

Editor

>

Auto Completion (Параметры > Настройки

>

Редактор

>

Автозавершение) для автоматического закрыта кавычек, комментариев

HTML

и пр.

Кроме этого в программе предусмотрена возможность автоподстановки для шустрого ввода часто повторяющихся элементов кода. Каждому такому элементу соответствует краткая комбинация символов, при наборе которой и нажатии комбинации клавиш CTRL+J автоматически вводится полный текст элемента. Например, при наборе

dt4

и нажатии комбинации CTRL+J запись dt4 автоматически заменяется на:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Аналогично, набрав

scriptj

и нажав комбинацию CTRL+J, можно получить следующий блок:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

<!--

</SCRIPT>

Согласитесь, что автоподстановка экономит немало времени, особенно когда мы можем сами задать нужные “сокращения” для часто используемых фрагментов кода. Задание сокращений выполняют командой Options > Settings

>

Editor

>

Code Templates

>

Add (Параметры

>

Настройки

>

Редактор

>

Шаблоны кода

>

Добавить).

Большинство клавиатурных сокращений, знакомых пользователям по другим программам, например текстовым процессорам, в веб-редакторе Homesite дают ожидаемый результат. Например, традиционное применение к выделенному фрагменту полужирного начертания шрифта с помощью комбинации клавиш CTRL+B, или курсивного начертания комбинацией CTRL+I, а также подчеркивание текста комбинацией CTRL+U, здесь также работает. При этом выделенный фрагмент обрамляется соответствующими тегами.

Переключатели

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

<INPUT>

с атрибутом TYPE="radio". В группу будут объединены те переключатели, теги которых имеют одинаковые значения атрибута NAME=. Например, в данном случае мы можем написать так:

<INPUT TYPE="radio" NAME="Sex" VALUE="М">Мужской <INPUT TYPE="radio" NAME="Sex" LABEL="F">Женский

Как видите, значение атрибута NAME= одинаково у обоих тегов

<INPUT>

, поэтому пользователь не сможет выбрать оба пункта одновременно (при выборе одного из пунктов выбор предыдущего отменяется). Кстати, в этом примере изначально не выбран ни один из пунктов. Если же надо, чтобы какой-либо пункт был выбран заранее, то необходимо в соответствующем теге <INPUT> установить атрибут CHECKED, например, вот так:

<INPUT TYPE="radio" NAME°"Sex" VALUE="F" СНЕСКЕD>Женский

Установка этого атрибута сразу у нескольких переключателей одной группы смысла не имеет, поскольку при выводе на экран при этом будет отмечен только последний из них.

Подготовка графических кнопок

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

<BODY>: BODY { text-align: center; background: url("Zmages/back7.jpg") ; }

Поскольку все содержимое нашей страницы будет размещено по ее центру, мы определили стилевое свойство text-align: center прямо для основного эле мента страницы < BODY>. Теперь, чтобы заголовок и пояснительный текс'1 не “терялись” на достаточно пестром фоне, определим для них “бордюры ” и фоновый цвет:

H1 { border-color: #0063CE;

border-style: groover- border-width: thick;

padding: 5px; background-color: #ACEDFF; width: 16em;

} SPAN { border-color: #FF63CE; border-style: ridge;

border-width: medium; padding: 5px; background-color: #FCEDFF; width: 60%; font-size: 20px;

}

Имеется в виду, что мы заключим пояснительный текст в тег

<SPAN>

. Tenepь напишем основной текст страницы:

<BODY>

<Н1>ПОИСКОВЫЕ МАШИНЫ</Н1>

<SPAN>Если вы ищете в Интернате какую-либо информацию, вам помогут следующие сайты:</SPAN>

<А HREF="http://www.altavista.corn" TARGET="_blank"> <IMG SRC="Images/altavista.Jpg" WIDTH="192" HEIGHT="40" BORDER="0" ALT="Altavista"></A><BR>

видите, пока что ничего нового. Результат показан на рис. 7.13. Согласясь, что это выглядит немного лучше, чем предыдущий вариант. Однако теперь нужно сделать то, ради чего мы все это начали — подсветить кнопки гиперссылок при наведении на них мыши.

Рис. 7.13. Страница графически оформленных гиперссылок

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

Подготовка рисунков в программе Adobe Photoshop

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

Основное окно программы представлено на рис. 3.21. Обратите внимание на несколько вспомогательных панелей, расположенных в рабочей области. Самая главная из них — Панель инструментов. Инструменты программы

Рис. 3.8. Основное окно программы Adobe Photoshop

Подготовка рисунков в программе Xara Webstyle

Мелкие графические элементы оформления, которые мы рассматривали в разделе 3.3, удобно готовить в программе, которая называется Xara WebStyle. Эта программа узкоспециализирована — она предназначена только . для создания мелких графических элементов оформления, и ни для чего другого. Такая узкая специализация — одновременно и достоинство, и

недостаток. Достоинство — потому что даже неподготовленный пользователь может быстро сделать в ней все, что нужно. Недостаток — потому что, если у вас богатая фантазия, в скором времени вы исчерпаете ее возможности и вам станет “тесно” в ее рамках. Однако помните, что вы все равно сможете воспользоваться этой программой для получения промежуточного результата, который впоследствии можно “довести до ума” в полноценном графическом редакторе.

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

• обычные заголовки (Headings);

• трехмерные заголовки (3D Headings);

• фоновые рисунки (Backgrounds);

• кнопки (Buttons);

• графические маркеры (Bullets);

• горизонтальные полосы-разделители (Dividers).

Подсказка для читателя

И в качестве последнего штриха давайте добавим подсказку для пользователя. Пусть, когда он начнет прокручивать страницу вручную (с помощью полосы прокрутки), в строке состояния отобразится такая подсказка: Вы можете перемещаться к нужной букве, используя клавиатуру'. Это можно сделать, используя обработчик событий, реагирующий на прокрутку страницы (есть и такой!). Он называется onScroll:

Кстати, один раз появившись, подсказка так и останется в строке состояния, но в данном случае в этом нет ничего плохого. Строка состояния — место не самое заметное, так что подсказка в ней выглядит вполне корректно. Вот чего делать не надо, так это использовать бросающиеся в глаза методы типа alert:

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

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

<В>

</В>

. Вместо этого для тега

<DT>

заранее определено стилевое свойство font-weight: bold;.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>Словарь терминов</ТIТLЕ>

<STYLE> BODY ( background-color: #EAEAEA; color: black;

} A:link, A:active, A:visited { color: #7A3F51;}

DT { font-weight: bold; } </STYLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">



</SCRIPT>

</HEAD>

<BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="window.status= 'Вы можете перемещаться к нужной букве, используя клавиатуру!'">

<Н1><А NAME="Top">Cловарь терминов</А></Н1>

<HR ALIGN="left" WIDTH="40%">

<НЗ> <А HREF="#BukvaA">A</A>

<А HREF="#BukvaB">Б</A> <А HREF="#BukvaV">B</A>

<А HREF="#BukvaG">Г</A> <А HREF="#BukvaD">Д</A>

<А HREF="#BukvaE">E</A> </НЗ> Для перемещения к соответствующей букве вы можете использовать клавиатуру

<HR ALIGN="left" WIDTH="40%">

<Н1><А NAME="BukvaA">A</A></Hl>

<DL> <DT><A NAME="avtentich">AБTEHTИЧECKИЙ КАДАНС</А>

<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой

<DT>

<A NAME="aliquot">AЛИKBOTHЫE СТРУНЫ</А>

<DD>резонирующие струны, к которым исполнитель не прикасается во время игры

<DT><A NAME="atakta">ATAKTA</A>

<DD> гармонический элемент на басу нижнего или верхнего вводного тона

</DL> <SMALLXA HREF="#Top">B начало</А>

</SМАLL> <HR ALIGN="'left" WIDTH="40%">

<H1><A NAME="BukvaB">Б</A></Hl>

<DL> <DT><A NAME="bagatel">БАГАТЕЛЬ</A>

<DD>небольшая нетрудная для исполнения пьеса <DT>

<A NAME="bartok">БAPTOKOBCKOE ПИЦЦИКАТО</А>

<DD>сильный щипок струны с последующим ударом о струны о гриф <DT>

<A NAME="bonang">БОНАНГ</A> <DD>Ha6op из 10-12 гонгов разного размера </DL>

<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaV">B</A></Hl> <DL>

</DL> <SMALL>

<A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaG">Г</A></Hl>

<DL> </DL> <SMALL><A HREF="#Top">B Haчano</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaD">Д</A></Hl>

<DL> </DL>

<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaE">E</A></Hl>

<DL></DL> <SMALL>

<A HREF="#Top">B начало</A></SMALL>

</BODY>

</HTML>

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

Поля для ввода текста

Чтобы создать однострочное текстовое поле, нужно также воспользоваться тегом

<INPUT>

, но уже с атрибутом TYPE="text". При этом его ширина задается с помощью атрибута SIZE=. Чтобы программе обработки данных (или человеку, который будет в этих данных разбираться) было понятно, какие данные к какому полю относятся, желательно для каждого поля указать атрибут NAME=. В данном случае мы запрашиваем у пользователя его имя, поэтому пусть значением этого атрибута будет слово Имя (по-английски тоже Name):

При этом атрибут VALUE= определяет, что будет изначально написано в текстовом поле. Обратите внимание на то, что атрибут SIZE= определяет только видимую ширину текстового поля, но вовсе не ограничивает количество вводимых пользователем символов. Если же надо ввести такое ограничение, то следует пользоваться атрибутом MAXLENGTH=.

— Хорошо, — скажете вы, — но как пользователь узнает, что от него требуется ввести в это поле?

Чтобы дать ему “подсказку”, можно просто написать ее текст перед текстовым полем:

Ваше имя: <INPUT TYPE="text" NAME="Name" УАШЕ="Аноним" SIZE="30">

Однако лучше воспользоваться тегом

<LABEL>

, который был введен в Internet Explorer версии 4. Он гарантирует привязку метки к полю ввода. В нем нужно указать единственный атрибут FOR=, значение которого должно содержать имя поля ввода:

Теперь давайте создадим многострочное текстовое поле для ввода мнения клиента об услугах фирмы. Для этого необходимо использовать тег <TEXTAREA>. В нем можно с помощью атрибутов COLS= и ROWS= определить количество символов в строке и число строк текстового поля:

Как видите, здесь мы также определили атрибут NAME=. А поскольку это текстовое поле является многострочным, мы применили еще и стилевое свойство vertical-align, чтобы “подсказка” пользователю расположилась по центру (по умолчанию она располагается внизу).

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

</TEXTAREA>

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

Теперь давайте добавим еще одну “традиционную” кнопку, при нажатии на которую все поля формы очищаются (или приобретают исходные значения, определенные атрибутом VALUE= — в данном случае при ее нажатии в поле Ваше имя появится запись Аноним). Такую кнопку можно создать с помощью тега

<INPUT> с атрибутом <TYPE="reset">:

<INPUT TYPE="reset" VALUE ="Очистить форму">

Как и в случае с кнопкой Submit, значение VALUE= здесь определяет надпись на кнопке. Если этот атрибут не установлен, на кнопке будет написано: Reset. Давайте посмотрим, что v нас получается в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Baш отзыв</ТIТLЕ>

<STYLE> BODY { background-color: #D2FFFF;

color: #003737; background-image: url("Images\grad2.jpg");

background-position: right;

background-repeat: repeat-y;

} HI { text-align: center } A:link,A:active,A:visited {

color: #006A6A;

} A:hover { font-weight: bold; text-decoration: none;

} .hdr { position:

absolute;

left: 50px;

top:

10px;

text-align:

center;

font-family:

OdessaScriptFWF, fantasy; font-size: 60px;

font-weight: 900;

width: 90%;

height: 100px;

letter-spacing: 0.05em;

line-height: 100px;

filter: shadows- border:

10px outset #003163;

color: #3163CE; }

.1ft {

position: absolute;

font-size: meduim;

left: 10px;

top: 160px;

width: 160px;

height: 400px;

overflow-x: visible;

} .Ink {

border-width: thick;

border-style: ridge;

margin: 10рх;

padding: 5px;

border-color: #319CFF;

background-image: url("Images\backlnkl.jpg") ; color: red;

text-align: center; }

.Ink A {

text-decoration: none; color: white;

} .logo {

position: absolute;

left: 150; top: 220;

z-index: -5;

} </STYLE>

</HEAD>

<BODY>

<DIV CLASS="hdr">Фиpмa «ЛEHTЯЙ»</DIV>

<DIV CLASS="rght">

<DIV CLASS="lnk">

<A HREF="main.html">УСЛУГИ</A>

</DIV> <DIV CLASS="lnk">

<A HREF="prices .html">ЦЕНЫ</A></DIV>

<DIV CLASS="lnk">

<A HREF="forml .html">ФOPMA 3AKA3A</A> </DIV>

<DIV CLASS="lnk">

<A HREF="history.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3рх; ">КОМПАНИИ</SРАN></А>

</DIV>

<DIV CLASS="lnk">KHHГA OT3ЫBOB</DIV>

</DIV> <DIV CLASS="lft">

<Н1>Ваш отзыв с наших услугах</Н1>

<DIV ALIGN="center">

<FORM ACTION="http://cgi.lentyay.corn/guest.cgi" METHOD="post">

<LABEL FOR="Name">Bame имя:</LABEL>

<INPUT TYPE="text" NAME="Name" VALUE="Аноним" SIZE="30">

<BR>

<LABEL FOR="Opinion">Baшe мнение:</LABEL>

<TEXTAREA COLS="30" ROWS="4" NAME="Opinion" STYLE="vertical-align: middle; "></TEXTAREA>

<BR> <INPUT TYPE="submit" VALUE="Отправить">

<INPUT TYPE="reset" VALUE="Очистить форму"> </FORM> </DIV> </DIV>

<IMG CLASS="logo" SRC="Imqes/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">

</BODY>

</HTML>

Результат работы этого кода показан на рис. 7.1. Как видите, пользователь имеет возможность ввести свое имя и выразить свое мнение в текстовых полей, а нажав кнопку Отправить, может послать эти данные серверу.

Получение информации от пользователя

В качестве примера давайте рассмотрим страницу для отзывов клиентов об услугах гипотетической фирмы “Лентяй”. Это, конечно, будет не совсем то, что обычно подразумевается под книгой отзывов на сайте. Просто мы предоставим пользователю возможность ввести информацию и отправить ее на сервер (как уж она будет там обрабатываться, мы сейчас рассматривать не будем).

Итак, возьмем заголовок и правую часть веб-страницы. Только добавим ссылку на страницу “Услуги” и снимем ее с “Книги отзывов”:

<DIV CLASS="lnk"><A HREF="main.html">УСЛУГИ

</A>

</DIV> <DIV CLASS="lnk">

<A HREF="prices .html">ЦЕНЫ

</A>

</DIV>

<A HREF="forml.html">Форма 3AKA3A

</A>

</DIV>

<A HREF="history.html">История

<SPAN STYLE="letter-spacing: -3px; ">KOMПAHИИ

</SPAN>

</A>

</DIV>

<DIV CLASS="lnk">Книга OT3ЫBOB</DIV>

А в левую часть страницы давайте поместим форму. Для этого сначала добавим специальный тег

<FORM>,

без которого невозможно будет отправить данные на сервер обычными средствами. Здесь нам потребуется указать атрибут METHOD=, с помощью которого броузер определяет способ отправки данных: в виде “добавки” к строке URL (метод get) или в виде блока данных (метод post). В качестве значения атрибут ACTION= необходимо указать URL-адрес сервера, куда отправятся данные. Здесь можно также указать адрес электронной почты (с префиксом mailto:) — в этом случае данные формы отправятся по указанному адресу. В нашем случае давайте укажем гипотетический URL-адрес сервера cgi.lentyay.com, где обработка данных формы будет происходить с помощью какого-нибудь CGJ-сценария:

В конце формы должен стоять закрывающий тег </FORM>. Все, что находится внутри, можно будет сообщить серверу. Для отправки данных формы традиционно используется кнопка с названием Submit (Отправить). Для ее создания можно использовать тег <INPUT> с атрибутом TYPE="submit":

Атрибут VALUE= при этом определяет надпись на кнопке. Если его не задать, то на кнопке будет написано Submit. Какие же данные будут отправлены? Для начала давайте спросим у пользователя его имя, выделив для этого небольшое однострочное текстовое поле, и мнение об услугах фирмы, для чего выделим многострочное текстовое поле.

Предварительная загрузка графических объектов

Однако это еще не все. Представьте себе, что пользователь навел мышь на кнопку-гиперссылку. Что должно произойти? Естественно, замена рисунка. Но откуда броузер возьмет новый рисунок? Начнет загружать через Интернет, поскольку до этого новый рисунок не был загружен в память. В результате на некоторое время отобразится пустой прямоугольник, и весь эффект пропадет!

Чтобы этого избежать, придется написать код для предварительной загрузки в память всех картинок. Это можно сделать при помощи объявления объектов

типа Image:

var imgl=new Image(); imgl.src='Images/altavista.jpg'; var img2=new Image(); img2.src='Images/altavista2. jpg';

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

Посмотрим, что у нас получилось в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Страницца гиперссылок</TITLE>

BODY { text-align: center- background: url("Images/back?.jpg") ;

} H1 { border-color: #0063CE;

border-style: groove;

border-width: thick;

padding: 5px; background-color:

#ACEDFF; width: 16em;

} SPAN { border-color:

#FF63CE;

border-style: ridge;

border-width: medium; padding: 5px;

padding: 5px;

background-color:

#FCEDFF;

width: 60%;

font-size: 20px;

} IMG { margin: 7px; }

-->

</STYLE>

var imgl=new Image() imgl.src='Images/altavista.jpg';

var img2=new Image() img2.src='Images/altavista2.jpg'; var img3=new Image() img3.src='Images/yahoo.jpg'; var img4=new Image() img4.src='Images/yahoo2.jpg'; var img5=new Image() img5.src='Images/yandex.jpg'; var img6=new Image() img6.src='Images/yandex2.jpg'; var img7=new Image() img7.src='Images/aport.jpg'; var img8=new Image() img8.src='Images/aport2.jpg';

function changel() { var a=window.event.srcElement; if (a.tagName=="IMG")

a.src=a.src.substring(0,a.sre.length-4)+"2"+ a.src.substring(a.sre.length-4, a.src.length);

} function change2() { var a=window.event.srcElement; if (a.tagName=="IMG")

a.src=a.src.substring(0,a.src.length-5) + a.src.substring(a.src.length-4, a.src.length) ;

} document.onmouseover=changel; document.onmouseout=change2 ; //--> </SCRIPT> </HEAD>

<ВОDY>

<Н1>ПОИСКОВЫЕ МАШИНЫ</Н1>

<SPAN>Если вы ищете в Интернете какую- либо информацию, вам помогут следующие сайты::<SPAN>

<BR><BR>

<А HREF="http://www.altavista.corn" TARGET="_blank"> <IMG SRC="Images/altavista.jpg" WIDTH="192" HEIGHT="40" BORDER="0" ALT="Altavista"></A><BR>

<A HREF="http://www.yahoo.corn" TARGET="_blank">

<IMG SRC="Images/yahoo.jpg" WIDTH="147" HEIGHT="40" BORDER="0" ALT="Yahoo! "></A><BR>

<A HREF="http://www.aport.ru" TARGET="_blank">

<IMG SRC="Images/aport.jpg" WIDTH="135" HEIGHT="40" BORDER="0" ALT="AnopT"></A><BR>

<A HREF="http://www.yandex.ru" TARGET="_blank">

<IMG SRC="Images/yandex.jpg" WIDTH="129" HEIGHT="40" BORDER="0" ALT="Яndex"></A>

</BODY>

</HTML>

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

Предварительный просмотр страницы

Вторая вкладка называется Browse (Просмотр). На ней страница отобража ется в том виде, в котором она будет видна в броузере. Собственно говоря, кроме как для просмотра, эта вкладка ни для чего больше не предназна чена. Однако у нее тоже есть несколько особенностей.

Дело в том, что программа Homesite может использовать для отображения содержимого веб-страницы либо свой встроенный броузер, либо броузеры Internet Explorer и Netscape. При этом никакие внешние программы не запус каются — все содержимое отображается в окне редактирования, хотя фак тически при этом могут работать Internet Explorer или Netscape.

Встроенный броузер рекомендуется использовать только в тех случаях, когда нет ни Internet Explorer версии хотя бы 3.01 (более ранние версии этого броузера не способны встраиваться в Homesite), ни Netscape. Встроенный броузер не поддерживает ни фреймы, ни сценарии, ни большинство ново введений HTML 4.0. Кроме того, у него иногда (хотя и редко) возникают проблемы с отображением русских шрифтов.

Напротив, использовать броузеры Internet Explorer или Netscape в качестве внутреннего средства просмотра очень удобно, поскольку так можно про- сматривать содержимое своей веб-страницы в “настоящем” броузере, не запуская внешнюю программу. Впрочем, просмотр страницы во внешнем броузере тоже предусмотрен. Для этого служит кнопка со значком External Browser (Внешний броузер) на инструментальной панели. Нажав на нее, можно увидеть список внешних броузеров, установленных на компьютере, и, выбрав из списка какой-либо броузер, просмотреть в нем содержимое страницы. Если никаких броузеров в списке нет, их можно добавить вручную командой Options > Configure External Browsers (Параметры > Настройка внешних броузеров). А для того чтобы указать, какой броузер будет использоваться в качестве внутреннего, выберите из меню Options (Параметры) пункт Settings (Настройки) и далее в левой части открывшегося окна — пункт Browse (Просмотр).

Дретья вкладка панели редактирования — Design (Оформление).
Ее средства предоставляют редактор веб-страниц, работающий по принципу WYSIWYG. Поскольку своего встроенного WYSZWYG-редактора в программе Homesite нет, используются средства, встроенные в броузер Internet Explorer 4.01. Если на компьютере нет этой (или более поздней версии) программы, средствами вкладки Design (Оформление) воспользоваться нельзя. Однако мы и так не рекомендуем ими пользоваться, поскольку после этого весь исходный код может быть переформатирован, вплоть до замены одних тегов другими, без возможности восстановления. Кроме того, с отображением русских шрифтов здесь тоже иногда возникают проблемы. Кстати, если выбрать в меню Options (Параметры) пункт Settings (Настройки) и далее пункт Design (Оформление), то можно установить флажок Disable (hide) design tab (Скрыть вкладку Оформление), чтобы вообще убрать эту вкладку с экрана. На всякий случай.

В программе Homesite есть еще много интересных возможностей, таких, как автоматическое изменение размера окна внутреннего броузера (до 640х480 или 800х600), поиск и замена текстовых фрагментов во всех файлах проекта или папки, отображение внутреннего броузера под окном редактирования (с “почти синхронным” отображением вносимых изменений) и пр. Однако обо всем невозможно рассказать в небольшой главе. Мы познакомили вас с основными возможностями этой замечательной программы, а остальные вы легко обнаружите сами в процессе работы.

использования элемента управления Tabular Data

Использование элементов управления Internet Explorer имеет свои преимущества и недостатки. Преимущества заключаются в существенном расширении возможностей веб-страницы, а недостатки — в возможности просмотра только в Internet Explorer. Но поскольку этим броузером пользуется очень большое число посетителей WWW, применение элементов управления заслуживает внимания.

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

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

Наложение текста

Иногда хочется встроить в изображение текстовый материал. Допустим, вы задумали сделать открытку для дня рожденья . Логично разместить на ней надпись “Happy Birfday”. Хорошо бы ее разместить не как попало, а вдоль линии бортика моста, чтобы не разрушать композицию.

Рис. 3.31.

Рис. 3.32.

Итак, приступим. Из палитры инструментов выберите инструмент Текст (Type Tool) и щелкните мышью там, где предполагается начать -текстовое сообщение. Появится окно ввода текста (рис. 3.33).

Рис. 3.33. Ввод текста в программе Adobe Photoshop

В нем определим цвет будущего текста Happy Birthday, его размер (в данном случае 40 пункта) и шрифт (мы выбрали Regular). Теперь можно в нижнюю часть окна вводить сам текст. Во время ввода можно наблюдать появление текста прямо на рисунке. Закончив ввод, нажмите ОК. То, что получилось, представлено на рис. 3.34.

Как видите, текст не поместился на рисунке. Поэтому возьмем инструмент Двигатель (Move Tool) и подвинем текст влево так, чтобы он занял всю ширину рисунка. Теперь давайте придадим нашему тексту объемность. Выберите из меню Слой (Layer) пункт Эффекты (Effects) и дайте команду Рельефность (Bevel and Emboss). Немного настроив эффект “на глаз”, нажмите ОК. Получится приблизительно то, что изображено на рис (далее)

Рис. 3.34. Наложение текста на фотографию

Для переворота текста служит команда Правка >Трансформ > Вращать (Edit >Transform > Rotate). Вокруг нашего текста появятся маркеры, за которые его легко повернуть, нажав кнопку мыши и перемещая ее указатель. Повернув текст на нужный угол, нажмите клавишу ENTER. Появится диалоговое окно с запросом, надо ли преобразовать изображение. Ответьте на него утвердительно.

Для большей естественности нужно нашему тексту добавить перспективу. Однако функция Трансформ > Перспектива (Transform > Perspective) недоступна для текстовых слоев. Поэтому придется сначала создать новый слой командой Слой > Новый > Слой (Layer > New > Layer), затем сбросить флажок видимости фонового слоя (тот, что в виде глаза на служебной палитре слоев) и выбрать в меню Слой (Layer) команду Склеить с видимым (Merge Visible).
При этом наш текстовый слой склеится с новым слоем, а фон останется в отдельном слое. После этого восстановите отображение фона.
Убедившись, что выделен наш новый слой, а не фон, можете дать команду Правка > Трансформ > Перспектива (Edit > Transform > Perspective). Перспективиза-ция, как и вращение, тоже выполняется низуально с помощью маркеров, которые появляются вокруг изображения. После трансформации нам останется еще немного подкорректировать наклон текста командой Правка > Трансформ > Наклон (Edit> Transform > Skew). В результате получится изображение, подобное представленному на рис. 3.35.
Здесь все было бы хорошо, но слово “Welcome” вылезает куда-то в небо и портит картину. Его необходимо подви-

Рис. 3.35. Придание тексту рельефности

Рис. 3.36. Надпись с наклоном
нуть вниз. Для того чтобы это сделать, сбросьте флажок видимости у слоя Фон (Background) и выберите инструмент многоугольного выделения — только с его помощью (или с помощью инструмента Лассо) удастся выделить слово “Welcome”. Выделив его, верните флажок видимости фоновому слою и с помощью инструмента Двигатель (Move Tool) подвиньте выделенное слово вниз, (рис. 3.37). Теперь наше изображение выглядит вполне пристойно.

объединения ячеек таблицы

Рис. 2.21. Пример объединения ячеек таблицы

закрывающими тегами и могут иметь различные атрибуты, например BGCOLOR=, ALIGN=, VALIGN=.

А для ячеек заголовка таблицы вместо тега

<TD>

обычно используют тег

<ТН>

. В принципе, это одно и то же, однако в ячейках

<ТН>

текст по умолчанию выравнивается по центру и отображается полужирным начертанием шрифта.

Для примера добавим в нашу учебную таблицу заголовок и заключение:

<TR><TH COLРАN="3">УЧЕБНАЯ ТАБЛИЦА</ТН></ТR> </THEAD>

<TBODY>

<TR>

<TD WIDTH="33%"> первая ячейка</ТD>

<TD WIDTH="33%"> вторая ячейка</ТD>

<TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую</ТD>

</TR>

<TR>

строки

<TR COLSPAN="2">единственная ячейка второй строки, объединяющая оба столбца</ТD>

</TR>

<TR>

<ТD>Это первая ячейка третьей строки</ТD>

<TD>A это вторая ячейка третьей строки</ТD>

</TR>

</TBODY> <TFOOT BGCOLOR="Yellow">

<TR><TD COLSPAN="3" ALIGN="center"SMALL >Понравилось делать?</Small></ТD>

</ТR> ><Small>Понравилось таблицы</TFOOT>

</TABLE>

Рис. 2.22. Использование заголовка

Результат показан на рис. 2.22. Осталось добавить, что использование обсуждавшегося выше атрибута RULES= со значением "groups" подразумевает именно эти “группы”: заголовок, основное содержание и заключение таблицы, обозначенные тегами

<TFOOT>.

Подготовка круглой фотографии

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

На панели инструментов выберите инструмент простого выделения (Rectangular Marquee Tool). Нажмите и удерживайте на его значке левую кнопку мыши, пока не появится небольшое меню из не- скольких подобных значков. Эти инструменты называются альтернативными. Выберите из набора альтернативных инструментов инструмент круглого или овального выделения (Elliptical Marquee Tool). лите на рисунке нужную часть, а затем нажмите комбинацию клавиш SHIFT+CTRL+1 или выберите в меню Выделить (Select) пункт

Рис. 3.11. Исходная

Рис. 3.12. Очистка

Рис. 3.13. фотография ненужных областей.

Кадрированньй снимок

Обратно (Inverse). При этом на рисунке будет выделено все, кроме обведен ной области. Затем в меню Правка (Edit) выберите пункт Очистить (Clear). Результат показан на рис. 3.12.

Чтобы удалить ненужные пустые области изображения, снова откройте набор альтернативных инструментов выделения и выберите инструмент простого прямоугольного выделения (Rectangular Marquee Tool). Обведите круглую или овальную фотографию и дайте команду Изображение > Обрезание (Image > Crop). Результат показан на рис. 3.13.

Теперь осталось сохранить эту фотографию так, чтобы цвет фона вокруг нее превратился в прозрачный. Удобнее и нагляднее всего это сделать следующим образом. Дайте команду Изображение > Режим > Индекс цвета (Images Mode > Indexed Color) В открывшемся диалоговом окне установите необходимое количество цветов. В случае фотографии обычно желательно установить адаптированную (Adaptive) палитру из 256 цветов. Если помните, это максимальное количество цветов для формата GIF. Нажмите кнопку ОК для преобразования цветового режима и затем дайте команду Файл > Экспорт > GIF89a (File > Export > GIF89a Export). Появится диалоговое окно Экспорт опции (GIF 89a Export Options), представленное на рис. 3.14. Возьмите в нем инструмент Пипетка (Eyedropper Tool) и щелкните им на фоне изображения. Оно окрасится в серый цвет, который условно принят для воспроизведения прозрачного цвета. При необходимости можно с помощью пипетки еще некоторые цвета преобразовать в цвет, назначенный прозрачным. Затем нажмите на кнопку ОК и все. Остается только ввести имя файла.

Рис. 3.14. Выбор цвета, который будет отображаться как прозрачный

Подготовка рисунков произвольной формы

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

Можно сделать и это, однако следует заметить, что в качестве исходного материала при этом лучше выбирать такой, где контуры объектов визуально не сливаются с фоном, иначе работа будет очень кропотливая. Фотография из предыдущего примера для этого плохо подходит, а вот такая, как на рис. 3.15, — вполне.

Рис. 3.15. Подготовка изображения произвольной формы

Для выделения объектов произвольной формы в программе Adobe Photoshop имеются такие инструменты, как Лассо (Lasso Tool) и Волшебная палочка (Magic Wand Tool). С помощью инструмента Лассо (Lasso Tool) можно вручную провести контур выделения произвольной формы, что в нашем случае возможно, хотя и трудоемко. С помо- щью Волшебной палочки (Magic Wand Tool) можно мгновенно выделить объект по контуру, но только при условии, что контур заполнен одним цветом или близкими цветами. Если же контур размыт (как бывает на большинстве реальных фотографий), то иногда программа определяет его не так, как человеческий глаз. В любом случае можно добавить к выделенной области еще кусочек, если щелкнуть волшебной палочкой, удерживая клавишу SHIFT.

В нашем примере можно, несколько раз щелкнув волшебной палочкой в левой верхней части фотографии, выбрать все, что находится слева и сверху от лица, и затем дать команду Правка > Очистить (Edit > Clear). На рис. 3.29 можно заметить, что все-таки в очищенной области остался неко торый “мусор”. Его легко почистить, используя инструмент Ластик (Eraser). Увеличьте масштаб изображения, нажав несколько раз комбина цию клавиш CTRL++. Чтобы “стереть” ненужные детали, доста точно поводить по ним инструментом при нажатой кнопке мыши, только не забудьте выбрать подходящий размер ластика. Для этого в служебной палитре Цвета/Каталог/Кисти (Colors/Swatches/Brushes) выберите вкладку Кисти (Brushes) и в ней подберите подходящий размер инструмента.

Пример простейшего серверного сценария

Теперь приведем простой пример сценария, который запускается прямо сервере. Для чего это нужно? Область применения серверных сценариев довольно широка. Подобные сценарии могут, например, на ходу генерироать HTML-mep, и пересылать его броузеру. Но мы рассмотрим пример в котором сценарий будет принимать и обрабатывать отправленную пользователем форму.

Помните, когда мы создавали страницу гипотетической фирмы “Лентяй”, в ней был раздел “Книга отзывов”? Там пользователю предлагалось ввести свое имя в одно текстовое поле (с именем Name), а свое мнение — в другое (многострочное) текстовое поле (с именем Opinion). Затем, после нажатия кпопки Отправить заполненная форма отправлялась на сервер. Но что с ней происходит там?

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

Сценарий, исполняемый на сервере, может быть написан на различных языках программирования и использовать различные технологии. Напримеp, он может использовать технологию ASP (Active Server Pages) или специальную серверную редакцию языка JavaScript. Однако чаще всего такие сценарии пишутся на языке Perl (и используют технологию CGI — Common Gateway Interface). Мы сейчас не будем рассказывать об этом подробно, а просто проиллюстрируем, каким может быть простейший Perl- сценарий. Для облегчения восприятия давайте сначала напишем его построчно, а затем приведем полный текст.

Итак, в первой строке мы должны указать местоположение интерпретатоpa языка Perl на сервере. Его можно узнать у администратора сервера. Если сервер работает под управлением Windows NT, а не UNIX или Linux, эта строка будет проигнорирована. Обычно она выглядит так:

#! /usr/bin/perl Теперь, чтобы мы могли легко считывать данные HТМL-формы, надо написать еще одну строку:

require "cgi-lib.pl";

Эта строка подключает специальную библиотеку функций (cgi), позволяющих, в частности, легко взаимодействовать с формами, отправленными пользователем.
Без этой библиотеки при написании сценария пришлось бы сильно попотеть.
Поскольку мы будем отправлять пользователю подтверждение успешного завершения работы, необходимо предварительно указать тип текста, который сценарий будет посылать пользователю:
print "Content-type: text/html\n\n";
Конечно, этот сценарий совершает довольно примитивную работу. Однако его рассмотрение может дать некоторое представление о том, что за пределами
HTML, CSS и JavaScript открываются новые просторы Web-технологии логий. И мы надеемся, что после прочтения этой книги наши читатели не просто научатся создавать динамические Веб-страницы, но и заинтересуются другими существующими веб-технологиями.
И последний совет: чтобы научиться свободно обращаться с HTML/CSS JavaScript, как можно больше экспериментируйте самостоятельно! Начинать можно с изменений и “улучшений” приведенных в книге примеров однако затем попробуйте создавать страницы самостоятельно “с нуля” или “ почти с нуля”. А если вы увидите в WWW какую-либо интересную и кра-сивую страницу, обязательно посмотрите на ее код, вникните в то, как она сделана. Такой опыт тоже очень полезен.
На этом мы, пожалуй, закончим наше путешествие в мир веб-технологий. Удачи вам, дорогой читатель, и хороших веб-страниц!

Совмещение изображений

С помощью программы Adobe Photoshop можно делать и более интересные манипуляции. Рассмотрим такой пример. Допустим, у нас имеется фотография, изображенная на рис. 3.17. В то же помещение мы желаем поместить яблоко с фотографии на рис. 3.17, то есть сделать простейший монтаж.

Рис. 3.17. Первая исходная фотография для монтажа

Рис. 3.18. Вторая исходная фотография для монтажа

Сначала с помощью инструмента Волшебная палочка

Рис. 3.18. Обтравка изображения по контуру

Итак, выберем из меню Правка (Edit) пункт Трансформ (Transform) и далее дадим команду Перевернуть по горизонтали (Flip Horizontal). В результате получится то, что изображено на рис (ниже). Конечно, делать зеркальные изображения людей, строго говоря, не совсем корректно, поскольку доказано, что зеркальное изображение воспринимается совсем не так, как обычное. Однако для данного случая его можно считать приемлемым. Плохое освещение скрадывает отличия зеркального образа, но для композиции он хорошо подходит из-за наклона вправо.

Рис. 3.19. Двухслойное изображение в программе Photoshop

— А дело в том, что здесь мы подошли к одному из самых замечательных свойств программы Adobe Photoshop — умению работать со слоями. Любое изображение может состоять из нескольких слоев, которые можно произвольно располагать один над другим. Если в изображении присутствуют несколько слоев, то все манипуляции происходят только с тем слоем, который выделен на служебной палитре Слои (Layers). В нашем случае в момент вставки изображения из буфера обмена для него автоматически был создан новый слой. Таким образом, сейчас в нашем рисунке два слоя (рис. 3.21). Тот слой, который выделен, считается текущим. Поэтому все, что мы делаем, сейчас относится только к нему. Кстати, обратите внимание на то, что один из слоев на рис. 3.21 называется Фон (Background). Такой слой обязательно присутствует в каждом многослойном рисунке, и при этом он является самым нижним.

Рис. 3.20. Эффект зеркального отражения одного из слоев

Рис. 3.21. Список слоев в программе Photoshop

Рис. 3.22. Числовые преобразования в программе Photoshop
Итак, попробуем разместить наше вставленное изображение. Для того чтобы его уменьшить, дайте команду Правка > Трансформ > Число (Edit > Transform > Numeric). Она открывает диалоговое окно (рис. 3.22), в котором можно задать параметры преобразования текущего слоя. В нашем случае следует оставить включенным только флажок Масштаб (Scale). Установите также флажок Соблюдать пропорции (Constrain Proportions) и задайте ширину объекта 70% (при этом высота также автоматически изменится). Затем возьмите инструмент Двигатель (Move Tool) и с его помощью передвиньте изображение девушки, как показано на рис. 3.23.
Получается не совсем то, что надо. Яблоко находится как бы дальше от нас, чем остальное, однако ее изображение перекрывает их! Что делать? Можно, конечно, выделить из фона изображение, скопировать его на новый слой и поместить этот слой впереди всех остальных. Кстати, для упражнения можете проделать такую работу. Но мы для простоты просто поместим изображение девушки чуть левее, чтобы оно не перекрывало другие близкие к наблюдателю объекты.
Однако при этом это изображение будет находиться чуть ближе к наблюдателю, стало быть, его надо снова увеличить. Чтобы не терять качество, лучше не увеличивать уменьшенное изображение, а вернуться на несколько шагов назад и уменьшить его в меньшей степени. Чтобы вернуть назад откройте

Рис. 3.23. Перемещение слоя

Рис. 3.24. Изменение масштаба
всех выполненных операций. Выделив любую из них, можно вернуться к тому состоянию, в которой она выполнялась.
Вернувшись к моменту уменьшения изображения, снова дадим команду Правка > Трансформ > Число (Edit > Transform > Numeric) и зададим масштаб изображения, равным 85% (рис. 3.24). Теперь передвинем изображение яблока (рис. 3.25). Что ж, теперь общая картина стала гораздо естественнее. Но все же той тени, которую мы “взяли с собой”.

Чтобы было легче выделить “старую” тень, щелкните на значке глаза слева от слоя Фон. При этом фон исчезнет с экрана. Увеличьте изображение девушки с помощью комбинации CTRL++. Теперь нужно выбрать подходящий инструмент для выделения. Если вы хорошо и гибко умеете водить мышью, можете выбрать инструмент Лассо (Lasso), но, на наш взгляд, здесь удобнее воспользоваться инструментом многоугольного выделения (Poligonal Lasso Tool). Этот инструмент альтернативен инструменту Лассо (Lasso). Его выбирают, как и все альтернативные инструменты, наведя указатель мыши на текущий инструмент, нажав кнопку и дождавшись открытия меню альтернативных инструментов.
Щелкая по вершинам многоугольника, выделите “старую” тень и удалите ее командой Правка > Очистить (Edit > Clear). Теперь опять щелкните слева от слоя Фон в служебной палитре Слои (Layers), чтобы вернуть на экран фоновое изображение (рис. 3.25).

Рис. 3.25. Перемещение слоя за рамки кадра

Рис. 3.26. Удаление “лишней” тени из слоя
Теперь осталось собственно наложить тень. Из меню Слой (Layer) выберите пункт Эффекты (Effects) и далее команду Наложить тень (Drop Shadow). Откроется диалоговое окно настройки эффектов (рис. 3.27). Обратите внимание на то, что если отмечен флажком пункт Применить (Apply), то, настраивая эффект, можно непосредственно наблюдать результат его действия на изображение.

Градиентная заливка

Рис. 3.27. Окно настройки эффектов применительно к слою изображения
В соответствии с освещенностью на фоновой фотографии выберите режим Мягкий свет (Soft Light). При этом следует немного уменьшить заданную прозрачность, например до 67%. Опытным путем подберите угол отбра сывания тени (Angle) — в нашем случае — 146%, а также “дистанцию” (Distance) (удаленность от основного изображения, в нашем случае — 13 пикселов) и глубину размытия (здесь — 11 пикселов). На рис. 3.28 пока зано, что должно получиться в результате.
Наконец, обрежем правый и нижний края изображения, чтобы создать подобие художественной композиции.

Эта операция называется кадриро ванием. Взяв инструмент для прямоугольного выделения, выделим нуж ную часть изображения и дадим команду Изображение > Обрезание (Image > Crop). Окончательный результат показан на рис. 3.29). Теперь оста лось только сохранить свою работу. Чтобы сохранить расположение слоев и их эффекты, необходимо использовать формат PSD. Но для представления в Интернете он не подходит, поэтому рекомендуется сохранить свою работу дважды. Первый раз она сохраняется в формате PSD — этот файл можно использовать впоследствии для внесения в него новых изменений. Рис. 3.28. Наложение тени на слой если потребуется. Перед вторым изображения

Рис. 3.28. Законченная композиция после кадрирования
сохранением (в формате JPEG) необходимо “спрессовать” все слои в один, так как раздельно хранить информацию о слоях можно только в формате PSD. “Сплющивание” изображения выполняют командой Слой > Склеить все слои (Layer > Flatten Image). После этого его можно сохранить в любом формате, в том числе и в формате JPEG.

Создание градиентного фона

Рис, 3.9. Инструменты, программы Adobe Photoshop

В программе Adobe Photoshop выберем из меню Файл (File) пункт Новый (New). Появится диалоговое окно создания нового файла (рис. 3.10). Внем нас больше всего интересует задание размера будущего изображения, его ширины и высоты. В раскрывающихся списках выберите единицы измерения — пикселы, так как нас интересует именно экранный размер изображения.

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

“Вся ширина экрана” — понятие растяжимое, однако редко кто смотрит веб-страницы в разрешении, большем, чем 1024х768, поэтому для большинства случаев размера 1024 точки по горизонтали будет достаточно.

Рис. 3.10. Создание нового изображения в программе Photoshop

Итак, определяем ширину рисунка: 1024 и высоту: 2 пиксела. Остальные параметры нам сейчас не важны. После щелчка на кнопке ОК откроется окно рисунка. Чтобы лучше видеть результаты своих действий, желательно увеличить масштаб изображения, нажав несколько раз комбинацию клавиш CTRL++.

Теперь надо выбрать цвета для создаваемого градиента, например, как в нашем примере: зеленый и светло-зеленый. Для выбора первого цвета дважды щелкните на значке Основной цвет (Foreground Color) — откроется окно выбора цвета (Color Picker), в котором можно визуально выбрать необходимый цвет. Для выбора второго (конечного) цвета градиента дважды щелкните на значке Цвет фона (Background Color).

Выбрав цвета, можно определить характер градиента. Для этого выберите инструмент Градиент (Linear Gradient Tool) на Панели инст- рументов. Далее, удерживая в нажатом положении клавишу SHIFT, проведите линию от левого края рисунка до приблизительно 200-й слева точки

1
. Когда кнопка мыши будет отпущена, вы увидите градиентную заливку. Осталось только сохранить рисунок.
Однако, выбрав пункт Сохранить (Save) из меню файл (File), вы, скорее всего, увидите, что среди предлагаемых форматов, в которых можно сохранить изображение, есть только формат PSD (собственный формат программы Adobe Photoshop). Это происходит потому, что наше изображение содержит более одного слоя. Выберите из меню Слой (Layer) команду Склеить все слои (Flatten Image), после чего вновь попытайтесь сохранить файл. Теперь в окне сохранения вам будет предложено множество форматов, из которых следует выбрать формат JPEG. Далее требуется выбрать качество сжатия по десятибалльной шкале. В данном случае для приемлемого результата достаточно выбрать значение 3 или 4.
И еще несколько замечаний по поводу первого примера. Во-первых, избран ный нами размер 1024 точки по горизонтали явно избыточен, ведь нари сованный нами градиентный перелив заканчивается уже на 200-й точке. Если вы используете каскадные таблицы стилей (CSS) на веб-странице, у вас будет возможность НЕ повторять фоновый рисунок по горизонтали. Тогда можно спокойно создать рисунок шириной 200 точек и запомнить конечный цвет градиента (разумеется, не на глаз, а в цифровом выра жении — в окне выбора цвета отображаются значения R, G, В, то есть крас ной, зеленой и синей составляющих). А затем помимо фонового рисунка определить на веб-странице цвет фона, совпадающий с конечным цветом градиента. Далее можно таким же способом назначить вертикальный градиент, однако делать это следует только если используются каскадные таблицы стилей CSS, поскольку лишь в этом случае можно не повторять фоновый рисунок по вертикали.
И, наконец, можно создать многократный градиентный перелив. Для этого, выбрав инструмент Градиент (Linear Gradient Tool), выберите в служебной палитре Навигатор/Инфо/Опции (Navigator/Info/ Options) вкладку Опции линейного градиента (Linear Gradient Options) и нажмите кнопку Правка (Edit)— откроется диалоговое окно Редактор градиента I (Gradient Editor), представленное на рис. 3.11.Здесь можно по желанию добавить в любое место градиента любой цвет, а также цвет пере- днего плана и цвет фона, пользуясь, соответственно, одним из трех значков настройки параметров градиента. Все изменения немедленно отображаются на экране. Таким образом, наш градиент может переливаться не двумя, а тремя, четырьмя и более цветами. Когда найдете нужное сочетание цветов, нажмите кнопку ОК и затем, как и ранее, проведите линию инструментом Градиент (Linear Gradient Tool).

Украшение изображения мелкими деталями

Иногда возникает потребность немного приукрасить имеющееся изображение, чтобы придать ему своеобразный колорит. Рассмотрим такой пример. Взгляните на фотографию. Чтобы придать этому изображению некий “морозный” колорит, неплохо украсить ее передний план узором в виде снежинок. Для этого попытаемся нарисовать снежинку и разбросать ее изображение по фотографии, чтобы получился как бы вид сквозь узорное стекло.

Чтобы нарисовать снежинку, создайте новый файл изображения небольшого размера, например 50х50 пикселов. Теперь возьмите инструмент Линия (Line Tool). Если его нет на панели инструментов, то знайте, что он альтернативен инструменту Карандаш (Pencil Tool) — там его и ищите. Когда инструмент выбран, откройте служебную палитру Опции линии (Line Options) и задайте в поле Вес (Weight) значение 2 (пик села) — это будет ширина наших линий. Установите флажок Сглаживание (Anti-alised) и сбросьте флажки Старт (Start) и Конец (End) в разделе Стрелки как было сделано в предыдущем примере, дав команду Правка > Трансформ > Число (Edit > Transform > Numeric), а затем установив масштаб, например, 85%. Теперь еще раз выделим сне жинку и снова выберем в контекстном меню палитры кистей пункт Заданная кисть (Define Brush) — получим вторую кисть. Повторим все это еще раз, и получим третью кисть. Теперь у нас в палитре кистей имеются три кисти в виде снежинок разных размеров.

Установим белый цвет в качестве основного и попробуем рисовать новыми кистями. Для нашего случая лучше всего подойдет инструмент Аэрограф (Airbrush Tool). Дело в том, что при рисовании этим инструментом цвет будет тем интенсивнее, чем дольше держится нажатой кнопка мыши. Если выбрать из палитры кистей одну из снежинок и щелкнуть мышью в любом месте на фотографии, то на месте щелчка появится снежинка. А если отпустить кнопку мыши не сразу, снежинка получится более белой. Так можно, щелкая по разным местам фотографии, быстро “размножить” на ней снежинку.

Кстати, в качестве упражнения можно проделать следующее. Дважды щелкните в палитре кистей на изображении снежинки и установите параметр Spacing большим, чем 100% (например, 125%). Теперь возьмите инструмент Кисть (Brush Tool) и попробуйте просто вести ею по рисунку. За кистью будет оставаться след в виде шлейфа снежинок. Таким образом, созданные кисти можно в полной мере использовать для рисования. А параметр Spacing задает расстояние между объектами при “рисовании непрерывной линии”.

Заливка и заполнение объектов текстурами

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

Допустим, у нас есть вид, изображенный на рис. 3.29. Если потребуется, к примеру, сделать основу на фотографии белоснежное покрытие, достаточно выбрать белый цвет в качестве основного, а затем в выбрать инструмент Заливка (Paint Bucket Tool). Щелкнув несколько раз в разных местах дороги, изображенной на фотографии, можно получить следующий результат (рис. 3.30). Как видите, здесь даже не требуется беспокоиться о предварительном выделении нужной области, так как заливка осуществляется по контуру. Правда, если присмотреться, то все равно неизбежно придется удалять “мусор” (здесь это удобно сделать с помощью инструмента Карандаш (Pencil Tool).

Выбрав инструмент для прямоугольного выделения, выделите область на газоне так, чтобы в нее попала только трава. Затем дайте команду Прав ка > Определить образец (Edit > Define Pattern). При этом, как будто, ничего не произой-

Рис. 3.29. Исходный снимок

Рис. 3.30. Результат заливки

Инструмент Карандаш (Pencil Tool) альтернативен инструменту Линия (Line Tool). О том, как выбирают альтернативные инструменты (если их нет на панели инструментов), вы уже знаете.

Теперь нажмите комбинацию клавиш CTRL+D, чтобы снять выделение.

Выберите инструмент Узорный Штамп (Pattern Stamp Tool). На палитре кистей выберите круглую кисть подходящей величины (например, шестую во втором ряду — мягкую кисть диаметром 27 пикселов). Теперь можно, нажав кнопку мыши, перемещать указатель по рисунку дороги — при этом дорога будет “зарастать” травой. В результате получится изображение, похожее на представленное на рис. 3.31.

Кстати говоря, можно взять образец текстуры и из любого другого изображения. Например, если бы потребовалось дорогу на рис. 3.29 залить водой, которой на этой фотографии нет, то достаточно было бы найти другой пейзаж с водным пространством (рис. 3.32), выделить прямоугольную область, содержащую только воду, и сделать ее образцом текстуры командой Правка >Определить образец (Edit > Define Pattern). Затем можно открыть файл нашего пейзажа, выделить дорогу с помощью Волшебной палочки (возможно, придется щелкнуть несколько раз, удерживая клавишу SHIFT), чтобы ненароком не налить воды, куда не нужно, и, выбрав инструмент Узорный штамп (Pattern Stamp Tool).

Прочие вкладки

Следующая вкладка. Snippets (Отрывки), предназначена для создания коротких шаблонных текстов для ваших веб-страниц, их каталогизации и быстрой вставки в документы.

Затем идет вкладка Help (Справка), которая, скорее всего, в комментариях не нуждается — это великолепный справочник по использованию программы Homesite, а также языку

HTML

и различным дополнительным программам, которые можно бесплатно получить в Интернете.

И, наконец, последняя вкладка — Tag Inspector (Средство просмотра тегов). Она позволяет просмотреть теги, имеющиеся в HTML-документе, в виде иерархической структуры. Выделив какой-либо тег в этом “дереве”, можно получить в нижней части вкладки полный список доступных атрибутов и событий этого тега. Список организован в виде таблицы, в которую можно добавить какие-либо значения. Все сделанные изменения тут же отображаются на панели редактирования документа (но не сразу в момент ввода, а после перехода на другое поле таблицы).

Такие возможности, вкратце, предоставляет панель Resource Tab. Кстати, с помощью клавиши F9 ее можно быстро убрать с экрана, если захочется развернуть панель редактирования во всю ширину окна программы. Вернуть панель Resource Tab на экран можно повторным нажатием клавиши F9.

Программы для сжатия звуковых фрагментов

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

Произвольный выбор текста

Однако в таком виде эта страница представляется еще не совсем завер шенной, поскольку, когда на экране отобразится текст рассказа “Молоток”, вернуть обратно текст сказки не удастся (если, конечно, пользователь

сообразит нажать в броузере кнопку Reload (Обновить), но рассчитывать это некорректно). Поэтому надо сделать еще одну мнимую гиперссылку, которая загружала бы текст сказки. Поскольку стиль уже определен, сде-лать это совсем нетрудно:

<SPAN CLA3S="lnk" onClick="show_ivan()">Сказка &1аquо;Иван- царевич и серый заяц&гадио;</SPAN>

Одновременно нужно написать функцию show_ivan(), во всем аналогичную функции show_hammer(). Она должна просто заменять значение свойства document.all.rasskaz.innerHTML обратно на текст сказки:

function show_ivan'() { document.all.rasskaz.innerHTML='

<Н2>ИВАН- ЦАРЕВИЧ И СЕРЫЙ ЗAЯЦ<BR>

<SPAN STYLE="font-style: italic;"> сказка</SPAN></Н2>

<DIV CLASS="epig">Hy, погоди!..

<DIV CLASS="pdps">(Из мультфильма </DIV></DIV>

</DIV><BR><DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV><DIV СЬАЗЗ="аЬ">Долго ли, коротко ли. . ,</DIV><DIV CLASS="ab">H они жили долго и счастливо и умерли в один день .</DIV><HR>';

обращаем ваше внимание на то, что .HTML-код, находящийся внутри функции, должен представлять собой одну строку, то есть в нем не должно ододержаться ни одного служебного символа перевода строки, которые мы для удобства иногда вставляем в обычный HTML-текст. Если такие символы в нем останутся, то интерпретатор JavaScript “подумает”, что мы просто написали одну незавершенную строку, а потом еще и начали дру-гую строку с неопределенного объекта.
Соответственно, при этом появятся вообщения об ошибках, и страница вообще не будет “работать”.

Честно говоря, определять такие длинные строки в “теле” функции можно, нo неудобно, и потому не принято. Лучше сразу определить переменные, содержащие эти строки, и из функций обращаться уже к этим перемен-

var hammer='<H2>MOnOTOK<BRXSPAN STYLE="font-style: italic;"> paccкaз</SPAN></H2>

<DIV STYLE="text-align: right; ">

<DIV CLASS="ерig">Мы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>

<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа)

var ivan=' <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ 3AЯЦ <BR>

<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2>

<DIV STYLE="text-align: right;">

<DIV CLASS="epig">Hy, погоди!..

<DIV CLASS="pdps">(H3 мультфильма)</DIV> </DIV></DIV><BR>

<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера. </DIV><DIV CLASS="аЬ">Долго ли, коротко ли. . .</DIV><DIV CLASS="ab">И они жили долго и счастливо i умерли в один день .</DIV><HR>';

function show_hammer() { document.all.rasskaz.innerHTML=hammer; function show__ivan() ( document.all.rasskaz.innerHTML=ivan; }

Это, во-первых, намного нагляднее, а кроме того, если одна из этих “ строк ” вдруг потребуется еще в какой-либо функции, то можно будет легко к ней обратиться по имени переменной, не вводя всего этого “крокодила” заново. Кстати, теперь, когда у нас есть две мнимые гиперссылки на оба текста, можно первоначально не отображать на экране ни один из них:

<DIV ID="rasskaz"> </DIV>

Такое начало будет смотреться эффектнее (рис. 7.14), а заодно мы избавимся

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

<BODY onLoad="show ivan()">

Рис. 7.14. На этой странице изначально не видно ни одного из рассказов

Теперь еще одна маленькая деталь. Хорошо бы сделать так, чтобы мнимая

гиперссылка на тот текст, который уже отображается на экране, в выглядела бы, как гиперссылка. Этого легко достичь, поскольку вид определен как класс в таблице стилей. Итак, определим еще один класс для “посещаемой в данный момент” части страницы:

.

Ink() { color: rgb(29,29,24) ;

text-decoration: none; cursor: default;

}

В данном случае мы определили внешний вид текущего текста таким же, как вид обычного текста, однако можно было придумать и какое-нибудь особое начертание). Теперь модифицируем наши функции show_ivan() и show_hammer() так, чтобы они изменяли класс (а значит, и внешний вид) наших мнимых гиперссылок:

function show_hammer()

{ document, all .rasskaz . innerHTML=hanimer;

document.all.ivanink.className="lnk";

document.all.hammerlnk.className="lnk0";

} function show_ivan() { document.all.rasskaz.innerHTML=ivan;

document.all.ivanink.className="lnk0";

document.all.hammerlnk.className="lnk";

}

Обратите внимание на то, что для доступа к атрибуту CLASS= нужно исполь- повать свойство className, а не class, поскольку слово class является заре- зервированным ключевым словом JavaScript.

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

Во-первых, при наличии, например, 100 сменяющихся текстов, при щел чке на одной из мнимых гиперссылок нужно определить, какой из них нужно вернуть внешний вид гиперссылки (класс Ink).

Придется опреде лить глобальную переменную и каждый раз записывать в нее имя исполь зованной ссылки. Например, если назвать эту переменную, допустим, oldink, то наша функция show_hammer() приобретет такой вид: function show_hammer()

{ document.all.rasskaz.innerHTML=hammer;

document.all[oldink].className="lnk";

document.all.hammerlnk.className="lnkO";

oldlnk='hammerlnk'; }

При этом лучше сразу при инициализации присвоить переменной oldlnk имя одного из идентификаторов, чтобы не делать лишнюю проверку, не является ли oldink пустой строкой. Да и вообще, если сменяющихся текстов много, лучше не писать для отображения каждого отдельную функ цию, а просто написать обобщенную функцию show(), которая может полу чать идентификатор ссылки в качестве аргумента или даже просто брать его из значения свойства window.event.srcElement.

Вторая тонкость заключается в следующем. Не забывайте, что все тексты при данном подходе загружаются из Интернета сразу (а щелчки на мни мых гиперссылках только управляют их отображением). Поэтому при большом их количестве на странице при первоначальной загрузке не будет отображено вообще ничего, пока они все не загрузятся. Для пользователя это может означать длительное ожидание перед пустым экраном, то есть весьма сомнительное удовольствие. Лучше попытаться этого избежать. Например, можно расположить эти тексты уже после тега

<BODY>

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

Простейшее форматирование текста

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

В качестве примера продолжим форматирование страницы нашего несуществующего писателя Сергея Сергеева. Предположим, что за вступительным текстом, который мы начали форматировать в разделе 1.2, мы должны расположить два его рассказа (он же писатель!). Каждый рассказ имеет название, подзаголовок и небольшой эпиграф.

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

Простейшие примеры

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

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

(“бегущая строка”, поддерживается только в Internet (Explorer) и

<BLINK>

(мигающий текст, поддерживается только в Netscape). Существует определенное в стандарте CSS2 стилевое свойство text-decoration: blink; (мигающий текст) и псевдокласс A:hover (изменение вида якоря/гипер- ссылки при наведении на них указателя мыши). Но это, конечно, еще не динамика.

Простейшие средства создания веб-страниц

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

Как уже говорилось выше, веб-страницы кодируются на языке гипертекстовой разметки —

HTML.

Вообще говоря, чтобы написать

HTML-файл,

достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для

MS-DOS,

vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)

Рис. 1.7. Код HTML в текстовом редакторе Блокнот

Однако в очень простых текстовых редакторах типа Блокнота весь

HTML-текст

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

HTML,

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

Работа с файлами

Первая вкладка — Files (Файлы) — самая очевидная в использовании. На ней представлен каталог файлов, имеющихся на компьютере. Двойной щелчок мыши на значке файла открывает его на панели редактирования. Для HTML-файлов кроме значков и имен на этой вкладке представляются также заголовки их веб-страниц.

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

Обратите внимание на то, что помимо файлов, расположенных на локальном компьютере, средства вкладки Files (Файлы) позволяют также открывать и редактировать файлы, расположенные на удаленном сервере, используя доступ по протоколу

FTP.

Делается это следующим образом.

1. При установке программы Allaire Homesite 4.5 в системную папку /Мой компьютер автоматически добавляется элемент под названием Allaire FTP & RDS. В верхней части вкладки Files (Файлы) вместо имени диска можно выбрать этот элемент. При этом пункт Allaire FTP & RDS появится также в средней части вкладки.

2. Щелкните на этом пункте правой кнопкой мыши и выберите из контекстного меню пункт Add FTP Server (Добавить в сервер FTP). При этом откроется диалоговое окно Configure FTP Server (Настройка сервера FTP), в котором надо ввести следующие параметры удаленного сервера.

• Название сервера (любое — это делается для вашего удобства).

• Полный сетевой адрес без префикса ftp://. Например, для странички, расположенной в сообществе Geocities, это будет ftp. geocities. corn.

• Имя рабочего каталога. В большинстве случаев это просто символ

“/”.

При этом не забудьте установить флажок Relative from server-assigned directory (Относительно каталога, выделенного сервером). Без этого символ

“/”

будет означать не ваш пользовательский каталог, а корневую папку всего сервера, куда, как правило, запрещен доступ всем, кроме администратора сервера.

• Свое регистрационное имя и пароль для доступа на удаленный сервер.

• Полный

http-адрec

своей веб-странички (тот, который вы набираете в броузере для ее просмотра).

• Некоторые дополнительные данные.

3. После нажатия на кнопку ОК в средней части вкладки Files (Файлы) появится символ папки, расположенной на удаленном компьютере. Если соединение с Интернетом установлено, то ее можно открыть и оперировать с ее файлами практически так же, как и с файлами, находящимися на локальном компьютере.

Такой подход очень удобен для внесения незначительных исправлений в веб-странице. Если же надо внести много изменений или создать веб-страницу “с нуля”, лучше всю работу провести на локальном компьютере, а у

же

потом загрузить на сервер всю страницу целиком с помощью какой-либо FTP-программы

Работа с проектами

Вторая слева вкладка панели Resource Tab называется Projects (Проекты). Она очень похожа по внешнему виду на предыдущую, но позволяет собрать файлы, физически размещенные в разных местах, в одну или несколько “виртуальных папок”. Гак можно обеспечить себе более удобный доступ к файлам, чтобы не искать каждый раз нужную папку на диске.

В верхней части вкладки можно быстро выбрать свой проект из раскрывающегося списка, точно так же, как на предыдущей вкладке мы выбирали диск. Рядом расположены три командные кнопки: Open Project (Открыть проект, New Project (Создать проект) и Deployment Wizard (Мастер доставки). Первые две кнопки в пояснениях не нуждаются, а с помощью третьей можно открыть Мастер доставки. С его помощью можно отправить веб-страницу на один или несколько серверов через локальную сеть или Интернет. Имеется даже возможность генерации сценария, который будет через определенные промежутки времени автоматически производить доставку обновленных версий вашей странички на удаленный сервер.

Различия между броузерами

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

Конечно, простые странички (типа той, которую мы написали в предыдущем разделе) будут, скорее всего, одинаково выглядеть во всех броузерах. Однако, чем сложнее страничка, тем больше различий в ее восприятии разными программами просмотра. Эти различия могут касаться расположения элементов на странице, реакции на действия пользователя, внешнего вида отдельных элементов и т. д. Создавая веб-страницу, полезно просматривать ее в различных броузерах и корректировать код в соответствии с тем, что вы увидели. Нередко может случиться, что страничка, очень красиво выглядящая в одном броузере, будет просто нечитаемой в другом. Создание сложной странички, которая почти одинаково смотрится в разных броузерах, — задача не из легких. Поэтому мы бы рекомендовали ориентироваться на какой-либо один броузер, а совместимость с другими поддерживать только на минимальном уровне. Еще можно создавать копии страничек для разных броузеров, однако здесь тоже есть небольшая проблема, о которой расскажем чуть ниже.

И, наконец, самое простое решение: создав страничку, написать в ее начале что-нибудь типа: “Лучше всего смотрится в таком-то броузере” и поместить рядом ссылку, щелкнув на которой, пользователь мог бы загрузить себе нужную программу просмотра. Однако надо иметь в виду, что далеко не все пользователи, скорее всего, захотят это сделать, и не только потому, что не все броузеры бесплатны. Во-первых, не у всех есть возможность загружать большие объемы данных из Интернета, а во-вторых, многие уже привыкли пользоваться какой-то программой просмотра, и совет срочно установить себе другую вызовет у них в лучшем случае недоумение.

Размещение блоков текста

Вообще-то “Лентяй”, хоть и гипотетическая, но все же фирма, поэтому на ее сайте должны присутствовать несколько разделов, без которых корпоративный сайт уже не воспринимается, типа “О компании”, “Услуги” (или “Продукция”), “Цены”, “Новости” и прочие. Поэтому мы тоже снаб дим для начала эту страничку блоком соответствующих гиперссылок:

<DIV CLASS="lnk">УСЛУГИ</DIV> <DIV CLASS="lnk">

<DIV CLASS="lnk"><A HREF="forml .html">ФОРМА 3AKA3A</A></DIV>

<DIV CLASS="lnk"><A HREF="history.html">ИСТОРИЯ КОМПАНИИ</А> </DIV>

<DIV CLASS="lnk"><A HREF="guestbook.html">KHИГА OT3ЫBOB</A></DIV>

Размещение элементов на веб-странице и навигация по сайту

В те недавние времена, когда технология WWW только появилась на свет и стали создаваться первые веб-страницы, одной из самых больших проблем при их создании была невозможность произвольного размещение элементов на странице. Другими словами, все содержимое страницы par полагалось последовательно. Но веб-дизайнерам все чаще и чаще хотелось. расположить материал так, чтобы создать подобие композиции и облегчить восприятие. Самый простой и распространенный пример — разместить ссылки на разделы сайта в левой части, а сами разделы — в правой При этом в нижней части страницы можно разместить, например, какую либо статическую информацию, которая не меняет свое местоположеши в зависимости от количества материала на странице. Но как это осуществить?

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

• использование фреймов;

• использование таблиц;

• и позиционирование независимых слоев.

Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге — с использования фреймов.

Реакция на наведение

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

<DIV>Этот текст изменит свой цвет, если навести на него мышь!</DIV>

Чтобы при наведении мыши что-нибудь произошло, нужно добавить обработчик событий onMouseOver:

<DIV onMouseOver="">Этот текст изменит свой цвет, если навести на него мышь</DIV>

Итак, обработчик добавлен, однако пока он ничего не делает. В кавычки нужно поместить то действие, которое он должен выполнить. А что он дол жен сделать? Изменить цвет этого блока

<DIV>

, например, на красный. Доступ к свойствам текущего элемента осуществляется с помощью ключевого слова this:

<DIV onMouseOver="this.style.colors'red">Этот текст изменит свой цвет, если навести на него мышь!</DIV>

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

<DIV onMouseOver="this.style.color"'red'" onMouseOut="this.style.color='black'">Этот текст изменит свой цвет, если навести на него мышь!</DIV>

Теперь при наведении указателя мыши на эту строку, ее цвет изменится на красный, а при уводе указателя — обратно на черный. Можно также использовать и доступ по названию элемента. Например, если установить в этом блоке атрибут ID="text1", то можно будет написать так:

<DIV ID="textl" onMouseOver="textl.style.color='red'" onMouseOut="textl.style.color='black'">Этот текст изменит цвет, если навести на него мышь!</DIV>

<DIV ID="textl" onMouseOver="document.all.textl.style.color='red'" onMouseOut="document.all.textl.style.color”'black'">Этот изменит свой цвет, если навести на него мышь!</DIV>

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

<HEAD>:

<HEAD>

<ТIТLЕ>Обработка событий мыши</ТIТLЕ>

<SCRIPT LANGUAGE="JavaScript">

function change() { document, all. textl. style. color="red";

} .function change2() { document.all.textl.style.color="black";

} //--> </SCRIPT> </HEAD>

а при определении обработчиков событий писать только имена функций:

<DIV ID="textl" onMouseOver="change()" onMouseOut="change2()">Этот текст изменит свой цвет, если навести на него мышь!</DIV>

Результат будет тот же, что и в прошлый раз.

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

<DIV ID="text2">Этот текст изменит свой цвет, если мышь навести на вторую строку!</DIV>

а потом соответствующим образом изменить функции:

function change() { document.all.textl.style.color="red";

document.all.text2.style.color="green";

} function change2() {

document.all.textl.style.coior="black";

document.all.text2.style.color="black"; }

Теперь при наведении мыши на вторую строку ее цвет будет изменяться на красный, а цвет третьей строки — на зеленый. К сожалению, здесь начинают сильно сказываться различия между броузерами. Доступ через метод documental! будет работать в Internet Explorer, но не сработает в Netscape. Чтобы этот пример мог работать в Netscape 6, необходимо доступ через метод document, all заменить на доступ через метод document.getElementByld( ). А как быть, если мы хотим, чтобы этот пример работал и в Internet Explorer, и в Netscape 6?