Создание web-сайта

<TH WIDTH="11">3</TH>

<TD WIDTH="223">Dixitque Deus &quot:Fiat lux&quot; et facta est lux.</TD>

<TD WIDTH="271">And God said. Let there be light: and there was "light.</TD>

<TD WIDTH="240">И сказал Бог: &quot;Да будет Свет!&quot: - и стал Свет.</ТD>

</TR>

</TABLE>

  Представление таблиц, элементы которых занимают несколько строк или столбцов

Иногда в html-документе необходимо представить таблицу, некоторые ячейки которой занимают несколько строк или столбцов по вертикали или горизонтали. Для этого используются атрибуты COLSPAN и ROWSPAN, варьируя параметрами которых можно добиться желаемого результата. В качестве примера применения такой таблицы предлагаю рассмотреть код HTML, представляющий на экране правила спряжения английского глагола to be в настоящем времени:

<TABLE BORDER="1" ALIGN="CENTER" CELLPADDING-"3" WIDTH="252">

<САРТION>Спряжение глагола <EM>to be:</EM></CAPTION>

<TR>

<TH WIDTH="34">&nbsp;</TH>

<TH иттн="198">3начение <EM>to be:</EM></TH>

</TR>

<TR>

<TH WIDTH="34">I</TH>

<TD ALIGN="CENTER" WIDTH="198">am</TD>

</TR>

<TR>

<TH WIDTH="34">You</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">are</TD></TR><TR>

<TH WIDTH="34">We</TH>

</TR>

<TR>

<TH WIDTH="34">They</TH>

</TR>

<TR>

<TH WIDTH="34">He</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">is</TD>

</TR>

<TR>

<TH WIDTH="34">She</TH>

</TR>

<TR>

<TH WIDTH="34">It</TH>

</TR>

</TABLE>

Вложенные таблицы

Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка HTML используется для представления на web-странице так называемых «вложенных» таблиц,пример описания которых вы можете видеть ниже:

<TABLE BORDER="1" CELLPADDING="6" WIOTH="600">

<САРТION>Спряжение стандартного глагола <EM>to invite:</EM></CAPTION>

<TR>

<TH МЮТН="300">Перевод</ТН>

<TH WIDTH="300">Future</TH>

<TH WIDTH="300">Future-in-the-Past</TH>

</TR>

<TR>

<TD COLSPAN="3" WIDTH="527">

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="588">

<TR>

<TD WIDTH="194">Я (мы) приглашу(-сим)</ТD>

<TD WIDTH="194">I (we) shall invite</TD>

<TD WIOTH="194">I (we) should invite</TD>

</TR>

<TR>

<TD WIDTH="194">OH (вы. они) пригласит (-ите. -ят)</ТD>

<TD WIDTH="194">He (you. they) will invite</TD>

<TD WIDTH="194">He (you. they) would invite</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

Из приведенного отрывка кода HTML ясно, что для создания отображаемой на экране пользователя таблицы спряжения английского глагола to invite использованы две таблицы, вложенные одна в другую. Первая задает форматирование ячеек для заголовков таблицы, а вторая — столбцы со значениями спрягаемого глагола.

В приведенном примере для разметки внешней таблицы использован атрибут CELLPADDING со значением 6, прежде всего, для того, чтобы вам было легче визуально отличить внешнюю таблицу от внутренней. Если для обеих таблиц установить нулевое значение отступов и толщины рамок, таблицы «слипаются» в окне броузера, что позволяет создать невидимую пользователю конструкцию с произвольным разбиением. Этот прием часто используется для создания «прозрачных» таблиц, играющих роль верстальной сетки для размещения элементов web-страницы.

16.  Теги создания фреймов

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

Фреймы — способ организации структуры сайта, при котором web-страница дробится на ряд отдельных составляющих и «собирается» в главном окне броузера из нескольких независимых или вложенных окон. При таком представлении каждый компонент страницы является самостоятельным документом HTML и встраивается в ту область экрана, которая задается директивой<FRAMESET>. Данный способ применяется в основном для дробления web-страницы на логические разделы: например, в верхнем фрейме выводится рекламный баннер, в левом — элементы навигации, в правом — основной текст страницы, в нижнем — сообщение об авторских правах и адрес электронной почты разработчика ресурса. При этом нажатие на любую из навигационных кнопок приводит к изменению содержимого лишь одного окна, все остальные фреймы остаются без изменений. Если содержимое фрейма не умещается в видимые границы окна, броузер отображает полосы прокрутки.

В случае применения фреймов индексный html-файл (index.html) несколько отличается от обычного. Как известно, стандартный документ HTML имеет два логических раздела: раздел заголовков <HEAD> и раздел <BODY>, определяющий тело документа. При использовании фреймов раздел <BOOY> заменяется на раздел <FRAMESET>. Все остальные документы, отображаемые в отдельных фреймах, имеют стандартное представление.

В общем виде синтаксис записи директивы <FRAMESET> выглядит следующим образом:

<FRAMESET ROWS="значение" COLS="значение" FRAMEBORDER="значение"

FRAMESPACING="значение">

<FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no или auto" SRC="URL"

FRAMEBORDER="значение" NORESIZE>

<NOFRAMES>

<BODY>

Текст, отображаемый в броузерах, не поддерживающих фреймы.

</BODY>

</NOFRAMES>

</FRAMESET>

Очевидно, что общая структура представления фреймов во многом схожа с представлением таблиц: тег <FRAMESET>, задающий параметры отображения всех фреймов в документе, содержит необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Причем некоторые атрибуты, применяемые совместно с командой <FRAME>, могут отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в случае с <ТАВ1Е>, директива описания фреймов допускает вложение одного элемента <FRAMESET> в другой.

Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли отображать на экране пользователя границы фреймов. Параметр этого атрибута может принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину разделителей в пикселах. Атрибуты ROWS и COLS определяют соответственно количество горизонтальных и вертикальных отрезков во фреймовом наборе.

Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах, процентах и в относительных длинах. Если атрибут ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если не указан атрибут COLS, каждая строка растянется на всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET COLS="50*.50Х"> разделит страницу вертикально на две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст горизонтальное разделение страницы на три участка: первый — с фиксированной высотой 250 пикселов, второй — высотой в 10 % от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. В этом примере при задании параметров атрибута ROWS были использованы все три варианта определения отрезков фреймового набора: в пикселах (250 точек), процентах (10 %) и в относительных длинах (включение символа *). Разделения web-страницы на сетку 2x3 ячейки можно добиться, например, применением следующих значений атрибутов директивы <FRAMESET>: <FRAMESET ROWS="40%. 60%" COLS="33%. 34%. *">.

Команда <FRAME> может включать следующие атрибуты: NAME, в котором задается уникальное имя для данного конкретного фрейма, набранное с использованием символов латинского алфавита, TARGET, содержащий информацию о целевом фрейме (рекомендуется использовать значение по умолчанию — "contents"), SCROLLING, определяющий наличие ("yes"), отсутствие ("по") или отображение по мере необходимости ("auto") полос прокрутки в текущем фрейме, SRC, в котором указывается адрес открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и назначение которого аналогичны таковым в составе тега <FRAMESET>, и, наконец, атрибут NORESIZE, наличие которого устанавливает запрет на изменение пользователем размеров окна фрейма. Тег <FRAME> может также содержать ряд других необязательных атрибутов, таких как ARGINWIDTH, определяющий размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей, и MARGIN-HEIGHT, задающий верхний и нижний отступы.

Директива <NOFRAMES>, включающая вложенные теги <BODY> и </BODY>, позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер не поддерживает фреймы.

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

<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A>

Допустимые значения атрибута TARGET для применения тега <А> во фреймовых наборах следующие:

_self — документ, с которым установлена гиперсвязь, открывается в текущем фрейме;

_parent — отображение осуществляется в родительском окне фреймов, независимо от того, какие параметры указаны в директиве <FRAMESET>;

_top — при активизации гиперссылки фреймы перестают отображаться, а содержимое целевого документа выводится в отдельном окне.

Если вместо значения атрибута TARGET подставить имя фрейма, заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.

Ярким примером использования директивы <FRAMESET> может служить приведенный ниже листинг индексного документа HTML, использующего фреймы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>FRAMESET EXAMPLE PAGE</TITLE>

</HEAD>

<FRAMESET FRAMESPACING="0" rows="64.*.64" FRAMEBORDER="0">

<FRAME NAME="top" SCROLLING="no" TARGET="contents" SRC="page_l.htm">

<FRAMESET COLS="150.*">

<FRAME NAME="contents" SRC="page_2.htm" SCROLLING="auto">

<FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto">

</FRAMESET>

<FRAME NAME="bottom" SCROLLING="no" NORESIZE SRO"page_4.htm">

<NOFRAMES>

<BODY>

<P ALIGN="CENTER">Этa страница содержит фреймы, но ваш броузер не поддерживает их отображение.</Р>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

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

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

Во-первых, фреймы весьма сложны в разработке и настройке: достаточно трудно оптимизировать такую страницу для корректного отображения в разных версиях броузеров со всеми допустимыми экранными разрешениями. В некоторых фреймах возможно периодическое появление полос прокрутки, затрудняющих просмотр документа, а жесткий запрет на отображение средств скроллинга может повлечь за собой исчезновение части отображаемых во фреймах страниц заграницей видимой области экрана. Во-вторых, фреймы распознаются далеко не всеми броузерами, в полной мере их поддерживают лишь современные версии Microsoft Internet Explorer и Netscape Navigator.

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