Раздел 5. Телекоммуникационные
технологии
Тема
5.1. Представления о технических и программных средствах телекоммуникационных
технологий.
Практическая
работа HTML. Фреймы.
Учебная цель: Научиться
создавать многооконные документы с использованием языка разметки текста
HTML в простейшем текстовом редакторе Блокнот.
Формирование
общих компетенций (ОК): ОК 2, ОК 3, ОК 4, ОК 5, ОК 6.
Задачи: Научиться создавать многооконные документы. с использованием
языка разметки текста HTML в простейшем текстовом редакторе Блокнот, развитие творческих способностей к
самовыражению, посредством создания сайтов.
Время
2 часа
Используемое
программное обеспечение: Internet Explorer (или
другой установленный браузер).
Содержание работы: изучите
теоретический материал, выполните задания.
Теоретический
материал:
Понятие
фрейма в HTML
Окно браузера может быть разделено на части,
которые называются фреймами. Такие документы называют многооконными. В каждую
такую часть окна браузера, т.е. фрейм (окно), может быть загружен
отдельный HTML документ. Рассмотрим пример окна браузера с тремя фреймами.
В каждый фрейм в этом случае для
наглядности загружен простой HTML документ, сообщающий номер фрейма
и название файла, хранящего его содержимое. Если в фрейм будет
загружен реальный документ, который не помещается полностью в нем, то у фрейма
(внимание, не у всего окна!) появятся вертикальная и/или горизонтальная
полосы прокрутки в зависимости от того, по горизонтали и/или по
вертикали не помещается содержимое документа.
Например, дизайн и структура вашего сайта
таковы, что есть одинаковые элементы, повторяющиеся на каждой странице сайта:
название, навигационное меню, адрес в конце страницы или какие-то иные подобные
элементы. Изменяется только содержание разделов. Тогда страницы можно
разбить на части таким образом, чтобы неизменяемые части были помещены в
отдельные фреймы, а еще один фрейм выделить для того, чтобы в
него загружалось содержимое нужного раздела после щелчка на
соответствующей ссылке, например, из меню.
Это дает экономию в скорости загрузки, так как
одинаковые части страниц сайта повторно не загружаются, а просто все время
отображаются в отведенных им фреймах.
Рассмотрим
пример.
Окно
браузера разделено на 3 части. Надо сказать, что это единственный случай, когда
в html-документе отсутствуют теги <body></body>. Вместо них
используются теги <frameset></frameset>, которые и указывают
браузеру разбить окно на несколько областей - фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух
параметров тега <frameset></frameset>:
- rows -
указывает разбить окно на горизонтальные области. Причем, сколько значений
у этого параметра, столько и областей. В нашем примере rows="30%,
10%, 60%" , т.е. три горизонтальные области: ширина первой - 30%
от ширины экрана, ширина второй - 10%, а третьей - 60%.
- cols -
указывает разбить окно на вертикальные области.
Внутри
тегов <frameset></frameset> располагаются одиночные теги <frame>,
причем их должно быть столько, сколько задано областей. Без параметров эти теги
бесполезны.
Мы рассмотрим параметры тега <frame> на примерах.
src - самый
главный параметр, он определяет адрес той html-страницы или картинки, которая
будет загружаться во фрейм.
Задания 1-5.
- Создать 3 документа, в которых
будут записаны слова LOGO (logo.html) , CONTENT (content.html), MENU (menu.html).
2-5.С
использованием команд создания многооконных документов сформировать 4
файла по указанному заданию. Дать им имя: 1.html, 2.html и т.д.
- Пример для 1-го файла (1.html)
:
<html>
<head>
<title>Документ 1</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html>
3. Пример для
2-го файла (2.html) :
<html>
<head>
<title>Документ 2 </title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>
4.
Пример
для 3-го файла: параметр cols делит окно браузера на колонки<frameset
cols="100,150,*">
5.
4
файл создайте согласно рисунку, самостоятельно.
Критерии
оценки:
Оценка
«5» - обучающийся выполнил все задания, ошибки незначительные либо отсутствуют.
Оценка «4»
- обучающийся выполнил 4 задания с недочетами
Оценка «3»
- обучающийся выполнил 3 задания, ошибки незначительные либо отсутствуют.
Оценка «2»
- обучающийся выполнил менее 3 заданий.
Информационное обеспечение.
Основные источники:
1.Астафьева Н.Е., Гаврилова С.А., Цветкова М.С. Информатика и ИКТ: Практикум для профессий
и специальностей технического и социально-экономического профилей: учеб. пособие для студ. Учреждений сред. проф. Образования
/ под ред. М.С.Цветковой. — М., 2014
2.Цветкова М.С., Великович Л.С. Информатика и ИКТ: учебник для студ. учреждений сред. проф. образования. — М., 2014
Дополнительные источники:
1.Малясова С.В., Демьяненко С.В. Информатика и ИКТ: Пособие для подготовки к ЕГЭ: учеб.
пособие для студ. Учреждений сред. проф. Образования / под ред. М.С.Цветковой.
— М., 2013.
2. Михеева Е.В. Информационные
технологии в профессиональной деятельности: учеб.пособие для студ. сред. проф.
образования М.: Издательский центр «Академия», 2013
3.Цветкова М.С., Хлобыстова И.Ю. Информатика и ИКТ: практикум для профессий и специальностей естественно-научного и гуманитарного
профилей: учеб. пособие для студ. учреждений
сред. проф. образования. — М., 2014.
4.Цветкова
М.С. Информатика и ИКТ: электронный учеб-метод. комплекс для студ.
учреждений сред. проф. образования. — М.,
2015.
Интернет
– ресурсы:
1. Электронно-библиотечная система BOOK.RU
[Электронный ресурс] — Режим доступа: https://www.book.ru/
2. Электронно-библиотечная система
ACADEMIA [Электронный ресурс] — Режим доступа: https://www.academia-moscow.ru
3. Электронно-библиотечная система
ЮРАЙТ [Электронный ресурс] — Режим доступа: https://urait.ru/
4. Каталог видеоуроков
TeachVideo.ru [Электронный ресурс] — Режим доступа: http:// www.teachvideo.ru
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.