русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Горизонтальное меню


Дата добавления: 2013-12-23; просмотров: 587; Нарушение авторских прав


Графика и таблицы

Нарезка изображений

Предварительная загрузка изображений

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

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

Описанный выше прием неоднозначен. Его оправдывает только то, что если пользователь нетерпелив, то он вообще отключит передачу графики.

Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой картинки. Чаще всего он применяется при создании меню.

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

 

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

  • горизонтальные и вертикальные меню;
  • вложенные меню;
  • навигационные графические блоки.

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



Пример 7.2. Откройте данный пример в новом окне и попробуйте уменьшить ширину окна, так чтобы она стала меньше общей ширины всех картинок. Вы увидите, что картинки начинают переноситься на новую строку, когда ширина раздела становится меньше общей ширины всех картинок:

<IMG SRC="horis1.gif"><IMG SRC="horis2.gif"><IMG SRC="horis3.gif"><IMG SRC="horis4.gif">

Пример 7.5. Горизонтальное меню (картинки съезжают в узком окне) (html, txt)


Рис. 7.1. Горизонтальное меню (картинки съезжают в узком окне)

Пример 7.3. Проблема решается применением "защиты" от переноса на следующую строчку - контейнера <PRE>:

<PRE><IMG SRC="horis1.gif"><IMG SRC="horis2.gif"><IMG SRC="horis3.gif"><IMG SRC="horis4.gif"></PRE>

Пример 7.6. Горизонтальное меню (картинки защищены от переноса) (html, txt)


Рис. 7.2. Горизонтальное меню (картинки защищены от переноса)

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

<PRE><A HREF="courses.htm"><IMG SRC="horis1.gif"></A><A HREF="setting.htm"><IMG SRC="horis2.gif"></A><A HREF="baskets.htm"><IMG SRC="horis3.gif"></A><A HREF="thehelp.htm"><IMG SRC="horis4.gif"></A></PRE>

Пример 7.7. Горизонтальное меню (рамки вокруг картинок) (html, txt)


Рис. 7.3. Горизонтальное меню (рамки вокруг картинок)

Пример 7.5. Устранить этот недостаток можно путем задания значения атрибутаBORDER=0 у изображений:

<PRE><A HREF="courses.htm"><IMG SRC="horis1.gif" BORDER=0></A><A HREF="setting.htm"><IMG SRC="horis2.gif" BORDER=0></A><A HREF="baskets.htm"><IMG SRC="horis3.gif" BORDER=0></A><A HREF="thehelp.htm"><IMG SRC="horis4.gif" BORDER=0></A></PRE>

Пример 7.8. Горизонтальное меню (рамки более не видны) (html, txt)


Рис. 7.4. Горизонтальное меню (рамки более не видны)



<== предыдущая лекция | следующая лекция ==>
Оптимизация при загрузке изображений | Выделение выбранного пункта меню


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.004 сек.