Верстка сайта css html – Курс HTML и CSS создания сайтов с нуля — Обучение программированию и HTML верстки онлайн с интерактивными заданиями на FructCode

табличная, кроссбраузерная, адаптивная. Основные принципы

От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

Свойств на самом деле не так уж и много, поэтому CSS можно назвать достаточно простой веб-технологией, которую можно без труда изучить. Другое дело, что технологии имеют особенность постоянно двигаться вперед, особенно технологии в области сайтостроения.

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

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

Кроссбраузерная верстка. Как css может в этом помочь

А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.

В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:

*{ padding: 0; margin: 0; } ul{ list-style: none; }

*{ padding: 0; margin: 0; } ul{ list-style: none; }

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

Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Адаптивная верстка в css

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

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

Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:

@media and only screen (max-width: 600px){ img{ float: none; } }

@media and only screen (max-width: 600px){ img{ float: none; } }

Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

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

Какой редактор использовать для работы с css?

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

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML верстка сайтов – как она делается и что надо уметь

От автора: HTML и CSS являются простейшими веб-технологиями, с помощью которых можно создать свой сайт. Давайте в этой статье подробнее рассмотрим, какие сайты можно сделать с их помощью.

Простой путь к созданию шаблона – плюсы и минусы

Чистая HTML верстка сайтов сильно отличается от того кода, который вы увидите, например, в php-шаблонах какой-нибудь CMS. Все потому, что страницы, созданные с помощью html, являются статическими. Что это означает? Опишу подробнее.

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

Если вы не хотите ставить свой сайт на CMS, то придется поначалу обходиться возможностями html. Это означает, что вам потребуется 50 html-документов, чтобы хранить всю информацию сайта. Удобно? Не совсем. А если вам придется делать какие-то правки в дизайн, то придется делать их на всех страницах.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Рис. 1. Так бы выглядела структура сайта, если бы он был на чистом HTML. Просто куча страниц.

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

Вне зависимости от того, будете ли вы использовать CMS или нет, мы приходим к одному выводу. Без html и css нельзя представить себе веб-разработку. Это те основы, с которых необходимо начать. Без их хотя бы поверхностного изучения нет смысла изучать что-то другое. Потому что, “то другое” гораздо сложнее этих основ.

Что нужно уметь для верстки

Верстка сайта выполняется из psd в html. PSD – это специальный графический формат, с которым работают дизайнеры. Они те, кто начинают разработку сайта. Они рисуют его. Как правило, это происходит в программе Adobe Photoshop. Верстальщикам тоже нужно уметь работать с этой программой (или с его бесплатным аналогом — GIMP), но от них требуется намного меньше квалификации.

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

Такими языками как раз и являются html и css. С помощью первого задается базовая структура сайта, его отдельные элементы. Второй этап представляет собой работу с CSS. Верстка сайта невозможна без стилизации элементов, за что и отвечает этот язык.

Это можно сравнить с работой художника. Сначала он делает набросок карандашом, а уже потом разукрашивает все. PSD-макеты можно бесплатно скачать в интернете. Также вы можете попробовать верстать без него, просто на ходу придумывая структуру и оформление. Для тренировки и учебы так тоже годится, хотя едва ли на выходе вы получите что-то красивое.

Соответственно, можно определить обязательные навыки, которыми обязательно должен владеть верстальщик:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Базовые умения работы с макетом (на уровне склейки, вырезания слоев)

Отличные знания html и css, желательно последних версий (или хотя бы умение посмотреть в справочнике, что какой тег означает).

Способность применять эти знания на практике, то есть при написании кода. Пример: не просто знать, что div – это блочный элемент, но и разбираться в его поведении при прописывании различных свойств.

Владение основными инструментами для проверки верстки и доведения ее до окончательного вида

Умение работать в программе, в которой выполняется работа (не в блокноте же писать, в самом деле).

Знание JavaScript, чтобы реализовать также поведение веб-страниц (это мы не будем пока рассматривать).

Итак, вот это основные навыки, которыми должен владеть человек, желающий самостоятельно сделать html-верстку макета сайта.

Если вы не собираетесь работать верстальщиком, а вам просто нужно попробовать сделать свой первый шаблон, то уже через неделю изучения можно пробовать свои силы. Очень хороший справочник можно найти на htmlbook.ru. Можете обращаться к нему время от времени.

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

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

Готовые шаблоны в интернете

В конце концов, сегодня можно найти много готовых шаблонов, которые бесплатно выложены в сети. Вбив в поисковик что-то в духе “шаблоны html” я сразу нашел как минимум 3 сайта, на которых были сотни готовых работ. Можно использовать их как есть, а можно переделать на свой лад. Это полностью готовая верстка сайта на html и css.

Рис. 2. Готовые шаблоны html

Главное сообщение, которое я хотел передать в этой статье, заключается в следующем: если вы хотите изучать веб-технологии, то начинать нужно именно с html и css. А чтобы достичь результата как можно быстрее, учитесь только там, где преподают качественно. Человек, который берет знания с хорошего источника, может достичь результата намного быстрее того, кто берет из плохого.

Подписывайтесь на наш блог – берите знания из хорошего источника!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как сверстать шаблона сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

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

Подготовка

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

Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

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

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

* {
 margin: 0;
 padding: 0;
}

body {
 width: 100%;
 height: 100%;
 color:#333;
 background: #fff;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;

}

aside, nav, footer, header, section { display: block; }

ul {
 list-style:none;
}

a {
 text-decoration:none;
}

a:hover {
 text-decoration: none;
}

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

Это так сказать стандартные стили, их можно изменять по собственному желанию.

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

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

/* Верхнее правое меню */

.topMenuRight {
 height:57px;
 position:absolute;
 left:0px;
 top:0px;
 border: 0px solid #1FA2E1;
 }

.topMenuRight ul li {
 background: url(images/line.png) 0px 0px no-repeat;
 float:left;
 height: 57px;
 }

.topMenuRight ul {
 padding-left:0px;
 }

.topMenuRight ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:16px 20px 21px 20px;
 }

.topMenuRight ul li a:hover{
 background: #fff;
 color:#555;
 }

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

<div>

<a href="#" title="Следить в Twitter!" target="_blank"></a>
<a href="#" title="Подписаться на rss" target="_blank"></a>
<a href="#" title="Подписаться по e-mail" target="_blank"></a>

</div>

А в стили CSS нужно добавить вот это:

.share-new {
 z-index: 1;
 position:absolute;
 right:0px;
 top:14px;
 }
 .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }

 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 3px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

Вот результат:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

<div>
<a href="#"><img src="images/logo.png" alt="Блог" /></a>
</div>

А вот и стили:

/*----------------------------
 Логотип
------------------------------*/

.logo {
 position:absolute;
 left:0px;
 top:90px;
 }

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

<!-- Начало #bottomMenu -->
 <nav>
<ul>

 <li><a href="#">Категория</a>
 <ul>
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>

 </ul>
 </nav><!-- конец #bottomMenu -->

Но не будем спешить добавлять стили, сначала нужно вырезать фон из макета PSD.

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

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

Ну а сейчас можно смело добавлять CSS:

.bottomMenu {
 width:1200px;
 height: 70px;
 position:absolute;
 left:0px;
 bottom:0px;
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }

#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }

#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;

 }

#dropdown_nav li a {

 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }

/* Выпадающее меню */
 #dropdown_nav .sub_nav {
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }

#dropdown_nav .sub_nav li {

 width:180px;
 padding:0px;
 }

#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;

 }
 #dropdown_nav .sub_nav li a:hover {
 background:#222;
 color:#0dbfe5;
 }

Результат:

Блок «Последние записи»

Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:

<div>

<h3>Последние записи</h3>

</div>

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<!-- Начало .postBox -->
<article>

<div><a href="#"><img src="images/tumb.png"/></a></div>

<h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3>

<div>
Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a>
</div>

<div>

<p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p>
</div>

<div><a href="#">Далее</a></div>

</article>
<!-- Конец .postBox -->

<div></div>

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

И конечно же не забываем про CSS для постов:

.raz {
 margin:0 auto;
 border:0px solid #333;
 background: #fff;
 width:116px;
 height:29px;
 margin-bottom:50px;
 background: url(images/raz.png) 0px 0px no-repeat;
 }

.postBox {
 border:0px solid #333;
 background: #fff;
 width:700px;
 margin-top:0px;
 margin-left:0px;
 margin-bottom:50px;
 }

.postBox h3 a {
 font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-style:normal;
 font-weight:100;
 font-size:33px;
 line-height:35px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.postBox h3 a:hover {
 color:#0dbfe5;
 }

.postBox .textPreview {
 border:0px solid #333;
 width:800px;
 margin-bottom:30px;
}

.postBox .textPreview p{
 margin-top:0;
 }

.postBox .postThumb{
 margin:0px 0px 15px 0;
 }

.postBox .postMeta {
 padding-bottom:15px;
 clear:left;
 overflow:hidden;
}

.more-link a {
 border-radius: 3px;
 background: #0dbfe5;
 margin-top:30px;
 font-weight:600;
 color:#fff;
 font-size:17px;
 padding:6px 25px 9px 25px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.more-link a:hover {
 background:#000;
 color:#0dbfe5;
 }

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

Правая часть (Сайдбар)

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<form method="get" action="/search" target="_blank">
<input name="q" value="" placeholder="Поиск...">
<input type=submit value="">
</form>

И стили для поиска:

#form-query {
 position:relative;
 background:#eeeeee;
 border:0px solid #e4e4e4;
 width:335px;
 height:31px;
 padding:8px 10px 7px;
 font-weight:100;
 font-size:18px;
 color:#000;
 margin-bottom: 30px;
}

#form-querysub {
 position:absolute;
 right:15px;
 top:15px;
 width:17px;
 height:17px;
 background:url(images/search.png) 0px 0px no-repeat;
 border:0px dashed #333;
 }

#form-querysub:hover {
 cursor: pointer;
}

Виджет

После кода поиска вставляем:

<div>

<h3>Виджет 2</h3>
<ul>

<li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li>

 <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li>

 <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li>
 <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li>
 <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li>
 <li><a href="#" title="Примеры идеального сочетания цветов в веб &#8211; дизайне">Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li>
 <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li>
 <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li>
 <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li>
 <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li>
 </ul>

</div>

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h3img и сохранить в папке images нашего шаблона.

CSS код виджетов:

.rightBox {
 margin-top:0px;
 margin-left:0px;
 width:330px;
 margin-bottom:30px;
 }

.rightBox h3 {
 width:335px;
 background:#f7f7f7 url(images/h3img.png) 320px 14px no-repeat;
 font-size:18px;
 font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
 color:#333;
 display:block;
 padding:10px 0 15px 20px;
}

.rightBox ul li{
 width:350px;
 padding:10px 0px;
 border-bottom:1px solid #f6f6f6;
 font-size:14px;
 line-height: 16px;
 }

.rightBox a {
 color:#333;
 }

.rightBox a:hover {
 color: #0dbfe5;
 }

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<div>
<a href="#"><img src="images/logo.png" alt="Блог" /></a>
</div>

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

CSS

#footer {
 margin-top:50px;
 height:100px;
 width:100%px;
 background: #0dbfe5;
 }

#footerInner {
 position:relative;
 border:0px solid #000;
 width:1200px;
 margin:0 auto;
 height:100px;
 }

#footerlogo {
 position:absolute;
 left:0px;
 top:25px;
 }

.footernav {
 position:absolute;
 right:0px;
 top:35px;
 }

.footernav ul li {
 float:left;
 }

.footernav ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:0px 0px 0px 25px;
 }

.footernav ul li a:hover{
 color:#333;
 }

В конечном итоге получаем вот такой шаблон:

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

В общем если у Вас будут вопросы спрашивайте в комментариях.

До скорых встреч.

Этапы верстки сайта – верстка пошагово

От автора: у вас есть макет сайта и вам нужно распланировать дальнейшую работу. На какие этапы делится верстка сайта? Попробуем ответить на этот вопрос в сегодняшней статье. Она ориентирована на новичков.

Работа головой

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

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

Работа с макетом

Значит, посмотрели на макет, осмыслили суть. Теперь нужно вырезать из него все необходимое, что может пригодиться: иконки, картинки и прочую графику. Неплохо будет также записать шрифты, которые используются в макете. Для работы нужно использовать PhotoShop или GIMP. Именно эти редакторы поддерживают работу со слоями.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Рис. 1. Работа с макетом.

Верстка

Для начала вам нужно создать два файла: html и css. В одном у вас будет содержание и разметка, в другом – стили. Очевидно, что верстать будет легче, если придерживаться порядка. Например, начать с прописывания базовых вещей в теге head. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.

Далее начинается работа с непосредственным содержимым. Это все, что будет находится в теге

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

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

Сначала верстальщик пишет структуру в html. Заодно он сразу вешает элементам классы и идентификаторы, чтобы позднее стилизовать их в css. Нормальный верстальщик должен придумывать адекватные имена классов. Например, menu, head, widget и т.п. Чтобы было понятно, что это за элемент.

Например, когда я только начинал, мой код наверняка мог рассмешить любого. В нем присутствовали такие имена классов, как: verh_sayta, konec и bok. Конечно, это лучше, чем block1, block3, block459, но выглядит как-то непрофессионально и не совсем понятно, о каком именно элементе речь.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Стилизация

Структура написана, идентификаторы и классы заданы. А это означает, что можно начинать использовать CSS. Я бы даже сказал, что необязательно полностью прописывать структуру и только после этого трогать стили. Можно и даже нужно работать параллельно. В какой-то момент вы полностью закончите структуру и полностью сосредоточитесь на стилях. (а может и нет, все зависит от того, насколько правильно получится все написать изначально).

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

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

Стилизация тоже должна выполняться по порядку. Сначала нужно прописать какие-то общие правила. Например, общий фон странички, базовый шрифт. Не забывайте сбрасывать отступы.

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

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

Скрипты

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

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

Проверка

Допустим, ваша верстка готова. Осталось проверить ее. Естественно, с первого раза невозможно все сделать, поэтому наверняка вы еще не раз откроете файлы для редактирования. Стоит проверить верстку во всех браузерах, которые у вас есть. Можно использовать онлайн-сервисы. Также полезно будет воспользоваться инструментами для проверки, которые предлагаются в этой статье.

Рис. 2. Проверка верстки в валидаторе от W3C.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть