рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Фреймы в HTML-документах

Фреймы в HTML-документах - раздел Программирование, Ссылки На Различные Ресурсы Internet. Документы Html Могут Соде...

Ссылки на различные ресурсы Internet. Документы HTML могут содержать ссылки на различные ресурсы сети: на внешние HTML-документы, электронные почтовые адреса, серверы FTP, электронные конференции и так далее. См.: Компьютерные сети и системы: Методические указания по изучению раздела “Навигация в Интернет”/Академия ГА. С-Пб.,2002.

 

Фреймы в HTML-документах

Web-технология разрешает использование многооконного интерфейса, реализуемого при помощи фреймов (Frame), то есть Web-технология разрешает создание обособленных окон — фреймов, в каждом из которых могут отображаться различные HTML-документы. Фрейм, таким образом, рассматривается как обособленная, выделенная часть окна просмотра (рис.2.12). Фрейм имеет собственный адрес, позволяющий загружать его независимо от других фреймов, и собственное имя (параметр NAME), позволяющее переходить от одного фрейма к другому. Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши, то есть фреймы разделяются подвижной границей-сплиттером. Параметром noresize можно запретить изменение границ фреймов.

Структура документа с фреймами. Документ с фреймами должен содержать описание структуры фреймов и набор HTML-документов, которые будут загружаться во фреймы. Сами HTML-документы, загружаемые во фреймы, не имеют каких – либо особенностей. Файл, содержащий описание структуры фреймов, оформляется как HTML-документ, в котором отсутствует раздел BODY.

Для описания структуры документа с фреймами используются элементы <FRAMESET>, <NOFRAME> и <FRAME>.

Элемент <FRAMESET> задает разбиение основного окна программы просмотра на отдельные окна (фреймы).

Синтаксис элемента:

<FRAMESET> является контейнером, закрывающий тэг обязателен.

Собственные атрибуты элемента <FRAMESET>

 

Наименование атрибута Описание атрибута
cols Задает число колонок. Ширина колонки задается в % к ширине окна, в относительных единицах или пикселях.
rows Задает число строк. Высота строки задается аналогично ширине колонки.
border Задает толщину рамки фрейма в пикселях.
bordercolor Указывает цвет рамки.
frameborder Указывает вид рамки: 0-плоская рамка, 1 – объемная рамка.
framespacing Задает расстояние между фреймами в пикселях.

Примеры задания 2.12.

<FRAMESET rows="120, *">-два фрейма строки. Высота первого фрейма 120 пикселей, второго — оставшаяся часть окна.

<FRAMESET cols="20%,80%">-две колонки. Ширина первой – 20% окна броузера, второй – оставшиеся 80% окна.

Элемент <FRAMESET> допускает вложенность, то есть допустима конструкция <FRAMESET> . . . <FRAMESET> * * * </FRAMESET> </FRAMESET>.

Пример окна просмотра с фреймами

 

Рис.2.12. Web-страница, реализованная с использованием фреймов

Рассматриваемая страница состоит из трех фреймов, в каждый из которых загружен свой собственный фрейм.

Элемент <FRAME> используется для описания каждого отдельного фрейма и выбора HTML-документа, который будет загружаться в этот фрейм. Таким образом, элемент <FRAMESET> описывает структуру фреймов, а элемент <FRAME> — каждый фрейм в отдельности.

Собственные атрибуты элемента <FRAME>

Наименование атрибута Описание атрибута
src Обязательный атрибут. Адрес файла (URI) с документом HTML, который загружается в окно фрейма.
name Параметр задает имя фрейма, которое используется в операторе ссылки <A> для указания, в какой фрейм нужно загрузить новый документ.
scrolling Задает или отменяет полосу прокрутки (скроллинга). Принимает значения: auto – полоса прокрутки создается при необходимости автоматически. Если документ не помещается во фрейме, то полоса прокрутки создается; yes – полоса прокрутки создается всегда; no – полоса прокрутки не создается. Часть страницы будет недоступна пользователю.
noresize Если этот параметр указан, то мышью нельзя изменять границы фрейма.
frameborder Если frameborder=0, то рамка не создается. Если frameborder =1, то создается трехмерная рамка, толщина которой задается в пикселях.
align Используется только для “плавающих” фреймов. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Принимает значения: left, center, right, top, bottom.
marginheight Отступ по вертикали от границ фрейма в пикселях.
marginwidth Отступ по горизонтали от границ фрейма в пикселях.

Аналогично другим элементам языка разметки гипертекста элемент <FRAME> имеет общие атрибуты: id, class, style, title. Атрибуты для установки обработчиков событий здесь отсутствуют.

Элемент <NOFRAME> используется для альтернативного отображения фрейма, если программа просмотра не поддерживает работу с фреймами. Программа просмотра (броузер) отображает в этом случае содержание элемента <NOFRAME>. Элемент <NOFRAME> располагается после элемента <FRAMESET>. Если броузер распознает элемент <NOFRAME>, то его содержание воспринимается как содержимое элемента <BODY>.

Если элемент <NOFRAME> не распознается, то выводится содержимое операторов <NOFRAME> и </NOFRAME>, которое может включать:

- блочные заголовки <H1>, . . . <H6>, элементы: <P>, <DIV>, <DL>, <PRE>, <BLOCKQUOTE>, <FIELDSET>, <ADDRESS>, <HR>, <TABLE>, списки <UL>, <OL>, скрипты <SCRIPT>, <NOSCRIPT>;

- встроенные элементы:

- текст;

- элементы физического форматирования <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;

- элементы логического форматирования <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;

- специального назначения <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;

- форм <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.

Структура документа с фреймами, учитывая особенности операторов <FRAMESET>, <FRAME> и <NOFRAME>, приведена в примере 2.13.

Пример 2.13.HTML – документ с фреймами.

 

<HTML>

<HEAD>

<TITLE>Фреймы в HTML документах</TITLE>

</HEAD>

<FRAMESET rows="120,*" BORDERCOLOR="red" FRAMEBORDER=0 BORDER=2>

<FRAME SCROLLING="auto" NAME="first" NORESIZE SRC= "ddd.htm" MARGINHEIGHT=25>

<FRAMESET COLS="25%,75%" FRAMEBORDER=1 BORDER=3>

<FRAME SCROLLING="no" NAME="prim1" SRC="Графика.html">

<FRAME SCROLLING="auto" NAME="prim2" SRC="Крепость Орешек.htm">

<NOFRAME>

<TABLE>

<TR><TD colspan=2><center>Фрейм 1</center></TD></TR>

<TR><TD VALIGN=TOP>фрейм 2</TD><TD VALIGN=TOP>фрейм 3</TD></TR>

</TABLE>

<p><A Name=L4> Графическая ссылка <A HREF="D:\УчебнПособия\ Фрейм\4321 Kurochkin\Leti_tm2.gif">

<IMG WIDTH=80 HEIGHT=20 SRC="D:\УчебнПособия\Фрейм\ Nigl_HTTP\Images\Cdrom.gif" BORDER=0></A>

по тексту</p>

</NOFRAME>

</FRAMESET>

</FRAMESET>

</HTML>

Рассматриваемый пример, описывает структуру фреймов соответствующую рис.2.12.

Запись <FRAMESET rows="120,*" FRAMEBORDER=0 BORDER=2 BORDERCOLOR="red"> задает структуру из двух горизонтальных фреймов. Первый фрейм занимает 120 пикселей по вертикали, второй — оставшуюся часть окна программы просмотра. Фреймы ограничены рамкой, которая окрашена в красный цвет.

Запись <FRAME SCROLLING="auto" NAME="first" NORESIZE SRC="ddd.htm" MARGINHEIGHT=25> описывает верхний фрейм. Фрейм имеет имя — first, которое известно каждому элементу Web-технологии. Граница фрейма не может быть изменена (параметр NORESIZE) с помощью мыши. В окно фрейма загружен документ ddd.htm. Отступ по вертикали от границ фрейма составляет 25 пикселей.

Нижний фрейм делится на два вертикальных фрейма. Для этих целей используется запись

<FRAMESET COLS="25%,75%" FRAMEBORDER = 1 BORDER=1 BORDERCOLOR="silver">

<FRAME SCROLLING="no" NAME="prim1" SRC="Графика.html">

<FRAME SCROLLING="auto" NAME="prim2" SRC="Крепость Орешек.htm">.

Запись <FRAMESET COLS="25%,75%" FRAMEBORDER = 1 BORDER=1 BORDERCOLOR="silver"> определяет структуру из двух фреймов, которые делят нижнее окно в отношении 25% и 75%. Фреймы – столбцы разделены рамкой, окрашенной в серебряный (silver) цвет.

Каждый из фреймов описывается записью

<FRAME SCROLLING="no" NAME="prim1" SRC="Графика.html">

<FRAME SCROLLING="auto" NAME="prim2" SRC="Крепость Орешек.htm">.

Левый фрейм – колонка имеет имя — prim1. Фрейм не имеет полосы прокрутки — SCROLLING="no". В окно фрейма загружен HTML-документ — SRC="Графика.html">.

Аналогичный анализ может быть сделан и для записи <FRAME SCROLLING="auto" NAME="prim2" SRC="Крепость Орешек.htm">.

Операторы <NOFRAME> и </NOFRAME> определяют альтернативный текст для программ просмотра, которые не работают с фреймами

<NOFRAME>

<TABLE><TR><TD colspan=2><center>Фрейм 1</center></TD></TR>

<TR><TD VALIGN=TOP>фрейм 2</TD><TD VALIGN=TOP>фрейм 3</TD></TR>

</TABLE>

<p><A Name=L4> Графическая ссылка <A HREF="D:\УчебнПособия\ Фрейм\4321 Kurochkin\Leti_tm2.gif">

<IMG WIDTH=80 HEIGHT=20 SRC="D:\УчебнПособия\Фрейм\ Nigl_HTTP\Images\Cdrom.gif" BORDER=0></A>

по тексту</p>

</NOFRAME>

Результат отображения альтернативного текста (рис.2.13).

 

Рис.2.13. Просмотр альтернативного текста

Элемент <IFRAME> (“плавающий” фрейм) выделяет формируемую область окна просмотра, в которой отображается другой HTML-документ.

Синтаксис:

Lt;IFRAME> является контейнером, располагающимся в отображаемом HTML-документе.

Использование элемента <IFRAME> показано в примере 2.14. Пример 2.14.HTML – документ с “плавающим” фреймом  

Таблицы в HTML-документах

Параметры таблицы предоставляют чрезвычайно широкие и разнообразные возможности форматирования и цветового оформления элементов гипертекста для… При проектировании HTML-документа формат и основные параметры таблицы задаются… Аналогично могут группироваться и столбцы таблицы с целью получения необходимой структуры таблицы. Свойства столбцов…

Элемент <caption> используется для определения подписи таблицы. Оператор <caption> определяет размещение подписи таблицы. Располагается сразу после оператора <TABLE>.

Синтаксис элемента

<CAPTION attribute_1="value 1" attribute_2="value 2" …>…</CAPTION>

Атрибуты элемента

 

Наименование атрибута Описание атрибута
align Параметр указывает положение подписи относительно таблицы. Допустимы значения: - top — подпись располагается над таблицей (используется по умолчанию); - bottom — подпись располагается под таблицей; - left — подпись располагается слева от таблицы; - right — подпись располагается справа от таблицы.  

 

Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

 

Организация колонок. Элементы <COLGROUP> и <COL>.

  Синтаксис элемента <COL>: <COL attribute_1="value 1" attribute_2="value 2" …>

Табличная верстка.

Пример 2.18. Образец табличной верстки В примере приводится начальная часть табличной верстки. <html>

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

 

Результат выполнения примера 2.18 имеет вид (Рис.2.18).

 

 

Рис.2.18. Просмотр примера 2.18 (параметр border=3). Табличная верстка

В рассматриваемом примере все ячейки таблицы имеют границы (параметры border равны 3 или 1). При табличной верстке границы ячеек, как правило, отсутствуют (параметр border равен нулю). Результат просмотра примера 2.18 при отсутствии границ ячеек приведен на рис.2.19.

 

Рис.2.19. Просмотр примера 2.18 (параметр border=0). Табличная верстка

Каскадные таблицы стилей

Каждое правило может применяться в указанном разработчиком месте к заданным элементам. В правиле задается объект, к которому стиль применяется, а… Использование стилей позволяет: - отделить содержание оформляемой части документа от ее представления. Тем самым достигается универсальность…

Создание файлов таблиц стилей

  H1{font-size:24; font-weigt: bold; color: red; margin-left: 10%} H2{font-size:20; font-weigt: bold; color: black; font-family: courier}

Пример 2.21. Встраивание таблицы стилей в HTML-документ.

<HTML>

<HEAD>

<TITLE>Встраивание таблицы стилей в HTML-документ </TITLE>

<LINK REL=STYLESHEET HREF="styles.css" Type="text/css">

<STYLE TYPE="text/css">

<!- -

 

H1{font-size:24; font-weigt: bold; color: red; margin-left: 10%}

 

H2{font-size:20; font-weigt: bold; color: black; font-family: courier}

 

P.italic {font-style: italic}

 

P.red {color: red}

 

- ->

</STYLE>

</HEAD>

 

<BODY BGCOLOR="yellow">

<H1>Встроенная таблица стилей</H1>

<P>Обычный текст

<H2>Заголовок второго уровня</H2>

<P CLASS=italic>Наклонный текст

<P CLASS=red>Текст красного цвета

</BODY>

</HTML>

 

Результат выполнения примера 2.21 имеет вид (рис.2.22)

 

Рис. 2.22. Просмотр примера 2.21 (таблица стилей в HTML-документе)

Стили в операторах HTML

Пример 2.22. Стили в операторах HTML

<HTML>

<HEAD>

<TITLE> Стили в операторах HTML </TITLE>

</HEAD>

<BODY BGCOLOR="yellow">

<H1 STYLE="font-size:24; font-weigt: bold; color: red; margin-left: 10%">

Стили в операторах HTML</H1>

<P>Обычный текст

<H2 STYLE="font-size:20; font-weigt: bold; color: black; font-family: courier">

Заголовок второго уровня</H2>

<P STYLE="font-style: italic">Наклонный текст

<P STYLE="color: red">Текст красного цвета

</BODY></HTML>

Результат выполнения примера 2.22 имеет вид (рис. 2.23)

Рис. 2.23. Просмотр примера 2.22 (стили в операторах HTML)

В примерах (2.19 — 2.22) используются идентичные стилевые свойства. Формы использования стилевых свойств различны. Идентичность стилевых свойств, несмотря на различие форм их использования, приводит к идентичности отображения Web-страниц (рис. 2.20 — 2.23).

 

Интерактивные Web-страницы

В настоящем разделе рассмотрим одну из возможностей проектирования активной Web-страницы на основе форм. Форма предназначена для логического объединения элементов управления в группы… Механизм взаимодействия:

– Конец работы –

Используемые теги: фреймы, HTML-документах0.051

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Фреймы в HTML-документах

Что будем делать с полученным материалом:

Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Еще рефераты, курсовые, дипломные работы на эту тему:

Компоненты контейнеры( форма, фреймы, Panel, Bevel, ScrollBox)
Panel... Панель Panel представляет собой контейнер в котором можно размещать другие... Панель имеет край с двойной фаской внутренней и внешней Внутренняя фаска обрамляет панель а внешняя отображается...

Общие принципы проектирования HTML-документа
Структура документов в формате HTML... В рекомендациях W первой строкой создаваемого документа указывается... lt DOCTYPE HTML PUBLIC W C DTD HTML EN gt...

Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид
Лабораторная работа... ВвЕДЕНИЕ В НTML Предисловие...

Структура HTML-документа
Форматирование текста с помощью HTML... Задание полей на Web странице... Задание цвета на Web странице Выравнивание текста на Web странице...

Достоинства фреймов
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов Фреймы созданы для того... Фреймы используются для разделения экрана браузера на независимые части... Достоинства фреймов С помощью фреймов веб страница разграничивается на...

Достоинства фреймов
Фреймы используются для разделения экрана браузера на независимые части Содержимое фрейма это отдельная HTML страница которая может находиться... Заголовок документа... lt BODY gt...

Теория фреймов
Психологи подметили , что распознавание объектов легче проходит в обычном контексте, чем в нестандартной обстановке . Из этого примера мы видим ,…

0.03
Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • По категориям
  • По работам