Создание простейшего макета

Последнее обновление: 28.04.2016

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<link href="styles.css" rel="stylesheet">
        <title>Блочная верстка в HTML5</title>
    </head>
    <body>
		<div id="header">
			<h1>MySyte.com - Сайт о Lorem Ipsum</h1>
			<div id="nav">
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#">Блог</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Контакты</a></li>
					<li><a href="#">О сайте</a></li>
				</ul>
			</div>
		</div>
		<div class="wrapper">
			<div id="sidebar1" class="aside">
				<h2>The standard Lorem Ipsum passage</h2>
				<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
				ut labore et dolore magna aliqua..."</p>
				</div>
			<div id="sidebar2" class="aside">
				<h2>1914 translation by H. Rackham</h2>
				<p>It is a long established fact that a reader will be distracted by the readable 
				content of a page when looking at its layout.</p>
				<h3>Options</h3>
				<ul>
					<li>Item1</li>
					<li>Item2</li>
					<li>Item3</li>
				</ul>
			</div>
			<div id="article">
				<h2>What is Lorem Ipsum?</h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
				classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, 
				a Latin professor at Hampden-Sydney College in Virginia...</p>
			</div>
		</div>
		<div id="footer">
			<p>Contacts: admin@mysyte.com</p>
			<p>Copyright © MySyte.com, 2016</p>
		</div>
    </body>
</html>

В начале идет шапка сайта - блок с header, который содержит заголовок страницы и панель навигации. Далее идет блок wrapper, в котором два сайдбара и блок основного содержимого страницы. Сайдбары условно тоже содержат некоторое содержимое, но главное, что они определены до основного блока. И в самом низу небольшой футер.

В начале веб-страницы определено поключение файла styles.css, который будет стилизовать веб-страницу. Поэтому создадим в одном каталоге с веб-страницей файл styles.css и определим в нем следующее содержимое:

* {
	box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{
				
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	font-family: Verdana, Arial, sans-serif;	
	background-color: #f7f7f7;
}
#header{ 
	background-color: #f4f4f4;
}
#header h1 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: bold;
	padding: 30px 30px 30px 10px;
	clear: both;
}
#nav {
	background-color: #eee;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#nav li {
	float: left;
	list-style: none;	
}
#nav a {
	display: block;
	color: black;
	padding: 10px 25px;
	text-decoration: none;
	border-right: 1px solid #ccc;
}
#nav li:last-child a {
	border-right: none;	
}
#nav a:hover {
	font-weight: bold;
}
#nav:after {
	content: " ";
	display: table;
	clear: both;
}
.wrapper{
	background-color: #f7f7f7;
}
.aside h2 {
	font-size: 0.95em;
	margin-top: 15px;
}
.aside h3 {
	font-size: 0.85em;
	margin-top: 10px;
}
.aside p, .aside li {
	font-size: .75em;
	margin-top: 10px;	
}
.aside li{ 
	list-style-type: none;
}
#sidebar1 {
	float: left;
	width: 20%;	
	padding: 0 10px 0 20px;
}
#sidebar2 {
	float: right;
	width: 20%;	
	padding: 0 20px 0 10px;
}
#article{
	background-color: #fafafa;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	margin-left: 20%;
	margin-right: 20%;
	padding: 15px;
	width: 60%;
}
#article:after{
	clear:both;
    display:table;
    content:'';
}
#article h2{
	font-size: 1.3em;
	margin-bottom:15px;
}
#article p{
	line-height: 150%;
	margin-bottom: 15px;
}
#footer{ 
	border-top: 1px solid #ccc;
	font-size: .8em;	
	text-align: center;
	padding: 10px 10px 30px 10px;
}
#nav ul, #header h1, .wrapper, #footer p {
	max-width: 1200px;
	margin: 0 auto;	
}
.wrapper, #nav, #header, #footer{
	min-width: 768px;
}

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

Следующая пара стилей управляет отображением шапки (хедера) и заголовка страницы:

#header{ 
	background-color: #f4f4f4;
}
#header h1 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: bold;
	padding: 30px 30px 30px 10px;
	clear: both;
}

Следующий набор стилей управляет созданием горизонтальной панели навигации:

#nav {
	background-color: #eee;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#nav li {
	float: left;
	list-style: none;	
}
#nav a {
	display: block;
	color: black;
	padding: 10px 25px;
	text-decoration: none;
	border-right: 1px solid #ccc;
}
#nav li:last-child a {
	border-right: none;	
}
#nav a:hover {
	font-weight: bold;
}
#nav:after {
	content: " ";
	display: table;
	clear: both;
}

В одной из прошлых тем подробно обсуждалось создание горизонтальной панели навигации. В принципе здесь ничего нового не добавляется: для элементов <li> устанавливается обтекание (float: left;), благодаря чему они размещаются в ряд, а каждая ссылка делается блочным элементом (display: block;)

Далее идет настройка средней части страницы, в частности, сайдбаров:

.wrapper{
	background-color: #f7f7f7;
}
.aside h2 {
	font-size: 0.95em;
	margin-top: 15px;
}
.aside h3 {
	font-size: 0.85em;
	margin-top: 10px;
}
.aside p, .aside li {
	font-size: .75em;
	margin-top: 10px;	
}
.aside li{ 
	list-style-type: none;
}
#sidebar1 {
	float: left;
	width: 20%;	
	padding: 0 10px 0 20px;
}
#sidebar2 {
	float: right;
	width: 20%;	
	padding: 0 20px 0 10px;
}

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

Далее следуют стили блока основного содержимого и футера:

#article{
	background-color: #fafafa;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	margin-left: 20%;
	margin-right: 20%;
	padding: 15px;
	width: 60%;
}
#article:after{
	clear:both;
    display:table;
    content:'';
}
#article h2{
	font-size: 1.3em;
	margin-bottom:15px;
}
#article p{
	line-height: 150%;
	margin-bottom: 15px;
}
#footer{ 
	border-top: 1px solid #ccc;
	font-size: .8em;	
	text-align: center;
	padding: 10px 10px 30px 10px;
}

Поскольку боковые панели имеют ширину в 20% каждая, то для главного блока устанавливается ширина в 60% и отступы справа и слева в 20%.

И в конце идет пара довольно важных стилей:

#nav ul, #header h1, .wrapper, #footer p {
	max-width: 1200px;
	margin: 0 auto;	
}
.wrapper, #nav, #header, #footer{
	min-width: 768px;
}

В начале для ряда селекторов определяется максимальная ширина в 1200 пикселей. Это значит, что основные элементы страницы не выйдут за пределы 1200 пикселей. А автоматический внешний отступ слева и справа позволит центрировать содержимое элементов. То есть при ширине браузера в 1400 пикселей эти элементы с шириной в 1200 пикселей будут размещаться как бы по середине, а справа и слева будут отступы шириной в (1400-1200)/2 = 100 пикселей.

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

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

В итоге у нас получится следующий простенький макет:

Создание макета в HTML и CSS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850