Практическое введение в программирование на JavaScript (стр. 3 )

Пример 1.9

<HTML>

<HEAD>

<TITLE> Товары</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">Компания.</H1>

<HR>

<p ALIGN="CENTER"><font color="#400040" size="4">[

<a href="news. html">Новости</a> |

<a href="products. html">Товары</a> |

<a href="servis. html">Услуги</a> |

<a href="contact. html">Контакты</a> |

<a href="search. htm">Поиск</a> ] </font>

<HR>

<H3 ALIGN=CENTER>Виды бытовой электроники предлагаемые Компани-ей </H3>

</map>

<HR>

<H3 ALIGN="CENTER">Контактная информация</H3>

<UL>

<LI>Telephone (1

<LI>FAX (1

<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106

<UL TIPE="CIRCLE">Электронная почта<BR>

<LI>Общая информация: *****@***su

<LI>Продажи: *****@***abc. su

</UL>

</BODY>

</HTML>

Имейте в виду, что если опустить атрибут SНАРЕ=, будет задано SНАРЕ="RЕСТ". Атрибут СООRDS= описывает координаты формы, используя пиксели в качестве единиц измерения. Атрибут USЕМАР= в таге <IMG> действует как ссылка <переход на>. Если перед именем файла карты помещен символ #, то атрибут USЕМАР= считает, что активное изображение находится в файле, описанном в таге <IMG>. Не пугайтесь координат. Точкой отсчета является левый верхний угол.

НЕ нашли? Не то? Что вы ищете?

Активные изображения, работающие и на сервере, и у клиента

Возможно, вы захотите проявить осторожность и сделать изображения, работающими и на сервере, и на машине-клиенте.

После того, как вы создадите активные изображения на сервере и у клиента, соединить их в один HTML-файл нетрудно. Для этого нужно внести в документ HTML ту же запись, которую вы сделали бы для активного изображения на сервере. Не забудьте только добавить в таг IMG атрибут USЕМАР=. Атрибут USЕМАР= имеет более высокий приоритет, чем таг ISМАР, и если броузер поддерживает активные изображения, работающие у клиента, он распознает этот атрибут. Броузер, не знающий о таких изображениях, проигнорирует атрибут USЕМАР=.

Изображения в миниатюре

Трудно противостоять искушению, использовать эффектную графику с высоким разрешением. Часто для иллюстрации какой-то темы требуются изображения прямо-таки огромные. Однако, есть способ избежать ситуации, когда ваши читатели спасаются бегством после десяти минут ожидания загрузки особенно <крутой> картинки.

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

1.3. Средства описания таблиц в HTML

По мере роста системы WWW стало ясно, что средств, которые заложены в НТМL, не достаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (таг <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выделялась из общего стиля документа.

Таг <ТАВLЕ>.

Для описания таблиц служит таг <ТАВLЕ>. Таг <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Таг <ТR>

Таг <ТR> (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице содержится два набора тагов <ТR></ТR>, в ней будут две строки. Весь текст, другие таги и атрибуты, которые вы хотите поместить в одну строку, должны быть помещены между тагами <ТR></ТR>.

Пример 1.10

<HTML>

<BODY>

<H1 ALIGN=CENTER>Таблица</H1>

<TR>

<TD COLSPAN=3>Если в таблице два тага <TR> то в ней две строки.</TD>

</TR>

<TR>

<TD>Если в стоке три тага <TD> </TD>

<TD>три столбца.</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Таг <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными, Каждая ячейка, содержащая текст или изображение, должна быть окружена тагами <ТD></ТD>. Число тагов <ТD></ТD> в строке определяет число ячеек. Строка с пятью парами тагов <ТD></ТD> будет состоять из пяти ячеек.

Пример 1.11

<HTML>

<BODY>

<TR>

<TD>строке</TD>

<TD>столбцов</TD>

</TR>

<TR>

<TD>только</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Таг <ТН>

При задании заголовков для столбцов и строк таблицы используются таг заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти таги аналогичны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тагами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тагом <В> и атрибутом <АLIGN=CENTER>, текст тоже будет выглядеть как заголовок. Однако, следует иметь в виду, что не все броузеры поддерживают жирный шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Пример 1.12

<HTML>

<BODY>

<TR>

<TH>Заголовок центрирован по умолчанию</TH>

<TH COLSPAN=2>Заголовок может объединять столбцы</TH>

</TR>

<TR>

<TH>Заголовок может быть расположен перед столбцами</TH>

<TD>Текст или данные</TD>

</TR>

<TR>

<TH ROWSPAN=3> Заголовок может объединять строки</TH>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Таг <САРТIОN>

<CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=ТОР>), либо под таблицей (<САРТION ALIGN=ВОТТОМ>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Пример 1.13

<HTML>

<BODY>

<CAPTION ALIGN=TOP>Заголовок над таблицей</CAPTION>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<CAPTION ALIGN=BOTTOM>Заголовок под таблицей</CAPTION>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут NOWRAP

Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую строку. Однако, при использовании атрибута NOWARP с тагами <ТН> или <ТD> длина ячейки расширяется на столько, чтобы, заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN=

Таги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN= (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN=, чтобы растянуть ее над любым количеством обычных ячеек.

Пример 1.14

<HTML>

<BODY>

<TR>

<TD>

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

</TD>

<TD>

можно воспользоваться атрибутом СОLSPAN=,

</TD>

</TR>

<TR>

чтобы растянуть ее над любым количеством обычных ячеек.

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибут ROWSPAN=

Атрибут ROWSPAN=, используемый в тагах <ТD> и <ТН>, аналогичен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN= число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Нельзя поместить ее внизу таблицы.

Атрибут WIDТН=

Атрибут WIDТН= применяется в двух случаях. Можно поместить его в таг <ТАВLЕ> для задания ширины всей таблицы, а можно использовать в тагах <ТR> или <ТН> для задания ширины ячейки или группы ячеек. Ширину можно указывать в пикселях или в процентах. Например, если вы задали в таге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в таге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселях имейте в виду, что если у вашего читателя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселями и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы могут оказаться полезными.

Пример 1.15

<HTML>

<BODY>

<TR>

<TD ALIGN=CENTER>Текст или данные - ширина 100%

</TR>

</TABLE>

или

<TR>

<TD ALIGN=CENTER>Текст или данные - ширина 50%</TD>

</TR>

</TABLE>

или

<TR>

<TD ALIGN=CENTER>Текст или данные - ширина 200 пикселей</TD>

</TR>

</TABLE>

или

<TR>

<TD ALIGN=CENTER>Текст или данные - ширина 100 пикселей</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут UNIТ=

Атрибут UNIT= тага <ТАВLЕ> определяет единицы измерения, используемые при указании размеров как всей таблицы, так и ее отдельных столбцов. Атрибут UNIТ= может принимать три значения:

UNIТ=ЕN - это значение присваивается по умолчанию и задает единицу измерения, равную еn-пробелу. Еn-пробел - это типографская единица измерения, равная ширине буквы <n>. Реальный размер пробела зависит от выбранного шрифта: для крупного шрифта еn-пробел больше, чем для мелкого. Обычно еn-пробел равен половине размера шрифта. Например, при использовании 12-пунктового шрифта ширина еn-пробела будет 6 пунктов. Для 8-пунктового шрифта еn-пробел занимает 4 пункта.

UNIТ=RELATIVE используется для задания относительной ширины столбцов в процентах от общей ширины таблицы. Этот способ следует по возможности применять вместо указания ширины в процентах UNIТ=RELATIVE выполняет ту же функцию, но поддерживается большим количеством броузеров.) При задании относительных (RELATIVE) единиц вводимые числа воспринимаются как ширина столбцов в процентах.

UNIТ=РIXELS - это значение применяется, когда вам нужно точно знать ширину столбца на экране. В этом случае лучше всего задать ее в пикселях. Например, таг <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформирует таблицу шириной 340 пикселей.

Атрибут СОLSРЕС=

Атрибут СОLSРЕС=, используемый с атрибутом UNIТ=, определяет, сколько места занимает каждый столбец таблицы и как в нем выравниваются данные. Применяется только в таге<ТАВLЕ>.

СОLSРЕС= перечисляет все столбцы и для каждого из них задает выравнивание и размер. Для столбца (или ячейки) существует пять способов выравнивания: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю и D - по десятичной запятой. Если у вас пять столбцов, вы можете определить ширину и выравнивание каждого из них следующим образом:

<ТАВLЕ UNIТ=РIХЕLS СОLSРЕС="L10 С15 J25 D30">

Вы описали таблицу, в которой первый столбец имеет ширину 10 пикселей и его содержимое выравнивается по левому краю, второй столбец, шириной 15 пикселей, с выравниванием по центру, третий, шириной 20 пикселей, выровнен по правому краю, четвертый, шириной 25 пикселей, выровнен с двух сторон, а пятый, шириной 30 пикселей, выравнивается по десятичным запятым.

Атрибут DР=

Атрибут DР= (Decimal Point, десятичный знак) определяет символ, используемый для отделения целой части десятичной дроби. DР="." (по умолчанию) указывает на точку в качестве десятичного символа. DР="," задает запятую.

Пустые ячейки

Если ячейка не содержит данных, она не будет иметь границ. Если вы хотите, чтобы у ячейки были границы, но не было содержимого, вы должны поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселях или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении текста и графики на странице.

Атрибут СЕLLРАDDING=

Атрибут СЕLLPADDING= определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

Пример 1.16

<HTML>

<BODY>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<BR>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибуты АLIGN= и VALIGN=

Таги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN= и VALIGN=. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру, как видно из рис. . Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=ВLЕЕDLEFT Прижимает содержимое ячейки вплотную к левому краю.
ALIGN=LEFT Выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING=.
АLIGN=СЕNTER Располагает содержимое ячейки по центру.
АLIGN=RIGHT Выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING=.

Пример 1.17

<HTML>

<BODY>

<TR>

<TD ALIGN=LEFT>Текст или данные</TD>

<TD ALlGN=CENTER>Текст или данные</TD>

<TD ALIGN=RIGHT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>Текст или данные</TD>

<TD ALIGN=CENTER>Текст или данные</TD>

<TD ALIGN=LEFT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=CENTER>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Текст или данные</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут VALIGN= осуществляет выравнивание текста и графики внутри ячейки по вертикали. . Вертикальное выравнивание может быть задано несколькими способами: VALIGN=ТОР Выравнивает содержимое ячейки по ее верхней границе.

VALIMG=МIDDLE Центрирует содержимое ячейки по вертикали.
VALIGN=ВОТТОМ Выравнивает содержимое ячейки по ее нижней границе.

Пример 1.18

<HTML>

<BODY>

<TR>

<TD WIDTH=100> Атрибут VALIGN= осуществляет выравнивание текста и

графики внутри ячейки по вертикали.

</TD>

<TD VALIGN=MIDDLE>середина,</TD>

</TR>

<TD> VALIGN=ТОР Выравнивает содержимое ячейки по ее верхней границе.

</TD>

</TR>

<TD> VALIGN=МIDDLE Центрирует содержимое ячейки по вертикали.

</TD>

<TD>середина,</TD>

<TD>середина.</TD>

</TR>

<TD> VALIGN=ВОТТОМ Выравнивает содержимое ячейки по ее нижней границе.

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибут ВОRDER=

В таге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пустое пространство для них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать границы различной толщины для разных таблиц, чтобы их легче было различать.

Атрибут СЕLLSPACING=

Атрибут СЕLLSPACING= определяет в пикселях ширину промежутков между ячейками. Если этот атрибут не задан, по умолчанию задается величина, равная двум пикселям. Атрибут СЕLLSPASING= можно использовать, чтобы поместить текст и графику непосредственно там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

Пример 1.19

<HTML>

<BODY>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML

1.4. Использование таблиц в дизайне страницы

Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага <ТАВLЕ> красиво размещать на странице текст и графику. До сих пор таг <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства>, что и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от иерархического размещения текста на Web-страницах.

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

Пример 1.20

<HTML>

<BODY>

<TR>

<H1>ПЕРФОРАТОР</H1>

<H3>Только сегодня!</H3>

<TR><TD ALIGN=CENTER><I>Почти бесплатно!</I></TD>

</TR>

</TABLE>

</TD>

</TR >

</TABLE>

</CENTER >

</BODY>

</HTML>

Создание разноцветных таблиц

Ведущие броузеры, позволяют отображать некоторые цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого броузера.

Цветные границы в Netscape Navigator

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в таге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш таг <ВОDY> будет выглядеть примерно так:

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.

Пример 1.21

<HTML>

<CAPTION ALIGN=TOP><H2>Как просверлить бетонную

стену</H2></CAPTION>

<TR>

<H1>ПЕРФОРАТОР</H1>

<H3>Только сегодня!</H3>

<TR>

<TD BGCOLOR=AQUA ALIGN=CENTER><I>Почти бесплатно!</I></TD>

</TR>

</TABLE>

</TD>

</TR>

<TR>

</TD>

<FONT SIZE=6 COLOR=PINK>Просверлим все</FONT>

</TD>

</TR>

</TABLE>

</CENTER >

</BODY>

</HTML>

1.5. Фреймы

Что такое фрейм?

В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя таг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает их мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.

Для чего можно использовать фреймы

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

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

Как работают фреймы

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: таги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и таг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset ). Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

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

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тага <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тага <ВОDY>.

Пример 1.22

<HTML>

<HEAD>

<TITLE>Пример фреймов</TITLE>

</HEAD>

<FRAMESET COLS="25%, 75%"

</FRAMESET>

Вы видите эту страницу броузером не поддерживающим фреймы.

</NOFRAMES>

</HTML>

Вот и весь код, необходимый для задания фреймовой структуры. Обратите внимание на таг <NOFRAMES>. Через несколько минут мы к нему вернемся. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием a. html. Окно справа займет 75 процентов и вначале покажет файл b. html. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали <main > ( <главная>) с помощью строки:

Это означает, что фрейм под именем main будет содержать страницу b. html. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме menu. html, нам не нужно его называть.

Подготовка содержимого фрейма

Теперь давайте загрузим фреймы с содержимым. Зададим страницу menu. html в левом фрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл menu. html - это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET= (TARGЕТ="main") в таг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все таги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме, что нас не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Но сейчас давайте ограничимся простым примером. Ниже приведен код для левого фрейма menu. html.

Пример 1.23

<HTML>

<HEAD>

</HEAD>

<BODY>

<H3 ALIGN=CENTER>Компания.</H3>

<HR>

<LI><a href="html-pr2-4.html" ТАRGЕТ="main">Главная</a>

<LI><a href="news. html" ТАRGЕТ="main">Новости</a>

<LI><a href="products. html" ТАRGЕТ="main">Товары</a>

<LI><a href="servis. html" ТАRGЕТ="main">Услуги</a>

<LI><a href="contact. html" ТАRGЕТ="main">Контакты</a>

<LI><a href="search. htm" ТАRGЕТ="main">Поиск</a>

</UL>

</font>

</BODY>

</HTML>

Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы. Ваша задача так их спроектировать, чтобы они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром оглавления. Но больше эти страницы ничем не примечательны. Ниже приводится код для страницы, упомянутой первой в оглавлении ( html-pr2-4.html).

Пример 1.24

<HTML>

<HEAD>

<TITLE> Главная страница</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>Компания.</H1>

<HR>

<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная

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

в России.</I></H3>

<HR>

<H3>Основными направлениями деятельности Компании являются:

<OL>

<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов;

<LI>создание сервисных центров по обслуживанию бытовой

электроники.</H3>

</OL>

<HR>

<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой

электроники.</FONT></U></H3>

<H5 ALIGN=CENTER>Контактная информация</H5>

<UL>

<LI>Telephone (1

<LI>FAX (1

<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106

<UL TIPE=CIRCLE>Электронная почта<BR>

<LI>Общая информация: *****@***su

<LI>Продажи: *****@***abc. su

</UL>

</BODY>

</HTML>

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

Использование тага <NOFRAMES>

У многих ваших посетителей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тагами < NOFRAMES > и </ NOFRAMES >, будет выглядеть отлично - броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать таги <ВODY></ВОDY>. Возможно, вам придется иначе организовать экран без фреймов.

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6

Практическое введение в программирование на JavaScript (стр. 3 )

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы