WEB - дизайн / Лабораторні роботи / Лабораторна робота №14
.pdf
Лабораторна робота №14 Удосконалення веб-сторінки за допомогою CSS
Мета: за допомогою таблиці стилів навчитися додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.
1. CSS зображення - фон визначається за допомогою зображення.
Розглянемо такий приклад:
<head>
<title>Зображення - фон в CSS</title> </head>
<body style="background-image:url(../images/primer-img.jpg) "> <p>Будь-який довільний текст.</p>
</body>
</html>
Результат :
2. CSS атрибути, що визначають прозорість фону.
Приклад 2
<head>
<title>Напівпрозорий елемент</title> <Style type="text/css">
div.page {width:450px; height:300px; background:url(../images/beetle.jpg) repeat; border:2px solid #555555}
div.block {width:260px; height:140px; margin-top:79px; margin-left:94px; backgroundcolor:#ffffff; border:1px solid #333333;
/* Internet Explorer */ filter:alpha(opacity=50); /* CSS3 standard */ opacity:0.5}
div.block p {margin:47px 0 0 10px; font-weight:bold; color:#000000}
</style>
</head>
1
<body>
<div class="page"> <Div class="block">
<p>Прозрачный фон для блоку.</p> </div>
</div>
</body>
Результат:
CSS прозорість фону була задана для Internet Explorer і для інших браузерів.
3. CSS атрибути і значення, що визначають положення фону
Зображення як фон web-сторінки:
<head> <title>Пример</title> <style type="text/css"> body {
background-image:url(smile.png)
}
</style>
</head>
<body>
<p>Текст чорного кольору (за умовчанням) </p> </body>
background-image:url(../images/cvetok.png) визначає зображення-фон.
За умовчанням зображення-фон розповсюджується по горизонталі (repeat-x) і по вертикалі (repeat- y), заповнюючи собою весь простір, що видно з результату прикладу.
2
Атрибути і значення
·margin – визначає зовнішні відступи.
·margin:0 auto – визначає центрування блоку по горизонталі.
·padding – визначає поля усередині блоку.
·border – визначає властивості меж.
·width – визначає ширину в пікселях або у відсотках.
·height – визначає висоту.
·color – визначає колір тексту.
4.CSS атрибути і значення, що визначають нерухомий фон Приклад того, як зафіксувати фонове зображення в потрібному місці:
<head> <title>Пример</title> <style type="text/css">
body { background-color:BlanchedAlmond; }
.fon_scroll { margin:0 auto; width:700px; height:800px; padding:30px;
background-color:#ffffff; background-image:url(../images/7.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:40px 40px;
}
</style>
</head>
<body>
<div class="fon_scroll">
<P>Текст документа</p> <p>Текст документа</p> <P>Текст документа</p> <p>Текст документа</p> </div>
</body>
За умовчанням фонове зображення прокручується разом з іншими елементами сторінки.
·background-attachment:fixed фіксує фонове зображення в заданій позиції.
·background-position: задає точні координати фону по горизонталі і по вертикалі. Результат:
5. CSS атрибути і значення, що визначають властивості списків
3
<title>Пример горизонтального CSS списка</title> <style type="text/css">
* {font-family: Arial, Helvetica, sans-serif}
#nav_menu {padding: 0; width: 762px; margin: 0 auto} #nav_menu ul {list-style: none; margin: 0; padding: 0} #nav_menu li {display: inline}
#nav_menu а { float: left; width: 125px; height: 30px;
background-color: #cc0033; border-left: 2px solid #ffffff; text-decoration: none; text-align: center;
padding: 0; padding-top: 10px; font-size: 18px; color: #ffffff
}
#nav_menu a:hover {background-color: #990033; color: Tomato} </style>
</head>
<body>
<div id="nav_menu">
<ul>
<li><a href="#">Sony</a></li> <Li><a href="#">Asus</a></li> <li><a href="#">Dell</a></li> <Li><a href="#">Toshiba</a></li> <li><a href="#">Acer</a></li> <Li><a href="#">Lenovo</a></li> </ul>
</div>
Атрибути і значення
·Селектор * – визначає всі елементи документа. В даному випадку встановлений шрифт.
·padding:0 – відміняє внутрішні поля.
·margin:0 auto – визначає центрування блоку.
·list-style:none – визначає відсутність маркерів списку.
·margin:0 – відміняє зовнішні поля блоку
·display:inline – визначає горизонтальне положення об'єктів.
·border-left: – визначає властивості лівої межі.
·padding-top: – визначає розмір верхнього внутрішнього поля.
·text-decoration:none – відміняє підкреслення тексту.
·float:left – визначає обтікання зліва (докладніше в одному з наступних уроків).
·a:link, a:active, a:visited замінені селектором а, тобто всі три псевдоелементи мають однакові властивості.
Ширина блоку підрахована так: 762 = 125 * 6 + 2 * 6, де 125 * 6 > довжина 6-ти посилань, 2 * 6 > загальна ширина атрибуту border-left.
4
6. CSS атрибути і значення, що визначають списки із зображенням 6.1. Представимо зображення як елемент списку:
<head>
<title>Изображение в роле маркера списка</title> <style type="text/css">
.list_img li { list-style: none; line-height: 170%; padding-left: 25px;
background: url(../images/pencil2.png) no-repeat left 50%
}
</style>
</head>
<body>
<ul class="list_img">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
<li>Acer</li>
<li>Lenovo</li>
</ul>
</body>
line-height:170% визначає відстань між строчками по вертикалі.
6.2. Визначуваний CSS маркер списку у вигляді зображення
CSS списки, у яких замість маркерів, – зображення, можна створювати так:
<head>
<style type="text/css">
ul.list_img {list-style: url(smile1.jpg) outside; line-height: 170%}
</style>
</head>
<body>
<ul class="list_img"> <li>Sony</li> <li>Asus</li> <li>Dell</li> <li>Toshiba</li> <li>Acer</li> <li>Lenovo</li> </ul>
</body>
CSS: Властивості списків
·list-st yle — визначає властивості маркера або номера позиції списку:
·list-style: list-style-image | list-style-position | list-style-type
·list-st yle-image — замість маркера елементу списку відображається малюнок:
·list-style-image: url(xxx.jpg)
·list-st yle-posit ion — визначає позицію маркера:
5
· list-style-position: outside | inside > значення outside (за умовчанням) відображає маркер елементу списку на деякій відстані від рядка; inside – відображає маркер елементу списку як перший символ рядка.
·list-st yle-t ype — визначає тип маркера або номер позиції списку:
·list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
· |
list-style-type: disc |
> |
відображає закрашений кружок (значення за умовчанням); |
|||
· |
list-style-type: circle |
> |
коло; |
|
||
· |
list-style-type: square |
> |
закрашений квадрат; |
|||
· |
list-style-type: decimal |
> |
маркерами є арабські цифри; |
|||
· |
list-style-type: lower-roman |
> |
маленькі римські цифри; |
|||
· |
list-style-type: upper-roman |
> |
великі римські цифри; |
|||
· |
list-style-type: lower-alpha |
> |
маленькі латинські букви; |
|||
· |
list-style-type: upper-alpha |
> |
великі латинські букви; |
|||
· |
list-style-type: none |
> |
|
маркер відсутній. |
||
7. |
CSS атрибути, що визначають прозоре зображення |
|||||
7.1. CSS дає можливість регулювати прозорість зображення:
<img src="../images/mustang.jpg" width="250" height="153" alt="" hspace="47" /> <img src="../images/mustang.jpg" width="250" height="153" alt=""style="opacity:0.25; filter:alpha(opacity=25)" />
Результат:
Атрибути і значення
·opacity:0.25 – визначає прозорість зображення. Значення: від 0 до 1.
·filter:alpha(opacity=25) – параметр для Internet Explorer. Значення: від 0 до 100.
·hspace="" – визначає додаткові відступи від зображення по горизонталі.
·alt="" – визначає альтернативний текст. Потрібно прописувати навіть порожній атрибут.
7.2. Визначаємо CSS прозорість зображення
Розглянемо наступний код:
<img src="a_11.jpg" width="250" height="153" alt="" hspace="21"
vspace="15" style="opacity:0.25;filter:alpha(opacity=25)"onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="a_12.jpg" width="250" height="153" alt="" hspace="21"
vspace="15" style="opacity:0.25;filter:alpha(opacity=25)"onmouseover="this.style.opacity=1;this.filters. alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="a_13.jpg" width="250" height="153" alt="Открыть в новому вікні" hspace="21" vspace="15" border="0"style="opacity:0.25;filter:alpha(opacity=25)"onmouseover="this.style.opacity=1;this.filters.al pha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a>
<img src="a_14.jpg" width="250" height="153" alt="" hspace="21"
vspace="15" style="opacity:0.25;filter:alpha(opacity=25)"onmouseover="this.style.opacity=1;this.filters. alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Проведіть покажчиком миші по картинках внизу:
6
7.3. CSS розмір зображення, фон і рамка зображення.
Розглянемо наступний приклад:
<head>
<style type="text/css">
img.primer {width:450px; height:397px; padding:10px; background:#eeeeee; border:1px solid #cccccc}
</style>
</head>
<body>
<p><img src="audi_big.jpg" class="primer" /></p> </body>
Результат:
Позначайте реальний розмір зображення, щоб не спотворювати початкову якість.
Опис значень атрибутів
·width – ширина картинки.
·height – висота картинки.
·background – фон картинки.
·padding – поля картинки.
·border – рамка картинки.
8. Обтікання елементів web-сторінки в CSS
CSS атрибут float визначає обтікання одних елементів іншими.
7
Приклад CSS обтікання з параметром float:left:
<title>CSS обтекание</title> <style type="text/css">
div.flowers img {float:left; margin:26px; border:1px solid #000000} div.flowers a:hover img {margin:26px; border:1px solid #ffffff}
</style>
</head>
<body>
<div class="flowers">
<а href="#"><img src="../images/bee.jpg" alt="" width="160" height="160" border="0" /></a>
<а href="#"><img src="../images/flower4.jpg" alt="" width="160" height="160" border="0" /></a> <а href="#"><img src="../images/flower5.jpg" alt="" width="160" height="160" border="0" /></a> <а href="#"><img src="../images/flower.jpg" alt="" width="160" height="160"
border="0" /></a>
<а href="#"><img src="../images/flower3.jpg" alt="" width="160" height="160" border="0" /></a> <а href="#"><img src="../images/bee2.jpg" alt="" width="160" height="160"
border="0" /></a> </div>
<div style="clear:left"> </div> </body>
Як результат обтікання зображень, ми маємо галерею:
Атрибути і значення
·div.flowers img – визначає властивості зображення img в блоці <Div class="flowers"> </div>.
·float:left – визначає обтікання зліва направо.
·margin: – визначає відступ по всьому периметру зображення.
·border:1px solid #000000 – визначає властивості межі елементу.
·<div style="clear:left"> </div> – зупиняє обтікання з лівого боку, тобто обтікання не розповсюджуватиметься на даний блок і на наступні елементи.
Приклад CSS обтікання з параметром float:right:
<title>CSS обтекание</title> <style type="text/css">
div.flowers_2 img {float:right; margin:26px; border:1px solid #000000} div.flowers_2 a:hover img {margin:26px; border:1px solid #ffffff}
</style>
</head>
<body>
<div class="flowers_2">
8
<H1 align="center">Цветы</h1>
<а href="#"><img src="../images/flower4.jpg" width="160" height="160" border="0" /> </a> <а href="#"><img src="../images/flower5.jpg" width="160" height="160" border="0" /> </a> <а href="#"><img src="../images/flower.jpg" width="160" height="160" border="0" /> </a> <а href="#"><img src="../images/flower3.jpg" width="160" height="160" border="0" /> </a> <h1 align="center" style="clear:both">Цветы </h1>
<а href="#"><img src="../images/bee.jpg" width="160" height="160" border="0" /> </a> <а href="#"><img src="../images/bee2.jpg" width="160" height="160" border="0" /> </a> </div>
</body>
Атрибути і значення
·clear:both – відміняє обтікання як зліва, так і справа.
·align="" – визначає горизонтальне вирівнювання.
Завдання.
1.Розглянути усі приклади приведені у лабораторній роботі.
2.Виконати приклади з пунктів 5,6,7,8.
3.До сайту, стореного у лабораторній роботі №12 додати зміни:
Øдодати горизонтальне меню;
Øпрозорий фон для блока;
Øпрозоре фонове зображення;
Øсписок з маркерами у вигляді зображення;
Øсторінку «Галерея» та додати ефект підсвічення зображення при наведенні курсору (п.7)
4.Оформити звіт: тема, мета, виконаті приклади (код+скріншот), скріншоти сторінок сайту з внесеними змінами.
9