 |
Опешите элемент задания формы.
|
|
|
|
Какой элемент создает заполняемую форму?
Элемент TEXTAREA и его параметры
Элемент создания меню и его параметры.
Для чего нужен элемент INPUT?
Перечислите типы полей для ввода данных.
Лабораторная работа №7
Тема: Работа с фреймами
Цель: Научиться разбивать окна браузера с помощью фреймов.
Фреймы
Фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML–документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню.
Элементы для создания фреймов и работы с ними:
| FRAMESET | Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице |
| FRAME | Определяет фрейм и его свойства внутри FRAMESET–структуры |
| NOFRAMES | Определяет что показывать, если браузер не поддерживает фреймы |
Примечания: Внимательно следите, чтобы все вышеперечисленные элементы находились вне элемента BODY.
FRAMESET
(HTML 4.0) – Frame Set
Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице.
Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тэгами кроме элементов FRAME и NOFRAME могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.
Параметры: ROWS – определяет количество и размеры горизонтальных фреймов (фреймов–строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:
• в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%";
• в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%;
|
|
|
• в пикселях. Например: "75,*".
Все три способа можно совмещать. Например, "25%,40,*" разобьет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселей, а третий займет всю оставшуюся площадь.
COLS – определяет количество и размеры вертикальных фреймов (фреймов–столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем параметре ROWS.
BORDER – определяет ширину рамок фреймов в пикселях. Данный параметр действует только в браузерах Netscape;
FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:
Yes – отображать рамки;
No или 0 – не отображать рамки;
Браузеры Netscape не поддерживают данный параметр в полной мере и для глобального определения ширины рамок используют параметр BORDER.
FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселях. Данный параметр необходим для создания фреймов без рамок.
Примечание:
Следует обратитье внимание на то, что FRAMESET–структура должна располагаться до элемента BODY. FRAMESET–структура, расположенная в заголовке (внутри элемента HEAD) не будет считаться ошибкой, однако лучше этого не делать.
FRAME
(HTML 4.0) – Frame
Определяет фреймы его свойства внутри FRAMESET–структуры.
Параметры:
SRC – обязательный параметр. Указывает адрес (URL) HTML–файла, отображаемого в данном фрейме.
NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра TARGET. В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.
|
|
|
MARGINWIDTH – определяет ширину (в пикселях) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.
MARGINHEIGHT – определяет ширину (в пикселях) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.
SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:
yes – отображать линейки прокрутки.
no – не отображать линейки прокрутки.
auto – отображать линейки прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме).
NORESIZE – не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения.
FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения:
yes – отображать рамки;
no или 0 – не отображать рамки;
Браузеры Netscape не поддерживают данный параметр в полной мере и для глобального определения ширины рамок используют параметр BORDER элемента FRAMESET.
…
<FRAMESET FRAMEBORDER =”0” FRAMESPACING =”0” COLS =”265,*”>
<FRAME SRC = “frame1.html”NAME = “page”>
<FRAMESET ROWS = “165,*”>
<FRAME SRC = “frame2.html”NAME = “menu1” MARGINWIDTH =”0”>
<FRAME SRC = “frame3.html”NAME = “menu2” MARGINWIDTH =”0”>
</FRAMESET>
<NOFRAMESET>
<NOFRAMESET> Ваш браузер не поддерживает фреймы </NOFRAMESET>
</FRAMESET>
<BODY>
</BODY>
…
В результате окно браузера разделится на три фрейма. Причем frame1.html будет иметь ширину 265 пикселей, а frame2.html – высоту 165.
NOFRAMES
(HTML 4.0) – No Frames
Все, что находится между начальным и конечным тэгами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет параметров и должен находиться внутри элемента FRAMESET.
<FRAMESET ROWS = “,”>
<NOFRAMESET> Ваш браузер не поддерживает фреймы </NOFRAMESET>
<FRAME SRC = “frame1.html”>
<FRAME SRC = “frame2.html”>
</FRAMESET>
Задание:
1. Создать документ "left.htm"
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#FFFFFF" bgcolor="#4f5e81">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:
</center>
<p align="justify"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
Я совсем недавно начал знакомиться с виртуальной жизнью, но мне по давней традиции
тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей
и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть
пару строчек в мою гостевую книгу. <br>
<br>
А может и просто случайный посетитель вдруг захочет познакомится со мной, и
у меня появится <b> еще один виртуальный друг? </b><br>
<br>
На фотографии изображен я. <br>
</body>
</html>
|
|
|
2. Создать документ "menu.htm"
<html>
<head>
<title>left</title>
<meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#4f5e81" text="#FFFFFF">
<a href="main.htm" target=mainFrame><b>Главная</b></a><br>
<a href="aboutme.htm" target=mainFrame><b>Про меня</b></a><br>
<a href="rezume.htm" target=mainFrame><b>Резюме</b></a><br>
<a href="links.htm" target="mainFrame"><b>Ссылки </b></a><br>
<a href="photo.htm" target=mainFrame><b>Мой альбом</b></a>
</body>
</html>
3. Создать документ "index.htm".
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251">
</head>
<frameset cols="159,*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" noresize src="menu.htm">
<frame name="mainFrame" src="main.htm">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
Создать свою главную страницу(index.htm), состоящую из 2-х фреймов. Левый фрейм должен содержать меню(left.htm), правый главную страницу(main.htm).
Меню должно содержать ссылки на созданные документы.
На главной странице разместите краткую информацию о вашем сайте.
Контрольные вопросы:
|
|
|
