<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}}
+
<br> {{#ev:youtube|-NQyopLOctc}}
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
Строка 33:
Строка 38:
< /html >
< /html >
-
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
+
<br> С помощью [[Практическая работа № 12: Создание фреймов|фреймов]] окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
+
<br> [[Image:Fram1.jpg|400px|Фреймы]]
+
<br>
-
[[Image:Fram1.jpg]]
+
=== Создание страницы с фреймом ===
+
'''Создадим первый вариант страницы с фреймом.'''
-
+
Но перед этим нужно создать обычные *.html документы с логотипом, [[Закриті вправи до теми «Управление компьютером с помощью меню.»|меню]] и основным содержанием.
-
<u>Создадим первый вариант страницы с фреймом. </u>
+
-
+
-
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.
+
<br> < frameset '''rows'''="100,*,150" >
<br> < frameset '''rows'''="100,*,150" >
Строка 55:
Строка 60:
< /frameset >
< /frameset >
-
<br>
+
<br> [[Image:Fram2.jpg|400px|Фреймы]]
-
+
-
[[Image:Fram2.jpg]]
+
-
+
-
+
-
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
+
<br> С помощью атрибута rows тэга указывается горизонтальное расположение фреймов.
Здесь прописывается высота каждого фрейма в пикселях ('''rows'''="100,*,150").
Здесь прописывается высота каждого фрейма в пикселях ('''rows'''="100,*,150").
Строка 67:
Строка 68:
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
-
<br>
+
<br> {{#ev:youtube|1AER6GLtUJs}}
-
{{#ev:youtube|1AER6GLtUJs}}
+
<br> Тэг '''frame''' определяет [[Практическая робота на тему: Форматирование шрифта текста при создании документов|документы]], загружаемые во фреймы.
-
+
-
<br>
+
-
+
-
Тэг '''frame''' определяет документы, загружаемые во фреймы.
+
Фреймы можно поменять местами:
Фреймы можно поменять местами:
-
<br>
+
<br> < frameset rows="100,*,150" >
-
+
-
< frameset rows="100,*,150" >
+
< frame src="content.html" >
< frame src="content.html" >
Строка 89:
Строка 84:
< /frameset >
< /frameset >
-
<br>
+
<br> [[Image:Fram3.jpg|400px|Фреймы]]
-
+
-
[[Image:Fram3.jpg]]
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
+
-
+
-
[[Image:Fram4.jpg]]
+
+
<br> Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
+
<br> [[Image:Fram4.jpg|400px|Фреймы]]
-
Сейчас фреймы разместились не по горизонтали, а по вертикали.
+
<br> Сейчас фреймы разместились не по горизонтали, а по вертикали.
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
-
<br> Попробуем разместить фреймы в другом порядке.
+
Попробуем разместить фреймы в другом порядке.
< frameset rows="100,*" >
< frameset rows="100,*" >
Строка 125:
Строка 110:
< /frameset >
< /frameset >
-
[[Image: freim5.jpg]]
+
<br> [[Image:Freim5.jpg|400px|Фреймы]]
-
+
-
+
-
+
-
+
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
Строка 138:
Строка 119:
*Атрибуты '''Marginheight''' – выставляет высоту фрейма.
*Атрибуты '''Marginheight''' – выставляет высоту фрейма.
1. Урок на тему: «Что такое фреймы?», Кашин Е. Н., г. Чернигов.
+
''1. Урок на тему: «Что такое фреймы?», Кашин Е. Н., г. Чернигов. ''
-
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
+
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
-
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
-
4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.
+
''4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г. ''
-
5. postroika.ru
+
''5. postroika.ru''
<br>
<br>
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
----
+
+
<br> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С.''
+
+
<br>
+
+
----
+
+
<br> '''Над уроком работали'''
+
+
Кашин Е. Н.
+
+
Соловьев М. С.
+
+
<br>
-
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].
+
----
-
Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<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
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Кашин Е. Н.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
