русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Фреймы в HTML | Примеры фреймов

ОГЛАВЛЕНИЕ

1. Представление фреймов на Web-странице
1.1 Задание фреймовой структуры
1.2 Задание параметров фреймов
2 Плавающие фреймы
3 Разработка многооконной Web-страницы
3.1 Фрейм "title"
3.2 Фрейм "left"
Пример № 1

1. Представление фреймов на Web-странице

1.1 Задание фреймовой структуры

Чтобы сделать просмотр документов на Web-странице более удобным, можно воспользоваться многооконным интерфейсом, реализованным с помощью фреймов. В этом случае можно загрузить сразу несколько документов (Web-страниц) и работать одновременно со всеми ними.

В отличии от обычного HTML-документа в документе с описанием фреймов нет тэга-контейнера <BODY> . . . </BODY>. Вместо него используется тэг-контейнер <FRAMESET> . . . </FRAMESET>, который делит экран на несколько горизонтальных частей (окон), или на несколько вертикальных окон. Каждое из окон описывается в виде фрейма с помощью тэга <FRAME>. Тэг <FRAMESET> содержит следующие параметры:

  • COLS - указывает через запятую ширину вертикальных окон в пикселях или в % от ширины экрана (если задается *, то этому окну отводится оставшаяся часть экрана);
  • ROWS - указывает через запятую высоту горизонтальных окон в пикселях или в % от высоты экрана (если задается *, то этому окну отводится оставшаяся часть экрана);
  • FRAMEBORDER :
    • 1 - фреймы имеют рамку;
    • 0 - фреймы не имеют рамку.
  • FRAMESPACING - указывает расстояние между фреймами в пикселях.

Например, тэг

<FRAMESET COLS="20%,30%,*">
<FRAME . . . >
<FRAME . . . >
<FRAME . . . >
</FRAMESET>

делит экран на три вертикальных окна, которые занимают соответсвенно 20%, 30% и оставшуюся часть (50%) экрана. На месте каждого из тэгов <FRAME> может быть указан тэг <FRAMESET> . . . </FRAMESET>. Это позволяет формировать на экране сложную многооконную структуру.

В примере № 1 показано построение и использование трехоконной структуры на Web-странице.

Оглавление

1.2 Задание параметров фреймов

Для описания характеристик каждого окна используется тэг <FRAME>, который содержит следующие параметры:

  •   MARGINHEIGHT - указывает отступ в пикселях по высоте от границ фрейма;
  •   MARGINWIDTH - указывает отступ в пикселях по ширине от границ фрейма;
  •   FRAMEBORDER - имеет те же значения (0,1), что и одноименный параметр тэга FRAMESET;
  • NAME - указывает имя фрейма, которое может быть использовано в ссылках для загрузки Web-страницы в требуемое окно экрана (см. описание параметра TARGET в разделе 1.1 описания лабораторной работы №6); имеется ряд стандартных имен окон:
    • _self - для загрузки Web-страницы в текущее окно (принимается по умолчанию, если в ссылке не задан параметр TARGET);
    • _top - для загрузки Web-страницы во весь экран;
    • _blank - для загрузки Web-страницы в новое окно (отличается от _top тем, что нельза вернуться в исходное окно по стрелке "Назад").
  •   NORESIZE - запрещает изменять с помощью мышки размеры фрейма;
  •  SCROLING - указывает на один из трех режимов просмотра фрейма:
    • yes - с созданием полосы прокрутки;
    • no - без создания полосы прокрутки;
    • auto - с созданием полосы прокрутки только тогда, когда загружаемые данные не помещаются в окне фрейма (принимается по умолчанию).
  •   SRC - URL-адрес Web-страницы, загружаемой в окно фрейма;
  •  BORDERCOLOR - указывает цвет границы фрейма (ширина границы задается параметром FRAMESPACING).

Оглавление

2 Плавающие фреймы в HTML

При создании многооконной Web-страницы помимо применения фреймовой структуры на базе тэга <FRAMESET> . . . </FRAMESET> (см. пункт 1.1) также могут быть использованы плавающие фреймы. В этом случае в HTML-документе вместо тэга <FRAMESET> . . . </FRAMESET> используется, как и во всех остальных Web-страницах, тэг <BODY> . . . <BODY>.
Плавающий фрейм, подобно изображению, будет располагаться на экране в том месте, которое соответстует расположению тэга с его описанием в HTML-документе. Для задания плавающего фрейма используется тэг-контейнер <IFRAME></IFRAME>. Поскольку плавающий фрейм во многом объединяет свойства и фрейма, и изображения, то он имеет часть параметров (MARGINHEIGHT, MARGINWIDTH, NAME, SCROLING, SRC, BORDERCOLOR ), которые свойственны фреймам и рассмотрены в пункте 1.2, другая часть его параметров (ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE) характерна для изображений и рассмотрена в HTML изображение в пункте 1.1.

Ниже приведен пример задания плавающего фрейма, с именем "ff", размером 200*200 пикселей, в который загружается Web-страница с адресом "prim3-1.htm":

<IFRAME NAME="ff" SRC="prim3-1.htm" HEIGHT=200 WIDTH=200> </IFRAME>

В примере № 1 наряду с обычными фреймами показано применение плавающих фреймов (в файле "left.htm").

Оглавление

3 Разработка многооконной Web-страницы

В примере (№ 1) показано построение трехоконной Web-страницы, имеющей соответственно три фрейма: один горизонтальный ("title") и два вертикальных ("left" и "right").

Пример 1

<HTML>
<HEAD>
<TITLE> Фреймы в HTML на Web-странице </TITLE>
</HEAD>
<FRAMESET ROWS="60,*" FRAMESPACING=0>
<FRAME NAME="title" SRC="title.htm" NORESIZE SCROLLING="no"
MARGINHEIGHT=0 MARGINTEIGHT=0
STYLE="border: red 6 dashed" >
<FRAMESET COLS="30%,*" FRAMESPACING=2 >
<FRAME NAME="left" SRC="left.htm" FRAMEBORDER=0 >
<FRAME NAME="right" SRC="prim1-1.htm" FRAMEBORDER=1
BORDERCOLOR=#0000E0 >
</FRAMESET>
</FRAMESET>
</HTML>

 

Как видно из фреймовой структуры экран сначала делится на два горизонтальных окна: первое окно имеет размер 60 пикселов, второе занимает оставшуюся часть экрана. Затем второе горизонтальное окно делится на два вертикальных с размерами соответственно 30% и 70% экрана.

Оглавление

3.1 Фрейм "title"

Фрейм "title" используется для задания общих или заголовочных сведений. Может быть использован как домашняя страница (home page). В нем запрещены полосы прокрутки и изменение размера окна.
Файл "title.htm", загружаемый в окно "title", содержит HTML-документ из двух строк, задающих цвет фона, параметры надписи и саму надпись:

<P STYLE="background:#E0FFE0; color:#0000C0;font: italic 10mm; text-align:center"> ИЗУЧЕНИЕ HTML

Оглавление

3.2 Фрейм "left"

 

Файл "left.htm", загружаемый в окно "left" содержит HTML-документ, в котором задан набор ссылок в виде кнопок, осуществляющих доступ к описаниям лобораторных работ, и плавающий фрейм:

<HTML>
<HEAD>
<LINK REL=stylesheet HREF="my_d.css">
</HEAD>
<BODY>
<A CLASS="kn" HREF="2.htm" TARGET="right"> Страница №2
</A> <BR>
<A CLASS="kn" HREF="3.htm" TARGET="right"> Страница №3
</A> <BR>
<A CLASS="kn" HREF="4.htm" TARGET="right"> Страница №4
</A> <BR>
<A CLASS="kn" HREF="5.htm" TARGET="_top"> Страница №5
</A> <BR>
<A CLASS="kn" HREF="6.htm" TARGET="ff"> Страница №6
</A> <BR><BR>
<IFRAME NAME="ff" SRC="prim2-2.htm" HEIGHT=200 WIDTH=200>
</IFRAME>
</BODY>
</HTML>

 

Первые три ссылки загружают Web-страницы с описаниями лабораторных работ №2, №3 и №4 во фрейм с именем "right", четвертая ссылка загружает Web-страницу с описанием лабораторной работы №5 во весь экран, а последняя ссылка загружает Web-страницу с описанием лабораторной работы №6 в плавающий фрейм с именем "ff". Описание параметров плавающего фрейма и его использование на Web-странице приведено в разделе 2.

Оглавление

 

Просмотров: 20029

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.