Новая спецификация HTML 4.0, определенная организацией W3C ( www.w3c.org ), предоставляет каждому веб-дизайнеру более мощные инструменты. Это изменение, которое затрагивает всех веб-разработчиков и дизайнеров, о которых многие думали в прошлом. Невообразимого теперь можно легко добиться с помощью DHTML и CSS. Вот подробное описание реализации некоторых эффектов в процессе компиляции веб-страницы. Надеюсь, вы сможете использовать его, чтобы оживить свою веб-страницу.
* Технология меню.
Если люди, посещавшие сайты Microsoft и Macromedia, будут осторожны, они обязательно заметят технологию меню. Щелкните, чтобы отобразить подменю, и щелкните еще раз, чтобы скрыть подменю. Это очень интересно и практично. Автор скачал эти две страницы соответственно. Проанализировав исходный код, я обнаружил, что они использовали не один и тот же метод, и оба метода имеют свои плюсы и минусы. Давайте посмотрим, как они реализованы.
Macromedia использует многостраничную технологию. То есть сначала создать страницу главного меню без расширенных пунктов, а затем создать страницу для каждого расширенного пункта главного меню. Сколько подстраниц необходимо, чтобы соответствовать количеству пунктов в главном меню. Для иллюстрации приведем простой пример:
<html>
<head>
<title>Пример меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF ">
<a name="abc"></a><p>
<a href="menu_2.htm#abc"><b>Нажмите здесь!</b></a>
</body>
</html >
<html>
<head>
<title>Пример меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="# FFFFFF">
<p><a name="abc"></a></p>
<p><a href="menu_1.htm#abc">
<b>Нажмите здесь!</b></a > </p>
список 1
список 2
список 3
</body>
</html>
Нажмите «Щелкните здесь!» на рисунке 1, и появится эффект, показанный на рисунке 2. При конкретной реализации необходимо обратить внимание на определение и использование тега <a name=" "> и добиться взаимно однозначного соответствия, иначе будет хаотично. Кроме того, при наличии большого количества пунктов меню помните, что только текущее перечисленное подменю определяется с помощью <a name=" ">, а другие пункты главного меню должны быть связаны с соответствующими развернутыми страницами.
Этот метод очень прост в реализации, может быть быстро освоен обычными людьми и может поддерживаться любым браузером, но его недостатки также очевидны. Во-первых, это медленно. Обращение к каждой странице туда-сюда неизбежно приведет к долгому ожиданию. Только когда страница заполнена текстом, вы не почувствуете застоя, во-вторых, ее сложно скомпилировать. , производить по одному немного хлопотно. Поэтому эта технология все еще имеет определенные ограничения.
Microsoft использует технологию DHTML. DHTML — относительно новая технология, поэтому для некоторых «старых» браузеров этот метод реализации меню бесполезен.
Приведем пример для иллюстрации.
Как показано на рисунке 3, нажмите «Продукты и услуги», и сразу же появится следующее меню. Щелкните еще раз, и оно исчезнет. Это то же самое, что и Macromedia, но разница в том, что его исходный код выглядит следующим образом. .
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Добро пожаловать на домашнюю страницу Microsoft</title>
<style TYPE="text/css">
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;курсор:hand;margin-top:10;text-indent: -14;margin -left: 14;}
.NV2 {position:relative;font-size:.9em;font-weight:normal;}
</style>
</head>
<тело>
<script TYPE="текст/javascript">
function clikker(a,b) {
if (a.style.display ==') {
a.style.display = 'none';
b.src='usm.gif'
}
else {
a.style.display=' ;
b.src='dsmh.gif';
}
}
</script>
<div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);">
<dd><img ID="BBp" " SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11">
Продукты и услуги
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>Каталог продукции</a>
<a HREF=" http://support.microsoft.com/support/">Техническая поддержка</a>
<a HREF="/events/">Мероприятия и семинары</a>
<a HREF="/train_cert/">Обучение и сертификация</a>
<a HREF="/referral/sr_default.asp">Ссылки на третьи стороны</a> </p>
</div>
</dd>
</div>
</body>
</html>
В исходном коде .NV1 и .NV2 — это определения шрифтов CSS, а функция кликера управляет отображением и скрытием пунктов меню. Переменная a управляет текстом, а переменная b управляет изображениями (не показано на рисунке из-за неполной загрузки). В реальном приложении обратите внимание на область действия, определенную элементом div, и не скрывайте другие пункты главного меню при нажатии.
Метод реализации Microsoft относительно умен, быстр, относительно прост в создании и требует всего одной страницы. Недостатком является то, что требуется как минимум поддержка IE 4.0 или NN 4.0 или выше.
Оба метода имеют свои плюсы и минусы. Какой из них вы выберете, зависит от характера вашей домашней страницы и поддержки браузера.
* Изменение цвета текста
. Это наиболее распространенная технология в Интернете. Когда курсор мыши наводится на элемент, элемент сразу меняет цвет и иногда издает звук, как в мультимедийном образовательном программном обеспечении. Если вы хорошо смешаете цвета, страница будет очень приятна глазу.
Существует множество способов изменения цвета текста. Здесь мы лишь кратко представим два из них.
Первый метод — просто использовать технологию CSS. В настоящее время эту технологию поддерживает только IE 4.0. Его пример кода выглядит следующим образом.
<html>
<head>
<title>Исследование динамики численности населения</title>
<style type="text/css">
BODY { фон: белый }
A:link { цвет: красный }
A:visited { цвет: бордовый }
A: активный { цвет: фуксия }
A:hover {color:blue}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
Это простейший пример использования технологии CSS для управления цветом текста.</a></p>
</body>
</html>
В этом примере текст ссылки изначально отображается красным, становится синим, когда указатель мыши перемещается по тексту, меняется на пурпурный при щелчке для доступа и становится темно-бордовым после доступа. Поскольку Netscape еще не поддерживает атрибуты CSS, такие как ссылка, посещение и наведение, вы не сможете увидеть эти эффекты, если используете Communicator.
Второй метод — использовать JavaScript для написания небольшой программы-скрипта, которая будет запускаться с целью изменения цвета. Его пример кода выглядит следующим образом.
<html>
<head>
<title>Изменить цвет текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 {font-family: "Courier New", Courier, mono; размер шрифта: 14pt; высота строки: нормальный; вес: жирный; цвет: синий}
-->
</style>
<script Language="JavaScript">
function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);
if ((theObj != null) && (theProp.indexOf("style.") != 0 &&
theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<span class="css1" ID="x"
onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">
Изменить цвет текста.</span>
</body>
</html>
Поскольку в IE 4.0 и NN 4.0 разные механизмы управления объектами, необходимо сначала проверить браузер, а затем сделать соответствующая сделка с. Функция MM_changeProp() реализует этот метод изменения цвета текста. Этот метод требует определения идентификатора с помощью span и добавления onmouseover и onmouseout везде, где он должен быть изменен, что намного сложнее, чем первый метод. Поэтому, если у вас нет твердого мнения в отношении Microsoft, лучше использовать первый способ.
* Динамические кнопки
Динамические кнопки здесь не являются ни анимацией .gif, ни различными кнопками со специальными эффектами, представленными в FrontPage. Я думаю, вы наверняка сталкивались с такой ситуацией: когда ваша мышь наводит курсор на определенную кнопку, она внезапно начинает двигаться, словно соблазняя вас нажать на нее. Это интересно, не правда ли? Давайте реализуем это ниже.
Прежде всего, вам следует подготовить две картинки. Поскольку это кнопки, они не должны быть очень большими, а цвета не должны быть слишком яркими. Между ними должны быть некоторые различия. две картинки, чтобы их не было видно после перемещения. Ниже приведены две фотографии, которые я сделал.
Далее давайте посмотрим, как достигаются динамические эффекты. Его исходный код выглядит следующим образом.
<html>
<head>
<title>Кнопки нажатия</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
браузерName = navigator.appName;
BrowserVer = parseInt(navigator.appVersion) );
if (браузерVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = new Image(42, 197);
toc1on.src=
"on.home.gif";
Изображение(42, 197);
toc1off.src = "home.gif"
}
;
function img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn
}
};
function img_inact(imgName)
{
if (versionButton == "3")
{
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
// -->
</script>
< a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')"><img src=home.gif
width=100 height=50 border=0 name ="toc1"></a>
</body>
</html>
Следует отметить две вещи:
1. Обязательно присвойте имя img, а затем примените это имя к определению исходного изображения.
2. Обратите внимание на различные символы в исходном файле, особенно на кавычки, а также обратите внимание на путь к файлу исходного изображения. Лучше всего использовать относительный путь, чтобы сайт не отображался должным образом после загрузки. Конечно, этот метод обмена изображениями также требует поддержки браузера версии 4.0 или выше. Если вы все еще используете браузер версии 3.0, обновите его как можно скорее!
* При появлении запроса
наведите указатель мыши на изображение, и появится подсказка, точно так же, как кнопки многих программ, которые выдают подсказки к функциям. Эту функцию легко реализовать при редактировании веб-страниц. Давайте посмотрим на ее эффект.
Добиться такого эффекта легко, достаточно посмотреть исходный код.
......
<tr>
<td WIDTH="57"><a HREF="who.html" TARGET="main"
ONMOUSEOVER="img_act('кто')"
ONMOUSEOUT="img_inact('кто') "><img
SRC="../images/button_who0.gif" NAME="who"
title="Личный профиль Чжоу Хуацзяня" ALT="Кто я"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('кто')" ONMOUSEOUT="img_inact('кто')">
</a></td>< /tr>
...
подчеркнутая часть кода описывает, как это сделать. Атрибут Title очень полезен! Его можно использовать во всех элементах, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE, для определения подсказки при наведении на него указателя мыши.
Выше мы подробно обсудили некоторые советы в процессе компиляции веб-страниц. В Интернете существует множество красиво оформленных и технологически продвинутых страниц, и анализ их исходного кода — хороший способ учиться. Компьютерные технологии постоянно развиваются. Столкнувшись с новыми технологиями, появляющимися одна за другой: DHTML, CSS, XML... нам остается только преодолевать трудности, преодолевать их и применять их к нашим веб-страницам, чтобы сделать наши веб-страницы более активными.
(Туристическое бюро Цзисянь Тяньцзинь, 301900, Цзя Хэцзин)