Использование таблиц в данном ключе будет рассмотрено на примере создания страницы, дизайн которой целиком на них основан. Создаваемая страница будет иметь элементы, расположенные так, как показано на рис. 7.9, и будет как бы электронной копией этой главы.
Рис. 7.9. Расположение элементов страницы
Для реализации задуманного можно использовать две таблицы. Первая таблица (пусть внешняя) имеет два столбца и две строки. Во вторую ячейку первой строки таблицы нужно поместить вложенную таблицу, содержащую одну строку из двух ячеек: для названия раздела и для рисунка-логотипа (см. рис. 7.9). В первой ячейке второй строки внешней таблицы помещаются гиперссылки на файлы примеров из этой главы книги, а во вторую ячейку помещается собственно текст.
С учетом всего вышеизложенного можно написать следующий HTML‑документ (пример 7.11).
Пример 7.11. Страница на таблицах
<HTML>
<HEAD>
<TITLE>Страница, построенная на таблицах</TITLE>
</HEAD>
<BODY>
<TABLE width = "100%">
<COL width = 100 align = left valign = top bgcolor = yellow>
<COL width = "*" align = justify valign = top>
<TR>
<TD bgcolor = white>
<TD>
<TABLE width = "100%">
<COL width = "*" align = center>
<COL width = 57> <!–Столбец растягивается по ширине изображения–>
<TR>
<TD bgcolor = yellow><H1>7. Таблицы</H1>
<TD><IMG src = "7.11.html.files/logo.jpg">
</TABLE>
<TR>
<TD> <!–В первом столбце помещаются гиперссылки на примеры–>
<P><A href = "7.1.html">Пример 7.1</A>
<P><A href = "7.2.html">Пример 7.2</A>
<P><A href = "7.3.html">Пример 7.3</A>
<P><A href = "7.4.html">Пример 7.4</A>
<P><A href = "7.5.html">Пример 7.5</A>
<P><A href = "7.6.html">Пример 7.6</A>
<P><A href = "7.7.html">Пример 7.7</A>
<P><A href = "7.8.html">Пример 7.8</A>
<P><A href = "7.9.html">Пример 7.9</A>
<P><A href = "7.10.html">Пример 7.10</A>
<TD> <!–Весь текст помещается в одной ячейке таблицы–>
<P>Таблицы в том виде, в котором они реализованы в HTML,
являются замечательным средством упорядочивания данных.
Кроме группировки информации, таблицы являются чрезвычайно полезными при разработке дизайна HTML-документа.
В данном разделе рассмотрены оба способа использования таблиц.
Но для начала разберемся с тем, как добавлять таблицы в HTML-документ, а также рассмотрим возможности,
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-
элемент TABLE, который задается парными обязательными тегами <TABLE> и </TABLE>.
<P>Строки таблицы задаются HTML-элементом TR (парные теги
<TR> и </TR>, закрывающий тег необязателен).
Ячейки в простейшем случае задаются HTML-элементом TD (парные теги <TD> и </TD>, закрывающий тег необязателен).
</TABLE>
</BODY>
</HTML>
Страница из приведенного примера выглядит так, как показано на рис. 7.10.
Рис. 7.10. Страница, построенная на таблицах
Можно сказать, что получилась хотя и простая, но довольно симпатичная страничка. При разработке данного примера ставилась задача подчеркнуть, какие огромные возможности предоставляются автору при разработке дизайна HTML‑документов, построенного на использовании таблиц.
Попробуйте открыть любую прилично выглядящую страницу при помощи того же редактора Блокнот, и почти наверняка вы увидите, что для ее создания использовались всего лишь таблицы в сочетании со списками и изображениями. Все, с чем «поиграли» авторы, – это умело сгруппировали ячейки таблиц, раскрасили их и добавили в нужные ячейки списки, текст и рисунки. Вот она – настоящая мощь такого, казалось бы, простого средства, как таблицы.
Эта глава посвящена одному из самых интересных и удобных способов организации информации на веб‑страницах: использованию фреймов. Если раньше в этой книге в основном рассматривалось создание отдельных HTML‑документов (страниц сайта), то в примерах данной главы упор делается на создании сайтов, состоящих из нескольких страниц. Это обусловлено тем, что само по себе использование фреймов предполагает наличие нескольких страниц, одновременно показываемых пользователю.
Прежде чем использовать фреймы на практике, не мешало бы узнать, что это такое, а также чем выгодно использование фреймов для организации информации на страницах сайта по сравнению с теми же таблицами.
Во всех примерах ранее в книге рассматривалось выравнивание текста, графики, таблицы и прочего наполнения HTML‑документов в окне браузера. При этом в нем могло отображаться содержимое только одного документа. Использование фреймов позволяет разбить окно браузера на несколько частей, в которых могут отображаться разные HTML‑документы. Например, так, как показано на рис. 8.1.
Рис. 8.1. Три документа в одном окне
При этом содержимое каждого документа выравнивается относительно своего собственного окна – фрейма. Теперь представьте себе, что в левом верхнем фрейме находятся ссылки на ресурсы сайта, в левом нижнем – какая‑то рекламная или другая информация, в правом большом фрейме помещается текст. Допустим, при навигации по сайту изменяется только текст, отображаемый в правом фрейме. В этом случае использование фреймов позволяет следующее.
• Прокручивать содержимое одних фреймов независимо от содержимого других.
• Осуществлять переход между страницами сайта, загружая содержимое только в правый фрейм. Это экономит время пользователя, так как статичное содержимое сайта загружается с сервера только один раз.
Теперь, после знакомства с фреймами, можно рассмотреть, как выполняются создание и настройка сайтов с использованием фреймов.
8.2. Создание набора фреймов
Даже самый простой сайт, показанный на рис. 8.1, состоит из четырех HTML‑документов. Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также включает в себя указания браузеру, откуда загружать страницы в созданные фреймы. Содержимое HTML‑документа приведено в примере 8.1.
Пример 8.1. Файл с описанием фреймов
<HTML>
<HEAD>
<TITLE>Сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = "200, *">
<FRAMESET rows = "70%, *">
<FRAME src = "page1.html">
<FRAME src = "page2.html">
</FRAMESET>
<FRAME src = "page3.html">
</FRAMESET>
</HTML>
Здесь можно увидеть два новых HTML‑элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами <FRAMESET> и </FRAMESET>. При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:
• cols – список значений ширины создаваемых фреймов (могут использоваться как абсолютные значения в пикселах, так и процентные, а также пропорциональные, см. пример 8.1);
• rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).
Можно задавать значения только одного из атрибутов. При этом если задано значение только атрибута col, то созданные фреймы будут занимать всю высоту окна браузера. Если задано значение только атрибута rows, то созданные фреймы будут занимать всю ширину окна браузера. Если заданы значения обоих атрибутов, то фреймы создаются слева направо и сверху вниз.
Между тегами <FRAMESET> и </FRAMESET> должны содержаться либо описания каждого фрейма с использованием HTML‑элемента FRAME, либо определения вложенных фреймов. Рассмотрим сначала описание фреймов при помощи элемента FRAME. Этот HTML‑элемент задается при помощи одиночного тега <FRAME>. Ниже приведены его атрибуты, используемые чаще всего:
• name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;
• src – URI документа, содержимое которого отображается в окне фрейма;
• noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;
• scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);
• frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8.1, используется по умолчанию) или 0 (рамка не показывается);
• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);
• marginheight – задает расстояние между границами и содержимым фрейма по вертикали.
Ранее было затронуто понятие вложенных фреймов. Теперь пришло время рассмотреть вложение фреймов подробно. В HTML фреймы могут вкладываться друг в друга любое количество раз. Это находит применение тогда, когда нужно разбить окно браузера, например так, как сделано на рис. 8.1. Изучите внимательно следующий фрагмент.
