Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Главная » Основы HTML » Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

07.12.2015

15:10

50616

пока нет

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки основ HTML.

В этом уроке мы разберем, что такое фреймы и как они создаются в HTML.
Итак, давайте определимся, что такое фреймы в HTML.
Фреймы – это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.

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

Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:

[пример]

Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ.

Создание фрейма на веб странице осуществляется по такому макету:

<frameset>
<frame>
<frame>
</frameset>

Внимание: макет фрейм-кода вставляется в html-документ вместо тега <bode></body>:

<html>
<head>
 <title>Фреймы</title>
</head>
<frameset>
<frame>
<frame>
</frameset>
</html>

○ тег frameset

Это главный контейнер для создания фрейма, внутри которого содержатся другие элементы.
Закрывающий тег обязательный.

<frameset></frameset>

*Атрибуты тега frameset:

Cols - вертикальные
Rows - горизонтальные

rows - горизонтально

cols - вертикально

В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:

<frameset cols="30%,*">

Левая часть экрана будет размером 30%, а правая – 70%.

Если хотите разделить браузер еще на несколько частей, допишите через запятую дополнительные размеры, вот, например, так:

<frameset cols="30%,20%,10%,40%">

В итоге первая вертикальная колонка будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.

Разобрались?

Так же и с горизонтальной разбивкой:

<frameset rows="30%,20%,10%,40%">

Первая горизонтальная колонка будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.

○ тег frame

Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html», «2.html», «3.html». Тег frame будет выглядеть вот так:

<frame src="1.html">
<frame src="2.html">
<frame src="3.html">

Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html» на 30%, «2.html» на 70%.
Вот готовый код:

<frameset cols="30%,*">
<frame src="1.html">
<frame src="2.html">
</frameset>

Результат будет таким:

* Атрибуты тега frame

src – адрес веб страницы. src="1.html";
marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth="10";
marginhight – отступ внутри фрейма по высоте. Пример: marginhight ="10";
scrolling – прокрутка фрейма через скролл.
- yes – скролл будет присутствовать во фрейме. Пример: scrolling ="yes";
- no – скролл не будет присутствовать во фрейме. Пример: scrolling ="no";
- auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling ="auto";
noresize – запрещает двигать границы фрейма.
name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name ="stepkinblog-ru";

○ Ссылки во фреймах или учимся пользоваться атрибутом «name»

Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:

[яркий пример, где нет атрибута «name»]

А вот пример, если прописать атрибут «name»:

[яркий пример с атрибутом «name»]

Правда, так лучше?
Для любого фрейма пропишите атрибут «name» там, где вы хотите, чтобы открывались в нем другие html-документы

<frame src="2.html "name ="stepkinblog-ru">

Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame», то помните, что каждое должно быть уникальным:

<frame src="2.html "name ="stepkinblog-ru">
<frame src="1.html "name ="bloggood-ru">
<frame src="3.html "name ="nocrisise-ru">

Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target»:

<a href="1text.html" target="stepkinblog-ru">страница 1</a>
<a href="2text.html" target="stepkinblog-ru">страница 2</a>
<a href="3text.html" target="bloggood-ru">страница 3</a>

«Страница 1», «Страница 2» будут открываться в одном окне там, где вы указали имя фрейму «name ="stepkinblog-ru"» и «Страница 3» откроется в другом фрейме, где было название «name ="bloggood-ru"»

Со ссылками разобрались. Переходим к практике.

ПРАКТИКА

Задание: Нужно создать фреймы вот по такому макету:

Вначале создадим три горизонтальных фрейма:

<frameset rows="15%,*,15%">
</frameset>

Теперь добавим «top.html» и «footer.html»

<frameset rows="15%,*,15%">
<frame src="top.html">

<frame src="footer.html">
</frameset>

Результат пока что будет вот таким:

Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html»:

<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>

Готовый код:

<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>
</html>

Сохраните файл, как «index.html»

Создайте странички «top.html », «footer.html», «menu.html» и «content.html»:

Код файла «top.html»

<html>
<head>
<title>шапка сайта</title>
</head>
<body bgcolor="#b2f2ff" text="#0000FF">
<h1>StepkinBLOG.ru</h1>
</body>
</html>

Код файла «footer.html»

<html>
<head>
<title>Файл footer.html </title>
</head>
<body bgcolor="#b2f2ff" text="#000000">
StepkinBlog.com © 2015
</body>
</html>

Код файла «menu.html»

<html>
<head>
<title>Файл menu.html – меню сайта</title>
</head>
<body bgcolor="#b2bbff" text="#112cf5">
<ul>
<li><a target="main" href="content.html">Главная страница</a></li>
<li><a target="main" href=" autor.html">Об авторе</a></li>
</ul>
</body>
</html>

Код файла «content.html»:

<html>
<head>
<title>Главная страница</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h1>Главная страница</h1>
Содержимое сайта - "Главная страница (content.html)"
</body>
</html>

Код файла «autor.html»:

<html>
<head>
<title> Об авторе</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h1> Об авторе</h1>
Содержимое сайта - " Об авторе (autor.html)"
</body>
</html>

Вот такой результат у меня вышел:

[посмотреть пример]

Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html».

<frameset rows="15%,*,15%">
<frame src="top.html" scrolling ="no" noresize>
<frameset cols="25%,75%">
<frame src="menu.html"scrolling ="no" noresize>
<frame src="content.html" name="main"scrolling ="no" noresize>
</frameset>
<frame src="footer.html" noresize>
</frameset>

[посмотреть пример]

○ что делать если фреймы не поддерживаются браузером?

Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег <noframes> вовнутрь конструкции <frameset>:

<frameset rows="15%,*,15%">
<noframes>УПС! Ваш браузер не поддерживает фреймы.</noframes>
<frame src="top.html" scrolling ="no" noresize>
<frameset cols="25%,75%">
<frame src="menu.html"scrolling ="no" noresize>
<frame src="content.html" name="main"scrolling ="no" noresize>
</frameset>
<frame src="footer.html" noresize>
</frameset>

○ Плавающий фрейм

Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»

<iframe src="http://stepkinblog.ru/"></iframe>

* атрибуты тега «iframe»

src - путь к открываемой странице
width - ширина плавающего фрейма
height - высота плавающего фрейма
scrolling - полоса прокрутки
- no - никогда не показывать полосу прокрутки
- yes - всегда показывать
- auto - показывать при необходимости
align - выравнивание плавающего фрейма
- left – слева
- right – справа
- top – выше
- bottom – ниже
frameborder - рамка вокруг плавающего фрейма
- 1 - включить рамку
- 0- выключить рамку

Вот так будет выглядеть тег «iframe» с атрибутами:

<iframe src=" http://stepkinblog.ru/" width="350" height="300" align ="left" scrolling="no" frameborder="1"></iframe>

Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.» между тегами <iframe></iframe>.
Это будет выглядеть вот так:

<iframe src=" http://stepkinblog.ru/" width="350" height="300" align ="left" scrolling="no" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe>

Для примера давайте добавим к файлу «content.html» плавающий фрейм:

<html>
<head>
<title>Главная страница</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h1>Главная страница</h1>
Содержимое сайта - "Главная страница (content.html)"
<iframe src=" http://stepkinblog.ru/" width="250" height="250" align ="left" scrolling="auto" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe>
</body>
</html>

[посмотреть пример]

StepkinBlog.ru

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Случайные записи:

Последние записи рубрики:

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на
2019 год:

Облако меток:

Статистика:

StepkinBlog.ru

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Случайные записи:

Последние записи рубрики:

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на 2019 год:

Облако меток:

Статистика:

Мои цели на
2019 год: