Закрыть ... [X]

Как сделать фреймы в html

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


07.12.2015


15:10


14858


пока нет


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

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

Предыдущая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15 Следующая запись
Тег div в HTML. Основы HTML для начинающих. Урок №17

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


Источник: http://stepkinblog.ru/html/kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhix-urok-16.html/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Что такое фреймы (iframe) в HTML примеры как сделать и вставить фрейм Мягкая мебель мастер класс

Как сделать фреймы в html Как сделать фреймы в html Как сделать фреймы в html Как сделать фреймы в html Как сделать фреймы в html Как сделать фреймы в html Как сделать фреймы в html

ШОКИРУЮЩИЕ НОВОСТИ