Форматирование таблиц
Т.к., по сути, весь наш сайт заключен в таблицы, то, перейдем к форматированию оных.
В файле style.css прописываем следующее:
BODY {
background-image : url(bg.gif);
margin-top: 5px;
}
TABLE{
background: #FFFFCC;
font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
color: black;
font-size: 8pt;
}
Вот как будет теперь выглядеть наша html-страница.
Не надо быть семи пядей во лбу, чтобы догадаться, что:
- первый атрибут таблицы определяет ее фоновый цвет;
- второй - задает наименование шрифта для текста (если у клиента не установлен данный шрифт, то берется следующий по списку); имя sans-serif - говорит браузеру, что надо взять любой рубленый шрифт, который установлен на компьютере;
- третий - задает цвет шрифта;
- четвертый - его размер.
Теперь, для наглядности, наполним центральную колонку нашей страницы текстом. Т.к. текста уже достаточно много, то, убираем фиксированное значение высоты средней таблицы. Абзацы в тексте делаем при помощи тега <BR>
Вот как будет теперь выглядеть наша html-страница.
Согласитесь, что текст смотрится не очень удобочитаемо.
Для начала сделаем небольшое форматирование абзацев документа.
Для этого пропишем для тега абзаца <P> следующие параметры:
P{
padding-bottom: 2px;
padding-left: 5px;
padding-right: 3px;
padding-top: 2px;
text-indent: 10px;
text-align: justify;
}
- первые четыре атрибута определяют размеры полос чистого пространства вокруг элемента (т.е. текста абзаца).;
- пятый - задает отступ начала абзаца (красную строку);
- шестой - выравнивает текст по ширине;
Справедливости ради следует сказать, что решение выровнять текст абзаца по ширине довольно спорное. Безусловно, в этом случае страница смотрится более строго, однако, удобочитаемость несколько ухудшается. В любом случае, то или иное решение форматирования вебмастер принимает, в каждом конкретном случае, соответственно поставленным задачам. Сейчас же во главу угла мы ставим задачу обучения, прежде всего, разнообразным приемам форматирования.
Заключаем в теги <P> три абзаца средней ячейки.
Вот как будет теперь выглядеть наша html-страница.
И последний штрих на данном этапе - разместим три звездочки, отделяющие первый абзац, по центру колонки. Это можно проделать разными способами, но мы для нашей цели выберем замечательный тег <DIV>.
<div align="center">* * *</div>
Вот как будет теперь выглядеть наша html-страница.
