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


Частная коллекция качественных материалов для тех, кто делает сайты

Об авторе
Видеокурсы на DVD
Предложить урок

Рекомендую

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

Данный урок подготовлен для вас командой сайта ruseller.com

Источник урока: www.tutorialzine.com

Перевел: Максим Шкурупий

Урок создан: 9 Марта 2010

Просмотров: 89712

Правила перепечатки


5 последних уроков рубрики "Для сайта"


  • Мета теги для социальных сетей Facebook, Twitter и Google Plus

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


  • 27 примеров сайтов с двумя сайдбарами

    В выходной день, как всегда, делаем обзор интересных вариантов дизайнов.


  • Оформление карт Google под себя

    Знаете ли вы, что у нас есть возможность полностью контролировать стили отображения карт Google. Сегодня мы покажем, как это использовать.


  • Генератор профилей пользователей

    RandomUser предоставляет нам API, который мы можем использовать для генерации случайных профилей пользователей. Данную информацию можно использовать для того чтобы заполнить сайт временной информацией.


  • Оформление гиперссылок — не всё так просто!

    Гиперссылки — это неотъемлемая часть любого сайта. Без них всё было бы по-другому, если бы вообще было. Используя простой HTML элемент — <a> – вы можете связать страницы и сайты друг с другом. Гиперссылки — это что-то магическое.

Комментарии (21):
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 9 Марта 2010 15:08

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

    RUDO
    В хроме и сафари тоже всё отлично!
  • 9 Марта 2010 16:59

    Никита
    и в опере
  • 9 Марта 2010 17:56

    Сумрак
    Различные глюки — это например нет скругленных уголков)))
  • 9 Марта 2010 18:34

    xXDeMoNXx
    нет скругленных уголков ни у кого кроме файрфокса, так как название используемого свойства (-moz-border-radius), а точнее префикс moz говорит само за себя, что оно относится к файрфоксу
  • 9 Марта 2010 22:15

    Serginho
    где-то я это уже видел..
  • 9 Марта 2010 22:43

    sereddos
    "нет скругленных уголков" "Различные глюки" мож за вас еще и сайт сделать, на этом хоть спасибо сказали бы
  • 10 Марта 2010 07:55

    Dober
    Спасибо вообще то сказали))) и от меня +1
  • 14 Марта 2010 11:19

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

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

    Scriptik
    RUDO, свойство -moz-* не только напоминает название браузера mozilla firefox, но и создано для него. CSS3 для меня, это, конечно же, кривые дизайнеры, с "долой нахрен кроссбраузерность", кривыми руками, плохим правописанием и, особенно, хреновым зрением 🙂 На самом деле, для меня, CSS3 это некий способ упростить код стилей, но простите, не до такой же степени…
  • 15 Марта 2010 18:16

    Scriptik
    Например: хочу придать прозрачность элементу на странице. Я напишу: 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 валидаторе это демо.
  • 15 Марта 2010 23:48

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

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

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

    Alexander
    Круто
  • 26 Июня 2010 11:44

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

    WH
    я уж было обрадовался, ну чел вспомнил ишака, значит сейчас всё, что замутил будет грамотно работать — пример так сказать. Прочёл CSS и появились смутные сомнения: а где же хак скруглений для ишака?! Включил ишака — и вправду нету(( Это что же получается все так писать должны?! ИМХО примеры на пятёрочку должны быть, по ним же учатся и так же делают)
  • 14 Апреля 2011 13:19

    KostyaKoz
    как кодировать дизайн в ФШ?
  • 1 Июня 2011 17:08

    Магистр
    замечательный урок. Очень хороший пример верстки. Благодарен автору.
  • 4 Ноября 2013 19:18

    erter
    Вот здесь есть, как мне кажется, вариант урока http://www.e-partner.ru — прямо в шапке сайта.

Шпаргалки:

Хотите быстро изучить JavaScript и jQuery?

Предлагаю использовать самый эффективный и современный метод обучения — видеокурс.

За счет получения информации сразу по двум каналам (зрение и слух) эффективность обучения значительно превосходит обучение по книгам. А домашние задания и онлайн-тесты позволят вам постоянно думать на изучаемом языке и сразу проверять свои знания!

Более 100 видеоуроков на одном DVD.

Автор: Евгений Попов.

Смотреть видеопрезентацию

Видеокурс "HTML с нуля"

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс "CSS с нуля"

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс "Домен и хостинг"

Если вы хотите разобраться с понятиями домена и хостинга, научиться создавать базы данных, закачивать файлы сайта на сервер по FTP, создавать поддомены, настраивать почтовые ящики для своего сайта и следить за его посещаемостью, то этот курс создан специально для вас!

Бесплатно!

Список уроков и подробности получения курса здесь

Получать новые уроки на E-mail:

Ваш email:

Подписаться

RSS подписка


Подписаться

Авторизация

Логин

Пароль

Я все заполнил

Рекомендуем

Реклама от Google

Бесплатная подписка на видеоуроки:

Ваше имя на русском:

Ваш Email адрес:

Подписаться

Сделано с помощью сервиса smartresponder

© 2014 Евгений Попов. Все права защищены. Служба поддержки

Сайт мониторится с помощью сервиса ping-admin
🙂

http://ruseller.com/lessons.php?rub=29&id=555

Губарь Маргарита Александровна