Scribd Logo
Upload

Welcome to Scribd!

  • веб урок 9-практична 3

    Uploaded by

    Кіріл Крачек
    31 views3 pages

    Original Title

    веб_урок_9-практична_3

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    31 views3 pages

    веб урок 9-практична 3

    Uploaded by

    Кіріл Крачек

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Урок 9.

    Практична робота 3
    Стильове оформлення сторінок з використанням CSS
    Увага! Під час роботи з комп'ютером
    дотримуйтеся правил безпеки та санітарно-
    гігієнічних норм.
    Завдання. Використовуючи каскадні таблиці
    стилів відформатувати сторінки сайту,
    створеного у попередній практичній роботі.
    Хід виконання
    На початку роботи відкрийте вашу головну
    сторінку браузером, зробіть скріншот сторінки.
    1. У теці «site» створіть теку «css».
    2. Відкрийте редактор коду. Створіть файл з назвою style.css, збережіть його у теці «css».
    3. Відкрийте браузер. Оберіть будь-який генератор кольорових палітр. наприклад
    https://coolors.co. Згенеруйте палітру.(див. рис. Палітра)

    Примітка. В наданому вам коді замість «з обраної палітри!» додавайте код кольору, не
    забувайте про знак # на початку шестизначного коду!
    Радимо для кольору тла та тексту обирати контрастні відтінки.

    4. Формуємо стилі для кожного елемента наших сторінок


    5. Почнемо з головних елементів
    a. Пропишемо стилі для body
    body {
    font-family: Arial, San-Serif;
    font-size: 100%;
    background-color: з обраної палітри!;
    б Зробимо наш список-меню горизонтальним та знімемо значок маркеру
    }ul {
    margin: 0;
    padding: 0;
    }
    ul li {
    list-style-type: none;
    }
    a{
    text-decoration: none;

    в Обираємо стилі для всіх елементів хедеру:


    header {
    padding: 50px 0;
    background-color: з обраної палітри!;
    }
    h1,h2 {
    color: grey;
    text-align: center;
    }
    г Обираємо стилі для блоку навігації:
    nav {
    background-color: з обраної палітри;
    border-color: з обраної палітри;
    min-height: 64px;
    }
    nav li {
    float: left;
    width: 100px;
    }
    nav a {
    display: block;
    color: з обраної палітри – контрастно до кольору тла;
    line-height: 4em;
    font-weight: bold;
    text-align: center;
    }
    nav li a:hover {
    color: з обраної палітри – контрастно до кольору зміненого тла;
    background-color: з обраної палітри – контрастно до кольору активного елемента
    меню;
    }
    д Обираємо стилі для абзаців
    p{
    font-size: 16px;
    line-height: 1.3em;
    margin-top: 0.1em;
    margin-bottom: 0;
    color: з обраної палітри – контрастно до кольору тла
    }
    Примітка. Якщо ми хочемо, щоб між абзацами були відступи - прибираємо рядки з
    використанням “margin” зі стилів.
    є Обираємо стилі для футеру
    footer {
    background-color: з обраної палітри!
    color: з обраної палітри;
    padding: 20px 0;
    margin-top: 30px;
    }
    6. Зберігаємо файл style. css
    7. Відкриваємо всі файли html, створені на попередній практичній роботі.
    8. В кожному файлі в <head> додаємо наступний рядок, прописуючи посилання на
    створений нами файл зі стилями
    <link rel="stylesheet" type="text/css" href="css/style.css">
    9. Зберігаємо і закриваємо файли, оновлюємо у браузері нашу головну сторінку.
    10. Надішліть архів з роботою вчителю та 3 однокласникам.

    Аналіз отриманих результатів.


    Як змінився сайт після додавання таблиць стилів? Порівняйте зі скріншотом отримані
    результати. Сформулюйте і запишіть різницю, яку ви помітили.
    Перегляньте сайти, створені вашими однокласниками. Порівняйте роботи і зробіть висновок.
    Домашнє завдання
    Базуючись на знаннях, отриманих під час виконання практичної роботи додайте стильове
    оформлення веб-сторінкам вашого сайту, розробленого у попередньому домашньому
    завданні. Архів з сайтом надішліть на електронну скриньку вчителю.

    You might also like