русс | укр

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

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

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

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


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

Составные фреймы


Дата добавления: 2015-09-15; просмотров: 711; Нарушение авторских прав


Фреймы

 

Фреймы позволяют нам открыть в окне браузера не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).

Создайте web-странички menu.html и logo.html, и разместите их в папке, названной Вашими фамилиями. В документе logo.html разместите созданный вами в графическом редакторе логотип, отражающий тему Вашего сайта − изучение языка HTML. (Файл сохраните в формате .jpg). В menu.html напишите пока просто "Это МЕНЮ"

Файл Index.html переименуйте в content.html

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

Т.к. первый документ на сайте, который показывается посетителю, это index.html, пусть он будет фрейм-документом. Создадим документ index.html:

<html>
<head>

<title>Хождение по фреймам</title>

</head>
</html>

На первый взгляд - вполне стандартное начало, только вот нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях, вместо него используется <frameset></frameset>.

<html>
<head>
<title>
Хождение по фреймам</title>

<frameset></frameset>
</head>
</html>

Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Классический вариант - logo.html, menu.html, content.html.

Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:





Фреймы-строки и фреймы-колонки

 

Сначала создадим первый вариант:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">

</frameset>
</head>
</html>

Начнем с атрибута rows - в нашем примере это выглядит так: rows="100,*,150" – что означает "... наш документ делится на несколько рядов (строк). Высота первого ряда - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство".

Тэг frame сообщает браузеру, какие же документы у нас будут в каждом ряду (строке). В нашем случае: первый ряд - logo.html (документ с логотипом - любой картинкой), второй ряд займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html, а, кроме того, задать новые значения атрибуту rows (rows="100,150,*">), чтобы меню снова занимало только 150 пикселов по высоте, а содержание - все остальное. Выполните эти изменения и просмотрите результат.

Замените атрибут rows, на cols

Атрибут cols делит окно нашего браузера не на ряды, а на колонки. При cols="100,150,*" наш документ теперь делится на колонки, первая имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место.

Итак, подведем итоги. Мы можем делить окно нашего браузера либо на ряды, либо на колонки, с помощью атрибутов тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти атрибуты использовать нельзя.

При помощи rows мы разбиваем окно на ряды и задаем, какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка.

Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:

<frameset cols="10%,15%,75%">

Помните, что в сумме это все должно равняться 100%. А то бывают же умники...


Составные фреймы

или

Мы можем делить окно только на ряды или колонки. Тогда как же расположить документы в окне так, как указано на рисунках? Для этого что ряд можно разбить на несколько колонок, а колонку на несколько рядов.

Начнем с первого рисунка:

Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>

</frameset>
</head>
</html>

 



<== предыдущая лекция | следующая лекция ==>
 | Полосы прокрутки


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


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

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

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


 


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

 
 

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

Генерация страницы за: 0.003 сек.