sam_rab_1

Цель работы:

−знакомство с приемами табличной и блочной верстки web-страницы

−закрепление знаний по CSS

Часть 1. Табличная верстка страницы

Теоретическая часть

ВЕРСТКА СТРАНИЦЫ

Вёрстка веб-страниц - процесс формирования веб-страниц в текстовом либо WYSIWYGредакторе, а также результат этого процесса, то есть собственно веб-страницы.

WYSIWYG (является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») - свойство прикладных программ, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией.

Под вёрсткой подразумевается применение html или html+css. Второй вариант является наиболее распространённым. HTML-вёрстка бывает блочной (div) и табличной (table). Оба варианты имеют свои достоинства и недостатки. Вообще, есть, конечно, и другие варианты вёрстки, более сложные, но они не всегда поддерживаются всеми браузерами.

Данная работа посвящена вопросам табличной верстки web-страниц.

ТАБЛИЧНАЯ ВЁРСТКА

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

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

Различают жесткую и резиновую табличную верстку.

ЖЕСТКАЯ ТАБЛИЧНАЯ ВЁРСТКА

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

Пример реализации жесткой табличной верстки.

1

padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти пикселям

или так:

padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое – нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху).

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

РЕЗИНОВАЯ ТАБЛИЧНАЯ ВЁРСТКА

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

Пример реализации резиновой табличной верстки.

Для получение резиновой верстки необходимо изменить значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице.

Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы.

СМЕШАННАЯ ТАБЛИЧНАЯ ВЁРСТКА

При написании данного раздела использованы материалы сайта: http://www.pastukhova.com/lesson1.php.

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

1. СОЗДАНИЕ "КАРКАСА" СТРАНИЦЫ

Итак, имеется макет страницы. На рисунке - его уменьшенное изображение. Создадим webстраницу, которая:

−не зависимо от разрешения экрана, браузера (возьмем самые популярные: IE, Firefox, Opera) и темы оформления Windows выглядела бы одинаково - как на макете;

−была "читаемой" даже при отключенной графике;

−имела легкий, удобный для редактирования html-код;

−растягивалась на полную ширину экрана.

3

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

1) Чтобы не было промежутков между таблицей и границами экрана, пишем:

html, body {margin:0px; padding:0px;}

2) Чтобы убрать зазоры между ячейками, добавляем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing="0").

table.main {border-collapse: collapse;}

3) Чтобы убрать отступы внутри ячеек, пишем:

td {padding: 0px;}

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

5)Настроим цвет фона для таблицы и элементов форм. Когда фон белый, об этом часто забывают. Тогда у пользователей, установивших какую-нибудь экзотическую тему оформления Windows, некоторые ячейки могут оказаться, например, зелеными.

6)Когда большая часть текста будет написана одним шрифтом (в нашем случае - Tahoma 11px, черный), имеет смысл указать его сразу для всех ячеек и элементов форм.

7)По умолчанию текст и изображения располагаются (вертикально) в середине ячейки. Обычно удобнее, чтобы они подтягивались к верхнему краю. Для этого нужно указать vertical-align:

top для всех ячеек.

body, input, select, textarea {background-color: #ffffff;}

td, input, select, textarea { font-family: Tahoma; font-size: 11px;

color: #000000; vertical-align: top;

}

Каркас готов.

6

2. ЯЧЕЙКА TOP

Теперь будем заполнять ячейки изображениями. Начнем с Top. Посмотрите на макет: верх можно разделить на следующие слои: фон, дом, логотип.

При создании макета применили маленькую хитрость: рисунок с травой и облаками склеен из одного и того же повторяющегося изображения. Это очень удобно, т.к. при растягивании ячейки Top он сможет повторяться столько раз, сколько потребует ширина вашего экрана.

Итак, вырезали часть изображения и назвали его top_bg.jpg.

Подсказка: если бы рисунок был не повторяющимся, нужно было бы заготовить фон для ячейки Top размером не менее 1280 пкс в ширину - такое разрешение экрана у пользователей с мониторами LCD 17-19 дюймов (можно сделать и 1600 пкс, но такое разрешение у очень малого количества пользователей, а всем остальным придется загружать большую картинку).

Отдельно вырежем домик и назовем его house.jpg.

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

−временно отключим слой с облаками в графическом редакторе;

−подложим под лого прямоугольник голубого цвета (такого же, как переход "небооблака");

−вырежем лого и сохраним его в формате .gif. Голубой цвет назначим прозрачным.

7

3. ЯЧЕЙКИ SEARCH И TOPMENU

Теперь будем делать верстку для ячеек Search и TopMenu.

Сделаем фон для каждой из ячеек.

style.css

td.search {

background-image: url(search_bg.jpg); background-color: #dce1e9;

height: 39px;

}

td.topmenu {

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

}

В Search поместим вложенную таблицу.

Ячейки таблицы будут с небольшим отступом справа (чтобы надпись SEARCH не сливалась с формой ввода, а та - с кнопкой). Сама форма поиска, как и ячейка, в которой она находится, будет 100%-ширины.

Но самое оригинальное сделаем с ячейкой, в которой должна быть надпись ":: SEARCH". Назовем ее hdr.

Во-первых, в ней нужно указать параметры шрифта (верхний регистр, жирный). Во-вторых, изображение точек - dots.gif - сделаем его фоном ячейки. Причем фон можно

точно позиционировать (background-position: 10px - отступ от левого края ячейки). И сделаем (отступ текста), чтобы текст не налезал на точки.

Возможно, покажется, что это лишние сложности - не проще ли было бы вставить dots.gif в отдельную ячейку таблицы или написать:

<font color="Brown"><b style="font-size:10px;">:: SEARCH</b></font> и получить

:: SEARCH

Проще. Зато теперь не придется больше задумываться над этим.

Напишите <td class="hdr"><font color="Brown">Заголовок</font></td>, и точки

перед заголовком появятся автоматически. Так как в файле есть еще несколько заголовков такого типа, можно сэкономить время при дальнейшей верстке.

index.html

<td class="search"> <form action="">

<table class="main"> <tr>

<td class="searchitem hdr">Search</td> <td class="searchitem" width="100%">

<input type="text" name="Search" style="width:100%;"></td> <td class="searchitem">

<input type="image" src="button.jpg" width="22" height="39" border="0"></td>

9