Шановні учні,
ми продовжуємо з Вами вивчати тему: "Проектування та верстка веб-сторінок"
(1 завдання треба виконати до 19.03)
(1 завдання треба виконати до 19.03)
Перед початком роботи пройдіть , будь-ласка онлайн тест та перевірте свої знання.
Після проходження тесту виконайте далі практичну роботу, яку ми розпочали з Вами на попередньому уроці. Тест цієї практичної роботи подано нижче. Якщо у Вас виникають проблеми при виконанні то перегляньте теоретичний матеріал за посиланням: https://html5book.ru/vyorstka-stranicy-sayta/.
Результати виконання чотирьох завдань необхідно переслати у вигляді HTML файлів на пошту за адресою - tdariy68@gmail.com
Практична робота
2) У прикладі показано додавання лінії зліва від елементу:
<style type="text/css">
.line {
border-left: 1px dotted red;
padding: 10px;
}
</style>
<div class="line">
Одиннадцать братьев-принцев уже ходили в школу;
на груди у каждого красовалась звезда, а сбоку гремела сабля;
писали они на золотых досках алмазными грифелями и отлично
умели читать, хоть по книжке, хоть наизусть -- все равно.
</div>
3) У прикладі показано схлопування відступів і їх прозорість.
<style type="text/css">
.layer1, .layer2 {
background: #F2EFE6;
border: 1px solid #B25538;
padding: 10px;
margin: 20px;
}
</style>
<div class="layer1">
Отец их, король той страны, женился на злой королеве,
которая невзлюбила бедных детей. Им пришлось испытать
это в первый же день: во дворце шло веселье, и дети затеяли
игру в гости, но мачеха вместо разных пирожных и печеных яблок,
которых они всегда получали вдоволь, дала им чайную чашку
песку и сказала, что они могут представить себе, будто это угощение.
</div>
<div class="layer2">
Через неделю она отдала сестрицу Элизу на воспитание в деревню
каким-то крестьянам, а прошло еще немного времени, и она успела
столько наговорить королю о бедных принцах, что он больше
и видеть их не хотел.
</div>
4) У прикладі показано використання вкладених блоків.
<style type="text/css">
span.inlineBlock{
display:inline-block;
vertical-align:top;
}
.parent{
width:100%;
background-color:red;
}
.child1{
width:40%;
background-color:yellow;
}
.child2{
width:60%;
background-color:green;
}
.blk {
padding: 20px;
border: 2px solid #E81E25;
margin: 10px;
}
</style>
<span class="inlineBlock parent">
<span class="inlineBlock child1"><div class="blk">
-- Летите-ка подобру-поздорову на все четыре стороны! -- сказала злая королева. --
Летите большими птицами без голоса и промышляйте о себе сами!
</div></span><span class="inlineBlock child2"><div class="blk">
Но она не могла сделать им такого зла, как бы ей хотелось, --
они превратились в одиннадцать прекрасных диких лебедей,
с криком вылетели из дворцовых окон и понеслись над парками и лесами.
Было раннее утро, когда они пролетали мимо избы, где спала еще крепким
сном их сестрица Элиза. Они принялись летать над крышей, вытягивали свои
гибкие шеи и хлопали крыльями, но никто не слышал и не видел их; так им
пришлось улететь ни с чем. Высоко-высоко взвились они к самым облакам
и полетели в большой темный лес, что тянулся до самого моря.
</div></span>
</span>
5) У прикладі показано, як задати висоту блоку в процентах.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Высота блока</title>
<style type="text/css">
html, body {
height: 100%; /* Висота зовнішнього елемента */
margin: 0; /* прибираємо відступи */
}
div {
height: 100%; /* Висота */
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>Висота 100%</div>
</body>
</html>
(2 завдання треба виконати до 06.04)
Графіка для веб середовища та анімаційні ефекти.
1. Спочатку ще раз прочитайте та повторіть п.11.12 та 11.13 підручника ст 186 - 192
2. Потім необхідно відповісти на тест.
3. На закінчення необхідно виконати практичну роботу ст. 189, завдання для самостійного виконання тільки зразок (рис.11.71 в). Тема: "Історія сучасної України 1991-2020 роки. Цікаві факти."
4. Для тих хто зацікавився данною темою перегляньте відео: http://programer.org.ua/dynamics-js-prosta-biblioteka-dlya-stvorennya-animatsiyi/
Комментариев нет:
Отправить комментарий