Стоит помнить о том, что изменения не берутся просто так. Сейчас молодые разработчики вовсю пользуются тем, чем нам теперь придется пользоваться каждый день на протяжении ближайших лет. Одна из таких технологий – HTML5 (новая версия фундаментального языка веб-технологий).
Сегодня мы будем разрабатывать веб-шаблон на HTML5, используя некоторые современные функции CSS3 и jQuery, а также плагин scrollTo. Так как HTML5 до сих пор находится в стадии разработки, вы можете также скачать XHTML-версию шаблона тут.
Этап 1 – Дизайн
Каждый дизайн начинается с идеи, которую затем нужно воплотить в реальность. На данном этапе дизайнеры обычно пользуются программой Photoshop. Она позволяет поработать над деталями и увидеть, как все они будут выглядеть вместе.
После этого, дизайн разрабатывается вручную при помощи языков веб-программирования HTML и CSS. Эти технологии позволяют нам установить фон, цвета и шрифты, а также детально проработать содержимое веб-страниц.
Этап 2 – HTML
Сейчас самый лучший момент, чтобы отметить, что HTML5 до сих пор находится в стадии разработки. Возможно, этот язык будут дорабатывать вплоть до 2022 года (и мы абсолютно серьёзно об этом говорим). Тем не менее, некоторые стандартные части уже завершены, и их уже можно использовать.
В нашей сегодняшней статье мы будем использовать некоторые тэги, представленные в новой версии HTML5:
* 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>
В самой первой строке вы можете видеть абсолютно новый указатель типа документа, который говорит браузеру посетителя о том, что веб-сайт основан на HTML5. Его даже гораздо проще запомнить, чем предыдущие типы.
После указания кодировки и заголовка документа, мы переходим к включению специального JS-файла, который поможет браузеру IE (любой версии) корректно генерировать тэги HTML5. Опять же, это означает, что если посетитель использует IE с отключенной поддержкой javascript, то все элементы будут перепутаны. По этой причине, в зависимости от аудитории, вы должны рассмотреть вариант с XHTML-кодом, который будет работать в любом браузере, и доступен абсолютно бесплатно для всех читателей.
Template.html – Тело документа
<body>
<section id="page"> <!-- Defining the #page section with the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<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>
Здесь мы будем использовать новые тэги секций страницы, которые будут разделять вашу страницу на отдельные семантические отделения. Самая крайняя секция – это секция #page, ширина которой выставлена на 960px в каскадных таблицах стилей (стандарт ширины веб-сайтов для сейчас уже устаревших дисплеев). После этой секции идёт секция header, а затем navigation.
Учтите, что href-атрибуты ссылок на странице – часть после символа # отвечает за ID статьи, к которой нам надо переместиться.
Template.html – статья
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Photoshoot Effect</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
<img src="http://cdn.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», которому в HTML5 добавили элемент логического разделения, но, к сожалению, мы не сможем оформить этот тэг для всех браузеров одновременно и, по этой причине, мы воспользуемся тэгом «div»). После этого у нас идёт новый тэг article с уникальным ID-номером, который используется для навигации по странице.
Внутри него у нас есть заголовок статьи, два абзаца и новый тэг figure, который обозначает использование изображений в статье.
Template.html – подвал
<footer> <!-- Marking the footer section -->
<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> <!-- Closing the #page section -->
<!-- javascript Includes -->
<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>
И, наконец, у нас идёт тэг footer (подвал), который выполняет именно ту функцию, которую вы от него и ожидаете. В самом низу страницы мы размещаем оставшиеся javascript-внедрения, которые добавляют библиотеку jQuery, а также плагин scrollTo. Всё это мы будем использовать в последующих этапах.
Этап 3 – CSS-код
Так как мы используем HTML5, нам нужно уделить особое внимание оформлению. Тэги, которые представляет эта новая версия HTML, пока ещё не оснащены стандартными параметрами оформления. Всё это с лёгкостью исправляется посредством пары строк CSS-код, и наша страница будет выглядеть так, как полагается:
Styles.css – часть 1
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
article .line{
/* The dividing line inside of the article is darker: */
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;
}
Изначально нам надо выставить значение отображения новых тэгов в виде блочных элементов, как вы можете видеть по первым строкам кода. После этого мы можем оформить их так, как мы обычно оформляем обычные тэги «div».
Мы оформляем горизонтальные линии, статьи, кнопки навигационного меню, причем отображаем его в виде неупорядоченного списка внутри тэга nav. В нижней части мы применяем параметр border-radius для 4-х разных элементов одновременно, что позволяет нам уменьшить размер кода.
Styles.css – часть 2
/* Article styles: */
#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 styling: */
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;
}
Во второй части кода мы применяем более детализированное оформление элементов. Ширина для секции страницы, параметр hover для тэга figure, а также стили для ссылок внутри подвала. Здесь также не включены пару стилей, но вы можете увидеть их в файле styles.css.
Теперь давайте перейдём к следующему этапу.
Этап 4 – jQuery
Для усовершенствования шаблона, мы создадим мягкий скользящий эффект при клике на ссылку в навигационном меню. Это реализуется посредством плагина scrollTo, который мы включили в код нашей страницы. Для того чтобы он заработал, нам просто нужно подключить его к ссылкам в навигационном меню, а также к ссылке UP в подвале. Это можно сделать, прописав функцию $.srollTo() в событие onclick.
Script.js
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('nav a,footer a.up').click(function(e){
// If a link has been clicked, scroll the page to the link's hash target:
$.scrollTo( this.hash || 0, 1500);
e.preventDefault();
});
});
На этом наш шаблон завершен!
Упаковываем!
В нашей сегодняшней статье мы рассказали вам о новых семантических свойствах, предоставленных в новом HTML5. Вы можете использовать разработанный шаблон как в личных, так и в коммерческих целях абсолютно бесплатно. Но отметим то, что ссылка на источник была бы не лишней.
Демо-версия | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.