Верстка css – Как сверстать веб-страницу. Часть 1 / Habr

Содержание

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

От автора: 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 с нуля

Смотреть

webformyself.com

Блочная верстка сайта css, фиксированный и резиновый дизайн

Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

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

При работе со слоями или, иначе говоря, блоками и элементами div, основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

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

Высота слоев div ограничена высотой контента:

Табличная верстка	Блочная верстка

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

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).

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

Рис.1. Пример фиксированного дизайна

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

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

Выполнение:

«Разбиваем» все основные элементы страницы на блоки следующим образом:
- блок 1 — слой первый (id="shapka"),
- блок 2 и 3 заключаются в единый блок (id="container"),
- блок 2 — слой с меню (id="menu"),
- блок 3 — слой с контентом (id="content"),
- блок 4
  — слой с id="bottom".

Схематично изобразим расположение блоков:

<body>
<div>1</div>
<div>
	<div>2</div>
	<div>3</div>
</div>
<div>4</div>
</body>

1. Задаем свойства «шапки» (блок 1)

либо напрямую задав значение свойству height в пикселях, процентах или др. единицах;

например, для верхнего слоя «шапки»:

либо задать высоту при помощи отступа

например:

  padding-top: 15px; 
  padding-bottom: 15px;

padding-top: 15px; padding-bottom: 15px;

Весь код для шапки:

#shapka{
  text-align: left; /* Выравнивание внутреннего контента по левому краю */
  width: 750px; /* Ширина блока и общая ширина*/
  background: #900000; /* Цвет фона */
  height: 50px; /* Высота блока */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
  padding: 10px; /* Внутренние поля вокруг содержимого */
 }

#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ }

2. Создаем свойства контейнера

3. Создаем свойства для блока 2 — меню

4. Создаем свойства для блока 3 — контент

Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
Задаем обтекание float: left, исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
Задаем цвет заднего фона (background) и внутренние поля (padding)

#content { /* Правая колонка*/ 
    width: 550px; /* Ширина слоя */ 
    float: left; /* Обтекание с соседним слоем */ 
    padding: 10px; /* Внутренние поля вокруг содержимого */ 
    background: #e0e0e0; /* Цвет заднего фона */  
   }

#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }

5. Создаем свойства для блока 4 — «подвал»

Ширину слоя устанавливаем в 750 пикселей
Для этого блока надо убрать обтекание, т.е. установить свойство clear
Устанавливаем внутренние поля padding
Задаем цвет для фона (background) и текста (color)
Центрируем блок (margin-right и margin-left)

#bottom{
	width:750px; /* Ширина слоя */
	clear:left; /* возвращаем блочность и располагаем слой слева */
	padding: 10px; /* Внутренние поля вокруг содержимого */
        background:#444; /* фон */
	color:#fff; /* цвет текста */
        margin-right: auto; /* Авто-отступ справа */
        margin-left: auto; /* Авто-отступ слева */
}

#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

Итоговый код: всё вместе

/* для блока 1 - шапка */
#shapka{
  text-align: left; /* Выравнивание внутреннего контента по левому краю */
  width: 750px; /* Ширина блока и общая ширина*/
  background: #900000; /* Цвет фона */
  height: 50px; /* Высота блока */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
  padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для контейнера */
#container {
  width: 770px; /* Ширина слоя или ширина макета+20px */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
 }
/* для блока 2 - меню */
#menu {
  width: 200px; /* Ширина слоя */ 
  float: left; /* Обтекание с соседним слоем */ 
  color: white; /* Цвет текста */
  background: #008080; /* Цвет фона */
  padding: 10px; /* Внутренние поля вокруг содержимого */
 }
/* для блока 3 - контент */
#content { /* Правая колонка*/ 
    width: 530px; /* Ширина слоя */ 
    float: left; /* Обтекание с соседним слоем */ 
    padding: 10px; /* Внутренние поля вокруг содержимого */ 
    background: #e0e0e0; /* Цвет заднего фона */  
   } 
/* для блока 4 - подвал */
#bottom{
	width:750px; /* Ширина слоя */ 
	clear:left; /* возвращаем блочность и располагаем слой слева */
	padding: 10px; /* Внутренние поля вокруг содержимого */
	background:#444;
	color:#fff;
	margin-right: auto; /* Авто-отступ справа */
    margin-left: auto; /* Авто-отступ слева */
}

/* для блока 1 — шапка */ #shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для контейнера */ #container { width: 770px; /* Ширина слоя или ширина макета+20px */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ } /* для блока 2 — меню */ #menu { width: 200px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для блока 3 — контент */ #content { /* Правая колонка*/ width: 530px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ } /* для блока 4 — подвал */ #bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; color:#fff; margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

</style>
</head> 
<body>
<div>1</div>
<div>
	<div>2</div>
	<div>3</div>
</div>
<div>4</div>
</body>

</style> </head> <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>

Результат:

Рис.2. Жесткая блочная верстка из двух колонок

Фиксированный дизайн для трех колонок

При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

Использование свойства float для расположения колонок рядом.
Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства float для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

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

Выполнение:

1. Создание структуры html-кода

Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

<body>
<div>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
  </div>
  <div>
    <div>
		Мне снится старый друг,<br/>который стал врагом,<br/>
		но снится не врагом,<br/>а тем же самым другом.<br/>
		Со мною нет его,<br/>но он теперь кругом,<br/>
		и голова идет<br/>от сновидений кругом.
	</div>
    <div>
	Великое вблизи неуловимо,<br/>Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>И видим лишь случайное звено.
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>А нежеланье - множество причин.
	</div>
  </div>
</body>

<body> <div> <div>Евгений Евтушенко</div> <div>Валерий Брюсов</div> <div>Эдуард Асадов</div> </div> <div> <div> Мне снится старый друг,<br/>который стал врагом,<br/> но снится не врагом,<br/>а тем же самым другом.<br/> Со мною нет его,<br/>но он теперь кругом,<br/> и голова идет<br/>от сновидений кругом. </div> <div> Великое вблизи неуловимо,<br/>Лишь издали торжественно оно,<br/> Мы все проходим пред великим мимо<br/>И видим лишь случайное звено. </div> <div> В любых делах при максимуме сложностей<br/>Подход к проблеме все-таки один:<br/> Желанье — это множество возможностей,<br/>А нежеланье — множество причин. </div> </div> </body>

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

 #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
}

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

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

 #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
   }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).

 #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    margin-top: 2px; /* Отступ сверху */
   }

#header1, #header2, #header3, #col1, #col2, #col3 { … margin-top: 2px; /* Отступ сверху */ }

Для того, чтобы блочные теги div, расположились рядом друг с другом, необходимо задать им обтекание — float.

 #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    float: left; /* Состыковка колонок по горизонтали */
   }

#header1, #header2, #header3, #col1, #col2, #col3 { … float: left; /* Состыковка колонок по горизонтали */ }

Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family, font-weight, font-size, color).

 #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
   }

#header1, #header2, #header3, #col1, #col2, #col3 { … border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

 #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
    margin-top: 2px; /* Отступ сверху */
    float: left; /* Состыковка колонок по горизонтали */
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
}

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Установим задний фон отдельно для каждого селектора.

   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

 #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   }

#col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

/* для колонок и их заголовков */
 #header1, #header2, #header3, #col1, #col2, #col3 { 
     width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
    margin-top: 2px; /* Отступ сверху */
    float: left; /* Состыковка колонок по горизонтали */
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
   }
   /* для колонок */
   #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   } 
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }
 
   .container { 
     clear: both;  /* Отменяет действие float */ 
   }

/* для колонок и их заголовков */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ } /* для колонок */ #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ } /* Цвет фона каждого слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* Отменяет действие float */ }

</style>
</head> 
<body>
<div>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
  </div>
  <div>
    <div>
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
	</div>
    <div>
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
	</div>
  </div>
</body>

</style> </head> <body> <div> <div>Евгений Евтушенко</div> <div>Валерий Брюсов</div> <div>Эдуард Асадов</div> </div> <div> <div> Мне снится старый друг,<br/> который стал врагом,<br/> но снится не врагом,<br/> а тем же самым другом.<br/> Со мною нет его,<br/> но он теперь кругом,<br/> и голова идет<br/> от сновидений кругом. </div> <div> Великое вблизи неуловимо,<br/> Лишь издали торжественно оно,<br/> Мы все проходим пред великим мимо<br/> И видим лишь случайное звено. </div> <div> В любых делах при максимуме сложностей<br/> Подход к проблеме все-таки один:<br/> Желанье — это множество возможностей,<br/> А нежеланье — множество причин. </div> </div> </body>

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6. Использовать приемы фиксированного макетирования с позиционированием слоев

Выполнение:

1. Создание структуры html-кода

Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

<body>
<div>Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели.</br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли. 
</div>
<div>
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div>
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>

<body> <div>Иван Бунин</br></br> На окне, серебряном от инея,</br> За ночь хризантемы расцвели.</br> В верхних стёклах — небо ярко-синее</br> И застреха в снеговой пыли. </div> <div> Всходит солнце, бодрое от холода, </br> Золотится отблеском окно. </br> Утро тихо, радостно и молодо. </br> Белым снегом всё запушено. </div> <div> И всё утро яркие и чистые</br> Буду видеть краски в вышине, </br> И до полдня будут серебристые </br> Хризантемы на моём окне.</br></br> 1903 </div> </body>

2. Добавление стилей для колонок

Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
    }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ }

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

#col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
     float: left; /* Обтекание слоев */
    }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

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

#col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }

#col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

Итоговый код: всё вместе

#col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
     float: left; /* Обтекание слоев */
    } 
#col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

</style>
</head> 
<body>
<div>Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели.</br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли. 
</div>
<div>
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div>
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>

</style> </head> <body> <div>Иван Бунин</br></br> На окне, серебряном от инея,</br> За ночь хризантемы расцвели.</br> В верхних стёклах — небо ярко-синее</br> И застреха в снеговой пыли. </div> <div> Всходит солнце, бодрое от холода, </br> Золотится отблеском окно. </br> Утро тихо, радостно и молодо. </br> Белым снегом всё запушено. </div> <div> И всё утро яркие и чистые</br> Буду видеть краски в вышине, </br> И до полдня будут серебристые </br> Хризантемы на моём окне.</br></br> 1903 </div> </body>

Дизайн в три колонки готов!

labs-org.ru

Блочная верстка — css-свойства, которые нужны для оформления блоков

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

Где создаются блоки

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

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

Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером.

Привычная блочная модель

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

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

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

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

Блочная верстка сайта с помощью css: основные свойства

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

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

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

То абсолютно все блоки получат такую ширину, что нам явно не нужно. Значит, нужно добавить к блоку стилевой класс или идентификатор. Они добавляются с помощью атрибутов class и id, а значением выступает произвольное имя, но начинаться оно должно с английской буквы. Разрешается использовать также цифры, дефис и знак нижнего подчеркивания. Обычно самые важные элементы на странице получают идентификатор (шапка, контент, подвал), а менее важные (пункты меню, заголовки и т.д.) стилевые классы.

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

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

<div class = «width height border»>Блок с тремя классами</div>;

И как вы думаете, что теперь с ним произойдет, когда мы запишем такие свойства?

.width{ width: 250px; } .height{ height: 250px; } .border{ border: 10px solid green; }

.width{

width: 250px;

}

.height{

height: 250px;

}

.border{

border: 10px solid green;

}

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

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

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

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

Несколько блоков на одной линии

Далее я коротко расскажу о двух важных свойствах, которые позволят блокам располагаться в одну линию. Сразу пример: есть контейнер шириной 1000 пикселей. Ваша задача – впихнуть в него 3 блока шириной по 300 пикселей, чтобы они располагались на одной горизонтальной линии. Как это сделать? Есть два способа.

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

Таким образом, каждый элемент может быть оформлен по-своему, но все они могут получить одинаковые указания, потому что все содержат класс inline. А в нем мы можем записать так:

.inline{ display: inline-block; }

.inline{

display: inline-block;

}

Либо так:

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

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

Относительные размеры

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

<div id = «wrapper»> <div id = «content»></div> <div id = «sidebar»></div> </div> #wrapper{ max-width: 1000px; } #content{ width: 66%; } #sidebar{ width: 26%; }

</div>

#wrapper{

max-width: 1000px;

}

#content{

width: 66%;

}

#sidebar{

width: 26%;

}

Вот так вот это все примерно реализовывается. Оставшиеся 8% ширины оставим на отступы, допустим. Наш шаблон уже получит определенную адаптивность – он будет сжиматься при уменьшении ширины окна в браузере.

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

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

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

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

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

PSD to HTML

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

Смотреть

webformyself.com

HTML5 CSS3 верстка, знакомство

Здравствуйте уважаемый читатель моего блога создай сам. Сегодня мы начинаем с вами изучение интересной темы под названием «Верстка сайта с нуля«. Ну не станем затягивать, а сразу приступим к знакомству с гипертекстовым языком разметки HTML5.

План занятия:

Знакомство с html, понятие верстки
Программы для верстки
Шаблон страницы html4 и html5
Разбор тегов шаблона html
Сохранение документа, смена кодировки, просмотр в браузере
Теги: абзаца, жирного выделения, курсива и тега br
Теги заголовков: h2-h6
Понятие парного тега и одиночного
Строчные и блочные элементы
Атрибуты, пример с align
Работа с изображениями
1. Относительный путь
2. Абсолютный путь
Гипер ссылки
1. Ссылка на вторую страницу
2. Ссылка на файл
3. Ссылка графическая
4. Якорная ссылка

Что такое верстка сайта или страницы для интернета

Верстка — это создание страницы по готовому макету psd (Photoshop) для интернета или для web. Это подразумевает в себе создание некой логической разбивки страницы кодом html и его визуальным оформлением с помощью css (Cascading Style Sheets — каскадные таблицы стилей). Для верстки необходим готовый шаблон прорисован в фотошоп с которого и будет происходить верстка. В ходе верстки у вас получится несколько типов файлов, которые должны находиться в одном месте, то есть в папке, это будет ваша web страница в формате index.html, ваш файл с расширением css в котором будут все стили предназначенные для вашей страницы и папка с картинками, которые используются при оформлении страницы стилями.

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

Совпадение с дизайном макета
Кроссбраузерность
Поддержка популярных разрешений
Валидный и аккуратный код

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

Кроссбраузерность — существует много различных браузеров, от известных нам Opera, Mozilla, Chrome и Internet Explorer и до менее известных их аналогов, вот кроссбраузерность и отвечает за одинаковое отображение верстки во всех этих браузерах. По сути сейчас все современнные браузеры отлично отображают верстку, но этого нельзя сказать о старых версиях IE.

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

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

Знакомство с HTML5

HTML5 — это не новый какой-то язык разметки, а всего лишь обновленный html4 в который были добавлены новые теги в основном предназначенные под оптимизацию и продвижение вашего будущего сайта. Все основные изменения с 4 на 5 версию можно выделить списком:

Доступны новые теги и атрибуты.
Возможность рисовать на странице.
Поддержка элементов ранее доступных только посредством использования Flash (вставка видео или аудио).

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

Программное обеспечение для верстальщика

Для верстальщика нужны определенные программы, которые помогут в работе и станут незаменимыми помощниками при вашей дальнейшей работе. Первое, что мы должны установить себе на компьютер это программу Notepad++. Это такой текстовый редактор, который умеет подсвечивать синтаксис языка программирования и может кодировать документ в различные кодировки. Скачать этот редактор можно скачать абсолютно бесплатно по адресу http://notepad-plus-plus.org/download/v6.7.4.html, по ссылке всегда актуальная версия.

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

Как же обойтись без браузеров, мы уже поняли, что для проверки кроссбраузерности нужно несколько браузеров, поэтому установим себе на компьютер их, рекомендую поставить для начала самые популярные и использовать периодически для просмотра результатов нашей верстки. Установите себе: Opera, Mozilla, Chrome, Internet Explorer и Yandex браузеры.

Основным браузером для верстки я беру Mozilla Firefox, если вам интересно почему, отвечу так — для этого браузера написано наибольшее количество расширений во всевозможных применениях, включая и верстку. Мы будем использовать этот браузер, как основной, а во всех остальных проверять уже нашу кроссбраузерность.

Дополнения для верстальщика на Mozilla

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

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

Сайт с css и без css

Основное отличие сайта с работающими стилями css и без них заключается в его визуальном оформлении. Давайте откроем любую страницу в браузере Mozilla и используя наш плагин Web Developer отключим стили оформления для данной страницы, делается это следующим образом:

На вкладке css отмеченной скриншотом 1 выбираем Disable Styles и Disable All Styles, этим действием мы полностью отключаем стили к данной странице сайта. Вы можете видеть, как работает гипертекстовая разметка html без стилей. По сути страница остается не тронутой, вся информация как была, так и есть, вот только вид у нее не совсем презентабельный ))).

Практическое начало в HTML

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

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Название страницы</title> </head> <body> </body> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<head>

<title>Название страницы</title>

</head>

<body>

</body>

</html>

Итак первая строка называемая DOCTYPE отвечает за указание или присвоение типа текущему документу, делается это для того, чтобы браузер понимал в каком стандарте отображать данную страницу, а этих стандартов есть несколько (HTML4, HTML5, XHTML и т.д.).

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

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

Внутри парного тега html содержатся еще два таких же парных тега, это тег <head>…</head> и тег <body>…</body>. Первый тег head содержит в себе невидимую для пользователя информацию, которая предназначена для браузера и поисковых систем. Все внутренние теги заключенные в head называются служебные и первым служебным тегом сейчас мы рассмотрим тег meta — это есть одиночный тег и указывает он браузеру на какой кодировке будет сверстана наша страница.

Основной и универсальной кодировкой для использования русскоязычных символов является utf-8, в дальнейшем следует создавать именно в ней свои страницы. Чтобы сменить кодировку в Notepad++ нужно в верхнем меню нажать слово кодировка и выбрать преобразовать в UTF-8 без BOM.

Чтобы не устанавливать кодировку в ручную каждый раз я вам советую настроить ее по умолчанию для каждого нового документа в Notepad++, делается это следующим образом. Заходим в раздел меню Опции —> настройки и переходим во вкладку Новый Документ с правой стороны указываем UTF-8 без BOM и закрываем настройки. В дальнейшем все ваши документы будут создаваться в этой кодировке по умолчанию.

Следующим тегом находящимся в теге head есть парный тег <title>…</title> — тег, который дает название нашей странице, это название выводится в верху нашей вкладки в браузере. Название имеет очень большое значение для поисковых систем, поэтому в будущем нужно быть внимательным при создании названий вашим документам. Сейчас же можно просто внутри парного тега title написать <title>Мой первый html документ</title>, сохранить и открыть в браузере, в верху вкладки вы найдете это название.

Следующим шагом мы рассмотрим парный тег <body>…</body>. Это тег, который содержит в себе всю видимую страницу браузера. В нем уже и будет содержаться весь макет, который мы будем верстать с макета psd.

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

Основные отличия HTML5 от HTML4

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

<!DOCTYPE html> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>html5 документ</title> <meta name=»description» content=»» /> <meta name=»keywords» content=»» /> </head> <body> <header> <h2>Наш сайт самый классный</h2> </header> <nav> <ol> <li><a href=»#»>Меню 1</a></li> <li><a href=»#»>Меню 2</a></li> <li><a href=»#»>Меню 3</a></li> </ol> </nav> <article> <h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2> <h3 align=»center»>Заголовок второго уровня</h3> <img src=»images/author.png» alt=»автор» align=»right» /> <p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. <br /> В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, ы»Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p> <img src=»images/dvd.jpg» alt=»dvd» /> <p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —> <strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —> <section> <h4>Подраздел кошки</h4> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> </section> <section> <h4>Подраздел собаки</h4> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> </section> </article> <footer> <p>Подвал сайта</p> </footer> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>html5 документ</title>

</head>

<body>

<h2>Наш сайт самый классный</h2>

</header>

<nav>

<ol>

</ol>

</nav>

<h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2>

<h3 align=»center»>Заголовок второго уровня</h3>

<p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов, но это не совсем так.

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

Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных

слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. <br />

В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги

«de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э.

Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum,

ы»Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>

<p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —>

<strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —>

<h4>Подраздел кошки</h4>

<p>Текст статьи…</p>

</section>

<h4>Подраздел собаки</h4>

<p>Текст статьи…</p>

</section>

</article>

<p>Подвал сайта</p>

</footer>

</body>

</html>

DOCTYPE стал короче и проще. Также я добавил два мета тега description и keywords, которые отвечают сугубо за поисковую оптимизацию сайта и предназначаются для поисковых систем. Description — дает краткое описание характеризующее содержание веб страницы. Keywords — содержит в себе перечень основных ключевых слов по которым продвигается эта страница в поисковой выдаче, в настоящее время тег утратил свое значение и практически не используется вебмастерами да и поисковыми машинами тоже.

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

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

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

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

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

Заголовки и подзаголовки в html

Вы уже наверное в коде выше заметили непонятный парный тег <h2>. Это тег заголовка первого уровня, то есть самый главный заголовок нашей страницы. Заголовков есть аж 6 уровней, чем выше цифра заголовка, тем менее значимый он для пользователя и ПС. Все они есть парные и находятся в таком виде:

<h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> <h5>Заголовок четвертого уровня</h5> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6>

<h2>Заголовок первого уровня</h2>

<h3>Заголовок второго уровня</h3>

<h4>Заголовок третьего уровня</h4>

<h5>Заголовок четвертого уровня</h5>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

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

Продолжим ознакомление с тегами, которые применяются для оформления текстового наполнения сайта. Предлагаю перейти на сайт http://ru.lipsum.com/и скопировать один абзац предлагаемого текста, для дальнейшего его форматирования с помощью тегов. Вставляем его в наш код пониже заголовка h2 и сдублировав его вставляем на следующей строке еще раз. После сохранения и открытия в браузере вы не увидите двух абзацев, а слитый единый текст, это потому, что браузер не понимает нашего кода так, как мы хотим без специальных разметок — тегов.

Теперь в начале каждого абзаца поставим вот такой вот тег <p>, а в конце абзаца </p>, вы уже догадались, что этот тег парный, так как имеет и открывающий и закрывающий тег. Сохраните еще раз документ и просмотрите на результат в браузере. Изменения на яву )))

Помимо абзацев в тексте очень часто используется принудительный перенос строки, выделяется он одинарным тегом <br /> давайте применим его в первом абзаце по окончании первого предложения и посмотрим на результат. Этот тег можно использовать по несколько раз подряд.

Теги форматирования текста

<strong> — парный тег выделяющий область текста жирным начертанием.
<em> — тег, который также парный и выделенный текст делает курсивом.

Чтобы вы усвоили на практике эти теги, найдите любые пару словосочетаний в ваших абзацах и сделайте их жирными и курсивом, примерно это будет вот так:

<p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов…</p>

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

Понятие строчного и блочного элемента

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

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

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

А вот два тега, которые мы рассмотрели с вами <strong> и <em> являются уже строчными или инлайн элементами. Вы спросите зачем нам все это знать и понимать, отвечаю.

ВАЖНО понимать, что блочные элементы могут в себе содержать, как строчные, так и другие блочные элементы, чего не умеют делать однострочные. Вот два примера, где первый правильно, а второй нет:

<p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —> <strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —>

Еще важный момент, строчный элемент может в себя включать еще один строчный или инлайн элемент. Но ни в коем случае не блочный элемент. Также следует закрывать парные теги в той последовательности в которой они были и открыты, то есть если есть два строчных элемента и один вложен во второй, то выглядеть это будет так: <strong> текст <em> текст </em></strong>. Не допускайте в этом ошибок.

Атрибуты — это дополнительные управляющие слова, которое задают определенные свойства элементам. И первым атрибутом с которым мы познакомимся будет align (элайн), который задает выравнивание элементу. По умолчанию все выравнивание идет по левому краю, чтобы сделать нашим абзацам выравнивание по центру примените атрибут align так, как указано на картинке выше. Проделайте это со всеми значениями данного атрибута.

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

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

<h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2>

В примере кода вы видите два атрибута применяемые к тегу h2, первый задает выравнивание заголовку и он не используется в html5, а второй задает пояснение данному элементу. Имя атрибута title, а значение вы пишете которое поясняет место применения, я написал, что это заголовок h2. Рекомендую применять в изображениях, к ним мы еще дойдем и затронем там еще один атрибут alt.

Изображения на веб странице

Изображение ставится на страницу с помощью тега <img src=»» alt=»» />, который имеет два обязательных атрибута!

Тег img не имеет парного закрывающего тега
Имеет два обязательных атрибута

src — атрибут, который указывает путь к изображению, alt — альтернативный текст описывающий кратко картинку, нужен для того случая, если у пользователя отключен просмотр картинок или же картинка повреждена и браузер не может ее показать. Разберем несколько путей указания картинки браузеру.

Абсолютный путь к картинке — <img src=»http://obuchaemsja.com/images/romantic.png» alt=»романтика» />. Абсолютный, потому, что где бы вы не вставили этот код, он будет отображать мою картинку, не важно на сайте это или у вас в рабочем документе.

Относительный путь к картинке — <img src=»images/dvd.jpg» alt=»dvd» />. Это относительный путь к картинке, которая находится в папке рядом с документом html.

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

Хочу еще указать на два не обязательных атрибута применяемые во вставке картинки в теге img. Это атрибут height — высота и width — ширина картинки, их значения пишутся в пикселях, но без px. Попробуйте вставить любую картинку и применив к ней атрибут align, который мы проходили выровнять ее по правому краю.

Создание гиперссылок

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

Внешние ссылки

<a href=»http://google.com.ua»>Google</a> <a href=»http://google.com.ua» target=»_blank»>Google</a>

<a href=»http://google.com.ua»>Google</a>

<a href=»http://google.com.ua» target=»_blank»>Google</a>

Здесь приведены два примера ссылки ведущие с нашего документа на страницу поиска Google, в чем же отличие первой от второй. Первая ссылка имеет парный тег и обязательный атрибут href, который и указывает куда ведет ссылка. Такая ссылка откроет страницу Гугл вместо нашей страницы, что не совсем правильно, ведь это внешняя ссылка, а не внутренняя. А вот второй пример, как раз добавляет ссылке атрибут target, который и указывает, что ссылку нужно открывать в новом окне. Хочу добавить, что в данных примерах мы указывали абсолютный путь, как в изображении. То есть эта ссылка будет работать абсолютно везде, на любом сайте она будет вести на сайт Гугл.

Внутренние ссылки

А сейчас давайте создадим внутреннюю ссылку. В папке, где находится наш документ, создаем еще один по html шаблону и называем его page.html, можно вставить туда параграф или просто написать заголовок используя теги h2-H6. После создания второго документа переходим в первый и создаем ссылку на второй. Что следует учитывать, во первых путь уже не абсолютный, а относительный, и так как второй документ находится в одной директории и одной папке нам нужно в атрибуте href указать всего лишь имя и расширение документа. Давайте взглянем на пример:

<a href=»page.html»>Вторая страница</a>

Наверное вы заметили отсутствие второго не обязательного атрибута тега a target, это потому, что ссылка внутренняя, а такие ссылки не принято открывать в новых окнах.

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

<a href=»file.pdf»>Скачать файл</a>

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

Графическая ссылка

Что такое графическая ссылка, это картинка (строчный элемент) завернутая или вложенная в анкор другого строчного элемента в данном случае тега a. Ну и как же без примера:

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

Якорная ссылка

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

По идентификатору (id)
По атрибуту тега a name

Второй вариант я рассмотрю на примере нашей страницы, в самом низу документа перед закрывающимся тегом body я создаю такой якорь: <a name=»foot» />, это и есть

якорь, а рядом с уже ранее созданными ссылками создаю еще одну на наш якорь.

<a href=»#foot»>Подвал сайта</a>

Если ссылка ведет на другую страницу к якорю, то указывается вначале полный (абсолютный путь) к странице, а потом после знака # ставится имя якоря.

Ссылка на почтовый адрес

Хочу еще затронуть такой вид ссылок, как ссылка на написание почты или ее отправку. Делается это аналогично любой ссылки с использованием тега <a>, вот только в значении обязательного атрибута href ставится следующее:mailto: и после двоеточия пишется уже почтовый адрес. Ну и конечно вот пример:

<a href=»mailto:[email protected]»>Написать письмо<a/>

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

sozdaj-sam.com

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 с нуля

Смотреть

webformyself.com

Что такое блочная верстка html сайта дивами (div)

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

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

Что такое блочная верстка

Блочная верстка — это верстка дивами (div блоками) или слоями.

Термин «слой» довольно устойчиво употребляется в профессиональной среде, наравне с термином «див». Краткость и емкость!

История слоев уходит далеко в 90-е, когда компания Netscape ввела тег <layer> (слой) в свой браузер. Это была настоящая инновация, ведь теперь можно было показывать и прятать содержимое слоя, накладывать слои прямо друг на друга, менять положение слоев. Это был настоящий прорыв по созданию и отображению динамического контента на странице. Но в спецификации HTML этот тег не включили, зато разработали синтаксис по работе со слоями при помощи CSS — каскадных таблиц стилей.

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

Сейчас уже конечно попроще. HTML5+CSS3, понятная и прозрачная спецификация вместе с движком Chromium, который использует сразу несколько популярных браузеров, делают жизнь сайтостроителя проще и лучше.

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

Я предлагаю вам перейти непосредственно к обсуждению слоев. Объясняя «на пальцах», отмечу что использование слоев в тесной связке со стилями очень упрощает работу. Но не стоит принимать любой элемент кода за слой, все-таки слой (блок) это скорее объединение этих микроэлементов в одну макро-группу — для формирования цельного дизайна блока.

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

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

Обратите внимание, одни и те же элементы, но помещенные в разные блоки, могут иметь разное стилевое оформление. Например ссылки в тексте статьи мы можем сделать менее выраженными, а ссылки в сайдбаре (или футере) — более яркими и заметными. О том как вставить ссылку в HTML читайте тут.

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

Основных конструктивных принципов два:

Разделяйте содержимое блока и его оформление
Активно применяйте блоки (дивы) в верстке

Давайте расскажу немного подробнее. Во-первых, ваш html-код должен включать в себя только два вида тегов — основные теги разметки и теги форматирования. Это значит любое оформление следует выносить в css-файлы. Объясняя по-простому, это значит что никаких <div style=»»></div>, <p style=»»></p> и других подобных вещей с использование <style> быть не должно. Почему?

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

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

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

Слой (блок, див, контейнер) — базовый элемент верстки вебсайтов, к которому применяются стили CSS.

Кстати, в HTML5 для блочной верстки дивами добавили строгие типовые блоки страниц:

<header> — для шапки
<footer> — для подвала
<nav> — для навигации
<aside> — для боковой панели

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

Верстаем дивами на практике — создаем макет сайта

Давайте постепенно переходить к практике создания макетов сайтов. Для начала нам хватит двух файлов: index.html и файла стилей style.css. В первом мы сверстаем блоками макет сайта, во втором — применим к дивам стили, сделаем стильное оформление макета нашего сайта (как оформить сайт правильно?).

Более того, для всех этих манипуляций вам даже не нужен свой сервер и хостинг — все можно сделать на домашнем ПК, понадобится только текстовый редактор и браузер. Я пользуюсь редакторами Notepad++, Brackets и Sublime — по настроению и в зависимости от задач.

Для начала создайте пустую папку и положите в нее два пустых файла, как я уже говорил это index.html и style.css. Нам нужно написать обязательные для любого HTML документа элементы, подключить файл стилей и сделать блочную верстку. Я подготовил код для вашего index.html файла, не стал прописывать теги <description> и <title>, а лишь ограничился базовым необходимым кодом, вот он:

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Blogwork.ru — блочная верстка</title>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>

<div>
<div>
<h3>Шапка сайта</h3>
</div>

<div>
<h3>Навигация по сайту</h3>
</div>

<div>
<h3>Меню сайта</h3>
</div>

<div>
<h3>Основной контент</h3>
<frameset rows=»10%, 80%, 10%» >
<frame src=»1.html»>
</frameset>
</div>

<div></div>

<div>
<h3>Футер сайта</h3>
</div>
</div>

</body>
</html>

Результат:

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

body {
background: #f5f5f5;
color: #000000;
font-family: Arial, Times New Roman;
font-size: 16px;
}

#container {
background:#99CC00;
margin: 40px auto;
width: 1000px;
height: 600px;
}

#header {
background: green;
height: 100px;
width: 1000px;
}

#navigation {
background: white;
width: 1000px;
}

#menu {
background: #99CC00;
float: left;
width: 300px;
height: 400px;
}

#content {
background: #d3d3d3;
float: right;

width: 700px;
height: 400px;
}

#clear {
clear:both;
}

#footer {
background: red;
height: 80px;
width: 1000px;
}

Результат:

Цветовая гамма конечно не очень стильная как планировалось, но пойдет — в конце концов сегодняшний урок у нас по блочной верстке, а не подбору цветовой гаммы.

При этом, файлы в папке выглядят так:

Итак, у нас получился самый простой макет сайта. Он сверстан на дивах (имеет блочную верстку) и состоит из двух колонок и следующих блоков (контейнеров): шапка, навигация, меню, контент и футер. Каждому блоку присвоен соответствующий id: header, navigation, menu, content, footer — именно к этим уникальным id «цепляются» (прописываются) стили и свойства в файле style.css.

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

blogwork-blochnaya-verstka-html-div.zip

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

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

blogwork.ru

div и HTML5 — учебник CSS

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

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

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

Блочная верстка с <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

Верстка css – Как сверстать веб-страницу. Часть 1 / Habr

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

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

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

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

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

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

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

PSD to HTML

Блочная верстка сайта css, фиксированный и резиновый дизайн

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

Отличительные черты от табличной верстки

Фиксированный дизайн или жесткая блочная верстка (две колонки)

Фиксированный дизайн для трех колонок

Использование свойства float для макета в три колонки

Использование позиционирования слоев для макета в три колонки

Блочная верстка — css-свойства, которые нужны для оформления блоков

Где создаются блоки

Привычная блочная модель

Блочная верстка сайта с помощью css: основные свойства

Несколько блоков на одной линии

Относительные размеры

PSD to HTML

HTML5 CSS3 верстка, знакомство

План занятия:

Что такое верстка сайта или страницы для интернета

Знакомство с HTML5

Программное обеспечение для верстальщика

Дополнения для верстальщика на Mozilla

Сайт с css и без css

Практическое начало в HTML

Основные отличия HTML5 от HTML4

Заголовки и подзаголовки в html

Теги форматирования текста

Понятие строчного и блочного элемента

Изображения на веб странице

Создание гиперссылок

Внешние ссылки

Внутренние ссылки

Графическая ссылка

Якорная ссылка

Ссылка на почтовый адрес

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

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

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

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

PSD to HTML

Что такое блочная верстка html сайта дивами (div)

Что такое блочная верстка

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

Верстаем дивами на практике — создаем макет сайта

div и HTML5 — учебник CSS

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

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

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

Фиксированный дизайн или
жесткая блочная верстка (две колонки)