При виконанні лабораторної роботи, для пошуку необхідних тегів та параметрів рекомендовано користуватись сайтом http://htmlbook.ru/.
- В Вашій робочій папці створіть папку Прошарки. В цій папці створіть документи prizvyshe_menu.html та style.css. Додайте до файлу prizvyshe_menu.html наступне:
<![CDATA[
<html>
<head>
<title> Створення прошарків в CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<a href="#">Понеділок</a>
<a href="#">Вівторок</a>
<a href="#">Середа</a>
<a href="#">Четвер</a>
<a href="#">П’ятниця</a>
</div>
</body>
</html>
]]>
Збережіть файл та перевірте як документ відображається в браузері.
- До файлу style.css додайте наступне:
<![CDATA[
#menu{
width:100px;
height:100px;
border:3px inset darkred;
margin:5px;
padding:5px;
background:oldlace;
position:absolute;
left:10px;
top:10px; }
#menu a{
color:darkred;
font-family: fantasy;
text-decoration:none;
display:block; }
#menu a:hover{
color:oldlace;
background-color:darkred;
font-family: fantasy;
display:block; }
]]>
Збережіть файл та перевірте як документ відображається в браузері.
- Відредагуйте файл style.css на Ваш смак, але таким чином, щоб оформлення Вашого меню було унікальним.
- Тепер створимо підменю, в якому кожному дню тижня відповідає Ваш розклад. Для цього в файл prizvyshe_menu.html додайте блоки, аналогічні прикладу.
<![CDATA[
<div id="pon">
<a href="#">Інформатика</a>
<a href="#">Математика</a>
<a href="#">Фізична культура</a>
</div>
<div id="viv">
<a href="#">Українська мова</a>
<a href="#">Історія України</a>
<a href="#">Алгебра</a>
</div>
]]>
- Так як оформлення нових блоків з естетичної точки зору має бути однаковим, то відрізнятись вони будуть тільки номером прошарку. Внесіть зміни в файл style.css аналогічно наведеному прикладу, але під Ваше унікальне оформлення:
<![CDATA[
#pon, #viv{
background:oldlace;
border:3px inset darkred;
position:absolute;
left:105px;
top:17px;
width:150px;
height:70px; }
#pon{
z-index:1; }
#viv{
z-index:2; }
#pon a, #viv a {
display:block;
color:darkred;
font-family:fantasy;
text-decoration:none; }
#pon a:hover, #viv a:hover{
color:oldlace;
background-color:darkred;
font-family: fantasy;
display:block; }
]]>
Перевірте як документ відображається в браузері. Поясніть чому відображається тільки одне підменю і чому саме це підменю.
- Використовуючи властивість visibility вимкніть відображення підменю.
- Для керування підменю необхідно скористуватися мовою програмування JavaScript. Створіть в папці prizvyshe_menu.html файл java.js та заповніть його аналогічно з прикладом:
<![CDATA[
function pon(){
document.getElementById("pon").style.visibility='visible';
document.getElementById("viv").style.visibility='hidden'; }
function viv(){
document.getElementById("pon").style.visibility='hidden';
document.getElementById("viv").style.visibility='visible'; }
]]>
Це javascript-функції, які роблять наші підменю видимими.
- В шапку файлу prizvyshe_menu.html добавте рядок підключення до Вашого файлу скриптів.
<![CDATA[
<script type="text/javascript" src="java.js"></script>
]]>
Далі необхідно в тіло html-документу додати події, при яких будуть спрацьовувати javascript-функції. В нашому випадку доречно використати подію «наведення курсору мишки» onMouseOver. В документі prizvyshe_menu.html відредагуйте наше меню аналогічно до прикладу:
<![CDATA[
<div id="menu">
<a href="#" onMouseOver="pon();">Понеділок</a>
<a href="#" onMouseOver="viv();">Вівторок</a>
</div>
]]>
Перевірте які зміни відбулися при відображенні меню у браузері. Які проблеми виникають при роботі меню? Чому виникають ці проблеми?
- Розглянемо один із способів вирішення проблем при роботі меню. Нам необхідно щоб підменю зникало при відведенні від нього мишки. В файл prizvyshe_menu.html навколо нашого меню (з урахуванням розмірів підменю) додамо блоки, які робитимуть наші підменю невидимими. Для цього також використаємо подію onMouseOver. В тіло документу prizvyshe_menu.html додаємо чотири блоки аналогічно до прикладу:
<![CDATA[
<div id="right" onmouseover="hid();"></div>
]]>
Далі в файл style.css додаємо описання стилю для кожного зі створених блоків. В прикладі описано стиль для блоку справа від меню.
<![CDATA[
#right{
width:25px;
height:100px;
position:absolute;
left:250px; }
]]>
Залишилося в файлі java.js описати функцію hid() яка буде робити невидимими наші підменю. Опишіть функцію та збережіть всі три файли. Тепер відкрийте наше меню в браузері та перевірте його роботу.
- Після того як меню почало працювати зробіть так, щоб при натисканні на пункти підменю відкривалась інформація з ПІБ викладача та номером аудиторії.