Основы работы с 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. Все права защищены. |
Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий