Урок 16-17

Проект

«Створення  тематичного сайту із використанням
каскадних аркушів стилю CSS»

Мета роботи: навчитися використовувати HTML  та  CSS для форматування тексту веб-сторінок, ство­рення гіперпосилань, вставлення графіки і таблиць


Створіть сайт «Рослини  символи України» із трьома рівнями іє­рархії сторінок. Головна сторінка має складатися з тек­стової та графічної інформації, розташованої у комірках таблиці чи в блоках структурованої сторінки.  В одну з комірок помістіть зображення, що буде використане як карта посилань. Сторінки розділів мають містити фотографії та текстові описи.


















Порядок роботи

1.   Створіть колаж з карти України, та зображень квітів та дерев назвіть karta.jpg. Використайте ресурси:




2.   Створіть папку та розташуйте у ній такі графічні фай­ли: karta.jpg (карта посилань, на якій зображені дерева і кві­ти), та зображення рослин, наприклад kalyna.jpg (калина), topolya.jpg (тополя), barvinok.jpg (бар­вінок) та lyon.jpg (льон), чи інші.


3.   Відкрийте вікно програми Блокнот та створіть Головну сторінку за прикладом. Збережіть файл із назвою index.html.

Тексти:

Ø Зліва : «Людство живе в оточенні величезної кіль­кості різноманітних рослин. Кожен із нас може по-різному характеризувати будь-яку рослину, але слід знати, що у при­роді нема нічого зайвого, тому кожна рослина може бути по-своєму корисною. Наші предки це добре розуміли, тому використовували у лікувальних цілях різні рослини».



Ø Праворуч: «В українському фольклорі зустрічають­ся згадки про величезну кількість рослин, багато з яких мають лікувальні властивості. Проте лише деякі з них здо­були особливу любов українського народу та стали симво­лічними для національної культури українців.


Лікарських рослин, які використовують у народній і про­фесійній медицині, дуже багато. Вони бувають:

      трав'янисті


      дерев'янисті».



4.   Створіть сторінки найнижчого ієрархічного рівня — про кали­ну, тополю, барвінок і льон — та збережіть їх у поточній пап­ці у файлах kalyna.htm, topolya.htm, barvinok.htm і lyon.htm. Використайте для форматування об’єктів сторінки таблиці CSS. Створіть опис заголовків 2 рівня та тексту сторінок, використайте їх для форматування сторінок із рослинами. Введіть на сторінки опис кожної з рослин.

·         Про калину: «Кущ калини біля материної хати — це не ли­ше окраса, а й символ України, наш духовний світ, наша спадщина. Якщо троянди й виноград, за влучним висловом Максима Рильського, символізують красиве й корисне, то кущ калини, увібравши обидві ознаки, опредметнює й духов­ний потяг до своєї землі, свого оберега, своїх традицій».
·         Про тополю: «В українському фольклорі часто зустріча­ються згадки про всім відому рослину. Це тополя (Populus) — міфічний образ-тотем давніх українців. Свято то­полі проводили наприкінці весни. Обирали найстрункішу дівчину, якій зав'язували над головою руки, на які наві­шували стрічки, хустки, намисто, водили селом, лугом, полем та співали: «Стояла Тополя край чистого поля, стій, Тополенько, стій не розвивайся, буйному вітроньку не під­давайся...». Особливо свято тополі було поширене в околицях Києва».
·         Про барвінок: «Ще однією рослиною, що зустрічається у ба­гатьох легендах та казках українського народу, є барвінок (Vinca). Це трав'яниста багаторічна рослина, яка має ви­довжене листя, квітки синьо-фіолетового кольору, плід, що складається з двох вільних листків. Барвінок зацвітає в травні-липні. Поширений барвінок в Україні, Білорусі та на Кавказі».
·         Про льон: «У нашій країні льон висівають переважно в зо­ні Полісся, саме тому його ще називають поліським шов­ком. Поліщуки добре знають, коли, в яку пору краще сія­ти, збирати, слати, тіпати льон, з приводу чого склалося багато народних прикмет. Так, вважали, що сіяти льон найкраще у п'ятницю чи суботу, несучи насіння в поле у білій скатертині».

Додайте до сторінок із текстом малюнки рослин. Відформатуйте їх. Додайте фон. Заголовки  тощо.



5.  Створіть сторінки другого рівня ієрархії про дерева та квіти. Ви­користайте зображення як посилання на сторінки третього рів­ня ієрархії. Збережіть сторінки у файлах з іменами dereva.html,  kvity.html




Додайте текст:
«Найстаріше дерево. В урочищі Юзефінська Дача в Рокитнівському районі на Рівненщині росте дуб, якому, за деякими даними 1000, а за іншими – 1300 років! Стовбур цього велетня сягає понад 8 м в обхваті. Його можна побачити на 40-му кілометрі від м. Рокитного. Його огороджено штахетником з табличкою: “Дуб черешчатий. Вік 1300 р. Охороняється державою”.
Найменш довговічне дерево. Життя верби триває до 60 років. (Для порівняння: яблуня живе до 100, вишня й черешня – до 300 років). Найшвидше росте серед наших дерев тополя. За рік живець тополі чорної, або канадської завдовжки 30-35 см перетворюється на дерево висотою 2-3 м. Вчений-селекціонер Д.П.Торопогрицький вивів гібрид, який в умовах Херсонщини щорічно дає приріст 3-4 м. Більшість деревних порід, до речі, росте у висоту навесні або на початку літа лише кілька десятків днів, а тополя – з весни до осені понад 190 днів.»

Зробіть кожен малюнок посиланням на сторінку з описом відповідної рослини. Приклад сторінки dereva.htm 


6.  Збережіть усі сторінки та малюнки в одну папку. Перегляньте файл головної сторінки, перевірте посилання.

Критерії оцінювання


Назва
Бали
Назва файлу
Пункт опису
1
Колажі
3
karta.jpg та малюнки на сторінках третього рівня:

kalyna.jpg , topolya.jpg , barvinok.jpg , lyon.jpg
Пункт 1
2
Сторінки із рослинами
4 (по 1 балу за кожну)
kalyna.html, topolya.html, barvinok.html, lyon.html
Пункт 4
3
Сторінка «Квіти»
1
kvity.html
Пункт 5
4
Сторінка «Дерев’янисті рослини», текстові посилання
1
dereva.html
Пункт 5
5
Головна сторінка, карта гіперпосилань
2
index.html
Пункт 3
6
Опис форматів за допомогою CSS
1
xxxxx.css
Пункт 4


12 балів






Немає коментарів:

Дописати коментар