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

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

<table></table>: теги, означающие начало и конец таблицы
<tr></tr>: начало строки и конец строки
<td></td>: начало и конец одного столбца в ячейке

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

<table width="100%"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

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

<table width="100%"> <tr> <td> </td> <td rowspan="5"> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

здесь 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, и создавались они именно для таких целей. Настроек в таблицах и фреймах предостаточно, так что с их помощью можно сделать статичную страницу любой сложности. Без использования дополнительных технологий — это единственный способ таким образом организовать структуры (ну, кроме слоев, конечно, но они сложны для понимания — делать их всё-таки надо в специальной программе). О слоях, таблицах, фреймах и многом другом читайте в следующих примерах на этом сайте.

Автор: Илья П.