Дизайн веб-сайта

Відповідно до розробленої структури була спроектована головна сторіночка сайту (Рис. 3). Вона містить всі основні структурні елементи, перехід по яких здійснюється за допомогою гіперпосилань.

Рис. 3. Головна сторінка сайта

Як і планувалося на етапі постановки завдання, сайт містить всі необхідні структурні і навігаційні елементи: форму пошуку, навігаційне меню (у вигляді текстових посилань у супроводі відповідних зображень).

При натисненні на посиланні «Каталог книг» виводиться інформація про категорії, які існують в магазині. Це набагато спрощує пошук книг для клієнтів. (рис. 4).

Рис. 4. Каталог книг

Вид реєстраційної форми для нового користувача показаний на рис. 5.

Рис. 5. Реєстраційна форма

Для того щоб авторизуватися старим користувачам, їм потрібно вказати логін і пароль в формі авторизації. Вид авторизаційної форми для старих користувачів показаний на (рис. 6.)

Рис. 6. Авторизаційна форма

Опис створення сторінок веб-сайта

Розробка веб-сайта велася в основному в програмном пакеті компанії Joomla 1.5. Вибір даного пакету обґрунтований тим, що його освоєння віднімає мало часу, під час розробки доступний попередній перегляд кожної окремо зробленої операції, доступна велика кількість функцій (організація інтерактивних елементів сайту, створення гіперпосилань в декілька натисків мишки і тому подібне), пакет підтримує велику кількість технологій (HTML, PHP, ASP, Java, XML, XSLT, CSS та інші).

При створенні сайту використовувалися стандартні шаблони, проте для їх модифікації під конкретні завдання, стандартні засоби Joomla застосовувати незручно через відсутність візуального редактора. Тому для редагування шаблонів був використаний візуальний редактор Dreamweaver MX.

Розглянемо створення головної сторіночки сайту (Рис. 7). Вона є основоположною для всіх інших.

Рис. 7. Розробка головної сторінки сайта

Як видно з малюнка, в основі сторінки лежить контейнер. Всі елементи сторіночки складають мозаїку, яка згодом предстає на екрані користувача як єдине ціле.

Будь-яка інформація (текстова або графічна) заноситься безпосередньо в елементі контейнера. Таким чином, досягається структурованість сторіночки, що дозволяє найзручніше редагувати будь-який її елемент. Так само для зручності правки і логічного відділення одного сегменту від іншого кожному з них привласнено ім'я. Код шаблону сторінок приведений в додатку 1.

Розробка сайту на основі CMS