 |
|
•
Советы. Дизайн и графика.
|
|
|
|
|
|
|
|
|
|
•
Дизайн и графика. Меню #3
|
|
|
|
|
 |
|
Готовое меню
|
АНИМИРОВАННОЕ МЕНЮ #3
Описываемый мною метод формирования меню сайта позволит вдвое сократить количество загружаемых картинок и на 20% их объем. Вцелом эффект такого формирования меню составит 40%, что при использовании большого количества элементов меню значительно увеличит скорость загрузки сайта в целом.
Я специально в данном примере разбросал ссылки и анимированные картинки, чтобы показать как можно более полно использовать данный эффект.
Нарисуйте меню в двух вариантах (положение кнопок нажато/отжато).
Вариант "отжато" сохраните цельным файлом (Рис.1), "нажато" - соответственно нужно разрезать на необходимые фрагменты (Рис.2).
Еще необходимо сделать прозрачное изображение GIF размером 1х1 пиксель.
Все готово, теперь напишем HTML код.
Основой является использование в качестве Background тега Table изображения на Рис.1.
Остальные части тегов TD содержат обычный IMG SRC c прозрачным изображением GIFa 1x1.
Части тегов TD которые формируют верхнюю часть меню должны содержать IMG SRC с обязательно указанным атрибутом Name содержащим уникальный код для каждой изменяемой картинки.
О недостатках. Такой метод будет работать в Internet Explorer и Opera. Для Netscape Navigator Вам прейдется расчленить Рис.1 на части по-размеру соответствующие изображениям на Рис.2.
Их прейдется использовать как Background в соответствующих тегах TD (Рис.3), формирующих верхнюю часть меню и как IMG SRC (Рис.4) для нижней части меню.
Используя команды SSI, PHP, Javascript или других, для определения USER AGENT формируйте тот или иной вариант страницы.
Конечно пользователей Internet Explorer намного больше, но не стоит пренебрегать любителями Netscape Navigator.
 Скачать HTML пример
 Полное или частичное использование данных материалов возможно только с согласия автора.
|
|
|
|
|
|
|
|
|
|
|
|
HOT |
|
|
|
|
Free download RamZes ™
Программа для создания динамических сайтов. Удобная и простая в использовании, позволяет быстро измененить дизайн, цветовую палитру, составляющие формы. Имеет возможность подключения любых программных модулей, созданных пользователем.
 Подробно...
|
|
|
|
|
|
|
|
|
|
|
|
|
