Тема 12. Основи верстки. Таблична верстка.

Особливості CSS та його застосування

Приклад простої табличної верстки
Приклад простої таблиці
Розтягування комірок
Висота та ширина комірок
Вирівнювання та відступи в комірках
Вкладені таблиці
Приклад простої табличної верстки

1. Основні види верстки Веб-сторінок – це таблична (тег <div> з використанням CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Жорстка таблична верстка сайту</title>

.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}

</style>

</head>

<body>

<tr>

<td colspan="3" class="header">Мій сайт</td>

</tr>

<tr>

<td class="center_col">Зміст</td>

<td class="right_col">Посилання</td>

</tr>

<tr>

</tr>

</table>

</html>

Розглянемо методи її побудови. Для форматування використані класи css. Вказуємо ширину першої і третьої комірки середнього ряду: width: 120px +2*( padding: 15px )= 150px (ширина однієї комірки) - множимо на 2, отримуємо 300px. Ширина середнього стовпця (комірки) = (дорівнює) ширина таблиці (860px) - (мінус) ширина лівого і правого стовпця (360px) - 2*( padding: 30px )= 300px. <br> Що стосується висоти, то всі комірки одного ряду автоматично вирівнюються за найвищою, тому в стилях, в описах середнього ряду була вказана висота тільки однієї – крайньої лівої.

При розрахунку розмірів завжди потрібно враховувати значення padding, margin, border. Значення цих атрибутів задаються так: padding: 20px - внутрішнє поле елемента по всьому своєму периметру дорівнює 20-ти пікселям або так: padding: 10px 0 8px 60px - верхнє внутрішнє поле дорівнює 10-ти пікселям, праве - нулю, нижнє - 8-ми пікселям і ліве - 60-ти пікселям (за годинниковою стрілкою, починаючи зверху).

Жорсткість такої верстки полягає в тому, що розміри таблиці задані в пікселях, а не у відсотках, тобто вони не залежать від розміру монітора або вікна браузера.

Дата добавления: 2015-05-08; просмотров: 658;