«У каждой женщины должна быть змея» – пел Б.Г. ;)
Особенно, если эта змея растет прямо у вас на глазах, стоит только потянуть за рамку окна. А если вам почему-либо не приятны змеи в особо крупных размерах, то можно запросто превратить ее в большого червяка, уменьшив окно до появления горизонтальной прокрутки.
К тому же, как мило она подглядывает за вами, на секунду отрывая взгляд от своего драгоценного яблока!

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

При этом должны быть обязательно соблюдены несколько требований, а именно:

1. Страница должна отображаться на экране любого разрешения таким образом, чтоб не нарушалась концепция дизайна.
2. При этом она должна отображаться корректно, т.е. без внезапно пропадающих изображений и так же внезапно возникающих разрывов между ячейками при переключении из всеми обожаемого Explorer в Netscape.
3. Страница должна помещаться в экран без появления полос прокрутки, по крайней мере, без горизонтальной полосы внизу окна (если, конечно, вы не делаете сайт с горизонтальной прокруткой)
4. Сайт должен быстро загружаться, а значит, иметь оптимальный размер в Кб.
5. Дизайн должен быть интересен, и нравиться вам, заказчику и пользователям, или хотя бы кому-нибудь из них. ;)

На сегодняшний день правилом хорошего тона считается разработка дизайна, ориентированного на разрешение 800х600, что при учете максимальной высоты рамок меню (toolbars) в Explorer / Netscape, составляет поле размером 750х440 (по высоте можно даже 500 и больше, для почитателей IE – в конце концов, главное, чтобы страница помещалась по ширине, обеспечивая удобство навигации и прочтения материала).

Затем необходимо решить, что будет происходить с вашей страницей при увеличении размеров окна.

Тут имеются только два варианта:

1. Страница сохраняет фиксированную ширину, заданную в пикселях или в процентах, занимая на экране соответствующую область слева, справа или посередине (центрованная страница).
   Это – самый простой вариант, особенно если страница остается прижатой к левому краю окна, а оставшаяся часть заливается цветом фона (BODY BGCOLOR), подложкой (BODY BACKGROUND) или белым цветом, установленным по умолчанию.
   Если страница прижимается вправо, то это, как правило, несколько обескураживает, если, конечно, такое расположение не продиктовано хитросплетениями артовского дизайна.
   И, наконец, центрирование страницы является самым оптимальным вариантом, позволяющим привлечь максимум внимания и абстрагироваться от остающегося справа и слева пустого пространства.
2. Второй вариант – резиновая страница, или страница, изменяющая размеры вместе с размером экрана (resized page), при этом сохраняя порядок расположения информации и свое графическое оформление.

Чтобы реализовать второй вариант, вам понадобится чуточку терпения и внимательности – как раз до конца статьи. ;)

В качестве примера возьмем вот этот самый сайт, дизайн которого был создан как иллюстрация к статье (а потому совершенно бесполезно щелкать по пунктам меню – все они ведут на первую страницу “Zebrasus”, и приведены только для довершения композиции).

Минимальный размер этой страницы составляет 750 пикселей по ширине, а значит, спокойно помещается в экран 800х600. Если выкинуть все содержимое страницы вместе с заглавием, то змея стала бы еще короче – совсем крохой. Это совет для тех, кого не интересуют советы, а интересует только змея. В дальнейшем, все советы будут помечены таким же значком.

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