Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение высшего
профессионального образования
«НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТОМСКИЙ
ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»
УТВЕРЖДАЮ
Зав. каф. ОСУ
Канд. техн. наук, доцент
______________О.Б.Фофанов
"_____" _____________________ 20__ г.
Компьютерный практикум
(часть 1)
Методические указания к лабораторным работам
для студентов направления 230700 Прикладная информатика
Лабораторная работа 3
2013
1
ЛАБОРАТОРНАЯ РАБОТА № 3
Табличная верстка страницы
Цель работы:
- знакомство с приемами табличной верстки web-страницы
- закрепление знаний по CSS
Теоретическая часть
ВЕРСТКА СТРАНИЦЫ
Вёрстка веб-страниц - процесс формирования веб-страниц в текстовом либо WYSIWYG-
редакторе, а также результат этого процесса, то есть собственно веб-страницы.
WYSIWYG (произносится [ w ziw ], является аббревиатурой от англ. What You See Is What You Get, «что
видишь, то и получишь») - свойство прикладных программ , в которых содержание отображается в процессе
редактирования и выглядит максимально близко похожим на конечную продукцию , которая может быть печатным
документом, веб-страницей или презентацией.
Под вёрсткой подразумевается применение html или html+css. Второй вариант является
наиболее распространённым. HTML- вёрстка бывает блочной (div) и табличной (table). Оба
варианты имеют свои достоинства и недостатки . Вообще , есть , конечно , и другие варианты
вёрстки, более сложные, но они не всегда поддерживаются всеми браузерами.
Данная лабораторная работа посвящена вопросам табличной верстки web-страниц.
ТАБЛИЧНАЯ ВЁРСТКА
Табличная вёрстка выполняется с помощью таблиц, которые вкладываются друг в друга.
Вёрстка с помощью таблиц возникла гораздо раньше блочной , поэтому почти все браузеры
считывают её корректно . К тому же , верстать сайты таким образом удобно , если необходима
конструкция нескольких колонок.
К минусам табличной вёрстки можно отнести то, что при большом количестве вложенных
таблиц получается громоздкий код, который сложно редактировать. Сайты, выполненные с
помощью таблиц плохо индексируются поисковыми системами. От этого страдают сайты ,
которые по своему содержимому вполне могли бы попасть на хорошие позиции в поисковых
выдачах.
Различают жесткую и резиновую табличную верстку.
ЖЕСТКАЯ ТАБЛИЧНАЯ ВЁРСТКА
Таблицы практически идеальны для так называемой жесткой или фиксированной верстки.
При использовании таблиц можно легко задать фиксированные ширину и высоту каждому
элементу, а при изменении размеров окна браузера элементы таблицы не сместятся друг под
друга. Однако при изменении размеров окна браузера часть информации будет не видима.
Пример реализации жесткой табличной верстки.
<html>
<head>
<title>Жесткая табличная верстка сайта</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9; padding:20px;
text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd;
padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-
align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-
align:top}
.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9;
font-size:13px}
2
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© Все права защищены</td>
</tr>
</table>
</body>
</html>
Поясним некоторые конструкции данного примера.
В начале кода созданы несколько стилевых классов:
.header – предназначен для форматирования шапки страницы (верхней строки);
.left_col - предназначен для форматирования левой колонки (средней строки) страницы;
.center_col - предназначен для форматирования центральной колонки (средней строки)
страницы;
.right_col - предназначен для форматирования правой колонки (средней строки) страницы;
.footer - предназначен для форматирования «подвала» (нижней строки) страницы.
Затем каждый из стилевых классов применялся к определенным ячейкам таблицы.
Для формирования каркаса страницы в виде таблицы:
Указываем ширину первой и третьей ячейки среднего ряда:
width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2,
получаем 300px.
Ширина среднего столбца (ячейки) равна ширина таблицы (860px) - (минус) ширина
левого и правого столбца (300px).
Что касается высоты, то все ячейки одного ряда таблицы автоматически выравниваются по
самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной —
крайней левой.
При расчете размеров всегда нужно учитывать значения padding, margin, border. Значения
этих атрибутов задаются так:
padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти
пикселям
или так:
padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое –
нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху).
Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в
процентах, то есть они не зависят от размера монитора или окна браузера.
3
РЕЗИНОВАЯ ТАБЛИЧНАЯ ВЁРСТКА
При резиновой (плавающей) верстке сайта таблицы также могут быть полезны, ведь
ширина ячеек таблицы может быть задана не только в абсолютных величинах ( пикселях), но и в
относительных (процентах).
Пример реализации резиновой табличной верстки.
Для получение резиновой верстки необходимо изменить значение лишь одного атрибута в
теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от
разрешения монитора . В нашем случае ширина первого и третьего столбцов ( ячеек) среднего ряда
установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице.
Недостатком такого типа верстки сайта является непостоянная структура содержимого
«резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом
изменяется и внешний вид страницы.
СМЕШАННАЯ ТАБЛИЧНАЯ ВЁРСТКА
При написании данного раздела использованы материалы сайта:
http://www.pastukhova.com/lesson1.php.
Некоторые элементы – элементы формы – более подробно будут изучены в последующих
лабораторных работах. Однако , их можно испо льзовать в данной лабораторной работе для
реализации предложенного шаблона страницы.
1. Создание "каркаса" страницы
Итак, имеется макет страницы. На рисунке - его уменьшенное изображение. Создадим web-
страницу, которая:
- не зависимо от разрешения экрана , браузера ( возьмем самые популярные : IE, Firefox,
Opera) и темы оформления Windows выглядела бы одинаково - как на макете;
- была "читаемой" даже при отключенной графике;
- имела легкий, удобный для редактирования html-код;
- растягивалась на полную ширину экрана.
4
Создайте в отдельной папке файлы index.html и style.css. В процессе верстки
постараемся большую часть форматирования вынести в style.css:
- размер html-страниц будет меньше;
- если в будущем необходимо будет отредактировать дизайн сайта , тогда не понадобится
менять все html-файлы. Необходимо будет модифицировать только style.css.
Наметим "каркас" страницы. Удобно делать его в виде таблицы 100%-й высоты,
разделенной на 3 горизонтальные области - Top, Text и Bottom. Top и Bottom имеют
фиксиро ванную высоту, а ячейка Text растягивается по высоте на всю оставшуюся часть экрана .
Таким образом , даже когда на странице мало или совсем нет текста , Bottom всегда находится там ,
где ему положено - внизу.
Сделаем разметку немного сложнее, т.к. нам нужно, чтобы блоки Search, News, Copyright
были равны по ширине. Лучший способ этого добиться - поместить их в ячейки таблицы ,
расположенные одна над другой.
5
Вот получившийся html-код (в примере специально поставлен параметр border="1" в теге
<table> и написаны внутри каждой ячейки ее название, чтобы мы удостоверились, что сделали
разметку правильно). Потом все это нужно будет удалить.
index.html
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<table border="1" class="main">
<tbody>
<tr>
<td class="top" colspan="2">top</td>
</tr>
<tr>
<td class="search">search</td>
<td class="topmenu">topmenu</td>
</tr>
<tr>
<td class="news">news</td>
<td class="text">text</td>
</tr>
<tr>
<td class="copyright">copyright</td>
<td class="bottommenu">bottommenu</td>
</tr>
</tbody>
</table>
style.css
table.main {width: 100%; height: 100%;}
td.top {}
td.search {}
td.topmenu {}
td.news {width: 30%;}
td.text {width: 70%; height: 100%;}
td.copyright {}
td.bottommenu {}
Для каждой ячейки был создан класс в style.css.
Посмотрите на первый рисунок. Пока эти классы пустые, таблица в браузере не очень
похожа на ту, которая на макете . Чтобы она выглядела так , как на втором рисунке , необходимо
внести еще несколько изменений.
6
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;
}
Каркас готов.