Макет страницы

Если ваши страницы плохо просматриваются в маленьком или большом окне, сделайте следующее.

1. Создайте большую таблицу размещения с помощью тэга <TABLE>, атрибуту border присвойте значение 0. По умолчанию страница выровнена по левому краю окна; если вы хотите оставить пустое пространство в правой и левой стороне страницы, присвойте атрибуту align значение center. Если вы хотите, чтобы столбцы таблицы касались друг друга – например, если смежные столбцы содержат изображения, которые должны соединяться друг с другом по краям – значениям атрибутов cellpadding и cellspacing также присваивают 0.

   Хотя большинство страниц использует таблицу размещения, это не единственное решение. Для подобного эффекта можно также использовать фреймы. Средствами FrontPage вы можете обеспечить стандартное размещение элементов. Если вашей странице нужен только один столбец или в ней используются стили, чтобы ровно установить объекты, вы можете вообще воздержаться от использования таблицы.

2. Для каждого столбца (тэг <TD>) установите атрибут width по ожидаемой ширине его содержимого в пикселах. Если какие-нибудь ячейки должны охватывать больше одного столбца, например заголовок, идущий поперек всей страницы, установите значение атрибута colspan равным числу столбцов. Ниже приведена типовая таблица размещения с тремя столбцами, у которой объединены ячейки для заголовка страницы и для нижнего колонтитула, для каждого раздела использованы различные цвета фона, а сама таблица появляется в центре окна броузера. Таким образом, эту таблицу можно просматривать в любом окне, если оно хотя бы 600 пикселов в ширину:

   <table align=center border=0 cellpadding=10 cellspacing=0>
     <tr>
       <td colspan=3 align=center bgcolor="#99ccff">
         <img src="banner.gif" alt="Banner goes here." width=590 height=60>
       </td>
     </tr>
     <tr valign=top>
       <td width=100 align=right bgcolor="#ffcc66">
         <a href="pageone.htm">Hyperlink</a><br>
         <a href="pagetwo.htm">Another Link</a><br>
       </td>
       <td width=350>
         <h1>Heading</h1>
         <p>This is the main section of the page.</p>
       </td>
       <td width=100 align=center bgcolor="#ff9933">
         <img src="ad1.htm" alt="Ad #1" width=96 height=96 vspace=6><br>
         <img src="ad2.htm" alt="Ad #2" width=96 height=96 vspace=6><br>
       </td>
     </tr>
     <tr>
       <td colspan=3 align=center bgcolor="#cccccc">
         Copyright (c) 2000 Nobody
       </td>
     </tr>
   </table>

   Даже если вы определяете фиксированные размеры для всех столбцов в таблице, броузер все же может изменять их. Например, если ячейка содержит слишком широкое изображение, она расширяется, чтобы отобразить его полностью. Если вы определяете ширину всей таблицы, что несколько больше, чем просто сумма ячеек, или опускаете установку ширины для каждого столбца, броузер распределяет дополнительное пространство внутри ячеек.
   Если вы хотите, чтобы вашу страницу было удобно просматривать при определенных размерах экрана, не забудьте оставить небольшой участок пространства для средства управления, например, полосы прокрутки. Для разрешения монитора 640 на 480 ограничьте ширину страницы 623 пикселами; для 800 на 600 – ограничьте ее 783 пикселами. Если вы хотите сделать более широкую страницу, то справа располагайте наименее важные элементы, так как некоторые пользователи не будут их видеть.

   Если вы хотите, чтобы содержимое страницы растягивалось, когда пользователь изменяет ширину окна, удалите атрибут width из столбца, который должен будет растягиваться (в приведенном выше коде надо было бы удалить width =350 ), и затем установите для атрибута width тэга <TABLE> относительное значение, например 90 % или 100 %.
3. Как только вы разметили таблицу, переместите готовое содержимое в каждый из разделов страницы. Просмотрите страницу с рядом размеров окна, чтобы увидеть ее глазами посетителей, и скорректируйте соответствующим образом атрибут width в каждом тэге <TD>.