sam_rab_1

}

a.menu {

font-size: 10px; text-transform: uppercase; color: #ffffff; font-weight: bold; text-decoration: none;

}

Меню и строка поиска готовы.

4. ЯЧЕЙКИ COPYRIGHT И BOTTOM

Еще раз вспомним наш макет. Две нижние ячейки довольно простые для верстки, но и здесь есть свои тонкости.

Сначала сверстаем левую ячейку.

В ячейке Copyright нужно добиться того, чтобы сверху она отчеркивалась линией, не доходящей до края ячейки на 5 пкс. Для этого сделаем соответствующий отступ внутри ячейки (справа), а все остальное пространство заполним таблицей с одной-единственной ячейкой. Верхняя граница у нее будет в виде серой линии толщиной 1 пкс (на рисунке она помечена красным пунктиром). Также для ячейки укажем цвет фона и шрифт. Текст разместим по центру.

index.html

<td class="copyright"> <table class="main">

<tbody>

<tr>

<td class="cprghtitem">Copyright © RealErtateCompany.com</td> </tr>

</tbody>

</table>

</td>

style.css

td.copyright { padding-right: 5px; height: 32px;}

td.cprghtitem {

border-top: 1px solid #cacaca; background-color: #f5f5f5; font-size: 10px;

color: #656565; vertical-align: middle; text-align: center;}

Теперь правая ячейка (BottomMenu).

11

Для нее сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица - как и в первом случае, всего с одной ячейкой. Это сделано для того, чтобы в этой ячейке указать в качестве фона изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую - собственно ссылки нижнего меню. Но html-код в этом случае был бы тяжелее.

В ячейку со ссылками - назовем ее BtmenuItem - вставим ссылки, разделенные изображением точек (dots2.gif). У dots2.gif я выставила величины:

hspace="12" - это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (Как вариант можно было бы поставить пару пробелов: ).

vspace="1"- отступ по вертикали - для того, чтобы точки были повыше, как бы посередине букв (по вертикали).

index.html

<td class="bottommenu"> <table class="main">

<tbody>

<tr>

<td class="btmenuitem">

<a href="" class="menu">Home</a>

<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> <a href="" class="menu">News</a>

<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> <a href="" class="menu">About Us</a>

<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> <a href="" class="menu">Catalog</a>

<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> <a href="" class="menu">Contacts</a>

</td>

</tr>

</tbody>

</table>

</td> style.css

td.bottommenu {

background-image: url(bottom_bg.jpg); background-color: #ff8e51;

height: 32px;}

td.btmenuitem {

background-image: url(bottom_shadow.jpg); background-repeat: no-repeat; vertical-align: middle;

text-align: center;}

Ячейка с копирайтом и нижнее меню готовы.

5. ЗАПОЛНЕНИЕ ЯЧЕЙКИ NEWS

Займемся ячейкой News. Нужно, чтобы в ней располагались:

1.Блоки с текстом (те, которые с серой окантовкой).

2.Блок с заголовком ":: NEWS".

12

width: 100%;}

select.input { width: 100%;}

Для таблицы и ячейки с заголовком можно воспользоваться созданными ранее классами hdrtab и hdr. Добавили только width="100%", чтобы ячейка hdr растягивалась на 100% по ширине и подтягивала надпись "Our Best Proposals" к левому краю:

<table class="hdrtab"> <tbody>

<tr>

<td><img width="7" height="37" border="0" src="hdrtabpic.jpg" alt="" /></td> <td width="100%" class="hdr">Our best proposals:</td>

</tr>

</tbody>

</table>

Для ячеек третьей таблицы - назовем ее Content - воспользуемся созданным ранее классом newsitem. Для ячеек с изображениями создадим дополнительный класс image, в котором пропишем выравнивание по центру ячейки. Плюс сами изображения обведем серой линией шириной 1 пкс. Для заголовка используем уже имеющийся класс hdr2. Для таблицы Content укажем отступы (margin) от границ ячейки Text. Сама таблица не будет 100%-й ширины (т.к. тогда margin не работает корректно). Растягивать ее на всю ячейку будет текст, который в ней содержится.

index.html

<table class="content"> <tbody>

<tr>

<td class="newsitem image">

<img width="136" height="105" border="0" src="house1.jpg" class="border" alt="" /></td>

<td class="newsitem">

<h2 class="hdr2">Article title goes here</h2>

Lorem ipsum dolor sit amet... <a href="">>></a></td> </tr>

<tr>

<td class="newsitem image">

<img width="135" height="94" border="0" src="house2.jpg" class="border" alt="" /></td>

<td class="newsitem">

<h2 class="hdr2">Article title goes here</h2>

Lorem ipsum dolor sit amet... <a href="">>></a></td> </tr>

<tr>

<td class="newsitem image">

<img width="135" height="88" border="0" src="house3.jpg" class="border" alt="" /></td>

<td class="newsitem">

<h2 class="hdr2">Article title goes here</h2>

Lorem ipsum dolor sit amet... <a href="">>></a></td> </tr>

</tbody>

</table> style.css

table.content { border-collapse: collapse;

17

margin: 6px 8px 8px 12px;}

td.image { padding: 10px;

text-align: center; vertical-align: middle;}

img.border {

border: 1px solid silver;}

Ячейка Text заполнена.

План выполнения работы части 1 самостоятельной работы 1

Используя теоретическую часть, реализуйте:

1)жесткую табличную верстку любой Вашей странички;

2)резиновую табличную верстку той же странички;

3)сравните результаты поведения информации странички при изменении размеров окна и загрузке в разных браузерах. Опишите полученные результаты в отчете;

4)реализуйте смешанную табличную верстку так, как описано в примере (сохраните результаты в отдельной папке). В качестве графических файлов можно использовать предложенные вместе с данной работой файлы;

5)продумайте и реализуйте смешанную табличную верстку любой Вашей странички аналогично представленного примера;

18

Часть2. Блочная верстка страницы

БЛОЧНАЯ ВЁРСТКА ИЛИ ВЕРСТКА DIV’АМИ

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

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

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

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

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

Под понятием блок в общем случае имеют в виду элементарную прямоугольную область. Для указания атрибутов этой области существует ряд качеств, среди которых выделяют рамку, поля (контуры) и отступы. Наполнением блока может служить любая информация – изображение, текстовый фрагмент или что-либо другое.

В общем случае блок представляется следующей структурой:

Он состоит из некоторых основных частей:

Рамка или border. Для этой области возможно определить некоторые качества – цвет, вид, толщина.

Поле или padding - используется для размещения информации в блоке, чтобы он правильно располагался в контуре.

Отступы или margin - это размер расстояния между отдельно идущими блоками. С помощью этого элемента можно размещать блоки на заданном расстоянии друг от друга.

19

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

ИСПОЛЬЗОВАНИЕ ЭЛЕМЕНТА DIV

HTML-элемент <DIV> … </DIV> позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.

Рассмотрим приемы блочной верстки web-страницы на следующем примере.

ПРИМЕР БЛОЧНОЙ ВЕРСТКИ

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

Шаг 1.

Создайте в отдельной папке файлы index.html (такое название связано с алгоритмом работы серверов, они всегда ищут прежде всего страницу именно с таким названием) и style_7.css. В процессе верстки постараемся большую часть форматирования вынести в

style_7.css:

20