Главная
Уроки и советы

Основные принципы работы с таблицами. Вложенные таблицы. Что такое фреймы. Горизонтальные и вертикальные фреймы. Специфика создания страниц для Netscape Navigator и MS Internet Explorer. Все гениальное просто.

Ох, нелегко быть хакером... Погони, перестрелки... Забудьте. Все это голливудская ерунда. Настоящие хакеры работают мозгами – иначе в этом деле невозможно, ведь основные сложности, с которыми приходится сталкиваться при взломе компьютерных сетей,– это необходимость сделать что-либо с помощью средств, которыми это сделать, казалось бы, невозможно, а других способов выполнить задачу просто нет. Вот и приходится думать. А помогают в этом знания. Почему я все это говорю? Дело в том, что, как это ни грустно, но проблемы, с которыми сталкивается Web-дизайнер, зачастую имеют много общего со спецификой работы хакеров. К сожалению, HTML — очень «негибкий» язык, и существует множество вещей, сделать которые с помощью стандартных средств этого языка казалось бы нельзя. Но делать приходится. Поэтому при создании неординарных Web-страниц стоит руководствоваться замечательным принципом — «Think as a hacker», т. е. «Думайте как хакер» – и, обладая глубокими знаниями, вы наверняка найдете решение проблемы.

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

Например, вы не можете расположить рисунок не по центру страницы и поместить под него подпись, точно позиционированную относительно центра рисунка.

Сделать это можно, только выровняв и рисунок и подпись относительно центра страницы, используя тег <CENTER> .

В то же время решение этой проблемы существует, и причем целых два варианта. Один из них – разместить элементы страницы с использованием CSS (Cascading Style Sheets) – нового стандартного языка расширения HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит разработку.

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

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

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

Создав на странице однострочную таблицу, состоящую из трех ячеек, и расположив в левой ячейке, внутри тега <CENTER> </CENTER>, наш рисунок и подпись к нему, мы получим искомый вариант. Рассмотрим подробнее теги, применяющиеся для создания таблиц. В HTML любая таблица состоит из строк, разделенных на ячейки. Минимальное их количество – одна строка, содержащая одну ячейку. Максимальное количество не ограничено.

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

<ОПИСАНИЕ ТАБЛИЦЫ>
<ОПИСАНИЕ СТРОКИ>
<ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ>
<ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ>
<ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ>
</ОПИСАНИЕ СТРОКИ>
</ОПИСАНИЕ ТАБЛИЦЫ>

Рассмотрим синтаксис этих тегов:

<TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т. п.

<TR> </TR> - тег, описывающий начало и конец строки таблицы.

<TD> </TD> - тег, описывающий начало и конец ячейки.

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

Каждая таблица и ячейки, составляющие ее, имеют такие свойства, как ширина и высота, выравнивание по ширине и высоте, толщина границы, цвет фона. Эти свойства присваиваются элементам таблицы с помощью параметров WIDTH, HEIGHT, ALIGN, VALIGN, BORDER, BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING, COLSPAN и ROWSPAN.

Давайте поэкспериментируем с ними.

Параметр WIDTH управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки – относительно ширины таблицы) или в пикселях.

HEIGHT – то же самое, но для управления высотой таблицы.

Вот исходный код первой таблицы (Пример 1):

<TABLE>
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы и ячеек.</TD>
</TR>
</TABLE>

А вот второй (Пример. 2):

<TABLE BORDER WIDTH=100%>
<TR>
<TD>Таблица из одной строки</TD>
<TD>и трех столбцов</TD>
<TD>c указанием ширины таблицы,
равной 100% ширины окна броузера.</TD>
</TR>
</TABLE>

И третьей (Пример. 3):

<TABLE BORDER>
<TR>
<TD WIDTH=75>
       Ячейка с указанием ширины в 75 пикселей</TD>
<TD WIDTH=100>
       Ячейка с указанием ширины в 100 пикселей</TD>
<TD WIDTH=150>
       Ячейка с указанием ширины в 150 пикселей</TD>
</TR>
</TABLE>

Для управления размещением таблицы на Web-странице и для форматирования данных внутри таблицы служат параметры ALIGN и VALIGN.

Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER.

VALIGN может принимать значения TOP, MIDDLE и BOTTOM.

При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек – по горизонтали относительно левого края ячейки и по вертикали относительно ее центра. При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна броузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.

Параметр VALIGN применяется только внутри тегов <TR> и <TD>. При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.

Вот исходный код этих таблиц (Пример 4. Пример 5):

4.

<TABLE BORDER WIDTH=400 HEIGHT=150>
<TR>
<TD VALIGN=TOP>VALIGN=TOP</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER>ALIGN=CENTER
                            VALIGN=MIDDLE</TD>
<TD VALIGN=BOTTOM ALIGN=RIGHT>ALIGN=RIGHT
                            VALIGN=BOTTOM</TD>
</TR>
</TABLE>

5.

<TABLE BORDER WIDTH=400 HEIGHT=150 ALIGN=CENTER>
<TR VALIGN=BOTTOM ALIGN=CENTER>
<TD>Для этой строки задан параметр VALIGN=BOTTOM
и ALIGN=CENTER</TD>
</TR>
<TR VALIGN=TOP ALIGN=CENTER>
<TD>А для этой — VALIGN=TOP и ALIGN=CENTER</TD>
</TR>
</TABLE>

Параметр BORDER служит для управления толщиной границ таблицы. Употребляется он только в теге <TABLE>.

Параметры CELLSPACING служат для управления количеством свободного пространства между ячейками таблицы, а CELLPADDING – между границами ячейки и ее содержанием. Употребляются они также только в теге <TABLE>.

Для создания «невидимой» таблицы необходимо установить параметры BORDER=0 CELLSPACING=0 CELLPADDING=0 Исходный код таблицы 1 (Пример 6):

<TABLE BORDER=15 WIDTH=400 HEIGHT=150 ALIGN=CENTER>
<TR>
<TD>Для этой таблицы задан параметр BORDER=15</TD>
</TR>
</TABLE>

И таблицы 2:

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=25
WIDTH=600 HEIGHT=150 ALIGN=CENTER>
<TR>
<TD>Для этой таблицы заданы параметры BORDER=5
CELLSPACING=5 CELLPADDING=25</TD>
</TR>
</TABLE>

Параметр BGCOLOR предназначен для окрашивания фона ячеек таблицы, а параметр BACKGROUND – для размещения графического файла в качестве фона таблицы. Применять эти параметры можно как для таблицы в целом, так и для отдельных ячеек. Значения этих параметров необходимо указывать так же, как и в теге <BODY>, т. е. цвет указывается в восьмеричном исчислении или с помощью стандартного имени, а путь к файлу, используемому в качестве «обоев» для фона таблицы, необходимо указывать в соответствии со всеми правилами указания URL (см. Занятие 2).

Вот исходный код этих таблиц (Пример. 7):

1.

<TABLE BORDER=3 CELLSPACING=0 WIDTH=400
HEIGHT=100 ALIGN=CENTER BGCOLOR=BLACK>
<TR>
<TD ALIGN=CENTER BGCOLOR=RED>Для этой
ячейки задан параметр BGCOLOR=RED</TD>
<TD ALIGN=CENTER>
<FONT COLOR=WHITE>А в этой цвет шрифта
 изменен на белый</FONT></TD>
</TR>
</TABLE>

2.

<TABLE BORDER=1 WIDTH=400 HEIGHT=100
BACKGROUND=”backgr.gif” ALIGN=CENTER>
<TR>
<TD ALIGN=CENTER>Для этой таблицы задан
параметр BACKGROUND=”file”</TD>
</TR>
</TABLE>

3.

<TABLE BORDER=0 ALIGN=CENTER>
<TR>
<TD>А эта таблица – самая скромная.

У нее нет ни фона, ни границ.</TD>
</TR>
</TABLE>

При создании таблицы первая строка является определяющей, т. е. все последующие строки будут иметь такую же ширину колонок, как и первая строка. Для изменения этого положения служит параметр COLSPAN. Изменение значения СOLSPAN приводит к увеличению ширины ячейки на указанное вами количество ранее определенных столбцов, т. е. при указании параметра COLSPAN=2 ячейка займет пространство, отведенное для следующей (справа) ячейки.

Параметр ROWSPAN действует абсолютно так же, но по вертикали. Например, при указании значения ROWSPAN=2 ячейка займет пространство, отведенное для ячейки, находящейся под ней, в следующей строке таблицы.

Взгляните на исходный код этих таблиц (Пример. 8):

1.

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400
HEIGHT=100 ALIGN=CENTER BGCOLOR=ORANGE>
<TR ALIGN=CENTER>
<TD WIDTH=10%>Ширина ячейки 10% 
ширины таблицы</TD>
<TD WIDTH=60%>Ширина ячейки 60%
ширины таблицы</TD>
<TD WIDTH=30%>Ширина ячейки 30%
ширины таблицы</TD>
</TR>
<TR>
<TD ALIGN=CENTER COLSPAN=3>Для этой
ячейки указан параметр COLSPAN=3</TD>
</TR>
</TABLE>

2.

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 
HEIGHT=100 ALIGN=CENTER BGCOLOR=CYAN>
<TR ALIGN=CENTER>
<TD WIDTH=30% ROWSPAN=2>Для этой 
ячейки указан параметр ROWSPAN=2 и
WIDTH=30%</TD>
<TD>Ширина этой ячейки не указана,
поэтому она занимает всю оставшуюся 
ширину таблицы, т. е. 70%.</TD>
</TR>
<TR ALIGN=CENTER>
<TD>А эта ячейка сгенерирована в
соответствии с шириной ячейки, находящейся 
в первой строке, над ней.</TD>
</TR>
</TABLE>

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

Вот исходный код этой таблицы (Пример 10):

<TABLE BORDER=3 WIDTH=400 HEIGHT=400
             ALIGN=CENTER CELLSPACING=0>
<TR>
<TD BGCOLOR=ORANGE>
<TABLE BORDER=3 WIDTH=300 HEIGHT=300
             ALIGN=CENTER CELLSPACING=0>
<TR>
<TD BGCOLOR=GREEN>
<TABLE BORDER=3 WIDTH=150 HEIGHT=150
             ALIGN=CENTER CELLSPACING=0>
<TR>
<TD BGCOLOR=BLUE ALIGN=CENTER 
VALIGN=CENTER>
<IMG SRC=”logo5les.gif” WIDTH=130 
HEIGHT=98>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

Теперь вы знаете практически все о таблицах в HTML, и при наличии фантазии и чувства стиля вы можете создавать Web-страницы, выглядящие вполне профессионально. Рассмотрим еще один способ оформления страниц, очень широко применяемый в Web-дизайне. Это – использование фреймов (от англ. Frame – рамка).

Что же такое фреймы? Представьте себе Web-страницу, условно разделенную на несколько частей таким образом, что источником каждой из этих частей является независимая страница. Представили? А теперь представьте, как удобно будет использовать такую структуру для страниц, содержащих большие объемы информации: в одной части страницы можно поместить меню, в другой – элементы графического оформления, неизменные для всей данной части сайта, а в третью загружать страницы с информацией. Это позволит минимизировать задержки, возникающие при загрузке страниц, и уменьшить объем HTML-кода сайта.

С позиции HTML фреймы устроены очень просто и описываются небольшим количеством тегов. Рассмотрим их. Для создания странички с фреймами мы должны создать количество страниц, равное количеству частей (фреймов), на которое разделена страничка, плюс еще одну «материнскую» страничку, которая будет содержать описание фреймовой структуры.

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

<FRAMESET COLS=”50%,50%”>
<FRAME SRC=”путь_к_файлу-
источнику_для _левого_фрейма.html”>
<FRAME SRC=”путь_к_файлу-
источнику_для _правого_фрейма.html”>
</FRAMESET>

Это весь код, который должна содержать «материнская» страничка.

Для создания большего количества фреймов вы должны изменить значение параметра COLS в теге <FRAMESET> и дополнить список <FRAME SRC> файлом, который будет служить источником для нового фрейма.

В нашем примере значение параметра COLS=”50%, 50%” cообщает броузеру о том, что он должен сгенерировать на страничке два вертикальных фрейма, а ширина каждого из них будет равна 50% ширины окна броузера. Значения <FRAME SRC=”URL”> указывают броузеру на файлы, которые будут являться источниками наполнения фреймов. Файлы перечисляются по порядку, слева направо и сверху вниз.

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

<FRAMESET ROWS=”50%,50%”>
<FRAME SRC=”путь_к_файлу-источнику_
для _верхнего_фрейма.html”>
<FRAME SRC=”путь_к_файлу-источнику_
для _нижнего_фрейма.html”>
</FRAMESET>

Вы можете сочетать вертикальные и горизонтальные фреймы в любом порядке. Для этого необходимо лишь применять уже известные вам правила использования вложенных тегов (см. выше) и правильно описывать структуру в теге <FRAMESET>, соблюдая желаемую последовательность расположения.

Взгляните на исходный код «материнской» странички (пример странички):

<HTML>
<HEAD>
<TITLE>Примеры фреймовой структуры
</TITLE>
</HEAD>
<FRAMESET COLS=”20%,*”>
<FRAME SRC=”fr1.html”>

<FRAMESET ROWS=”50%,*”>
<FRAME SRC=”fr2.html”>
<FRAME SRC=”fr3.html”>
</FRAMESET>

</FRAMESET>
</HTML>

Как вы видите, здесь используется набор из двух горизонтальных фреймов, вложенный в другой набор из двух вертикальных фреймов. Взгляните на значения ширины фреймов в тегах <FRAMESET> – в этом примере вместо значения ширины второго фрейма используется знак «*». Он сообщает броузеру, что для этого фрейма необходимо отвести все свободное пространство, оставшееся после первого фрейма. Вы можете указывать ширину фреймов как в процентах относительно свободного окна броузера, так и в пикселях.

Как и большинство тегов HTML, теги <FRAMESET> и <FRAME> имеют дополнительные параметры, управляющие отображением фреймовой структуры.

Давайте рассмотрим параметры, с которыми может использоваться тег <FRAMESET>:

BORDER – может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию)

FRAMEBORDER – любое значение (в пикселях)

FRAMESPACING – управление шириной границ фреймов. Для Netscape Navigator может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию), а для Microsoft Internet Explorer – любое значение (в пикселях).

Броузеры Netscape Navigator и Microsoft Internet Explorer работают с фреймами немного по-разному (впрочем, они и все остальное делают с большими отличиями).

Для того чтобы отключить отображение границ фреймов в броузере Netscape Navigator, необходимо указать параметры BORDER=0, FRAMESPACING=0, а для выполнения той же задачи в Microsoft Internet Explorer необходимо указать параметры FRAMEBORDER=0 и FRAMESPACING=0. Поэтому, если вы хотите отключить отображение границ фреймов, для адекватного отображения Web-страниц в обоих броузерах в теге <FRAMESET> необходимо указывать все три параметра равными нулю.

А теперь давайте разберемся с параметрами, которые можно использовать с тегом <FRAME>.

SRC=«URL» – как вы уже знаете, этим параметром определяется страница-источник для данного фрейма.

NAME=«название фрейма» – используется для присвоения фрейму имени. Это требуется для целевых операций с фреймами, т. е. для загрузки определенного документа в соответствующий фрейм.

MARGINWIDTH=«n(пикселей)» – значения отступов от края страницы (по горизонтали) для страниц, которые будут отображаться в заданном фрейме.

MARGINHEIGHT=«n(пикселей)» – то же, но по вертикали.

SCROLLING=«yes/no/auto» – принудительное включение/отключение/установка автоматического режима отображения линеек прокрутки для данного фрейма.

NORESIZE – запрет изменения размеров фреймов при просмотре.

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

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

Вот исходный код набора фреймов, применяющегося для этой страницы (Пример 11.):

<HTML>
<HEAD>
<TITLE>История подводных лодок</TITLE>
</HEAD>
<FRAMESET ROWS=”60,*” BORDER=0 
FRAMEBORDER=0 FRAMESPACING=0>
<FRAME SRC=”fr_top.html” MARGIN-
WIDTH=”0” MARGINHEIGHT=”0” SCROL-
LING=”auto” NORESIZE>
<FRAME NAME=”main”SRC=”fr_main1.html”
 MARGINWIDTH=”0” MARGINHEIGHT=”0” 
SCROLLING=”auto” NORESIZE>
</FRAMESET>
</HTML>

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

<HTML>
<HEAD></HEAD>
<BODY BGCOLOR=”#OOOOOO”>
<TABLE BORDER=0 WIDTH=100% ALIGN=CENTER>
<TR>
<TD ALIGN=RIGHT VALIGN=MIDDLE>
<A HREF=”index.html” TARGET=”_top”>
<IMG SRC=”menu1.gif” WIDTH=200 HEIGHT=20 ALT=”Назад”></A>
</TD>
<TD ALIGN=CENTER VALIGN=TOP>
<IMG SRC=”header1.gif” WIDTH=300 HEIGHT=32>
</TD>
<TD ALIGN=LEFT VALIGN=MIDDLE>
<A HREF=”fr_main2.html” TARGET=”main”>
<IMG SRC=”menu2.gif” WIDTH=200 HEIGHT=20 ALT=”Следующая статья”></A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Обратите внимание на параметры TARGET в теге <A>. При указании параметра TARGET="_top" после щелчка по ссылке первая страничка сайта будет загружена в окно, не содержащее фреймов. Для указания броузеру этого действия мы использовали зарезервированное имя "_top".

Всего в HTML существует четыре таких зарезервированных имени, из них для нас пока важны только два. Одно из них вы уже знаете, а второе, «_blank», используется для открытия гиперссылки в новом окне броузера. Обратите внимание: зарезервированные имена следует писать строчными буквами! Также вы не можете использовать зарезервированные имена для обозначения ваших фреймов.

Во втором теге <A> мы использовали параметр TARGET со значением "main". Посмотрите на исходный код «материнской» странички – этим именем там был назван нижний фрейм. Таким образом, при щелчке по гиперссылке «Следующая история» файл со статьей будет загружен не в верхний фрейм (в котором находится гиперссылка), а в нижний.

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

Вот как это можно воплотить в HTML:

<HTML>
<HEAD></HEAD>
<BODY BGCOLOR=”#000000”>
<TABLE WIDTH=100% BORDER=0 ALIGN=CENTER CELLSPACING=0 CELLPADDING=20>
<TR>
<TD WIDTH=5% BGCOLOR=BLACK> </TD>
<TD WIDTH=90% BGCOLOR=WHITE>
<B><FONT SIZE=5>
<CENTER>Изобретение инженера Бауэра.</CENTER></B></FONT>
<FONT SIZE=2>
<I><U><P ALIGN=”RIGHT”>Игорь Дыгало</P></U></I></FONT>
<BR>
<P ALIGN=”JUSTIFY”>
Текст статьи...
</P>
</TD>
<TD WIDTH=5% BGCOLOR=BLACK> </TD>
</TABLE>
</BODY>
</HTML>

Напоследок дам еще один совет: при создании страниц постарайтесь думать о тех людях, у которых всего лишь 14-дюймовый монитор и разрешение дисплея, равное 640 х 480 точек. Учитывайте, что максимальный размер странички, который они увидят, будет примерно 600 х 300 точек и постарайтесь исходить из этого при расчете ваших таблиц и фреймов. Не перегружайте страницы лишними фреймами – это раздражает просматривающих. Помните: ВСЕ ГЕНИАЛЬНОЕ ПРОСТО.

Официальную спецификацию языка HTML 4.0, которую вы можете использовать как справочник, вы найдете на сайте WWW-консорциума (W3C) по адресу: http://www.w3.org/TR/REC-html40/.