начало → тема 5 → дизайн на таблицах

04. Дизайн на таблицах

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

На этой странице:

Вверх Заголовочная часть сайта

Построим заголовочную часть, состоящую из трёх элементов:

Заголовочная часть сайта

Зададимся целью построить “резиновый” заголовок, то есть такой, который бы подстраивался под текущую ширину окна, сохраняя запланированные типы выравнивания своих элементов:

Заголовочная часть сайта в окне другой ширины

Исходный материал — три картинки:

Логотип Заголовок Декорация

Поместим эти изображения в таблицу, состоящую из одной строки с тремя ячейками:

Заголовочная часть в таблице

Для таблицы укажем следующие атрибуты:

Атрибут Комментарий
border=0 Отключаем показ табличных границ
cellspacing=0
cellpadding=0		 Убираем все отступы
width=100% Растягиваем таблицу на всю ширину окна

Для ячеек зададим атрибуты:

Атрибут (1,1) (1,2) (1,3) Комментарий
align left center right В первой — слева, в последней — справа, в средней — по центру.
valign — middle — В средней — центрирование по вертикали.
width 94 — 94 Для первой ячейки укажем ширину, равную ширине картинки, которая в ней находится. Также поступим с последней ячейкой. Для средней ячейки ширину не задаём — она и будет “резиновой”.

Для рисунка-заголовка укажем отступ по горизонтали в 10 пикселов (hspace=10), чтобы картинки не смыкались в узких окнах.

Откройте окно построенного примера и проверьте “резиновые” свойства заголовочной части, меняя размеры окна:

Посмотреть 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Заголовок страницы</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <!-- Заголовочная часть сайта-->
    <TABLE border=0 cellspacing=0 cellpadding=0 width="100%">
      <TR>
        <TD width=94 align=left>
           <IMG src="pic/coc.gif" width=94 height=91
                border=0 hspace=0 vspace=0 
                alt="Логотип" title="На начало сайта">
        </TD>
        <TD valign=middle align=center>
          <IMG src="pic/title.png" 
               width=390 height=42 border=0
               hspace=10 vspace=0 
               alt='Турниры Роботландии' 
               title='Турниры Роботландии'>
        </TD>
        <TD width=94 align=right>
          <IMG src="pic/kor.png" 
               width=94 height=91 border=0
               hspace=0 vspace=0 alt="">
        </TD>
      </TR>
    </TABLE>

    <HR size=1 noshade>

    <H2>Заголовок страницы</H2>
    
    <P>
Содержание страницы

 </BODY>
</HTML>

Вверх Табличный макет страницы

Спроектируем страницу, макет которой показан на рисунке:

Макет страницы

Построим таблицу, имеющую подобную структуру:

Логотип Заголовок
Меню Основное содержимое Новости
Автор

Код этой таблицы: 

  
<TABLE border=1 cellspacing=0>
  <TR>
    <TD>
      Логотип
    </TD>
    <TD colspan=2>
      Заголовок 
    </TD>
  </TR>
  <TR>
    <TD rowspan=2>
      Меню
    </TD>
    <TD>
      Основное содержимое 
    </TD>
    <TD>
      Новости 
    </TD>
  </TR>
  <TR>
    <TD colspan=2>
      Автор
    </TD>
  </TR>
</TABLE>

Остаётся назначить классы, определить стили и наполнить страницу содержимым. Можно, например, получить такую страницу:

Пример страницы, построенной по макету

Посмотреть

Коды этой страницы:

CSS 

 
BODY
{
  margin:0; padding:0;
  font: small Georgia, serif;
}
H1,H2,H3,H4
{
  color: #e5e5e5;
  background:#4d4d4d;
  padding:5px;
  clear:both; 
}
.picleft
{
  float:left;
  margin: 0 10px 10px 0;
}
A {text-decoration: none;}  
A:link    {color:blue;} 
A:active  {color:red;}     
A:visited {color:purple;}  
A:hover 
{
  color:white;
  background: #ff7f00; 
}
/* Табличный макет верстки            
   ----------------------- */
TABLE.maket
{
  background:#edf7fb;
  border:1px solid black;
}
TABLE.maket TD 
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
/* Логотип */
TABLE.maket TD.logo
{
  border-right:1px solid black;
  width:100px; 
  height:98px; 
  background:#ffe3cc; 
  text-align:right;
}
/* Заголовок */
TABLE.maket TD.title
{
  border-bottom:1px solid black;
  vertical-align:middle;
  background:white; 
}
/* Меню */
TABLE.maket TD.menu
{
  border-right: 1px solid black;
  font: 18px Arial,sans-serif; 
  text-align:right;
  background:#ffe3cc;
}
TABLE.maket TD.menu UL
{
  margin:0;            /* удалим списочный отступ */
  list-style:none;     /* запретим показывать маркер*/
  white-space:nowrap;  /* запретим переносить строку*/
}
/* Новости */
TABLE.maket TD.news
{
  border-left: 1px solid black;
  background:#e5e5e5;
  width:30%;
}
/* Подвал с авторской информацией */
TABLE.maket TD.author
{
  border-top: 1px solid black;
  background:#ffbf00;
  font: 80% Arial,sans-serif; 
  white-space:nowrap;  
}

HTML 

  
<TABLE class=maket cellspacing=0>
  <TR>
    <TD class=logo>
      <!-- Логотип --> 
    </TD>
    <TD class=title colspan=2>
      <!-- Заголовок -->  
    </TD>
  </TR>
  <TR>
    <TD class=menu rowspan=2>
      <!-- Меню -->
      <UL>
        <LI>начало
        <LI><A href="book01.htm">книга 01</A>
        <LI><A href="book02.htm">книга 02</A>
        <LI><A href="book03.htm">книга 03</A>
        <LI><A href="book04.htm">книга 04</A>
        <LI><A href="book05.htm">книга 05</A>
        <LI><A href="book06.htm">книга 06</A>
        <LI><A href="book07.htm">книга 07</A>
        <LI><A href="book08.htm">книга 08</A>
        <LI><A href="book09.htm">книга 09</A>
        <LI><A href="book10.htm">книга 10</A>
      </UL>
    </TD>
    <TD>
      <!--Основное содержимое -->
    </TD>
    <TD class=news>
      <!-- Новости -->
    </TD>
  </TR>
</TABLE>

Вверх Картинки в таблицах

Использование распорок

Распорка (GIF, содержащий одну прозрачную точку) довольно часто используется в качестве инструмента дизайнера. “Растягивая” точку до прямоугольника нужных размеров, можно придать “жёсткость” проектируемым областям, не позволяя им уменьшаться вслед за уменьшением окна браузера.

Покажем метод использования распорок на примере. Пусть нужно создать страницу по следующему макету:

Макет страницы

Решение без распорок:

Посмотреть 
  
<TABLE border=0 cellspacing=0 cellpadding=10 width="100%">
  <TR>
    <TD width=100 bgcolor="#ffe3cc">&nbsp;</TD>
    <TD>
      <DIV style="text-align:center">
        <IMG src="pic/1338.gif" 
             width=287 height=37 border=0
             alt='Заголовок сайта'
             title='Заголовок сайта'>
      </DIV>
      <HR size=1 noshade>
      <P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. 
    </TD>
    <TD width=100 bgcolor="#ffe3cc">&nbsp;</TD>
  </TR>
</TABLE>

Обратите внимание: при уменьшении ширины окна поля начинают уменьшаться, несмотря на то, что в ячейках, которые их задают, прописано указание width=100.

Распорки помогут исправить ситуацию:

Посмотреть 
  
<TABLE border=0 cellspacing=0 cellpadding=10 width="100%">
  <TR>
    <TD width=100 bgcolor="#ffe3cc"
     ><IMG src="pic/empty.gif" 
              width=100 height=1 alt=""></TD>
    <TD>
      <DIV style="text-align:center">
        <IMG src="pic/1338.gif" 
             width=287 height=37 border=0
             alt='Заголовок сайта'
             title='Заголовок сайта'>
      </DIV>
      <HR size=1 noshade>
      <P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. 
    </TD>
    <TD width=100 bgcolor="#ffe3cc"
     ><IMG src="pic/empty.gif" 
              width=100 height=1 alt=""></TD>
  </TR>
</TABLE>

Теперь, при уменьшении окна, браузер включит линейку прокрутки, но не изменит заданную ширину полей.

Рамка

Простейшую рамку можно получить, поместив картинку в табличную ячейку:

Задумчивый портрет

Код этой таблицы: 

  
<TABLE width=140 height=101 border=1 
       cellspacing=0 cellpadding=0>
  <TR>
    <TD><IMG src="pic/1289.gif" 
             width=140 height=101 border=0 hspace=0 vspace=0 
             alt="Задумчивый портрет"
             title="Задумчивый портрет"></TD>
  </TR>
</TABLE>

Обратите внимание, код элемента IMG плотно прилегает (без пробелов и концов строки) к коду табличной ячейки. А если записать код с пробелами? 

  
<TABLE width=140 height=101 border=1 
       cellspacing=0 cellpadding=0>
  <TR>
    <TD>
      <IMG src="pic/1289.gif" 
           width=140 height=101 border=0 hspace=0 vspace=0 
           alt="Задумчивый портрет"
           title="Задумчивый портрет">
    </TD>
  </TR>
</TABLE>

Это приведёт к неплотному прилеганию картинки к границам ячейки (в браузере IE):

Задумчивый портрет

Сконструируем паспарту с подписью (справа показана структура таблицы, в которую погружена картинка и подпись):

Задумчивый портрет
Задумчивый портрет
Картинка
Подпись

Код таблицы с картинкой: 

  
<TABLE style="border:5px ridge #ccbbaa" width=140
       cellspacing=20 cellpadding=0 bgcolor="#e5e5e5">
  <TR>
    <TD><IMG src="pic/1289.gif" 
             width=140 height=101 border=1
             hspace=0 vspace=0 
             alt="Задумчивый портрет"
             title="Задумчивый портрет"></TD>
  </TR>
  <TR align=center valign=middle>
    <TD>Задумчивый портрет</TD>
  </TR>
</TABLE>

Теперь построим декоративную рамку, которую можно использовать для обрамления картинок или для обрамления других объектов на гипертекстовой странице.

Сначала нарисуем рамку в графическом редакторе:

Нарисованная рамка

При помощи подходящего средства (например, в программе Adobe ImageReady) вырежем из рисунка “кирпичики”, которые будем использовать для построения рамки произвольного размера:

Заготовки для рамки

Полученные заготовки будут фоновыми картинками в соответствующих ячейках таблицы размером 3×3. Саму картинку будем располагать в центральной ячейке (2,2), а подпись в ячейке (3,2):

Макет таблицы

Реализуя задуманное, получим следующее оформление для картинки:

Задумчивый портрет
Задумчивый портрет

Код этого примера: 

  
<TABLE border=0 cellspacing=0 cellpadding=0 bgcolor="#e5e5e5">
  <TR>
    <TD style="background:no-repeat url(pic/frame11.gif)"
        width=57 height=62>
      <IMG src="pic/empty.gif" width=57 height=62 border=0
           hspace=0 vspace=0 alt=""></TD>
    <TD style="background:repeat-x url(pic/frame12.gif)">
      <IMG src="pic/empty.gif" width=1 height=62 border=0
           hspace=0 vspace=0 alt=""></TD>
    <TD style="background: no-repeat url(pic/frame13.gif)"
        width=68 height=62>
      <IMG src="pic/empty.gif" width=68 height=62 border=0
           hspace=0 vspace=0 alt=""></TD>
  </TR>
  <TR>
    <TD style="background: repeat-y url(pic/frame21.gif)">
      <IMG src="pic/empty.gif" width=57 height=1 border=0
           hspace=0 vspace=0 alt=""></TD>
    <TD align=center valign=middle>
      <IMG src="pic/1289.gif" width=140 height=101 border=1
           hspace=0 vspace=0 
           alt="Задумчивый портрет"
           title="Задумчивый портрет">
    </TD>
    <TD style="background: repeat-y url(pic/frame23.gif)">
      <IMG src="pic/empty.gif" width=68 height=1 border=0
           hspace=0 vspace=0 alt=""></TD>
  </TR>
  <TR>
    <TD style="background: no-repeat url(pic/frame31.gif)"
        width=57 height=72>
      <IMG src="pic/empty.gif" width=57 height=72 border=0
           hspace=0 vspace=0 alt=""></TD>
    <TD style="background: repeat-x url(pic/frame32.gif);  /
               font:70% Arial,sans-serif"
        align=center valign=middle>
        Задумчивый портрет
    </TD>
    <TD style="background: no-repeat url(pic/frame33.gif)"
        width=68 height=72>
      <IMG src="pic/empty.gif" width=68 height=72 border=0
           hspace=0 vspace=0 alt=""></TD>
  </TR>
</TABLE>

В пустых ячейках используется распорка (empty.gif). Пустой ячейку оставлять нельзя — не все браузеры правильно показывают таблицу с пустыми клетками. Использовать неразрывный пробел (&nbsp;) тоже нельзя — при увеличении размера шрифта, размеры пробела также будут увеличиваться, и это может привести к появлению разрывов в рамке.

Заготовку легко использовать многократно, например, поместить в неё другую картинку:

Вася Кук изучает информатику
Вася Кук изучает информатику

Рамку можно использовать в качестве врезки для размещения в ней различных материалов:

Азы информатики
Александр Александрович Дуванов «Азы информатики» — это курс для начинающих. Он рассчитан на 5 лет школьного обучения, стартовый возраст — пятый класс (но можно и с третьего; зависит от уровня предварительной подготовки учеников).

Автор курса — Александр Александрович Дуванов. Он же автор электронной компоненты курса.

kurs@robotland.pereslavl.botik.ru

Сборная графика

О преимуществах разрезанной картинки говорилось в уроке 12.

Пусть на страницу нужно вывести следующее изображение:

Исходная картинка

Оптимизация приводит к следующему результату: в форматах GIF и PNG-8 качество получается плохим. Размер файла в формате PNG-24 (сжатие без потерь) — 83 килобайта. Оптимизация в формате JPEG приводит к приемлемому результату по качеству при файле размером в 52 килобайта.

Но даже объём в 52 килобайта великоват для Web.

Разрежем картинку на четыре части:

Выкройка

Оптимизация частей приводит к неплохому результату — сокращению общего размера до 29 килобайт (уменьшение на 44 %):

Фрагмент Формат Размер
img11 GIF 1 004 КБ
img12 PNG 14 808 КБ
img21 JPEG 7 801 КБ
img22 GIF 5755 КБ
Итого   29 368 КБ

Для отображения картинки погрузим её части в таблицу 3×3 (ячейки, которые предстоит объединить, выделены цветом):

Макет таблицы

Последний столбец — вспомогательный. Без него браузерам будет трудно построить таблицу, в которой нет ни одного “нормального” столбца на три ячейки.

В каждую ячейку последнего столбца поместим картинку-распорку шириной в 1 пиксел.

Если вы уже забыли, то распорка — это прозрачное GIF-изображение размером 1×1 пиксел. То есть в этой картинке всего один пиксел, и он — прозрачный. Используя размерные атрибуты элемента IMG, эту картинку можно растянуть по горизонтали и вертикали до нужных размеров. Например, тег 

  
<IMG src="pic/empty.gif" width=200 height=200 
     border=0 hspace=0 vspace=0 alt="">

задаёт на экране квадрат со стороной 200 пикселов (файл empty.gif — распорка). Понятно, что этот квадрат, да и любой другой прямоугольник, построенный на экране при помощи картинки empty.gif, пользователь не увидит — ведь размерные атрибуты “растягивают” прозрачную точку!

Результат работы представлен ниже:

Посмотреть 
  
<TABLE width=401 height=300 
       border=0 cellspacing=0 cellpadding=0>
  <TR>
    <TD
      ><IMG src="pic/img11.gif" 
            width=140 height=124 
            border=0 hspace=0 vspace=0
            alt="Козлёнок" title="Козлёнок"></TD>
    <TD rowspan=2 
      ><IMG src="pic/img12.png" 
            width=260 height=183 
            border=0 hspace=0 vspace=0 
            alt="Козлёнок" title="Козлёнок"></TD>
  <TD
   ><IMG src="pic/empty.gif" width=1 
            height=124 alt=""></TD>
  </TR>
  <TR>
    <TD rowspan=2
      ><IMG src="pic/img21.jpg" 
            width=140 height=176 
            border=0 hspace=0 vspace=0 
            alt="Козлёнок" title="Козлёнок"></TD>
  <TD
   ><IMG src="pic/empty.gif" 
            width=1 height=59 alt=""></TD>
  </TR>
  <TR>
    <TD rowspan=2
      ><IMG src="pic/img22.gif" 
            width=260 height=117 
            border=0 hspace=0 vspace=0 
            alt="Козлёнок" title="Козлёнок"></TD>
  <TD
   ><IMG src="pic/empty.gif" 
            width=1 height=117 alt=""></TD>
  </TR>
</TABLE>

Отметим важные моменты в этом коде.

При разрезании исходной картинки в программе Adobe ImageReady, генерируется автоматический HTML-код, подобный приведённому выше, в качестве распорки указывается файл spacer.gif

начало → тема 5 → дизайн на таблицах