Применение длинной цитаты

Рисунок 2.5. Применение длинной цитаты

также отобразить и обычные типографские кавычки (“? ”) вместо машинописных (" "). Запись Книга « Путеводитель по Атлантиде &raquо; отобразится в броузере так:

Книга “Путеводитель по Атлантиде”

Теперь давайте представим себе, что нам надо воспроизвести на веб-страничке фрагмент кода-HTML и проиллюстрировать его отображение. Причем код HTML мы хотим выделить моноширинным шрифтом (как это обычно и делается, например, в этой книге). Для этого можно применить тег <CODE> , как показано ниже.

Если вы напишете следующий код: <br>

<code> <hr WIDTH="80%" SIZE="15">,

</code><br> то это отобразится так:

Нa Рисунок 2.6 показано, как это отобразится в броузере. Помимо тега <CODE> , обратите внимание на употребление специальных символов < и > для отображения угловых скобок,

Вместо тега <CODE> можно также употребить и тег <ТТ> . Разница между ними такая же, как между тегами <ЕМ> и <I> . То есть, тег <CODE> определяет логический фрагмент, который обычно выводится моноширинным!

То есть шрифтом, в котором все символы имеют одинаковую ширину, на манер пишущей машинки.

Применение гиперссылок для связей с удаленными серверами

Рисунок 2.8. Применение гиперссылок для связей с удаленными серверами

Помимо значения "_blank", атрибут TARGET= может принимать еще значения "_self", "_top" и "_parent"; его значением может также быть имя любого окна. Однако все это мы рассмотрим позднее, Пока же запомните только, что значение "_blank" вызывает загрузку странички в новое окно броузера, а значение "_self" — в то же окно, в котором был сделан щелчок на гиперссылке. Собственно говоря, значение "_self определено по умолчанию.

И еще одно: не следует слишком злоупотреблять значением TARGET="_blank", поскольку при множестве открытых окон броузера читатель в них может легко запутаться и у него останется негативное ощущение. А вообще, гиперссылки всегда очень помогают в навигации в Интернете. Их никогда не бывает слишком много.

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

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

Результат показан на Рисунок 2.9. Как видите, мы здесь не употребляли закрывающий тег </LI> . Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <U> , либо тег завершения списка </UL> или </OL>.

Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL> , или в списке есть элементы без тега <LI> ?

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

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

<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Т>

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

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

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

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

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

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

</UL>

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

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

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

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

</UL>

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

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

<OL>

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

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

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

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

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

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

нажав "Reply"

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

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

</OL>

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

</OL>

</body>

</html>

Результат показан на рис .2.10. Между прочим, при желании можно изменить вид маркера даже у отдельного элемента списка. Для этого следует установить атрибут TYPE= у тега <LI> . Однако это не будет смотреться очень хорошо, за исключением специальных случаев.

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

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

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

Применение стилей к основной части странички

Рисунок 4.7. Применение стилей к основной части странички

ная). Последние два значения, правда, пока воспроизводятся только в бро-узере Netscape 6. Мы выбрали значение ridge. Чтобы рамка не терялась на фоне больших букв, зададим свойство border-width: thick; (толстая рамка; еще можно указывать значения thin — тонкая и medium — средняя, а также задавать толщину в любых единицах). С помощью свойства border-color установим цвет рамки, по оттенку сочетающийся с фоном.

Поскольку в одном из обозначенных разделов мы всегда будем находиться, его название не будет являться гиперссылкой. Для него мы определили свойство color: red; (красный цвет текста). У гиперссылок, как вы помните, свой цвет.

Однако при этом придется сменить цвет гиперссылок на более светлый. Но будьте внимательны! Цвет гиперссылок нужно сменить только для класса Ink, потому что в других местах гиперссылки расположены на свет лом фоне, и их уже нельзя осветлять, иначе их не будет видно. Поэтому не (нужно переопределять свойства элемента <А> целиком. Нужно переопре делить некоторые его свойства только внутри класса Ink:

.Ink A{ text-decoration: none; color: white;

Такая запись делает как раз то, что нам нужно: в классе Ink для элемента <А> определяются некоторые новые свойства, а остальные остаются такими же, как и у всех элементов <А>. Заодно мы использовали свойство text- decoration: none;, чтобы снять подчеркивание с гиперссылок в этом блоке — в таком “кнопочном” оформлении оно неуместно.

Теперь все вроде бы нормально, однако одна из кнопок “вылезает” за пределы отведенного пространства (из-за слова “компании”). Можно, конечно, это пространство увеличить, но давайте лучше попытаемся немного “ужать” это слово. Есть такое стилевое свойство letter-spacing, которое задает дополнительное расстояние между буквами. Если это расстояние задать отрицательным, буквы расположатся теснее обычного:

<DIV CLASS="lnk"><A НRЕF="histогу.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3рх;">KOMПAHИИ</SPAN></A></DIV>

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

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

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

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

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

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

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

<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>

</HEAD>

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

<BR>

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

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

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

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

<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>

<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>

<DL>

</DL>

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

<DL>

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

</DL>

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

</DL>

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

</BODY>

</HTML>

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

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

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

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

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

Применение внутренних гиперссылок

Рисунок 2.7. Применение внутренних гиперссылок

Применение зачеркнутого текста

Рисунок 2.3. Применение зачеркнутого текста

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

Применение заголовочных стилей

Рисунок 2.2. Применение заголовочных стилей

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

Создание градиентного фона

Пример 1. Создание градиентного фона

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

Пример 2. Подготовка круглой фотографии

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

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

Подготовка рисунков произвольной формы

Пример 3. Подготовка рисунков произвольной формы

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

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

Совмещение изображений

Пример 4. Совмещение изображений

С помощью программы Adobe Photoshop можно делать и более интересные манипуляции. Рассмотрим такой пример. Допустим, у нас имеется фотография, изображенная на Рисунок 3.17. В то же помещение мы желаем поместить яблоко с фотографии на Рисунок 3.17, то есть сделать простейший монтаж.

Украшение изображения мелкими деталями

Пример 5. Украшение изображения мелкими деталями

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

Чтобы нарисовать снежинку, создайте новый файл изображения небольшого размера, например 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 задает расстояние между объектами при “рисовании непрерывной линии”.

Заливка и заполнение объектов текстурами

Пример 6. Заливка и заполнение объектов текстурами

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

Допустим, у нас есть вид, изображенный на Рисунок 3.29. Если потребуется, к примеру, сделать основу на фотографии белоснежное покрытие, достаточно выбрать белый цвет в качестве основного, а затем в выбрать инструмент Заливка (Paint Bucket Tool). Щелкнув несколько раз в разных местах дороги, изображенной на фотографии, можно получить следующий результат (Рисунок 3.30). Как видите, здесь даже не требуется беспокоиться о предварительном выделении нужной области, так как заливка осуществляется по контуру. Правда, если присмотреться, то все равно неизбежно придется удалять “мусор” (здесь это удобно сделать с помощью инструмента Карандаш (Pencil Tool).

Выбрав инструмент для прямоугольного выделения, выделите область на газоне так, чтобы в нее попала только трава. Затем дайте команду Прав ка > Определить образец (Edit > Define Pattern). При этом, как будто, ничего не произой-

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

Пример 7. Наложение текста

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

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

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

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

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

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

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

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

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

Пример простейшего серверного сценария

9.2. Пример простейшего серверного сценария

Теперь приведем простой пример сценария, который запускается прямо сервере. Для чего это нужно? Область применения серверных сценариев довольно широка. Подобные сценарии могут, например, на ходу генерироать 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 какую-либо интересную и кра-сивую страницу, обязательно посмотрите на ее код, вникните в то, как она сделана. Такой опыт тоже очень полезен.

На этом мы, пожалуй, закончим наше путешествие в мир веб-технологий. Удачи вам, дорогой читатель, и хороших веб-страниц!

странички с фоновым рисунком и иллюстрацией

Рисунок 3.3. Пример странички с фоновым рисунком и иллюстрацией

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

Кстати, тег <IMG> может иметь собственный атрибут ALIGN=, который управляет расположением рисунка относительно текста. В нашем примере это было не актуально, поскольку рисунок находился в отдельном блоке <DIV> . Но если рисунок “встроен” в текст, то есть несколько вариантов его расположения:

ALIGN="left" — текст обтекает рисунок, который располагается слева;

ALIGN="right" — текст обтекает рисунок, который располагается справа;

ALIGN="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop");

ALIGN="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle");

ALIGN="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста (можно также применять значение "absbottom" или "baseline").

Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Для этого в теге <IMG> используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальное и вертикальное “поля” рисунка.

И еще небольшое замечание: броузер Internet Explorer (версия 4 и выше) позволяет с помощью тега <IMG> загружать и просматривать также видеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYNSRC=, в качестве значения которого указать имя AVT-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинать проигрывание видео: "FILEOPEN" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателя мыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "О" означает бесконечное повторение, алюбое другое число указывает точное количество повторов.

Прочие вкладки

Следующая вкладка. Snippets (Отрывки), предназначена для создания коротких шаблонных текстов для ваших веб-страниц, их каталогизации и быстрой вставки в документы.

Затем идет вкладка Help (Справка), которая, скорее всего, в комментариях не нуждается — это великолепный справочник по использованию программы Homesite, а также языку HTML и различным дополнительным программам, которые можно бесплатно получить в Интернете.

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

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

Программы для сжатия звуковых фрагментов

5.2. Программы для сжатия звуковых фрагментов

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

Произвольный выбор текста

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

сообразит нажать в броузере кнопку 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 CLASS="ерig">Мы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>

<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа)

var ivan=' <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ 3AЯЦ <BR>

<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; }

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

Такое начало будет смотреться эффектнее (Рисунок 7.14), а заодно мы избавимся

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

Прокручиваемый список

Рисунок 7.2. Прокручиваемый список

Простейшая форма HTML

Рисунок 7.1. Простейшая форма HTML

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

Вы, вероятно, обратили внимание еще на один атрибут тега <SELECT> — атрибут SIZE=. Здесь его значение равно 1 (кстати, это значение определено по умолчанию, так что можно было этот атрибут и не указывать). Если указать значение, большее 1, то в окне броузера вместо раскрывающегося списка отобразится так называемый прокручиваемый список. На Рисунок 7.2 приведен пример прокручиваемого списка при атрибуте SIZE="3". Как видно, в данном случае в списке одновременно отображаются три строки (число одновременно отображаемых строк прокручиваемого списка и определяется с помощью атрибута S1ZE=). Если же надо дать пользователю возможность выбора сразу нескольких пунктов из списка, то в теге <SELECT> надо установить атрибут MULTIPLE=.

Простейшее форматирование текста

2.1. Простейшее форматирование текста

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

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

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

Простейшее использование JavaScript

Рисунок 6.1. Простейшее использование JavaScript

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

<SCRIPT> window.status = "Эта страница написана на JavaScript!"; </SCRIPT>

Результат можно увидеть на Рисунок 6.2. Теперь окно броузера абсолютно пустое! Но это и правильно, ведь мы же не вводили никакого текста. Зато если вы посмотрите на строку состояния, то увидите там нашу надпись. В этой строке всегда появляется значение, присвоенное объекту window.status. Знак равенства в JavaScript означает “присвоить значение”.

Простейшие примеры

6.1. Простейшие примеры

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

Какими же способами пишутся такие веб-страницы? Ясно, что с помощью обычных тегов особой динамики достичь нельзя. Существуют, конечно, теги <MARQUEE> (“бегущая строка”, поддерживается только в 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.2. Простой текст, загруженный в броузер

Работа с файлами

Первая вкладка — 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 (Мастер доставки). Первые две кнопки в пояснениях не нуждаются, а с помощью третьей можно открыть Мастер доставки. С его помощью можно отправить веб-страницу на один или несколько серверов через локальную сеть или Интернет. Имеется даже возможность генерации сценария, который будет через определенные промежутки времени автоматически производить доставку обновленных версий вашей странички на удаленный сервер.

Расчет факториалов и запрос к пользователю

Рисунок 6.5. Расчет факториалов и запрос к пользователю

Конечно, появление лишних диалоговых окон в некоторых случаях может отпугнуть пользователя, особенно если у него на полную громкость вклю чены звуковые колонки (вывод окон alert и confirm обычно сопровождается стандартными звуками Windows). Поэтому лучше бы воздерживаться от их применения. Вместо этого можно использовать динамическое измене ния содержимого страницы.

Различия между броузерами

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

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

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

Размещение блоков текста

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

<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>

Реакция на наведение

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

<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Е>

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?

Реакция на нажатие кнопки

Сначала добавим в тег <BODY> обработчики событий, реагирующие на нажатие кнопки мыши (не на щелчок, который состоит из нажатия и отпускания левой кнопки, а именно на нажатие) — onMouseDown, на отпускание кнопки — onMouseUp и на движение указателя мыши — onMouseMove:

Реакция на отпускание кнопки

Теперь давайте займемся функцией up_it(), выполняющейся при отпускании кнопки мыши. Собственно говоря, все, что нужно сделать — это проверить, передвигался ли какой-нибудь объект (то есть, содержит ли переменная moving какое-либо имя) и, если это так, присвоить этой переменной пустую строку, что будет означать “освобождение” рисунка: function up_it() ( if (moving!="") moving="";

Однако хорошо бы еще расположить рисунок не где попало, а точно в ячейке таблицы. Поскольку в этом случае его координаты относительно начала таблицы должны быть кратны 100, это довольно легко осуществить. Для этoгo достаточно округлить его до ближайшей сотни. Для округления можно использовать встроенный метод Math.round. Понятно, что он округляет не до сотен, а до целых чисел, поэтому текущие координаты рисунка перед округлением придется разделить на 100, а после округления — умно жить на 100. Кроме того, не забывайте, что кратность 100 мы определяем относительно начала таблицы, которое равно tstart по горизонтали и 100 но вертикали. Поэтому перед делением на 100 нужно еще вычесть из горизонтальной координаты значение tstart, а в конце снова его прибавить. Вот что у нас получается:

document.all[moving].style.pixelLeft= Math.round;(window.event.clientX-50-tstart)/100)*100+tstart+l;

document.all[moving].style,pixelTop= Math.round((window.event.clientY-50)/100)*100+1;

Как видите, все довольно просто. Здесь мы прибавили к каждой коорди нате еще по единице, чтобы рисунки не налезали на сетку таблицы. Кстати, ширину ячеек таблицы (то есть, прозрачного рисунка diafanol.gif) в этом случае тоже необходимо немного скорректировать. Поскольку каждая ячейка таблицы имеет со всех сторон бордюр шириной в 1 пиксел, придется сделать ширину самих ячеек равной не 100, а 98:

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

i f (window.event.clientX>=tstart-50&&window.event,clientY>=50) {

document.all[moving].style.pixelLeft= Math.round((window.event.clientX-50-tstart)/100)*100+tstart+l;

document.all[moving].style,pixelTop= Math.round((window.event.clientY-50)/100)* 100+1;

}

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

document.all[moving].style.zlndex=5;

Поскольку у всех остальных элементов значение z-index не изменялось (и, следовательно, равно нулю), мы добиваемся того, что перемещаемый рисунок никогда не будет перекрыт другими объектами. Естественно, при окончании перемещения рисунка ему нужно возвратить исходное значение z-index. Для этого в функцию up_it() добавим строку

document.a 11[moving].style.zlndex=0; Итак, давайте посмотрим, что же у нас получается.

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

<HTML>

<HEAD>

<STYLE> BODY { background-color: #979797; color: #FEFEFE;

text-align: center; font-weight: bold;

font-size: 30рх; font-family: sans-serif; }

</STYLE>

var tstart; var moving="";

function mainpbs( )

{ tstart=document.body.clientWidth/2-200;

document. a.is .rnaintab. style. left=tstart;

function down_it()

{ var 1==window. event. srcElement. src.length;

if((window.event.srcElement.tagName="IMG")&&

(window.event.srcElement.src.substring(1-12,1-4)!= "diafanol"))

{ moving=window.event.srcElement.id;

document.all[moving].style.pixelLeft=window.event.clientX-50; document.all[moving].style.pixelTop=window.event.clientY-50;

document.all[moving].style.zlndex=5; } } function up it() { if (moving!="") {

if (window.event.clientX>=tstart-50&& window.event.clientY>=50) {

document.all[moving].style.pixelLeft= Math.roundf(window.event.clientX-50-tstart)/100)*100+tstart+1;

document.all[moving].style,pixelTop= Math.round((window.event.clientY-50)/100)*100+1;

} document.all[moving].style.zlndex=0; moving=""; }

} function move it() { if (moving!="")

{ document.all[moving].style.pixelLeft=window.event.clientX-50; document.all[moving].style.pixelTop==window.event.clientY-50 ;

} event.cancelBubble = true; event.returnValue = false; }

//—>

</SCRIPT>

</HEAD>

Расставьте плашки перетаскиванием с помощью мыши

<TR>

</TR> </TABLE> </DIV>

<IМG ID="p11" SRC="Images/digitll.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="11" STYLE="position: absolute; top: 60px; left: 50px;

<IMG ID="pl2 SRC="Images/digitl2.gif" WIDTH="100" HEIGHT="100" BORDER="0" AtlT="12" STYLE="position: absolute; top: 160px; left: 50px;

</BODY>

</HTML>

Результат представлен на Рисунок 7.11. В принципе, в такую игру уже можно по-настоящему играть. Конечно, этот код можно еще упростить. Правильно, зачем шестнадцать раз повторять тег вставки прозрачного рисунка? Давайте заменим его вложенным циклом JavaScript:

for (var k=l; k<=4; k++) { document.write("<TR>") ;

for (var m=l; m<=4; m++) document.write('<TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD>') ;

document.write("</TR>");

}

Реакция на перемещение мыши

В принципе, наша функция down_it() уже справляется со своими обязанностями. Теперь давайте займемся функцией moveit( ), которая будет вызываться при движении мыши.

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

function move it() { if (moving!="") { // какие-то действия

} }

Теперь давайте подумаем, что должно быть сделано, если переменная moving содержит имя рисунка, который нужно передвинуть. Очевидно, для того чтобы его передвинуть, нужно изменить его стилевые свойства left и top в соответствии с расположением указателя мыши. Текущее положение указателя мыши можно узнать, прочитав значения свойств window.event.clientX и window.event.clientY.

— Стоп! — скажете вы. — А как узнать, как должен располагаться рису нок относительно указателя мыши? Ведь пользователь может щелкнуть и в центре рисунка, и с краю, и в любом другом месте. Значит, в функции down_it(), которую мы считали уже законченной, нужно еще вычислить координаты указателя мыши относительно рисунка?

— Правильно! Это обязательно нужно сделать, если применять эту технологию для перетаскивания крупных объектов. Но в нашем примере мы позволим себе упростить задачу, воспользовавшись тем, что наши плашки имеют относительно небольшие размеры. При таких размерах будет вполне нормально, если при перетягивании рисунка указатель мыши будет находиться посередине его. Поскольку рисунки наши имеют размер 100х100, нам остается вычесть 50 из каждой координаты указателя мыши и при своить эти значения свойствам left и top рисунка:

document.all[moving].style.pixelLeft=window.event.clientX-50; document.all[moving].style,pixelTop=window.event.clientY-50;

Обратите внимание на то, что для обращения к объекту по его имени, содержащемуся в переменной, необходимо использовать квадратные скобки, то есть писать document.all[moving], а не document.all. moving. В противном случае броузер не сможет найти нужный объект и выдаст сообщение об ошибке . Кроме того, обратите внимание на то, что для корректного изменения координат в Internet Explorer необходимо использовать свойства pixelLeft и pixelTop вместо left и top.

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

window.event.cancelBubble = true; window.event.returnValue = false;

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

window.event.returnValue = false;

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

Реализация операций перетаскиванием

Итак, мы рассмотрели несколько основных обработчиков событий. Однако существуют и другие события мыши. Например, веб-страница может отдельно реагировать на нажатие кнопки мыши, на ее отпускание и даже на ее движение. Для чего это может понадобиться? Одно из возможных применений — это реализация так называемой технологии drag-and-drop, (проще говоря — перетаскивания экранных объектов с помощью мыши. Для иллюстрации рассмотрим несложный пример.

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

<STYLE> BODY { . background-color: #979797; color: #FEFEFE; text-align: center;

font-weight: bold; font-size: 30рх;

font-family: sans-serif; . } </STYLE>

затем вывести на экран заголовок; потом создать центрированный блок ( <DIV> ) с фиксированной шириной и высотой, а также небольшим отсту- пом сверху, заданным с помощью стилевого свойства margin-top:

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

Реализация технологии draganddrop пользователь может перетаскивать плашки с помощью мыши

Рисунок 7.11. Реализация технологии drag-and-drop: пользователь может перетаскивать плашки с помощью мыши

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

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

К сожалению, приведенная выше страница будет работать только в Internet Explorer. Если необходимо, чтобы она работала также и в Netscape 6, придется приложить некоторые усилия. Дело в том, что помимо различий в син таксисе доступа к элементам, о котором мы уже говорили (в Netscape используется конструкция document.getElementByld вместо document.all), различия существуют также и в обработке событий. В частности, вместо глобального объекта event в Netscape необходимо использовать временную переменную, которой будет передаваться значение объекта event. Кроме того, вместо свойства srcElement используется свойство target, а свойство returnValue вообще не поддерживается. Выше мы приводили примеры того, как написать код, работающий в обоих популярных броузерах. Вы можете в качестве упраж нения попробовать это сделать и для данного примера, однако из-за обработки событий мыши это будет сложнее, чем в предыдущих случаях.

Редактор Star Office

Редактор Star Office

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

Перед подсветкой теги проверяются на корректность — ошибочно написанные теги красным цветом не выделяются. Однако надо иметь в виду, что программа не понимает новых тегов, таких, как <BUTTON> , <LABEL> и пр.

Регистрация имен

А как быть, если хочется сделать адрес странички более коротким, запоминающимся? Для этого существуют многочисленные службы переадресации, например: come.to, www.da.ru, attend.to (все названия реальные). Например, если Сергей Сергеев разместил на своей страничке информацию о своей фирме “Филин”, он может бесплатно зарегистрировать такие имена, как filin.da.ru(или www.filin.da.ru), come.to/filin и т. п. При этом пользователь, набравший эти адреса в своем броузере, будет автоматически переадресовываться на веб-страничку, размещенную где угодно: на сервере провайдера, на сервере Geocities или еще где-нибудь.

Ну, а если вы хотите приобрести для себя домен второго уровня (например www.filin.ru), то вам придется обратиться в соответствующую организацию. Так, например, распределением имен в домене .ru занимается организация РосНИИРОС (www.ripn.ru). За регистрацию в этом случае придется заплатить деньги, однако в итоге вы будете иметь легко запоминающийся адрес. Кстати, многие пользователи, игнорируя услуги поисковых машин, часто пытаются найти веб-странички, набирая наугад адреса типа www.имя.Компания.ru, так что, имея такое имя, вы получаете большие шансы на посещение.

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

Результат заливки

Рисунок 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).

Простейшая страничка текст и заголовок

Рисунок 1.3. Простейшая страничка: текст и заголовок

Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка <HEAD> мы поместили этот текст между тегами <TITLE> и </TITLE>

Теперь вспомним о том, что при отображении в броузере наш текст потерял форматирование. Это произошло потому, что броузер игнорирует перевод строки. Однако если вы все же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе Блокнот, нужно заключить его между тегами <PRE> и </PRE>:

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева</ТIТLЕ>

</HEAD>

<BODY>

<PRE>

Домашняя страница Сергея Сергеева

Сергей Сергеев - писатель-юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр.

</PRE>

</BODY>

</HTML>

Результат показан на Рисунок 1.4. Уже лучше, не правда ли? Однако есть два момента, из-за которых мы не советовали бы без крайней необходимости употреблять тег <PRE>. Во-первых, как видно из рисунка, текст теперь отображается так называемым моноширинным шрифтом, похожим на шрифт пишущей машинки. Большинство броузеров отображают текст,

Пример таблицы

Рисунок 2.

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

Как же сделана эта

Рисунок 2.1

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

то броузер отобразит таблицу

Рисунок 2.1

3 . Таблица из одной ячейки то броузер отобразит таблицу шириной в 50 пикселов. При этом во фразе Это уже таблица! последнее слово, скорее всего, не поместится в длину таблицы и автоматически перенесется на другую строку. А если установить
WIDTH-50%, то таблица растянется на половину ширины окна броузеоа (Рисунок 2.1 4).

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

Рисунок 2.1

5. Применение атрибута CELLPADDING=

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

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20"> <TR>
<TD> Это уже таблица! </TD> </TR> </TABLE>
Результат представлен на Рисунок 2.1 6.

Цвет фона таблицы можно

Рисунок 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 лишние пробелы игнорируются...