Высота документа
Исторически сложилось, что пролистывание большого документа на компьютере происходит сверху вниз. Для удобства листания предназначены вертикальные полосы прокрутки, клавиатурные комбинации, колесо прокрутки мыши. А вот перемещение по горизонтали происходит не так удобно, поэтому горизонтальной полосы прокрутки быть не должно. Из чего следует, что веб-страница должна вписываться в окно браузера по ширине, но никак не по высоте, которая может изменяться в очень широком диапазоне. На рис. 4 видно, что реальная высота документа не ограничена рамками браузера, но в окне показывается лишь часть страницы.
Рис. 4. Отображение документа в окне браузера по высоте
В принципе, чем больше на странице информации, и, следовательно, больше высота документа, тем сложнее находить нужные данные. Поэтому текст структурируют, разбивают на блоки и каждому из них дают свой заголовок, чтобы взгляду читателя было за что зацепиться.
Также следует учесть, что объем статей на сайте может достаточно сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без ошибок, несмотря на различное значение высоты.
Часть 2. Табличная верстка.
На сегодня существуют два направления верстки страниц: табличная и блочная.
Метод табличной верстки получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.
Плюсами табличной верстки можно назвать:
разделение содержания от представления;
возможность верстать «табличные» макеты любой сложности;
простая реализация;
корректное отображение в различных браузерах.
Использование таблиц с невидимой границей — известный способ верстки, применяемый на множестве сайтов. Такая таблица фактически представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы.
Теги, используемые при создании таблиц:
<table> </table> - теги начала и конца таблицы;
<th> </th> - теги заголовка таблицы (текст будет выделен жирным и отцентрирован;
<tr> </tr> - теги начала и конца строки;
<td> </td> - теги начала и конца столбца.
Основные атрибуты:
width - ширина таблицы указывается в "%" или в пикселях "800";
border - толщина рамки;
cellspacing - расстояние между ячейками;
cellpadding - расстояние между рамкой ячейки и текстом;
align - выравнивание по горизонтали ( по умолчанию слева="left" центр="center" справа="right" );
valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )
colspan=x - количество ячеек по горизонтали;
rowspan=x - количество ячеек по вертикали.
Пример табличной верстки для фиксированного макета из трех колонок.
При макете фиксированной ширины общая ширина таблицы задается в пикселах и остаётся постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах.
При определении ширины колонок следует принимать во внимание значение атрибута cellpadding. На ширину ячеек этот атрибут не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.
Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Так что ширину колонок лучше всё-таки задавать.
<table width=950 border=1>
<tr>
<td width=150>Колонка 1</td>
<td width=600>Колонка 2</td>
<td width=200>Колонка 3</td>
</tr>
</table>
В примере ширина таблицы составляет 950 пикселов, а колонок: 150, 600 и 200 пикселов.
Пример табличной верстки для «резинового» макета из трех колонок.
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от неё. Здесь возможны два варианта:
ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек. Причём в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.
Процентная запись для таблиц имеет ряд преимуществ — используется всё свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.
<table width=80% border=1>
<tr>
<td width=15%>Колонка 1</td>
<td width=60%>Колонка 2</td>
<td width=25%>Колонка 3</td>
</tr>
</table>
В примере ширина таблицы составляет 80% от всего пространства веб-страницы. Колонки имеют ширину: 15%, 60%, 25%.
Пример табличной верстки из трех колонок, сочетающей проценты и пикселы
Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы.
Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы.
Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем. При этом обязательно следует определить общую ширину всей таблицы.
<table width=100%>
<tr>
<td width=150 bgcolor= #fc0>Колонка 1</td>
<td bgcolor= #afccdb>Колонка 2</td>
<td width=200 bgcolor = #fc0>Колонка 3</td>
</tr>
</table>
Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.
Для решения этой проблемы используется механизм вложенных таблиц по схеме.
Вначале создаём таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для неё устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах.
<table width=100% cellspacing=0 cellpading=0>
<tr>
<td width=150 bgcolor= #fc0>Колонка 1</td>
<td>
<table width=100% cellspacing=0>
<tr>
<td width=60% bgcolor=#afccdb>Колонка 2</td>
<td width=40% bgcolor=#fc0>Колонка 3</td>
</tr>
</table>
</td>
</tr>
</table>
При создании подобного макета следует принимать во внимание следующие моменты.
Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала всё свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение атрибутов cellpadding и cellspacing.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.