Second_magistr / ВЕБ-програм / методичка

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

При создании таблиц также используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой отдельной ячейки (TD, TH).

<TABLE> </table>

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

width=400

width=50%

Для управления видом рамки используются два атрибута. Браузер имитирует трехмерность рамки, на ней можно различить фронтальную и боковую наклонные грани, которые имеют разную освещенность. Шириной боковой грани управляет атрибут border:

border=ширина в пикселах

При задании нулевого значения (border=0) рамка исчезает совсем. Шириной фронтальной линии управляет атрибут cellspacing:

14

cellspacing=ширина в пикселах

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

cellpadding=число пикселов

Задание этого атрибута делает ячейки больше. В этом случае между рамкой таблицы и данными всегда сохраняется определенное расстояние, что улучшает восприятие таблицы и делает текст легкочитаемым.

<CAPTION> </caption>

Элемент для задания заголовка таблицы. Заголовок выводится за рамками таблицы, а его положение регулируется атрибутом align:

<TR>

Данный элемент создает строку таблицы (table row). Не имеет конечного тега. Строка заканчивается там, где начинается следующая, то есть где стоит следующий элемент TR. Для выравнивания содержимого всех ячеек в строке можно использовать рассмотренный ранее атрибут align со значениями left, right и center. Кроме того, содержимое ячеек строки можно выравнивать по вертикали:

<TH>

Элемент ячейки, которая является заголовком (table header) столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается от обычной тем, что браузер отображает текст этой ячейки выделенным (обычно полужирным) шрифтом.

Атрибуты rowspan и colspan позволяют объединять ячейки таблицы. К примеру, при задании атрибута rowspan=n соответствующая ячейка займет не одну, а n строк. Аналогично, с помощью атрибута colspan можно создавать ячейки, расположенные сразу в нескольких столбцах.

Размеры ячеек можно задать жестко (в пикселах) при помощи атрибутов width и height. Для горизонтального и вертикального выравнивания текста внутри ячеек используются align и valign.

<TD>

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

Пример простой таблицы:

<TABLE border=4 cellspacing=3> <CAPTION> Заголовок таблицы </caption> <TR>

<TH bgcolor=“yellow”> Заголовок 1-го столбца <TH bgcolor=“yellow”> Заголовок 2-го столбца

<TR>

<TD> Ячейка 1 <TD> Ячейка 2

<TR>

<TD> Ячейка 3 <TD> Ячейка 4

</table>

Из листинга видно, что первая строка содержит только ячей- ки-заголовки. Текст, расположенный после элементов TD, представляет собой содержимое ячеек.

Отображение таблицы показано на рис. 2.4.

Далее создадим таблицу, в которой и строки и

столбцы будут иметь заголовки:

<TABLE border=4 cellspacing=3> <CAPTION> Еще одна таблица </caption> <TR>

<TH bgcolor=“yellow”>

<TH bgcolor=“yellow”> 1-й столбец <TH bgcolor=“yellow”> 2-й столбец

<TR>

<TH bgcolor=“yellow”> 1-я строка <TD> Ячейка 11

<TD> Ячейка 12

16

<TR>

<TH bgcolor=“yellow”> 2-я строка <TD> Ячейка 21

<TD> Ячейка 22

ЗАДАНИЕ :

Создайте Web-страницу с расписанием занятий на неделю. Организуйте ее с помощью вложенных списков: внешний ненумерованный список задает день недели (понедельник, вторник и т.д.), внутренний нумерованный – расписание на этот день.

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

ЛАБОРАТОРНАЯ РАБОТА № 3

Гиперссылки

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

Рассмотрим простейший случай, когда переход осуществляется внутри страницы. Создайте файл link.htm следующего содержания:

<HTML>

<HEAD> <TITLE>Гиперссылки</title>

</head>

<BODY bgcolor=yellow> <FONT size=5>

<A name=“top”> </a>

Переход в <A href=“#bottom”> конец </a> документа

<HR>

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

<HR>

<A name=“bottom”> </a>

Переход в <A href=“#top”> начало </a> документа

</font>

</body>

</html>

Записав этот файл в свой рабочий каталог на жесткий диск, а затем загрузив его в окно просмотра IE, вы увидите, что слова “конец” и “начало” в тексте выделены – теперь они представляют собой гиперссылки. Нужно иметь в виду, что переходы по этим ссылкам будут происходить только в том случае, если текст страницы не помещается в окне полностью. Вы можете изменить размер окна или добавить текст, чтобы они начали работать.

Гиперссылка организуется с помощью тега <A> (anchor). Сначала определяется метка, на которую будет происходить переход:

<A name=“label”></a>

Атрибут name указывает имя метки. Затем определяется собственно гиперссылка в том месте страницы, откуда происходит переход:

Переход к <A href=“#label”>метке</a>

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

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

ЗАДАНИЕ :

Оформите Web-страницу со ссылками на все созданные вами ранее HTML-файлы. Ссылки организуйте в виде ненумерованного списка. Проверьте все переходы (для возврата к исходному документу используйте кнопку Назад на главной панели).

ЛАБОРАТОРНАЯ РАБОТА № 4

Использование графики

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

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

В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданным. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, определение только одного из атрибутов изменяет оба размера рисунка. Если же заданы оба размера, рисунок будет масштабирован по двум осям. Следует иметь в виду, что масштабирование с коэффициентом, не кратным единице, как правило, ухудшает качество изображения. Чтобы не потерять качество, лучше всего задавать реальную высоту и ширину картинки в пикселах.

Толщина рамки (border) задается в пикселах. Если рисунок используется в качестве гиперссылки, то изменение цвета рамки позволит отличить пройденную ссылку от нетронутой:

border=Число пикселов

Слева и справа от рисунка, а также сверху и снизу от него можно создать пустое пространство. Это пространство не будет заполняться текстом:

hspace=Число пикселов vspace=Число пикселов

Рассмотрим пример, в котором рисунок содержит ссылку на файл HTML. Для организации такой ссылки тег <IMG> помещается внутри элемента <A>:

<HTML>

<HEAD>

<TITLE>Графика №2</title> </head>

<BODY>

<FONT size=5 face=“Arial”>

<P>Для загрузки файла format.htm щелкните левой кнопкой мыши над расположенным ниже изображением

<A href=“format.htm”>

<IMG src=“hlink1.gif” alt=“format.htm” border=5 width=199 height=68> </a>

<HR>

<P>Для загрузки файла lists.htm используйте вот это изображение

<A href=“lists.htm”>

<IMG src=“hlink2.gif” alt=“lists.htm” border=5 width=199 height=68> </a>

</font>

</body>

22

</html>

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

<HTML>

<HEAD>

<TITLE>Графика №3</title> </head>

<BODY>

<FONT size=5 face=“Arial”> <TABLE>

<TD>

Загрузка файла format.htm <TD>

<A href=“format.htm”>

<IMG src=“hlink1.gif” alt=“format.htm” border=5 width=199 height=68> </a>

<TD>

Загрузка файла lists.htm <TD>

<A href=“lists.htm”>

<IMG src=“hlink2.gif” alt=“lists.htm” border=5 width=199 height=68> </a>

</table>

</font>

</body>

</html>

ЗАДАНИЕ :

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

ЛАБОРАТОРНАЯ РАБОТА № 5

Фреймы