Основы CSS и HTML. Блочная верстка

02.02.2024

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

Что-то типа такого:

Рис. 1 Четыре блока с закруглёнными углами и тенью.

Можно вот так:

Или даже так:

В общем-то, вариантов разбивки очень много. Думаю, что разобрав эти 4, Вы уже сами дальше сможете комбинировать блоки.

Итак смотрим код варианта показанного на Рис. 1.

Документ без названия

#glaw {
margin :auto ;
width :880px ;
}
.blok1, .blok2, .blok3, .blok4 {
float :left ;
margin :3px 3px 3px 5px ;
width :200px ;
height :200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px ;

}

Добрый день!
src ="http://сайт/wp-content/uploads/2013/03/i-5.jpg "
align ="left " width ="50 " height ="80 " />

Всем привет! Желаю творческих успехов

Блок 2
Блок 3
Блок 4

Что здесь можно подкорректировать?

Во первых — это конечно width и height (ширина и высота) блоков.

Во вторых, можно изменить цвет блоков background , изменить радиус углов border-radius , и можно придать блокам тень box-shadow .

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

Чтобы сделать вариант Рис. 2, нужно просто весь селектор блоков повторить ещё раз, и добавить дивы в тело тега body.

Документ без названия

#glaw {
display :inline ;
width :880px ;
}

float :left ;
margin :3px 3px 3px 5px ;
background : #F0FCE8 ;
width :200px ;
height :200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px ;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
}
.blok5, .blok6, .blok7, .blok8 {
float :left ;
margin :3px 3px 3px 3px ;
background : #F0FCE8 ;
width :200px ;
height :200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
}

Как разбить страницу на отдельные блоки

Добрый день!
alignright size-full wp-image-533 "
src =""
align ="left " width ="50 " height ="80 " />

Всем привет! Желаю творческих успехов!

Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
Блок 7
Блок 8

Точно таким образом можно нашлёпать таких блоков хоть сотню. Менять можно число блоков в строке и их размер.

Вариант Рис. 3 делается немного по другому. Блоки не собираются в один селектор, а прописываются друг за другом.

Документ без названия

#glaw {
display :inline ;
width :880px ;
}
.blok1, .blok2, .blok3, .blok4 {
border-radius : 4px;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
}
.blok1 {
margin :6px 3px 3px 3px ;
background : #F0FCE8 ;
width :400px ;
height :150px ;
padding : 5px ;
text-align : center ;
}
.blok2 {
margin :6px 3px 3px 3px ;
background : #F0FCE8 ;
width :400px ;
height :150px ;
padding : 5px ;
text-align : center ;
}
.blok3 {
margin :6px 3px 3px 3px ;
background : #F0FCE8 ;
width :400px ;
height :150px ;
padding : 5px ;
text-align : center ;
}
.blok4 {
float :left ;
margin-top :-495px ;
margin-left :420px ;
background : #F0FCE8 ;
width :250px ;
height :480px ;
padding : 5px ;
text-align : center ;
}

Добрый день!
alignright size-full wp-image-533 "
src ="https://сайт/wp-content/uploads/2013/03/i-5.jpg "
align ="left " width ="50 " height ="80 " />

Всем привет! желаю творческих успехов!

Блок 2
Блок 3
Блок 4

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

Можно убрать из группового селектора все свойства border-radius и box-shadow, а вместо них прописать рамку:

border :2px solid #E0251B ;

Тогда страница приобретёт такой вид:

Вариант Рис. 4:

Документ без названия

#wrapper {
background :#cd7f32 ;
width : 900px ;
height : 600px ;
margin : auto ;
position : relative ;
}
div {
background : #f5f5dc ;
width : 200px ;
height : 150px ;
padding : 20px ;
}
.one, .two, .three, .four {
position : absolute ;
border-radius : 5px ;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
}
.one {
top : 50px ;
left : 60px ;
z-index : 10 ;
}
.two {
top : 50px ;
left : 180px ;
z-index : 100 ;
}
.three {
top : 100px ;
left : 380px ;
z-index : 150 ;
}
.four {
top : 150px ;
left : 580px ;
z-index : 300 ;
}

Как видите, размещать блоки можно и по оси Z. И такой метод предоставляет большие возможности для дизайна.

Представьте, что вместо блоков У Вас изображения. Убрав у них тень, можно одно изображение накладывать на другое (блоки у меня ведь накладываются друг на друга), и таким образом создать оригинальную картинку.

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

На этом блоге установлена стандартная, идущая в WordPress по умолчанию, тема — TwentyTen.

А сделаем мы примерно вот так: (Это не картинка. Это html + css)

Количество блоков в строке, а так-же их размер — на Ваше усмотрение.

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

Блок 1

Блок 2

Блок 3

Блок 4

Блок 5

Блок 6

После того как все размеры, отступы, и оформление подогнаны, нужно перенести все стили в файл style.css шаблона.

Для этого в имеющихся блочных элементах (в нашем случае это div и p , вместо атрибута style , с значениями, прописываем class , с произвольным названием.

class ="okno "

Потом идём в файл style.css шаблона, и вписываем этот класс.

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

В тексте остаётся только такой html код:

Блок 1

Блок 2

Блок 3

Блок 4

Блок 5

Блок 6

А в файле style.css — такой:

Okno {
display: inline;
width: 600px;
}

Okno1 {
float: left;
font-family: Verdana;
padding: 10px;
font-size: 14px;
margin: 3px 3px 3px 5px;
width: 170px;
height: 200px;
border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
}

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

Но это уже зависит от особенностей темы.

Желаю творческих успехов.

Классный руководитель:
— Ну, как вы трудились дома?
— Дома я трудился над тарелкой с пирожками, а потом над компотом.

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

left - элемент страницы принудительно выравнивается по левому краю;
right - элемент страницы принудительно выравнивается по правому краю;
none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

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

left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;
right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;
both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;
none - ограничений на положение блока относительно перемещаемых блоков не накладывается.

Для иллюстрации работы свойств float и clear , а также для ознакомления с основами, как осуществляется верстка блоками DIV , рассмотрим следующий пример: создадим три блока DIV

1
2
text
text
3
текст

В браузере отобразиться этот HTML-код следующим образом

2
text
text

Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV .

1
2
text
text
3
текст

Отобразится в браузере этот код следующим образом

2
text
text

Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left :

1
2
text
text
3
текст

Получим следующее представление

2
text
text

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

1
2
text
text
3
текст
4
контент
контент
контент

Но в нашем случае он отобразится следующим образом

2
text
text

4
контент
контент
контент

Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear , с соответствующим значением, в нашем случае можно задать значение либо both , либо left :

1
2
text
text
3
текст
4
контент
контент
контент

Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)

2
text
text

4
контент
контент
контент

С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto , например

содержимое блока DIV

Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV , в котором будет стилевое свойство text-align со значением center . Например

Содержимое блока DIV

То есть в браузере IE6 можно управлять положением блока DIV свойством text-align , используя значения left , center , right . В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin .
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах

Содержимое блока DIV

Верстка блоками DIV не обходится без управления положением HTML-элементов с помощью стилевого свойства position , которое определяет схему позиционирования блока. Свойство position может принимать значения

static - задает обычный блок, который не позиционируется индивидуально, а позиционируется в обычном потоке. Свойства top , left , bottom и right не учитываются. Является значением по умолчанию;
relative - задает относительное позиционирование блока. Заключается в следующем. Сначала положение блока рассчитывается как при обычном потоке (то есть не берется во внимание относительное позиционирование). Затем блок смещается относительно своего нормального положения в соответствии со значениями свойств top , left , bottom и right . Последующее содержимое выводится в поток так, как будто блок, относительно позиционированный, не был смещен;
absolute - задает абсолютное позиционирование блока. Абсолютно позиционируемые блоки изымаются из общего потока и не влияют на выводимое последующее содержимое. Положение абсолютно позиционируемого блока задается свойствами top , left , bottom и right относительно родительского элемента (блока);
fixed - задает фиксированное позиционирование блока. При фиксированном позиционировании положение блока рассчитывается, как и при абсолютном позиционировании, но в дальнейшем блок фиксируется и относительно окна браузера и не прокручивается вместе с остальным содержимым страницы. Данное свойство поддерживается браузерами Opera и Firefox.

Для задания положения блоков, у которых свойство position имеет значение relative , absolute или fixed , используются свойства top , left , bottom и right . Познакомимся с ними.

top - задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
left - задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
bottom - задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;
right - задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.

Задавать величины перечисленных выше свойств можно в абсолютных значениях (например, пиксели), в процентных величинах относительно размеров родительского элемента, и также могут принимать значение auto (является значением по умолчанию).
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index . Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.

1
text

2
текст

3
содержимое

Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования

1
text

2
текст

3
содержимое

Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере

1
text

2
текст

3
содержимое

В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице .

Шаблон верстки страницы из 3 колонок

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }

#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }

#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }

#min_width { width:800px; }

#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }

Заголовок страницы

Центральная колонка

Левая колонка

Правая колонка

Копирайт

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

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

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

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

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

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

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют именно в направлении полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам .

В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега , к которому применяется стилевое оформление.

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

Разделение содержимого и оформления

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

Активное применение тега

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

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу , с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег или .

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

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

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

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

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать ).

Получится примерно такой вариант.

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

И напоследок… качаем видео уроки

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

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

Html — уроки для начинающих .

Css — уроки для начинающих .

Бесплатный мини-курс по вёрстке сайта .

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

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

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов Первым шагом давайте создадим простую структуру файлов для наших файлов.

Создаем папку с названием нашего проекта, например Whitesquare.
В ней создаем пустой файл index.html.
В папке проекта создаем папку css с пустым файлом styles.css.
В папке проекта создаем пустую папку images.

Предварительный осмотр После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

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

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

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

Сохраним логотипы следующим образом:
/images/logo.svg?1
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org . В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

Body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background-color: #f8f8f8; border-top: 5px solid #7e7e7e; margin: 0; } input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: "Oswald", sans-serif; } p { margin: 20px 0; }

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Whitesquare

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

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

Макет В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

… GO

И стили выравнивания по правому краю для нее:

Form { float: right; }

Меню

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

Nav a { text-decoration: none; } nav ul { margin: 0; padding: 0; } nav li { list-style-position: inside; font: 14px "Oswald", sans-serif; padding: 10px; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; } .top-menu li.active { background: #29c5e6; color: #fff; } .top-menu a { color: #b2b2b2; }

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

ABOUT US

Заголовок имеет следующие стили:

#heading { background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; } h1 { display: inline-block; color: #7e7e7e; font: 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; }

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Aside { float: left; width: 250px; } section { margin-left: 280px; padding-bottom: 50px; }

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

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

Aside-menu li { font-weight: 300; list-style-type: square; border-top: 1px solid #e7e7e7; } .aside-menu li:first-child { border: none; } .aside-menu li.active { color: #29c5e6; } .aside-menu a { color: #8f8f8f; }

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

Контент сайдбара В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

OUR OFFICES

В стилях укажем шрифты, цвета и отступы:

Aside > h2 { background: #29c5e6; font: 14px "Oswald", sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; } aside > p { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0; }

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

Цитата Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”

John Doe, Lorem Ipsum

И применим для него стили:

Blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: "Oswald", sans-serif; font-weight: 300; } blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; }

Здесь нет ничего нового, так же - шрифты, фоны и отступы.

Контент

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

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

Которому зададим следующие стили:

Figure { display: inline-block; margin: 0; font-family: "Oswald", sans-serif; font-weight: 300; } figure img { display: block; border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure figcaption span { display: block; font-size: 14px; color: #29c5e6; } section > figure + figure { margin-left: 28px; }

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

OUR TEAM

Со стилем:

Section > h2 { background: #29c5e6; font: 30px "Oswald", sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; }

А затем два блока-строки с карточками сотрудников

John Doeceo Saundra Pittsleyteam leader … Ericka Nobrigaart director Cody Roussellesenior ui designer …

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

Figure figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } figure div { font-size: 14px; color: #29c5e6; } .team-row figure { margin-top: 20px; } .team-row figure + figure { margin-left: 43px; }

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

Футер Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; } #footer { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; }

Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера Верстаем содержимое ленты Твиттера:

TWITTER FEED 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Footer h3 { font: 14px "Oswald", sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; } #twitter time a { color: #b4aeae; } footer p { margin: 5px 0; } #twitter { float: left; width: 300px; } #twitter p { padding-right: 15px; }

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

Карта сайта Карта сайта представляет собой два блока со ссылками:

SITEMAP Home About Services Partners Support Contact

Footer a { color: #dbdbdb; } #sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } #sitemap div { display: inline-block; } #sitemap div + div { margin-left: 40px; } #sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } #sitemap a:hover { text-decoration: underline; }

Социальные ссылки

Вставляем набор ссылок в контейнер

SOCIAL NETWORKS

И стилизуем их:

#social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; }

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт