—»     —»   Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение
  Раздел: Образование и Изучение   Комментариев: 1  

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Нравится вам или нет, но 960.GS помогает максимально быстро разработать прототип шаблона. Используя заранее подготовленные классы, вы можете создать достаточно сложные шаблоны, практически не прилагая усилий.

Сегодня мы предлагаем вам бесплатный одностраничный шаблон, полностью разработанный с помощью 960.GS. Шаблон оснащен несколькими интересными эффектами CSS3, а также здесь применили @font-face для того чтобы получить красивую типографику. Ниже вы найдете ссылку на скачивание, а также пошаговую статью, в которой рассказано о процессе создания.

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

Скачать шаблон

* Предварительный просмотр в браузере
* Скачать ZIP

Посмотрите, как шаблон должен выглядеть:

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Ресурсы 960.GS

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

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

В скачанном архиве вы найдете множество разных файлов, но, в сущности, нам нужны только три файла CSS: reset.css, text.css и 960.css. Это стандартные компоненты, на которых построена сетчатая система разметки. Файлы reset и text можно использовать по желанию, но мы воспользуемся ими для того чтобы быть уверенными в том, что наша страница во всех браузерах будет отображена так, как нужно нам.

Обучающая статья, приведенная ниже, рассчитана на людей, которые достаточно знакомы как с CSS, так и с 960.GS. Если вам нужен краткий вариант, то обратите внимание на руководство, размещенное на сайте Six Revisions.

Этап 1: Создайте новые HTML и CSS файлы

В дополнение к файлам, которые были скачаны с 960.GS, нам нужен будет еще один собственный. Создайте на локальном компьютере директорию, переместите туда все скачанные файлы и создайте новые файлы с названиями: index.html и style.css

Вставьте следующий код в HTML-файл:

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Design Shack Template</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="style.css" type="text/css">
<!--<link rel="stylesheet" href="css/uncompressed/demo.css" />-->
</head>

<body>
<div id="header"></div>

<div class="container_12">
</div>

<div id="footer"></div>
<!-- end .container_24 -->

</body>
</html>

Только что мы связали HTML-файлы с нашими файлами CSS (возможно, здесь слишком много файлов, но все это нам нужно ради дополнительных возможностей), а также начали заполнять тело HTML-файла.

Судя по дизайну, у нас есть тонкие серые линии в верхней и нижней частях страницы. Нам нужно, чтобы они были растянуты на всю ширину, так что нужно расположить их за пределами div’а от 960.

Далее, между шапкой и подвалом страницы, у нас есть div с классом «container_12». Так как мы применяем 12-колоночную версию системы 960, это образует div, который в большинстве случаев автоматически будет центрирован и растянут на всю страницу.

Этап 2: Шрифты

Здесь у нас используется два шрифта, которые не относятся к веб-среде: Lobster и Caviar Dreams. Оба эти шрифта можно найти в библиотеке шрифтов FontSquirrel @Font-Face Kit Library.

Скачайте наборы для каждого шрифта и поместите два разных файла шрифтов в папку с вашим проектом. В CSS-коде, который идет с каждым набором, вы можете найти код @font-face, с помощью которого вы можете встроить шрифт на страницу. Возьмите нужный отрывок кода для каждого шрифта и вставьте их в код файла style.css.

@font-face {
    font-family: 'Lobster13Regular';
    src: url('Lobster_1.3-webfont.eot');
    src: local('‚&#242;&#8747;'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontHqICmWr8') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('CaviarDreams-webfont.eot');
    src: local('‚&#242;&#8747;'), url('CaviarDreams-webfont.woff') format('woff'), url('CaviarDreams-webfont.ttf') format('truetype'), url('CaviarDreams-webfont.svg#webfontdHSnsI35') format('svg');
    font-weight: normal;
    font-style: normal;
}

Используя данный код, мы можем включить шрифты на странице путем вписывания «Lobster13Regular» или «CaviarDreamsRegular».

Этап 3: Шапка шаблона

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

#header {
    margin-top: 0;
    height: 30px;
    background-color: #494949;
}

В сущности, все, что мы делаем здесь, это задаем значение высоты шапки и цвет ее фона.

Этап 4: HTML-код навигации

Первое, что идет после шапки, это навигационное меню. Здесь небольшая хитрость заключается в том, что оно расположено в правой стороне страницы и ему присвоено плавающее значение. Мы можем использовать класс 960, а затем использовать команду push, но легче всего будет, если мы не будем применять какой-либо класс к div’у и просто зададим плавающий параметр посредством CSS.

<div id="nav">
    <ul>
        <li><a href="http://designshack.co.uk/">Home</a></li>
        <li><a href="http://designshack.co.uk/">About</a></li>
        <li><a href="http://designshack.co.uk/">Portfolio</a></li>
        <li><a href="http://designshack.co.uk/">Contact</a></li>
    </ul>
</div>

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

Этап 5: CSS-код навигации

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

#nav {
    font-family: 'CaviarDreamsRegular', helvetica, sans-serif;
    text-align: right;
    font-size: 17px;
    margin-top: 40px;
    float: right;
    color: #494949;
}

#nav a, ul {
    color: #000;
    text-decoration: none;
}

#nav a:hover {
    text-decoration: underline;
}

#nav ul {
    list-style: none;
}

#nav ul li {
    float: left;
    margin-right: 12px;
}

Учтите, что здесь мы используем шрифт Caviar Dreams, но постарайтесь добавить еще несколько дополнительных шрифтов на случай, если браузер не сможет загрузить нужный шрифт.

Самое странное здесь то, что здесь мы используем сразу оба значения float: left и float: right. Для того чтобы ссылки появлялись в виде линии, нам нужно плавающее значение для «ul li» по левой стороне. Для того чтобы все меню было выровнено по правой стороне нашего контейнера, мы используем значение #nav right.

Все остальное здесь – это просто параметры цветов, шрифтов и их размеров и так далее. В качестве эффекта при наведении, мы использовали простое подчеркивание.

На этом этапе ваша страница уже должна что-то внешне представлять из себя. Убедитесь, что она похожа на пример.

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Этап 6: HTML-код заголовков

После кода навигационного меню, внесите в код div с id «headline» и класс «grid_12». Класс grid_12 сделает ширину div’а равной основному контейнеру. Внутри div’а разместите тэг H2 и тэг абзаца с каким-либо содержанием.

<div id="nav">
        <ul>
            <li><a href="http://designshack.co.uk/">Home</a></li>
            <li><a href="http://designshack.co.uk/">About</a></li>
            <li><a href="http://designshack.co.uk/">Portfolio</a></li>
            <li><a href="http://designshack.co.uk/">Contact</a></li>
        </ul>
    </div>

    <div class="clear"></div>

    <div id="headline" class="grid_12">
        <h2>Big Photo Template</h2>
        <p>This is a template from the Design Shack archive! Use however you wish.</p>
    </div>

    <div class="clear"></div>

Учтите, что после div’ов навигации и заголовка, у нас идет div c классом «clear». Таким образом, сетчатая система 960 очищает предыдущие использованные плавающие элементы. Не забудьте использовать данный класс каждый раз, когда вам нужно создать новую ячейку с содержимым.

Этап 7: CSS-код заголовка

Далее нам нужно добавить немного стиля заголовку, тэгу заголовка H2, а также тэгу абзаца. Тэгу H2 мы задали размер шрифта в 50 пикселей, а сам шрифт – Lobster, а для тэга абзаца мы использовали шрифт Caviar Dreams размером в 25 пикселей.

#headline {
    margin-top:20px;
}

#headline h2 {
    font-family: 'Lobster13Regular', Helvetica, sans-serif;
    font-weight: normal;
    font-size: 50px;
    margin-bottom: 0;
}

#headline p {
    font-size: 25px;
    font-family: 'CaviarDreamsRegular', Helvetica, sans-serif;
}

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

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Этап 8: HTML-код для большой фотографии

<div id="headline" class="grid_12">
    <h2>Big Photo Template</h2>
    <p>This is a template from the Design Shack archive! Use however you wish.</p>
</div>

<div class="clear"></div>

<div id="contentBox" class="grid_12">
</div>

<div class="clear"></div>

Этап 9: CSS-код для большой фотографии

Мы использовали большое фоновое изображения для div’а, задали параметр толщины границы в 3 пикселя, а также применили эффект CSS3 – box-shadow. Белая граница, конечно же, не будет видна на белом фоне, так что тень придает ей немного глубины.

#contentBox {
    height: 350px;
    background-image: url(photo.jpg);
    margin-top: 0;
    -webkit-box-shadow: 2px 2px 5px #D4D4D4;
    -moz-box-shadow: 2px 2px 5px #D4D4D4;
    box-shadow: 2px 2px 5px #D4D4D4;
    border: 3px solid white;
}

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Этап 10: HTML-код для линии

Последнее, что нам нужно от кода HTML – это блоки и текст в нижней части страницы. Это мы реализуем посредством класса, что поможет нам без труда добавлять дополнительное содержимое по требованию.

Для создания этой секции нам нужны две колонки: одна для изображения и вторая для текста рядом с картинкой. Это именно тот момент, когда 960.gs значительно облегчает нашу задачу. Так как мы используем 12-колонную верстку, нам нужно, чтобы все эти 12 колонок растянулись по всему контейнеру.

Применяя класс «grid_4», следующий за классом «grid_8», у нас получается две колонки, одна из которых составляет всего половину ширины второй (8+4=12).

<div id="contentBox" class="grid_12">
    </div>

    <div class="clear"></div>

    <div class="lineItem grid_4">
        <img src="photo3.jpg" />
    </div>

    <div class="lineItemText grid_8">
        <h2>Line Item One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>

    <div class="clear"></div>

    <div class="lineItem grid_4">
        <img src="photo2.jpg" />
    </div>

    <div class="lineItemText grid_8">
        <h2>Line Item Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>

    <div class="clear"></div>

Учтите, что мы просто скопировали наш код и вставили разные картинки. Это дает нам две области «lineitem». Просто вставьте скопированный код еще раз, и вы получите третью и четвертую колонку.

Этап 11: CSS-код для Line Item

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

Учтите, что мы использовали «outline» вместо привычного нам «border». Этот трюк позволяет нам отобразить рамку изображения, которая не коверкает саму разметку.

.lineItem {
    margin-top: 50px;
    height: 140px;
    background-color: #ccc;
    -webkit-box-shadow: 3px 3px 5px #D4D4D4;
    -moz-box-shadow: 3px 3px 3px #D4D4D4;
    box-shadow: 3px 3px 5px #D4D4D4;
    outline: 3px solid white;
    overflow: hidden;
}

.lineItemText {
    margin-top: 70px;
    color: #494949;
}

.lineItemText h2 {
    font-family: 'Lobster13Regular', Helvetica, sans-serif;
    font-weight: normal;
    font-size: 30px;
    margin-bottom: 0;
}

.lineItemText p {
    font-size: 19px;
    font-family: 'CaviarDreamsRegular', Helvetica, sans-serif;
}

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

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

Этап 12: CSS-код для подвала

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

#footer {
    margin-top: 100px;
    height: 30px;
    background-color: #494949;
}

Результат

Теперь у вас есть готовый продукт! Заметьте, что большая часть нашего труда заключалась в стилизации уже готовых объектов на странице. Никакой суеты по поводу позиционирования. Это именно то, к чему стремятся такие сервисы, как 960.GS или Blueprint.

Бесплатный CSS-шаблон на тему фотографии от 960.GS и обучение

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

Вывод

В наше время вряд ли можно избежать данных постов на сайтах, посвященных веб-дизайну, и всегда найдутся люди, которые будут критиковать сетчатые системы разработки разметки в комментариях. Многие вообще не пользуются ими, многие просто очень редко, но наверняка каждый ценит их, а некоторые, вполне вероятно, на данный момент очень благодарны данным системам за их опыт в разработке разметки. Кстати, если вы против сетчатых систем и против 960.gs, то можете просто не скачивать шаблон!

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

Ключевые тэги: шаблоны сайтов, CSS шаблоны
Опубликовал Mysterious Master   Прочитано (раз): 15591   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 марта 2012 @ 18:22
Написал: ProGGer — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
+ !) побольше бы подобного...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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







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