<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>
-
'''Тема: Фреймы.'''
+
==Тема==
+
*'''Фреймы.'''
-
'''Цель:''' Рассмотреть понятие фрейма. Научить делить веб-страницу на фреймы и заполнять их содержимым.
+
==Цель==
+
*Рассмотреть понятие фрейма.
+
*Научить делить веб-страницу на фреймы и заполнять их содержимым.
-
<br>
+
==Ход урока==
-
<u>Фреймы</u> позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.
+
===Понятие "фрейм"===
-
<br>
+
'''Фреймы''' позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.
Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:
Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:
количество документов, открывающихся в одном окне браузера сколько места будет занимать каждый фрейм каким образом они будут расположены относительно друг друга.
количество документов, открывающихся в одном окне браузера сколько места будет занимать каждый фрейм каким образом они будут расположены относительно друг друга.
+
{{#ev:youtube|-NQyopLOctc}}
{{#ev:youtube|-NQyopLOctc}}
-
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
+
+
Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
< html >
< html >
Строка 35:
Строка 40:
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
-
<br>
-
[[Image:Fram1.jpg]]
+
[[Image:Fram1.jpg|400px|Фреймы]]
-
<br>
-
<u>Создадим первый вариант страницы с фреймом. </u>
+
===Создание страницы с фреймом===
+
+
'''Создадим первый вариант страницы с фреймом.'''
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.
Строка 55:
Строка 60:
< /frameset >
< /frameset >
-
<br>
-
[[Image:Fram2.jpg]]
+
[[Image:Fram2.jpg|400px|Фреймы]]
-
+
-
<br>
+
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
Строка 67:
Строка 70:
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
-
<br>
{{#ev:youtube|1AER6GLtUJs}}
{{#ev:youtube|1AER6GLtUJs}}
-
<br>
Тэг '''frame''' определяет документы, загружаемые во фреймы.
Тэг '''frame''' определяет документы, загружаемые во фреймы.
Строка 77:
Строка 78:
Фреймы можно поменять местами:
Фреймы можно поменять местами:
-
<br>
< frameset rows="100,*,150" >
< frameset rows="100,*,150" >
Строка 89:
Строка 89:
< /frameset >
< /frameset >
-
<br>
-
[[Image:Fram3.jpg]]
+
[[Image:Fram3.jpg|400px|Фреймы]]
-
<br>
-
<br>
+
Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
-
<br>
-
Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
+
[[Image:Fram4.jpg|400px|Фреймы]]
-
[[Image:Fram4.jpg]]
-
-
<br>
Сейчас фреймы разместились не по горизонтали, а по вертикали.
Сейчас фреймы разместились не по горизонтали, а по вертикали.
Строка 109:
Строка 103:
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
-
<br> Попробуем разместить фреймы в другом порядке.
+
Попробуем разместить фреймы в другом порядке.
< frameset rows="100,*" >
< frameset rows="100,*" >
Строка 125:
Строка 119:
< /frameset >
< /frameset >
-
[[Image:Freim5.jpg]]
-
<br>
+
[[Image:Freim5.jpg|400px|Фреймы]]
-
<br>
-
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
+
На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
Научить делить веб-страницу на фреймы и заполнять их содержимым.
Ход урока
Понятие "фрейм"
Фреймы позволяют открывать в окне веб-странице одновременно несколько документов например, 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 >
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
Здесь прописывается высота каждого фрейма в пикселях (rows="100,*,150").
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
Тэг frame определяет документы, загружаемые во фреймы.
Фреймы можно поменять местами:
< frameset rows="100,*,150" >
< frame src="content.html" >
< frame src="menu.html" >
< frame src="logo.html" >
< /frameset >
Теперь заменим rows на cols и посмотрим на результат
Сейчас фреймы разместились не по горизонтали, а по вертикали.
Значить атрибут rows отвечает за горизонтальное расположение фреймов, cols – за вертикальное.
Попробуем разместить фреймы в другом порядке.
< frameset rows="100,*" >
< frame src="logo.html" >
< /frameset >
< frameset cols="150,*" >
< frame src="menu.html" >
< frame src="content.html" >
< /frameset >
На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
Атрибут Scrolling с параметром "no" запрещает прокручивание содержимого фрейма
Атрибут Noresize – запрещает менять размер фрейма Атрибут Border со значением "0" убирает видимые границы фреймов
Атрибуты Marginwidth выставляет ширину фрейма
Атрибуты Marginheight – выставляет высоту фрейма.
Вопросы
1. Что такое фрейм?
2. Какая схема работы фрейма?
3. Какой тэг отвечает за создание фреймов?
4. Назовите основные атрибуты фреймов.
Список использованных источников
1. Урок на тему: «Что такое фреймы?», Кашин Е. Н., г. Чернигов.
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.
5. postroika.ru
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Кашин Е. Н.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
