—»     —»   Уроки вёрстки: Разрабатываем одностраничный шаблон веб-сайта на CSS3 и HTML5
  Раздел: Образование и Изучение, Руководства   Комментариев: 1  

Уроки вёрстки: Разрабатываем одностраничный шаблон веб-сайта на CSS3 и HTML5

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

Стоит помнить о том, что изменения не берутся просто так. Сейчас молодые разработчики вовсю пользуются тем, чем нам теперь придется пользоваться каждый день на протяжении ближайших лет. Одна из таких технологий – HTML5 (новая версия фундаментального языка веб-технологий).

Сегодня мы будем разрабатывать веб-шаблон на HTML5, используя некоторые современные функции CSS3 и jQuery, а также плагин scrollTo. Так как HTML5 до сих пор находится в стадии разработки, вы можете также скачать XHTML-версию шаблона тут.

Этап 1 – Дизайн

Каждый дизайн начинается с идеи, которую затем нужно воплотить в реальность. На данном этапе дизайнеры обычно пользуются программой Photoshop. Она позволяет поработать над деталями и увидеть, как все они будут выглядеть вместе.

Уроки вёрстки: Разрабатываем одностраничный шаблон веб-сайта на CSS3 и HTML5

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

Этап 2 – HTML

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

В нашей сегодняшней статье мы будем использовать некоторые тэги, представленные в новой версии HTML5:

* 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>

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

После указания кодировки и заголовка документа, мы переходим к включению специального JS-файла, который поможет браузеру IE (любой версии) корректно генерировать тэги HTML5. Опять же, это означает, что если посетитель использует IE с отключенной поддержкой javascript, то все элементы будут перепутаны. По этой причине, в зависимости от аудитории, вы должны рассмотреть вариант с XHTML-кодом, который будет работать в любом браузере, и доступен абсолютно бесплатно для всех читателей.

Template.html – Тело документа

<body>

    <section id="page"> <!-- Defining the #page section with the section tag -->

    <header> <!-- Defining the header section of the page with the appropriate tag -->

        <h1>Your Logo</h1>

        <h3>and a fancy slogan</h3>

        <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->

            <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>

Здесь мы будем использовать новые тэги секций страницы, которые будут разделять вашу страницу на отдельные семантические отделения. Самая крайняя секция – это секция #page, ширина которой выставлена на 960px в каскадных таблицах стилей (стандарт ширины веб-сайтов для сейчас уже устаревших дисплеев). После этой секции идёт секция header, а затем navigation.

Учтите, что href-атрибуты ссылок на странице – часть после символа # отвечает за ID статьи, к которой нам надо переместиться.

Template.html – статья

<!-- Article 1 start -->

<div class="line"></div>  <!-- Dividing line -->

<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->

    <h2>Photoshoot Effect</h2>

    <div class="line"></div>

    <div class="articleBody clear">

        <figure> <!-- The figure tag marks data (usually an image) that is part of the article -->

            <a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                <img src="http://cdn.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», которому в HTML5 добавили элемент логического разделения, но, к сожалению, мы не сможем оформить этот тэг для всех браузеров одновременно и, по этой причине, мы воспользуемся тэгом «div»). После этого у нас идёт новый тэг article с уникальным ID-номером, который используется для навигации по странице.

Внутри него у нас есть заголовок статьи, два абзаца и новый тэг figure, который обозначает использование изображений в статье.

Template.html – подвал

        <footer> <!-- Marking the footer section -->

            <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> <!-- Closing the #page section -->

    <!-- javascript Includes -->

    <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>

И, наконец, у нас идёт тэг footer (подвал), который выполняет именно ту функцию, которую вы от него и ожидаете. В самом низу страницы мы размещаем оставшиеся javascript-внедрения, которые добавляют библиотеку jQuery, а также плагин scrollTo. Всё это мы будем использовать в последующих этапах.

Уроки вёрстки: Разрабатываем одностраничный шаблон веб-сайта на CSS3 и HTML5

Этап 3 – CSS-код

Так как мы используем HTML5, нам нужно уделить особое внимание оформлению. Тэги, которые представляет эта новая версия HTML, пока ещё не оснащены стандартными параметрами оформления. Всё это с лёгкостью исправляется посредством пары строк CSS-код, и наша страница будет выглядеть так, как полагается:

Styles.css – часть 1

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

article .line{
    /* The dividing line inside of the article is darker: */
    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;
}

Изначально нам надо выставить значение отображения новых тэгов в виде блочных элементов, как вы можете видеть по первым строкам кода. После этого мы можем оформить их так, как мы обычно оформляем обычные тэги «div».

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

Styles.css – часть 2

/* Article styles: */

#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 styling: */

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;
}

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

Теперь давайте перейдём к следующему этапу.

Уроки вёрстки: Разрабатываем одностраничный шаблон веб-сайта на CSS3 и HTML5

Этап 4 – jQuery

Для усовершенствования шаблона, мы создадим мягкий скользящий эффект при клике на ссылку в навигационном меню. Это реализуется посредством плагина scrollTo, который мы включили в код нашей страницы. Для того чтобы он заработал, нам просто нужно подключить его к ссылкам в навигационном меню, а также к ссылке UP в подвале. Это можно сделать, прописав функцию $.srollTo() в событие onclick.

Script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('nav a,footer a.up').click(function(e){

        // If a link has been clicked, scroll the page to the link's hash target:

        $.scrollTo( this.hash || 0, 1500);
        e.preventDefault();
    });

});

На этом наш шаблон завершен!

Упаковываем!

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

Демо-версия | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, HTML 5, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 34184   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 января 2012 @ 02:02
Написал: anray — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Для того чтобы он заработал, нам просто нужно подключить его к ссылкам в навигационном меню, а также к ссылке UP в подвале. Это можно сделать, прописав функцию $.srollTo() в событие onclick


onclick прописывать не надо все и так работает.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031