'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Фреймы.'''
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Фреймы.'''
-
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>
+
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>
-
'''Тема: Фреймы.'''
+
'''Тема: Фреймы.'''
'''Цель:''' Рассмотреть понятие фрейма. Научить делить веб-страницу на фреймы и заполнять их содержимым.
'''Цель:''' Рассмотреть понятие фрейма. Научить делить веб-страницу на фреймы и заполнять их содержимым.
-
+
<br>
<u>Фреймы</u> позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.
<u>Фреймы</u> позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.
-
+
<br>
Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:
Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:
Строка 21:
Строка 21:
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!
-
< html >
+
< html >
-
< head >
+
< head >
-
< title >Фреймы< /title >
+
< title >Фреймы< /title >
-
< /head>
+
< /head>
-
< frameset>< /frameset >
+
< frameset>< /frameset >
< /html >
< /html >
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.
+
+
[[Image:Fram1.jpg]]
[[Image:Fram1.jpg]]
-
<u>Создадим первый вариант страницы с фреймом. </u>
+
+
+
<u>Создадим первый вариант страницы с фреймом. </u>
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.
-
<br> < frameset '''rows'''="100,*,150" >
+
<br> < frameset '''rows'''="100,*,150" >
< frame src="logo.html" >
< frame src="logo.html" >
-
< frame src="content.html" >
+
< frame src="content.html" >
< frame src="menu.html" >
< frame src="menu.html" >
Строка 54:
Строка 58:
[[Image:Fram2.jpg]]
[[Image:Fram2.jpg]]
+
+
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.
Строка 61:
Строка 67:
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.
-
+
<br>
{{#ev:youtube|1AER6GLtUJs}}
{{#ev:youtube|1AER6GLtUJs}}
+
<br>
-
+
Тэг '''frame''' определяет документы, загружаемые во фреймы.
-
Тэг'''frame''' определяет документы, загружаемые во фреймы.
+
Фреймы можно поменять местами:
Фреймы можно поменять местами:
+
<br>
+
< frameset rows="100,*,150" >
-
< frameset rows="100,*,150" >
+
< frame src="content.html" >
-
< frame src="content.html" >
+
< frame src="menu.html" >
-
< frame src="menu.html" >
+
< frame src="logo.html" >
-
+
-
< frame src="logo.html" >
+
< /frameset >
< /frameset >
-
+
<br>
[[Image:Fram3.jpg]]
[[Image:Fram3.jpg]]
-
Теперь заменим'''rows '''на'''cols''' и посмотрим на результат [[Image:Fram4.jpg]]
+
+
+
+
+
+
+
Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
+
+
[[Image:Fram4.jpg]]
+
+
Сейчас фреймы разместились не по горизонтали, а по вертикали.
Сейчас фреймы разместились не по горизонтали, а по вертикали.
-
Значить атрибут'''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
+
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.
<br> Попробуем разместить фреймы в другом порядке.
<br> Попробуем разместить фреймы в другом порядке.
-
< frameset rows="100,*" >
+
< frameset rows="100,*" >
-
< frame src="logo.html" >
+
< frame src="logo.html" >
-
< /frameset >
+
< /frameset >
< frameset cols="150,*" >
< frameset cols="150,*" >
Строка 105:
Строка 121:
< frame src="menu.html" >
< frame src="menu.html" >
-
< frame src="content.html" >
+
< frame src="content.html" >
< /frameset >
< /frameset >
+
+
[[Image: freim5.jpg]]
+
+
+
+
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:
Строка 120:
Строка 142:
<br>
<br>
-
'''Вопросы:'''
+
'''Вопросы:'''
-
1. Что такое фрейм?
+
1. Что такое фрейм?
2. Какая схема работы фрейма?
2. Какая схема работы фрейма?
-
3. Какой тэг отвечает за создание фреймов?
+
3. Какой тэг отвечает за создание фреймов?
4. Назовите основные атрибуты фреймов.
4. Назовите основные атрибуты фреймов.
+
<br>
-
+
''Список использованных источников: ''
-
''Список использованных источников: ''
+
1. Урок на тему: «Что такое фреймы?», Кашин Е. Н., г. Чернигов.
1. Урок на тему: «Что такое фреймы?», Кашин Е. Н., г. Чернигов.
Строка 144:
Строка 166:
5. postroika.ru
5. postroika.ru
+
<br>
-
+
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].
Цель: Рассмотреть понятие фрейма. Научить делить веб-страницу на фреймы и заполнять их содержимым.
Фреймы позволяют открывать в окне веб-странице одновременно несколько документов например, 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
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Если у вас есть исправления или предложения к данному уроку, напишите нам.
Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - Образовательный форум.
