Если вы решили делать растягивающуюся страницу, внимательно присмотритесь к своему эскизу, и определите, какую часть в шапке вашей страницы можно было бы использовать для создания тайла (tile) –фрагмента, который можно многократно повторить, чтобы заполнить пустые промежутки в ячейках.
Рассмотрим на практике несколько вариантов:
На этом сайте область в красной рамке заполнена одинаковым узором от крайней правой пиктограммы и до границы окна. Следовательно, мы можем взять один фрагмент этой области (узора) и разложить, словно плитку, на всю оставшуюся длину до границы окна. Таким образом, при каком бы разрешении экрана не просматривал нашу страницу дотошный пользователь, у него всегда она будет растягиваться вместе с рамкой окна, заполняя лишнюю область повторяющимся фрагментом.
А в этом примере повторяющиеся области расположились слева и справа от центральной картинки (выделено серыми рамками), и значит, нам будет необходимо расположить титульную часть по центру, и заставить броузер дорисовать по краям красную полоску вплоть до границ окна.
Что же касается нашей змеи, то у нее есть голова, хвост и туловище, и это самое туловище как раз и будет одинаково на всем его (или ее?) протяжении. Возможно, зоологи не согласятся, с таким непрофессиональным подходом, но на то они и зоологи, чтобы щупать и измерять все части тела бедной рептилии, а для нас она будет везде одинакова –как говорится, длиннее, чем шире. ;)
На практике раскладывание повторяющегося фрагмента осуществляется так – вы выбираете фрагмент, оптимизируете и сохраняете его под каким-либо именем, а затем назначаете в атрибут BACKGROUND тега <TD>:
<TD WIDTH="100%" BACKGROUND ="images/tile.gif">Тексты и картинки</TD>
Все тексты и изображения, помещенные в эту ячейку, лягут поверх вашего фона, и если вы тщательно выполните предварительную подготовку тайла, то у вас получится бесшовный фон, обеспечивающий эффект растягивания страницы на любую ширину.
 |
Не стоит использовать прозрачный имидж (.gif) в качестве фрагмента фона ячейки – Netscape его просто не отображает. |
 |
Также необходимо помнить о том, что если высота ячейки превысит высоту вашего фрагмента (разложенного слева направо), то он начнет повторяться, и у вас появятся совершенно лишние полосы. То же самое произойдет с фрагментом, разложенным в ячейке сверху вниз, если ширина ячейки превысит ширину фрагмента. |
Поэтому при подготовке такого изображения рекомендуется сделать его немного (или намного, если это необходимо) шире (или выше), чем предполагаемый размер ячейки.(см. рисунок)
На рисунке черной рамкой показан реальный размер фрагмента, а красной – размер ячейки, в которую он будет помещен.
Не стоит волноваться, что величина вашего фрагмента-подложки повлияет на размер ячейки.
 |
Изображение, положенное на дно ячейки, отрисовывается с верхнего левого угла и до границ ячейки. Та часть изображения, которая не попала в размер ячейки, попросту «обрезается» ее краями.
|
Некоторые начинающие дизайнеры прибегают к использованию % в описании ширины и высоты имиджей. Этот нехитрый прием ( <IMG SRC="title1.gif" WIDTH=100% HEIGHT=100%> )
в Explorer приводит к тому, что картинка изменяет свой размер вместе с размером окна, растягиваясь как по ширине, так и по высоте. Однако при этом изображение непропорционально искажается, бьется на пиксели, а в Netscape вообще исчезает.
Так что лучше раз и навсегда отвыкнуть от привычки прописывать имиджам размеры в % - уж лучше просто их не указывать, хоть это и увеличивает время загрузки страницы.