Во втором уроке мы уже пробовали сотворить HTML-страницу, однако без использования стилей она получилась, откровенно говоря, убогой. С помощью CSS-стилей можно создать гораздо более красивую и функциональную страницу, что мы и попытаемся сделать.
Создайте в корневом каталоге одного из ваших виртуальных доменов файлы index.html и style.css. В первый будем помещать HTML-код, а во второй — CSS-стили страницы. Набросайте в index.html следующий код:
<html> <head> <title>Главная страница</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <table class="content" border="1" width="100%" height="100%"> <tr> <td height="80px" colspan="3">Шапка</td> </tr> <tr> <td height="30px" colspan="3">Меню</td> </tr> <tr> <td width="200px">Левый контент</td> <td>Основной контент</td> <td width="200px">Правый контент</td> </tr> <tr> <td height="60px" colspan="3">Подвал</td> </tr> </table> </body> </html>
в файл style.css:
* {font-family: verdana; font-size: 12px} body {margin: 0; padding: 0} .content {border-collapse: collapse} .content td {padding: 0}
На этом шаге мы создали каркас HTML-страницы, указали заголовок, кодировку. Подключили внешний файл стилей. В теле страницы создали каркасную таблицу довольно распространенной структуры: шапка, меню, подвал и область контента, представляющую собой три столбца: два узких по бокам и широкий по центру. В стилях задали общий шрифт страницы и убрали поля и отступы тела страницы, чтобы каркасная таблица плотно прилегала к краям браузера. В каркасной таблице убрали поля в ячейках, зазор между ячейками.
Далее, рисуем шапку страницы в графическом редакторе. Я сделал следующий набросок в редакторе Gimp (исходник):