Загальні зауваження щодо роботи з Adobe DreamWeaver
КАФЕДРА ВИЩОЇ МАТЕМАТИКИ ТА ІНФОРМАТИКИ
_____________ А. Я. Козаков
____________ І. А. Колосова
СТВОРЕННЯ ВЕБ-САЙТУ
Збірник описів лабораторних робіт
Для студентів, які навчаються за напрямом
Зміст
Лабораторна робота 1. Основи HTML та CSS. 2
Завдання 1. Форматування тексту. 2
Завдання 2. Робота із шаблонами. 2
Вказівки до виконання роботи.
Загальні зауваження щодо роботи з Adobe DreamWeaver 2
Вказівки до виконання завдань (за пунктами завдань) 2
Лабораторна робота 2. Основи Joomla! 2
Вимоги до оформлення.
Приклад головної сторінки сайту. 2
Приклад головної сторінки сайту (шаблон CloudBase 2.0) 2
Покроковий посібник для виконання завдання 1. 2
FAQ щодо виконання завдання 2. 2
Лабораторна робота 3. Основи Wordpress. 2
Приклад головної сторінки сайту. 2
Порядок виконання роботи.
Програмне забезпечення до лабораторних робіт.
Лабораторна робота 1. Основи HTML та CSS. 2
Лістинг файлу template.htm.. 2
Лістинг файлу t-style.css. 2
Лабораторна робота 2. Основи Joomla! 2
Лабораторна робота 3. Основи WordPress. 2
Лабораторна робота 1. Основи HTML та CSS.
Завдання 1. Форматування тексту
Знайдіть в інтернеті будь-який текст структурований (наприклад, статтю з вікіпедії). Залишіть від нього 4 розділи по 5 абзаців у кожному (відкиньте або поєднайте зайві абзаци, можна також розділяти існуючі на кілька). Текст потрібно оформити у вигляді html-файлу з прикріпленим до нього файлом css відповідно до таких вимог:
1) Заголовок сторінки має відповідати назві тексту.
3) Повинна зберегтися структура розділів (тобто заголовки мають бути виділені як заголовки).
4) Найперший абзац (з наявних 20-ти) має бути вирівняний праворуч і набраний жирним курсивом.
5) На початку сторінки має бути зміст у вигляді нумерованого списку розділів, кожен рядок якого має бути посиланням на відповідне місце на сторінці.
7) Текст повинен відображатися у двох варіантах залежно від того, на який із стильових файлів (style1.css, style2.css) посилається заголовок. Відмінності між варіантами такі:
а) Перший варіант набраний шрифтом Arial, абзаци вирівняні з лівого краю, текст останнього абзацу кожного розділу червоний, розмір заголовків 120% від основного тексту.
б) Другий варіант набраний шрифтом Times New Roman, абзаци вирівняні по ширині, текст останнього абзацу кожного розділу зелений, розмір заголовків 150% від основного тексту, вони вирівняні по центру.
Завдання 2. Робота з шаблонами
Створіть сайт із чотирьох html-сторінок з панеллю навігації (на основі файлу template.html та css-таблиці t-style.css), кожна з яких містить у верхній частині назву тексту із завдання 1, у лівій частині – його зміст, а в правої частини – одне із його розділів. При цьому
1) Текст повинен бути вирівняний по ширині та набраний шрифтом Arial, інші прибамбаси із завдання 1 приберіть.
2) Пункти змісту мають бути оформлені як гіперпосилання на відповідні сторінки сайту.
3) Заголовки сторінок у браузері повинні відповідати назві розділів.
4) Колір фону частин сторінки потрібно змінити з виставлених мною на адекватні. При цьому колірна схема всіх сторінок сайту має бути однаковою.
5) Ширина меню навігації має бути достатньою, щоб вміститиназви розділів без перенесення.
Вказівки до виконання роботи
Загальні зауваження щодо роботи з Adobe DreamWeaver
На початку виконання лабораторної роботи створіть на робочому столі папку під своїм прізвищем. Потім запустіть Adobe DreamWeaver (Меню "Пуск" у Windows - "Всі програми" - "Adobe CSS Collection" (прокрутіть меню, поки не з'явиться ця папка) - "Adobe DreamWeaver CSS").
Переведіть перемикач "Code-Split-Design" над робочим вікном DreamWeaver-а в положення "Split" і увімкніть опцію "Live view" там же. Тепер ви можете працювати з html-кодом у лівій частині вашого робочого вікна (ліворуч від нього має бути синя смужка з номерами рядків) і паралельно переглядати у правій частині вікна, як він відображатиметься у браузері DreamWeaver-а (для цього достатньо клацнути мишкою в правою частиною екрана після того, як ви зміните код).
Вказівки до виконання завдань (за пунктами завдань)
Завдання 1
Створіть на робочому столі папку під своїм прізвищем. Потім створіть в Adobe DreamWeeaver новий html-файл - для цього натисніть New в меню File і виберіть Type: HTML, Layout: none. Відразу збережіть створений вами файлу папці під нормальним ім'ям (наприклад, article.html). Для цього натисніть Save As в меню File, виберіть папку і введіть ім'я файлу (розширення .html писати не потрібно, воно підставиться автоматично).
Текст статті потрібно вставити у створений вами html-файл між тегами та