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

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


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


Верстка блока «Левый блок»

По дизайну левый блок имеет ширину 244 px и в нем расположены:

  1. Полоса красного цвета высотой 37 px (находится вверху блока).
  2. Изображение в виде надписи бледно серого цвета.
  3. Логотип компании
  4. Меню, состоящее из картинок (на главную, написать письмо и т.д)
  5. Список новостей

Создаем в левом блоке таблицу шириной 244 px с четырьмя строками:

 

<table cellpadding=0 cellspacing=0 width=244>

<tr><td></td></tr>

<tr><td></td></tr>

<tr><td></td></tr>

<tr><td></td></tr>

</table>

 

В первой строке для ячейки зададим фон черного цвета (bgcolor=#c80000) и высоту 37 px (height=37).

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TR><TD bgColor=#c80000 height=37></TD></TR>

<TR><TD></TD></TR>

<TR><TD></TD></TR>

<TR><TD></TD></TR>

</TABLE>

 

На сайте видим следующий результат:

 

Рисунок 7.

 

Во вторую строку вставляем изображение с логотипом, предварительно создав его в Adobe Photoshop и сохранив его под именем visitka_logo_ani.gif.

 

Рисунок 8.

 

Получаем следующий html-код:

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TR><TD bgColor=#с80000 height=37></TD></TR>

<TR><TD><IMG src="_img/visitka_logo_ani.gif"></TD></TR>

<TR><TD></TD></TR>

<TR><TD></TD></TR>

</TABLE>

 

В третью строку вставляем изображение в виде надписи «Только лучшее» бледно серого цвета, предварительно создав его в Adobe Photoshop и сохранив его под именем left_area.gif.

 

Рисунок 9.

 

Получаем следующий html-код:

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TR><TD bgColor=#с80000 height=37></TD></TR>

<TR><TD><IMG src="_img/visitka_logo_ani.gif"></TD></TR>

<TR><TD></TD></TR>

<TR><TD><IMG src="_img/left_area.gif"></TD></TR>

</TABLE>

 

Добавим атрибуты выравнивания по центру в ячейки, в которых выводятся изображения (align=center), получим следующий код:

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TR><TD bgColor=#с80000 height=37></TD></TR>

<TR><TD align=center ><IMG src="_img/visitka_logo_ani.gif"></TD></TR>

<TR><TD></TD></TR>

<TR><TD align=center ><IMG src="_img/left_area.gif"></TD></TR>

</TABLE>

 

На сайте получаем следующее

 

Рисунок 10.

 

Вырежем с макета картинки – иконки, которые будут ссылками:

 

Рисунок 11.

 

Назовем их соответственно home.gif , mail.gif , map.gif

После этого, в первую ячейку таблицы добавим таблицу, состоящую из трех ячеек, в каждой из которых будет выведена иконка:

 

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TR>

<TD><IMG hspace=20 src="_img/home.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/mail.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/map.gif" vspace=5></TD></TR>

</TABLE>

 

Получим следующий код:

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TR><TD bgColor=#с80000 height=37>

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TR>

<TD><IMG hspace=20 src="_img/home.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/mail.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/map.gif" vspace=5></TD></TR>

</TABLE>

</TD></TR>

<TR><TD align=center ><IMG src="_img/visitka_logo_ani.gif"></TD></TR>

<TR><TD></TD></TR>

<TR><TD align=center ><IMG src="_img/left_area.gif"></TD></TR>

</TABLE>

 

На сайте получим следующее:

 

Рисунок 12.

 

В режиме визуального редактирования необходимо задать иконкам соответствующие ссылки. Выделить картинку курсором и нажать на кнопку «Вставить гиперссылку», в открывшемся окне задать ссылку для изображения.

 

Теперь у нас осталась еще одна строка не заполненной, ее мы оставили под вывод ленты новостей. В режиме визуального редактирования нужно встать курсором в пустую ячейку, нажать на кнопку «Вставить\Настроить специальный блок», в открывшемся окне выбрать спецблок «Анонс новостей». По умолчанию спецблок выводит три новости, по дизайну необходим вывод двух новостей, для этого нужно 2 раза кликнуть по спецблоку (откроется окно с настройками), параметр «Количество элементов в спецблоке» установить равным двум.

 

На сайте мы видим результат:

 

Рисунок 13.

  

Новости слишком прилипают к границам блока, для этого необходимо задать отступ в ячейке, где стоит спецблок:

 

<TABLE cellSpacing=0 cellPadding=0 width=244>

<TBODY>

<TR>

<TD vAlign=center align=middle bgColor=#c80000 height=37>

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD><IMG hspace=20 src="_img/home.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/mail.gif" vspace=5></TD>

<TD><IMG hspace=20 src="_img/map.gif" vspace=5></TD></TR></TBODY></TABLE></TD></TR>

<TR>

<TD align=middle><IMG src="_img/visitka_logo_ani.gif"></TD></TR>

<TR>

<TD style="padding-left:25px;padding-right:25px">##spec_small_news_00100243##</TD></TR>

<TR>

<TD align=middle><IMG src="_img/left_area.gif"></TD></TR></TBODY></TABLE>

 

По дизайну цвет заголовка новости в спецблоке такой же, как цвет ссылок на всем сайте. Так как заголовок новости не имеет каких либо индивидуальных настроек в шаблоне для задания цвета заголовку новости необходимо в стилях common.css задать стилям для ссылок необходимый цвет в системе RGB. Исходя из этого, изменяем файл стилей следующим образом:

 

A {color:#FF4800

text-decoration:underline

}

A:hover {color:#FF4800

text-decoration:none}

A:visited {color:#FF4800

}

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

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