HTML. Урок 5 (фреймы, линии,карты)



п.1 Иногда нужно сделать страницу из двух частей так, чтобы одна часть была неподвижной и не менялась, а вторая прокручивалась и при нажатии кнопки обновлялась. Обычно это делают для меню. Слева неподвижное меню с кнопками. При нажатии на них в правой части меняется содержимое. Такая функция называется фреймы. Это очень плохо для раскрутки сайтов, поэтому ее сейчас практически не используют, только в самых крайних случаях. Сейчас не 90-е, диалап умер и отрисовка меню на новой странице не сильно влияет на объем трафика и скорость загрузки страницы. Но про тег расскажу. Выглядят фреймы так:

<frameset>

<frame name="menu">

<frame name="page">

 </frameset>

. Сначала мы задаем контейнер, внутри которого идет описание полей. Страница с фреймами не должна содержать тега-контейнера "body". Сначала идет тип документа (<html>), потом заголовки (<head>) и сразу описание фреймов. В теге "frameset" указывается параметр, определяющий ширину или высоту фреймов. В параметре "cols=" указаны через запятую параметры обоих фреймов в пикселах, в процентах или "*" - все доступное пространство. Мы можем сделать левый фрейм с меню шириной 300 пикселов, а правый фрейм - на всю оставшуюся ширину экрана:

<frameset cols="300px,*">

<frame name="menu">

<frame name="page">

 </frameset>

Или мы можем отдалть под меню 20% экрана. В этом случае, пераметры <frameset cols="20%,80%"> и <frameset cols="20%",оказываются равноценными. Если же мы хотим сделать вертикальную разбивку экрана, то используем параметр "rows=" вместо "cols=" .

Каждый фрейм можно разделить еще. К примеру саму страницу при вертикальном меню, еще разделить по горизонтали. А что же отображать внутри фреймов? Страницы, указываемые в параметре "src":

<frameset cols="300px,*">

<frame name="menu"  src="menu.php">

<frame name="page"  src="page.php">

 </frameset>

Создали мы страницу, медленно и печально нажимаем кнопку меню. WTF??? Содержимое ссылки заменило само меню, а не соседний фрейм! WTF??? WTF??? WTF??? 

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

<a href="main.html" target="page">главная</a>

<a href="contacts.html" target="page">контакты</a>

 <a href="backlink.html" target="page">обратная связь</a>

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

<iframe src="http://xxx.php" height="600px" width="900px" name="iframe_map" >...</iframe>

Страница, которая загружена в этот фрейм, указана в параметре src.  Далее идут высота и ширина, далее имя. У него есть кучка параметров типа отступов от текста и границ экрана. Но умные люди ими пользоваться не будут, поэтому нефиг голову забивать. 

п.3. Если вам нужна горизонтальная линия для разделения текста, поставьте тег "<hr>". Закрывающая часть не требуется. Отступы, ширина, цвет и т.д. установите потом через стили CSS.

п.4. Есть еще забавный тег - "<map>" для создания карт. У вас есть картинка, разные части которой ссылаются на разные страницы. В простейшем (и нерабочем) виде карта выглядит так:

<map  name="Navigation">

<area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">

<area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">

<area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">

</map>

В теге "area" мы сначала указываем тип области: круг (circle), многоугольник (poly) или прямоугольник (rect). Потом идут координаты, ссылка на конкретную страницу и текст, который появится при наведении мышки на активную область. Вещь абсолюно неудобная, можно использовать кучу других решений, здесь  представлена для общего кругозора.

п.5. Есть еще несколько тегов из html5, которые отвечают за правильность индексирования страницы. Вам на этом пока рано заморачиваться, расскажу позже. Следующий урок - по таблицам стилей CSS.

А пока сделайте тестовое задание.

1. Нужна форма регистрации. Поля для ввода информации: Фамилия, имя отчество. Для пола сделайте радиобуттон с выбором м или ж. Электронную почту, телефон. Выбор города сделайте из выпадающего списка (штук 5-10 для наглядности). Хобби сделайте выбором в виде чекбоксов, чтобы можно было выбрать несколько вариантов.

2. Сделайте страничку "о компании". Накидайте маленькую "рыбу" с любым текстом, сделайте перечисление с помощью нумерованных и не нумерованных списков. Накидайте Картинок, ссылок, полосок.

3. Сделайте прайс-лист. Не стесняйтесь, сделайте позабористей, с объединенными строками и столбцами.

Когда будете готовы показать результат - свистите мне в вайбер. Дам вам на хостинге учетку с ftp, зальете туда, полюбуемся. 

Чтобы интереснее было играться со ссылками и формами, сделал страничку http://technorat.ru/html-learn/showvar.php

В своих формах можете указать <form action="http://technorat.ru/html-learn/showvar.php" method="GET"> или <form action="http://technorat.ru/html-learn/showvar.php" method="POST"> и посмотреть, какие переменные были переданы на страницу. Это важно для последующей обработки данных скриптами и движком сайта. Указать метод передачи "GET" - это все равно, что передать данные с помощью обычной ссылки: <a href="http://technorat.ru/html-learn/showvar.php?id=39&width=900px">текст</a>

Можете просто вбить адрес http://technorat.ru/html-learn/showvar.php?id=39&width=900px в браузер и пройти по ссылке.