Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Атрибуты форматирования фреймов

Лабораторная работа №5.

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ HTML.

Создание фреймов.

Цель работы: изучить назначение и правила записи основных тегов языка и их атрибуты.

Теоретические данные.

Создание фреймов (теги <FRAMESET> И <FRAME>).

Фрейм — это обособленная область web-документа со своими полосами прокрут­ки. С помощью фреймов web-страница разделяется на несколько независимых облас­тей. При этом можно открыть документ в одном фрейме по ссылке, находящейся в другом фрейме. Фреймы предоставляют уникальную возможность размещения ин­формации точно в нужном месте окна браузера. Так, можно поместить фрейм в нижней части окна, и независимо от прокручивания содержимого в основной части окна эта область не изменит своего положения.

Создание вертикальных и горизонтальных фреймов

Для создания фреймовой структуры применяется контейнер <FRAMESET>... </FRAMESET>, который заменяет контейнер <BODY>...</BODY> и используется для разделения экрана на области. Внутри него находятся теги <FRAME SRC=...>, которые указывают на HTML-документы, предназначенные для изначальной загрузки в со­зданные фреймы.

Фреймы бывают вертикальными и горизонтальными. В табл. 1 указаны воз­можные атрибуты тега <FRAMESET>. Все способы разделения окна применимы для обоих атрибутов — COLS и ROWS. Как видно из таблицы, отводимое под фреймы пространство можно указывать в процентах от общих размеров окна браузера (%), час­тями (*) или в абсолютных величинах (пикселях).

Таблица 1. Атрибуты тега <FBAMESET>

Атрибут Способ задания размеров Описание Примеры
COLS %, % Вертикальное раз­деление окна брау­зера <FRAMESET COLS="50%, 50%"> </FRAMESET> Окно браузера разделится вертикально на две равные части.
число, %,* <FRAMESET COLS="150, 30%, * "> </FRAMESET> Под первый вертикальный фрейм отводится 150 пикселей, под второй — 30 % доступного пространства, а для третьего — вся оставшаяся область окна браузера.
ROWS число, число Горизонтальное раз­деление окна брау­зера <FRAMESET ROWS="30, 70"> </FRAMESET> Задание горизонтальных фреймов с точным ука­занием их высоты: верхний — 30 пикселей, нижний — 70.
%,* <FRAMESET ROWS="30%,*"> </FRAMESET> Задание горизонтальных фреймов, когда пер­вый фрейм будет занимать 30 % от высоты окна браузера, а второй — все остальное пространство.

 

Пример.

Пусть нам нужно разбить рабочую область окна браузера на два фрейма с имена­миfr1 и fr2, в которые будут загружаться одноименные web-документы.

В первый фрейм поместим фото «Храм Василия Блаженного» и со­ответствующий заголовок второго уровня:

Файл fr1.html

<HTML>

<HEAD>

<ТIТLЕ> Храм Василия Блаженного </ТIТLЕ> </HEAD>

<BODY>

<Н2 ALIGN=CENTER> Храм Василия Блаженного, г.Москва, Россия </Н1>

<IMG SRC=hram.jpg HEIGHT=400 WIDTH=282>

</BODY>

</HTML>

Во второй фрейм поместим фото «Олимпийский стадион» (г. Сочи) и заголовок второго уровня.

Файл fr2.html

<HTML>

<HEAD>

<ТIТLЕ>Стадион</ТIТLЕ>

</HEAD>

<BODY>

<H2 ALIGN=CENTER> Олимпийский стадион </Н1>

<IMG SRC=stadion.jpg HEIGHT=449 WIDTH=303>

</BODY>

</HTML>

1. Создание двух вертикальных фреймов:

<HTML>

<HEAD>

<TITLE>Россия</ТIТLЕ>

</HEAD>

<FRAMESET COLS="50%, 50%">

<FRAME SRC=frl.html>

<FRAME SRC=fr2.html>

</FRAMESET>

</HTML>

2. Создание двух горизонтальных фреймов:

<HTML>

<HEAD>

<TITLE>Россия</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="40%, *">

<FRAME SRC=frl.html>

<FRAME SRC=fr2.html>

</FRAMESET>

</HTML>


Примеры создания сложных фреймов.

 

1. Пусть нужно создать фреймовую структуру, приведенную на рис. 1, где гори­зонтальному фрейму (с именемЗаголовок ) отведено 15 %, вертикальному (Меню) — 25 %, а фреймуСодержимое — все остальное пространство.

Заголовок
Меню Содержимое

Рис. 1. Фреймовая структура из горизонтальных и вертикальных участков

В этом случае фреймовая структура будет кодироваться следующим образом:

<НТМL>

<HEAD>

</Т1ТLЕ>Фрейм с заголовком</Т1ТLЕ>

</HEAD>

<FRAMESET ROWS="15%,*">

<FRAME SRC=zagolovok.html>

<FRAMESET COLS="25%,*">

<FRAME SRC=menu.html>

<FRAME SRC=sodergimoe.html>

</FRAMESET>

</FRAMESET>

</HTML>

Здесь файл zagolovok.html содержит «титульный заголовок» web-страницы:

<HTML>

<HEAD>

<TITLE>3aгoлoвок</Title>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>3aгoлoвок</Hl>

</BODY>

</HTML>

Файл menu.html содержит меню web-страницы:

<HTML>

<HEAD>

<ТIТLЕ>Меню</ТIТLЕ>

</HEAD>

<BODY>

< H2 ALIGN=CENTER>Meню</H2>

</BODY>

</HTML>

 

Файл sodergimoe.html отображает основное содержимое страницы:

<HTML>

<HEAD>

<ТIТLЕ>Содержимое</ТIТLЕ>

</HEAD>

<BODY>

<Н2 ALIGN=CENTER>Coдержимoe</H2>

</BODY>

</HTML>

2. Пусть нужно создать фреймовую структуру, приведенную на рис.2, где гори­зонтальному фрейму Заголовок отведено 15 %, горизонтальному фрейму Адрес — 10 %, вертикальному фрейму Логотип — 20 %, вертикальному фрейму Меню — 25 %, фрейму Новости — 20 %, фрейму Содержимое — остальное пространство.

 

Лого­тип Заголовок
Меню Содержимое Новости
Адрес

Рис.2

Здесь нужно сначала разделить окно браузера на горизонтальные фреймы, первый из которых занимает 15 % от высоты окна, третий — 10 %, а второму отводится все остальное (хотя можно было записать его высоту и в явном виде — как 75 %):

<FRAMESET ROWS="15%,*,10%">

Первый горизонтальный фрейм должен состоять из двух вертикальных: Лого­тип — 20 % и Заголовок — все остальное пространство:

<FRAMESET COLS="20%, *">

<FRAME SRC=logotip.html>

<FRAME SRC=zagolovok.html>

</FRAMESET>

Второй горизонтальный фрейм состоит из трех вертикальных: Меню — 25 %, Новости — 20 %, Содержимое — остальное пространство:

<FRAMESET COLS="25%, *, 20%">

<FRAME SRC=menu.html>

<FRAME SRC=sodergimoe.html>

<FRAME SRC=novosti.html>

</FRAMESET>

Третий горизонтальный фрейм занимает всю область экрана. Не забудем и про последний, закрывающий тег </FRAMESET>,который был открыт в самом начале:

<FRАME SRC=adres.html>

</FRАMESET>

В итоге получается следующая конструкция:

<HTML>

<HEAD>

<ТIТLЕ>Сложный вид фреймов</ТIТLЕ>

</HEAD>

 

<FRAMESET ROWS="15%,*,10%">

<FRAMESET COLS="20%,*">

<FRAME SRC=logotip.html>

<FRAME SRC=zagolovok.html>

</PRAMESET>

<FRAMESET COLS="25%,*,20%">

<FRAME SRC=menu.html>

<FRAME SRC=sodergimoe.html>

<FRAME SRC=novosti.html>

</FRAMESET>

<FRAME SRC=adres.html>

</FRAMESET>

</HTML>

 

Атрибуты форматирования фреймов

Каждому элементу <FRAME> желательно задать имя с помощью атрибута NAME. Это имя удобно использовать при создании гиперссылок и организации переходов по ссылкам внутри фреймовой структуры. Описание этого и остальных атрибутов см. в табл. 2.

 

 

Таблица 2

Атрибуты тегов <FRAMESET> И <FRAME>

 

Атрибут Описание Пример
NAME Задание имени фрейма <FRAME SRC=logotip.html NAME=log>
BORDЕR=0 Удаление линий границы между фреймами <FRAMESET ROWS="15%,*,10%"BORDER=0>
BOBDER=2 Увеличение толщины линии границы (в на­шем примере толщина разделительной ли­нии будет равна 2 пикселям) <FRAMESET ROWS="15%,*,10%" B0RDER=2>
NORESIZE Запрет изменения размеров фрейма. По умолчанию размеры фреймов можно ме­нять с помощью мыши, перетаскивая гра­ницу между фреймами. Для блокировки этой возможности следует воспользоваться параметром noresize <FRAME SRC=logotip.html NORESIZE>
BORDERCOLOR Задание цвета границ фрейма <FRAMESET ROWS="15%,*,10%" BORDER=2 BORDERCOLOR=red>
  MARGINHEIGHT Задание полей сверху и снизу от краев фрейма. Значение указывается в пикселях. (Если задать нулевое значение, то содержи­мое фреймов растянется на всю ширину эк­рана, что испортит вид web-страницы) <FRAMESET ROWS="15%,*,10%" MARGINHEIGHT=10 MARGINWIDTH=20 NORESIZE>
  MARGINWIDTH
SCROLLING Полосы прокрутки внутри фрейма не создаются <FRAME SRC=logotip.html SCROLLING=NO>
yes Полосы прокрутки создаются обяза­тельно, даже если в них нет необхо­димости
auto Полосы прокрутки появляются, когда это необходимо (по умолча­нию)
Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...