Фреймовая структура

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

Каждый сайт html состоит из следующих элементов:

- Шапка сайта html . Располагается вверху сайта и содержит в себе какую-то картинку и надпись, соответствующую тематике сайта. Пример можете посмотреть, подняв глаза вверх этой страницы. Надпись располагать не обязательно. Это на Ваше усмотрение.

- Меню сайта html . Размещается слева или справа от основного контекста и содержит в себе ссылки работа на дому на другие страницы сайта. Также меню сайта html может располагаться вверху. Пример размещения меню Вы также можете наблюдать на данной странице.

- В центре обычно располагается основной контекст html с информационным материалом той или иной тематики.

- Подвал сайта html . Находится внизу страницы. Там Вы можете прописать свои авторские права, год издания сайта или поместить другую информацию или ссылки.

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

Фреймы — это файловая структура, позволяющая разделить окно просмотра браузера на несколько полноценно работающих частей (фреймов), каждая из которых выводит свой HTML-документ. Каждый фрейм независим друг от друга и является самостоятельной WEB-страницей со своим электронным адресом.
Так как в документах, содержащих фреймы, вместо контейнера BODY используется контейнер FRAMESET, то нам придётся создать новый документ html:

<html>
<head>
<title>содерхание сайта</title>
</head>
<frameset></frameset>
</html>

Внутри контейнера <frameset></frameset> прописываем, теги html <frame>, которые определяют содержимое фреймов и их количество.
С помощью атрибутов для <frameset> rows и cols можно задавать расположение фреймов на web-странице. Вы можете расположить фреймы горизонтально, вертикально или комбинировано. Всё зависит от Вашей фантазии. Мой Вам совет. С начало набросайте на листочке схематичный план расположение элементов, о которых я говорил выше, а уже после этого приступайте к созданию HTML страницы.

rows – определяет количество горизонтальных фреймов.
cols — определяет количество вертикальных фреймов.

Разберём все три варианта по очереди.

В начале расположим фреймы вертикально. Код HTML будет выглядеть так:

<html>
<head>
<title>содерхание сайта</title>
</head>
<frameset cols="150, *, 200">
<frame src="ссылка на меню">
<frame src="ссылка на контекст">
<frame src="ссылка на рекламный блок">
</frameset>
</html>

посмотреть результат

Как видите, у нас получилось три вертикальных столбца (фрейма). Это мы сделали благодаря атрибуту cols прописанному в тэге <frameset>. Также для него мы задали ширину каждого фрейма. Ширина первого фрейма150, третьего — 150, а второй занимает все оставшееся пространство, символ “*”. Звездочка означает занять все оставшееся место на экране. Здесь мы задали параметры для cols в пикселях. Ещё можно задавать ширину или высоту в процентах. Например:

<frameset cols=»25%, *, 30%»>

Для параметра cols в данном примере мы задали три вложенных фрейма.
У первого ширина будет 25% от всей ширины экрана. У третьего 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Сумма трёх фреймов должна быть 100%.

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

<frameset cols=»65, *, 35 %»>

Для параметра cols в данном примере мы задали три вложенных фрейма.
У первого ширина будет 65 пикселей. У третьего 35% от всей ширины экрана. А второй фрейм займет все оставшееся место.
Теперь разберём пример с горизонтальным расположением фреймов. Для этого просто поменяем атрибут для <frameset> cols на rows.

<html>
<head>
<title>содерхание сайта</title>
</head>
<frameset rows="150, *, 200">
<frame src="ссылка на меню">
<frame src="ссылка на контекст">
<frame src="ссылка на рекламный блок">
</frameset>
</html>

посмотреть результат

Как мы видим, расположение наших фреймов изменилось. Теперь они расположены горизонтально.

Комбинированный вариант для фреймов, это использование атрибутов rows и cols одновременно применительно к одному тэгу <frameset>. Создадим фреймовую структуру для расположения всех элементов создания сайта, описанных мной в начале повествования о фреймах. Код html будет выглядеть так:

<html>
<head>
<title>содерхание сайта</title>
</head>
<frameset rows="150, *, 100">
<frame src="ссылка на шапку сайта">
<frameset cols="20%,*">
<frame src="ссылка на меню">
<frame src="ссылка на основной контекст">
</frameset>
<frame src="ссылка на подвал сайта">
</frameset>
</html>

посмотреть результат

Теперь подробнее, как у нас получился такой код. В начале мы делим страницу на три горизонтальных фрейма с помощью атрибута rows для тега <frameset>

<frameset rows=»150,*,100″>

Далее мы прописываем первый фрейм и третий фрейм:

<frameset rows=»150,*,100″>
<frame src=»
ссылка на шапку сайта«>
<frame src=»
ссылка на подвал сайта«>
</frameset>

Второй фрейм мы разбили на две колонки. Для того чтобы расположить эти две колонки во втором фрейме, нам необходимо вместо тега <frame> вставить ещё один контейнер <frameset>…</frameset> и расположить в нём эти две колонки с прописанными двумя фреймами. Код html будет выглядеть так:

<frameset rows=»150, *, 100″>
<frame src=»
ссылка на шапку сайта«>
<frameset cols=»20%,*»>
<frame src=»
ссылка на меню«>
<frame src=»
ссылка на основной контекст«>
</frameset>
<frame src=»
ссылка на подвал сайта«>
</frameset>

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

Поделиться в соц. сетях

Фреймовая структура
Фреймовая структура
Фреймовая структура
Фреймовая структура
Фреймовая структура
Фреймовая структура

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика