Дом рационально-умный и душевный
Рассмотрим макет сайта. Шапка представляет собой три функциональных блока.
Создадим файл стилей для сайта. Приаатачим его к индексному файлу.
<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
На прошлом уроке была сверстана шапка сайта. Блок «хлебных крошек». Оформление шаблона соответствует макету, а содержание тематике блога (сайта). Сегодня приступим к верстке правого бокового меню. В нем будет содержаться навигация по рубрикам сайта, размещен рекламный блок, анонс последней вышедшей статьи, а также блок с самыми читаемыми статьями на ресурсе.
На прошлом уроке был выбран макет будущего сайта, установлены необходимые инструменты. Сегодня приступим к конкретной реализации. Начнем верстать шаблон нашего сайта (блога).
РУБРИКИ САЙТА:
С промежуточным итогом по современным системам оплаты труда ознакомились. Теперь вернемся к нашим попугаям. Для чего менять существующую систему? На что опираться при формировании новой системы? Как учесть все пожелания работодателя (читай цели, возлагаемые на работника)? Как не ущемить права работника, не потерять квалифицированного сотрудника, поднять мотивацию и увеличить производительность труда? Начнем разбираться.
САМОЕ ЧИТАМОЕ:
|
|
|