Блочная верстка html


Как создать свой сайт? Уроки HTML и CSS

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега <div>. Страницы, сверстанные с помощью блочной верстки, значительно меньше весят по сравнению с табличной версткой.

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

 Блочная верстка html

Рис. 1 

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.


Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

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

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Блочная верстка html

Рис. 2

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.


Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

Задание 1

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку: <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

DOCTYPE

Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html>, просто не будет прочитана, потому как стандарты становятся жестче.

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает. 

4. Одной строкой между тегами <head> и </ head > присоедините документ mystyle.css к документу HTML (рисунок 3).


Блочная верстка html

Рисунок 3

5. В таблице стилей наберите код как на рисунке 4.

Блочная верстка html

Рисунок 4

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз. 

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

Блочная верстка html

Рисунок 5

7. Добавим HTML документ следующий код между тегами body (рисунок 6). 

Блочная верстка html

Рисунок 6

И у Вас должно получиться следующее (рис. 7).

Блочная верстка html

Рисунок 7 

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

8. Откройте css-документ и добавьте следующий код (рисунок 8). 


Блочная верстка html

Рисунок 8 

Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div id=”main” HTML-документа один только раз! Элемент clear содержит точку, которая идентифицирует его как class, может использоваться многократно, что и является различием между этими элементами. Теперь отразим все это в нашем HTML-документе.

9. Сразу после закрывающегося тега <div id=»TOP«></div> вставим следующий код (рисунок 9). 

Блочная верстка html

Рисунок 9 

10. Откройте HTML-документ в браузере. Должно получиться следующее (рисунок 10).

Блочная верстка html

Рисунок 10

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать следующее (рисунок 11).

Блочная верстка html

Рисунок 11

Задание 2

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

  1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

Блочная верстка html

Рисунок 12

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13. 

Блочная верстка html

Рисунок 13

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14).  Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Блочная верстка html

Рисунок 14

 

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

Блочная верстка html

Рисунок 15

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.


Блочная верстка html

Рисунок 16

Контрольное задание

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

Блочная верстка html

Рисунок 17 

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

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

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

Блочная верстка html

Рисунок 18 

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

Блочная верстка html

Рисунок 19 

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Блочная верстка html

Рисунок 20 

4. Комбинированная блочная верстка

Комбинированная блочная верстка включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.


Блочная верстка html

Рисунок 21

1. Создайте HTML-документ с кодом, как на рисунке 22.

Блочная верстка html

Рисунок 22

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ.  Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Блочная верстка html

Рисунок 23 

Контрольное задание

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24.  Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

  • В HTML-коде не должно быть локального форматирования элементов, все оформление должно быть сделано через внешнюю таблицу стилей;
  • При наведении на ссылку «Проекты таунхаусов и блокированных домов» гиперссылка должна менять цвет (рис. 24);
  • При нажатии на гиперссылку «Проекты таунхаусов и блокированных домов» должна загружаться страница о проектах, внешний вид которой изображен на рис. 25.
  • При нажатии на логотип должна загружаться главная страница сайта (рис. 24).

Блочная верстка html

Рис. 24

Блочная верстка html

Рис. 25

 

 

web-grafika.pro

Жесткая HTML CSS верстка блоками

Пример блочной верстки сайта:

<html>
<head>
<title>Пример блочной верстки</title>
<style type="text/css">
div#block {width:600px; margin:0 auto; background-color:#dddddd}
div.header {width:600px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9}
div.right_col {width:450px; float:left}
div.footer {width:600px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2 align="center">CSS верстка сайта</h2>
<h4 align="center">Жесткая верстка блоками</h4>
</div>
<div class="footer"><p>© 2010</p></div>
</div>
</body>
</html>

Результат: жесткая блочная верстка с помощью CSS

Атрибуты и значения

  • background-color: – определяет цвет фона.
  • margin:0 auto – определяет центрирование блока.
  • width: – определяет ширину в пикселях или в процентах.
  • height: – определяет высоту.
  • float:left – определяет обтекание слева.
  • border-right: – определяет свойства правой границы.
  • clear:both – отменяет обтекание с обеих сторон.

Обратите внимание на пунктирную границу левой колонки, которая почему-то не доходит до низа. Подобные ньюансы легко устраняются с помощью атрицательного значения атрибута margin. Например, margin-bottom:-15px обрежет лишнее (смотрите следующий пример).

Жесткая HTML CSS верстка блоками в три колонки

Пример жесткой блочной верстки сайта в три колонки:


<html>
<head>
<title>Пример жесткой блочной верстки сайта в три колонки</title>
<style type="text/css">
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.center_col {width:450px; float:left}
div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайта</h2>
<h4 align="center">Жесткая верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Ссылки</p></div>
<div class="footer"><p>© 2010</p></div>
</div>
</body>
</html>

Результат: жесткая блочная верстка в три колонки с помощью CSS

Блочная верстка предпочтительнее табличной верстки. предоставляет больше возможностей для форматирования и дизайна. требует умения работать с атрибутами margin, padding, float, clear.

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

Резиновая HTML CSS верстка блоками

Пример резиновой верстки сайта с помощь блоков:

<html>
<head>
<title>Пример резиновой верстки сайта с помощь блоков</title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}
div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
</body>
</html>

Результат: резиновая блочная верстка сайта с помощью CSS

Мы видим, что правая колонка сползла вниз ⇒ добавим к селектору div.right_col параметр margin-top:-20px.

Результат: резиновая HTML & CSS верстка

Атрибуты и значения

  • padding-left: – определяет внутренний отступ слева.
  • margin-top: – определяет внешний отступ сверху.
  • margin-left: – определяет внешний отступ слева.
  • min-width: – определяет минимальную ширину.
  • max-width: – определяет максимальную ширину.

Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width.

Обратите внимание на значение padding, на ширину пунктирной границы, на размеры.

Резиновая + жесткая HTML CSS верстка блоками

Пример блочной CSS верстки сайта:

<html>
<head>
<title>Пример блочной CSS верстки сайта</title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
<div class="footer"><p>© 2010</p></div>
</body>
</html>

Результат: резиновая + жесткая блочная верстка с помощью CSS

Поместим левую и правую колонку в контейнер <div id="block"> </div>. Отцентрируем его с помощью margin:0 auto. Уберем пространство внизу блока параметром margin-bottom:-16px.

<html>
<head>
<title>Пример блочной CSS верстки</title>
<style type="text/css">
#block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px}
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div id="block">
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
</div>
<div class="footer"><p>© 2010</p></div>
</body>
</html>

Результат: резиновая + жесткая блочная верстка с помощью CSS

Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру <div id="block"> </div> была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей.

Оказывается не так все и сложно. Идем дальше…

Пример жесткой CSS верстки сайта с помощью таблицы:

<head>
<title>Пример жесткой CSS верстки с помощью таблицы</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© 2010</td>
</tr>
</table>
</body>

Результат: жесткая табличная верстка с помощью CSS

vertical-align выравнивает содержимое ячейки по верху, применяется только для ячеек.

Резиновая HTML CSS верстка таблицами

Пример резиновой CSS верстки сайта с помощью таблицы:

<head>
<title>Пример резиновой CSS верстки с помощью таблицы</title>
<style type="text/css">
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; 2010</td>
</tr>
</table>
</body>

Результат: резиновая табличная верстка с помощью CSS

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

ab-w.net

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

Блочная верстка html

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

Блочная верстка html

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

Блочная верстка html

Далее врисовывалось основное меню для перехода по категориям.

Блочная верстка html

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Блочная верстка html

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

Блочная верстка html

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

Блочная верстка html

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.

Блочная верстка html

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

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

Блочная верстка html

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

Блочная верстка html

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

Блочная верстка html

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

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

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

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

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

Блочная верстка html

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

Блочная верстка html

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

Блочная верстка html

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

Блочная верстка html

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

Блочная верстка html

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

Блочная верстка html

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

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

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

Блочная верстка html

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

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

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

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

start-luck.ru

 

 

У нас имеются следующие селекторы:

 

Свойства и возможные значения CSS:

 

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.


font-family

— это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size — размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

 

margin — определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх — право- низ — лево. Поскольку верх — низ, право — лево у нас совпадают, то дублировать их нет потребности.

 

width — ширина блока.

 

height — высота.

 

float — свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

 

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

 

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

www.web-lesson.ru

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

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

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

<div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

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

Теперь добавим файл CSS, код которого приведён ниже.

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

www.seostop.ru

Блочная верстка с <div>

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

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

Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар — это зачастую не что иное, как блок div, содержащий в себе такие же блоки и/или другие HTML-элементы.

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header, а для футера — класс .footer.

Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример — тег длинной цитаты <blockquote>. Согласитесь, нет смысла использовать вместо него <div>, ведь <blockquote> прекрасно справится со своей задачей. Кроме того, это решение будет более правильным с точки зрения семантики.

Блочная верстка с HTML5

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

Например, шапка сайта может помещаться в HTML5-тег <header>, а подвал — в похожий тег <footer>. Кроме того, существует еще множество других семантических тегов — <nav>, <section>, <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам <div>.

idg.net.ua

Верстка сайта – ремесло для посвященных

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

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

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

  • Отделение стиля элементов от кода html;
  • Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
  • Лучшая индексация поисковиками;
  • Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
  • Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Как происходит блочная верстка?

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки (слои). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

Полный код примера index.html:

Содержимое файла style.css:

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

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

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

Свое роднее!

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

www.internet-technologies.ru

Отлично, мы уже с Вами знаем что такое блочная верстка, как пользоваться фотошопом во время верстки, создали базовые элементы для дальнейшей верстки. Теперь же давайте перейдем непосредственно к html разметки нашей веб-страницы. Откройте файл, созданный нами во 2 уроке, а также Psd шаблон сайта в фотошопе и нажмите TAB. Отлично, поехали ;)

Определимся сразу.Есть два варианта верстки. Пишем html разметку и тут же наводим красоту через каскадные таблицы стилей, и второй: пишем html разметку всю, а затем наводим красоту с помощью css файла. Я приверженец второго стиля написания, потому как: 1 – видно всю картину, так как позиционировать и настраивать с помощью css проще когда видишь картинку целиком, 2 – разделение крупы и молока:) не будем все мешать разберемся куче кода

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

Вспомним как мы разделили наш шаблон на функциональные зоны: header, content, sidebar и footer. Но надо понимать, что это не единственные блоки в коде. Давайте зададим оболочку, которой мы дадим рамку и верхний фон (картинка размером 1*26), также данная оболочка будет выставлять наш сайт по центру. Добавим между тегом body новый код:

 <div id="wrap"> </div> 

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

Посмотрите на шаблон. Начнем его вырисовывать в html коде. Будем идти сверху вниз. Шапка сайта. Добавим ее внутрь оболочки (wrap):

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

Центральная часть по сути это 2 зоны: content и sidebar. Логично их поместить в единый контейнер для более удобного позиционирования блоков. При составлении css кода у Вас все уложится в голове. Назовем блок middle и аналогично добавим footer:

 <div id="wrap">    <div id="header"> </div>    <div id="middle"> </div>    <div id="footer"> </div>    </div>    

Отлично каркас готов. Теперь будем углубляться.

Шапка сайта

Пишем код сверху вниз, слева направо. Логотип. Добавим код будущего логотипа. Можно конечно просто добавить картинку и задать ей свойства, но давайте сделаем более грамотно. Добавим логотип через css (класс, например logo) и кликабельный логотип с помощью тега а:

 <div id="header">    <a href="" class="logo"> </a>    </div>  

Меню. Обычно меню формируют как немаркированный список. Так как такие CMS как wordpress, joomla и т.д. создают меню по такому принципу.Зададим списку класс для настройки его внешнего вида, а также меню – это обычно всегда ссылки:

    <div id="header">    <a href="" class="logo"> </a>    <!-- формируем список - главное меню -->    <ul class="menu">    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Услуги</a></li>    <li><a href="#">Портфолио</a></li>    <li><a href="#">Контакты</a></li>    </ul>    <!-- меню закончилось -->    </div>    1    Как видно по PSD шаблону в header'e у нас еще текст (p).Добавим его как отдельный блок с классом text:    1    <div id="header">    <a href="" class="logo"> </a>    <ul class="menu">    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Услуги</a></li>    <li><a href="#">Портфолио</a></li>    <li><a href="#">Контакты</a></li>    </ul>    <!-- открываем блок с текстом -->    <div class="text">    <p>Wood Design is a modern web and graphic design studio in Europe. We create beautiful things for web and print. You can see our great work examples in <a href="">Portfolio</a>. If you need a professional design services <a href="">Contact</a> us. We would love to work with you.</p>    </div>    <!-- закрываем блок с текстом -->    </div>    

Поздравляю, с шапкой сайта мы закончили :). Можете напонить стакан с кофе и продолжать дальше ;)

Центральная часть сайта.

В блок middle добавим наши функциональные зоны: content и sidebar, и общая структура будет такова:

 <div id="wrap">    <div id="header"> </div>    <div id="middle">    <div class="content"> </div>    <div class="sidebar"> </div>    </div>    <div id="footer"> </div>    </div>    

В блоке content у нас 4 одинаковых блока с картинками и текстом. Давайте добавим блок. Думаю Вы уже догадались как это делается:)

    <div id="middle">    <div class="content">    <!-- блок с картинкой открыли -->    <div class="block">    <img src="images/1.jpg" width="268" height="152" alt="" >    <h2>Fictional Design Studio Layout</h2>    <p>This work description goes here. Just simple and short text about this work. </p>    </div>    <!-- блок с картинкой закрыли -->    </div>    <div class="sidebar"> </div>    </div>    

У меня картинка называется 1.jpg, у Вас конечно может и по-другому. Не забываем обязательные аттрибуты картинки: высота, ширина и альтернативный текст.Тег img не закрывайте, помните наш DOCTYPE. Заогловок под картинкой я выбрал h2(тег заголовка), будем равномерно распределять теги заголовков :), ну и простой текст. Теперь скопируйте блок с классом block и вставьте друг за другом еще 3 раза.

Кнопки. Добавим просто 2 ссылки сразу после последнего блока с картинкой:

<a href="" class="button">Наш блог</a><a href="" class="button">Портфолио</a>1    <p>Пока у Вас такая картинка:</p>    1    <div id="wrap">    <div id="header">    <a href="" class="logo"> </a>    <!-- формируем список - главное меню -->    <ul class="menu">    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Услуги</a></li>    <li><a href="#">Портфолио</a></li>    <li><a href="#">Контакты</a></li>    </ul>    <!-- меню закончилось -->    <!-- открываем блок с текстом -->    <div class="text">    <p>Wood Design is a modern web and graphic design studio in Europe. We create beautiful things for web and print. You can see our great work examples in <a href="">Portfolio</a>. If you need a professional design services <a href="">Contact</a> us. We would love to work with you.</p>    </div>    <!-- закрываем блок с текстом -->    </div>    <div id="middle">    <div class="content">    <!-- блоки с картинкой начало -->    <div class="block">    <img src="images/1.jpg" width="268" height="152" alt="" >    <h2>Fictional Design Studio Layout</h2>    <p>This work description goes here. Just simple and short text about this work. </p>    </div>    <div class="block">    <img src="images/2.jpg" width="268" height="152" alt="" >    <h2>Creative Mouse Design</h2>    <p>This work description goes here. Just simple and short text about this work. </p>    </div>    <div class="block">    <img src="images/3.jpg" width="268" height="152" alt="" >    <h2>Real Estate Company Layout</h2>    <p>TThis work description goes here. Just simple and short text about this work. </p>    </div>    <div class="block">    <img src="images/4.jpg" width="268" height="152" alt="" >    <h2>Web Design Fan - Blog for designers</h2>    <p>This work description goes here. Just simple and short text about this work. </p>    </div>    <!-- блоки с картинкой конец-->    <!-- зеленые кнопки -->    <a href="" class="button">Наш блог</a><a href="" class="button">Портфолио</a>    </div><!-- закрыли content-->    <div class="sidebar"> </div>    </div>    <div id="footer"> </div>    </div>    

Сайдбар – боковая панель.

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

<div class="sidebar">    <div class="twitter">    <p>Free Wood Design PSD Template. For more freebies and photoshop tutorials follow @webdesignfan.</p>    <span>Follow Us on Twitter <a href=""><img src="images/twitter_right.jpg" width="32" height="40" alt="" ></a></span>    </div>    </div>    

Текст Follow Us on Twitter и картинку птички, которая обрамлена ссылкой, мы поместили в тег span для их общей настройки оформления. Будем двигать эти элементы.

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

    <h3>Навигация</h3>    <ul class="navigation">    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Услуги</a></li>    <li><a href="#">Портфолио</a></li>    <li><a href="#">Контакты</a></li>    </ul>    

И наконец, последний блок Контактов в сайдбаре. Все просто, доабляем блок, заголовок и текст:

<div class="contacts">    <h3>Контакты</h3>    <p>E-mail: hello@wooddesign.info</p>    <p>Phone: +370 6411 9028</p>    <p>Twitter: @wooddesigninfo</p>    </div>    

Теперь Ваш сайдбар должен выглядить вот так:

    <!-- sidebar -->    <div id="sidebar">    <!-- блок твиттов -->    <div class="twitter">    <p>Free Wood Design PSD Template. For more freebies and photoshop tutorials follow @webdesignfan.</p>    <span>Follow Us on Twitter <a href=""><img src="images/twitter_right.jpg" width="32" height="40" alt="" ></a></span>    </div>    <!-- навигация, меню -->    <h3>Навигация</h3>    <ul class="navigation">    <li><a href="#">Главная</a></li>    <li><a href="#">О нас</a></li>    <li><a href="#">Услуги</a></li>    <li><a href="#">Портфолио</a></li>    <li><a href="#">Контакты</a></li>    </ul>    <!-- блок контактов -->    <div class="contacts">    <h3>Контакты</h3>    <p>E-mail: hello@wooddesign.info</p>    <p>Phone: +370 6411 9028</p>    <p>Twitter: @wooddesigninfo</p>    </div>    </div>    

Футер – подвал сайта.

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

 <div id="footer">    <!-- копирайты -->    <p class="copyright">2010 © Wood Design. All rights reserved. Design by Tomas Laurinavičius.</p>    <!-- иконки соц сетей -->    <div class="fb"><a href=""><img src="images/fb.jpg" width="42" height="43" alt="" ></a><p>Wood Design on Flickr</p> </div>    <div class="tw"><a href=""><img src="images/twitter_button.jpg" width="42" height="43" alt="" ></a><p>Wood Design on Flickr</p> </div>    </div>    

Поздравляю, Вас! Вот и мы закончили html разметку. Остался еще небольшой рывок. ;) Главное у себя в голове разложить все по полочкам. Посмотрев на сайт,Вы уже должны видеть как лучшего его раложить на составляющие.

Как всегда Вы можете скачать исходники и сравнить с своими творениями.И помните, что верстка сайта – это целое творчество :) каждый может представить свое решение, каждое решение может быть правильным, все на Ваше усмотрение ;)

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

UPDATE: В статье были использованы id (индентификаторы) для блоков сайта лишь для удобства, и визуального восприятия. В дальнейших уроках по достижению нового уровня я объясню почему лучше использовать классы.

с/у УтБ

Сегодня на десерт фанаты firefox,  а Вы еще на другом браузере?? :)

firefox от enjinight

[Download not found]

www.gtalk.kz


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.