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

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


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

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