Выпуск №14. Фреймы в HTML

фрейм

Всем доброго времени суток! С Вами Бернацкий Андрей.

Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:

Видео версия 14 урока

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

фреймы

На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с контактной информацией. Вот вкратце что такое фреймы.

Теперь рассмотрим, как это все можно осуществить.

Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера BODY. Вместо него используется контейнер FRAMESET. Общий синтаксис фреймов выглядит следующим образом:

<html>
<head>…</head>
<frameset>….</frameset>
</html>

В контейнере <frameset>….</frameset> располагаются теги <frame />, которые определяют содержимое фреймов.

У тега <frameset> есть два параметра:

rows = число – количество строк (горизонтальных подокон).

cols = число – количество столбцов (вертикальных подокон).

Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.

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

frame

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

<frameset cols="30%,*,30%">
<frame src="../Урок 13/index.html" />
<frame src="//www.mail.ru" />
<frame src="../Урок11/index.html" />
</frameset>

В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ "*"(звездочка) означает занять все оставшееся место на экране.

Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:

Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.

Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.

Можно задавать размер фрейма символом “*” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например <frameset cols="20%,*,*">, то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).

Можно комбинировать варианты задания размеров фреймов в HTML. Например:

<frameset cols="70,*,40%">

Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.

С первой строкой кода разобрались полностью. Идем дальше.

Далее следуют теги <frame src="url" />. Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов <frame /> должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.

И в последней строке закрывается контейнер </frameset>.

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

<frameset rows="30%,*,30%">
<frame src="../Урок 13/index.html" />
<frame src="../Урок 12/index.html" />
<frame src="../Урок 11/index.html" />
</frameset>

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

У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере.

В браузере мы видим три страницы, каждая из которых находится в своем фрейме.

При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов frame и frameset.

Параметры тегов frame и frameset:

src ="url" – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.

noresize – отменяет возможность изменения размеров. Используется только для frame.

scrolling="yes/no/auto" – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame.

name="frame-name" – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame.

border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.

framespacing="число" – расстояние между фреймами. Используется только для frameset.

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

<frameset cols="30%,*,30%" border="0">
<frame src="../Урок 13/index.html" noresize="noresize” />
<frame src="../Урок 12/index.html" noresize="noresize" scrolling="no" />
<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

Есть еще несколько параметров, но они не однозначно работают, поэтому я считаю целесообразным их даже не упоминать в выпуске.

Пожалуй, с параметрами все. Рассмотрели на примере как их применять.

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

frame

Для этого, создаем структуру из трех фреймов с разбиением по вертикали.

Пишем:

<frameset rows="100,*,70" border="0">

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

Далее описываем первый фрейм. Это будет меню и логотип сайта.

<frame src="../Урок 13/index.html" noresize="noresize" />

Далее во второй строке у нас идет три колонки, и каждая со своим адресом страницы.

Соответственно, вместо тега <frame />, мы должны вставить еще один контейнер <frameset>..</frameset> с тремя столбцами, и в каждый записать свой адрес страницы. Видите, ничего сложного, мы просто вместо тега <frame /> вставляем новый, нужный нам, контейнер <frameset>..</frameset>.

<frameset cols="20%,*,20%">
<frame src="../урок 7/lesson7.html" />
<frame src="../урок3/Untitled-1.html" />
<frame src="../урок1/lesson1.html" />
</frameset>

После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер </frameset>

<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

Полный код данной страницы приведен ниже:

<frameset rows="100,*,70" border="0">
<frame src="../Урок 13/index.html" noresize="noresize" />
<frameset cols="20%,*,20%">
<frame src="../урок 7/lesson7.html" />
<frame src="../урок3/Untitled-1.html" />
<frame src="../урок1/lesson1.html" />
</frameset>
<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

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

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

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

Создадим фрейм следующего вида:

frame

В левом фрейме, будут располагаться наши ссылки. А в правом – страницы на которые ведут эти ссылки.

Создаем такой фрейм:

<frameset cols="100,*" border="0">
<frame src="ind2.html" noresize="noresize" />
<frame src="ind3.html" name="fram1" />
</frameset>

Здесь, надеюсь все понятно. Единственный момент – это у второго фрейма параметр name="fram1". Именно значение параметра name мы и будем использовать в дальнейшем. Запомним его.

Теперь создаем документ ind2.html. в нем будет располагаться наш набор ссылок. В общем — это обычный html документ, только у ссылок, мы укажем параметр target и в качестве значение этому параметру укажем имя нашего фрейма — "fram1". То есть:

<a href="http://www.webformyself.com" target="fram1"> on webformyself.com</a> <br />
<a href="http://www.mail.ru" target="fram1"> on mail.ru</a> <br />
<a href="http://www.google.ru" target="fram1"> on google.ru</a>

Создадим документ ind3.html. Можно его оставить пустым, а можно в нем расположить то, что вы хотите видеть на начальной странице.

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

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

Тег <iframe></iframe>. В контейнер <iframe></iframe> обычно пишется информация о том, что браузер фреймы не поддерживает. Если браузер поддерживает фреймы, то данная информация игнорируется. Контейнер <iframe></iframe> ставится внутри html документа, в любое место, куда захочется или это требуется. В параметре src указывается адрес страницы, которая будет загружаться во фрейм. Например, поставим во второй выпуск рассылки сайт webformyself.com. Для этого в любом месте html документа второго выпуска напишем:

<iframe src="//www.webformyself.com"
width="800" height="500" align="left">Вашим браузером фреймы не поддерживаются!</iframe>

У тега <iframe> есть ряд параметров. Некоторые из них вы видите в данном коде. Почти все они такие же, как и у тега <img />.

Итак параметры тега <iframe>:

align — определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Значения те же, что и для тега img.

frameborder — устанавливает, отображать границу вокруг фрейма или нет.

height — высота фрейма.

hspace — горизонтальный отступ от фрейма до окружающего контента.

name — имя фрейма.

scrolling — способ отображения полосы прокрутки во фрейме.

src — путь к файлу, содержимое которого будет загружаться во фрейм.

vspace — вертикальный отступ от фрейма до окружающего контента.

width — ширина фрейма.

На этом, выпуск посвящённый фреймам в HTML, я завершаю. До скорых встреч. Пока – пока!

Напоминаю Вам о том, что Вы можете скачать видео версии данного урока себе на компьютер по ссылке:

Видео версия 14 урока

Автор: Андрей Бернацкий.

киберсант-вебмастер

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (21)

  1. Maya

    Здравствуйте, Андрей! Я «прослушала» Ваш весь курс, спасибо Вам за Вашу работу. Все это очень интересно и полезно, особенно для начинающих. Будем двигаться дальше. А Вам успехов и удачи!

  2. Вадим

    Супер. Буквально все полочкам. В таком же духе)))
    Вадим.

  3. Ekaterina

    Если честно, когда я первый раз подписалась на вашу рассылку мне не понравилось, я ничего не понимала, видео у меня не скачивалось, ссылки не работали. А теперь я могу сказать вам Андрей, большое спасибо, я начала потихоньку осваивать эту науку и с уважением и признательностью относится к вам и вашей работе. Успехов вам!

  4. Катя

    Подскажите как сделать один скролл на всю страницу, а не на каждый фрейм?

  5. Юрий Рузаев

    Доброго здравия, Андрей! Извини, что не на все уроки оставляю комментарии, это связано с временными, небольшими, техническими проблемками, которые в ближайшее время, я надеюсь, будут устранены. Что касается уроков, то скажу честно, всё изложено в доступной и понятной форме. В данный момент, я нахожусь в состоянии так называемой «губки»
    и образно говоря, впитываю любую информацию, поступающую от тебя. Огромное спасибо за всё! Желаю успехов и главное здоровья и хорошего настроения! С искренним уважением, Юрий.

  6. Мархабо

    Прослушала очередной урок ,очень интересно.Спасибо вам,Андрей,за ваш труд.

  7. Василь

    Андрей, час добрый!

    не совсем ясно отличие Frame и iframe…

    на сколько я понял функциональность у этих тегов одинаковая, только у iframe есть возможность написать что то типа — Вашим браузером фреймы не поддерживаются!

    растолкуйте пожалуйста

    Спасибо!

  8. Алексей

    Хороший урок, действительно всё по полочкам. Спасибо!

  9. Владимир. 61 год.

    Спасибо за урок по фреймам. Текстовая версия понравилась больше чем видео. Видео, растянута по времени, которого у нас так не хватает. Все свои сайты я делаю во фреймах, несмотря на ту, многолетнюю абструкцию, которой была подвергута данная технология. Иначе, фреймовая технология шагнула бы далеко вперёд. У фреймов есть не только недостатки, которые на слуху, но они преодолимы, но и преимущества, которые почему-то, замалчиваются. Удачи всем!

    • Andrey Bernacki

      Я для себя у фреймов выделил два основных недостатка:

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

      2. Каждый фрейм загружает в себя отдельный файл или URL. Соответственно сколько фреймов — столько файлов грузиться на компьютер клиента с вашим сайтом — столько запросов идет на сервер. А мой сайт на той же, допустим, табличной верстке требует один запрос на сервер. Соответственно загрузится он быстрее вашего.

      Вот собственно эти два недостатка, которые я выделил для себя.

      • Владимир. 61 год.

        По пункту 1. Это уже несколько лет как перестало быть недостатком. Современные поисковики успешно индексируют фреймовые структуры. Далеко за примерами ходить не надо. Наберите в популярных поисковиках запрос, по которому с большой вероятностью производится поиск: «Федерация велоспорта», и вы увидите мой сайт в первой десятке. В непопулярных, он тоже в зоне находимости. При этом, специально продвижением сайта я не занимался.

        По пункту 2. Сайт грузится быстро, потому что размеры файлов маленькие. Далее, при переключении пунктов меню загружается чаще всего только один фрейм, а все остальные уже загруженны. При табличной верстке происходит следующее: пока таблица полностью не загрузится, содержимое её не начнёт отображаться. Поэтому, пока таблица грузится, пользователь ничего не видит.

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

        Большинство из нас жертвы той бодяги вокруг фреймов, которую давно развел Майкрософт во времена жесткой конкуренции Explorer-а и Netscape-Navigator-a.

  10. Leo

    Фреймовая структура устарела, лучше вообше не начинать ее осваивать, а сразу изучать современные технологии создания сайтов (начните с блочной верстки, так как с таблицами по-любому придется столкнуться). Потом труднее будет «перевоспитываться». имхо, автор респект за экскурс!

  11. Александр

    Здравствуйте, многоуважаемый Андрей!
    Спасибо Вам за ЗАМЕЧАТЕЛЬНЫЕ уроки и, что не менее важно, замечательное изложение и последовательность. Безусловно, без этих начальных (что особенно важно) знаний, невозможно правильно понимать строительство сайта в принципе… Вы эту возможность очень хорошо предоставили. Еще раз — СПАСИБО БОЛЬШОЕ!

  12. Станислав

    Андрей! Спасибо за полезную, доходчивую информацию. А Вам успехов, удачи и исполнения поставленных целей.

  13. Роза

    Спасибо за урок. Всё понятно. Новых вам успехов в вашем труде.

  14. Наталья

    Спасибо, Андрей за уроки. :)

  15. Даврон

    2011 в 09:00

    Спасибо за уроки.

  16. Любовь Островская

    Андрей спасибо! Самое главное, что получается, правда не всё сразу, не всё запоминаешь,
    но результат есть, хоть и малентький.

  17. Ольга

    Андрей!
    Огромное спасибо! дилетант, но сайт у меня есть. Делала руками, как понимала. У Вас нашла очень много нового и интересного.
    Если не трудно помогите советом. Может письмом?
    Сайт очень рейтинговый. Как получилось-не знаю. Ничего не предпринимала. Даёт небольшой заработок могла бы много больше. Но программа очень устарела, а менять .html не могу из-за поисковиков. Сайт большой, но и дизайн менять не могу, и рекламу ,и изменения приходится заводить на каждой странице. Продолжать трудно, хотела бросить , изучаю WP, но люди ходят и жалко, любимый сайт. Что делать?

    • Andrey Bernacki

      Я так понимаю сайт статичный на чистом HTML. Что-тут посоветуешь, нужно переводить на какую-нибудь ЦМС — вордпресс или джумлу, смотря какая больше для вашего сайта подходит. Если ваш сайт вот этот nearyou.ru, то я бы его не бросал. Интересный сайт, сам на нем час отсидел. Погулял так казать по музеям Европы)). Картинки можно завернуть в галереи на jQuery, красивенько все оформить, отмучится один раз — перенести все на ЦМС и продолжать вести сайт. Дизайн ведь не проблема, его можно перенести и на цмс…

  18. людмила

    Андрей!Огромное спасибо за Ваш труд!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree