КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"
УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ
[Главная страница] [HTML/CSS] [Контакты]
Вопросы, касающиеся макетов
4. Создание текучих макетов при помощи таблиц
Текучие, или автоматически изменяющиеся, макеты - это макеты, которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. Сравните текучие макеты с их противоположностью - макетами с фиксированной шириной, использующими абсолютные размеры, например, 600 пикселов или 760 пикселов, независимо от размеров окна браузера, которые предпочитает конкретный посетитель.
 |
Определение Текучие, или автоматически изменяющиеся, макеты - это макеты, которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. |
Очевидное преимущество текучих макетов заключается в использовании всей доступной реальной площади экрана, благодаря чему они выглядят более изящно. Текучие макеты не выглядят слишком сдавленными при просмотре в очень узких окнах браузера, как иногда выглядят макеты с фиксированной шириной. Более того, посетители, имеющие большие мониторы и профессиональные видеокарты, могут максимизировать окна браузера и увидеть больше информации на сайте без необходимости прокрутки, а посетители с особыми требованиями вряд ли нарушат ваш макет, установив размер шрифта браузера в значение Largest (Самый крупный). Управление графическим дизайном в текучих макетах является гораздо более трудоемкой операцией. Что толку от того, что вы знаете, в каком именно пикселе появится конкретный элемент, если ширина области дизайна изменяется при изменении ширины окна браузера?
Жизнь текучих макетов начинается с того же, что и жизнь макетов с фиксированной шириной. Это означает, что при создании текучего макета вы разрабатываете таблицу, благодаря которой макет умещается в окне браузера определенной минимальной ширины, скажем, 600 пикселов. Посетители, просматривающие страницы в окнах браузера, ширина которых меньше минимальной ширины макета, увидят крайне непривлекательные горизонтальные полосы прокрутки, даже в случае с текучим макетом.
Если вам не нужно ничего, кроме макета с фиксированной шириной, остановитесь здесь. Однако для текучего макета еще не все готово. Для создания эффекта текучести нужно очень аккуратно присвоить параметру width определенных ячеек таблиц символ звездочки (*), которое в языке HTML служит сокращением слова любой. Использование этой общей ширины, вместо фиксированного значения в пикселах, заставляет браузер вычислять ширину области дизайна, учитывая ширину окна браузера. Отсюда и текучесть.
Итак, ширина (параметр width) каких ячеек таблиц устанавливается любой? Это как раз тот случай, когда пригодится план и один или два эскиза.
Начните с исходного дизайна с фиксированной шириной, наподобие представленного на рисунке 4.1. Обратите внимание на простоту макета, что очень важно. В данном макете используются две вложенные таблицы внутри контейнерной, состоящей из двух ячеек. Можно добиться такого же результата при помощи одной таблицы, используя атрибут colspan, однако мы не хотим делать это в данном случае. Никогда, ни при каких обстоятельствах, не используйте атрибуты rowspan или colspan в текучем дизайне. Если вы используете эти атрибуты, при увеличении таблицы браузер посетителя осмелится вставить промежутки везде, особенно в тех местах, где вы не хотите, чтобы они появились.
Листинг 4.1. Просмотр исходного кода для рисунка 4.1.
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Первая вложенная таблица начинается здесь. -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">Logo</td>
<td width="400">Links</td>
</tr>
</table>
<!-- Первая вложенная таблица заканчивается здесь. -->
</td>
</tr>
<tr>
<td>
<!-- Вторая вложенная таблица начинается здесь. -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">Nav</td>
<td width="350">Content</td>
<td width="100">More</td>
</tr>
</table>
<!-- Вторая вложенная таблица заканчивается здесь. -->
</td>
</tr>
</table>
Данная таблица имеет ширину в 600 пикселов, поэтому она уютно помещается в максимизированном окне браузера на экране шириной 640 пикселов. Однако она выглядит слишком сжатой в окнах браузеров с большими размерами на более широких экранах. Чтобы увеличить таблицу, необходимо решить, значения атрибутов width каких ячеек таблиц сменить с абсолютных, основанных на пикселах, на относительные, основанные на процентах.
|
Совет При использовании данного метода создания текучести, выбирайте одну и только одну ячейку в строке таблицы, которая будет иметь переменную ширину. Не пытайтесь сделать две текучих ячейки в одной и той же строке. Более того, если таблица состоит из более, чем одной строки, соответствующая ячейка в каждой строке также должна быть текучей. |
В первой вложенной таблице хорошим выбором является ячейка Links (Ссылки), поэтому ее атрибуту width присвоим символ звездочки, как показано на рисунке 4.2. Также установим значение атрибута width для всей таблицы в 100%. Если этого не сделать, ширина таблицы останется фиксированной, равной 600 пикселам, даже и с текучей ячейкой.) В этом случае ширина ячейки Logo (Логотип) не станет больше, чем 200 пикселов, однако ячейка Links (Ссылки) увеличится и будет соответствовать ширине окна браузера. Если вместо этого увеличить ячейку Logo (Логотип), браузер сохранит ширину ячейки Links (Ссылки), равную 400 пикселам, и добавит свободное место внутри ячейки Logo (Логотип), что может разбалансировать макет.
Листинг 4.2. Просмотр исходного кода для рисунка 4.2.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">Logo</td>
<td width="*">Links</td>
</tr>
</table>
Во второй вложенной таблице ячейка Content (Содержимое) является наилучшим выбором для использования относительной ширины, как показано на рисунке 4.3. Ячейки, находящиеся по обе стороны от ячейки Content (Содержимое), будут иметь управляемые ширины, при этом позволяя содержимому страницы заполнять окно браузера естественным образом. Поэтому установите символ звездочки для атрибута width ячейки Content (Содержимое), а значение атрибута width вложенной таблицы установите равным 100%.
|
Совет Хорошее правило выбора текучей ячейки заключается в выборе ячейки с наибольшим количеством содержимого. |
Теперь просто установите значение атрибута width контейнерной таблицы в 100%, чтобы увеличить ее ширину до ширины окна браузера, и все готово. На рисунке 4.4. показан завершенный эскиз макета.
Листинг 4.3. Просмотр исходного кода для рисунка 4.3.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">Nav</td>
<td width="*">Content</td>
<td width="100">More</td>
</tr>
</table>
Листинг 4.4. Просмотр исходного кода для рисунка 4.4.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Первая вложенная таблица начинается здесь-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">Logo</td>
<td width="*">Links</td>
</tr>
</table>
<!-- Первая вложенная таблица заканчивается здесь-->
</td>
</tr>
<tr>
<td>
<!-- Вторая вложенная таблица начинается здесь-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">Nav</td>
<td width="*">Content</td>
<td width="100">More</td>
</tr>
</table>
<!-- Вторая вложенная таблица заканчивается здесь-->
</td>
</tr>
</table>