Розробка сайту з використанням XHTML і CSS
Завдання. Cтворити веб-сайт зі статичним вмістом на довільну тематику за допомогою мови ХHTML і таблиць стилів CSS.
Етапи створення сайту:
- Довільно вибрати тематику сайту і зареєструвати її у викладача (Морозов А.В., кафедра інформатики та комп’ютерного моделювання, ауд. 333). Наприклад: бокс, футбол, музика, історія України тощо.
- Спроектувати загальний дизайн сайту на папері.
- Підготувати графічні зображення для сайту у будь-якому растровому або векторному графічному редакторі (наприклад, за допомогою Adobe Photoshop або Corel Draw).
- Виділити елементи дизайну в окремі графічні файли.
- Написати за допомогою мови XHTML каркас сайту (також можна використати табличний, але не бажано). Вставити на сторінку зображення, налаштувати шрифти, розміри тексту і т.п. так, щоб каркас сайту відповідав спроектованому дизайну.
- Сформувати зовнішню таблицю CSS-стилів. Усі параметри оформлення (кольори, розміри, вирівнювання і т.д.) треба винести з HTML-файлу у CSS-файл. В ідеалі повинні отримати HTML-сторінку, яка не містить будь-яких тегів/атрибутів, які описують оформлення сайту.
- Наповнити сайт даними. Сайт повинен містити, як мінімум, 6 сторінок.
- Перевірити правильність написання HTML-файлу за допомогою програми «CSE HTML Validator». Звернути увагу на знайдені помилки і виправити їх.
Вимоги до оформлення сайту:
- Дизайн сайту повинен обов’язково включати шапку сайту, панель навігації та основну частину сторінки.
- Cайт має складатися як мінімум із 6 сторінок, що містять інформацію, яка відформатована за допомогою відповідних тегів XHTML.
- Сайт повинен містити графічні ілюстрації, картинки, фотографії, оброблені за допомогою Adobe Photoshop.
- Усі параметри оформлення повинні міститися в окремому CSS-файлі.
- Сторінки сайту не повинні містити помилок (необхідно перевірити HTML-сторінки за допомогою програми CSE HTML Validator).
Звіт з лабораторної роботи має містити :
- Титульну сторінку.
- Тему лабораторної роботи.
- Завдання на лабораторну роботу.
- Етапи створення сайту.
- Приклад дизайну спроектованого сайту (два-три скріншоти).
- Роздруківку CSS-файлу.
- Фрагменти HTML-коду, які ілюструють використання таблиць, гіперпосилань, вставку зображень і т.д.
- Висновки.