Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

07.12.2015


15:10


8420


пока нет

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

Как создать фреймы в 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 - горизонтально

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

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

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

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

<frameset cols="30%,*">

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

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

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

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

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

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

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

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

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

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

тег 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>

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

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

* Атрибуты тега  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»]

Правда, так лучше? :cool:
Для любого фрейма пропишите атрибут «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"»

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

ПРАКТИКА

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

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

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

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

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

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

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

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

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

Теперь между «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>

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



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

  1. Бесплатный курс по основам CSS
  2. Изображение. Основы bootstrap 3 для начинающих. Урок №15
  3. Вкладки. Основы bootstrap 3 для начинающих. Урок №21
  4. Коды цвета в CSS - / R G B / HTML. Основы CSS для начинающих. Урок №7
  5. Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19

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

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Подпишись на обновления моего блога через e-m@il:

@

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

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 90
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 132


Яндекс.Метрика