Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 22325 / 3958 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 7:

Программируем графику

< Лекция 6 || Лекция 7: 1234 || Лекция 8 >

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

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

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

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

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

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

<IMG SRC="horis1.gif"><IMG
     SRC="horis2.gif"><IMG
     SRC="horis3.gif"><IMG
     SRC="horis4.gif">
7.5. Горизонтальное меню (картинки съезжают в узком окне)
Горизонтальное меню (картинки съезжают в узком окне)

Рис. 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. Горизонтальное меню (картинки защищены от переноса)
Горизонтальное меню (картинки защищены от переноса)

Рис. 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. Горизонтальное меню (рамки вокруг картинок)
Горизонтальное меню (рамки вокруг картинок)

Рис. 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. Горизонтальное меню (рамки более не видны)
Горизонтальное меню (рамки более не видны)

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

Вертикальное меню

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

<PRE>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0><A 
HREF="courses.htm"><IMG SRC="vert1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0><A 
HREF="setting.htm"><IMG SRC="vert2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<!-- далее аналогично для vert3.gif и vert4.gif -->
</PRE>
7.9. Вертикальное меню (линия не сплошная)
Вертикальное меню (линия не сплошная)

Рис. 7.5. Вертикальное меню (линия не сплошная)

Пример 7.7. Решение заключается в использовании (вместо контейнера <PRE> ) таблицы <TABLE> с нулевыми границами между ячейками:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="courses.htm"><IMG SRC="vert1.gif"
       WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<!-- далее аналогично для vert2, vert3, vert4.gif -->
</TABLE>
7.10. Вертикальное меню (линия сплошная)
Вертикальное меню (линия сплошная)

Рис. 7.6. Вертикальное меню (линия сплошная)

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

< Лекция 6 || Лекция 7: 1234 || Лекция 8 >
Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>

Нураалы Батырбеков
Нураалы Батырбеков
Елена Балакшина
Елена Балакшина
Россия, Санкт-Петербург, СПБГУИТМО, 2006
Игорь Орещенков
Игорь Орещенков
Беларусь, Белорусский государственный университет, 1999