Задача:создать правую боковую часть страницы.Сверху должен отображаться заголовок:Работаем по всему миру, а под заголовком Flash-ролик (см. рис. 18). При переходе по разделам меню –внешний вид правой колонки должен быть неизменным.
Рис. 9.18
Скопируем файл shar.swf в папку с проектом. Разместим его в папке с главной страницей сайта index.php (см. рис.9.19).
Рис. 9.19
Перейдем в файл index.php, найдем ячейку таблицы с текстом Правая боковина. Удалим эту надпись,а вместо нее добавим код:
<div id="right_b">
<h1>Работаем по<br/>всему Миру!</h1>
<br/>
<!--Flash-->
</div>
Этот код очень похож на код в левой колонке. Тег <br/>обеспечивает перенос строки.
Вместо комментария<!--Flash-->добавим фрагмент кода из файла Flash.txt. Этот фрагмент сгенерирован автоматически средой Adobe Flash при созданииFlash-приложения с расширением SWF.
Тег objectиспользуется для подключенияFlash. Этот тег в свою очередь вложен в тег div. При помощи тегаdiv подключается фон в виде картинки, которая будет видна,если Flash не поддерживается данным устройством или не установлен/отключен Flash Player. Такая картинка называется альтернативной–это изображение пользователь увидит вместо Flash-ролика. Желательно,чтобы это изображение максимально отражало смысл Flash-ролика. Как вариант, это может быть один из кадров Flash-ролика.
В нашем случае эту функцию выполняет файл shar.png. (см. рис. 9.20).
Рис. 9.20
При открытии сайта на мобильном устройстве пользователь увидит изображение (см. рис. 20), а при открытии сайта с рабочей станции отобразится Flash-ролик. Получается,что изображение является фоном и будет находиться под Flash-роликом в случае удачной загрузкиFlash.
При использовании фрагмента кода из файла Flash.txtдля вставки других роликов потребуется ряд изменений,связанных с размерами и именами файлов.Рассмотрим эти места кода:
1. Изменение размеров в трех местах
…<div style="width: 150px; height: 150px;…
…width="150" height="150" id="shar"…
…width="150" height="150" wmode="opaque"…
2. Указание пути к изображению фона в одном месте
background: #009933 url('img/shar.png')
3. Изменение имени Flash-ролика в четырех местах
…id="shar"…
…value="shar.swf"…
…src="shar.swf"…
…name="shar"…
Если на компьютере пользователя не установлен Flash Player, то в браузере появится предложение установить Flash Player.
Теперь следует вставить фрагмент из файла Flash.txt.Весь блок кода для отображения правой колонки нужно поместить в пятую строку таблицы razmetka. Для этого выполним уже знакомые нам действия.1
После этого таблицаrazmetkaбудет иметь вид (см. рис. 9.21).
Рис. 9.21
В файле index.phpудалим вставленный в базу данных фрагмент кода, а вместо него добавим вставку PHPдля вывода этого фрагмента разметки из базы данных:
<?php
// Получаем и выводим правую боковую часть
getHTML(5);
?>
Обратите внимание, что при любом выбранном разделе будет использоваться один и тот же фрагмент разметки!
Проверим в браузере,справа должен появиться заголовок и под ним Flash-ролик.При переходе на любую страницу Flash-ролик будет запускаться. При этом будет происходить один полный поворот Земного шара, а дальше будет происходить остановка ролика. Это сделано для того, чтобы постоянное вращение не раздражало пользователя.Осталось несколько изменить внешний вид правой боковой части. Для этого перейдем в файл puh.css и в самом низу добавим CSS:
/*Блок правой боковой части*/
#right_b
{
padding-top: 10px;
padding-bottom: 20px;
width: 200px;
}
/*Заголовок в правой боковой части*/
#right_bh1
{
text-align: center;
white-space: nowrap;
width: 200px;
text-decoration: none;
font-size: 20px;
font-family: verdana,arial,serif;
font-style: normal;
font-weight: bold;
line-height: 30px;
color: white;
}
Все эти свойства нам уже знакомы, рассмотрим подробнее только одно:
white-space: nowrap;
Свойство white-space со значениемnowrapзапрещает перенос текста, если он не перенесен на другую строку при помощи тега <br/>.
Рис. 9.22
Посмотрим на результат в браузере, страница сайта должна выглядеть как на образце (см.рис. 9.22).
Теперь можно сказать,что левая и правая боковые части нашего сайта закончены!
Итог занятия:На этом занятии мы:• создали новую таблицу базы данных для хранения разметки;• реализовали левую и правую боковые части сайта;• поговорили о Flash;• запрограммировали переход по пунктам меню.
1 см.первый раздел данного занятия
Занятие 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
Посмотрим в браузере на получившийся результат. Обратите внимание,что при переходе в раздел Товары и прокручивании страницы вверх/вниз зеленый фон слева и справа от текста стал прокручиваться вместе с текстом!
