Тема 9. Практика создания сайта

9.1. Постановка задачи.

Совокупность веб-страниц, созданных ранее, включает в себя целый ряд документов, преследующих цель поэтапного освоения приемов их соз­дания. Для создания сайта на их основе следует создать новую струк­ту­ру, в достаточной степени отражающей его содержание и удобную для рабо­ты с ним (в том числе и с точки зрения возможности его последую­щей модер­ни­зации).

В качестве главной страницы сайта следует принять документ bmt7-8.html как конечный результат успешного выполнения заданий раз­де­лов 1..7 настоящего пособия. Наряду c именем index.html, общепринятым для главных стра­ниц сайтов, допустимо также имя default.html.

Пусть создаваемый сайт будет иметь имя Sayt1, а его главная стра­ни­ца – default.html (во избежание путаницы с уже имеющимся ранее соз­дан­ным файлом index.html).

Чтобы запуск и нормальная работа сайта не зависели от конкретного компьютера, целесообразно корневую папку, имя которой должно совпа­дать с именем сайта, разместить в корневом каталоге жесткого диска ком­пью­тера. Пусть это будет диск D.

В качестве дополнительных веб-страниц следует использовать ранее подготовленные файлы. Размещение файлов сайта на диске D будет вы­пол­­­нено в соответствии со схемой, представленной на рис. 9.1.1. Вполне очевидно, что в про­цессе компоновки составляющих папок сайта адреса ссылок, уже имеющихся в html-документах, должны быть соответствую­щим образом скорректированы.

Рис. 9.1. Файловая структура сайта.

Универсальный способ адресации в ссылках – указание полного пути, начиная от исходной папки, где размещена ссылка, и заканчивая папкой назначения, где находится документ- источник, через корневой каталог (в нашем случае это диск D). Существует более удобный способ записи адре­са (относительная адреса­ция) , действующий в соответствии со следую­щим правилом. Если ссылка дается на файл, лежащий во вложен­ной папке, то есть уровнем ниже, то адрес записывается как . /Папка назначения/ Файл назначения. Если ссылаются на файл, лежащий уровнем выше, за­пись адреса имеет вид . . /Папка назначения/ Файл назначения.

На рис. 9.1. показана файловая структура сайта Sayt1. В глав­ной папке сайта находятся файлы: главная страница default.html, бланк заказа blank_z.html , файлы рисунков для логотипа и эмблемы, файлы для обра­ботки формы. В ней также имеются две вложен­ные папки: Pribor, с описа­ниями и рисун­ками приборов и кнопки заказа, и Navig (нави­га­ция), c опи­са­ниями разделов меню (Контакты, Доставка, Описание, Заказ) и рисун­ка­ми кнопок переходов между страницами.

9.2. Практические задания по теме: задания 9-1…9-4.

Задание 9-1.

1). Создать папку Sayt1в корневой папке D, скопировать в него доку­мент bmt7-8.html и переименовать его в default.html. 2). В папку Sayt1скопировать из папки Praktika документы blank_z.html, otvet_z.html, otvet_z.php и файлы рисунков logotip.png и znak.png.

3). Скорректировать в html-тексте главной страницы сайта адреса для вызо­ва из нее указанных файлов в соответствии с их новым размещением. Сохранить правильный результат после проверки в браузере.

Задание 9-2.

1). В папке Sayt1создать папку Navig и скопировать в нее документы Kont1.html, Dost2.html, Opis3.html, Zakaz.html, а также файлы рисунков jmp_to.png, jmp_back.png, jmp_gl.png из папки BAZA, файлы рисунков vibor1, vibor2, vibor3, vibor4 из папки Menu.

2). Скорректировать в html-тексте главной страницы сайта адреса для вызо­ва из нее указанных файлов в соответствии с их новым размещением. Сохранить правильный результат после проверки в браузере.

Задание 9-3.

1). В папке Sayt1создать папку Pribor и скопировать в нее документы и рисунки, указанные на рис. 9.1.1. из папки Praktika.

2). Скорректировать адреса в html-тексте главной страницы сайта для вызо­ва из нее указанных файлов в соответствии с их новым размещением. Сохранить правильный результат после проверки в браузере.

Задание 9-4.

1). Применить упрощенную запись адресов ссылок на главной страни­це, (описанную в подразделе 9.1), вместо исходной (где это целесо­об­раз­но). Проверить действие всех ссылок и сохранить правильный результат.

2). Доработать каталог на главной странице, изменив цвет фона в заго­ловке блока kat (background-color:cyan). Проверить и сохранить результат.

3). Ввести в каталог наименования всех приборов, оформив каталог как спи­сок по образцу, задав для списка его максимальный размер (воз­мо­ж­ное число строк с наименованиями приборов) size=20, число одновре­мен­но выбираемых элементов списка multiple=1 и элемент списка, устанавли­ва­е­мый по умолчанию (параметр selected) по образцу:

<select name=group size=20 multiple=1 >

<option selected value="kar1"value="kar1">Электрокардиограф ЭК1Т-04

<option value="kar2">Электрокардиограф ЭКТ3Т-01

…………………………………………………………………. </select>

Проверить и сохранить результат.

Список можно использовать для заказа товара, выбранного в нем вы­делением мышью. Для этого список следует вставить в форму типа submit (аналогичную форме, используемой в бланке заказа), из которой по реак­ции на выделение товара в списке (реакции на действие мыши) фикси­ру­ется выбранный товар. Например, в данном случае, если выбран первый товар в списке, то его переменная kar1 пересылается по нажатию кнопки по адресу, указываемому в форме.

Если в качестве адреса указан localhost, то в форме это записывается как: method=”post” action= http://localhost/otvet_z.php. Как упоминалось в разделе 8.1, локальный сервер localhost используется, в основном, для тес­ти­рования работы php-файлов, которые служат для серверной обработ­ки форм. Одним из результатов такой обработки в данном случае будет офор­мление заказа на выбранный товар и отправка заказа, сделанного любым клиентом, поставщику товара, то есть на данный сайт. Кроме того, в файле обработки (otvet_z.php) предусмотрена отправка клиенту сообще­ния о том, что заказ принят. Если сайт зарегистрирован на сервере, то адресуются к сайту, используя его доменный адрес вместо localhost.

4). Ознакомиться со способом отправки сообщений с использованием почтового сервиса Outlook express. Вставить в html-текст главной стра­ни­цы, в ее конец следующую ссылку: <a href="mailto: bmt_st@mail.ru"> Введите текст Вашего заказа </a>. Проверить действие ссылки, убедив­шись что происходит автомати­ческое обращение к почте Outlook. То есть для отправки сообщения тре­буется наличие установленной программы Outlook express как на компь­ю­тере клиента, так и на компьютере постав­щика (рекламодателя).