HTML
.pdf
Макет из трех колонок.
Табличная верстка
<style type="text/css"> TABLE { width: 100%; } TD { vertical-align: top; }
#col1 { width: 150px; background: #fc0; } #col2 { width: 60%; background: #afccdb; } #col3 { width: 40%; background: #fc0; } #col1, #col2, #col3 { padding: 5px; } </style>
<body>
<table cellpadding="0" cellspacing="0"> <tr>
<td id="col1">Колонка 1</td> <td>
<table cellpadding="0" cellspacing="0"> <tr>
<td id="col2">Колонка 2</td> <td id="col3">Колонка 3</td> </tr>
</table>
</td>
</tr>
</table>
</body>
Склейка изображений
Предварительно подготовленный рисунок разрезают на части в графическом редакторе, сохраняют их как отдельные графические изображения, а затем соединяют их вместе с помощью таблицы.
●Создание меню(ссылок)
●Создание декоративных элементов
●Уменьшение объема файлов
<table width="400" border="0" cellspacing="0" cellpadding="0"> <tr>
<td height="13" width="12"><img src="images/01.gif" width="12" height="13" alt=""></td> <td style="background: url(images/02.gif)" height="13"></td>
<td height="13" width="14"><img src="images/03.gif" width="14" height="13" alt=""></td> </tr>
<tr>
<td style="background: url(images/04.gif)"></td> <td id="content">Содержимое</td>
<td style="background: url(images/06.gif)"></td> </tr>
<tr>
<td height="13"><img src="images/07.gif" height="13" alt=""></td> <td style="background: url(images/08.gif)"></td>
<td height="13"><img src="images/09.gif" height="13" alt=""></td> </tr>
</table>
Табличная верстка(недостатки)
Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени.
Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров.
За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами
Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет
действительно просто и удобно управлять видом отдельных компонентов страницы.
Таблицы нужны для размещения табличных данных, все остальные варианты использования не соответсвуют стандартам.
Фреймы
Фреймы разделяют окно браузера на отдельные области, расположенные рядом друг с другом. В каждую из таких областей загружается самостоятельная веб-страница.
С помощью фреймов веб-страница разграничивается на несколько областей, которые содержат навигацию по сайту и различный контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме.
Так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.
Размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера и независимо от прокручивания содержимого, эта область не изменит своего положения.
Загрузка веб-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.
Тег <frameset>
Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область.
Синтаксис
<frameset>
<frame>
</frameset>
Атрибуты
border Толщина границы между фреймами. bordercolor Цвет линии границы.
cols Устанавливает ширину или пропорции фреймов в виде колонок. frameborder Определяет, отображать рамку вокруг фрейма или нет. framespacing Аналог атрибута border, задает ширину границы. rows Задает размер или пропорции фреймов в виде строк.
Тег <frame>
Синтаксис
<frameset>
<frame>
</frameset>
Атрибуты
bordercolor Цвет линии границы.
frameborder Отображать рамку вокруг фрейма или нет. name Задает уникальное имя фрейма.
noresize Определяет, можно изменять размер фрейма пользователю или нет. scrolling Способ отображения полосы прокрутки во фрейме.
src Путь к файлу, предназначенному для загрузки во фрейме.
Создание фреймов
В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.
<!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=utf-8"> <title>Фреймы</title>
</head>
<frameset cols="100,*"> <frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>
Создание фреймов
В теге <frame> задается имя HTMLфайла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html , а в правое — content.html. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.
Файл menu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Навигация по сайту</title> </head>
<body style="background: #f0f0f0"> <p>МЕНЮ</p>
</body>
</html>
Ссылки во фреймах
При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Навигация по сайту</title> </head>
<body style="background: #f0f0f0"> <p>МЕНЮ</p>
<p>
<a href="text.html" target="CONTENT">Текст</a> </p>
</body>
</html>
Встраиваемые фреймы
Тег <iframe> создает встраиваемый фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Плавающий фрейм</title> </head>
<body>
<p><a href="rgb.html" target="color">RGB</a> | <a href="cmyk.html" target="color">CMYK</a> | <a href="hsb.html" target="color">HSB</a></p>
<p><iframe src="content.html" name="color" width="100%" height="200"></iframe></p> </body>
</html>