- При виконанні лабораторної роботи, для пошуку необхідних тегів та параметрів рекомендовано користуватись сайтом http://htmlbook.ru/.
- У своїй робочій папці створіть папку «Блоки». В цій папці створіть документ prizvyshe_bloki.html наступного змісту:
<![CDATA[
<html>
<head>
<title>Блоки в CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="head1">Логотип</div>
<div id="head2">Шапка сайту</div>
<div id="menu">Меню сайту</div>
<div id="cont">Контент cайту</div>
<div id="copy">Копірайт</div>
</body>
</html>
]]>
Перевірте результат в браузері.
- В цій же папці створіть файл style.css наступного змісту:
<![CDATA[
#head1{
background:darkred;
width:115px;
height:100px;
}
#head2{
background:darkred;
width:600px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#cont{
background:oldlace;
width:525px;
height:300px;
}
#copy{
background:darkred;
width:715px;
height:30px;
}
]]>
Після виконання перевірте які зміни відбулися при відображенні prizvyshe_bloki.html у браузері.
- В файл style.css додайте наступне:
<![CDATA[
body{
margin: 0px;
}
]]>
Збрежіть файл та перевірте зміни в браузері. Дайте пояснення чому вони відбулися. Використовуючи властивості margin, position та border приведіть отриманий результат до наступного вигляду:
- В файл prizvyshe_bloki.html в контейнер <div id="cont">Контент cайту</div> додайте контейнер <div id="baner">Банер</div>. Та відредагуйте файл style.css таким чином, щоб блоки виглядали наступним чином:
- Використовуючи властивості float, clear (якщо нобхідно) та margin-left створіть «гумовий дизайн» сайту. Ваша сторінка повинна займати весь вільний простір. Фіксованим має залишитись лише блок Банер. Докладніше про гумовий дизайн можна ознайомитися за посиланням:
http://htmlbook.ru/content/rezinovyy-dizayn-dvukhkolonnyy-maket
- В Вашій робочій папці створіть три документи з іменами: golovna.html, foto.html, kontakty.html, та наповніть їх наступною інформацією: перший файл наповніть довільною текстовою інформацією, другий файл повинен містити декілька фотографій, третій файл повинен містити Ваші контактні дані. В блоці «Меню сайту» створіть посилання (не використовуючи будь-яких додаткових тегів) на створені файли: Головна, Фотогалерея, Контакти.
- В файл style.css додайте наступне:
<![CDATA[
#menu a{
color:darkred;
text-decoration:none;
}
#menu a:hover{
color:oldlace;
background:silver;
}
]]>
Перегляньте в браузері отриманий результат. Використовуючи властивість display налаштуйте відображення посилань у вигляді блоків.
- У блок «Логотип» додайте довільний вірш. Перегляньте у браузері зміни. За допомогою властивості overflow налаштуйте зображення таким чином, щоб вірш не виходив за границі блоку.