Занятие 10. "ПодключениеJavaScript. Создание разделов сайта: Главная и Контакты"

На этом занятии мы создадим два новых раздела сайта: - добавим раздел на Главной странице; - добавим раздел Контакты; - подключим JavaScript к нашему проекту.

На этом занятии мы наполним содержимым еще два раздела нашего сайта: Главная иКонтакты, а также подключим несколько визуальных эффектов с использованием языка JavaScript (см. рис. 10.1):

Рис. 10.1

Работают еще два раздела сайта: Главная иКонтакты;появились визуальные эффекты при открытии сайта и наведении курсора мыши на самое нижнее изображение страницы. Эти эффекты реализованы при помощи JavaScript.

Прежде чем приступить к разработке, рассмотрим схему нашего проекта (см. рис. 10.2) На схеме изображена структурасерверной части проекта.

Рис. 10.2

Нам осталось реализовать три основных пункта (см. рис.10.2):

1. Раздел на главной странице

2. Раздел контакты

3. Форма для заказов

Остальные составляющие проекта уже выполнены!

На этом занятии нам понадобится текстовый материал для раздела на главной странице. Это текст,который описывает деятельность компании(Главная.txt).Откроем этот файл в программе Блокнот,в файле находится текст из четырех абзацев. При создании раздела"Главная",каждый из четырех абзацев будет скопирован и помещен в теги HTML.

Прежде чем приступить к созданию новых разделов, выполним небольшую корректировку в файле puh.css.Для фона меню и фона центральной части установим прокручивание вместе со страницей. За это отвечает свойство:background-attachment, изменим значение этого свойства в блоках: #vmenuи#tab_centr (см. рис. 3) на background-attachment: scroll;

Рис. 10.3

Посмотрим в браузере на получившийся результат. Обратите внимание,что при переходе в раздел Товары и прокручивании страницы вверх/вниз зеленый фон слева и справа от текста стал прокручиваться вместе с текстом!

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

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

- В верхней части должен отображаться заголовок: ^{Добро пожаловать!} Под заголовком должен располагаться текст из файла ^{Главная.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:

<div id="sheet2">

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

Рис. 10.6

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

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

^<br/>

^{<div class="div_opisan">}

^</div>

^{<div class="div_opisan">}

^</div>

^{<div class="div_opisan">}

^</div>

^{<div class="div_opisan">}

^</div>

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

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

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

Рис. 10.7

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

 

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

<div class="div_opisan">

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

Теперь разметка разделаГлавная готова!Переместим разметку из файла 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>

<td valign="top" width="580"^align="left">

<!--Центральная часть с белым фоном-->

<div id="sheet">

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

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