WEB-Дизайн ч2

многоуровневой вложенности.<BR><BR>

Другими словами, одна таблица может включать другую, та, в свою очередь, еще одну и

т. д.<BR><BR>

Эта особенность, в отличие от других способов представления данных в электронном документе, позволяет более точно размещать отдельные элементы страницы относительно друг друга и границ самого документа, отображаемого браузером.</TD>

</TR>

</TABLE>

<! – Левая таблица с текстом. Окончание – > </TD>

<TD VALIGN="top" WIDTH="50%">

<! – Правая таблица со списком. Начало – > <TABLE ALIGN="center" BORDER="1" CELLSPACING="3" CELLPADDING="5" WIDTH="100%">

<TR>

<TH BGCOLOR="#000000"> <FONT COLOR="white">

Преимущества вложенных таблиц</FONT> </ТН> </TR>

<TR>

<TD VALIGN="top">

<OL TYPE="1">

<LI>Гибкая масштабируемость структуры электронного документа в целoм<BR><BR>

<LI>Широкие возможности позиционирования отдельных элементов страницы<ВR><ВR>

<LI>Многоуровневое представление разнородных информационных данных<BR><BR>

<LI>Расширенные оформительские возможности<BR><BR>

<LI>Поддержка популярными браузерами

</OL>

</TD>

</TR>

</TABLE>

<!– Правая таблица со списком. Окончание –> </TD>

</TR>

</TABLE>

41

<!– Основная несущая таблица. Окончание –> </BODY>

</HTML>

Рис. 25. Пример использования многоуровневых вложенных таблиц

Как видно из листинга 2.9, электронный документ состоит из трех таблиц: первая является основной (несущей) и имеет невидимые рамки; две других расположены в ячейках основной таблицы и содержат блок текста и нумерованный список, соответственно.

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

Для закрепления пройденного материала все описанные теги и параметры, используемые при построении HTML-таблиц, приведены в табл.2.5.

42

Таблица 2 . 5

Теги и параметры, используемые для построения таблиц

43

3.Практические занятия и задания для лабораторных работ

Вданном разделе перечислены темы практических занятий, проводимых в рамках курса «Web-дизайн», относящиеся к темам, рассмотренным в данном методическом пособии.

Занятие 5. Структуризация информации:

●нумерованные списки (параметры тега <OL>);

●маркированные списки (параметры тега <UL>);

●вложенные списки;

●списки определений.

Задание. Составить списоки изучаемых дисциплин (нумерованные, маркированные списки и списки определений). Составить вложенные списки – изучаемые дисциплины и проводящие занятия преподаватели.

Занятия 6 и 7. Табличное представление данных.

Создание простейших таблиц и правила их описания:

●параметры тега <TABLE>;

●параметры тегов <TR>, <TD>, <TH>.

●Нестандартное представление таблиц:

●пустые ячейки;

●группировка данных;

●колонтитулы таблицы;

●прорисовка структуры таблицы. Вложенные таблицы.

Задание. Создать простейшую таблицу с данными (например, прайс-лист магазина вычислительной техники). Далее усложнить структуру таблицы путем введения вложенности (например, внешняя таблица содержит категории товара и гарантийные сроки, внутренние таблицы – товары по категориям и цены).

44

Список литературы

1.Миронов Д.А. Создание Web-страниц в MS Office 2000 / Д.А. Миронов.– СПб. : БХВ-Петербург, 2002. – 320 с.

2.Калиновский А.И. Юзабилити: как сделать сайт удобным / А.И. Калиновский. – Минск : Новое знание, 2005. – 220 с.

3.Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» / С. Круг. – СПб. : Символ-Плюс, 2005. – 200 с.

4.Кэмпбел М. Строим web-сайты / М. Кэмпбел. – М. : ТРИУМФ, 2006. – 480 с.

5.Петюшкин А. В. HTML. Экспресс-курс / А. В. Петюшкин. – СПб. : БХВ-

Петербург, 2003. – 256 с.

6.Шапошников И.С. Web-сайт своими руками / И.С. Шапошников. – СПб. : БХВ-Петербург, 2001. – 224 с.

7.Шапошников И.С. Самоучитель HTML 4 / И.С. Шапошников. – СПб. : БХВ-Петербург, 2000. – 288 с.

45

46