KNOWLEDGE HYPERMARKET


Фреймы. Полные уроки
 
Строка 3: Строка 3:
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>  
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фреймы.</metakeywords><br>  
-
==Тема==
+
== Тема ==
-
*'''Фреймы.'''  
+
 
 +
*'''Фреймы.'''
 +
 
 +
== Цель  ==
-
==Цель==
 
*Рассмотреть понятие фрейма.  
*Рассмотреть понятие фрейма.  
-
*Научить делить веб-страницу на фреймы и заполнять их содержимым.  
+
*Научить делить [[Основные теги. Каркас веб-страницы. Полные уроки|веб-страницу]] на фреймы и заполнять их содержимым.
-
==Ход урока==  
+
== Ход урока ==
-
===Понятие "фрейм"===
+
=== Понятие "фрейм" ===
'''Фреймы''' позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.  
'''Фреймы''' позволяют открывать в окне веб-странице одновременно несколько документов например, menu.html, содержащий меню сайта, logo.html - с логотипом страницы, content.html - документ с содержанием сайта и т.д.  
-
Итак, для того, чтобы браузер показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:  
+
Итак, для того, чтобы [[Презентация на тему: Что такое Веб - Браузер|браузер]] показал одновременно несколько документов, нужно создать фрейм-документ, где укажем:  
количество документов, открывающихся в одном окне браузера сколько места будет занимать каждый фрейм каким образом они будут расположены относительно друг друга.  
количество документов, открывающихся в одном окне браузера сколько места будет занимать каждый фрейм каким образом они будут расположены относительно друг друга.  
 +
<br> {{#ev:youtube|-NQyopLOctc}}
-
{{#ev:youtube|-NQyopLOctc}}
+
<br> Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!  
-
 
+
-
 
+
-
Фреймы создаются с помощью тэга FRAMESET. Заметьте, что в коде html-документа нет тэга body!  
+
&lt; html &gt;  
&lt; html &gt;  
Строка 38: Строка 38:
&lt; /html &gt;  
&lt; /html &gt;  
-
<br> С помощью фреймов окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.  
+
<br> С помощью [[Практическая работа № 12: Создание фреймов|фреймов]] окно браузера делится на несколько окон, заданных размеров, где помещаются независимые друг от друга документы. Это позволяет оставлять одну информацию видимой, а другую - заменяемой или прокручиваемой.  
 +
<br> [[Image:Fram1.jpg|400px|Фреймы]]
-
[[Image:Fram1.jpg|400px|Фреймы]]
+
<br>
-
 
+
-
===Создание страницы с фреймом===
+
=== Создание страницы с фреймом ===
'''Создадим первый вариант страницы с фреймом.'''  
'''Создадим первый вариант страницы с фреймом.'''  
-
Но перед этим нужно создать обычные *.html документы с логотипом, меню и основным содержанием.  
+
Но перед этим нужно создать обычные *.html документы с логотипом, [[Закриті вправи до теми «Управление компьютером с помощью меню.»|меню]] и основным содержанием.  
<br> &lt; frameset '''rows'''="100,*,150" &gt;  
<br> &lt; frameset '''rows'''="100,*,150" &gt;  
Строка 60: Строка 60:
&lt; /frameset &gt;  
&lt; /frameset &gt;  
 +
<br> [[Image:Fram2.jpg|400px|Фреймы]]
-
[[Image:Fram2.jpg|400px|Фреймы]]
+
<br> С помощью атрибута rows тэга указывается горизонтальное расположение фреймов.  
-
+
-
 
+
-
С помощью атрибута rows тэга указывается горизонтальное расположение фреймоа.  
+
Здесь прописывается высота каждого фрейма в пикселях ('''rows'''="100,*,150").  
Здесь прописывается высота каждого фрейма в пикселях ('''rows'''="100,*,150").  
Строка 70: Строка 68:
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.  
А значок * указывает на то, что второй средний фрейм занимает все оставшееся пространство по высоте.  
 +
<br> {{#ev:youtube|1AER6GLtUJs}}
-
{{#ev:youtube|1AER6GLtUJs}}
+
<br> Тэг '''frame''' определяет [[Практическая робота на тему: Форматирование шрифта текста при создании документов|документы]], загружаемые во фреймы.  
-
 
+
-
 
+
-
Тэг '''frame''' определяет документы, загружаемые во фреймы.  
+
Фреймы можно поменять местами:  
Фреймы можно поменять местами:  
-
 
+
<br> &lt; frameset rows="100,*,150" &gt;  
-
&lt; frameset rows="100,*,150" &gt;  
+
&lt; frame src="content.html" &gt;  
&lt; frame src="content.html" &gt;  
Строка 89: Строка 84:
&lt; /frameset &gt;  
&lt; /frameset &gt;  
 +
<br> [[Image:Fram3.jpg|400px|Фреймы]]
-
[[Image:Fram3.jpg|400px|Фреймы]]
+
<br> Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
 +
<br> [[Image:Fram4.jpg|400px|Фреймы]]
-
Теперь заменим '''rows '''на '''cols''' и посмотрим на результат
+
<br> Сейчас фреймы разместились не по горизонтали, а по вертикали.  
-
 
+
-
 
+
-
[[Image:Fram4.jpg|400px|Фреймы]]
+
-
 
+
-
 
+
-
Сейчас фреймы разместились не по горизонтали, а по вертикали.  
+
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.  
Значить атрибут '''rows''' отвечает за горизонтальное расположение фреймов, '''cols''' – за вертикальное.  
Строка 119: Строка 110:
&lt; /frameset &gt;  
&lt; /frameset &gt;  
 +
<br> [[Image:Freim5.jpg|400px|Фреймы]]
-
[[Image:Freim5.jpg|400px|Фреймы]]
+
<br> На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:  
-
 
+
-
 
+
-
На последок, нужно вспомнить еще о нескольких полезных функциях относительно фреймов:  
+
*Атрибут '''Scrolling '''с параметром "no" запрещает прокручивание содержимого фрейма  
*Атрибут '''Scrolling '''с параметром "no" запрещает прокручивание содержимого фрейма  
Строка 130: Строка 119:
*Атрибуты '''Marginheight''' – выставляет высоту фрейма.
*Атрибуты '''Marginheight''' – выставляет высоту фрейма.
 +
<br> {{#ev:youtube|xA8WnrgZzuI}}
-
{{#ev:youtube|xA8WnrgZzuI}}
+
<br> {{#ev:youtube|UFo8S-55zsA}}  
-
 
+
-
 
+
-
{{#ev:youtube|UFo8S-55zsA}}  
+
 +
<br>
-
==Вопросы==
+
== Вопросы ==
-
''1. Что такое фрейм? ''
+
''1. Что такое фрейм? ''  
-
''2. Какая схема работы фрейма? ''
+
''2. Какая схема работы фрейма? ''  
-
''3. Какой тэг отвечает за создание фреймов? ''
+
''3. Какой тэг отвечает за создание фреймов? ''  
-
''4. Назовите основные атрибуты фреймов. ''
+
''4. Назовите основные атрибуты фреймов. ''  
<br>  
<br>  
-
==Список использованных источников==  
+
== Список использованных источников ==
-
''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> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С.''  
 +
<br>
----
----
 +
<br> '''Над уроком работали'''
-
'''Над уроком работали'''
+
Кашин Е. Н.
-
Кашин Е. Н.
+
Соловьев М. С.  
-
 
+
-
Соловьев М. С.
+
 +
<br>
----
----
-
 
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
+
-
   
+
-
 
+
-
+
[[Category:Информатика_10_класс]]
[[Category:Информатика_10_класс]]

Текущая версия на 19:59, 2 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Фреймы.


Содержание

Тема

  • Фреймы.

Цель

  • Рассмотреть понятие фрейма.
  • Научить делить веб-страницу на фреймы и заполнять их содержимым.

Ход урока

Понятие "фрейм"

Фреймы позволяют открывать в окне веб-странице одновременно несколько документов например, 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




Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.




Над уроком работали

Кашин Е. Н.

Соловьев М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Информатика > Информатика 10 класс