Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #16: Программируем графику Страницы: « 1 2 3 4 вопросы »

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

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

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

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

<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">

Элементы переносятся на новую строку, так как ширина раздела меньше общей ширины всех картинок. Проблема решается, если применить защиту от парсера — <PRE>: (открыть)

<PRE>
<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">
</PRE>

Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту: (открыть)

<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image2.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image3.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image4.gif"></A>
</PRE>

Этого можно достичь за счет применения атрибута BORDER равного 0: (открыть)

<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image2.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image3.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image4.gif" BORDER="0"></A>
</PRE>

Теперь попробуем тем же способом реализовать многострочное меню: (открыть)

<PRE>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image4.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
</PRE>

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

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image14.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
</TABLE>

В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.

Графика и обработка событий

В данном разделе мы не будем рассматривать обработчики событий контейнера IMG. Мы остановимся на наиболее типичном способе комбинирования обработчиков событий и изменения графических образов. Собственно, не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий, вызванных наведением мыши на объект, и изменением картинок:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=image.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><IMG SRC=image1.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
</TR>
<TR>
<TD><IMG SRC=image2.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.manual.src='image3.gif';return true;" onMouseout="document.manual.src='image4.gif'; return true;"><IMG SRC=image5.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
<TR>
<TD><IMG SRC=image6.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.desk.src='image7.gif';return true;" onMouseout="document.desk.src='image8.gif';return true;"><IMG SRC=image9.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
</TABLE>

В данном примере при проходе курсор мышки через картинки меню последние изменяются. Этот эффект достигается за счет применения двух событий: onMouseover и onMouseout. По первому событию картинка меняется с позитива на негатив, по второму событию восстанавливается первоначальный вариант. Следует заметить, что события определены в контейнере якоря (A), а не в контейнере IMG. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 4 вопросы »
  Основные понятия
Графика, IMG, загрузка картинок, отображение картинок, смена картинок события.
 
  Информация о лекции
В этой лекции рассказано о приемах программирования изменений графических образов на HTML-страницах. Подробно разбираются основные приемы программирования образов и приводятся примеры.
 
  Информация о главе
Глава 3. JavaScript
Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »