Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Міністерство освіти і науки України
Львівський національний університет імені Івана Франка
Звіт
«Таблична та блочна верстка сайту»
Виконав студент
групи Феі - 32
Зарванський Роман
Викладач:
Павлишенко Б.М.
Львів — 2014
Мета: Створити сайт у якому продемонстурвати основні можливості HTML, CSS.
Теоретичні відомості
Теги таблиць:
<table> відкриває тег таблиці
<tr> тег - початок рядка
<th> - table header (заголовок таблиці) текст усередині цих тегів буде виділений напівжирним шрифтом і відцентрирован</ th> закриваючий тег осередку
<td> відкриває тег комірки
</ td> закриваючий тег комірки
</ tr> тег - кінець рядка
</ table> закриваючий тег таблиці
Блочна верстка сайту, що називається також версткою div'ами , останнім часом застосовується найбільш часто. Верстка div представляє собою різновид html-верстки сайтів і використовує таку синтаксичну конструкцію:
Тег <div> - це так званий контейнер (блок), який може містити форматований текст, зображення та ін Важливою особливістю блоків є їх здатність накладатися один на одного при верстці. Ця особливість надає блокам набагато більше можливостей по верстці сайту, ніж, приміром, таблиці.
Верстка div активно використовує CSS для гнучкого й зручного форматування елементів веб-сторінок. За допомогою CSS можна з точністю до пікселя задати розташування блоків на сторінці, необхідні відступи, колір, розмір шрифтів і багато іншого.
Хід роботи:
HTML (блочна верстка):
<html >
<head>
<meta charset=utf-8" />
<title>
Головна
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="../files/237/files/237/jquery.js"></script>
<script type="text/javascript" src="../files/237/files/237/script.js"></script>
</head>
<body style="background-color:#4EEE94;">
<center>
<input type="button" value="Сайту нема" onclick="hideDiv();">
<input type="button" value="Сайт є" onclick="showDiv();">
<input type="button" value="Є / Нема" onclick="toggleDiv();"></center>
<img src="../files/237/files/237/tigrenok.jpg" name="tigr" width="100px" onmousemove="bigPict()" onmouseout="smallPict()">
<script language="JavaScript">
function m_line() {
if(i++<line.length) {
document.cit.forum.value=line.substring(0,i);
}
else{
document.cit.forum.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
</script>
<div id="ex1">
<center>
<h1>Привіт світ</h1>
</center>
<br>
<table width="100%" border="0" style="background-color:#ffffff;">
<tr>
<th height="47" colspan=3 align="center" bgcolor="black">
<table width="50%" border="1" bordercolor="#ffffff" bgcolor="#E0FFFF">
<tr>
<td align="center">
<b><a href="index.html"><font color="black">Home</font></a></b>
</td>
<td align="center">
<b><a href="info.html"><font color="black">Info</font></a></b>
</td>
<td align="center">
<b><a href="login.html"><font color="black">Login</font></a></b>
</td>
</tr>
</table>
</th>
</tr>
<TABLE BORDER="0" width="100%" bgcolor="#E0FFFF">
<TR>
<TD ROWSPAN=10 border="1" width="100%">
</table>
<center>
<input type="button" value="Ліва колонка" onclick="qweDiv();">
<input type="button" value="Права колонка" onclick="asdDiv();">
<input type="button" value="Поміняти колонки" onclick="zxcDiv();"></center>
<div class="block2">
<div id="ex2">
<table border="1">
<tr>
<td >
<center><h3>Категорії:</h3><center>
<center><h4>
<a href="categ/film/index.html">Фільми</a><br>
<a href="categ/sport/index.html">Спорт</a><br>
<a href="categ/moto/index.html">Мото</a><br>
<a href="categ/fu/index.html">Політика</a><br>
<a href="categ/cat/index.html">Коти</a>
</h4></center>
</td>
</tr>
<tr>
<td bgcolor="#E0FFFF"><a href="https://vk.com/its_mi?z=photo154237025_290097205%2Falbum154237025_0%2Frev"><img src="../files/237/files/237/roman.jpg" alt="Roman Zarva" width="100%" /></a> Привіт всім мене звати Зарванський Роман і це моє перше домашнє завдання з предмету Web-технології.</td>
</tr>
</table></div></div>
<div class="block1"><div id="ex3"><table>
</TD>
<TD >
<b>Категорія:</b> <i><a href="categ/film/index.html">Фільми</a> </i><b> Додано:</b><i> 31 березня 2014року</i><br><hr />
<img src="../files/237/files/237/http://fs146.www.ex.ua/show/24838125/24838125.jpg?800" align="left" width="30%">
300 Спартанців
Virass, 16:55, 6 травня 2012, 17:59, 6 травня 2012
Жанр: бойовик, фентезі
Країна: США
Кіностудія / кінокомпанія: Warner Bros. Pictures
Режисер: Zack Snyder / Зак Снайдер
Актори: Джерард Батлер, Лєна Хіді, Девід Венем, Вінсент Реган, Домінік Вест та інші
Сюжет:
Епічна стрічка про <a href="categ/film/index.html">Читати далі>></a>
</TD>
</TR>
<TR>
<TD >
<hr /><b>Категорія:</b> <i><a href="categ/sport/index.html">Спорт</a> </i><b> Додано:</b><i> 31 березня 2014року</i><br><hr />
<img src="../files/237/files/237/http://www.fckarpaty.lviv.ua/ua/news/12081/attachments/news/12081/12081.jpg" align="left">
Сьогодні, в останній день першого місяця весни, 60-й день народження святкує колишній гравець «Карпат», один з найнадійніших оборонців в історії клубу.
Віктор Никитюк народився у Житомирі, де й почав займатися футболом, а тамтешній «Автомобіліст» став його першою командою в дорослому футболі. Талановитого оборонця взяли на олівець селекціонери київського «Динамо» і з часом він опинився в дублі флагмана українського футболу та одного з грандів радянського. Однак пробитися в основний склад киян Віктору не вдалося – для цього лише таланту та наполегливості було замало, необхідно було, щоб ще й зорі на небі зійшлися так, як треба. У футбольній кар’єрі Никитюка цього, на жаль, не трапилося і він став гравцем СК «Луцьк», в якому заодно пройшов і строкову службу в армії.
<a href="categ/sport/index.html">Читати далі>></a>
</TD>
</TR>
<TR>
<TD >
<hr /><b>Категорія:</b> <i><a href="categ/moto/index.html">Мото</a> </i><b> Додано:</b><i> 31 березня 2014року о 12:43</i><br><hr />
<img src="../files/237/files/237/https://pp.vk.me/c413830/v413830113/d76e/Y5jRhZfTEks.jpg" align="left"> Рубрика про скутери продовжується.Сьогодні я розкажу про Suzuki Verde.
І так,Suzuki Verde,класу " скутер ",випускався з <a href="categ/moto/index.html">Читати далі>></a>
</TD>
</TR>
<TR>
<TD >
<hr /><b>Категорія:</b> <i><a href="categ/fu/index.html">Політика</a> </i><b> Додано:</b><i> 31 березня 2014року о 13:00</i><br><hr />
<center><h1><font color="red">Жодної політики на цьму сайті</h1>
<img src="../files/237/files/237/fu.jpg" width="50%" > </center>
</TD>
</TR>
</TABLE></div></div>
</table>
</div>
</body>
</html>
CSS:
.block1 {
width: 750px;
padding: 5px;
background: #E0FFFF;
padding-right: 0px;
border: solid 1px black;
float: right;
}
.block2 {
width: 230px;
background: #E0FFFF;
padding-right: 0px;
border: solid 1px black;
float: left;
}
#nav li {
float:left ;
position: relative;
list-style: none;
margin: 0 5px;
padding: 0 0 4px;
background-color: #E0FF00;
border-bottom: 1 solid black;
}
#nav a {
font-weight: bold;
color: black;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
}
#nav a:hover {
background: blue;
color: black;
}
#nav li:hover #level2 {
display: block;
}
#nav ul li:hover #level3 {
display: block;
}
#nav ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
#nav ul ul {
left: 100px;
top: -3px;
}
#ex1{
}
#ex2{
}
#ex3{
}
Висновок: Я реалізував сайт у якому використав блочну та табличну верстку, а також таблиці CSS. З допомогою цієї роботи, я поглибив свої знання у цих напрямах.