Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание шаблона HTML5 для блога

22 сентября 2015 | Опубликовано в css | 1 Комментарий »

Уже пришла пора использовать семантические теги разметки HTML5 при создании сайтов. Консорциум W3C изучил более миллиарда веб-сайтов и обнаружил, что наиболее часто встречающиеся идентификаторы и классы это footer (подвал), header (шапка), menu (меню), content (содержимое), title (название) и nav (навигация). Семантическая разметка элементов HTML5 может передать их цель разработчикам, браузерам и поисковым роботам.

 

 

Демонстрация работы – Скачать исходный код

DOCTYPE 

Это наиболее важный элемент объявления, который помогает браузеру понять, какую версию HTML он пытается разобрать.

<!DOCTYPE html>

 

HTML5 перестал поддерживать атрибут type:

<meta http-equiv=”Content-Type” content="text/html";>

сменилось на

<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>

сменилось на

<link rel=”stylesheet” href=”style.css”>

 

В HTML5 следует избегать следующих тегов и атрибутов:

<font>, <center>, <frame>, align, bgcolor, height, width, size, type 

Шаг 1 

Верстка веб-сайта делится на четыре горизонтальные части: Header, Nav, Section (раздел) и Footer:

Код HTML

<header class='container'>1 Header</header>
<nav class='container'>2 Nav</nav>
<section class='container'>3 Main</section>
<footer class='container'>4 Footer</footer>

Код CSS

*{margin:0px; padding:0px}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}

Шаг 2 

Теперь работаем с неупорядоченным списком тега <ul>:

<nav class='container' id='nav'>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>

Код CSS

#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}

Шаг 3 

Основной раздел разделен на две вертикальные части: раздел статей и отдельную боковую панель:

<section class='container'>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section> 

Код CSS

#main
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}

Статья 

Название статьи здесь наиболее важное и наивысшего уровня, так что оно должно быть в теге <h1>:

<section id='content'>

<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>

Главная страница 

На этой странице будет много названий статей с небольшими описаниями, чтобы читатель мог быстро найти нужную информацию. Стандарты W3C определяют использование тега <h1> для заголовка верхнего уровня.

<section id='content'>

<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description
</p>
</article>

<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description
</p>
</article>

.......
</section>

Modernizr 

Modernizer – это библиотека JavaScript, которая определяет доступность стандартной поддержки для веб-технологий нового поколения. Эти технологии — новые возможности, которые базируются на развивающихся спецификациях HTML5 и CSS3.

Код HTML

Для поддержки более ранних версий браузеров, таких как Internet Explorer 7 и 8, нужно включить modernizr.min.js после таблицы стилей в теге head. По этой ссылке можно скачать библиотеку JavaScript Modernizer.

<!DOCTYPE html>
<!--[if lt IE 7]> 
<html>
<![endif]-->
<!--[if IE 7]> 
<html>
<![endif]-->
<!--[if IE 8]> 
<html>
<![endif]-->
<!--[if gt IE 8]> <!--> 
<html>
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>

<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>

<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>

<aside id='sidebar'>
</aside>
</section>
<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info.
</p>
</footer>
<body>
</html>

Теперь этот код отлично работает и с ранними версиями браузера Internet Explorer.

Обратите внимание: Modernizer не поддерживает свойства CSS, записанные в коде HTML.

style.css

Окончательный вариант кода CSS 

*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
#main, #header, #nav
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
font-size:12px;
font-weight:bold;
}

Обратите внимание: Modernizer не поддерживает свойства CSS, записанные в коде HTML.

Связанная статья: Адаптивный веб-дизайн с использованием CSS3

Автор урока Srinivas Tamada

Перевод — Дежурка

Смотрите также:


�


Комментарии

  1. axit
    22 сентября 2015 в 15:31
    Thumb up Thumb down 0

    Поправьте ссылку «Демонстрация работы»

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые