Рейтинг@Mail.ru
Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР - ДРУиД: Верстка шаблона сайта своими руками.
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.

Статья опубликована: 2017-03-03/11:01:57-admin

Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.



Часть I. Верстка шаблона сайта на основе макета фотошопа.

Статья №3. Верстка шапки сайта. Блок ХИДЕР.

 

Рассмотрим макет сайта. Шапка представляет собой три функциональных блока.

  • Название сайта, совмещенное с формой поиска по сайту.
  • Центральный кейс с картинкой и основными тегами тематики сайта.
  • Горизонтальное меню навигации по сайту.

Создадим файл стилей для сайта. Приаатачим его к индексному файлу.

 

<link rel="stylesheet" type="text/css" href="style/style.css"/>

 

Подключение данного файла стилей происходит ниже по коду, чем дефолтный файл CSS.

Блок ХИДЕР, содержащий название сайта, а также форму поиска по сайту будет иметь следующее содержание:

 

	<header>
		<div class="header-block">
			<div class="search">
				<form action="#" method="post">
					<input class="search-image" type="image" src="images/find.jpg" alt="Поиск по сайту" title="Поиск по сайту">
					<input class="search-text" type="text" placeholder="Поиск..." title="Введите поисковую фразу">
				</form>
			</div>
			<div class="slogan">
				<p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p>
				<p class="slogan-text">Дом рационально-умный и душевный</p>
			</div>
		</div>
	</header>

 

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

Пример:

 

<div class="slogan">
				<p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p>
				<p class="slogan-text">Дом рационально-умный и душевный</p>

 

Контейнер ДИВ с классом «slogan» является родителем обзацев ПЭ. У обзацев ПЭ имена классов содержат имя родителя: «slogan-name». То есть элемент класса «slogan-name» является дочерним класса «slogan» и отвечает за название слогана. А элемент класса «slogan-text» является также дочерним класса «slogan» и отвечает за речевку слогана. В файле стилей будет проще идентифицировать объект.

 

Файл стилей имеет следующее содержание:

 

/* --------------- Шапка сайта ---------*/
header {
	background-color: #31333b;
}
	.header-block{
		height: 100%;
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.search{
		height: 100%;
		float: right;
	}
		.search-text[type="text"] {
			background-color:#24272d;
			border: 1px solid #875f66;
			color:#5b636e;
			padding-left: 5px;
			margin-top: 21px;
		}
		.search-text:focus{
			border: 1px solid #fff;
		}
		.search-image {
			float: right;
			margin-top: 12px;
		}
	.slogan {
		height: 100%;
		float: none;
	}
		.slogan-name {
			padding-top: 5px;
			font-weight: bold;
			font-size: 150%;		
		}
		.slogan-name a {
			text-decoration: none;
			color: #a5adb8;
		}
		.slogan-text {
			padding-top: 5px;
			color: #656f7a;
			padding-bottom: 5px;
		}
/* --------------- /Шапка сайта ---------*/

 

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

 

Далее приведу весь код индексного файла касающегося блока ХИДЕР:

 

	<header>
		<div class="header-block">
			<div class="search">
				<form action="#" method="post">
					<input class="search-image" type="image" src="images/find.jpg" alt="Поиск по сайту" title="Поиск по сайту">
					<input class="search-text" type="text" placeholder="Поиск..." title="Введите поисковую фразу">
				</form>
			</div>
			<div class="slogan">
				<p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p>
				<p class="slogan-text">Дом рационально-умный и душевный</p>
			</div>
		</div>
	</header>
	<div class="main-slogan">		
		<div class="main-slogan-name"><span>ДРУиД - Дом Рационально-Умный и Душевный</span></div>
		<div class="main-slogan-text">
		<span>Строительство частного "Умного" дома своими руками</span> <br/>
		<span>Изучение МК STM32</span><br/>
		<span>Материалы по сайтостроению</span><br/>
		<span>Изготовление девайсов для быта и не только</span></div>
	</div>
	<menu>
		<nav>
			<ul class="navigation-nav-ul-left">
				<li class="navigation-nav-ul-li-left"><a href="#" title="Главная" class="navigation-nav-ul-li-left-a">Главная</a></li>
				<li class="navigation-nav-ul-li-left"><a href="#" title="Файлы" class="navigation-nav-ul-li-left-a">Файлы</a></li>
				<li class="navigation-nav-ul-li-left"><a href="#" title="Видеоматериалы" class="navigation-nav-ul-li-left-a">Видеоматериалы</a></li>
				<li class="navigation-nav-ul-li-left"><a href="#" title="Форум" class="navigation-nav-ul-li-left-a">Форум</a></li>
				<li class="navigation-nav-ul-li-left"><a href="#" title="Карта сайта" class="navigation-nav-ul-li-left-a">Карта сайта</a></li>				
			</ul>
			<ul class="navigation-nav-ul-right">
				<li class="navigation-nav-ul-li-right"><a href="#" class="navigation-nav-ul-li-right-a" title="Войти">Войти</a></li>
				<div class="navigation-nav-ul-right-div">или</div>
				<li class="navigation-nav-ul-li-right"><a href="#" class="navigation-nav-ul-li-right-a" title="Зарегистироваться">Зарегистироваться</a></li>
			</ul>
		</nav>
	</menu>
	<div class="bread">
		<nav class="bread-nav">
			<ul>
				<li class="bread-nav-ul-li"><a href="#" class="bread-nav-ul-li-a" title="Главная">Главная</a> /</li>
				<li class="bread-nav-ul-li"><a href="#" class="bread-nav-ul-li-a" title="Рубрика №1">Рубрика №1</a> /</li>
				<li class="bread-nav-ul-li" title="Статья №1">Статья №1</li>
			</ul>
		</nav>
	</div>

 

 

А также код файла стилей:

 

/* --------------- Шапка сайта ---------*/
header {
	background-color: #31333b;
}
	.header-block{
		height: 100%;
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.search{
		float: right;
	}
		.search-text[type="text"] {
			background-color:#24272d;
			border: 1px solid #875f66;
			color:#5b636e;
			padding-left: 5px;
			margin-top: 21px;
		}
		.search-text:focus{
			border: 1px solid #fff;
		}
		.search-image {
			float: right;
			margin-top: 12px;
		}
	.slogan {
		height: 100%;
		float: none;
	}
		.slogan-name {
			padding-top: 5px;
			font-weight: bold;
			font-size: 150%;		
		}
		.slogan-name a {
			text-decoration: none;
			color: #a5adb8;
		}
		.slogan-text {
			padding-top: 5px;
			color: #656f7a;
			padding-bottom: 5px;
		}
/* --------------- /Шапка сайта ---------*/

/* --------------- Центральный кейс сайта ---------*/
.main-slogan {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	background-image: url(../images/main.jpg);
}
	.main-slogan-name {
		margin-left: 40px;
		padding-left: 5px;
		font-weight: bold;
		font-size: 120%;
		color: #fff;
		padding-top: 110px;		
	}
	.main-slogan-name span {
		padding: 0 5px 0 5px;		
		background-color: rgba(0, 0, 255, 0.7);
	}
	.main-slogan-text {
		margin-left: 40px;
		margin-top: 15px;
		color: #000;
		padding-bottom: 15px;
	}
	.main-slogan-text span {
		padding: 0 5px 0 5px;
		background-color: rgba(255, 255, 255, 0.8);
	}
/* --------------- /Центральный кейс сайта ---------*/

/* --------------- Горизонтальная навигация сайта ---------*/
menu {
	background-color:#95161f;
	height: 40px;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;	
}
	.navigation-nav-ul-left {
		float: left;
		padding-top: 8px;
	}
	.navigation-nav-ul-li-left {
		float: left;
		padding-left: 25px;
	}
	.navigation-nav-ul-li-left-a:hover {
		border-bottom: 2px solid #fff;		
		text-decoration: none;
		color: #fff;
	}
	.navigation-nav-ul-li-left-a {
		color: #fff;
		text-decoration: none;
		font-size: 120%;
	}
	.navigation-nav-ul-right {
			float: right;
			padding-top: 11px;
			font-size: 89%;
	}
	.navigation-nav-ul-li-right {
		float: left;
		padding-right: 15px;
	}
	.navigation-nav-ul-right-div{
		float: left;
		padding-right: 15px;
		color: #000;
	}
	.navigation-nav-ul-li-right-a:hover {
		color: #fff;
		text-decoration: none;
	}
	.navigation-nav-ul-li-right-a {
		color: #fff;
		text-decoration: underline;
	}
/* --------------- /Горизонтальная навигация сайта ---------*/

/* --------------- Хлебные крошки сайта ---------*/
.bread {
	height: 25px;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	background-color: #e3e3e3;
}
	.bread-nav {
		padding-top: 3px;
		padding-left: 30px;
	}
	.bread-nav-ul-li {
		float:left;
		padding-right: 2px;
		font-size: 82%;
	}
	.bread-nav-ul-li-a:hover {
		color: #95161f;
		text-decoration: underline;
	}
	.bread-nav-ul-li-a {
		color: #95161f;
		text-decoration: none;
	}
/* --------------- Хлебные крошки сайта ---------*/

 

Посмотреть на все это можно по следующей ссылке.

 

Видео данного урока представлено ниже.

 

 

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

 

Заключение.

 

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

 


Просмотров: 892



Комментарии: (0)

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

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Рекомендованные статьи:



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


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


РУБРИКИ:








Последняя статья:

Часть I. Статья №6. Верстка подвала – блока футтер

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

Читать далее »


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика