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

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

Для каждого столбца (тэг <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>

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

Если страницы разорваны в нежелательном месте, вы можете использовать стиль для определения своих собственных разрывов страниц. (Как и все стили печати, это работает только в поздних версиях броузеров.) Для тэга, который должен будет начаться на новой странице, установите свойству page-break-before значение always:

<table style="page-break-before:always">

Также можно присвоить свойству page-break-inside значение avoid, чтобы предотвратить разрыв в определенном блоке:

<table style="page-break-inside:avoid">

Если вы используете таблицу стилей и хотите обеспечить для вашей страницы специальные стили при печати, включите их в раздел @media print. Например, используйте следующий блок <STYLE>, чтобы определить шрифт при печати, отличный экранного, и скрыть изображения при печати:

<style>
  @media print {
    BODY { font-family:'Times New Roman',Times; font-size:smaller }
    IMG { visibility:hidden }
  }
  @media screen {
    BODY { font-family:verdana,Helvetica,sans-serif }
  }
</style>

Создайте страницу шаблона, которую вы потом сможете использовать в качестве отправной точки для других страниц. Чтобы это сделать, выберите страницу, которая наиболее близка к вашему проекту страницы, и создайте копию страницы. Удалите текст и изображения, которые есть только на этой странице, оставляя от них только метки-заполнители типа "Здесь находятся гиперссылки" или "Здесь напечатано резюме страницы".

Если у вас все же нет страницы с подходящим размещением, вам придется начать с нуля. Создайте большую таблицу, которая будет обеспечивать полное размещение, установите размеры столбцов, выравнивание и цвет фона. (См. раздел "При некоторых разрешениях веб-страница выглядит неправильно".) После этого добавьте основной текст, эмблемы и другие изображения, которые встречаются на каждой странице, добавьте гиперссылки, которые связываются с основными страницами вашего сайта.

Если форматирование ваших текстов, границ или полей не единообразно, вам может помочь таблица стилей. Создайте или откройте таблицу стилей (.css файл) и определите стили, которые вы хотите применить для всего сайта. Например, если вы хотите сделать отступ слева для каждой строки всех параграфов всего сайта равным 20 пикселам, то для установления свойства margin-left используйте следующее объявление стиля в вашей таблице стилей (чтобы выровнять только первую строку, установите вместо этого свойство indent):

p {
  margin-left: 20px
}

В вашей странице-шаблоне и любых других существующих страницах удалите все руководства по форматированию и интервалы, которые потом заменят ваши стили. После этого свяжитесь с таблицей стилей, использующей тэг <LINK>:

<link rel=stylesheet type="text/css" href="styles.css">

По умолчанию, текстовые параграфы выровнены по левому краю страницы или левому краю ячейки таблицы, которая их содержит. Чтобы выровнять параграфы текста по центру или по правому краю, присвойте атрибуту align тэга <P> или заглавному тэгу (типа <H1>) значение center или right:

<p align=center>Hear Ye, Hear Ye!</p>

Если вы пытаетесь выровнять текст с помощью пробелов или позиций табуляции в HTML, вы скоро узнаете, что броузеры не форматируют текст, введенный таким путем. Когда вы просматриваете страницу, множественные пробелы, позиции табуляции и новые строки в HTML действуют как единственный пробел. Если вы хотите, чтобы броузер упорядочивал текст только так, как это сделано в вашем HTML, с помощью шрифта фиксированной ширины, благодаря которому данное число символов всегда было бы той же самой ширины, используйте тэг <PRE>. (О том, как выравнивать текст без использования шрифта фиксированной ширины, см. шаг 3.)

Чтобы точно выровнять элементы страницы по строкам или столбцам, используйте таблицу. Если вы хотите, чтобы между объектами или в полях было пустое пространство, включите пустые ячейки, определите атрибут ширины в тэге <TD> и включите неразрывный пробел ( nbsp; ), чтобы быть уверенным, что броузеры не будут сворачивать пустую ячейку.

Если содержимое ячеек в таблице не выровнено так, как вы хотите, начните с проверки атрибутов выравнивания, которые вы установили. По умолчанию, содержимое ячейки выровнено по левому краю. Чтобы изменить выравнивание по горизонтали, установите атрибуту

Если вы используете FrontPage, создаете таблицу, щелкнув на кнопке Insert Table на панели инструментов. Если вы хотите включить существующий текст или объект в таблицу, выделите текст или объект, затем нажмите Convert (Преобразовать) в меню Table (Таблица) и нажмите Text to Table (Текст в таблицу). Затем для коррекции ширины или выравнивания щелкните правой кнопкой мыши на таблице и нажмите Cell Properties (Свойства ячейки) или Table Properties (Свойства таблицы).

Если границы изображений не выровнены с текстом или друг с другом, проверьте, не содержат ли они дополнительного пространства вокруг граней. (Попробуйте установить значение атрибута

(Убедитесь, что вы скорректировали атрибуты width и height тега <IMG> на новые значения.)

Если изображения не совмещаются с текстом так, как вы бы хотели, попытайтесь установить атрибуту align тэга <IMG> значения left, right, top, absmiddle, или baseline. (Для получения дополнительной информации см. раздел "Текст не обтекает вокруг изображения или не выравнивается с ним".)

Чтобы убрать лишнее пустое пространство между объектами или вокруг параграфов, используйте свойства полей. Установите поля для каждого объекта отдельно, используя свойства

Если вы хотите изменить позиционирование для определенного тэга по всему документу, используйте блок <STYLE> или отдельную таблицу стилей. Приведенный ниже блок <STYLE>, который следует вставить в раздел <HEAD> вашего HTML, чтобы он действовал на всю вашу страницу, выравнивает параграфы по правому краю и оставляет между ними меньше пустого пространства (такого эффекта вы не сможете достичь с помощью одного HTML).

<style>
  P   { margin-top:0;
    margin-bottom:10px;
    text-align:justify; }
</style>

Если вы хотите скорректировать расположение элемента, используйте свойство CSS position. Чтобы установить положение объекта относительно его обычного места на странице, установите свойству position значение relative и затем установите в значениях свойств left и top то расстояние, на которое вы хотите переместить объект. (Используйте отрицательные значения, чтобы подвинуть его вверх или налево). Заметьте, что другие элементы на странице не перемещаются, чтобы заполнить пространство, освобожденное передвинутым элементом. Приведенная ниже строка использует тэг <SPAN> чтобы установить свойства стиля для одного слова, заставляя его подвинуться на 8 пикселов относительно его нормального положения.

The word <span style="position:relative; top:-8;">higher</span>
is higher than the others.

Чтобы при перемещении элемента в определенное место на странице другие объекты появлялись на странице как будто его там нет, установите свойству position значение absolute и присвойте свойствам left и top расстояние от левого верхнего угла страницы до места, где вы хотите расположить элемент. Например, это изображение будет появляться сверху страницы, с отступом 200 пикселов от левого края страницы (так как Netscape 4 не признает атрибут style для тэга <IMG>, лучше использовать блок <DIV>):

<div style="position:absolute; top:0; left:200">
  <img src="gracie.jpg" width=100 height=150>
</div>

Если вы не учитываете свойство top, изображение появится на расстоянии 200 пикселов от левого края страницы, но на его нормальном расстоянии от вершины. Более того, вы можете отсчитывать положение элемента от других объектов, например угла таблицы. Установите свойству position для таблицы значение relative, и положения всех объектов в пределах таблицы будут определяться относительно ее левого верхнего угла.

Если ваше изображение достаточно маленькое, чтобы соответствовать строке текста, вам, наверное, захочется оставить его там, где оно и стоит. Однако, если вам не нравится то, как изображение выровнено относительно текста по вертикали, если оно находится слишком высоко или слишком низко, попытайтесь изменить выравнивание, присвоив свойству align тэга <IMG> значение middle, top или baseline.

Если вы хотите, чтобы текст обтекал изображение, не изменяя при этом высоту строки, установите атрибуту

Убедитесь, что вы поместили изображение до того, как поместили обтекающий его текст, иначе изображение передвинется на следующую строку.

Если изображение находится слишком близко к тексту, добавьте пробелы с помощью атрибутов vspace и hspace в тэг <IMG>.

<img align=right vspace=5 hspace=8>

Наоборот, если вы хотите, чтобы пустое пространство было только с одной стороны изображения, используйте атрибут style, чтобы установить свойства margin-left, margin-right, margin-top или margin-bottom.

<img align=right style="margin-left:8px">

Независимо от того, как вы определили изображение и выровняли текст, страница может выглядеть неправильно, если она очень широкая или узкая или если посетители изменяют размер шрифта. Если вы хотите иметь возможность лучше контролировать выравнивание текста и изображений, например, хотите, чтобы текст оставался в едином блоке слева от изображения, создайте таблицу, которая будет их разделять.

Вставьте тэг <TABLE>, установите свойству border значение 0, а затем добавьте ячейки (тэги <TD>) для каждого изображения и блока текста. (Во FrontPage для создания таблицы выберите Insert (Вставить) в меню Table (Таблица) и нажмите Table (Таблица).) Переместите каждый блок текста и каждое изображение в отдельные ячейки, а затем установите свойствам alignment и cellpadding значения, отвечающие желаемому расположению.

В средней ячейке таблицы установите атрибут

Чтобы линия лучше работала, вы должны установить атрибуту cellpadding значение 0 в тэге <TABLE>, иначе линия будет шире, чем вы устанавливали. Вы можете установить пространство между ячейками с помощью атрибута cellspacing.

Чтобы лучше контролировать положение вертикальной линии, создайте GIF-изображение в графическом редакторе. Сделайте линию в несколько пикселов в ширину и по крайней мере 100 пикселов в высоту. Нарисуйте линию в цвете, установите в качестве цвета заднего фона цвет вашей страницы, добавьте эффекты, а затем экспортируйте изображение как GIF-файл. Включите линию в таблицу, используя тэг <IMG>, скорректируйте размер линии с помощью установки атрибутов width и height:

<img src="vline.gif" width=4 height=200>