Эффективный самоучитель по креативному Web-дизайну (стр. 3 )

</applet>

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

text	Строка текста, анимацию которой требуется выполнить. По умолчанию — "Welcome to Java!" ("Добро пожаловать в Java!").
font	Шрифт, который должен использовать аплет. По умолчанию — "TimesRoman".
style	Стиль шрифта: обычный (plain), полужирный (bold) или курсив (italic). По умолчанию -"plain".
fgcolor	Цвет текста, выраженный в виде слова либо в форме строки из трех разделенных двоеточиями (:) RGB-значений (см. задание параметра bgcolor в приведенном выше коде). Возможные словесные значения цветов — red (красный), blue (синий), green (зеленый), yellow (желтый), white (белый), orange (оранжевый), cyan (голубой), magenta (пурпурный) и black (черный). По умолчанию — "black".
bgcolor	Фоновый цвет аплета, выраженный либо как слово (см. задание параметра fgcoior в приведенном выше коде), либо как строка из трех разделенных двоеточиями (:) RGB-значений. Возможные словесные значения цветов — те же, что и для fgcoior. По умолчанию — "lightgray" (светлосерый).
type	Определяет, будет аплет увеличивать или уменьшать размер всех символов в строке текста вместе — blink (мерцание) или независимо — wave (волна). Кроме мерцания и волны, вы можете установить атрибут type равным random (случайный) и предоставить выбор эффекта (из двух), используемого при анимации текста, компьютеру посетителя. По умолча­нию— "wave" (волна).
max	Максимальный размер символа в пунктах. По умолчанию — "28".
min	Минимальный размер символа в пунктах. По умолчанию — "8".
align	Можно выровнять текст по левому краю, по правому краю или отцен­трировать между краями аплета. По умолчанию — "center" (по центру).

Если вы хотите использовать анимированный текст в качестве гиперссылки, просто поместите аплет (как изображение-гиперссылку) между начальным и ко­нечным дескрипторами привязки (<а></а>). Установите атрибут href в начальном дескрипторе якоря равным URL-адресу Web-страницы, которую браузер должен будет вывести, когда посетитель выполнит щелчок на анимированном тексте.

Отображение и печать календаря на любой год с помощью аплета

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

ПРАКТИКУМ

Аплет calendar.class вместе с исходным кодом доступен на сайте издателя русскоязычной редакции этой книги. Внешний вид календаря, который выводит упомянутый аплет, показан на рис. 9.15.

Скопировав архив KNCaiendar.zip в папку на своем компьютере, извлеките из него файл calendar.class. Чтобы с помощью аплета вывести на Web-страни­це календарь, скопируйте .class-файл в туже папку, где находится Web-страни­ца. Затем вставьте показанные ниже строки в HTML-код страницы, туда, где должен находиться календарь:

<applet code = "calendar. class" width = "780" height = "680" </applet>

Изменить внешний вид или размеры календаря с помощью параметров нельзя. Однако посетители вашего сайта могут с помощью кнопок "FontColor" (цвет шрифта) и "BackColor" (цвет фона) на календаре изменять цвета текста и фона.

Рис. 9.15. Календарь, отображаемый аплетом calendar. class

Конечно же, в файл KNCaiendar.zip входит исходный Java-код (файл calendar.java). Следовательно, если на вашем компьютере установлен компи­лятор Java, например, тот, который входит в состав бесплатного комплекта инст­рументальных средств разработчика программного обеспечения на Java, доступ­ного на Web-сайте Sun Microsystems, вы всегда сможете изменить аплет так, чтобы он принимал параметры, например, начальную дату, требуемые цвета и размер шрифта.

Отображение с помощью аплета отрывка,

случайным образом выбранного из текстового файла

Одна из сложных задач, связанных с дизайном Web-сайта, состоит в поддер­жании новизны содержимого. Аплет PetQuotes.class позволяет отображать от­рывки, взятые из текстового файла, по одному за раз. Случайно выбирая отры­вок для отображения, аплет наверняка будет отображать новый отрывок каждый раз, когда браузер посетителя извлекает Web-страницу (см. рис. 9.16).

Аплет PetQuotes.class вместе с исходным кодом доступен на сайте изда­теля русскоязычной редакции этой книги. Скопировав архив PetQuotes.zip в папку на своем компьютере, извлеките из него файлы PetQuotes.class и PetQuotes.txt. Затем скопируйте два файла (PetQuotes.class и PetQuotes.txt) в папку, где находится код Web-страницы. После этого вставьте показанные ниже строки в HTML-код страницы, туда, где должен выводиться отрывок текста:

<applet code = "РеtQuotes. class" width = "410" height = "72"

<param name = "font" value = "Arial">

<param name = "font_size" value = "24">

<param name = "color" value = "black">

<param name = "bgcolor" value = "white">

</applet>

Рис. 9.16. Цитата, выведенная на экран аплетом PetQuotes. class

Для определения внешнего вида текста и цвета фона служат следующие пара­метры, которые можно передать аплету:

font	Шрифт, который должен использовать аплет. По умолчанию — "Times Roman" .
font_size	Размер шрифта в пунктах. По умолчанию — "18".
color	Цвет текста. Возможные значения — black (черный), white (белый), lightgray (светло-серый), gray (серый), darkgray (темно-серый), red (красный), pink (розовый), orange (оранжевый), yellow (желтый), green (зеленый), magenta (пурпурный), cyan (голубой) и blue (синий). По умолчанию — "black"
bgcolor	Цвет фона. Возможные значения — black (черный), white (белый), lightgray (светло-серый), gray (серый), darkgray (темно-серый), red (красный), pink (розовый), orange (оранжевый), yellow (желтый), green (зеленый), magenta (пурпурный), cyan (голубой) и blue (синий). По умолчанию - "white".

Чтобы предоставить аплету для отображения свои собственные цитаты, анек­доты или иные отрывки текста, отредактируйте соответствующим образом файл PetQuotes.txt. В первой строке файла введите число строк текста в файле. Затем на второй и последующих строках введите строки текста, которые должны будут отображаться. Вводите каждый отрывок и его источник на отдельных стро­ках в форме <отрывок текста>| |<источник>. Обратите внимание на символ двойной прямой черты (| |) между текстом каждой цитаты или отрывка и источ­ником (то есть автором) цитаты или отрывка. Приведенный ниже текст демонст­рирует пример содержимого, которое можно поместить в файл PetQuotes.txt:

Некоторые люди вершат во сне великие дела. Другие допоздна не ложатся спать и эти дела делают. || Аноним

Иногда крик стоит больше, чем диссертация.|| Ральф Вальдо Эмерсон

Я две недели сидела на диете, но все, что мне удалось потерять, - это две недели. || Тотти Филдс

Создание с помощью аплета навигационного меню,

выполняющегося в отдельном окне

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

К счастью, с помощью аплета MenuApplet.class можно выводить навигаци­онное меню, содержащее до 400 гиперссылок — не жертвуя при этом простран­ством на экране в ущерб содержимому Web-сайта. Поскольку аплет отображает меню в новом окне, вам потребуется выделять место только для одной кнопки на каждой странице сайта, тем самым предоставляя посетителям возможность вызывать навигационное меню, когда оно им понадобится (см. рис. 9.17).

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

ПРАКТИКУМ

Аплет MenuApplet.class вместе с исходным кодом доступен на сайте издателя русскоязычной редакции этой книги. Скопировав архив MenuApplet.zip в папку на своем компьютере, извлеките из него два .class-файла (MenuApplet.class и LabelButton.class), .ini-файл (MenuApplet.ini) и Web-страницу меню (menu.html). После того, как вы отредактируете содержимое .ini и .html-файлов (как это сделать, рассказывается чуть ниже), скопируйте .class-файлы, MenuApplet.ini и menu.html в туже папку, где находятся Web-страницы, в кото­рые необходимо вставить кнопки "Site Menu" ("Меню сайта") для вызова аплета MenuApplet.class.

Рис. 9.17. Навигационное меню, открытое в плавающем (новом) окне в результате

щелчка на кнопке на Web-страниие

Файл MenuApplet.ini содержит категории и пункты меню, которые посети­тель увидит в выведенном на экран аплетом меню. В этом .ini-файле содержат­ся строки двух типов: строки, которые начинаются и заканчиваются знаком плюс (+), и строки, которые начинаются с обратной косой черты (\). Строки, которые начинаются (и заканчиваются) знаком плюс (+),— это категории меню, которые аплет отображает в своем левом столбце, под заголовком "Select" ("Вы­берите"). Строки, начинающиеся с обратной косой черты (\), - это пункты меню, которые аплет отображает в своем правом столбце, озаглавленном "Go То" ("Перейти на ..."). Когда посетитель щелкает на категории в столбце "Select", аплет отображает пункты меню в выбранной категории в столбце "Go То". Аналогично, когда посетитель щелкает на пункте меню в столбце "Go To", аплет дает Web-браузеру указание извлечь и отобразить Web-страницу в окне, имя которого передается аплету в параметре targetwindow (он рассматривается далее в этой главе).

Откройте файл MenuApplet.ini в текстовом редакторе и замените содержи­мое файла на свои собственные категории и пункты меню. Открыв файл в пер­вый раз, вы увидите строки, похожие на приведенные ниже:

+Тестовые страницы+

\Тестовая страница 1\ "test_html/testl. html"

\Тестовая страница 2\ "test_html/test2.html"

+ССЫЛКИ+

\Диасофт\ "http://www. diasoft. "

\NVBizNet\ "http://www. "

Чтобы добавить в меню категорию, наберите текст категории между знаками плюс (+), как набраны записи категорий +Тестовые страницы+ и +Ссылки+ в данном примере. Для добавления в категорию пунктов меню наберите текст пун­кта меню между символами обратной косой черты, а за ним — в двойных кавыч­ках относительный или URL-адрес, который должен будет извлечь браузер. В данном примере \Тестовая страница 1\ — пункт меню в категории "Тестовые страницы", a "test_htmi/testi.html" — относительный адрес Web-страницы, которую браузер должен извлечь, когда посетитель щелкнет на пункте меню "Тестовая страница 1". Обратите внимание, что каждый пункт меню необхо­димо определять внутри категории, при этом каждая категория может содержать не больше 20 пунктов меню.

Заглянув в содержимое Web-страницы меню (menu.html), вы увидите, что она содержит код, аналогичный приведенному ниже, который внедряет аплет MenuApplet.class в Web-страницу:

<applet code = "MenuApplet. class" width = "222" height = "144">

<param name = "targetWindow" value = "LoadHere">

<param name = "fontType" value = "TimesRoman">

<param name = "fontstyle" value = "0">

</applet>

Имейте в виду, что аплет MenuApplet.class позволяет отображать навигаци­онное меню в окне, отличном оттого, в котором отображаются Web-страницы сайта. Таким образом, вы внедряете аплет меню в его собственную Web-страницу (в данном примере menu.html), а не в HTML-код какой-то из страниц с содер­жимым сайта.

Чтобы персонализировать аплет, откройте Web-страницу меню menu.html в текстовом редакторе и установите необходимые значения следующих трех пара­метров:

targetwindow	Окно, в котором аплет должен будет отображать Web-стра­ницу, извлеченную после щелчка на пункте меню. По умолчанию - "self".
fontType	Шрифт, которым аплет должен отображать категории и пункты меню. По умолчанию — "Helvetica".
fontstyle	Число от 0 до 3, которое определяет стиль шрифта текста меню, 0 = обычный, 1 = полужирный, 2 = курсив и 3 = полужирный кур­сив. По умолчанию — "0".

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

<form>

<input type = "button" name = "NavButton" value = "Меню сайта"

onClick = "window. open('menu. html', 'SiteNavMenu', menubar = no,

height = 166, width = 244')"

</form>

В данном примере определение формы содержит стандартную кнопку с над­писью "Меню сайта". Как только посетитель щелкнет на этой кнопке, Web-бра­узер выполнит JavaScript-код, связанный с кнопкой, который откроет Web-стра­ницу меню (menu. html) внедренную с именем SiteNavMenu. Аплет MenuApplet.class (внедренный в Web-страницу menu.html) отобразит затем на­вигационное меню в окне SiteNavMenu.

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

высота = (n + 1) * 18,

где n - максимальное число категорий или максимальное число ссылок в одной категории (выбрать большее).

Чтобы вычислить ширину, воспользуйтесь форму­лой

ширина >= 12 + (р * 7) + (q * 1) ,

где р — число символов в самом длинном названии категории, a q — число сим­волов в самом длинном пункте меню.

Вычислив высоту и ширину, присвойте полученные значения атрибутам height и width в начальном дескрипторе <applet> HTML-кода Web-страницы меню (то есть в файле menu.html). Затем возьмите вычисленные значения высо­ты и ширины аплета, добавьте к каждому из них 20 и присвойте полученные значения параметрам height и width, которые передаются JavaScript-кодом фун­кции window.open, в дескрипторе ввода <input> для кнопки "Меню сайта".

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

Прокручивание содержимого файла по вертикали

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

Если вам нужно прокручивать одну строку текста горизонтально на экране, браузер Internet Explorer позволяет задать прокручиваемый текст между началь­ным и конечным дескрипторами бегущей строки (<marquee></marquee>). Чтобы получить более гибкое решение, можно написать JavaScript-сценарий, выполняю­щий ту же функцию, поскольку браузер Netscape Navigator не поддерживает дес­крипторы бегущей строки, но и Netscape Navigator, и Internet Explorer поддержи­вают JavaScript. Если, же вы хотите отображать на экране несколько строк текста одновременно и прокручивать текст по горизонтали, вам понадобится нечто большее, чем простая бегущая строка; вам понадобится аплет NewsScroller.

Аплет NewsScroller, написанный -мл. (Е. A. Graham, Jr.), по­зволяет прокручивать текст из ASCII-файла вертикально внутри прямоугольной области на Web-странице, как показано на рис. 9.18.

Рис.9.18. Аплет NewsScroller, прокручивающий текст вертикально

в прямоугольной области на Web-страниц

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

ПРАКТИКУМ

Аплет NewsScroller вместе с исходным кодом доступен на сайте издателя рус­скоязычной редакции этой книги. Скопировав архив NewsScroller.zip в папку на своем компьютере, извлеките из него файлы Scroller.jar и News.txt. Затем, чтобы использовать аплет на своей Web-странице, скопируйте файл Java-архива Scroller.jar и файл новостей News.txt в ту же папку, где находится Web-стра­ница. Затем вставьте приведенные ниже строки в HTML-код Web-страницы, туда, где должен появляться прокручиваемый текст:

<applet code = "crackers. Scroller. NewsScroller. class"

Archive = "scroller. jar" width = "400" height = "150">

<param name = "DataFile" value = "News. txt">

<param name = "ClickColor" value = "#0000FF">

<param name = "HeadColor" value = "#FF0000">

<param name = "Font" value = "Serif">

<param name = "FontSize" value = "18">

<param name = "MousePause" value = "" >

<param name = "TopPause" value = "0">

<param name = "Refresh" value = "0">

<param name = "Foreground" value = "#000000">

<param name = "Background" value = "#FFFFFF">

<param name = "Border" value = "8" >

<param name = "Picture" value="bggif. gif">

<param name = "Target" value = "top">

<param name = "SleepTime" value = "30">

<param name = "ScrollBy" value = "l">

</applet>

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

DataFile	Относительный или URL-адрес файла с заголовками, гипертекстовыми ссылками и сообщениями, которые необходимо отображать. По умолчанию - "News.txt".
ClickColor	Цвет (выраженный в виде шестнадцатеричного триплета), с использованием которого аплет будет выводить текст гиперссылок из файла данных. По умолчанию - "#0000FF" (синий).
HeadColor	Цвет (выраженный в виде шестнадцатеричного триплета), с использованием которого аплет будет выводить текст заголовков из файла данных. По умолчанию — "#FF0000" (красный).
Font	Шрифт, которым будет отображаться текст, определенный в файле данных. По умолчанию — "Serif".
Fontsize	Размер шрифта прокручиваемого текста. По умолчанию — "12".
MousePause	Если передан этот параметр, даже со значением пустой стро­ки (""), аплет NewScroller прекратит прокручивать текст, когда посети­тель наведет курсор мыши на аплет, и начнет прокручивать текст заново, когда посетитель уберет курсор с аплета. Чтобы прокручивание текста не прерывалось перемещениями курсора, не используйте параметр MousePause.
TopPause	Время (в миллисекундах), в течение которого каждый заголовок должен задерживаться у верхнего края области просмотра. По умолча­нию — "0".
Refresh	Время (в минутах), по прошествии которого аплет начинает по­вторное чтение файла новостей. По умолчанию — "0" (то есть не повто­рять).
Foreground	Цвет (выраженный в виде шестнадцатеричного триплета), с использованием которого аплет будет выводить текст сообщений из файла данных. По умолчанию — "#000000" (черный).
Background	Цвет (выраженный в виде шестнадцатеричного триплета) фона аплета. По умолчанию — "#FFFFFF" (белый).
Border	Ширина в пикселях границы вокруг аплета. По умолчанию — "0".
Picture	Относительный или URL-адрес файла с графическим изображе­нием, которое будет использоваться в качестве фона аплета.
Target	Окно, в котором аплет дает Web-браузеру указание отобразить Web-страницу, извлеченную браузером, когда посетитель щелкает на гипер­текстовой ссылке в прокручиваемом тексте.
SleepTime	Время ожидания (в миллисекундах) между обновлениями. По умолчанию — "30".
ScrollBy	Число пикселей, на которое аплет прокручивает текст в течение каждого цикла обновления. По умолчанию - " 1".

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