Создание левой боковой части страницы
Скопируем пять изображений: r1.png, r2.png, r3.png, r4.png, shar.png в папкуimg нашего проекта (см. рис. 9.14).
Рис. 9.14
При формировании каркаса страницы, мы сделали толщину рамки таблицы равной 1для отладки и просмотра результата в браузере. Сейчас каркас полностью готов.Можно изменить значение толщины рамки на0:
<td valign="top" width="980">
<table border="0"cellpadding="0" cellspacing="0" width="980"id="tab_centr">
<tr valign="top">
Найдем надпись Левая боковина. Вместо этой надписи добавим содержимое левой колонки (см. рис. 9.15):
Рис. 9.15
Сверху будет находиться заголовок с названием раздела,а ниже будет картинка, которая символизирует данный раздел. Добавим код:
<div class="left_b">
<h1>Главная</h1>
<img src="img/r1.png" border="0" width="180" height="188" />
</div>
Тег divc атрибутом classдобавлен для подключенияCSS к этому фрагменту.
Задача:Сформировать и поместить в таблицу razmetkaбазы данных фрагменты для всех четырех разделов.
Копируем в буфер обмена фрагмент для раздела Главная и помещаем в поле html первой строки таблицы razmetka(см. рис. 9.16):
Рис. 9.16
Подобную операцию мы делали при добавлении текстов описания товаров! Теперь немного изменяем фрагмент в файле index.php для второго раздела Товары,получится:
<div class="left_b">
<h1>Товары</h1>
<img src="img/r2.png" border="0" width="180" height="135" />
</div>
Изменилось название раздела, имя файла изображения и размеры.
Помещаем второй фрагмент во вторую строку таблицы razmetka. Тоже самое делаем для разделов Заказать и Контакты. Для этого нужно будет использовать фрагмент для раздела Заказать:
<div class="left_b">
<h1>Заказать</h1>
<img src="img/r3.png" border="0" width="180" height="180" />
</div>
И для раздела Контакты:
<div class="left_b">
<h1>Контакты</h1>
<img src="img/r4.png" border="0" width="180" height="180" />
</div>
После добавления таблица razmetkaбудет выглядеть так (см. рис.9.17).
Рис. 9.17
В файле index.php, в ячейке таблицы,где ранее была надпись Левая боковина, поместим PHP-вставку:
<td valign="top" width="200" align="center">
<?php
// Получаем и выводим левую боковую часть
getHTML(getIdMenu()+1);
?>
</td>
В зависимости от выбранного раздела будет выбираться соответствующий фрагмент из базы данных.Функция getHTML()получает и выводит разметку. ФункцияgetIdMenu() определяет текущий раздел сайта.Номера строк в таблице razmetkaот 1до 4, а функция getIdMenu()возвращает значения от 0до 3. Номер строки в таблице базы данных на единицу больше, чем номер возвращаемый функцией getIdMenu().
Посмотрим на результат в браузере, выполним переход по всем четырем разделам сайта, в левой колонке для выбранного раздела информация будет изменяться.
Осталось придать левой колонке внешний вид при помощи CSS. Для этого в самом низу файла puh.css необходимо добавить CSS-код:
/*Блок левой боковой части*/
.left_b
{
padding-top: 10px;
padding-bottom: 20px;
width: 200px;
}
/*Картинка в левой боковой части*/
.left_bimg
{
border: #0000666pxdouble;
}
/*Заголовок в левой боковой части*/
.left_b h1
{
width: 200px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-family: verdana,arial,serif;
font-style: normal;
font-weight: bold;
line-height: 50px;
color: #000066;
}
/*При наведении мыши на заголовок*/
.left_bh1:HOVER
{
color: red;
}
/*При наведении мыши на изображение*/
.left_bimg:HOVER
{
border: red6pxdouble;
}
Рассмотрим некоторые моменты подробнее. Все содержимое левой колонки помещено в блок divc атрибутом class="left_b". Чтобы обратиться к вложенному тегу, нужно указать его через пробел:
/*Картинка в левой боковой части*/
.left_b img
{
}
В данном случае список свойств будет применен к тегам img, которые находятся внутри.
border: #0000666pxdouble;
Свойство border – это рамка, ее характеристики можно указать через пробел: цвет, толщина,тип. Вместо одной строки можно было записать три таких:
border-color: #000066;
border-width: 6px;
border-style: double;
Вспомним:CSS позволяет задать свойство при наведении курсора мыши:
.left_b h1:HOVER
{
}
Для этого через двоеточие необходимо записать :HOVER
Важно:слева и справа от двоеточия не должно быть пробелов!
Свойства, записанные внутри фигурных скобок, будут применяться при наведении курсора мыши.
Возможность использования изменения CSS при наведении курсора мыши не поддерживается в старых браузерах!
Посмотрим на результат в браузере. Видим, что внешний вид левой боковой части несколько изменился. При наведении курсора мыши на заголовок изменяется цвет текста, а при наведении курсора на изображение – цвет рамки.
Сделаем последнюю доработку для левой колонки. В файле index.php, добавим атрибут для ячейки таблицы с содержимым левой колонки:
<td valign="top" width="200"align="center">
<?php
// Получаем и выводим левую боковую часть
getHTML(getIdMenu()+1);
?>
Атрибут align="center"горизонтально выравнивает содержимое ячейки по центру.
Теперь левая боковая часть полностью закончена!