2018-01-21
1507
Верстка на основе frame, table, div. Основные отличия и недостатки
Фреймовая верстка
Использование фреймов позволяет объединить информацию с нескольких источников на одной странице. Верстка фреймами представляет собой страницу, разделенную на несколько логических областей, причем каждая область имеет собственный характер поведения. Для наглядности приведу пример использования верстки фреймами:
Данную страницу можно разделить на три логических части:
Главное меню (при желании логотип можно отделить)
Подменю (иначе говоря, меню Раздела)
Основная часть (тело) страницы. Информативная часть.
Выбрав Раздел, во вторую часть подгружается меню данного раздела:
Выбрав из подменю интересующую нас статью (страницу), в часть 3 подгружается информация:
Главный файл frame.html состоит из набора фреймов:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251;">
<title>Что такое фрейм?</title>
|
|
|
</head>
<frameset rows="120, *">
<frame src="mainmenu.html">
<frameset cols="200, *">
<frame src="blank.html" name="submenu" id="submenu" noresize>
<frame src="blank.html" name="page" id="page">
</frameset>
</frameset>
</html>
Из листинга видно, что вся страница разделена на две горизонтальные части. В первой части находится главное меню (mainmenu.html), а вторая часть поделена на две вертикальные части, в которых будет динамическое содержимое. Рассмотрим файл mainmenu.html.
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251;">
<title>Главное меню</title>
<link rel="stylesheet" href="styles.css">
</head>
<div style="display:inline;">
<div class="logo">
<div class="logoimg">ЛОГОТИП:)</div>
</div>
<div class="menu">
<div id="menu1"><a href="element1.html" class="mainmenu" target="submenu">Раздел I</a></div>
<div id="menu2"><a href="element2.html" class="mainmenu" target="submenu">Раздел II</a></div>
<div id="menu3"><a href="element3.html" class="mainmenu" target="submenu">Раздел III</a></div>
<div id="menu4"><a href="element4.html" class="mainmenu" target="submenu">Раздел IV</a></div>
<div id="menu5"><a href="element5.html" class="mainmenu" target="submenu">Раздел V</a></div>
<div id="menu6"><a href="element6.html" class="mainmenu" target="submenu">Раздел VI</a></div>
</div>
</body>
</html>
Обратите внимание на ссылки — они имеют привычный нам атрибут href, содержащий ссылку для перехода, но так же данный элемент имеет атрибут target (цель). Этот атрибут и содержит название фрейма, куда будет передано содержимое по ссылке. Если вернуться к листингу 2, там можно увидеть, что фреймы с динамичным содержимым имеют атрибут name, отвечающий за имя элемента на который ссылается target элемента а.
|
|
|
Аналогично устроен файл element1.html подгружающий в фрейм page содержимое.
Как и у всех остальных типов верстки, у фреймов есть свои плюсы и минусы.
Из достоинств стоит выделить:
Простота. С помощью фреймов веб-страница разграничивается на две области, которые содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Такое разделение веб-страницы на составляющие интуитивно понятно и логически обусловлено.
Быстрота. Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.
Размещение. Фреймы предоставляют уникальную возможность — размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера и независимо от прокручивания содержимого, эта область не изменит своего положения.
Изменение размеров областей. Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.
Загрузка. Загрузка веб-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.
И в то же время, эта верстка имеет весомые минусы:
Навигация. Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
Плохая индексация поисковыми системами. Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы.
Внутренние страницы нельзя добавить в «Избранное» («Закладки»). Фреймы скрывают адрес страницы, на которой находится посетитель, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
Несовместимость с разными браузерами. Параметры фреймов обладают свойством совершенно по разному отображаться в различных браузерах. Причем противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно по-своему.
Непрестижность. Весьма странный недостаток, который не имеет никакого отношения к техническим особенностям создания сайта, а носит скорее идеологический характер. Сайты с фреймами считаются несолидными, а их авторы сразу выпадают из разряда профессионалов, которые никогда не используют фреймы в своих работах. Исключение составляют чаты, где без фреймов обойтись хотя можно, но достаточно хитрыми методами, а с помощью фреймов создавать чаты достаточно просто.
Таблицы
Табличная верстка нынче совсем не в почете. Буквально на каждом углу кричат, что надо переходить к верстке с помощью слоев, потому что это соответствует стандартам, правильнее и вообще «лучше». Почему слои лучше таблиц обычно не сообщают, так что приходится либо верить на слово, либо решать дилемму самостоятельно. Поэтому попытаемся объективно решить, что же представляют собой таблицы, где их следует применять, а где не стоит.
|
|
|
Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда они используются для верстки. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.
Преимущества таблиц
Таблицы довольно долго властвовали в области верстки, поскольку предлагали достаточно простые методы для размещения разных элементов на веб-странице при отсутствии явных конкурентов. Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц. И на этом список не заканчивается, далее рассмотрены и другие плюсы таблиц.
Создание колонок
Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках, разделяя их тем самым. Таблицы же хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.
«Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.
|
|
|
Фоновые рисунки
В ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.
