Основы работы с XHTML и CSS


Создание информационного бюллетеня


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

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

Использование таблицы для форматирования информационного бюллетеня

Рис. 8.53.  Использование таблицы для форматирования информационного бюллетеня

Если вы угадали структуру, показанную на рисунке 8.54 и закодированную на листинге 8.54, то вы были правы.

Структурный формат информационного бюллетеня

Рис. 8.54.  Структурный формат информационного бюллетеня

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Newsletter Layout</title>

<style type="text/css"> table {border:outset 1; width:100%; height:150px} table tr {vertical-align:top} table td {border:inset 1} table td#HEAD {text-align:center; vertical-align:middle} table td#COL1 {width:33%} table td#COL2 {width:34%} table td#COL3 {width:33%} </style>

</head> <body>

<table>

<tr> <td id="HEAD" colspan="3"> Header </td> </tr>

<tr> <td id="COL1" rowspan="2"> Column 1

</td> <td id="COL2"> Column 2

</td> <td id="COL3"> Column 3

</td> </tr>

<tr> <td id="ROW" colspan="2"> Bottom Row

</td> </tr>

</table>

</body> </html>

Листинг 8.54. Код структурного формата информационного бюллетеня

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

© 2003-2007 INTUIT.ru. Все права защищены.




Начало  Назад