Transcript Document
Технология сетевого дизайна и
ее программное обеспечение
Лекция 4
Лекция 1
Позиционирование элементов.
Свойство CSS position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
Позиционирование элементов.
Свойство CSS position
.layer1 {
position: relative; /* Относительное
позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное
позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
<body>
<div class="layer1">
<div class="layer2">
<img src="images/girl.jpg" alt="Девочка" />
</div>
</div>
</body>
</html>
http://htmlbook.ru/css/position
HTML5 — это не продолжатель языка
разметки гипертекста, а новая
открытая платформа,
предназначенная для создания вебприложений использующих аудио,
видео, графику, анимацию и многое
другое.
http://htmlbook.ru/html5
Различия в разметке веб-страниц
Декларация о типе документа для браузера
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
HTML5
<!doctype html>
Различия в разметке веб-страниц
Указание языка страницы
HTML5
<html lang="ru">
</html>
Различия в разметке веб-страниц
Указание кодировки документа
HTML4
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML5
<meta charset="utf-8">
Различия в разметке веб-страниц
Подключения JavaScriptа
HTML4
<script src="js/scripts.js"
type="text/javascript"></script>
HTML5
<script src="js/scripts.js"></script>
Разметка веб-страницы HTML
Разметка веб-страницы HTML5
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Разметка веб-страницы HTML5
Новые элементы разметки HTML5
<header> представляют собой заголовки разделов. Они
могут состоять из нескольких частей – например, было
бы оправданно разделять блок заголовка на
подзаголовки, историю версий или указание авторства.
<footer> определяет нижнюю часть раздела, к которому
он относится. Обычно он содержит информацию о
разделе – например, имя автора, ссылки на похожие
документы, копирайт и т.п.
<nav> содержит список ссылок для навигации. Подходит,
например, для навигации по сайту или для содержания.
Новые элементы разметки HTML5
<aside> подходит для размещения содержимого
каким-либо образом родственного основному
контенту. В обычном случае будет полезен для
разметки боковой колонки.
<section> представляет общий раздел документа или
приложения.
<article> отмечает независимый раздел документа,
страницы или сайта. Применим для такого
содержимого как новости, записи блога, сообщения в
форуме или комментарии пользователей.
Страница в Dreamveawer HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
</body>
</html>
Страница в Dreamveawer HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
</body>
</html>
Пример странице с разметкой HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>Header</h1>
<h2>Subtitle</h2>
<h4>HTML5 Rocks!</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur
adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
pellentesque, turpis lorem dictum nunc.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur
adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur
adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
rhoncus</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;}
CSS файл
фрагмент