Оживите свою веб-страницу

Новая спецификация HTML 4.0, определенная организацией W3C ( www.w3c.org ), предоставляет каждому веб-дизайнеру более мощные инструменты. Это изменение, которое затрагивает всех веб-разработчиков и дизайнеров, о которых многие думали в прошлом. Невообразимого теперь можно легко добиться с помощью DHTML и CSS. Вот подробное описание реализации некоторых эффектов в процессе компиляции веб-страницы. Надеюсь, вы сможете использовать его, чтобы оживить свою веб-страницу.

* Технология меню.

Если люди, посещавшие сайты Microsoft и Macromedia, будут осторожны, они обязательно заметят технологию меню. Щелкните, чтобы отобразить подменю, и щелкните еще раз, чтобы скрыть подменю. Это очень интересно и практично. Автор скачал эти две страницы соответственно. Проанализировав исходный код, я обнаружил, что они использовали не один и тот же метод, и оба метода имеют свои плюсы и минусы. Давайте посмотрим, как они реализованы.

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

Нажмите здесь!

Нажмите здесь!

список 1

список 2

список 3

Нажмите «Щелкните здесь!» на рисунке 1, и появится эффект, показанный на рисунке 2. При конкретной реализации необходимо обратить внимание на определение и использование тега и добиться взаимно однозначного соответствия, иначе будет хаотично. Кроме того, при наличии большого количества пунктов меню помните, что только текущее перечисленное подменю определяется с помощью , а другие пункты главного меню должны быть связаны с соответствующими развернутыми страницами.

Продукты и услуги

onclick="window.event.cancelBubble = true;">

Каталог продукции

Техническая поддержка

Мероприятия и семинары

Обучение и сертификация

Ссылки на третьи стороны

В исходном коде .NV1 и .NV2 — это определения шрифтов CSS, а функция кликера управляет отображением и скрытием пунктов меню. Переменная a управляет текстом, а переменная b управляет изображениями (не показано на рисунке из-за неполной загрузки). В реальном приложении обратите внимание на область действия, определенную элементом div, и не скрывайте другие пункты главного меню при нажатии.

Метод реализации Microsoft относительно умен, быстр, относительно прост в создании и требует всего одной страницы. Недостатком является то, что требуется как минимум поддержка IE 4.0 или NN 4.0 или выше.

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

* Изменение цвета текста

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

Существует множество способов изменения цвета текста. Здесь мы лишь кратко представим два из них.

Первый метод — просто использовать технологию CSS. В настоящее время эту технологию поддерживает только IE 4.0. Его пример кода выглядит следующим образом.

Это простейший пример использования технологии CSS для управления цветом текста.

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

Второй метод — использовать JavaScript для написания небольшой программы-скрипта, которая будет запускаться с целью изменения цвета. Его пример кода выглядит следующим образом.

onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">

Изменить цвет текста.

Поскольку в IE 4.0 и NN 4.0 разные механизмы управления объектами, необходимо сначала проверить браузер, а затем сделать соответствующая сделка с. Функция MM_changeProp() реализует этот метод изменения цвета текста. Этот метод требует определения идентификатора с помощью span и добавления onmouseover и onmouseout везде, где он должен быть изменен, что намного сложнее, чем первый метод. Поэтому, если у вас нет твердого мнения в отношении Microsoft, лучше использовать первый способ.

* Динамические кнопки

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

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

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

< a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')">

width=100 height=50 border=0 name ="toc1">

Следует отметить две вещи:

1. Обязательно присвойте имя img, а затем примените это имя к определению исходного изображения.

2. Обратите внимание на различные символы в исходном файле, особенно на кавычки, а также обратите внимание на путь к файлу исходного изображения. Лучше всего использовать относительный путь, чтобы сайт не отображался должным образом после загрузки. Конечно, этот метод обмена изображениями также требует поддержки браузера версии 4.0 или выше. Если вы все еще используете браузер версии 3.0, обновите его как можно скорее!

* При появлении запроса

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

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

......

ONMOUSEOVER="img_act('кто')"

BORDER="0" WIDTH="113" HEIGHT="45 ">

< /tr>

...

подчеркнутая часть кода описывает, как это сделать. Атрибут Title очень полезен! Его можно использовать во всех элементах, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE, для определения подсказки при наведении на него указателя мыши.

Выше мы подробно обсудили некоторые советы в процессе компиляции веб-страниц. В Интернете существует множество красиво оформленных и технологически продвинутых страниц, и анализ их исходного кода — хороший способ учиться. Компьютерные технологии постоянно развиваются. Столкнувшись с новыми технологиями, появляющимися одна за другой: DHTML, CSS, XML... нам остается только преодолевать трудности, преодолевать их и применять их к нашим веб-страницам, чтобы сделать наши веб-страницы более активными.

(Туристическое бюро Цзисянь Тяньцзинь, 301900, Цзя Хэцзин)