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

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

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

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

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

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

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

Pribor

D: /

Sayt1

Navig

Kont1.html, Dost2.html, Opis3.html, Zakaz.html

vibor1.png, vibor2.png, vibor3.png, vibor4.png, jmp_to.png, jmp_gl.png, jmp_back.png tml, Dost2.html, Opis3.html, Zakaz.html

defalt.html, blank_z.html, otvet_z.html, otvet_z.php, logotip.png, znak.png

kar1.html, kar2.html, kar3.html, kar4.html, enc1.html, enc 2.html, enc 3.html, enc 4.html, spi1.html, spi2.html, spi3.html, spi4.html, reo1.html, reo2.html, reo3.html, reo4.html

kard1.png, kard2. png, kard3. png, kard4. png, encef1. png, encef2. png, encef3. png, encef 4. png, spiro1. png, spiro2. png, spiro3. png, spiro4. png, reogr1. png, reogr2. png, reogr3. png, reogr4. png, oform_z.png

Рис. 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: [email protected]"> Введите текст Вашего заказа </a>. Проверить действие ссылки, убедив­шись что происходит автомати­ческое обращение к почте Outlook. То есть для отправки сообщения тре­буется наличие установленной программы Outlook express как на компь­ю­тере клиента, так и на компьютере постав­щика (рекламодателя).

Тема 10. Публикация сайта. Требования к сайту и его поддержка.