Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Обробка змісту за межою видимої області елемента (властивість 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. Контрольні питання:
|
||||||
Последнее изменение этой страницы: 2020-12-09; просмотров: 104; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.131.238 (0.014 с.) |