Отчёты к лабораторным работам / Лабораторная работа 9 / LAB9 Логинов А. А
..docxНациональный исследовательский университет
Московский Энергетический Институт
Лабораторная работа №9.
Макетирование web-страниц: Верстка страниц с применением слоев.
Выполнил: Логинов Андрей
группа А-13-08
Преподаватель: Куриленко Иван Евгеньевич
Москва, 2012.
Цель работы:
Получить навыки верстки каркасов сайтов на основе слоев.
Подготовка к работе:
-
Ознакомиться с технологией использования слоев для разметки содержимого сайта.
-
Выделить общие элементы разметки в имеющихся страницах.
Порядок выполнения работы:
-
Сделать каркас сайта с применением слоев на основе макета из списка ниже.
-
Организовать меню сайта (на основе ссылок).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Лаб. 9v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="styles_lab9.css">
<script src="scripts_lab9.js"></script>
</head>
<body>
<div style="position: absolute; left: 15%; right: 15%">
<div class="header"><a href="lab9.htm"><img src="images/audi_logo.gif" alt="audi logo"></a></div>
<div class="menu1">
<p>Модельный ряд</p><br>
<ol style="list-style: none">
<li onmouseover="ChangeVis6(); return false" onmouseout="ChangeVis6(); return false">A6</li>
<li onmouseover="ChangeVis7(); return false" onmouseout="ChangeVis7(); return false">A7</li>
<li onmouseover="ChangeVis8(); return false" onmouseout="ChangeVis8(); return false">A8</li>
<li onmouseover="ChangeVisq7(); return false" onmouseout="ChangeVisq7(); return false">Q7</li>
<li onmouseover="ChangeVisr8(); return false" onmouseout="ChangeVisr8_hide(); return false">R8
<ol style="list-style: none">
<li onmouseover="ChangeVisr8(); ChangeVisr8sp(); return false" onmouseout="ChangeVisr8sp(); return false">R8 Spyder</li>
<li onmouseover="ChangeVisr8(); ChangeVisr8gt(); return false" onmouseout="ChangeVisr8gt(); return false">R8 GT</li>
<li onmouseover="ChangeVisr8(); ChangeVisr8gtsp(); return false" onmouseout="ChangeVisr8gtsp(); return false">R8 GT Spyder</li>
</ol>
</li>
</ol>
</div>
<div class="text">
<img id="a6" src="images/a6.jpg" alt="a6" style="display: none;">
<img id="a7" src="images/a7.jpg" alt="a7" style="display: none;">
<img id="a8" src="images/a8.jpg" alt="a8" style="display: none;">
<img id="q7" src="images/q7.jpg" alt="q7" style="display: none;">
<img id="r8" src="images/r8.jpg" alt="r8" style="display: none;">
<img id="r8sp" src="images/r8sp.jpg" alt="r8sp" style="display: none;">
<img id="r8gt" src="images/r8gt.jpg" alt="r8gt" style="display: none;">
<img id="r8gtsp" src="images/r8gtsp.jpg" alt="r8gtsp" style="display: none;">
</div>
<div class="menu2">
<ol style="list-style: none; padding-left: 7px">
<li><a href="about.htm">О компании</a></li>
<li><a href="contacts.htm">Контакты</a></li>
</ol>
</div>
<div class="links">
<a href="https://www.facebook.com/Audiru" onclick="open(this.href,'',''); return false"><img src="images/facebook.ico" alt="facebook">Facebook</a><br>
<a href="http://www.youtube.com/AudiRussia" onclick="open(this.href,'',''); return false"><img src="images/youtube.ico" alt="youtube">Youtube</a>
</div>
</div>
</body>
</html>
Стили:
* {
margin: 0;
}
body {
background: #B2B7BD;
font-family: Arial
}
.header {
border: none 1px black;
height: 70px;
text-align: center
}
.menu1 {
float: left;
border: solid 1px grey;
width: 200px;
min-height: 400px;
padding-left: 7px;
color: white;
font-weight: bold;
font-size: 18px;
line-height: 40px
}
.text {
border-style: none;
border-width: 1px;
border-color: black;
position: absolute;
top: 72px;
left: 202px;
right: 202px;
min-height: 400px;
float: left;
text-align: center;
overflow: auto;
padding-left: 80px;
}
.menu2 {
float: right;
position: absolute;
top: 72px;
right: 0;
border: solid 1px grey;
width: 200px;
min-height: 400px;
color: white;
font-weight: bold;
font-size: 18px;
line-height: 40px
}
.links {
border: solid 1px grey;
clear: both;
height: 50px;
padding-left: 5px;
padding-top: 5px
}
a {
text-decoration: none;
color: white
}
li ol {
position: absolute;
display: none;
margin-left: 0px;
margin-top: -2.15em
}
li:hover ol {
display: block
}
Пример скрипта:
function ChangeVis6() {
a6 = document.getElementById("a6");
if (a6.style.display=="none") {
a6.style.display = "block";
}
else {
a6.style.display = "none";
}
}