Разработка сайтов это та сфера, в которой необходимо постоянно следить за новинками. Необходимо всегда быть на гребне волны. Смена технологий происходит очень быстро и то, что популярно сейчас будет устаревшим через несколько лет.
Одна из таких новейших технологий — это HTML5 — новая версия базового языка для создания сайтов.
Сегодня мы создадим HTML5 шаблон для сайта используя новые возможности CSS3 и jQuery. Также при создании мы используем плагин scrollTo.
Также можно скачать XHTML версию данного шаблона!
Шаг 1 — Дизайн
Каждый процесс создания сайта начинается с идеи. В этой стадии дизайнеры обычно используют Photoshop для проработки всех деталей.
После этого весь дизайн кодируются с помощью HTML и CSS.
Шаг 2 — HTML
Важно заметить, что работа над HTML5 все еще ведется. И она по разным оценкам продлится до 2022 года (абсолютно серьезно). Однако, некоторые части уже готовы и ими можно пользоваться сегодня.
В этом уроке мы используем несколько новых тегов:
header — в него обернем нашу шапку
footer — для футера
section — группирует контент в секции (к примеру, главная секция, сайдбар…)
article — отделяет статьи от всей страницы
nav — содержит навигацию
figure — обычно содержит картинку-иллюстрацию к статье
Эти теги используются также, как и обычные div. Единственная разница заключается в том, что данные теги семантически разделяют страницу. Другими словами, Вы можете представить Вашу страницу таким образом, что станет сразу понятно про что она. В результате поисковики будут давать Вам целевых посетителей в большем количестве.
Однако, есть некоторые ограничения использования HTML5 сегодня. Одно из них — эта вся линейка браузеров Internet Explorer — они не поддерживают эти теги (но это можно решить добавив небольшой JavaScript). Поэтому пока еще рановато полностью переходить на HTML5.
Поэтому в начале урока Вам также доступна ссылка на скачивание такого же шаблона, но в XHTML версии (работает во всех браузерах сейчас).
template.html — шапка
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
Вы можете заметить новый <DOCTYPE> на первой строке, который сообщает браузеру, что страница создана по HTML5 стандарту.
После указания таблицы стилей и названия документа мы подключаем специальный JavaScript, который поможет правильно отображать HTML5 в любом IE. Это означает, что пользователь IE с отключенным JS ничего красивого не увидит. Именно поэтому стоит задуматься об использовании XHTML версии данного шаблона.
template.html — тело документа
<body>
<section id="page"> <!-- Определяем секцию #page-->
<header> <!-- Задаем шапку -->
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
<nav class="clear"> <!-- Навигация -->
<ul>
<li><a href="#article1">Photoshoot</a></li>
<li><a href="#article2">Sweet Tabs</a></li>
<li><a href="#article3">Navigation Menu</a></li>
</ul>
</nav>
</header>
Вот здесь мы используем новый тег section для разделения страницы на семантические части. Самая внешняя секция #page имеет ширину в таблице стилей 960 пикселей. После этого идут теги для шапки и навигации.
Обратите внимание на атрибуты href ссылок — часть после # отвечает за ID статьи, к которой мы хотим перейти.
template.html — статья
<!-- Article 1 start -->
<div class="line"></div> <!-- разделяющая полоса -->
<article id="article1"> <!-- Новый тег для статей -->
<h2>Photoshoot Effect</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure> <!-- тег для отображения картинки для статьи -->
<a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
<img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
</figure>
<p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>
</div>
</article>
<!-- Article 1 end -->
Разметка вверху будет для каждой статьи. Вначале идет разделяющая полоса (по типу hr сейчас). Далее идет новый тег article с уникальным ID, который используется для прокрутки страницы.
Внутри статьи также присутствует новый тег для показа картинок к статье.
template.html — футер
<footer> <!-- Маркируем футер -->
<div class="line"></div>
<p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
<a href="#" class="up">Go UP</a>
<a href="http://tutorialzine.com/" class="by">Template by Tutorialzine</a>
</footer>
</section> <!-- Закрываем секцию #page -->
<!-- JavaScript файлы -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
В конце у нас идет тег футера.
Шаг 3 — CSS
Поскольку мы используем HTML5, нам необходимо предпринять дополнительны меры для стилизации. Теги новой версии HTML не содержат стилей по умолчанию пока еще. Но это легко поправить несколькими дополнительными строками CSS и страница будет выглядет так, как это необходимо.
styles.css — часть 1
header,footer,
article,section,
hgroup,nav,
figure{
display:block;
}
article .line{
/* Разделяющая полоса: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Нам необходимо установить значение правила display на block для новых тегов. После этого можем обращаться с ними также, как и с обычными тегами.
Мы придаем стиль горизонтальной линии, статьям, и кнопкам навигации. В самом низу мы прописываем свойство border-radius для четырех разных типов элементов сразу для экономии.
styles.css — часть 2
/* Стили для статей: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;
}
figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
figure img{
margin-left:-60px;
}
/* Стили для футера: */
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration:none;
background-color:#142830;
}
footer a.by{
float:left;
}
footer a.up{
float:right;
}
Во второй части кода мы придаем более детальные стили нашим объектам.
Давайте перейдем к последнему шагу.
Шаг 4 — jQuery
Для модернизации данного шаблона мы создадим плавный эффект скролла после нажатия на ссылку с использованием jQuery плагина scrollTo. Для его работы необходимо пройтись по всем ссылкам и присвоить событие onclick, которое вызовет функцию $.srollTo(), описанную в скрипте плагина.
$(document).ready(function(){
/* Выполнение скрипта после загрузки страницы */
$('nav a,footer a.up').click(function(e){
// Если нажата ссылка - плавный скролл к нужному объекту:
$.scrollTo( this.hash || 0, 1500);
e.preventDefault();
});
});
Заключение
В этом уроке мы ознакомились с возможностями новых семантических свойств HTML5 и их помощью создали одностраничный красивый шаблон. Можете использовать его в собственных целях.
