Справка веб-мастера     Справочник web-мастера и программиста
  PHP       Интернет       Беб-дизайн       Безопасность       Javascript     Информеры     Game      
          Игра шарики



Применение фонового изображения - обрамление части страницы

Фон - это наиболее популярный способ придать Web-странице элегантность. Хороший фон улучшит внешний вид. Но крупный фон отвлекает взгляд, а мелкий скрывает детали текста. Сложно подобрать фон, который бы не затенял содержание, а подчеркивал его.

Эта страница описывает один способ применения фонового изображения - обрамление части страницы, а не всей страницы: отображение картинок переменной высоты вдоль левой границы страницы.

Эти картинки разделяются на верхнюю, нижнюю и среднюю части, а средняя изменяет свои размеры в соответствии с размерами окна броузера. Колонна формируется из этих трех картинок.

- верхняя часть

- средняя часть

- нижняя часть

Средняя часть колонны создана с помощью повторяющихся частей, колонна изменяет размер при изменении размера окна. Выровненные вверх и вниз картинки в ячейках формируют изображения верхней и нижней части колонны.

Данную стилевую таблицу для фона колонны размещаем в блок HEAD:


<style>
<!--
.col{background-image:url(colmid.gif);
        background-repeat:repeat-y;}
-->
</style>

HTML листинг страницы:


<table border="0" cellpadding="0" cellspacing="0"  height="100%" width="100%">

<tr>
   

<!----- Определение ячейки со стилем фона col 
и выровненной по верхнему краю картинки coltop.gif --->

                <td class="col" valign="top">    
                <img src="coltop.gif"
                </td>

          <td >
          основной текст
         </td>

</tr>


<tr>


<!----- Определение ячейки со стилем фона col и 
выровненной по нижнему краю картинки colbase.gif --->

            <td class="col" valign="bottom">  
            <img src="colbase.gif"
            </td>

     <td >
     основной текст
     </td>

</tr>

</table>














  Copyright © King-dom.ru, 2008-2013       Разработка сайта SoftHolm.com