Создаем шаблон сайта с помощью CSS3 и HTML5

Скидка на хостинг

Если Вам нужен качественный хостинг и Вы непротив сэкономить 10% на его покупке, то Вы можете воспользоваться моим специальным предложением по скидке на хостинг от компании Ютекс.

Узнать подробнее

Главная » Уроки » Рубрика Для сайта

Метки урока: шаблоны, html5, jquery, css3, html, кодинг

Создаем шаблон сайта с помощью CSS3 и HTML5

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

Одна из таких новейших технологий - это 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 &amp; 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 и их помощью создали одностраничный красивый шаблон. Можете использовать его в собственных целях.

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.tutorialzine.com

Рейтинг: 5

Урок создан: 9.3.2010 Просмотров: 16850 Правила перепечатки

Оценивать уроки могут только зарегистрированные пользователи

Если хотите не упустить данный урок, добавьте его в закладки

Пять последних добавленных уроков в рубрике Для сайта:

»Простая система комментирования с использованием AJAX
В данном уроке мы создадим простую систему комментариев с использованием AJAX. Система имеет интеграцию с gravatar.com и демонстрирует, как устанавливать эффективное взаимодействие между jQuery и PHP/MySQL с помощью JSON.

»Временнная шкала (PHP, CSS и jQuery )
Сегодня мы будем создавать прелестную временную шкалу для событий, которая будет похожа на временную шкалу Google, созданную на десятилетие компании.

»Динамическая секция ЧАВО с использованием jQuery, YQL и Google Docs
В данном уроке мы сделаем динамическую секцию ЧАВО. Скрипт, при помощи jQuery и YQL (Yahoo! Query Language - язык запросов Yahoo!) , будет вытаскивать содержимое электронной таблицы на вашем аккаунте Google Docs и использовать данные для наполнения секции ЧАВО вопросами и ответами.

»Простой способ использовать на сайте такой шрифт, какой хочется.
В данном уроке будет продемонстрировано, как использовать любой шрифт, какой пожелаете, в ваших веб приложениях.

»Слайдшоу с эффектом вертикального жалюзи
Это описание скрипта, который позволяет организовать слайдшоу с эффектом вертикальных жалюзи.

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

Комментарии:

Автор: preambula (2010-06-26 11:44:02)

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

Автор: Alexander (2010-05-07 15:47:09)

Круто

Автор: RUDO (2010-03-16 02:40:57)

Лично я на счет CSS3 опирался на http://vremenno.net/html-css/css3-review/ Как я понял он для тех кто совершенно не знаком с графическими редакторами... Да и хрен с ним, я его не использую... пока обхожусь связкой PhotoShop+CSS2.....

Автор: Scriptik (2010-03-16 01:54:51)

RUDO, ну webkit-* и Лиса поддерживает. Про Оперу, вы бы у девелоперов узнали :) Да и какая разница? Не CSS3 это. CSS3 сейчас уклоняется в переменные и анимацию. Зачем только? - Не понятно.

Автор: RUDO (2010-03-15 23:48:08)

"свойство -moz-* не только напоминает название браузера mozilla firefox, но и создано для него." Scriptik, если рассуждать по вашему, то свойство -webkit-* создано исключительно для браузеров Google Chrome и Apple Safari (т.к. они построены на этом движке), так почему же у оперы нет своих "именных" свойств?

Автор: Scriptik (2010-03-15 18:16:07)

Например: хочу придать прозрачность элементу на странице. Я напишу: opacity: 0.9; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; Вы же, на 100%, напишите: -moz-opacity: 0.9; Хотя это не верно и в том же IE и части браузеров, которые имеют право существовать, прозрачность будет отсутствовать. Но Вы же, то ли в веду своей не компетентности, то ли для облегчения своего труда, скажете: Это CSS3, пошли все в попу! Но увы, это ошибка. Нет в CSS3 таких свойств как: -moz-box-shadow -webkit-box-shadow -moz-border-radius -webkit-border-radius box-shadow Нетууу! Если часть браузеров поддерживает эти стили, это еще ничего не значит. Не верите? Проверьте в CSS3 валидаторе это демо.

Автор: Scriptik (2010-03-15 18:15:55)

RUDO, свойство -moz-* не только напоминает название браузера mozilla firefox, но и создано для него. CSS3 для меня, это, конечно же, кривые дизайнеры, с "долой нахрен кроссбраузерность", кривыми руками, плохим правописанием и, особенно, хреновым зрением :) На самом деле, для меня, CSS3 это некий способ упростить код стилей, но простите, не до такой же степени...

Автор: RUDO (2010-03-15 00:56:26)

Scriptik, а что тогда по Вашему CSS3? xXDeMoNXx, обнови хром и сафари они тоже работают с CSS3... а то что свойство -moz-* напоминает название браузера mozilla firefox, это не значит что оно создано или предназначено для него...

Автор: Scriptik (2010-03-14 11:19:05)

/* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; Сколько раз говорить что это не CSS3 ???

Автор: Dober (2010-03-10 07:55:32)

Спасибо вообще то сказали))) и от меня +1

Автор: sereddos (2010-03-09 22:43:04)

"нет скругленных уголков" "Различные глюки" мож за вас еще и сайт сделать, на этом хоть спасибо сказали бы

Автор: Serginho (2010-03-09 22:15:37)

где-то я это уже видел..

Автор: xXDeMoNXx (2010-03-09 18:34:46)

нет скругленных уголков ни у кого кроме файрфокса, так как название используемого свойства (-moz-border-radius), а точнее префикс moz говорит само за себя, что оно относится к файрфоксу

Автор: Сумрак (2010-03-09 17:56:20)

Различные глюки - это например нет скругленных уголков)))

Автор: Никита (2010-03-09 16:59:15)

и в опере

Автор: RUDO (2010-03-09 16:36:14)

В хроме и сафари тоже всё отлично!

Автор: Сумрак (2010-03-09 15:08:12)

Огромнейшее спасибо!!! Замечательный урок, побольше бы такого! P.S. Провел тесты в разных браузерах... Целиком и полностью работает как всегда только в файрфоксе)) В остальных наблюдаются различные глюки...

Поиск по сайту

поиск

Блог на Wordpress

Если Вы давно мечтаете о создании собственного блога на движке Wordpress, то советую Вам обратить внимание на мой новый видеокурс "Wordpress - Профессиональный блог за один день". Это более 100 видеоуроков по всем аспектам создания и ведения своего блога на самом популярном движке в мире.

Узнать подробнее

Облако меток

timeline таймлайн временная шкала скрипт библиотека событие куки mvc массив xsl сервисы база данных cookie баннер тень mysql html5 центрирование joomla sql курсор css3 закладки oop wordpress часы пароль баги чат звезды ускорение twitter google maps html 5 прозрачность ie6 png seo gd library cookies rss рейтинг цитаты блог комментарии theme тема генератор captcha cycle z index позиционирование загрузка кеширование бегущая строка тест домен советы текст видео регистрация текстуры radikal.ru фото favicon слайдшоу карта лента загрузка файлов голосование опрос поля формы api чарты диаграммы mod rewrite календарь спрайты текстовое поле константа include защита multiple select htaccess выпадающие списки миниатюры сообщения чекбоксы новостной блок вкладки выезжающая панель форма шпаргалка обзоры таблица анимация верстка wysiwyg wysiwig cms faq уголок разное ссылки редакторы email mootools списки юзабилити модальные окна плагины web дизайн счетчик аудио flash ajax слайдер окна javascript html кодинг оптимизация шаблоны формы кнопка меню изображения фон подсказки css контактная форма php ротатор галерея jquery

Показать flash облако

Раскрутка

Меня часто спрашивают, как я раскручивал данный сайт?

Мой ответ таков. Для раскрутки данного сайта использовалась методика "Мастер план по раскрутке сайта", которая была предложена Юсуфом Губайдуллиным в начале 2009-го года.

Узнать подробнее

Ссылки от гугл