Фреймы и таблицы в ваших страницах

div.main {margin-left: 20pt; margin-right: 20pt} Фреймы и таблицы в ваших страницах

Итак, что же такое фрейм? Можно сказать, что это таблица, но каждую ячейку в неё вы заполняете из отдельного файла. Зачем, спросите вы? Ведь можно просто вставить информацию в ячейку таблицы, и всё будет красиво и удобно. С последним можно не согласиться. Так давайте же создадим небольшой набор страниц, сначала с использование таблиц, а затем сделаем то же самое с использованием фреймов. Что будет содержать наша страница: меню слева и саму страницу. Создаем таблицу, ну, допустим, с 5 строками и двумя колонками (будем считать, что у вас есть какой-нибудь WYSIWYG редактор, т.е. то, что вы будете создавать, тут же превратится в HTML код, а если у вас его нет, то пользуйтесь переведенным здесь кодом). Перед созданием кратко разберемся в тегах:

<table></table>теги, означающие начало и конец таблицы

<tr></tr>начало строки и конец строки

<td></td>начало и конец одного столбца в ячейке

Теперь уже может сделать таблицу даже в блокноте. Получаем: (я буду писать то, что находится между тегами <body> и </body>)

Теперь объединим ячейки во втором столбце:

здесь rowspan означает, что эта ячейка будет общей для 5 строк.

Теперь давайте заполним пустые ячейки таблицы:

<table width="100%">
<tr>
<td>Раздел 1 </td>
<td rowspan="5" width="50%">Текст в разделе 1</td>
</tr>
<tr>
<td>Раздел 2</td>
</tr>
<tr>
<td>Раздел 3</td>
</tr>
<tr>
<td>Раздел 4</td>
</tr>
<tr>
<td>Раздел 5</td>
</tr>
</table>

Теперь всё ещё понятнее, я думаю. Можно также сделать, чтобы, к примеру, левый столбец занимал 25% от всей таблицы, а правый соответственно 75%:

<table width="100%">
<tr>
<td width="25%">Раздел 1 </td>
<td rowspan="5" width="75%">Текст в разделе 1</td>
</tr>
<tr>
<td width="25%">Раздел 2</td>
</tr>
<tr>
<td width="25%">Раздел 3</td>
</tr>
<tr>
<td width="25%">Раздел 4</td>
</tr>
<tr>
<td width="25%">Раздел 5</td>
</tr>
</table>

Давайте создадим 5 файлов в одной папке, содержащие каждый из разделов и ссылки на другие. Имена файлов сделаем соответственно: для первого раздела — 1.html для второго — 2.html для четвертого — 4.html

Вот пример для файла 3.html:

<table width="100%">
<tr>
<td width="25%"><a href="3119.htmll">Раздел 1 </a></td>
<td rowspan="5" width="75%">
<p>Текст в разделе 3</p>
</td>
</tr>
<tr>
<td width="25%"><a href="3120.htmll">Раздел 2</a></td>
</tr>
<tr>
<td width="25%"><a href="3121.htmll">Раздел 3</a></td>
</tr>
<tr>
<td width="25%"><a href="3122.htmll">Раздел 4</a></td>
</tr>
<tr>
<td width="25%"><a href="3123.htmll">Раздел 5</a></td>
</tr>
</table>

Ссылку на третий раздел можно было и не ставить. Загрузите теперь любой из 5 файлов и походите по ссылкам — всё работает. А теперь посмотрите, сколько одинакового кода у нас появилось в пяти файлах. Да, всё меню имеет абсолютно одинаковый код. А если вам надо будет добавить шестой раздел в 100 страницах? Я думаю, этого вы уж делать не станете и бросите свою страницу. Так вот, одним из многих вариантов решения этой проблемы (и, наверное, самым удобным) являются фреймы. Вот простой пример с левым фреймом. Для начала создадим файл, содержащий только меню:

<table width="100%" border="1">
<tr>
<td>Раздел 1</td>
</tr>
<tr>
<td>Раздел 2</td>
</tr>
<tr>
<td>Раздел 3</td>
</tr>
<tr>
<td>Раздел 4</td>
</tr>
<tr>
<td height="31">Раздел 5</td>
</tr>
</table>

И пять файлов, содержащих текст для пяти соответствующих разделов. Имена файлов — такие же, как в предыдущих примерах. Вот пример для 3 раздела: Текст в разделе 3. Теперь делаем основной файл, называемый фреймсетом. А фреймы мы пропишем от тега <body>. Приведу файл полностью:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<frameset cols="150,0*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" noresize src="lframe.html">
<frame name="mainFrame" src="3121.htmll">
</frameset>
<noframes><body bgcolor="#FFFFFF">

</body></noframes>
</html>

Немного сложновато, но фреймы и не предназначены для написания в блокноте. Что отсюда можно понять? Что левый фрейм будет шириной 150. Что граница не будет видна. Что левый фрейм будет читаться из файла lframe.html и что у него невозможно будет изменить размеры. У основного фрейма будет файл 3.html, т.е. мы откроем третий раздел. Давайте теперь сделаем ссылки для того чтобы изменять основной фрейм. Да, именно так — нам не надо будет делать для каждого раздела отдельное меню! Оно будет общем для всех страниц. Вот так будет выглядеть файл, содержащий меню:

<table width="100%" border="1">
<tr>
<td><a href="3119.htmll" target="mainFrame">Раздел 1</a></td>
</tr>
<tr>
<td><a href="3120.htmll" target="mainFrame">Раздел 2</a></td>
</tr>
<tr>
<td height="14"><a href="3121.htmll" target="mainFrame">Раздел 3</a></td>
</tr>
<tr>
<td><a href="3122.htmll" target="mainFrame">Раздел 4</a></td>
</tr>
<tr>
<td height="31"><a href="3123.htmll" target="mainFrame">Раздел 5</a></td>
</tr>
</table>

Изменения незначительные — мы лишь указываем, что изменять надо фрейм с именем mainFrame. Загружаем фреймсет и щелкаем по ссылкам. Ура! Теперь на надо больше менять все эти меню вручную. Будем пользоваться фреймсетами. Фреймы — это часть языка HTML, и создавались они именно для таких целей. Настроек в таблицах и фреймах предостаточно, так что с их помощью можно сделать статичную страницу любой сложности. Без использования дополнительных технологий — это единственный способ таким образом организовать структуры (ну, кроме слоев, конечно, но они сложны для понимания — делать их всё-таки надо в специальной программе). О слоях, таблицах, фреймах и многом другом читайте в следующих примерах на этом сайте.

Автор: Илья П.
главный модератор группы СообЧа — Программирование в Интернет

Назад в раздел

Emanual.ru – это сайт, посвящённый всем значимым событиям в IT-индустрии: новейшие разработки, уникальные методы и горячие новости! Тонны информации, полезной как для обычных пользователей, так и для самых продвинутых программистов! Интересные обсуждения на актуальные темы и огромная аудитория, которая может быть интересна широкому кругу рекламодателей. У нас вы узнаете всё о компьютерах, базах данных, операционных системах, сетях, инфраструктурах, связях и программированию на популярных языках!