Обробка змісту за межою видимої області елемента (властивість overflow)

Властивість overflow - обробка змісту за межами видимої області елемента, визначає, як буде відображатися зміст, що виходить за межі видимої області. Приймає одне із чотирьох значень:

· visible - відображає весь зміст елемента, навіть за межами встановленої ширини (width) і висоти (height);

· hidden - відображає зміст тільки всередині встановленої видимої області; частина елемента, що виходить за межі області, не показується;

· scroll - додає до відображуваного елемента смуги прокручування незалежно від того, чи міститься зміст елемента у відведеній йому область чи ні;

· auto - додає смуги прокручування тільки за необхідністю;

Таким чином, установлюючи значення visible, ми як би забираємо границі елемента, у той час як значення hidden аналогічно введенню властивості clip: гесt (0 х y 0), у якому х та y відповідають ширині й висоті елемента.

Завдання розташування шарів (властивість z-index)

Якщо позиціоновані елементи перекриваються, необхідно враховувати порядок шарів, у яких вони розташовані. За замовчуванням шари розташовуються один під іншим у тому порядку, у якому відповідні елементи слідують у коді HTML. Однак іноді потрібно порушити порядок розташування шарів, прийнятий за замовчуванням. Для цього застосовується властивість z-index.

Властивість z-index приймає цілі значення (включаючи негативні). Чим більше значення індексу, тим вище розташований елемент. Індекс 0 привласнюється елементу, що містить інші вкладені елементи. Інші елементи, позиціоновані під ним, мають негативні значення z-index. Ті елементи, для яких не задана властивість z-index, розміщаються відповідно їхньому положенню в коді сторінки.

 

Вивід елемента на екран (властивість visibility)

Елемент, що розміщений у документі, є за замовчуванням видимим, якщо є видимим його батьківський елемент. Але в разі приховування батьківського елементу прихованими будуть і дочірні елементи.

Для зміни установок видимості, прийнятих за замовчуванням, і керування відображенням елементів на екрані призначена властивість visibility. Ця властивість може приймати наступні значення:

· visible - виводить на екран елемент;

· inherit - успадковує властивість visibility батьківського елемента, тобто при цьому значенні видимість даного елемента визначається видимістю елемента, у якому він перебуває;

· hidden - елемент на екран не виводиться.

Незалежно від значення властивості visibility  в макеті документа приділяється місце для області висновку елемента.

Властивість visibility часто використовується для керування видимістю елемента в динамічному HTML.

Завдання до лабораторної роботи

Завдання 1.

1) Створити в папці MYWEB папку БЛОКИй скопіювати в неї 9 графічних файлів, бажано:

§ C:\ Program Files\ Microsoft Office\ CLIPART\ Publisher\ Backgrounds\ J0143753.GIF,

§ C:\Program Files\ Microsoft Office\ CLIPART\ Publisher\ Backgrounds\ WB00780L.GIF,

§ C:\ Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0382966.JPG,

§ C:\ Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0384888.JPG;

§ C:\Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0341738.JPG;

§ C:\ Program Files\ Microsoft Office\ CLIPART\ PUB60COR\ SO01236_.WMF;

§ C:\Program Files\ Microsoft Office\ CLIPART\ PUB60COR\ SO00168_.WMF

Останні два файли перетворити у формат JPG за допомогою будь-якого графічного редактора.

2) Створити за допомогою редактора web- сторінок у цій папці три аркуші стилів text.css, block.css, img.css.

Тексти файлів до першого завдання

Файл text.css

#zagolov1 { font-family:"Times New Roman", Times, serif; font-size:24px; font-style:italic; font-weight:700; text-align:center; color:#FF0033; }

#obikn { font-family:"Courier New", Courier, mono; font-size:16px; font-style:normal; font-weight:500; text-align:justify; text-indent:25px; line-height:1.3; letter-spacing:3px; word-spacing:6px; color:#0033FF}

#base { font-family:Georgia, "Times New Roman", Times; font-size:16px; font-style:oblique; font-weight:500; text-align:justify; text-indent:15px; line-height:1.2; letter-spacing:1px; word-spacing:3px; color:#000066;}

#title {font:Geneva, Arial, Helvetica; font-size:40px; font-style:oblique; font-weight:900; letter-spacing:4px; word-spacing:7px;color:#FF3300}    

Файл block.css

.first { margin-left:10px;}

.second { margin-left:14px; margin-top:-44px;}

.osnov { margin-left:10px; position:relative; left:5px; top:10px; width:80%; background-image:url(J0143753.GIF); background-repeat:repeat-x; background-color:#FFFFCC; border-color:#0033FF; border-style:ridge; border-width:8px}

.base { margin-left:15px; position:relative; left:5px; top:15px; background-image:url(J0143749.GIF); width:70%; border-color:#0099FF; border-style:outset; border-width:5px}

body { background-image:url(WB00780L.GIF); font-size:16px; font-style:normal; font-weight:200; color:#000099;}

Файл img.css

#pict1 { width:20%; background-color:#3399FF; border-color:#CC00CC;  border-width:10; border-style:ridge; text-align:center;}

 

Завдання 2.

Створіть у цій папці БЛОКНОТ два html файли з іменами index.htm і present.htm.

 

Тексти файлів до завдання 2

Файл index.htm

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<link href="text.css" type="text/css" rel="stylesheet">

<link href="img.css" type="text/css" rel="stylesheet">

<link href="block.css" type="text/css" rel="stylesheet">

</head>

<body>

<div align="center" class="first" id= "title"style=" color:#FF99CC"> Валентинов день

</div>

<div align="center" class="second" id="title" style="color:#CC0000" >Валентинов день

</div>

<div id="zagolov1"> ця сторінка присвячується всім

  <br>

  <span id="title" style="color:#0066FF; font-family:'Times New Roman', Times, serif; text-decoration:blink">хто любить і любимо

  </span>

</div>

<div id="obikn" class="osnov" style="width:545pt; ">

  <p id="zagolov1" align="center">Історія дня Святого Валентина

  </p>

Створення першої валентинки приписується Чарльзу, Герцогові Орлеанскому (1415 рік), що сидів у цей час у в'язниці, в одиночній камері, і що вирішив боротися з нудьгою шляхом писання любовних послань власній дружині. Однак, найбільшого розквіту валентинки досягли до вісімнадцятого століття. </div>

<img src="SO00168_.jpg" id="pict1" style="width:17%; position:absolute; left:750px; top:8px ">

<img src="SO00168_.jpg" id="pict1" style="width:17%; position:absolute; left:750px; top:550px ">

<img src="SO01236_.jpg" id="pict1" style="width:17%; height:170pt; position:absolute; left:770px; top:240px ">

<a href="present.htm"><img src="J0341738.JPG" id="pict1" style="width:17%; position:absolute; left:50px; top:8px "></a>

<div id="base" class="base" style=" margin-left:60px ">

Час життя й діяльності Валентина збіглися з роком правління римського імператора Клавдія ΙΙ. Для збереження військового духу імператор видав указ, який забороняв легіонерам одружуватись. Не страшачись імператорського гніву, молодий християнський священик Валентин продовжував таємно вінчати закоханих легіонерів. </div>

</body>

</html>

Файл present.htm

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<link href="block.css" type="text/css" rel="stylesheet">

<link href="img.css" type="text/css" rel="stylesheet">

<link href="text.css" type="text/css" rel="stylesheet">

</head>

<body >

<div align =" center " class = " first " id = " title " style = " color:#003399 " > Зі святом мої дорогі

</div>

<div align="center" class="second" id="title">Зі святом мої дорогі

</div>

<div class="osnov" id="base" style="width:38%; text-align:center ">

Мечтал я выразить не раз

<br>

Всё что значишь для меня ты,

<br>

Искал неповторимых фраз,

<br>

Искал слова, что так богаты.

</div>

<a href="index.htm"><img src="J0382966.JPG" id="pict1" title="Валентинка" style = " position:absolute; left: 65%;top: 52%">

</a>

<a href="index.htm"><img src="J0175428.JPG" id="pict1" title="Валентинка" style = " position:absolute; left: 15%;top: 52%">

</a>

<div class="osnov" id="base" style=" position:absolute; left:57%; top: 12%; width:38%; text-align:center ">

 Любовь, как роза, роза красная,

<br>

Цветет в моем саду.

</div>

<div class="osnov" id="base" style="width:38%; pos

ition:absolute; left:29%; top:71%; text-align:center ">

Будь счастлива, моя любовь,

<br>

Прощай и не грусти.

<br>

Вернусь к тебе, хоть целый свет

<br>

Пришлось бы мне пройти!

<br>

  <span style="color:#CC0000; text-align:right; font-style:italic " > Роберт Бернс "ЛЮБОВЬ"</span> <br> </div>

<a href="index.htm"><img src="J0384888.JPG" id="pict1" title="Валентинка" style="position:absolute; left:40%;top:34% "></a>

<div id="zagolov1" style=" text-decoration:blink; position:absolute; left:10%; top:80%; width:100pt; color:#FF0000">Любов це таке почуття...

</div>

<div id="zagolov1" style=" text-decoration:blink; position:absolute; left:75%; top:80%; width:100pt; color:#FF0000">Любов це таке почуття...</div>

</body>

</html>

 

Завдання 3.

1) Перегляньте документи index.htm і present.htm.

2) Створіть ще один файл стилів MY_STYLE.css. Додайте в нього свій стиль блоку, свій стиль тексту.

3) Створіть ще один файл стилів MY_FILE.html. Підключіть до нього 4 стилі, внесіть блоки із графікою, текстом, використовуючи різні стилі, розташуйте на сторінці, аналогічно файлу present.htm.

Контрольні питання: