Центр документации
|
Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »
По дизайну левый блок имеет ширину 244 px и в нем расположены:
Создаем в левом блоке таблицу шириной 244 px с четырьмя строками:
В первой строке для ячейки зададим фон черного цвета (bgcolor=#c80000) и высоту 37 px (height=37).
На сайте видим следующий результат:
Рисунок 7.
Во вторую строку вставляем изображение с логотипом, предварительно создав его в Adobe Photoshop и сохранив его под именем visitka_logo_ani.gif.
Рисунок 8.
Получаем следующий html-код:
В третью строку вставляем изображение в виде надписи «Только лучшее» бледно серого цвета, предварительно создав его в Adobe Photoshop и сохранив его под именем left_area.gif.
Рисунок 9.
Получаем следующий html-код:
Добавим атрибуты выравнивания по центру в ячейки, в которых выводятся изображения (align=center), получим следующий код:
На сайте получаем следующее
Рисунок 10.
Вырежем с макета картинки – иконки, которые будут ссылками:
Рисунок 11.
Назовем их соответственно home.gif , mail.gif , map.gif После этого, в первую ячейку таблицы добавим таблицу, состоящую из трех ячеек, в каждой из которых будет выведена иконка:
Получим следующий код:
На сайте получим следующее:
Рисунок 12.
В режиме визуального редактирования необходимо задать иконкам соответствующие ссылки. Выделить картинку курсором и нажать на кнопку «Вставить гиперссылку», в открывшемся окне задать ссылку для изображения.
Теперь у нас осталась еще одна строка не заполненной, ее мы оставили под вывод ленты новостей. В режиме визуального редактирования нужно встать курсором в пустую ячейку, нажать на кнопку «Вставить\Настроить специальный блок», в открывшемся окне выбрать спецблок «Анонс новостей». По умолчанию спецблок выводит три новости, по дизайну необходим вывод двух новостей, для этого нужно 2 раза кликнуть по спецблоку (откроется окно с настройками), параметр «Количество элементов в спецблоке» установить равным двум.
На сайте мы видим результат:
Рисунок 13.
Новости слишком прилипают к границам блока, для этого необходимо задать отступ в ячейке, где стоит спецблок:
По дизайну цвет заголовка новости в спецблоке такой же, как цвет ссылок на всем сайте. Так как заголовок новости не имеет каких либо индивидуальных настроек в шаблоне для задания цвета заголовку новости необходимо в стилях common.css задать стилям для ссылок необходимый цвет в системе RGB. Исходя из этого, изменяем файл стилей следующим образом:
|
|||||||||