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

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

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

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

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

Рисунок 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 }