HTML — это просто 6
HTML - это просто Как я и обещал в предыдущем номере, в этой статье мы рассмотрим тэги, отвечающие за цветовую гамму и размеры вашей странички
Параметр 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="kg04811a.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 — запрет изменения размеров фреймов при просмотре.
А теперь посмотрим, как мы можем, используя полученные знания, сделать нашу тестовую страничку об истории подводных лодок более удобной и привлекательной.
Создадим два фрейма, в одном из них, содержащем графику, мы расположим меню, а второй фрейм будет содержать тексты статей. Таким образом, при переходе от статьи к статье будет перезагружаться только текстовый фрейм — это позволит значительно увеличить скорость загрузки.
<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="kg04811b.gif" width=200 height=20 alt="Назад"> </A>
</TD>
<TD ALIGN=CENTER VALIGN=TOP>
<img src="kg04811c.gif" width=300 height=32>
</TD>
<TD ALIGN=LEFT VALIGN=MIDDLE>
<A HREF="fr_main2.html" TARGET="main">
<img src="kg04811d.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 точек, и постарайтесь исходить из этого при расчете ваших таблиц и фреймов. Не перегружайте страницы лишними фреймами — это раздражает просматривающих. Помните: ВСЕ ГЕНИАЛЬНОЕ ПРОСТО.
В следующей статье мы рассмотрим принципы работы с CSS (Cascading Style Sheets) — новым стандартным языком — расширением HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит их разработку.
Евгений Пивнев
(c) компьютерная газета
Параметр 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="kg04811a.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 — запрет изменения размеров фреймов при просмотре.
А теперь посмотрим, как мы можем, используя полученные знания, сделать нашу тестовую страничку об истории подводных лодок более удобной и привлекательной.
Создадим два фрейма, в одном из них, содержащем графику, мы расположим меню, а второй фрейм будет содержать тексты статей. Таким образом, при переходе от статьи к статье будет перезагружаться только текстовый фрейм — это позволит значительно увеличить скорость загрузки.
<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="kg04811b.gif" width=200 height=20 alt="Назад"> </A>
</TD>
<TD ALIGN=CENTER VALIGN=TOP>
<img src="kg04811c.gif" width=300 height=32>
</TD>
<TD ALIGN=LEFT VALIGN=MIDDLE>
<A HREF="fr_main2.html" TARGET="main">
<img src="kg04811d.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 точек, и постарайтесь исходить из этого при расчете ваших таблиц и фреймов. Не перегружайте страницы лишними фреймами — это раздражает просматривающих. Помните: ВСЕ ГЕНИАЛЬНОЕ ПРОСТО.
В следующей статье мы рассмотрим принципы работы с CSS (Cascading Style Sheets) — новым стандартным языком — расширением HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит их разработку.
Евгений Пивнев
(c) компьютерная газета
Компьютерная газета. Статья была опубликована в номере 48 за 2000 год в рубрике soft :: интернет
