Начнем с того, что по дизайну шрифт на всем сайте имеет следующие параметры: размер - 12px, семейство шрифта - Tahoma и цвет - 585858. Зададим в файле стилей common.css соответствующие стили шрифта для всего сайта:
body, table, tr, td, p, a, input, select, textarea {color:#585858; font-family:Tahoma; font-size:12px;} |
В соответствии с дизайном сделаем заголовки такого вида: заголовок светло-серого цвета, под которым расположен прямоугольник оранжевого цвета. Из графического макета сайта вырежем прямоугольник оранжевого цвета и сохраним его под название under_header.gif:
Рисунок 36
Для заголовка применим тег заголовка <h1>. Настроим для него стили: цвет - A9A9A9, размер шрифта - 13 px, шрифт жирный, буквы прописные, отступы сверху и снизу по 5 px. Следовательно, в файл стилей common.css изменяем стили следующим образом:
H1, h1 a, h1 a:visited {color:#A9A9A9;font-size:13px;font-weight:bold;
Margin-bottom:5px; margin-top:5px; text-transform:uppercase;}
.h1, .h1 a, .h1 a:visited {color:#A9A9A9;font-size:13px;font-weight:bold; Margin-bottom:5px; margin-top:5px; text-transform:uppercase;} |
Далее в менеджере сайта, открыв главную страницу на редактирование, вставим на главную страницу приветственный текст:
Вверху напишем «Добро пожаловать», оформим его заголовком <h1>
Рисунок. 37
Затем под заголовком новости вставим при помощи инструмента «Вставить/Изменить изображение» созданное ранее изображение under_header.gif:
В результате на сайте получаем следующий результат:
Рисунок 38
Слову «пожаловать» с помощью инструмента «Установить/Изменить цвет шрифта» зададим цвет 767676.
Далее вставляем приветственный текст, после которого для визуального разделения приветственного блока и блока новостей вставим два абзаца:
Рис. 39
На сайте видим результат:
Рисунок 40
Видно, что для информационного блока «Текст» необходимо увеличить отступ сверху. По дизайну видно что отступ сверху равен 40 px. Этот отступ аналогично верхнему отступу в блоке «Блок с картинкой» зададим в стилях макета home.css. Тут же зададим для информационного блока отступы слева и снизу 25 px и 35 px соответственно.
Следовательно, в файл стилей макета home.css изменяем стили следующим образом:
#lay_body {
padding-left:0px;
padding-top:52px;
padding-right:25px; padding-bottom:35px;} |
На сайте видим следующий результат:
Рисунок 41
|