Приобрести практические навыки по созданию Web-страниц с фреймами.
Обеспечение: ПЭВМ, блокнот, Microsoft Internet Explorer
Требования к результатам усвоения материала
Студент должен знать:
Принципы размещения нескольких документов на одной Web-странице
Теги используемые при создании Web-страниц с фреймами
Назначение и области применения фреймов
Студент должен уметь:
Использовать возможности прикладного программного обеспечения при создании Web-документов
Создавать фреймы на Web-страницах
Использовать фреймы для отображения информации на Web-страницах
Грамотно оформлять Web-страницы
План работы:
Изучить теоретический материал по созданию фреймов на Web-страницах.
Создать Web-документ (пример 25). При создании использовать файлы на которые имеются ссылки или свои, ранее созданные файлы.
С помощью MSIE проверить и проанализировать отображение примера 25 с окне программы-обозревателя.
Создать Web-документ (пример 26). При создании использовать файлы с ранее созданными примерами, переименовав их или используя в примере реальные имена файлов.
Используя Краткую энциклопедию HTML, раздел ФРЕЙМЫ создать документ с использованием атрибутов BORDER=, BORDERCOLOR=, MARGINHEIGHT=, MARGINWIDTH=, SCROLLING=, NORESIZE. Результаты сохранять в ивде отдельных файлов (примеры 27, 27а и т.д.)
Защитить проделанную работу.
Размещение нескольких документов на одной Web-странице
Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
1.Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела “тела” документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> и </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей.
2. Тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющие способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= — горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей или сетка фреймов.
3. Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселах или в процентах (символ “%”). В качестве последнего параметра можно использовать символ “звездочка” (*), что означает, что ей выделяется все оставшееся пространство. Под такой фрейм выделяется все остающееся свободное пространство.
<FRAMESET COLS=”60%,40%”> или <FRAMESET ROWS-“40%,40%,*”>
4. Между тегами <FRAMESET> и </FRAMESET> должно располагаться ровно столько элементов, сколько областей создано с помощью атрибутов COLS и ROWS, т.е. располагаются дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET>, задающие дополнительное разбиение окна, или одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> и </FRAMESET>, должно соответствовать числу созданных областей.
Тег <FRAME> должен содержать обязательный атрибут SRC=, с помощью которого определяется документ, который будет первоначально загружен в данную область. Значение этого атрибута – абсолютный или относительный адрес URL нужного документа. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.
Среди прочих атрибутов выделяется атрибут NAME=, позволяющий задать “имя” созданной области в виде последовательности латинских букв и цифр, использованной как значение этого атрибута.
<FRAME SCR=”text.htm” NАME=”left”>
это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут TARGET=, значение котрого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм.
Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа – текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений.
Пример
<HTML>
<HEAD>
<TITLE>Страница с навигационной панелью</TITLE>
</HEAD>
<FRAMESET COLS=”25%,*”><FRAME SRC=”panel.htm”>
<FRAME SRC=”home1.htm”>
</FRAMESET>
</HTML>
Пример
<HTML>
<HEAD>
<TITLE>Сложная структура документа</TITLE>
<HEAD>
<FRAMESET ROWS=”45%,30%,25%”>
<FRAMESET COLS=”40%,30%,30%”>
<FRAMESET ROWS=”50%,50%”>
<FRAME SRC=doc1.htm>
<FRAME SRC=doc2.htm>
</FRAMESET>
<FRAME SRC=doc3.htm>
<FRAME SRC=doc4.htm>
</FRAMESET>
<FRAMESET COLS=”60%,40%”>
<FRAME SRC=doc5.htm>
<FRAME SRC=doc6.htm>
</FRAMESET>
<FRAMESET COLS=”30%,40%,30%”>
<FRAME SRC=doc7.htm>
<FRAME SRC=doc8.htm>
<FRAME SRC=doc9.htm>
</FRAMESET>
</HTML>
Ход работы
Задание
Создать документ doc1.html, отображающий содержимое двух документов, в левой части - doc2.html, а в правой doc3.html.
Создать документы doc4.html, doc5.html, doc6.html, doc7.html, doc8.html, отображающиеся в правой части окна при активизации соответствующих гиперссылок.
Изменить стиль оформления документов (размер, цвет и т. д.)
Алгоритм выполнения работы
1. Используя, приведённые ниже HTML-коды создать документы:
