Реализация раздела сайта: Главная

Задача:сформировать раздел сайта Главная.

- В верхней части должен отображаться заголовок: Добро пожаловать! Под заголовком должен располагаться текст из файла Главная.txtв виде четырех отдельных абзацев.

- Внешний вид заголовка и текста должен в точности соответствовать разделу сайта Товары

- Фрагмент HTML-разметки необходимо поместить в таблицу базы данныхrazmetka, в строку с id=6

- При переходе пользователя в раздел Главная- HTML-разметка раздела должна выводиться при помощи PHP.

Перейдем в PHPMyAdmin, на закладкеSQL запишем запрос для добавления двух новых строк в таблицу razmetka (см. рис.10.4):

Рис. 10.4

Сразу добавим две строки для двух новых разделов: Главная и Контакты. Запрос будет выглядеть так:

INSERT INTO razmetka (id,html) VALUES (6,'-');

INSERT INTO razmetka (id,html) VALUES (7,'-');

Нажмем кнопку OK. В результате в таблице razmetka появятся две новых строки (см.рис. 10.5):

Рис. 10.5

Далее в эти две строки мы поместим разметку для двух новых разделов.

Теперь нужно сформировать HTML-код раздела Главная. Для этого перейдем в файл index.phpи найдем блок divс идентификатором sheet2:

В этом блоке выводится содержимое центральной части на белом фоне. Внутри блока находится код PHP, который выводит описание товаров. Над PHP-кодом (см. рис. 10.6):

Рис. 10.6

добавим HTML-код:

<h1 class="h1_opisan">Добро пожаловать!</h1>

<br/>

</div>

</div>

</div>

</div>

В самом верху расположен заголовок h1,ниже находятся четыре блока div, в каждый блок мы поместим один из четырех абзацев текста.

Обратите внимание, что к заголовку подключен класс CSS: h1_opisan, а ко всем блокам подключен класс CSS: div_opisan.Это сделано для того, чтобы придать внешний вид заголовка и текста, как в разделеТовары. В файлеpuh.cssуже имеются селекторы по классу: .h1_opisan и .div_opisan.

Теперь нужно четыре абзаца из файла Главная.txtвставить внутрь четырех теговdiv (см. рис. 10.7):

Рис. 10.7

Абзац смотрится лучше,когда перед первым словом абзаца имеется отступ в несколько пробелов. Те пробелы,которые находятся внутри текста, между словами, выводятся из HTMLна веб-страницу.Остальные пробелы игнорируются. Их нужно указывать явно! Для указания пробела вHTMLимеется специальная конструкция:

Добавим по три пробела перед каждым абзацем, каждый абзац получится в виде:

   Наша компания

Теперь разметка разделаГлавная готова!Переместим разметку из файла index.phpв таблицу базы данных razmetkaв строку таблицы с id=6 (см. рис.10.8):

Рис. 10.8

Осталось записать программный код PHP, который выведет разметку, когда пользователь перейдет в раздел Главная. Для этого нужно добавить несколько строчек в PHP-вставку:

<?php

// Получаем номер раздела меню

$id_menu = getIdMenu();

if ($id_menu==1) // Если номер: 1 -Товары

{

// Выводим описание товаров

makeOpisan();

}

else if ($id_menu==0) // Если номер: 0 - Главная страница

{

// Получаем разметку по номеру

getHTML(6);

}

Если пользователь переходит в раздел Главная,

else if ($id_menu==0) // Если номер: 0 - Главная страница

то при помощи функцииgetHTML() выводится разметка из строки таблицы razmetka c id=6.

Посмотрим на результат в браузере. При переходе в раздел Главная теперь выводится описание компании. Раздел Главная являетсяиндекснойстраницей нашего сайта. Именно этот раздел открывается при входе на сайт.

Добавим еще один атрибут к ячейке таблицы, в которой находится центральная часть страницы. Укажем выравнивание по горизонтали –слева: align="left".

</td>

По умолчанию браузер использует выравнивание слева, но если браузер сделает выравнивание по центру или справа, то текст центральной части сместится правее и будет смотреться не так ровно.

На этом разработка раздела Главнаязавершена. Переходим к разработке нового раздела.