2011-06-05 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Формы в HTML | Стили и сценарии »

Избранное

SNK GSCP - новая библиотека для PHP 5!

Web Studio и Visual Workshop

Библиотека:

Стандарты на web-технологии

Монополия v. 2.0.2

Загрузки:

скачать программы

Продукция:

программы и книги

Билет 8 Теги и атрибуты при создании простой таблицы

Среди атрибутов тегов таблиц можно назвать следующие:

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

border=x. Переменная x должна быть заменена числовым значением от 0 и более. Это значение определяет ширину видимой рамки вокруг таблицы. При создании макетов страниц x обычно будет задаваться равным 0.

Cовет

Хотите увидеть, как таблица управляет макетом страницы? Задайте значение рамки равным 1, и тогда ячейки и строки таблицы будут представлены в виде сетки.

cellspacing=x. Этот атрибут определяет интервал между отдельными ячейками таблицы (другими словами между видимыми столбцами). Параметр x должен принимать значения, большие ли равные 0. Это поможет получить пустое пространство между элементами, помещенными внутри ячеек.

cellpadding=x. Этот атрибут определяет расстояние от границ ячейки до помещенных в нее объектов. Он также используется для создания пустого пространства внутри каждой ячейки.

Cовет

Еще один способ изменения интервалов в таблице - эта вставка графической прокладки в тег TD. Эти "прокладки" являются прозрачными файлами GIF размером 1х1 пиксель, которые ручную растягиваются по ширине и высоте.

width=%x или width=x Чтобы задать ширину таблицы, вы можете указать либо число, соответствующее доле в процентах от общей ширины окна броузера, либо конкретное значение, которое будет обозначать конкретную ширину в пикселях. Выбор ширины таблицы чрезвычайно важен. Превышение максимума ширины в 595 пикселей может привести к тому, что при разрешении 640х480 страницу придется пролистывать горизонтально.

Cовет

Если вы хотите выровнять таблицу по центру страницы, то можно использовать тег div вместе с атрибутом выравнивания типа <div align=center>. Открывающийся тег и атрибут помещаются перед таблицей; после того, как вы закончите ввод таблицы, введите закрывающий тег </div>.

Возврат в начало страницы Возврат на главную страницу сайта

Пример таблицы с атрибутами align, border, cellspacing, cellpadding, width

This is my first table cell. And this is my second table cell.

This is my first table cell in the second row. And this is the second table cell in the second row.

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

align=x Переменная x может иметь значения left, right или middle. Когда вы используете атрибут внутри ячейки таблицы, содержимое ячейки выравнивается в соответствии с атрибутом.

Пример таблицы с атрибутами выравнивания в ячейках

This is my first table cell. And this is my second table cell.

This is my first table cell in the second row. And this is the second table cell in the second row.

valign=x X принимает значения top, middle или bottom. При вертикальном выравнивании содержимое ячейки располагается в верхней части, нижней части или посередине ячейки.

Пример таблицы с атрибутами выравнивания valign=x в ячейках

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

This is my first table cell. And this is my second table cell.

This is my first table cell in the second row. And this is the second table cell in the second row.

colspan=x Здесь x это число столбцов, атрибут colspan заставляет текущую ячейку занимать несколько столбцов по ширине.

Возврат в начало страницы Возврат на главную страницу сайта

Пример таблицы с атрибутом colspan в ячейках

This is my first table cell, which spans two columns.

This is my first table cell in the second row. And this is the second table cell in the second row.

rowspan=x Здесь x это число строк, атрибут rowspan заставляет текущую ячейку занимать несколько строк по высоте.

Возврат в начало страницы Возврат на главную страницу сайта

Пример таблицы с атрибутом rowspan

This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is the first table cell in the second column.

And this is the second table cell in the second table row.

Использование атрибутов colspan и rowspan предоставляет прекрасные возможности для размещения объектов на Web-странице, в частности разрешает верстку в несколько колонок.

Cовет

Попробуйте вставить в таблицу графику с помощью тега <img src>. Именно так постороены макеты большинства Web-страниц.

Например:

This is the first table cell in the second column.

And this is the second table cell in the second table row.

Иногда вам надо оставить какую-либо ячейку таблицу пустой. Не следует использовать в этом случае комбинацию:

<td></td>

К сожалению, многие броузеры "чудят" с пустыми ячеками. Поэтому, для создания пустой ячейки воспользуйтесь специальным зарезервированным символом неhазрывного пустого пространства &nbsp (подробнее - см.здесь), а именно:

<td> </td>

Да, мы чуть не забыли о таких важных элементах создания таблицы, как заголовок таблицы - тег <caption> и тег и заголовков столбцов таблицы <th>. Например,

Краткий список зарезервированных символов

Наименование Значение Пример

Меньше чем < <

Больше чем > >

Амперсанд & &

неразрывный пробел  

кавычки " "

Это записано в HTML-документе так:

<CENTER>

<TABLE cellSpacing=1 cellPadding=8>

<caption align="top"><b>Краткий список зарезервированных символов</b>

</caption>

<TBODY>

<TR align=middle>

<TH>Наименование</TH>

<TH>Значение</TH>

<TH>Пример</TH></TR>

<TR align=middle>

<TD>Меньше чем</TD>

<TD><</TD>

<TD><</TD></TR>

<TR align=middle>

<TD>Больше чем</TD>

<TD>></TD>

<TD>></TD></TR>

<TR align=middleм

<TD>Амперсанд</TD>

<TD>&</TD>

<TD>&</TD></TR>

<TR align=middle>

<TD>неразрывный пробел</TD>

<TD> </TD>

<TD> </TD></TR>

<TR align=middle>

<TD>кавычки</TD>

<TD>"</TD>

<TD>"</TD></TR></TBODY></TABLE></CENTER>

Вы заметили, здесь использована комбинация

<td> </td>

для создания пустой ячейки таблицы?

Атрибут тега <caption >align="top" означает, что заголовок надо поместить до ("вверху") таблицы. Другое значение атрибута align=bottom. Тогда заголовок будет располагаться под таблицей.

Удобно, не правда ли? Допустимыми значениями являются также left, right.

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

table {

margin-left: -4%;

font-family: sans-serif;

background: white;

border-width: 2;

border-color: white;

}

th { font-family: sans-serif; background: rgb(204, 204, 153) }

td { font-family: sans-serif; background: rgb(255, 255, 153) }

Краткий список зарезервированных символов

Наименование Значение Пример

Меньше чем < <

Больше чем > >

Амперсанд & &

неразрывный пробел  

кавычки " "

В данном случае использован встроенный стиль CSS. Это трудоемко и нерационально. Так делать не надо!

Лучше воспользоваться внедренным стилем. Например, он используется для таблиц на странице Форматирование текста.

Либо воспользоваться связанными таблицами стилей.

Если вы не хотите воспользоваться таким мощным инструментом, как каскадные таблицы стилей, то в вашем распоряжении имеется такое простое средство как атрибут bgcolor в тегах <td> и <th>.

Это "работает" практически во всех броузерах и не зависит от того, поддерживает ли броузер пользователя работу с CSS. Как задаются шестнадцатиричные коды для цветов подробно описано в документе Форматирование текста

Краткий список зарезервированных символов

Наименование Значение Пример

Меньше чем < <

Больше чем > >

Амперсанд & &

неразрывный пробел  

кавычки " "

Это записано в HTML-документе так:

<CENTER>

<TABLE cellSpacing=1 cellPadding=8>

<caption align="top"><b>Краткий список зарезервированных символов</b>

</caption>

<TBODY>

<TR align=middle>

<TH bgcolor="#CCCC99">Наименование</TH>

<TH bgcolor="#CCCC99">Значение</TH>

<TH bgcolor="#CCCC99">Пример</TH></TR>

<TR align=middle>

<TD bgcolor="#FFFF66">Меньше чем</TD>

<TD bgcolor="#FFFF66"><</TD>

<TD bgcolor="#FFFF66"><</TD></TR>

<TR align=middle>

<TD bgcolor="#FFFF66">Больше чем</TD>

<TD bgcolor="#FFFF66">></TD>

<TD bgcolor="#FFFF66">></TD></TR>

<TR align=middleм

<TD bgcolor="#FFFF66">Амперсанд</TD>

<TD bgcolor="#FFFF66">&</TD>

<TD bgcolor="#FFFF66">&</TD></TR>

<TR align=middle>

<TD bgcolor="#FFFF66">неразрывный пробел</TD>

<TD bgcolor="#FFFF66"> </TD>

<TD bgcolor="#FFFF66"> </TD></TR>

<TR align=middle>

<TD bgcolor="#FFFF66">кавычки</TD>

<TD bgcolor="#FFFF66">"</TD>

<TD bgcolor="#FFFF66">"</TD></TR></TBODY></TABLE></CENTER>

Возврат в начало страницы Возврат на главную страницу сайта

Использование таблицы как способа расположения элементов на странице

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

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

Этот способ использования страниц позволяет экономить место и достаточно эффектно разместить публикуемый материал в окне броузера.

Пример использования таблицы как способа расположения элементов на странице

Билет 9 Теги и атрибуты при создании сложных и встроенных таблиц

-

Билет 10 Понятие фрейма. Создание простой организации фреймов

Фреймы позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.

Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:

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

Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!

< html >

< head >

< title >Фреймы< /title >

< /head>

< frameset>< /frameset >

< /html >

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

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

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

< frameset rows="100,*,150" >

< frame src="logo.html" >

< frame src="content.html" >

< frame src="menu.html" >

< /frameset >

Билет 11 Создание сложной организации фреймов и их взаимодействие

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

Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр TARGET тэга <Д>. Данный параметр определяет имя фрейма или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра TARGET документ зафужается в текущий фрейм (или окно). Это умолчание может быть изменено заданием тэга <BASE> с нужным значением параметра TARGET. Задание имени фрейма, в который осуществляется загрузка по умолчанию, очень удобно для тех случаев, когда большое количество ссылок должно направлять документы в определенный фрейм. Типичная ситуация с оглавлением в одном фрейме, ссылки из которого загружают соответствующие документы в смежный фрейм, была показана в начале данной главы . Для этого примера в разделе <HEAD> файла с именем LIST.htm целесообразно записать следующую строчку: <BASE TARGET="pages">. В противном случае для каждой ссылки пришлось бы указывать параметр TARGET.

Имена фреймов должны начинаться с латинской буквы или цифры. В качестве имени может задаваться имя существующего окна или фрейма, а может указываться новое имя, под которым будет открыто новое окно. Имеется четыре зарезервированных имени, при задании которых выполняются специальные действия. Эти имена начинаются с символа подчеркивания (_): "_blank", "_seif", "_parent" и "_top". Любое другое имя, начинающееся с символа «подчеркивание», недопустимо.

TARGET="_blank" - обеспечивает загрузку документа в новое окно. Это окно не будет иметь имени, а следовательно, в него невозможно будет загрузить другой документ.

TARGET="_seif" - загрузка документа будет произведена в текущий фрейм (или окно). Такую запись следует использовать для обхода умолчания, заданного ТЭГОМ <BASE>.

TARGET="_top" - вызывает загрузку документа в полное окно. Если документ уже располагается в полном окне, то данное значение действует так же, как

"_self".

TARGET="_parent" - вызывает загрузку документа в область, занимаемую фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя данное значение параметра действует так же, как "top".

В ряде источников по языку HTML ошибочно утверждается, что при отсутствии родителя у фрейма значение "_parent" эквивалентно "_self». Такое утверждение не всегда корректно.

Зарезервированные имена фреймов "_blank", "_self", "_parent" и "_top" должны записываться строчными латинскими буквами. Заметим, что такая требовательность присуща только Netscape. Браузер Microsoft Internet Explorer правильно распознает зарезервированные имена, записанные на любом регистре.

Приведем примеры взаимодействия между фреймами и отдельными окнами браузера. Рассмотрим следующий HTML-код:

<HTML>

<HEAD>

<Т1ТЬЕ>Использование фреймов</Т1ТЬЕ>

</HEAD>

<FRAMESET COLS=2*,*,*>

<FRAME SRC=frame_a.htm NAME="A">

<FRAME SRC=empty.htm NAME="B">

<FRAME SRC=empty.htm NAME="C">

</FRAMESET>

</HTML>

В этом HTML-документе дается описание структуры, состоящей из трех фреймов с именами «А», «В» и «С». Имена фреймов потребуются в дальнейшем для организации ссылок между фреймами. Заметим, что на фрейм с именем «А» в данном примере ссылок не будет, поэтому он мог быть оставлен без имени вообще. При загрузке приведенного выше документа в браузер во фреймах будет отображена информация, содержащаяся в файлах, определяемых параметром SRC. Во фрейм «А» попадет содержимое файла frame_a.htm, а остальные два фрейма получат данные из файла empty.htm, который не имеет отображаемых данных. Еще раз напомним, что HTML-документ, описывающий структуру фреймов, не имеет раздела <BODY>.

Приведем текст файла с именем frame_a.htm:

<HTML>

<HEAD>

<ТIТLЕ>Документ для фрейма A</TITLE>

</HEAD>

<BODY>

<А HREF="test.htm" TARGET="B">1. Загрузка документа во фрейм В</АХР>

<А HREF="test.htm" TARGET="C">2. Загрузка документа во фрейм С</АХР>

<А HREF="test.htm" TARGET="D">3. Загрузка документа в окно с именем

D</AXP>

<А HREF="test.htm" TARGET="_blank">4. Загрузка документа в новое ок-

но</АХР>

<А HREF="test.htm" TARGET="_top">5. Загрузка документа в полное ок-

но</АХР>

<А HREF="test.htm" TARGET="_self">6. Загрузка документа в текущий

фрейм</А>

</BODY>

</HTML>

Этот документ является полным HTML-документом, имеющий разделы <HEAD> и <BODY> и, в свою очередь, имеет ссылки на файл с именем test.htm, располагающийся в том же самом каталоге, что и файл frame_a.htm.

Текст файла test.htm крайне прост:

<HTML> <HEAD> <Т1ТЬЕ>Тестовый документ</Т1ТЬЕ>

</HEAD> <BODY>

Текст тестового документа

</BODY>

</HTML>

Файл frame_a.htm, содержимое которого загрузилось во фрейм «А», имеет шесть ссылок на один и тот же файл test.htm с различным значением параметра TARGET.

Рассмотрим действия, которые будут происходить при реализации этих ссылок. Первая ссылка со значением TARGET="B" будет загружать файл test.htm во фрейм с именем «в». Заметим, что после реализации любой из шести ссылок браузер Netscape автоматически окрасит в другой цвет все шесть, так как они указывают на один и тот же файл. Microsoft Internet Explorer отмечает только действительно реализованные ссылки.

Третья ссылка со значением TARGETED" приведет к образованию нового окна браузера с именем "D" и загрузке в него файла test.htm. Заметим, что форма записи этой ссылки ничем не отличается от первых двух. Различие состоит в том, что в первых двух случаях ссылки были даны на существующие фреймы, имена которых были определены в файле со структурой фреймов, а в данном случае ссылка дана на несуществующий объект. Если данная ссылка будет выполнена хотя бы один раз, то окно с именем "о" будет образовано и повторный переход по ссылке лишь перезагрузит данные в существующее теперь окно "о". Конечно, пользователь может в любой момент его закрыть и вновь образовать выбором данной ссылки.. Напомним, что расположение и размеры окон на экране определяются пользователем.

Четвертая ссылка со значением TARGET="_biank" создаст новое окно без имени и загрузит туда требуемый документ. Любое повторение данной ссылки будет открывать еще одно окно браузера.

Пятая ссылка со значением TARGET="_top" загрузит документ в полное окно вместо всей фреймовой структуры. При таком значении параметра TARGET новое окно не образуется. Возврат к фреймовой структуре возможен нажатием кнопки Back.

Последняя ссылка со значением TARGET="_seif» загрузит документ во фрейм «А» на место документа со ссылками. В данном случае результат эквивалентен выполнению ссылки без параметра TARGET.

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

Напомним, что названия загружаемых документов задаются тэгом <TITLE>. Если документ загружен в полное окно, то его название выдается в самой верхней части окна браузера. Если же документ загружается во фрейм, то его название нигде не отображается, а в верхней части окна по-прежнему будет располагаться название документа, содержащего описание фреймовой структуры документа. Поэтому названия документов, предназначенных для просмотра во фреймах, не имеют большого значения. Тем не менее, вряд ли стоит рекомендовать опускать названия документов, загружаемых во фреймы, так они могут появиться, например, в списке закладок (Bookmarks) при создании закладки на документ, расположенный во фрейме или списке просмотренных документов.

Рассмотрим еще один интересный пример организации взаимодействия между фреймами и окнами браузера. Пусть имеется текст основного загружаемого HTML-документа:

<HTML>

<HEAD>

<ТIТLЕ>Использование имен ОКОН</ТIТLЕ>

</HEAD>

<BODY>

<А HREF="test.htm" ТАКСЕТ="0">Загрузка документа в окно с именем D</A><P>

<А HREF="frame.htm" ТАКСЕТ="_ЫапК">Загрузка документа, имеющего

фреймовую структуру, в новое окно</АХР>

</BODY>

</HTML>

В данном документе имеются ссылки на файлы test.htm и frame.htm. Пусть первый из них содержит ту же информацию, что и в предыдущем примере. Текст файла frame.htm имеет следующий вид:

<HTML>

<HEAD>

<Т1ТЬЕ>Использование фреймов</Т1ТЬЕ>

</HEAD>

<FRAMESET COLS=*,*>

< FRAME SRC=empty.htm NAME=»C»>

<FRAME SRC=empty.htm NAME="D">

</FRAMESET>

</HTML>

Обратите внимание, что если основной документ является стандартным HTML-документом, то загружаемый по ссылке из основного документа файл frame.htm содержит структуру фреймов и в свою очередь ссылается на файл empty.htm.

После загрузки основного документа окно браузера будет иметь вид, показанный на рис. Весь документ состоит из двух ссылок. Выполним переход по первой ссылке. Будет образовано новое окно с именем "о", в котором появится текст файла test.htm Повторение этой ссылки будет лишь перезагружать данные в окне "D".

Выполним переход по второй ссылке. Образуется новое окно без имени, в которое загрузится файл frame.htm, определяющий два фрейма с именами «С» и «D»В обоифреймах ничего нет (точнее загружен пустой документ empty.htm). Обратим внимание, что теперь имеется открытое окно с именем "D" и окно с фреймами, один из которых также имеет имя "D". ВЫПОЛНИМ снова переход по первой ссылке. В отличие от первого случая загрузка данных будет осуществляться не в окно "D", а во фрейм с именем "D".

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

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

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

Избегайте коллизий в именах фреймов и окон. Хотя формально не запрещено

иметь фреймы с одинаковыми именами, однако это может привести к путанице.

Имена фреймов и окон сравниваются с учетом регистра символов. Так, например, фреймы с именами "f rame_l" и "Frame_l" будут различны.

Примеры более сложного взаимодействия между фреймами

Выше были рассмотрены достаточно простые типовые примеры взаимодействия между фреймами. Были рассмотрены задачи создания новых окон, замены содержимого отдельных фреймов, а также выдачи документа в полное окно с разрушением всей структуры фреймов. Даны примеры использования задаваемых имен фреймов, а также зарезервированных имен "_biank", "_seif" и "_top". Использование последнего зарезервированного имени "_parent" более сложно и будет описано ниже.

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

Одним из наиболее часто встречающихся вариантов применения фреймов, который уже упоминался в данной главе, является случай двух фреймов, один из которых содержит список ссылок, а в другой загружаются сами документы (рис. 5.1).

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

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

<HTML>

<HEAD>

<ТIТLЕ>Пример взаимодействия между фреймами</ТIТLЕ>

</HEAD>

<FRAMESET COLS="*,*">

<FRAME SRC="left.htm">

<FRAMESET ROWS="*,*">

<FRAME SRC="l.htm">

<FRAME SRC="2.htm">

</FRAMESET> </FRAMESET>

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

<HTML>

<HEAD>

<Т1ТЬЕ>Пример взаимодействия между фреймами</Т1ТЬЕ>

</HEAD>

<FRAMESET COLS="*,*">

<FRAME SRC="left.htm">

<FRAME SRC="l_2.htm" NAME="Two_Frames">

</FRAMESET>

</HTML>

Созданный файл с вложенной структурой <FRAMESET> имеет имя l_2.htm и содержит следующий код:

<HTML>

<HEAD>

<TITLE>l-2</TITLE>

</HEAD>

<FRAMESET ROWS="*,*">

<FRAME SRC="l.htm">

<FRAME SRC="2.htm">

</FRAMESET>

</HTML>

На первый взгляд совершенно ничего не изменилось. В обоих случаях имеется три фрейма, в которые загружаются документы left.htm, l.htm и 2.htm соответственно. Однако при взаимодействии фреймов различие проявится. Если в первом случае ни у одного из фреймов нет фрейма-родителя, то во втором случае для двух фреймов родительским будет фрейм с именем "Two_Frames". Поэтому если в любом из двух фреймов применить ссылку со значением параметра TARGET, равным "_parent", то результат будет различным для первого и второго случая. Для первого случая реализация такой ссылки приведет к загрузке документа в полное окно с замещением существующей структуры фреймов. Здесь проявляется свойство значения "_parent", которое при отсутствии фрейма-родителя действует как "_top". Во втором случае будет замещен фрейм с именем "Two_Frames", который занимает правую половину экрана и по существу состоит из двух фреймов.

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

Приведем содержимое файла left.htm, который изначально загружается в первый из рассматриваемых фреймов:

<HEAD>

<ТIТLЕ>Левый фрейм</ТIТLЕ>

</HEAD>

<BODY>

Реализация любой ссылки во всех трех фреймах приводит к перезагрузке

документов в двух фреймах, расположенных в правой части окна.

<Р>

Выберите вариант расположения документов:

<Р>

<А HREF="l_2.htm" TARGET="Two_Frames">BapnaHT 1-

<Р>

<А HREF="2_l.htm" TARGET="Two_Frames">BapMaHT 2-K/A>

</BODY>

</HTML>

В этом документе имеются ссылки на файлы l_2.htm и 2_l.htm. Текст первого был дан выше, а второго имеет следующий вид:

<HTML>

<HEAD>

<TITLE>2-K/TITLE>

</HEAD>

<FRAMESET ROWS="*,*">

<FRAME SRC="2.htm">

<FRAME SRC="l.htm">

</FRAMESET>

</нтж,>

Заметим, что текст файлов l_2.htm и 2_l.htm отличаются только порядком ссылок на файлы l.htm и 2.htm.

Рассмотрим теперь построение документа, загруженного в левый фрейм. В нем имеется две ссылки с параметром TARGET="Two_Frames". Реализация любой из этих ссылок создает на месте расположения фрейма "Two_Frames" (это правая половина экрана) два фрейма с загрузкой документов l.htm и 2.htm в том или ином порядке. Таким образом при выборе варианта 1-2 в верхний правый фрейм загружается документ l.htm, а в нижний правый - 2.htm. При выборе варианта 2-1 порядок документов меняется. В итоге поочередный выбор вариантов создает впечатление того, что документы в двух фреймах меняются местами. Именно такого эффекта мы и стремились достичь/

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

Текст файла l.htm:

<HTML>

<HEAD>

<ТIТLЕ>Документ 1</TITLE>

</HEAD>

<BODY>

<Н2>Документ 1</Н2>

<A HREF=" 1_2 . htm" TARGET="_parent">BapMaHT l-

<A HREP="2_l.htm" TARGET="_parent">BapnaHT 2-K/A> </BODY>

</HTML>

Файл 2.htm отличается от l .htm только заголовком.

Здесь имеются две ссылки со значением TARGET="_parent", которые обращены к родительскому фрейму. Эти ссылки могли бы быть записаны и с явным указанием имени фрейма-родителя, т. е. TARGET="Two_Frames", однако использование неявного указания имени обычно более удобно. Например, если из левого фрейма (документ left.htm) исключить ссылки, то можно было бы опустить имя фрейма "Two_Frames", заданное при описании основной фреймовой структуры. При этом был бы создан фрейм без имени, но ссылки из документов l.htm и 2.htm со значением TARGET="_parent" по-прежнему работали бы правильно.

Билет 12 Понятие CSS и правило записи

Каскадные таблицы стилей (CSS — Cascading Style Sheets) позволяют существенно расширить возможности языка HTML за счет гибкого управления форматированием веб-страницы.

Для примера возьмем параметр size тега <font>:

<font size = "3">Текст</font>

В языке HTML размер шрифта указывается в условных единицах от 1 до 7. Размер, используемый веб-браузером по умолчанию, принято приравнивать к 3. А какой размер шрифта в пунктах используется по умолчанию? В разных веб-браузерах по-разному. Это означает, что наша веб-страница также будет выглядеть по-разному.

С помощью CSS можно точно задать размер шрифта в пунктах. Делается это с помощью параметра style:

<font style = "font-size: 12pt">Текст</font>

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

Прежде чем приступить к изучению CSS, разберемся с основными понятиями.

Значение параметра style (font-size: 12pt) называется определением стиля или стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый атрибут имеет значение (12pt), указываемое после двоеточия. Совокупность определений стилей, вынесенных в заголовок HTML-документа или в отдельный файл, называется таблицей стилей.

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

Встраивание определения стиля в тег

Определение стиля встраивается в любой тег с помощью параметра style. Обратите внимание, параметр style имеет все теги:

<font style="font-size:12px">Текст</font>

Если определение стилей состоит из нескольких атрибутов, то они указываются через точку с запятой:

<font style="font-size:12px; color: red">Текст</font>

Если какое-либо значение атрибута требует наличие кавычек, то оно указывается в апострофах:

<font style="font-size:12px; color: red; font-family:'Arial'">Текст</font>

Встраивание определения стилей в заголовок HTML-документа

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример использования стилей</title> <style> .text1{font-size:12px; color:red; font-family:Arial} font {font-size:12px; color:green; font-family:Arial}  font.text2 {font-size:12px; color:blue; font-family:Arial} h1, h2 { font-family:serif; color: red} </style> </head>

<body> <h1>Пример использования стилей</h1><!--Красный цвет --> <font class="text1">Текст1</font><br><!--Красный цвет --> <font>Текст2</font><br><!--Зеленый цвет --> <font class="text2">Текст3</font><br><!--Синий цвет --> <p class="text2">Текст4</p><br><!--Цвет по умолчанию --> <p class="text1">Текст5</p><!--Красный цвет --> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.

Атрибуты определения стиля, указанные между тегами <style> и </style>, заключаются в фигурный скобки. Если атрибутов несколько, то они перечисляются через точку с запятой:

{font-size :12px; color: red; font-family: Arial}

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

font {font-size:12px; color: green; font-family: Arial}

. . .

<font>Текст2</font><br><!--Зеленый цвет -->

Стилевой класс также можно привязать сразу к нескольким тегам. В этом случае они указываются через запятую:

h1, h2 { font-family:serif; color: red}

Стилевой класс, привязанный к тегу, также может иметь имя. Имя указывается после имени тега, через точку. В этом случае имя класса в теге указывается с помощью параметра class:

font .text2 {font-size:12px; color:blue; font-family:Arial}

. . .

<font class="text2">Текст3</font><br><!--Синий цвет -->

Обратите внимание, что если имя класса указать в другом теге, то он будет определен:

<p class="text2">Текст4</p><br><!--Цвет по умолчанию -->

В данном случае фрагмент текста "Текст4" не будет отображен синим цветом, так как имя класса text2 применяется только к тегу <font>.

Можно задать стиль, не привязанный ни к какому тегу. В этом случае перед именем стиля указывается точка:

.text1 {font-size:12px; color: red; font-family: Arial}

. . .

<font class="text1">Текст1</font><br><!--Красный цвет -->

<p class="text1">Текст5</p><!--Красный цвет -->

"Текст1" и "Текст5" будут красного цвета, хотя они находятся в разных тегах.