Илья П.
Итак, что же такое фрейм? Можно сказать, что это таблица, но каждую ячейку в
неё вы заполняете из отдельного файла. Зачем, спросите вы? Ведь можно просто
вставить информацию в ячейку таблицы, и всё будет красиво и удобно. С последним
можно не согласиться. Так давайте же создадим небольшой набор страниц, сначала с
использование таблиц, а затем сделаем то же самое с использованием фреймов. Что
будет содержать наша страница: меню слева и саму страницу. Создаем таблицу, ну,
допустим, с 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, и создавались они именно для таких целей. Настроек в таблицах
и фреймах предостаточно, так что с их помощью можно сделать статичную страницу
любой сложности. Без использования дополнительных технологий - это единственный
способ таким образом организовать структуры (ну, кроме слоев, конечно, но они
сложны для понимания - делать их всё-таки надо в специальной программе). О
слоях, таблицах, фреймах и многом другом читайте в следующих примерах на этом
сайте.
Литература по HTML
|