создания шаблона сайта с нуля

28

Окт
Создание шаблона сайта с нуля используя новые возможности HTML 5Опубликовал admin Рубрика Шаблоны сайтовНу вот W3C консорциум занялся разработкой новых версий HTML и CSS; с появлением HTML 5 и CSS 3 снова началась борьба за приз «лучшая разметка». По правде говоря, обе технологии просто ждут опытных разработчиков, которые применят их для создания уникальных проектов. Но мы не будем впадать в бессмысленные и бесполезные дискуссии, обсуждая, чья же разметка самая удачная. Лучше мы займемся созданием принципиально новой идеологии и видоизменим наши «разметочные» привычки, чтобы сделать всемирную сеть более удобной и простой.
Правда, HTML 5 и CSS 3 находятся еще в стадии разработки и весьма далеки от завершения, и все же я не вижу причин не начать их применять в работе прямо сейчас. В конечном счете, время убедительно доказывает, что незаконченные спецификации можно применять на практике, но также может оказаться, что некоторые возможности могут измениться в будущем. Это как раз тот случай, когда две концепции – Прогрессивное Улучшение (Progressive Enhancement) и Постепенное Сокращение Возможностей (Graceful Degradation) – вступают в взаимодействие.



В этом уроке мы немного поэкспериментируем с новыми возможностями HTML 5 и CSS 3. Ознакомившись с данной статьей, вы будете знать как:

• использовать технику Graceful Degradation и следить за корректностью отображения в устаревших браузерах
• использовать технику Progressive Enhancement, чтобы идти в ногу с самыми последними тенденциями
• использовать HTML 5 бок о бок с развивающейся технологией микроформатов (Microformats)
• а также иметь четкое представление о самых захватывающих новиках, которые уже принесли с собой HTML 5 и CSS 3

Я также полагаю, что вы знаете основы HTML и CSS, включая все теги «старой школы», базовые селекторы и свойства.

Прежде чем мы начнем…

Есть ряд вещей, которые нужно помнить, отправляясь по волнам нового языка гипертекстовой разметки. Во-первых, HTML5 предназначен не для всех. Поэтому будьте благоразумны и выбирайте, как и где его использовать. Продумайте все способы кодировки и подберите именно те приемы, которые действительно уместны и даже необходимы. И если ваш сайт верстался в соответствии со строгими стандартами XHTML, то вообще нет необходимости добавлять туда HTML5.

К тому же возможно и такое, что если вы включите новый HTML5-код в разметку сайта прямо сейчас, ваш сайт может оказаться в «западне», ведь даже если ваш браузер и воспроизводит HTML 5 это еще не значит, что он понимает его должным образом. Что отразится и на другом программном обеспечении, например, скринридерах и поисковых системах.

И наконец, вы должны помнить, что HTML 5 все еще находится в стадии разработки, и весьма далек от завершения. А учитывая огромное количество отзывов, мнений и суматохи вокруг этого события, текущий черновой вариант еще будет меняться и трудно предугадать на сколько.

Итак, если вы готовы произвести переворот, не боитесь использовать технологии, которые ждет большое будущее и легко сможете заменить и исправить ту часть кода, которая внезапно может стать нерабочей, то читайте дальше.

Несколько слов о приемах: прогрессивное улучшение и постепенное сокращение возможностей

Что же они из себя представляют?

Постепенное сокращение возможностей (Graceful Degradation) – широко используемый термин, суть которого заключается в применении сначала самых последних технологий при создании веб-сайта для наиболее продвинутого браузера; и только потом в перестройке разметки для устаревших браузеров. Подобным методом мы пользуемся изо дня в день, ведь многие создают код сначала для Firefox, а потом корректирую его под Internet Explorer. Вот вам и пример использования данного приема на практике.

Прогрессивное улучшение (Progressive Enhancement) относится к привычке верстать сайт сначала для слабых и устаревших браузеров, а уж потом улучшать до уровня последних технологий. Мы ведь и этим занимаемся ежедневно. Например, создавать страницу мы начинаем со скелета, а затем уже добавляем CSS-файлы, в которых мы размещаем все наши стили.

Оба приема, как правило, идут рука об руку, и уже давно вошли в наш обиход. Просто сами термины мало кому известны. В нашем случае, для изучения новых языков разметки нам пригодятся они оба.

1. Дизайн

Вот макет веб-страницы, который будем создавать:



Очень примерный макет потенциального сайта с превосходным названием Smashing HTML5!, практически все объекты которого могут быть созданы при помощи HTML 5. Это будут: заголовок страницы, слоган, навигационное меню, акцентированная область, список постов, дополнительный раздел с рядом внешних ссылок, блок «О нас» и в конце авторские права.

2. Разметка

Вот скелет нашего html-файла:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index" class="home">
</body>
</html>Ряд основных моментов:

• Мы начали с трех условных комментариев относительно IE. Первый подключает html5 shiv -код прямо из системы Google Code, предназначенной для всех версий IE. Второй – IE8.js , обеспечивающий совместимость с IE7 и более ранними версиями, а так же включает ie.css файл, который позволит решить проблемы со стилями для IE7 браузера и его предшественников. И третье условие предназначено для устранения дефектов, которые могут возникнуть у IE6.
• Используется атрибут id, задающий тегу <body> значение «index» и класс «home». Это просто моя выработанная годами привычка, что позволяет несколько упростить кодирование внутренних разделов, что весьма удобно при создании сложных сайтов.
• Используется упрощенная версия кодировки (charset) обеспечивающий совместимость с предыдущими версиями браузеров.
• Я использовал синтаксис XHTML версии 1.0 как основу для HTML5 документа. Это тоже одна из моих привычек, которой я доволен и намерен придерживаться так долго, на сколько это возможно. Вы, конечно же, можете применить обычный HTML синтаксис. Решать вам.

Это очень примерное и в тоже самое время довольно солидная основа для практически любых HTML5-проектов, которыми вы можете заняться в будущем. Теперь мы можем встраивать новые объекты нашей разметки.

Если бы можно было сделать нашей странице рентген, вот так бы выглядел ее скелет:



Шапка



Шапка нашего макета необыкновенно простая. Новый элемент <header>, как гласит спецификация, представляет группу вводных мер и навигационных средств. Так что тут даже и думать не надо, почему мы его использовали для разметки шапки страницы. Еще мы применим и тег <nav>.

Элемент nav предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации. Но не все группы ссылок нужно размещать в данном элементе, а только разделы, содержащие ссылки на крупные информационные блоки. На счет последнего утверждения очень много шумихи и споров. Но мы не будем в них вдаваться, так как в нашем случае речь идет о навигационной системе по страницам нашего сайта. Так что разместив пару атрибутов id и класса, закроем наш элемент и шапка готова:

<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del>
<ins>2009</ins></strong></a></h1>

<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>

<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>

</header><!-- /#banner -->Блок-акцент



Далее идет блок, акцентирующий информацию. Его мы заключим в элементы <aside> . Контейнер aside используется для вспомогательных материалов, например, для определения дополнительных колонок с второстепенным текстом (сайдбаров) или для ввода небольшого блока информации, связанного с основным контетом сайта.

Это как раз касается нашего блока, давайте вернемся к нему и обратим внимание на содержимое данного элемента. Следом за aside идет тег <article>.

У нас есть два последовательных заголовка (’Featured Article’ и ‘HTML5 in Smashing Magazine!’), поэтому нам понадобится еще один новый элемент – <hgroup>. Это отличный контейнер для заголовков различных уровней (<h#> ). Он позволяет замаскировать элемент h2 (заголовок второго уровня)от остального алгоритма страницы, что избавит веб-разработчиков от лишней головной боли в будущем.

Последний элемент блока, которого мы еще не каснулись – это логотип Smashing Magazine, расположенный в правой колонке. Для него введем еще один новй тег <figure>. Этот элемент используется для размещения изображения, обычно с подписью, это самодостаточный элемент, к которому можно свободно привязывать ссылки. Добавить описание можно при помощи тега <legend>, только вот не все браузеры хотят его принимать, так как они пытаются добавить элемент <fieldset> и даже использование CSS не помогает перекрыть данный дефект. Поэтому я предлагаю отложить <legend> до лучших времен и использовать только элемент <figure>.

А код будет выглядеть вот так:

<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>

<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement
techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html"
rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a>
website today!</p>

</article></aside><!-- /#featured -->Тело шаблона



Далее следует тело документа, в котором располагается весь основной контент. Но данный элемент включает все разделы вместе, а раздел, как известно, это некая тематическая группа информации, для которой теперь есть тег <section>.

Для размещения постов, мы воспользуемся нашим старым знакомым элементом <ol> и упорядочим список статей. Каждый контейнер <li> содержит элемент <article>, в котором тег <header>, используется для ввода заголовков поста, <footer> – для ввода дополнительных сведений о посте и <div> представит основное содержание. Да-да, именно <div>.

Причина использования элемента <div> проста: мы воспользуемся Микроформатом hAtom 0.1 , а он требует, чтобы вводимый контент был обрамлен. Так как нет ни одного тега подходящего для выполнения данной задачи (ведь перед нами не раздел, не статья целиком и не дополнительная информация о разделе, а только его основное содержание), мы используем тег <div>, так как он сам по себе не несет никакой смысловой нагрузки и прекрасно сохраняет стиль разметки.

С учетом всего выше сказанного код будет выглядеть так:

<section id="content" class="body">

<ol id="posts-list" class="hfeed">

<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST
TITLE">This be the title</a></h2>
</header>

<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!--
YYYYMMDDThhss+ZZZZ -->
10th October 2005
</abbr>

<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>

</address>
</footer><!-- /.post-info -->

<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a>
dapibus blandit nec et leo. Ut ut malesuada tellus.</p>

</div><!-- /.entry-content -->
</article></li>

<li><article class="hentry">

...
</article></li>

<li><article class="hentry">

...
</article></li>
</ol><!-- /#posts-list -->

</section><!-- /#content -->Да, я не использовал элемент <time> . Так как данный тег еще совсем новый, и к тому же не совместим с использованным микроформатом. Но если вы не намерены использовать микроформат, то вы свободно можете применить вместо него элемент <time>.

Блок дополнительной информации



Еще один раздел нашего документа – блок дополнительной информации. Вы, наверняка, уже пытаетесь определить какой элемент лучше — <aside> или <section> — для данного раздела. В конечном счете, этот раздел не может бать рассмотрен отдельно от всего содержимого страницы, так как в нем содержится список ссылок на другие блоги и на общественные сайты. Поэтому предпочтительней элемент <section>.

А вот мы нашли и другое применение для тега <div>. Для ввода стилей, а так же с целью сгруппировать ссылки, мы добавим два тега <div> : один для раздела blogroll, а второй для раздела social.

Все остальные использованные элементы и атрибуты вам до боли известны:

<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>

<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>

<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>

<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>

<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>

<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>

<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>

</ul>
</div><!-- /.blogroll -->

<div class="social">
<h2>social</h2>
<ul>

<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="https://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>

<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>

</ul>
</div><!-- /.social -->
</section><!-- /#extras -->Блок «О нас» и нижний блок вспомогательной информации



Для блока «О нас» и нижнего блока мы применим новенький тег <footer>.

Элемент footer представляет нижнюю часть раздела. Обычно он содержит информацию о разделе – например, имя автора, ссылки на похожие документы, копирайт и тому подобное.

Блок «О нас» мы заключим в тег <address> и воспользуемся Микроформатом hCard , чтобы увеличить смысловую значимость. Информацию об авторских правах мы введем при помощи стандартного тега <p>. А вот и сам код:

<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>

<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->

<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources
and advice to web developers and web designers. It was founded by Sven Lennartz
and Vitaly Friedman.</span>

</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->Подведем итоги

Итак, пора все части собрать воедино:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index" class="home">

<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del>
<ins>2009</ins></strong></a></h1>

<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>

<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>

</header><!-- /#banner -->

<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>

<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement
techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html"
rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a>
website today!</p>

</article></aside><!-- /#featured -->

<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST
TITLE">This be the title</a></h2>

</header>

<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!--
YYYYMMDDThhss+ZZZZ -->
10th October 2005
</abbr>

<address class="vcard author">

By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->

<div class="entry-content">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a>
dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>

<li><article class="hentry">

...
</article></li>

<li><article class="hentry">

...
</article></li>

</ol><!-- /#posts-list -->
</section><!-- /#content -->

<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>

<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>

<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>

<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>

<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->

<div class="social">

<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>

<li><a href="https://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>

<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->

<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>

<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->

<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources
and advice to web developers and web designers. It was founded by Sven Lennartz
and Vitaly Friedman.</span>

</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

</body>
</html>Согласитесь, что теперь ориентироваться в документе стало гораздо проще, и глаз больше не устает от огромного количества тегов <div>

3. CSS

Аналогично нашей html-разметке CSS также будет иметь самые простые основы. Пусть это будет некоторая база для дальнейших работ, которую я использую в течение длительного времени, и работает она достаточно неплохо.

Это код для нашего main.css файла:

/*
Name: Smashing HTML5
Date: July 2009
Description: Sample layout for HTML5 and CSS3 goodness.
Version: 1.0
Author: Enrique Ramírez
Autor URI: http://enrique-ramirez.com

*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");

/***** Global *****/
/* Body */
body {
background: #F5F4EF url('../images/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;

}

/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;

}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;

}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;

}

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;

}

ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;

}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}
tbody .alt th {}

/* Tfoot */
tfoot th {}
tfoot td {}Это наш первый шаг для получения полноценного шаблона. В этом коде мы можем задать стили для большинства основных элементов, предоставляю вам свободу действий. Вот некоторые основные моменты:

• Для оптимальности кодирования, часть основной информации о CSS файле размещена в верхней части в форме комментариев.
• 2 импорта в начале файла. Первым является метод перезагрузки файла Эрика Мейера. Вторым — персонализация глобальных форм файла, которую я детально рассмотрю дальше.
• Стандартная стилизация тегов по умолчанию.

Объясним некоторые свойства:

Именно по этому моменту необходимо уточнить. Во-первых есть свойство text-shadow в CSS3. Чтобы разобраться с ним, приведем пример:

text-shadow: 1px 5px 2px #333;Мы получим тень #333 для текста, которая смещается на 1px вправо и 5px вниз, и 2px размытия. Просто, не так ли? Вы можете использовать шестнадцатеричный формат и систему (цветопередачи) RGBA, а также любые CSS единицы измерения (кроме %).

У нас также есть такой момент:

* p:last-child {margin-bottom: 0;} Эта линия будет удалять нижнюю границу любого тега <p>. Полезно при использовании блоков (как мы делаем), чтобы избежать больших вертикальных пробелов.

И наконец пара селекторов:

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;} ::selection это CSS3 селектор, который позволяет нам задать стиль выбранного текста. Он позволяет использовать только CSS свойства background и color.

::- moz-selection разрабатываться для Mozilla, который не распознает селектор ::selection.

Стоит отметить, что многие браузеры сегодня не обрабатывают HTML5 так как он находится на этапе разработки. Браузеры не воспринимают эту разметку и пропускают ее.

Задаем стиль HTML5 элементам

Повторюсь, что наши браузеры пока еще не понимают HTML5 должным образом. А так как HTML5 все еще в стадии разработки, то стили для новых элементов еще не утверждены и даже не предусмотрены, поэтому какой бы стиль, вы бы для них не прописали, браузеры его не отобразят.

Можно предположить, что большинство браузеров применит что-то вроде display: inline для всех неизвестных тегов, с которыми они могут столкнуться. Это не то, чего мы хотим относительно некоторых из них, например <section>, поэтому мы должны явно указать браузеру, как отображать эти элементы.

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;

}Вот! Теперь мы можем задавать стили нашим элементам так, будто бы они все те же самые элементы <div>!

Ограничим наши блоки

Некоторые из вас, возможно, заметили, как я добавил класс = «body» большинству разделов в нашей разметке. Мы хотим, чтобы тело сайта было определенной ширины (800px), и я никогда не был поклонником <div> для реализации подобного. Таким образом, мы будем использовать технику центрирования базовых блоков при помощи параметра margin. Я также добавил пару общих классов в этот раздел.

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}Стиль для элемента Header

Начнем с нашего заголовка. Все необыкновенно просто. Мы зададим парочку интервалов и несколько стилей текста. Здесь нет ничего такого, чего бы мы не делали ранее.

/*

Header

*****************/
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;

}

/* Banner */
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;

}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;

}

#banner h1 strong {font-size: 0.36em; font-weight: normal;}Перейдем теперь к нашей системе навигации. И здесь тоже для вас нет ничего нового. Горизонтальный список, пара изменений цвета и никакой фантазии

/* Main Nav */
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

}

#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}

#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;

}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;

}

#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;

}Мы применили новый CSS3 свойство: border-radius.

Это новое свойство позволяет нам добавить округлые границы для наших блоков без необходимости ненужных, несемантических тегов, которые внесут кучу беспорядка в наш код, а также нам вовсе не понадобится миллион изображений или всяческих хитростей. Это все в прошлом. Все что нам надо – это указать радиус закругления.

Конечно, border-radius пока еще сильно не распространен, поэтому нам придется использовать свойства-эквиваленты для браузеров Mozilla и Webkit. Есть множество вариаций этого аттрибута, которые сделают ваш код немного больше, но если вы хотите закругленные углы в большинстве современных браузеров, то добавьте и их тоже.

Вы наверняка заметили свойство !important, который позволяет повысить приоритет стилевого параметра и проигнорировать стили установленные по умолчанию для целого раздела.

В нашем коде он размещен скорее с образовательной целью.

Задаем стили для блоков Featured и Body

Вот код CSS для обоих блоков. Заметим, что он не касается списка постов. А так как для данных блоков еще не предусмотрены специальные свойства, то предлагаю решить проблему следующим образом:

/*

Featured

*****************/
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

#featured figure {

border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;

}
#featured figure img {display: block; float: right;}

#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}

#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration:
none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}

/*

Body

*****************/
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}И снова все нам знакомо. Фон, поля, цвета и стили текста, которые мы используем годами. Как видите, задавать стили элементам HTML5 не так уж и сложно, причем приемы стилизации HTML5 практически не отличаются от тех, к которым мы так привыкли.

Стилизация блока дополнительной информации

Вот где начинается самое интересное. Начнем с основных, привычных нам стилей:

/*

Extras

*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;

}

#extras a:link, #extras a:visited {

color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;

}

/* Blogroll */
#extras .blogroll {
float: left;
width: 615px;

}

#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

/* Social */
#extras .social {
float: right;
width: 175px;

}Как видите, я создал 3 колонки блока blogroll, чтобы разместить ссылки на блоги, пустив в ход элемент <li>, и 1 колонку блока social, просто изменив ее ширину. Все, вроде, хорошо работает, и все же меня волнуют границы, которые я добавил, с целью отделить ссылки друг от друга.



Меня беспокоит именно выделенная строка. Ведь добавленные мной границы актуальны только для двух элементов. Каждые <li> и <a> тега имеют нижнюю границу в 1px, которая мне не нужны в последней строчке. Поэтому, мы удалим границу у трех элементов блока blogroll и у одного элемента блока social.

Сначала мы удалим границы последнего <li> каждого блока при помощью CSS3 селектора :last-child :

#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0} Что позволит удалить границу последней ссылки в двух наших блоках. Теперь у нас есть новая проблема. Как же удалить границы двух других блоков?



Хорошо, представляю вам :nth-last-child().

#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}Выглядит довольно сложно? Не совсем так. Он больше нацелен на второй (2) и третий (3) элементы, расположенные последними. Именно у них нужно удалить нижнюю границу.

Как и ожидалось, данный код не будет работать в IE, хотя IE8.js поддерживает :last-child селектор, но не поддерживает :nth-last-child, значит границы появятся в IE. Но это не является серьезной проблемой, информация по-прежнему доступна, поэтому не имеет смысла пытаться добиться того же эффекта на IE другими способами.

Добавим иконки в блок social

Теперь мы немного оживим наш шаблон. Всем нам нравятся маленькие иконки у каждой ссылки. Данная техника дизайна очень распространена. Существует миллион способов их добавления, но мы воспользуемся рядом продвинутых CSS3 селекторов.

Начнем с небольшого вступления. Формула a[n='b'] будет выявлять (ставить целью) все элементы <a> с атрибутом n и значением b. Например, если у нас указано a[href='picture.jpg'], то целевым объектом станет элемент типа <a href=»picture.jpg»>. Это конечно замечательно, но не совсем то, что нам нужно, поскольку в ссылке на URL может стоять другое значение. Вот еще несколько селекторов, которые могут пригодиться:

• a[n] будет использовать все теги <a> с атрибутом n, не зависимо от его значения.
• a[n='b'] будет нацелен на все теги <a> с атрибутом n и значением b.
• a[n~='b'] будет нацелен на все теги <a> с атрибутом n, у которого одно из отдельных пребелом значений — значение b.
• a[n^='b'] будет нацелен на все теги <a> с атрибутом n с первым значением b.
• a[n*='b'] будет нацелен на все теги <a> с атрибутом n, у которого среди всех значений есть и значение b.

Обратите внимание, что ни один из этих селекторов не ограничено тегом <a> . Последний нам подходит идеально. Получим следующий код:

#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;

}

/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}Первый шаг позволяет нам добавить блоку social отступ, необходимый для размещения иконок, а так же задать фон по умолчанию. Вы, наверняка, удивитесь, почему я прописал div[class='social'], вместо обычного div.social. Просто не все браузеры такой род селекторов (IE ), мы ведь не хотим, чтобы слева от ссылок был большой разрыв (пробел). Таким образом, использовать тот же селектор, что применялся для фона иконок, будет значительно безопасней.

Второй шаг использует селектор, с которым мы уже разобрались выше. Данный CSS прием не представляет из себя ничего нового, но и не имеет широкого применения (я даже видел JavaScript, используемый для достижения той же цели).

Стилизация нижнего блока (Footer)

Вот мы и добрались до нижней части. Как и при стилизации остальных блоков, были использованы только основные свойства. Помимо свойства border-radius нет больше ничего нового.

/*

About

*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}

#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}

/*

Footer

*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}Добавляем стили списку постов

Снова применяем стандартные свойства. Единственное, что мы еще сделаем, так это добавим эффект выделения цветом поста, на который пользователь наводит курсор мыши.

/* Blog */
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;

}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}

.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}

.hentry .post-info * {font-style: normal;}

/* Content */
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}

/* Blog Index */
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;

}Для последнего поста я удалил границы и отступы (таким образом мы избежим ненужного нам разрыва). Я также применил >селектор нацеленный непосредственно на дочерний элемент. Например, селектор #content > .hentry нацелен на элемент .hentry, расположенный непосредственно внутри #content.

Продолжим наш код:

#posts-list .hentry:hover {
background: #C64350;
color: #fff;

}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}Данный код нацелен на изменение фонового цвета контейнера <li>, цвета текста и цвета содержимого элемента <a> при наведении мыши на пост, заключенный в тег <li>.

HTVL5 позволяет заключить элементы блоков различных уровней в тег <a> с целью создать из блока информации ссылку. Так например, мы сможем все содержимое элемента <hentry> разместить в этот тег и тем самым заставить его работать ссылкой. Однако, как оказалось Firefox 3.5.1 не способен выполнить данную задачу. Возможно причиной тому является новый непонятный элемент внутри каждого .hentry; каждый раз, когда я пытаюсь добавить «якорь» (тег <a>), блок начинает вести себя странным образом. Safari, Opera и даже IE6 работает как положено. Посмотрите на тестовую страницу.

Снизу я привел скриншоты сделанные с разных браузеров.

Opera 9.64:



Safari 4.0.2:



Internet Explorer 6:



Firefox 3.5.1:



Как видите Firefox не справляется с данной задачей, и все же вы можете установить :hover эффект для содержимого, заключенного в тег <li>.

Исправляем под браузер IE6

Итак, пора бы сделать некоторые исправления для корректной работы IE6. Снизу приведен законченный ie.css файл и ie6.css файл. У каждой строки имеется комментарий, так что все довольно просто и понятно. Вот ie.css:

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */А вот и ie6.css файл:

#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */
/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}4. Заключение

Посмотреть на то, что у нас получилось можно здесь. Страница была протестирована в браузерах: IE6, Firefox 3, Firefox 3.5, Opera 9.64 и Safari 4.0.2. Они все отражают корректно, ниже приведены скриншоты из разных браузеров:









Теперь вы умеете создавать сайты, работающие в устаревших браузерах, современных и которые будут работать в браузерах будущего, используя HTML5/CSS3. Правда, спецификация по HTML5 еще не закончена, но мы можем уже сегодня использовать ряд новых возможностей.
Метки: css, html 5, php, шаблон сайта

Так же советую обзавестись маленькими но очень полезными друзьями. Такими как:
ColorMania - избавит вас от проблемы выбора и вставки в html цветового кода (например #C64350). Прога прекрасно работает с буфером обмена. Выдирает цвета (и его код) со всего что вы можете увидеть на мониторе.
Миниатюрна, проста, бесплатна и понятна.

mySize это штангенциркуль и линейка, дюймы, см, px.
Думаю найдете где применить при верстке страниц.

У меня же есть то и то. Очень выручает. Не найдете в сети пишите, поделюсь.

пси. Ссылок не даю, пока не разрешают.

Кстати мой вам нечеловеческий совет. Верстая страницы позаботитесь о СПЕК -е, На самом деле это невыносимо рутинная работа. И все же создайте папочку bagtrack_proek_omiga, и заведите в ней txt, doc или даже bmp! Куда будете заносить логику сайта, блок схемы, коррекцию, и
прочею полезную только для вас инфу. Помните! То что именно сейчас для
вас Ясно и Понятно через неделю окажется " "

пси. Про bmp я не пошутил! paint очень удобен. Его холст можно тянуть
в низ создавая очень длинную ленту жизни. А просматривать такой
файл очень удобно в стандартной WinXP-7 проге "для просмотра изображений и факсов". Неоглядность для самого себя очень важна.

СПЕК- специфика.