Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Верстка шаблона на HTML5

Верстка шаблона на HTML5

Опубликовал: artCreative™
Категория: HTML верстка
Дата:Вторник, 07 Мая 2013 в 22:01

0 голосов

И так, наверняка многие из вас скажут, а как же кроссбраузерность? Никаких проблем скажу я вам, все просто.. Наш злой враг IE Internet Explorer, назовем его так, на своих ранних версиях просто не способен понять новые теги введенные в HTML5. Для этого бы создан простой плагин html5shiv
html5shiv — это простой плагин, который помогает «понять» IE6-8 HTML5 теги. Основан на простом решении: если вы создаете новый элемент DOM в IE, вы потом можете стилизировать какие-либо элементы с таким именем. То есть, когда вы создаете новый элемент DOM так: document.createElement("vasya"); — вы можете добавить любое количество тегов > на странице и IE оформит их.
html5shiv поддерживает все теги HTML5, которые не понимают IE6-8. Исключение составляют audio, video и svg. Чтобы начать использовать, достаточно в добавить следующие строки:

Код

Главное достоинство этого плагина в том, что он дает возможно применять семантические теги HTML5 уже сегодня. Просто не забывайте, подключать этот javascript для IE. Ну а теперь перейдем к самой семантике.
Каждая страница любого html документа начинается с? Правильно, DOCTYPE'па. Раньше он был таким
Строгий синтаксис HTML.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Переходный синтаксис HTML.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

В HTML-документе применяются фреймы.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

Код

<!DOCTYPE html>

Все, больше ничего не нужно. Конечно, в HTML не только были прибавлены новые неги и атрибуты, но и были урезаны старые. Теперь следующие теги и атрибуты по какой то причине были убраны

Код

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

Но, зато стал короче исходный код.

Код

//Если раньше нам приходилось писать
<meta http-equiv=”Content-Type” content="text/html";>
<link rel=”stylesheet” href=”style.css” type=”text/css”>

//теперь так
<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css”>

Не правда ли так лучше?.. И так, все же наша статья посвящена верстке, а не полным разбором HTML5. Ей мы и займемся.
Шаг 1
Наш макет разделен на четыре горизонтальные части header, nav, section и footer.

Код

<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:block;
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}

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

Код

<nav class='container' id='nav'>
<ul>
<li>Главная</li>
<li>Проекты</li>
<li>Статьи</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>

Код

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

Шаг 3
section (основная часть) делится на две вертикальные части раздела (части статьи) и 2 колонка (боковая панель)

Код

<section class='container'>
<section id="content">Статьи</section>
<aside id='sidebar'>Сайд бар</aside>
</section>

CSS code

Код

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

Страница статьи
Здесь название статьи является наиболее важным и высшего звена, так что заголовок должно быть в теге

Код

<section id='content'>
<article>
<header>
<h1>Заголовок вашей статьи</h1>
</header>
<p>
Текст вашей статьи
</p>
</article>
</section>

Домашняя страничка
Так будут выглядеть наши публикации. Каждая статья оборачивается в тег article, а блок с заголовком в тег header, в котором будет сам заголовок внутри тега h2. Само сообщение оборачиваем в тег p. Все просто.

Код

<section id='content'>

<article>
<header>
<h2>Заголовок вашей статьи 1</h2>
</header>
<p>
Текст вашей статьи
</p>
</article>

<article>
<header>
<h2>Заголовок вашей статьи 2</h2>
</header>
<p>
Текст вашей статьи
</p>
</article>

.......

</section>

Ну а теперь финальный HTML5

Код

<!DOCTYPE html>
<html>
<head>
<title>Ваша HTML5 страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class='container' id='header'>
Тут логотип сайта
</header>

<nav class='container' id='nav'>
<ul>
<li><a href='#'>Главная</a></li>
<li><a href='#'>Форум</a></li>
<li><a href='#'>Проекты</a></li>
.....
.....
</ul>
</nav>

<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Заголовок/h1>
</header>
<p>
Текст статьи
</p>
</article>
</section>

<aside id='sidebar'>
</aside>
</section>

<footer class='container' id='footer'>
<p>
© 2012-2013
</p>
</footer>
<body>
</html>

Финальный CSS

Код

*{margin:0px; padding:0px}
header, footer,section,nav{display:block;}
.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;
}

Спонсор материала: Студия Веб-Дизайна RealARTs

Автор файла: Get-E

Ссылка на материал

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1193 « Назад

Теги материала: верстка, шаблона, на, HTML верстка, html5

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Верстка шаблона на HTML5

Верстка шаблона на HTML5

Комментарии пользователей