КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"
УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ
[Главная страница] [HTML/CSS] [Контакты]
Вопросы, касающиеся макетов
1. Создание макетов с фиксированной шириной при помощи таблиц
В макетах с фиксированной шириной используются абсолютные размеры в пикселах для определения ширины страницы. Противоположностью макетам с фиксированной шириной являются текучие макеты и автоматически изменяющиеся макеты, которые автоматически изменяют свой размер, чтобы умещаться по ширине окнабраузера посетителя.
 |
Определение Макеты с фиксированной шириной используют абсолютные размеры в пикселах для определения ширины страницы. |
Макеты с фиксированной шириной являются единственным выбором для страниц, требующих точного контроля над графическим дизайном. Нельзя ожидать от размещения визуальных элементов какой-либо точности, когда текучий макет изменяет ширину страницы, чтобы соответствовать ширине окна браузера. В то же время фиксированная ширина означает фиксированную ширину независимо от того, совпадает размер окна браузера с реальным размером страницы или значительно превышает его.
К известным сайтам, использующим макеты с фиксированной шириной, относятся nytimes.com и yahoo.com. Оба сайта укладывают огромное количество информации в тщательно разработанные макеты, требующие точности фиксированной ширины.
Разработка всех хороших макетов для Интернета начинается с эскиза, похожего на представленный на рисунке 1.1, на котором размечаются основные области страницы. Не создавайте слишком ухищренный дизайн. Атрибуты colspan и rowspan языка HTML позволяют строить чрезвычайно сложные таблицы, однако делайте все возможное, чтобы избегать их. Объединения столбцов и строк отлично подходят для таблиц данных или таблиц, представляющих строки и столбцы данных в соответствии со спецификацией языка HTML. Таблицы макета, которые вы создаете здесь, не соответствуют спецификации, и браузеры стремятся выполнить враждебные действия по отношению к дизайну, использующему объединение столбцов и строк.
|
Определение Таблица данных - это таблица, представляющая строки и столбцы данных. Это единственный тип таблиц, который официально поддерживается языком HTML. Использование таблиц для создания макетов, хотя и чрезвычайно распространено, противоречит правилам. |
Если вы желаете получить более авантюрный дизайн, попытайтесь использовать вложенные таблицы. Вложенная таблица - это таблица, которая размещается внутри ячейки другой таблицы. Дизайн, представленный на рисунке 1, никак не назовешь авантюрным даже с натяжкой, однако в нижней ячейке основной таблицы вкладывается другая таблица, чтобы избежать объединения столбцов в верхней ячейке.
|
Определение Вложенная таблица - это таблица, которая размещается внутри ячейки другой таблицы. |
Как только набросок дизайна будет готов, вы должны начать думать о размерах в пикселах. Пиксел является основной единицей измерений в HTML-таблицах. Довольно удобно, что операционные системы компьютеров измеряют ширину экрана также в пикселах, и это делает процесс задания размеров макета для конкретных настроек экрана безболезненной операцией. Вы просто выбираете ширину экрана, которая имеет смысл для ваших посетителей, а затем создаете макет, который вмещается в таблицу аналогичных размеров.
|
Совет При создании дизайна устанавливайте значение атрибута ячеек valigne в «top». Это сообщит браузеру, что вертикали содержимое необходимо выравнивать по верху ячеек. Иначе браузер будет центрировать содержимое по вертикали |
В таблице 1.1 приведены цифры. Можно заметить, что не так уж и просто создать таблицу шириной 640 пикселов, которая будет соответствовать экрану шириной 640 пикселов. Необходимо принимать во внимание элементы интерфейса браузера, например, полосы прокрутки, поэтому от ширины таблицы отнимается несколько пикселов, просто чтобы подстраховаться.
| Ширина экрана | Ширина таблицы | Комментарии |
|---|---|---|
| 640 пикселов | 600 пикселов | Абсолютный минимум для большинства приложений |
| 800 пикселов | 760 пикселов | Стандартный безопасный размер |
| 1024 пикселов | 955 пикселов | Выходящий за рмки стандартного размера |
| 1280 пикселов | 1210 пикселов | Не рекомендуется для универсальных сайтов |
| 1600 пикселов | 1530 пикселов | Не рекомендуется для универсальных сайтов |
|
Совет И хотя в действительности многие бродят по Интернету с использованием настольных мониторов и экранов ноутбуков, разрешение которых установлено в 1024 пикселов по ширине, не забывайте, что также существуют и другие типы устройств просмотра для Интернета, например карманные компьютеры (PDA), телевизоры, телефоны, консоли видеоигр, кухонные приспособления, наручные часы, и кто знает, что еще. Если ваш сайт обращается к беспроводной публике, откажитесь от больших размеров экрана. |
Для конечной цели данного примера не будем рисковать и выберем экран шириной 800 пикселов, для которого ширина таблицы составляет 760 пикселов. Теперь, когда мы знаем общую ширину таблицы, рассчитать ширины областей, расположенных внутри таблицы, не составит труда. Смотрите. Сделайте свой наилучший выбор. Позднее, при необходимости, можно будет изменить значения. Просто удостоверьтесь, что сумма отдельных ширин не больше (или не меньше) общей ширины таблицы.
Нанесите значения на эскиз, как показано на рисунке 1.2, и код таблицы практически напишет себя сам. Замените метки в HTML-коде содержимым сайта - используя вложенные таблицы, если необходим особый дизайн, - и у нас готов макет с фиксированной шириной.
|
Совет Не забудьте установить значения атрибутов таблицы макета border, cellpadding и cellspacing в 0. В данном случае, браузер не будет автоматически добавлять дополнительные промежутки, как он делает это при отображении таблиц. |
Листинг 1.1. Просмотр исходного кода для рисунка 1.2
<div align="center">
<!-- Если вы не желаете выравнивать таблицу макета по центру, удалите тег div здесь и в конце листинга. -->
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="760" valign="top">Loga</td>
</tr>
<tr>
<td width="760" valign="top">
<!-- Вложенная таблица начинается здесь. -->
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top">Nav</td>
<td width="560" valign="top">Content</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Обратите внимание, что в этом примере не нужно заботиться о высоте ячеек таблиц. На самом деле это является одним из преимуществ построения макетов с использованием таблиц. Браузер автоматически изменяет высоты ячеек таблиц, чтобы они соответствовали какому бы то ни было содержимому, размещенному в ячейках. Безусловно, можно указать точные значения для высоты, если вы знаете их, но можно и просто не вмешиваться в ход событий и положиться на браузер в плане вычисления правильных значений для высоты.
|
Совет Если ширина ячейки таблицы равняется ширине самой таблицы, атрибут width ячейки таблицы можно опустить. В данном случае, если вы измените свое мнение относительно ширины таблицы, вам придется обновить значение всего лишь одного атрибута width. |
Вот как мог бы выглядеть листинг после добавления нескольких значений для атрибутов height:
<div align="center">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="760" height="100" valign="top">Loga</td>
</tr>
<tr>
<td width="760" valign="top" height="400">
<!-- Вложенная таблица начинается здесь. -->
<table width="760" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top" height="400">Nav</td>
<td width="560" valign="top" height="400">Content</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Обратной стороной отказа от использования атрибутов height является то, что в окне браузера таблица будет выглядеть полностью свернутой до тех пор, пока вы не начнете добавлять содержимое в ячейки. Если вы считаете это ошибкой, при построении таблицы просто задайте атрибутам ячеек height произвольные значения, однако потом, когда содержимое будет находиться в ячейках, не забудьте удалить атрибуты height.