Урок "CSS для верстання веб-сторінки" - завдання 2
Завдання 2 для уроку "CSS для верстання веб-сторінки"."
Щоб самостійно створити сайт, потрібно визначити, як будуть розташовуватись його основні частини: навігація (головне меню), шапка сайту (назва та логотип), статті та інформація (контент), "підвал" сайту (нижня частина), інші частини (наприклад, фотогалерея, інші меню та ін.).
На малюнку нижче - 4 варіанти взаємного розташування основних частин. Ці частини можна переставляти і змінювати розміри як завгодно. Головне - щоб відвідувачу було зрозуміло, про що сайт, і було зручно ним користуватись.
Рисунок 1
1. На основі наведеного вище малюнку визначити, яка схема підходить до шаблонів сайтів, розташованих нижче:
Рисунок 2
2. Обрати тему і заголовок для власного сайту.
3. Визначити, яка у нього буде схема (із запропонованих вище або своя)
4. Підібрати кілька зображень для сайту
1) табличної верстки - це означає повторити обраний дизайн за допомогою тегів таблиці, зовнішньої таблиці стилів та її класів
1.1) створити основу html-файлу і зберегти під іменем index.html
1.2) вказати назву сайту (тег <title>Назва сайту</title>)
1.3) створити таблицю з будовою, яка схожа на обрану схему сайту
1.4) у відповідних комірках таблиці створити
- меню сайту (три пункти)
- шапку сайту (назва і тематична картинка)
- текст на головній сторінці (комірка "контент" на схемі)
- підвал сайту (написати коли створено сайт і хто його власник)
1.5) створити файл стилів style.css і підключити його у html-коді
1.6) оформити стилі свого сайду відповідно до своїх ідей (колір фону, шрифти, розташування, вирівнювання та ін.)
або
2) блочної верстки: це означає повторити обраний дизайн за допомогою семантичних елементів html5 (header, nav, article, footer, section, main та ін.), контейнерів <div></div>, зовнішньої таблиці стилів та її класів .
послідовність виконання – див. пп. 1.1)-1.6), тільки замість комірок таблиці потрібно використовувати семантичні елементи і контейнери
В результаті має вийти сторінка, схожа на схему на рисунку 1.
Щоб самостійно створити сайт, потрібно визначити, як будуть розташовуватись його основні частини: навігація (головне меню), шапка сайту (назва та логотип), статті та інформація (контент), "підвал" сайту (нижня частина), інші частини (наприклад, фотогалерея, інші меню та ін.).
На малюнку нижче - 4 варіанти взаємного розташування основних частин. Ці частини можна переставляти і змінювати розміри як завгодно. Головне - щоб відвідувачу було зрозуміло, про що сайт, і було зручно ним користуватись.
Рисунок 1
1. На основі наведеного вище малюнку визначити, яка схема підходить до шаблонів сайтів, розташованих нижче:
Рисунок 2
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
2. Обрати тему і заголовок для власного сайту.
3. Визначити, яка у нього буде схема (із запропонованих вище або своя)
4. Підібрати кілька зображень для сайту
5. Підібрати кольори для сайту - 2-3 кольори.
Цвета HTML https://colorscheme.ru/html-colors.html
Цвета HTML https://colorscheme.ru/html-colors.html
HTML цвета COLORlovers http://www.colourlovers.com/
Adobe Color CC https://color.adobe.com/ru/ - створення палітри сайту на основі завантаженого зображення.
COLORlovers http://www.colourlovers.com/ - підбір палітри сайту із колекції готових наборів.
Color Scheme Designer 3 http://colorschemedesigner.com/csd-3.5/ - підібрати кольори і побачити як вони будуть виглядати на сайті.
6. Створити заготовку головної сторінки сайту шляхом1) табличної верстки - це означає повторити обраний дизайн за допомогою тегів таблиці, зовнішньої таблиці стилів та її класів
1.1) створити основу html-файлу і зберегти під іменем index.html
1.2) вказати назву сайту (тег <title>Назва сайту</title>)
1.3) створити таблицю з будовою, яка схожа на обрану схему сайту
1.4) у відповідних комірках таблиці створити
- меню сайту (три пункти)
- шапку сайту (назва і тематична картинка)
- текст на головній сторінці (комірка "контент" на схемі)
- підвал сайту (написати коли створено сайт і хто його власник)
1.5) створити файл стилів style.css і підключити його у html-коді
1.6) оформити стилі свого сайду відповідно до своїх ідей (колір фону, шрифти, розташування, вирівнювання та ін.)
або
2) блочної верстки: це означає повторити обраний дизайн за допомогою семантичних елементів html5 (header, nav, article, footer, section, main та ін.), контейнерів <div></div>, зовнішньої таблиці стилів та її класів .
послідовність виконання – див. пп. 1.1)-1.6), тільки замість комірок таблиці потрібно використовувати семантичні елементи і контейнери
В результаті має вийти сторінка, схожа на схему на рисунку 1.
