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


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

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

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

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

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

По дизайну левый блок имеет ширину 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 – 2011 © Amiro.CMS Все права защищены.