Центр документации
Карта сайта


Новая документация

Настройка платежных систем
Настройка способа оплаты КупиВкредит
Настройка способа оплаты Acquiro
Настройка способа оплаты AvisoSMS

Обновленная документация 

Разработчикам (API)
Руководство пользователя

Оформление страницы «Главная»

Начнем с того, что по дизайну шрифт на всем сайте имеет следующие параметры: размер - 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

Версия для печати

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API) Документация для скачивания
 2000 – 2011 © Amiro.CMS Все права защищены.