Основы работы с XHTML и CSS

         

Создание шаблона страницы


Обычно компоновка страницы будет использоваться другими страницами сайта Web, чтобы иметь стандартный дизайн для всех страниц. Также обычно разделы верхнего колонтитула и меню страниц будут содержать одну и ту же информацию, чтобы создать общий "внешний вид и функции" сайта. Поэтому необходимо двигаться дальше и создавать код ячеек верхнего колонтитула и меню, как часть этой стандартной компоновки страницы. При кодировании этих разделов вставьте просто информацию между тегами <td>...</td> ; ячеек. Кодирование в каждой ячейке можно делать независимо от кодирования других ячеек. При добавлении содержимого таблица расширяется по вертикали, но горизонтальная компоновка остается фиксированной.

После создания компоновки страницы - включая все общие колонтитулы и меню, которые должны присутствовать на всех страницах, - необходимо сохранить страницу как файл шаблона (например, PageTemplate.htm) для использования с другими страницами сайта. Затем для каждой новой страницы, добавляемой к сайту, откройте эту страницу шаблона и сохраните ее как новую страницу Web. Теперь остается только закодировать различные ячейки содержимого на различных страницах; вся окружающая информация на странице будет такой же. Не забудьте только после создания страницы удалить границы таблицы компоновки, если только не требуется их присутствие на странице.

Рисунок 8.52 показывает шаблон простой страницы Web с общим, созданным заранее баннером и меню. Для любой страницы Web, которая использует этот шаблон, можно открыть этот файл, вставить подходящую информацию в ячейку содержимого и сохранить ее как новую страницу Web. Код шаблона показан на листинге 8.53.


Рис. 8.52.  Шаблон страницы Web

Листинг 8.53. Код шаблона страницы Web (html, txt)


<style type="text/css"> body {margin:0px} table {width:770px; height:100%} table td {vertical-align:top; padding:5px} table td#HEAD {height:50px; background-color:#707070; color:#FFFFFF; font-size:24pt; font-weight:bold; vertical-align:middle} table td#MENU {width:150px; background-color:#F0F0F0} </style>

</head> <body>

<table>

<tr> <td id="HEAD" colspan="2"> My Web Site </td> </tr>

<tr> <td id="MENU"> <b>Menu</b><br/><br/> <a href="#">Home Page</a><br/><br/> <a href="#">First Page</a><br/> <a href="#">Second Page</a><br/> <a href="#">Third Page</a><br/> <a href="#">Fourth Page</a><br/> <a href="#">Fifth Page</a><br/> </td>

<td id="CONTENT">

- Поместите здесь содержимое страницы -

</td> </tr>

</table>

</body> </html>

Листинг 8.53. Код шаблона страницы Web


Содержание раздела