Центр документации
|
Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »
Начнем с того, что по дизайну шрифт на всем сайте имеет следующие параметры: размер - 12px, семейство шрифта - Tahoma и цвет - 585858. Зададим в файле стилей common.css соответствующие стили шрифта для всего сайта:
В соответствии с дизайном сделаем заголовки такого вида: заголовок светло-серого цвета, под которым расположен прямоугольник оранжевого цвета. Из графического макета сайта вырежем прямоугольник оранжевого цвета и сохраним его под название under_header.gif:
Рисунок 36
Для заголовка применим тег заголовка <h1>. Настроим для него стили: цвет - A9A9A9, размер шрифта - 13 px, шрифт жирный, буквы прописные, отступы сверху и снизу по 5 px. Следовательно, в файл стилей common.css изменяем стили следующим образом:
Далее в менеджере сайта, открыв главную страницу на редактирование, вставим на главную страницу приветственный текст: Вверху напишем «Добро пожаловать», оформим его заголовком <h1>
Рисунок. 37
Затем под заголовком новости вставим при помощи инструмента «Вставить/Изменить изображение» созданное ранее изображение under_header.gif: В результате на сайте получаем следующий результат:
Рисунок 38
Слову «пожаловать» с помощью инструмента «Установить/Изменить цвет шрифта» зададим цвет 767676. Далее вставляем приветственный текст, после которого для визуального разделения приветственного блока и блока новостей вставим два абзаца:
Рис. 39
На сайте видим результат:
Рисунок 40
Видно, что для информационного блока «Текст» необходимо увеличить отступ сверху. По дизайну видно что отступ сверху равен 40 px. Этот отступ аналогично верхнему отступу в блоке «Блок с картинкой» зададим в стилях макета home.css. Тут же зададим для информационного блока отступы слева и снизу 25 px и 35 px соответственно. Следовательно, в файл стилей макета home.css изменяем стили следующим образом:
На сайте видим следующий результат:
Рисунок 41 |
|||