Советы

Строим резиновый сайт

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

Поэтому, “резиновая” идея, похоже, самая правильная для сайта в Интернете. Она позволяет браузеру автоматически распределять элементы на экране с учетом ширины текущего окна и не приводит к показу горизонтальной линейки протяжки даже в узких окнах.

Построим, в качестве примера, простой “резиновый” сайт.

Этап 1

Для фона нарисуем картинку fon.jpg размером 1600x1 в расчете на максимальную ширину окна 1600 пикселов: 

<BODY background=./pic/fon.jpg bgcolor=white text=black
      link=blue alink=red vlink=purple>

Еще лучше, используя стилевое указание (CSS), запретить повторение фоновой картинки по горизонтали: 

<BODY style="background:repeat-y url(./pic/fon.jpg)"
      bgcolor=white text=black
      link=blue alink=red vlink=purple>

Картинка даст нам белый фон с зеленой полосой слева.

На заголовочной части страницы разместим три элемента: логотип, заголовок и дополнительную картинку для балансировки композиции. Сделаем так, чтобы при любом размере окна картинка-логотип располагалась слева, вспомогательная картинка — справа, а заголовок сайта — всегда по центру.

Задумка реализуется при помощи таблицы: 


<TABLE border=0 cellspacing=0 cellpadding=0 width=100%>
  <TR valign=top align=center>
    <TD width=120>
      <IMG src=./pic/logo.gif width=120 height=90 border=0
           hspace=0 vspace=0 alt="Логотип Роботландии">
    </TD>
    <TD>
      <IMG src=./pic/robot.gif width=380 height=84 border=0
           hspace=10 vspace=0 alt=Роботландия>
    </TD>
    <TD width=73>
      <IMG src=./pic/ru.gif width=73 height=86 border=0
           hspace=0 vspace=0 alt="">
    </TD>
  </TR>
</TABLE>

Заметим, что в теге TABLE написано: width=100%. Это обеспечит резиновое поведение таблицы.

Первая ячейка ограничена по ширине указанием width=120 (ширина логотипа), третья — указанием width=73 (ширина вспомогательной картинки). Ширина средней ячейки не ограничена, значит, “резиновой” будет именно она при фиксированных размерах двух других. Так как в теге TR задано align=center, картинка-заголовок будет центрироваться внутри этой резиновой клетки.

В картинке-заголовке использован атрибут hspace=10. Это значение обеспечит наличие “воздушного” пространства между заголовком, логотипом и персонажем при сильном уменьшении окна браузера.

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

Посмотрите страничку в “натуральном” виде (возврат — кнопка Назад на инструментальной панели браузера).

Этап 2

Верхнюю полоску меню с выравниванием по правому краю закодируем еще одной табличной строкой: 

  <TR valign=top>
    <TD>&nbsp;</TD>
    <TD colspan=2 align=right>
       <NOBR>
         начало  
         <A href=sale.htm>продукты</A>  
         <A href=history.htm>история</A>  
         <A href=link.htm>ссылки</A>  
         <A href=map.htm>карта</A>
       </NOBR>
    </TD>
  </TR>

Меню заключаем в теги <NOBR>...</NOBR>, чтобы оно не “разваливалось” при уменьшении размеров окна. Обратите внимание — две последних табличные клетки объединены в одну.

Еще одну строку добавим в таблицу для проведения резиновой разделительной полосы: 

  <TR valign=top>
    <TD>&nbsp;</TD>
    <TD colspan=2><HR size=1 noshade></TD>
  </TR>

Результат показан на рисунке:

Эта страничка в “натуральном” виде.

Этап 3

Займемся теперь содержанием страницы. Откроем новую таблицу, и будем записывать тексты внутри ее второй клетки: 

<TABLE border=0 cellspacing=0 cellpadding=0 width=100%>
  <TR valign=top>
    <TD width=130>
      <IMG src=./pic/empty.gif width=130 height=1 border=0
           hspace=0 vspace=0 alt="">
   </TD>
    <TD colspan=2>
       <P>
Роботландия&nbsp;&#151; это негосударственное
образовательное учреждение. В Роботландии работает
дистанционный университет.
       <P>
Роботландский университет&nbsp;&#151; это сетевая школа, в
которой обучаются учителя и школьники индивидуально или
совместно.
    </TD>
  </TR>
</TABLE>

Заметьте, что в первую ячейку погружена картинка-распорка шириной не 120, а 130 пикселов. Это сделано для того, чтобы текст не прижимался слишком близко к зеленой вертикальной полосе.

Замечание. Картинка-распорка часто используется в сайтостроении для точного (по пикселам) размещения элементов в окне браузера. В картинке empty.gif всего одна точка, и та сделана прозрачной, но такую невидимую картинку удобно использовать, растягивая ее до нужного размера при помощи атрибута witdh тега IMG.

Новая версия сайта.

Этап 4

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

<TABLE border=0 cellspacing=0 cellpadding=0 width=100%>
  <TR valign=bottom>
    <TD width=120>
      <IMG src=./pic/empty.gif width=120 height=1 border=0
           hspace=0 vspace=0 alt="">
    </TD>
    <TD align=right><BR>&copy; Иван Сидоров <A
        href=mailto:kurs@robotland.botik.ru
        >kurs@robotland.botik.ru</A>
    </TD>
  </TR>
  <TR valign=top>
    <TD> </TD>
    <TD valign=bottom><HR size=1 noshade></TD>
  </TR>
  <TR valign=top>
    <TD> </TD>
    <TD align=right>
       <NOBR>
         начало  
         <A href=sale.htm>продукты</A>  
         <A href=history.htm>история</A>  
         <A href=link.htm>ссылки</A>  
         <A href=map.htm>карта</A>
       </NOBR>
    </TD>
</TABLE>

Окончательный вид резинового сайта.

[содержание] [советы] [таблица как инструмент дизайнера]       Иван Сидоров kurs@robotland.botik.ru