Лабораторная работа №3.
Тема: «Создание таблиц. Фреймы. Связь между фреймами».
Цели:
Образовательная: Познакомить учащихся с созданием таблиц, с фреймами, связью между фреймами.
Развивающая: Развить усидчивость, внимание, последовательность, логическое мышление.
Практическая: Научить создавать таблицы различного вида в HTML-документе, создавать фреймы и осуществлять связи между ними.
Оборудование для выполнения работы: ПК.
Ход работы:
Теоретический материал + Практические задания.
Для создания таблиц используют следующие элементы (см. Табл. 1):
TABLE | Создает таблицу |
CAPTION | Задает заголовок таблицы |
TR | Создает новый ряд (строку) ячеек таблицы |
TD | Создает ячейку с данными в текущей строке |
Таблица 1. «Элементы создания таблиц»
Теперь давайте на практике посмотрим как создавать таблицы. В качестве примера попробуем описать создание следующей таблицы (см. Рис. 1):
Рис. 1 «Таблица к примеру 1»
Пример 1 (см. Рис. 2):
Рис. 2 «Текст примера 1»
Фон для всей строки
Если вы хотите задать фон для всей строки, то атрибут bgcolor мы прописываем для тэга <tr>:
<tr bgcolor="#FFCC33">
Фон для всей таблицы
Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:
<table bgcolor="#FFCC33">
Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.
Размеры таблицы
Атрибуты height и width - можете задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
Пример 2 (см. Рис. 3):
Рис. 2 «Текст примера 2»
Примечание: Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Мы получили следующее (см. Рис. 4):
Рис. 4 «Таблица к примеру 2»
Выравнивание содержимого (текста) внутри таблицы.
Атрибуты АLIGN и VALIGN
· Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
o ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
o ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
o АLIGN=сеnter располагает содержимое ячейки по центру.
o АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
· Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
o VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
o VALIGN=middle центрирует содержимое ячейки по вертикали.
o VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
Пример 3 (см. Рис. 5):
Рис. 5 «Текст примера 3»
Объединение ячеек.
Атрибуты colspan и rowspan.
Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т. е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь, чтобы было все понятно, обратимся к примерам.
Пример (см. Рис. 6):
Рис. 6 «Таблица к примеру 4»
Итак, наша задача растянуть ячейку 1х1 на два столбца (ячейки). Для этого мы используем атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть следующим образом:
Пример 4 (см. Рис. 7):
Рис. 7 «Текст примера 4»
Как вы видите, ячейка 1х1 простирается на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (100 пикселов).
Примечание: И еще, прошу вас обратить внимание, что в нашем примере нет ячейки 1х3, т. е. в первом ряду всего лишь две ячейки, т. к. ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
Принцип действия параметра rowspan тот же.
Рассмотрим более сложный пример (см. Рис. 8):
Рис. 8 «Таблица к примеру 5»
Пример 5 (см. Рис. 9):
Рис. 9 «Текст примера 5»
Заголовки столбцов таблицы — теги <ТН></ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН>. Эти теги подобны <ТD></ТD>.
Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки.
Самостоятельная работа.
1. Постройте таблицу следующего вида (см. Табл. 2):
ФИО | Телефон |
| 235685 |
| 235896 |
| 456978 |
Таблица 2. «К заданию №1»
2. Постройте таблицу следующего вида (см. Табл. 3):
Таблица 3. «К заданию №2»
3. Постройте таблицу следующего вида (см. Табл. 4):
В данном примере одна таблица вложена в другую.
|
Таблица №2. |
Таблица 4. «К заданию №3»
4. Постройте таблицу следующего вида (см. Табл. 5):
Таблица 5. «К заданию №4»
ФРЕЙМЫ
Фреймы - механизм представления информации на Web- страницах. С помощью фреймов экран броузера может разделяться на несколько областей, в каждой из которых отображается содержимое отдельной страницы.
Основные операции с фреймами.
Для создания фреймов используют пару меток:
<FRAMESET> и </FRAMESET>. Между данными метками, с помощью метки <FRAME>, необходимо указать какие Web-страницы будут выступать в роли фреймов и как они будут располагаться на экране.
Рассмотрим использование фреймов на примере. Пусть нам необходимо в Web-странице с именем "MAIN.НТМ" поместить два фрейма, в роли которых будут выступать Web-страницы с именами А. НТМ и В. НТМ.
HTML – код страницы А. НТМ | HTML – код страницы В. НТМ |
<HTML> <HEAD> <TITLE>ПРИМЕР ФРЕЙМОВ</TITLE> </HEAD> <BODY BACKGROUND="tawny. jpg"> НТМ </BODY> </HTML> | <HTML> <HEAD> <TITLE>ПРИМЕР ФРЕЙМОВ</TITLE> </HEAD> <BODY HTM </BODY> </HTML> |
Пусть HTML-код для данных страниц имеет следующий вид:
Если просмотреть в броузере каждую страницу в отдельности, то получим следующий вид:
Рис.1. НТМ и В. НТМ
Тогда, чтобы организовать на странице MAIN.HTM два вертикальные фрейма достаточно код данной страницы представить следующим образом:
HTML-код страницы MAIN. НТМ |
<HTML> <HEAD> <TITLE>ПРИМЕР ФРЕЙМОВ</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAME SRC="b. htm"> <FRAME SRC="a. htm"> </FRAMESET> </HTML> |
Экран броузера при просмотре страницы MAIN.HTM будет иметь следующий вид:
Рис.2. Страница MAIN.HTM с двумя вертикальными фреймами.
Рассмотрим фрагмент кода данной страницы:
<FRAMESET COLS="50%,50%">
<FRAME SRC="b. htm">
<FRAME SRC="a. htm">
</FRAMESET>
Первая метка объявляет два вертикальных фрейма, занимающих по половине экрана броузера. Эта информация заключается в следующей инструкции: COLS="50%,50%", где COLS - обозначение столбцов, "50%,50%" - говорит о том, что количество фреймов два и они будут занимать по половине экрана ("20%, 80% "- означает, что первый фрейм занимает 20% окна броузера, а второй 80%, "30%, *" - означает, что первый фрейм будет занимать 30%, а второй все остальное пространство).
Вторая и третья метки указывают какие страницы будут играть роль фреймов, т. е. страницы a.htm и b.htm.
Для того, чтобы получить горизонтальные фреймы достаточно в первой метке фрагмента заменить слово COLS на ROWS, т. е.
<FRAMESET ROWS ="50%,50%">.
Тогда окно броузера при просмотре страницы MAIN.HTM будет иметь следующий вид:
Рис.3. Горизонтальные фреймы.
Атрибуты рамки фрейма.
У рамки фрейма существуют несколько атрибутов. Рассмотрим два из них.
Первый атрибут - отмена рамки: FRAMEBORDER=NO. Этот атрибут используется для метки FRAMESET , а вся метка будет иметь вид:
<FRAMESET COLS="50%,50%" FRAMEBORDER=NO>
Второй атрибут - запрет на изменение размеров фрейма при помощи мышки: NORESIZE. Этот атрибут используется для метки FRAME , а вся метка будет иметь вид:
<FRAME SRC="b. htm" NORESIZE >.
Внутренние кадры.
Кадр можно разместить внутри странички или внутри другого кадра.
Для размещения внутри странички нужен такой код:
<IFRAME SRC="page. htm" WIDTH-400 HEIGHT=200>
</IFRAME >
Здесь page. htm - имя файла, который загрузится в кадр, WIDTH -ширина, HEIGHT - высота.
Для размещения кадра внутри другого кадра нужно обычным образом создать кадры, а затем в какой-нибудь из них загрузить страничку с внутренним кадром.
Например, для создания такой странички:
Нужно разместить кадры таким образом (рядом приведен код файла index.htm):
<HTML>
<TITLE>Название странички </TITLE>
<FRAMESET rows="20%,*>
<FRAME SRC="menu. htm" NAME="framel">
<FRAME SRO"about. htm" NAME="frame2">
</FRAMESET>
</HTML>
А в файле about.htm, который будет грузиться во втором кадре, создать внутренний кадр. То есть файл about.htm будет выглядеть примерно так:
<HTML>
<TITLE>Страничка с кадрами</TITLE>
<IFRAME SRC="page. htm" WIDTH=200 HEIGHT=300>
</IFRAMESET>
</HTML>
Задачи:
Создайте фреймы следующего вида, страницы, играющие роль фреймов,
должны быть различных цветов:
1).
| 2).
|
|
|
Связь между фреймами
В языке HTML существует возможность помещать во фрейм любую другую страницу. Этот факт позволяет организовывать интерактивные страницы, т. е. в одном фрейме из списка выбирается нужная информация, а в другом она появляется. При этом список всегда находится в первом фрейме.
Рассмотрим процесс создания таких страниц.
Нам понадобятся три основные страницы: main.htm, a.htm, b.htm.
Пусть страница main.htm будет главной, т. е. в ней организуются фреймы; b.htm - стационарной, т. е. на ней всегда будет находится список других страниц; а страница a.htm - динамической, т. е. на ней будет появляться выбранная информация. Создадим еще две дополнительных страницы с.htm и d.htm. Это обыкновенные страницы, предназначенные для загрузки в динамическую страницу.
HTML-код страницы С. НТМ | HTML-код страницы D.HTM |
<HTML> <HEAD> <TITLE> ПРИМЕР ФРЕЙМОВ </TITLE> </HEAD> <BODY BGCOLOR="RED"> Страница C. HTM </BODY> </HTML> | <HTML> <HEAD> <TITLE>ПРИМЕР ФРЕЙМОВ </TITLE> </HEAD> <BODY BGCOLOR="GREEN"> Страница D. HTM </BODY> </HTML> |
Изменим HTML-код страницы b.htm следующим образом:
№ | HTML-код |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE>ПРИМЕР ФРЕЙМОВ</TITLE> |
4 | </HEAD> |
5 | <BODY BGCOLOR="WHITE"> |
6 | <IMG SRC=”th4_2.gif” WIDTH=70 HEIGHT=100> |
7 | <BR> |
8 | <A HREF=”C. HTM” TARGET=”FRAME_A”> C. HTM </A> |
9 | <BR> |
10 | <A HREF=”D. HTM” TARGET=”FRAME_A”> D. HTM </A> |
11 | <BR> |
12 | <A HREF=”A. HTM” TARGET=”FRAME_A”> A. HTM </A> |
13 | <BR> |
14 | <A HREF=”MAIN. HTM” TARGET=”FRAME_A”> MAIN. HTM </A> |
15 | </BODY> |
16 | </HTML> |
В 5 строке объявляется цвет фона - белый. В 6 строке вставляется рисунок. В 8, 10, 12, 14 строках организуется связь с web-страницами. Во всех метках связи присутствует атрибут TARGET="FRAME_A". Данный атрибут имеет следующий общий вид: TARGET="имя фрейма", где "имя фрейма" - это тот фрейм, в который будет загружаться, вызванный из стационарной страницы, Web-документ. Стационарная страница тесно связана с главной страницей, т. е. если в стационарной странице указывается имя фрейма куда загружать другие страницы, то в главной - присваивается имя фрейму. Ниже приведен HTML-код главной страницы main.htm.
№ | HTML-код |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE> ПРИМЕР ФРЕЙМОВ</TITLE> |
4 | </HEAD> |
5 | <FRAMESET COLS=”20%, 80%”> |
6 | <FRAME SRC=”b. htm” NORESIZE> |
7 | <FRAME SRC=”A. HTM” NORESIZE NAME=”FRAME_A”> |
8 | </FRAMESET> |
9 | </HTML> |
В 7 строке второму фрейму - a.htm присвоено имя FRAME_A.
На следующем рисунке представлен внешний вид страницы main.htm. В левом фрейме (b.htm) список страниц для загрузки их в правый фрейм.
Задачи:
Организуйте интерактивную страницу, демонстрирующую картинки. В одном фрейме из списка выбирается название картинки, а в другом появляется соответствующая картинка. Список должен содержать не менее пяти пунктов.
Контрольные вопросы.
1. Расскажите об атрибутах colspan и rowspan?
2. Для чего предназначены тэги <ТН></ТН>?
3. Расскажите об атрибутах АLIGN и VALIGN
4. Что такое фрейм? Как организовать связь между фреймами?
Литература.
1. Алекс Хоумер. Крис Улмер. Dynamic HTML: справочник – СПб: Питер, 2000. – 512с.
2. Д. Хейз Освой самостоятельно HTML и XHTML. – М: Издательский дом «Вильямс», 2006.
3. , , Основы WEB-технологий – М.: ИНТУИТ. РУ «Интернет-Университет Информационных Технологий», 2003.
