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

~ДРУиД~

Дом рационально-умный и душевный

ДРУиД - Дом Рационально-Умный и Душевный
Строительство частного "Умного" дома своими руками
Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.

03 March 17 г. Автор - admin


Часть 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;
	}
/* --------------- Хлебные крошки сайта ---------*/

 

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

 

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

 

 

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

 

Заключение.

 

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

 


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



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

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

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


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

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

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


Часть I. Статья №4. Верстка правого бокового меню.

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

Часть I. Статья №2. Основная разметка. Reset CSS.

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



РУБРИКИ САЙТА:



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

Выбор системы оплаты труда - изобретаем велосипед

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

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

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

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

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


Рейтинг@Mail.ru Яндекс.Метрика