|
HTML - основы
Хождение по фреймам
Для начала поговорим зачем фреймы вообще нужны.
Их используют для того что бы открывать в одном окне браузера сразу несколько документом. Допустим слева открываться страница с меню, вверху логотип а с права основная часть.
К практике.
1) Итак, чтобы вставить несколько документов в одно окошко, необходимо создать файл где бы мы указали какие конкретно документы нужно отрыть и в каких пропорциях.
Создадим папку frame.А в ней создадим файл frame.html.
2) В фрейм-документах вместо тега body, мы используем тег frameset.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset>
</frameset>
</html>
3) Допусти мы хотим разбить наше окно на две части. В левой части мы расположи меню и в правой будет располагаться основная часть.
Мы должны написать, что наше окно делится на два фрейма. Сделаем это атрибутом cols, а в качестве значений укажем какой ширины в пикселях они должны быть. Значения записываться через запятую.
P.S. Ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна (напр. <frameset cols="25%,75%">)
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*">
</frameset>
</html>
Вы спросите, что за загадочная звездочка. Она показывает, что второй фрейм будет занимать все оставшееся место.
В нашем примере мы задали ширину первого фрейма равную 150 пикселей, а второй фрейм будет занимать все оставшееся место.
4) Теперь необходимо задать какие документы нужно открывать в наших фреймах.
Сделаем это с помощью тега frame. Адрес документов указываем с помощью атрибута src.
(Вставьте этот HTML-код в ранее созданный файл frame.html и посмотрите в окне браузера что вышло, мы видим 2 фрейма)
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
В первом, узком фрейме будет открываться файл menu.html, а в большом фрейме будет открывать файл content.html.
5) Создадим файлы: menu.html и content.html и разместим их в папке frame.
HTML-код для файла menu.html
<html>
<head>
</head>
<body>
<a href="content.html">главная </a>
<p><a href="me.html">автобиография</a>
<p><a href="link.html">ссылки</a>
</body>
</html>
HTML-код для файла content.html
<html>
<head>
</head>
<body>
<font color="#ff0000"> <h3 align ="center">Главная страница </h3> </font>
<p align ="justify"> Добрый день, усталый путник. Ты попал на личную страничку Василия Ивановича. Ну и т.д. и т.п. (придумайте сами, что ни будь)
</body>
</html>
Вставьте HTML-код в файлы и сохраните.
Теперь откройте файл frame.html. Комментарии излишни.
6) Проведите самостоятельно эксперимент и поменяйте атрибут у тега frameset с cols на rows. Результат очевиден.
При помощи rows мы разбиваем окно на горизонтальные фреймы и задаем какую высоту будет иметь каждый фрейм, при помощи cols разбиваем окно на вертикальные фреймы и задаем какую ширину будет иметь каждый фрейм.
Но это так к месту. А мы продолжим экспериментировать.
7) Создадим файлы на которое ссылается наше меню (me.html и link.html) и сохраним все в той же папке.
HTML-код для файла me.html
<html>
<head>
</head>
<body>
<font color="#ff0000"> <h3 align ="center">Автобиография </h3> </font>
<p align ="justify"> Я Василий Иванович родился в 1956 году, в селе Солнечное. Получил образование и поехал в Москву, где поступил в МГУ. Ну и так далее
</body>
</html>
HTML-код для файла link.html
<html>
<head>
</head>
<body>
<font color="#ff0000"> <h3 align ="center"> Cсылки </h3> </font>
<a target="_blank" href="http://www.netscape.com">ссылка на www.netscape.com </a><br>
<a target="_blank" href="http://www.microsoft.com">ссылка на www.microsoft.com </a><br>
</body>
</html>
8) Откройте файл frame.html и попробуйте нажить на одну из ссылок (автобиография, главная или ссылки). Документ открывается в том же фрейме. А нам конечно хотелось, что бы он открывался в большом фрейме.
Что бы документ открывался в другом фрейме нужно дать имя для того фрейма, в котором должна открываться ссылка (в нашем случае это большой фрейм). А сделаем это можно применяя атрибут name в теге frame. Наш фрейм мы назвали wild.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*">
<frame src="menu.html" >
<frame src="content.html" name="wind" >
</frameset>
</html>
9) А теперь вспомним наш файл с меню (menu.html).
Укажем в каждой ссылке атрибут target, а в качестве значения укажем имя нашего фрейма (target="wind").
Если перевести на человеческий язык, мы сказали что ссылки надо открывать в фрейме с именем wind.
<html>
<head>
</head>
<body>
<a href="content.html" target="wind">главная </a>
<p><a href="me.html" target="wind">автобиография</a>
<p><a href="link.html" target="wind">ссылки</a>
</body>
</html>
Теперь открываем файл frame.html. Жмем на ссылки. Все работает.
P.S. Иногда нужно что бы документ открывался во всем окне. При этом остальные фреймы уничтожаться. Для такой ситуации для ссылки используют атрибут target со значением _top.
Пример:
<a href="cat.html" target="_top">Кошки и их производные</a>
Далее рассмотрены и другие возможные значения у атрибута target.
10) Очень часто в одном фрейме делают меню с множеством ссылок, а в другом окне выводят информацию. И приходиться в каждой ссылке писать атрибут target, а в качестве значения указывать имя фрейма (напр. target="wind"). Если ссылок много, то это становиться трудным и нудным занятием.
Что бы этого не сделать нужно сделать так, что бы все ссылки из данного документа открывались в определенном фрейме. Делается это с помощью тега <base>. У него нет конечного тега, и вставляется он между тегами <head></head>. Смотрим, как это делается. Заметьте, что атрибут target пропал из ссылок.
<html>
<head>
<base target="wind">
</head>
<body>
<a href="content.html">главная </a>
<p><a href="me.html" >автобиография</a>
<p><a href="link.html" >ссылки</a>
</body>
</html>
Хождение по фреймам (Часть 2)
Продолжаем наше исследование.
Итак, теперь рассмотрим, что можно еще сделать с нашим примером.
1)Что бы избавиться от полосы прокрутки в маленьком фрейме вставим туда атрибут scrolling. У него есть 3 значения (no-полосы прокрутки не будет не при каких обстоятельствах; yes- полоса прокрутки будет всегда; auto- полоса прокрутки появиться только тогда, когда она нужна, используется по умолчанию). Мы возьмем значение no.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*">
<frame src="menu.html" scrolling="no" >
<frame src="content.html" name="wind" >
</frameset>
</html>
2) Размер рамок в пикселях задается атрибутом border.
Что бы избавиться от рамок вообще, нужно вставить атрибут border в тег frameset со значением 0.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*" border="0">
<frame src="menu.html" scrolling="no" >
<frame src="content.html" name="wind" >
</frameset>
</html>
Основные моменты мы рассмотрели, хотя еще остались атрибуты, которые мы не проработали. Их Вы можете попробовать применить и сами.
Далее рассматриваются все теги их атрибуты и значения относящиеся к фреймам.
Различные варианты расположения фреймов
А сейчас рассмотрим различные варианты расположения фреймов. И их создание.
Самые распространенные варианты мы видим на этой картинки. Хотя еще можно сделать массу вариантов.
1) Как создать 1-й вариант мы уже знаем (или догадываемся).
Вот HTML-код.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "100,150,*">
<frame src="logo.html" >
<frame src="menu.html" >
<frame src="content.html">
</frameset>
</html>
2) Как создать 2-й вариант мы тоже уже знаем..
Вот HTML-код.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset rows= "100,*,150">
<frame src="menu.html" >
<frame src="content.html">
<frame src="logo.html" >
</frameset>
</html>
3)Теперь рассмотрим, как сделать третий вариант.
Как мы помним мы можем делить окно только на вертикальные и горизонтальные фреймы.
Но, еще мы можем разбить горизонтальный фрейм на несколько вертикальных, а вертикальный фрейм на несколько горизонтальных.
Итак для начала сделаем вот такой вариант:
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset rows="100,*">
<frame src="logo.html" >
<frame src="content.html">
</frameset>
</html>
А теперь просто разобьем нижний фрейм (content) на 2 вертикальных фрейма. Для этого примени тег frameset. Смотрите как это делается.
Используя атрибут cols тэга <frameset></frameset> мы делим второй фрейм на два вертикальных фрейма (первый шириной 200 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame> (выделены синим цветом), определяют какие документы будут показаны в фреймах.
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset rows="100,*">
<frame src="logo.html" >
<frameset cols="200,*">
<frame src="menu.html" >
<frame src="content.html">
</frameset>
</frameset>
</html>
Вот, что у нас вышло
4) Что бы получить 4-й вариант мы поступим следующим образом:
Для начала сделаем такой вариант:
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "200,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
А теперь разобьем 1-й вертикальный фрейм на 2 горизонтальных.
Принцип действия такой же, как и в предыдущем варианте. Только там мы делили ряд на колонки, а здесь колонка делим на ряды.
Смотрим:
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "200,*">
<frameset rows="150,*">
<frame src="logo.html" >
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</html>
Вот и все.
Далее мы рассмотрим все теги, их атрибуты и значения. относящиеся к фреймам.
Теги, их атрибуты и значения которые можно отнести к фреймам
Рассмотрим возможные атрибуты у тега frameset.
ROWS-определяет количество и размеры горизонтальных фреймов в окне браузера. Значение задают список размеров фреймов через запятую. Значения можно задавать следующими способами:
в пикселях. Например: "75,25"
в процентах от высоты окна браузера. Например: "30%,30%,40%"
в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера.
Все три способа можно совмещать. Например, "25%,40,*" разобьет экран на три фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь.
COLS-определяет количество и размеры вертикальных фреймов в окне браузера. Значение задают список размеров фреймов через запятую. Размеры задаются так же, как и в параметре ROWS (см. ранее).
BORDER-определяет ширину рамок фреймов в пикселях.
FRAMEBORDER-определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:
Yes -отображать рамки;
No или 0-не отображать рамки;
Внимание !!!!!-Браузеры Netscape не поддерживают данный параметр, и для определения ширины рамок используйте атрибут BORDER.
FRAMESPACING-определяет расстояние между фреймами в пикселях. Он необходим для создания фреймов без рамок.
Рассмотрим возможные атрибуты у тега frame.
SRC-указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. Если он отсутствует, то будет отображен пустой фрейм.
NAME-определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра TARGET (описываемого ниже). В качестве значения нужно указать любое имя без пробелов с использованием цифр и латинских символов.
SCROLLING-определяет наличие или отсутствие полосы прокрутки. Могут применяться следующие значения:
no-полосы прокрутки не будет не при каких обстоятельствах.
yes-полоса прокрутки будет всегда.
auto-полоса прокрутки появиться только тогда, когда она нужна, используется по умолчанию.
NORESIZE-не позволяет изменять размеры фрейма. По умолчанию, размер фрейма можно изменить при помощи мыши (допустим как окно Windows) . NORESIZE отменяет данную возможность.
Данный параметр является флагом и не требует указания значения.
FRAMEBORDER-определяет наличие рамок у фрейма. Возможные значения:
Yes -отображать рамки;
No или 0-не отображать рамки;
Внимание !!!!!-Браузеры Netscape не поддерживают данный параметр и для определения ширины рамок используйте атрибут BORDER тега FRAMESET.
MARGINWIDTH-определяет ширину в пикселях правого и левого полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. Значение указывается в пикселях и не может быть меньше единицы.
MARGINHEIGHT- определяет ширину в пикселях нижнего и верхнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. Значение указывается в пикселях и не может быть меньше единицы.
Рассмотрим тег noframes.
Некоторые браузеры не могут отображать фреймы. И все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Тег noframes не имеет атрибутов и должен находиться внутри тега frameset.
Пример:
<html>
<head>
<title>Применяем фреймы </title>
</head>
<frameset cols= "150,*">
<noframes>Поменяй браузер, приятель.</noframes >
<frame src="menu.html" >
<frame src="content.html">
</frameset>
</html>
Рассмотрим атрибут target (он является одним из атрибутов ссылок, так же его можно применять в тегах: BASE, AREA и FORM)
target- определяет окно(фрейм), на которое указывает гипертекстовая ссылка.
В качестве значения необходимо задать либо имя одного из существующих фреймов (например target="wind" где wind это имя фрейма. Как это применять на практике смотри в разделе практика).
Или использовать одно из следующих зарезервированных имен:
_blank-данное значение определяет, что документ, полученный по ссылке будет отображаться, в новом окне браузера.
_self-данное значение определяет, что документ, полученный по ссылке должен отображаться в текущем фрейме.
_parent -указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. То есть, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм.
_top -указывает, что документ должен отображаться во всем окне. При этом остальные фреймы уничтожаться.
Фреймы, отрицательные и положительные стороны
Не что не обсуждается так горячо, как вопрос о фреймах. Некоторые категорически их не признают, а кто то относиться к ним весьма мирно. Хочу заметить что от некоторых отрицательных качеств фреймов, можно избавиться, применяя определенные спец. средства. Так что не такие уж они плохие, главное подойти ко всему умом.
Рассмотрим положительные и отрицательные качества фреймов.
Отрицательные качества:
- Недоступность материала для многих поисковых роботов
- Несовместимость с разными браузерами. Некоторые браузеры не отображают фреймов вообще или отображают их некорректно.
- Внутренние страницы нельзя добавить в "Избранное" (тут нужно отметить, что проделав ряд операций, все таки можно добавить в Избранное, но это доставляет некоторые неудобства). На какой бы странице не находился пользователь, адрес будет неизменным (то есть адрес сайта). И именно по этому невозможно добавить в избранное внутреннюю страницу, так как фреймы скрывают истинный адрес странички.
- Иногда фреймы выглядят не очень эстетично, и портят внешний вид сайта.
- Могут возникать проблемы связанные с тем, что истинный адрес странички скрыт, а пользователь не может понять, где именно он находится.
- Браузер не "запоминает" или совершает не корректно перемещения по фреймам.
- При попадании из вне (например, из поисковой системы) на Ваш сайт, но не на титульную страницу, то посетителю отобразится только страница для этого фрейма, а не всего сайта. (допустим не будет отображено меню сайта, и пользователь не будет знать куда ему идти дальше).
- Возможны неудобства в навигации
- Сайты созданные с фреймами считаться не очень солидными.
Положительные качества:
- Фреймы дают экономию в объеме пересылаемых пользователю файлов
- Независимость фреймов: при просмотри какого-либо фрейма другой фрейм всегда перед глазами
- Удобство позиционирования материала и графический вставок
- Изменение размеров областей. Можно изменять размеры фреймов "на лету", чего не позволяет сделать традиционная верстка HTML.
- Быстрота в добавлении нового материала. Для добавления нового раздела придется модифицировать только один файл - файл с навигационными элементами.
Реклама
|
