Завдання 

Для виконання завдання самостійно оберіть і виконайте один із двох запропонованих варіантів.

Увага! Студент самостійно обирає варіант завдання.

Варіант 1

Використовуючи приклад проєктування і верстки  сайту-портфоліо, який розглянуто в методичних рекомендаціях до даного заняття, створіть власний сайт-візитку (фірми, установи, підприємства) на 2 колонки із горищем, підвалом і горизонтальною навігаційною панеллю.    Ліворуч — інформаційний блок, який завжди змінюється при переході на іншу сторінку, праворуч — сайдбар, який може залишатися незмінним. Прокручуватися має лише вміст інформаційного блоку, а горище, підвал і меню — залишатися на місці.

Орієнтовний перелік сторінок, які може містити сайт-візитка

• Головна
• Продукція
• Партнери
• Виробництво
• Контакти
• Співпраця
• Нагороди

Можливе наповнення

Інформація про магазин (фірму) (головна сторінка) — містить назву, логотип, загальну інформацію про магазин, покликання (меню) для переходу на інші сторінки сайту.

Інформація про товари (послуги) — ця сторінка повинна містити список товарів, що пропонуються, їх коротка характеристика й фотоілюстрації.

Прайс-лист (на товари, послуги) — містить розцінку на товари, що пропонуються для продажу (у вигляді таблиці).

Динаміка зміни цін на певні товари, рекламні пропозиції.

Правила купівлі товарів у магазині (яким чином можна розрахуватися за товар).

Умови співпраці, партнерські відносини.

Технології виробництва продукції.

Досягнення компанії.

Структура Головної сторінки сайту-візитки

• Горище (шапка сайту, верхній колонтитул) — може містити контакти, логотип, банер, заголовок.
• Горизонтальна навігаційна панель (меню) — містить пункти, за якими можна перейти на інші сторінки сайту.
• Лівий інформаційний блок — основний контент, що відповідає темі розділу.
• Правий інформаційний блок (сайдбар) — хмара тегів, додаткова інформація, акційні пропозиції, календарик, погода.
• Підвал сайту (нижній колонтитул) — тут можуть бути контакти, права як розробника сайту.

Приклад виконання проєкту

Варіант 2

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

Орієнтовний перелік сторінок, які може містити сайт-портфоліо

• Головна
• Мої захоплення
• Мої друзі
• Моя родина
• Автобіографія
• Фотогалерея
• Домашні улюбленці
• Мої досягнення
• Мої проєкти

Структура Головної сторінки сайту-портфоліо

• Горище (шапка сайту, верхній колонтитул) — може містити ваші контакти.
• Вступний розділ — містить фото, тут розміщено ваше ім’я, прізвище й професія.
• Горизонтальна навігаційна панель (меню) — містить пункти, за якими можна перейти на інші сторінки сайту.
• Лівий інформаційний блок — тут ви можете більше розповісти про себе, свої захоплення, досягнення.
• Правий інформаційний блок (сайдбар) — тут можуть бути розміщенні приклади ваших робіт із коротким описом і картинками.
• Підвал сайту (нижній колонтитул) — тут можуть бути ваші контакти, права як розробника сайту.

Приклад виконання проєкту

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr8_project.
2. У ній створіть папку images і завантажте туди  зображення, які маєте розміщувати на сторінках сайту. 
3. Відкрийте редактор коду Visual Studio Code, а в ньому папку pr8_project. 
4. У папці pr8_project створіть новий  html-документ з ім’ям index.html — це буде файл Головної сторінки сайту. 
5. У папці pr8_project створіть файл css (у ньому будуть задані css-правила) і підключіть його до index.html.
6. Виконайте верстку Головної сторінки сайту, використовуючи методичні рекомендації і приклад створення сайту-портфоліо.
7. Після того як Головна сторінка готова — протестуйте її в браузері.
8. Створіть інші сторінки web-сайту. Пам’ятайте, що вони можуть мати таку саму структуру, як і Головна сторінка, лише змінюється лівий інформаційний блок.
9. Протестуйте всі сторінки в браузері.
10. Запакуйте папку pr8_project в архів з ім’ям pr8_project -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Видима, прямокутна область web-сторінки, що не включає адресний рядок, панель закладок й інші службові елементи браузера 

Основні особливості адаптивного дизайну

Укажіть, що таке підхід Mobile First

При створенні структури папок проєкту файл index.html повинен знаходитися в папці

Перегляньте фрагмент коду

@media (max-width: 600px) {

      body {

        color: blue;

      }

    } 

@media (min-width: 700px) {

      body {

        color: green;

      }

    }

Укажіть, яким буде колір тексту на екрані з шириною в’юпорта 800 px

Укажіть, за допомогою якої директиви оголошується медіазапит

Прочитайте опис ситуації

Розробник створив сторінку з формою заявки на участь у програмі соціальної допомоги.

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

Укажіть, який медіазапит створить розробник, щоб додати на сайт версію форми для друку

html-елемент для інформації, яка розташовується внизу web-сторінки і зазвичай містить інформацію про правовласників, контактні та юридичні дані, покликання на основні розділи сайту

Перегляньте фрагмент коду

@media (min-width: 550px) {

  body {

    background-color: blue;

  }

}

Виберіть УСІ значення ширини області перегляду, при яких буде застосовуватися синій колір фону