Переваги:

• Застосування кількох варіантів дизайну сторінки для різних пристроїв перегляду. Наприклад, для відображення на екрані монітора - дизайн буде розраховано на велику ширину. У разі друкування документу не буде роздруковане меню сайту, а у разі перегляду у мобільному комп’ютері чи телефоні, меню буде виведено після вмісту сторінки.

• Зменшення часу завантаження сторінок сайту за рахунок перенесення правил представлення даних до окремого CSS-файлу. В цьому випадку браузер завантажує лише структуру документа і дані, що містяться на сторінці. CSS-файл з правилами представлення цих даних завантажується браузером лише один раз і зберігається в кеші браузера.

• Простота подальшої зміни дизайну. Не потрібно виправляти кожну сторінку, достатньо лише змінити кілька правил у CSS-файлі.

• Додаткові можливості оформлення. Наприклад, за допомогою CSS-правил можна застосувати обтікання певного блоку текстом або зробити так, щоб меню фіксовано знаходилося в певному місці при перегортанні сторінки.

Недоліки:

• Різні браузери можуть в різний спосіб інтерпретувати правила CSS, і відповідно, по різному відображати одні і ті ж фрагменти сторінки.

Хід роботи

1. Створіть базовий каркас для сайту.

2. Додайте назву сайту, ключові слова, опис сайту, посилання на файл зі стилями.

3. Створіть блоки для шапки, сторінки для основного контенту, сайдбару та підвалу.

4.Створіть меню в блоці header згідно свого завдання. Меню створюється з ненумерованого списку.

5. Далі створіть логотип з посиланням на головну сторінку.

6. Пропишіть наступні теги, для створення навігаційного меню сайту.

Вигляд шапки та меню без використання каскадних стилів

7. В блоці content створіть 2 блоки для контенту.

8. Додайте в контент інформацію згідно свого завдання для першого блоку використовуючи параграфи (теги <p>)

Результат:

9. Аналогічним чином заповнюємо другий блок.

Результат:

10. Створіть елементи меню для сайдбару, використовуючи ненумерований список.

11. Також створюємо форму пошуку за допомогою тегу <form> та <fieldset>

Встановлюємо копірайт

12.Задайте стилі для заголовків , параграфів та списків.

Результат:

13. Задайте стилі для зображень, форм вводу, легенд

14. Задаємо стилі для шапки, меню

15. Логотип

16. Контент, сторінка, класи для постів

17. Встановлюєм стилі для сайдбару

Список рекомендованої літератури

Бібліотека Луцького НТУ

1. Дригалкин В.В. HTML в примерах. Как создать свой Web-сайт: Самоучитель./ В.В. Дригалкин.- М.: Изд. дом "Вильямс", 2004.- 192с., ил.

2. Жадаев А.Г. Самоучитель HTML4./ А.Г. Жадаев -К.: Юниор, 2004.- 292с., ил.

3. Пасічник О.В. Веб-дизайн: підручник/ О.В. Пасічник, В.В. Пасічник.- Львів.: Магнолія, 2010.- 520 с.,іл.

4. Полонская Е.Л. Самоучитель язык HTML. Самоучитель.- М.:Изд. дом "Вильямс", 2004.- 320 с., ил.

5. СамХольцшлаг Молли Э. Использование HTML и ХHTML./ Хольцшлаг Молли Э.- М.: Изд. "Вильямс", 2003.- 736 с., ил.

Волинська обласна універсальна наукова бібліотека ім. Олени Пчілки

1. Дубанов М. Создание Веб-страниц: искуство верстки/ М. Дубаков.– Минск: Новое знание, 2004.– 287с.

2. Дунаев В.В. Основы Веб-дизайна/ В.В. Дунаев.– 2-е изд., перераб. и доп.– СПб.: БХВ-Петербург, 2012.– 480с.:ил.

3. Дунаев В.В. HTML скрипты и стили: самое необходимое/ Дунаев В.В.; ред. Е.Кондукова.- СПб.: БХВ-Петербург, 2009.- 496 с.,ил.

4. Глинський Я.М. Інтернет сервіси HTML і Web-дизайн. Навч. посібн./ Я.М глинський, В.А. Ряжська.- 3-є вид.- Львів: Дол, СПД Глинський, 2005.- 192 с.

5. Загуменов А.П. Как раскрутить и разрекламировать Веб-сайт в сети интернет/А.П. Загуменов.– М.: ДМК Пресс, 2012.– 382с.

6. Закорин И. Что такое Internet, WWW, и HTML/ И. Закорин, В. Рафалович.- 2-е изд., перераб. и доп.- М.: Интернет-Трейдинг, 2003.- 248 с.

7. Лебедев С.В. Web-дизайн: Учеб. пособие по созданию публикаций для интернета/ С.В. Лебедев.- 3-е изд., испр. и доп.- М.: Альянс-пресс, 2004.- 736с.

8. Мак-Дональд М. HTML5 недостающее руководство: пер. с англ./ М. Мак-Дональд.- СПб.: БХВ-Петербург, 2012.- 480с.: ил.

9. Пилигрим М. Погружение в HTML5: перев. с англ./ М.Пилигрим.- СПб.: БХВ-Петербург, 2011.- 304с.:ил.

10. Сакс Т. Дизайн и архитектура современного Web-сайта. Опыт профессионалов./ Т.Сакс, Г. Мак-Клейн; пер. с англ.- М.;СПб;К.: Вильямс, 2002.- 308 с.,ил.

Навчально-методичне видання

Методичні вказівки до виконання індивідуальної роботи для студентів напряму 6.010104 «Професійне освіта. Комп’ютерні технології в управлінні та навчанні» денної форми навчання / Н.А. Олексів. – Луцьк: ЛНТУ, 2011. – 80с.

Комп’ютерний набір та верстка: Н.А. Олексів

Редактор: О.С. Гордіюк

Підп. до друку Формат 60х84/16.Папір офс.

Гарн.Таймс.Ум.друк.арк. Обл.-вид.арк.

Тираж прим. Зам. 68.

Редакційно-видавничий відділ

Луцького національного технічного університету