ПР01. Верстка сайта используя стандарт HTML5 и CSS3

Разбиение на блоки

Первое что не обходимо сделать это разбить на основные состовляющие(блоки) наш прототип.

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

Но каждый большой блок может делиться на более мелкие блоки или часть. Как например панель навигации.

Наша панель навигации делиться на два блока: эмблему сайта и меню с разделами сайта.

Пример 0. Разбивка страницы на основные компонеты

Не забываем читать коментарии в разметки HTML и стилях CSS

Создание меню

Для меню существует специальный тэг <NAV>. Для удобства лучше всего пункт меню поместить в список.

					
<nav>
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
		<li>FAQ</li>
		<li>About</li>
	</ul>
</nav>
					
				

Оставив так разметку без добавления стилей мы получим просто список в несколько строк. Для того чтобы список стал горизонтальным необходимо воспользоваться свойством display: inline-block;

					
nav ul li {
	display: inline-block;	/* вкл/выкл свойтсво в браузере для эксперимента */
}
					
				

Пример 1. Меню в строку(читаем коментарии)

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

					
<nav>
	<ul>
		<li><a href="">One</a></li>
		<li><a href="">Two</a></li>
		<li><a href="">Three</a></li>
		<li><a href="">FAQ</a></li>
		<li><a href="">About</a></li>
	</ul>
</nav>
					
				

					
nav a {
	display: block;		/* теперь все ссылки в меню блочные */
	padding: 2rem 2rem; /* если ссылка не отображается как блочный элмент - то не все отступы сработают */
	text-decoration: none; /* убрать подчёркивание */
	color: #000; 		   /* вместо синего цвета как у всех ссылок - сделаем название меню черным */
}

/* небольшая реакция на действия пользователя */
nav a:hover {
	background-color: #56a0d3;	/* при наведению на любую из ссылок меню бужет меняться цвет фона под ней */
}
					
				

Пример 2. Меню в соответсвии с прототипом

Шапка сайта

В шапке нашего прототипа кроме меню находится и логотип фирмы. Оба они расположены горизонтально(визуально как бы в одну строку).

Один из способов разместить два блока по разным краям это воспользоваться свойством float.

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

Да и пожалуй самое главное это пустой элемент <div> со свойством clear:both; отменющим все обтекания.

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

					
<header>
	<!-- Логотип находится слева -->
	<div id="logo">
		<a href="/">
			<figure>
				<img src="img/logo.png">
			</figure>
			<span>Multi color</span>
		</a>
	</div>
	
	<!-- Меню находится справа -->
	<nav>
		<ul>
			<li><a href="">One</a></li>
			<li><a href="">Two</a></li>
			<li><a href="">Three</a></li>
			<li><a href="">FAQ</a></li>
			<li><a href="">About</a></li>
		</ul>
	</nav>
	
	<!-- Не забываем отменить обтекание иначе не имело смысла использовать float свойтсва для элементов -->
	<div style="clear:both;"></div>
</header>
					
				

					
nav {
	float: right;		/* теперь меню плавующее - прижимаем его к правому краю шапки */
	width: 60%;			/* дадим ширину в 60% от ширины родителя, т.е HEADERа */
	text-align: right; /* выравнивание содержимого по правой границе */
}

#logo {
	float: left;	/* логотип будет наоборот по правому краю шапки */
	width: 35%;		/* логотипу дадим только 30% шапки; оставшиеся 5% родителя пойдут в качестве пространства между блоками */
}
					
				

Пример 3. Готовая шапка главной страницы

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

Фотогалерея

Для представления фотогалерии в ряд воспозуемся свойством display:inline-block;, а так же атрибутом class="". Атрибут class="" может принимать сразу же несколько имён классов, чем мы и воспользуемся

Создадим класс .pic для всех картинок, по скольку у всех них есть общие свойтсва(такие как ширина, высота, выравнивания...). Но и есть разные свойства и пожалуй самое существенное отличие это адрес рисунка. По этому были созданы ещё четыре отдельных класса .one, .two, .three, .four которые отличаются адресом рисунка для отображения.

					
<main>
	<article class="pic one">
		<header>Image</header>
	</article>
	
	<article class="pic two">
		<header>Image</header>
	</article>
	
	.......
	
<main>
					
				

					
.one 	{ background-image: url(img/1.jpg); }
.two 	{ background-image: url(img/2.jpg); }
.three 	{ background-image: url(img/3.jpg); }
.four 	{ background-image: url(img/4.jpg); }

.one, .two, .three, .four {
	background-position: center;	/* положение фонового рисунка в нутри блока */ 
	background-size: cover;			/* масштабирование */
}
					
				

Обратите внимание на свойства background-position - обеспечивающее положение фонового рисунка и background-size: cover; - благодаря которому происходит масштабирование рисунка по размеру блока

Пример 4. Практически завершённая главная страница

Для тех кто спрашивал про счётчики в CSS - смотрите исходники по четвёртому примеру. Там всё написано