06. Верстка базового макета

Практика разметки и стилизации

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

В HTML-листинге опущу содержимое секции head, а также тег <body>. Создайте папку проекта и модифицируйте код в ней вместе со статьёй. Внимательно отслеживайте изменения после каждого изменения кода.

<div class="section">
	<div class="inner">
		<h2>Заголовок секции</h2>
		<img class="img img_bordered img_fll" src="img/sample.jpg" alt="" /> <-- Вопрос, зачем столько много классов, проясним позже -->
		<p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки форм развития. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа новых предложений.</p>
		<p>Задача организации, в особенности же рамки и место обучения кадров позволяет оценить значение форм развития. Равным образом дальнейшее развитие различных форм деятельности позволяет оценить значение дальнейших направлений развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки форм развития. Таким образом постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Равным образом консультация с широким активом требуют определения и уточнения соответствующий условий активизации. С другой стороны новая модель организационной деятельности позволяет оценить значение существенных финансовых и административных условий.</p>
		<p>Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития. Задача организации, в особенности же дальнейшее развитие различных форм деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение систем массового участия. Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет оценить значение направлений прогрессивного развития. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции требуют от нас анализа дальнейших направлений развития.</p>
	</div>
</div>

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

CSS-код пока что базовый, но с небольшим изменением:

* { /* У всех элементов border и padding будут включены в ширину */
	box-sizing: border-box;
}
html, body {
	min-width:320px;
	font-size:16px;
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family:Roboto, Calibri, Arial, sans-serif;
	color:#252525;
}
h1 {
	font-size:36px;
	line-height:48px;
	text-align:center;
	margin-bottom:12px;
}

Вот картинка, чтобы вы могли скачать (поместите её в папку img/):

Посмотрите, что получилось в результате. Текст растёкся на всю ширину, картинка не обтекается текстом. Значит пришла пора работать со стилями.

Внесём изменения в разметку секции. div.section — стандартный элемент страницы. Код, который мы применим к div.section и div.inner я использую в «боевых» проектах. Комментарии, как обычно, даны для вас, в проекте их удалите после копирования кода.

.section {
	width:100%;
	position:relative;
	margin:0 0 40px 0; /* Для каждого проекта размер отступа свой */
}

/* Внутри секции могут быть плавающие блоки, не в текущем примере, но код секции должен быть максимально универсальным и переиспользуемым */
.section:after {
	content:"";
	display:block;
	clear:both;
}

.section .inner {
	max-width: 1160px; /* Обычно макеты рисуют под 940, 960, 1000 или 1160 px. Реже для каких-то других значений */
	padding:0 15px; /* Для каждого проекта размер отступов свой */
	margin:0 auto; /* если margin-left и margin-right одновременно имеют значение auto при фиксированной ширине, то блочный элемент центрируется */
}

Очевидно, осталось стилизовать изображение, чтобы оно адекватно было встроено в текст.

.img {display:block;}
.img_bordered {
	border:solid 1px #252525;
	padding:3px;
	border-radius:3px;
	overflow:hidden;
}
.img_fll {
	float:left;
	margin:0 24px 12px 0;
}

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

Попробуем изображение сместить вправо. Для этого в HTML-коде измените класс img_fll на img_flr. В CSS мы добавим следующие строки:

.img_flr {
	float:right;
	margin:0 0 12px 24px;
}

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

Меняем HTML код на этот:


<div class="section">
	<div class="inner">
		<h2>Заголовок секции текста</h2>
		<p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки форм развития. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа новых предложений.</p>
		<img class="img img_bordered img_centered" src="img/sample.jpg" alt="" />
		<p>Задача организации, в особенности же рамки и место обучения кадров позволяет оценить значение форм развития. Равным образом дальнейшее развитие различных форм деятельности позволяет оценить значение дальнейших направлений развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки форм развития. Таким образом постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Равным образом консультация с широким активом требуют определения и уточнения соответствующий условий активизации. С другой стороны новая модель организационной деятельности позволяет оценить значение существенных финансовых и административных условий.</p>
		<p>Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития. Задача организации, в особенности же дальнейшее развитие различных форм деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение систем массового участия. Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет оценить значение направлений прогрессивного развития. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции требуют от нас анализа дальнейших направлений развития.</p>
	</div>
</div>

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

.img_centered {
	float:none; /* На случай, если в другом классе используется float, обнуляем его, иначе он всё испортит */
	margin:0 auto 24px auto;
}

Подписываем картинки

Чтобы подписать картинки, нужно обернуть их в блочный элемент. Там, где мы применяли float к картинке, здесь мы будем применять к блоку-обёртке. Снова модифицируем код:

<div class="section">
	<div class="inner">
		<h2>Заголовок секции текста</h2>
		<div class="img-outer img-outer_fll">
			<img class="img img_bordered" src="img/sample.jpg" alt="" />
			<p class="img-outer__subtitle">Небольшая подпись к картинке.</p>
		</div>
		<p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки форм развития. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа новых предложений.</p>
		<p>Задача организации, в особенности же рамки и место обучения кадров позволяет оценить значение форм развития. Равным образом дальнейшее развитие различных форм деятельности позволяет оценить значение дальнейших направлений развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки форм развития. Таким образом постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Равным образом консультация с широким активом требуют определения и уточнения соответствующий условий активизации. С другой стороны новая модель организационной деятельности позволяет оценить значение существенных финансовых и административных условий.</p>
		<div class="img-outer img-outer_centered img-outer_width-400px">
			<img class="img img_bordered" src="img/sample.jpg" alt="" />
			<p class="img-outer__subtitle">Небольшая подпись к картинке.</p>
		</div>
		<p>Задача организации, в особенности же рамки и место обучения кадров позволяет оценить значение форм развития. Равным образом дальнейшее развитие различных форм деятельности позволяет оценить значение дальнейших направлений развития. Таким образом начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки форм развития. Таким образом постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Равным образом консультация с широким активом требуют определения и уточнения соответствующий условий активизации. С другой стороны новая модель организационной деятельности позволяет оценить значение существенных финансовых и административных условий.</p>
		<div class="img-outer img-outer_flr">
			<img class="img img_bordered" src="img/sample.jpg" alt="" />
			<p class="img-outer__subtitle">Небольшая подпись к картинке.</p>
		</div>
		<p>Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития. Задача организации, в особенности же дальнейшее развитие различных форм деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение систем массового участия. Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет оценить значение направлений прогрессивного развития. Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции требуют от нас анализа дальнейших направлений развития.</p>
	</div>
</div>

Изучите, как изменился HTML-код. Добавим к нему стилизацию.

.img-outer_fll {
	float:left;
	margin:0 24px 12px 0;
}
.img-outer_flr {
	float:right;
	margin:0 0 12px 24px;
}
.img-outer_width-400px {
	width:400px; /* Ограничиваем по ширине, иначе блок займёт 100% по ширине и мы не увидим работу margin:0 auto; */
}
.img-outer_width-400px img {
	max-width:100%; /* Картинка может быть больше, поэтому на всякий случай даём такую инструкцию */
}
.img-outer_centered {
	margin:0 auto 24px auto;
}
.img-outer__subtitle {
	font-size:14px; /* Текст подписи надо визуально сделать отличным от общего текста */
	font-style:italic;
	color:#474747;
	margin:6px;
}

Если присмотреться к скриншоту, то мы увидим, что картинка, не совсем центрировалась. Как это можно исправить?