Практическая работа по информатике "Создание фреймов в документах HTML"

Для ознакомления студентов с особенностями создания Фреймов в данной практической работе есть: - определение Фреймов; - примеры написание фреймов; - описаны основные атрибуты для создания фреймов в HTML - документов. Также студентам предложено выполнить практическую работу состоящую из трех заданий: 1. Создать HTML-документ; 2. Добавить оглавление и гиперссылки; 3. Добавить картинку.

Создание фреймов в документах HTML Фреймы это окна независимого просмотра HTMLдокументов. Иногда бывает очень удобно организовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню. Рассмотрим следующий пример HTMLстраницы, использующей фреймы: Страница с двумя вертикальными фреймами Здесь присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Тэг имеет следующие атрибуты:  cols="..." задает вертикальное расположение полос фреймов  rows="..." задает горизонтальное расположение полос фреймов  borlercolor="..." задает цвет рамки, которая разделяет отдельные фреймы;  frameborder="..." указывает броузеру, отображать ли рамку у фреймов или нет;  border="..." — определяет ширину рамки между фрэймами.  framespacing="..." определяет расстояние между фрэймами. Определение документа, изначально загружаемого при открытии этого файла, задается атрибутом тега src="...", при этом необходимо указать параметр name= "...". Сам же документ является обыкновенной HTML страницей. Файл "MainMenu.html" будет иметь следующую структуру: Как видно из листинга, сама страница не содержит какоголибо текста, который присутствует в обычной Web странице. В данном документе находятся только ссылки на другие HTMLдокументы, которые будут загружены браузером при открытии страницы с фреймами.

Первый Frame

Первая страничка второго фрэйма

Вторая страничка второго фрэйма Для того чтобы ссылки из первого фрэйма открывались во втором фрэйме необходимо использовать тэг , указывающий в каком окне необходимо открыть документы, ссылки на которые используются в данном документе. Файл "Text1.html" будет иметь следующий код: Контейнеры и являются взаимоисключающими. Это означает, что если в документе присутствуют оба указанных тега, то браузер игнорирует контейнер и отображает информацию, заключенную в контейнер . Второй Frame

Второй Frame

Первая страничка второго фрэйма Второй Frame

Второй Frame

создадим еще файл "Text2.html" со следующим кодом:

Вторая страничка второго фрэйма Теперь посмотрим, что у нас получилось. Наша страничка будет иметь следующий вид. При выборе первой ссылки из левого фрейма, в правом фрэйме откроется "Первая страничка второго фрэйма", а при выборе второй ссылки, в нижнем фрэйме откроется "Вторая страничка второго фрэйма" Для оформления горизонтальных фреймов следует использовать параметр rows="..." тега . Часто необходимо применить комбинацию вертикальных и горизонтальных фреймов. Предположим, необходимо создать вертикальную и горизонтальную панели навигации, а также основной фрейм, в который будет загружаться требуемая страница. Для этого необходимо разбить страницу на три фрейма следующим образом: Страница с комбинированным использованием фреймов Встроенный фрейм Кроме обычных фреймов существуют и встроенные фреймы. Они представляют собой окно в документе, в которое, в свою очередь, загружается другой HTMLдокумент. Для вставки такого фрейма используется тег , который имеет следующие основные атрибуты:  src="..." данный атрибут предназначен для указания пути к Webстранице, которая будет загружена в данный фрейм;  name="..." в данном атрибуте определяется имя фрейма;  height="..." указывает высоту фрейма в пикселях;  width="..." — указывает ширину фрейма в пикселях. В сочетании с атрибутом height="..." может ускорить загрузку основного документа, поскольку броузер оставит место для фрейма и продолжит загрузку родительского документа;  frameborder="..." разрешает или запрещает отображение рамки вокруг фрейма. Возможные значения: 0 или 1;  scrolling="..." задает отображение линий прокрутки для фрейма. Имеет следующие значения: Auto задано по умолчанию, определяется броузером в зависимости от загружаемого во фрейм документа; Yes — заставляет браузер отображать линии прокрутки; No линии прокрутки не отображаются. Ниже приведен пример HTMLстраницы, использующей встроенный фрейм: <HTML> <HEAD> <TITLE>Пример использования встроенного фрейма</TITLE> </HEAD> <BODY> <H1>Ниже расположен встроенный фрейм:</H1> <HR> <iframe src="example_6.html" name="Frame" width="60%" height="30%"> Данная страница содержит встроенный фрейм. Если Вы видите этот текст, значит ваш браузер не поддерживает отображение встроенных фреймов. Рекомендую установить более новую версию браузера. 1. Создайте HTMLдокумент под именем glav.html, разделяющий и заполняющий экран по следующей схеме: ЗАДАНИЕ: ЗАГОЛОВОК САЙТА МЕНЮ ПРИВЕТСТВИЕ   Ссылка на п_1 Ссылка на п_2  Ссылка на п_3 2. В левой области должен отображаться HTMLдокумент c заголовком Оглавление и гиперссылки на 1, 2 и 3 страницы (Пункт_1.html, Пункт_2.html, Пункт_3.html). Гиперссылки, организуйте, таким образом, чтобы страницы 1, 2 и 3 отображались в правой области. 3. В каждый Пункт добавьте картинку.

Практическая работа по информатике "Создание фреймов в документах HTML"

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

03.03.2018