Рейтинг@Mail.ru
Создаем общий вид сайта. Оформляем шапку сайта - ДРУиД: Дизайн сайта своими руками.

~ДРУиД~

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

ДРУиД - Дом Рационально-Умный и Душевный
Строительство частного "Умного" дома своими руками
Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Создаем общий вид сайта. Оформляем шапку сайта.

05 April 16 г. Автор - admin


В цикле создания сайта | блога своими руками, автор будет описывать создания данного ресурса ~ДРУиД~. Так что за образец по дизайну и оформлению автор будет использовать собственный ресурс (http://druid.su).

В прошлой статье мы рассмотрели инструментарий для разработки сайтов своими руками.В данной статье начнем верстать шаблон нашего сайта. И так приступим...

Лирическое отступление.
Данный дизайн и оформление не является идеальным по многим параметрам. Но автор, так же как и читатели учится, и пытается сделать данный ресурс более интересным как по оформлению, так и по содержанию. Хотя дизайн сайта является более менее стандартным в данной категории ресурсов РУНЕТа.

 

Фон сайта.

 

Начнем с фона сайта. Скачаем картинку по данной ссылке. Теперь замостим наш фон на странице. Это сделаем в файле стилей, применим к элементу body. То есть в файле style.css изменим следующие строчки:

body {
	background: #F7F8F9 url(../images/img01.jpg) repeat;
	font: 15px/20px Tahoma, Arial, Sans-Serif;
}

 

Вот что получилось.

 

 

Так же шапке сайта зададим фоновый рисунок.

 

Качаем следующий рисунок по данной ссылке. Добавляем в свойство блока header нашу картинку.

 

#header {
	background: #ff00cc url(../images/img02.jpg) repeat;
	max-height: 200px;
	min-height: 100px;
	height: 150px;
	text-align: center;
	padding: 5px;
}

 

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

 

Итого таблица стилей станет вот такой.

 

#content {
	width: 68.5%;
	margin-right: 1.5%;
	background: #FFF;
	padding: 5px;
}

#menu {
	width: 28.5%;
	margin-left: 1.5%;
	background: #FFF;
	float: right;
	padding: 5px;
}

#fotter {
	width: 100%;
	height: 150px;
	text-align: center;
	padding: 5px;
}

 

Результат на данный момент:

 

 

Теперь давайте немного скруглим наши прямоугольные области контента и бокового меню. Используем свойство border-radius. По пикселей 8 хватит. Добавим это свойство в таблицу стилей блоку контент и меню.

 

border-radius: 8px;

 

В итоге внешний вид:

 

 

Оформляем шапку сайта.

 

Начнем с логотипа сайта. У читателя может быть собственный логотип. Автор будет использовать логотип ресурса ~ДРУиД~. Скачать данный логотип можно здесь. Размеры картинки: 200х113 px.

 

В коде страницы, в блоке header, добавим блок logo.

 

 

Теперь пропишем стили данному блоку, чтоб картинка была в левом углу шапки, и последующий текст её обтекал справа.

 

#logo{
	text-align: left;
	float: left;
	width: 21%;
	margin: 17px 15px 17px 15px;
} 

 

Вот что вышло:

 

 

Справа от логотипа, укажем основные ссылки сайта: Главная, Видеоматериалы, Файлы,  Форум.

 

Данные ссылки сделаем в виде списка в отдельном блоке.

 

Ширину блока установим в 75%, и сделаем отступ слева в 25%.

 

#head_menu{
	width: 75%;
	margin-left: 25%;
}

 

Исходный код HTML:


 

Итог:

 

 

Теперь немного поколдуем со стилями, для более «благородного вида».

Уберем «точки» у списка:

list-style-type: none;

 

Все ссылки расставим в одну строчку, установим отступы, чтоб текст ссылок не сливался, шрифт ссылок изменим на Verdina, увеличим шрифт до 170%, цвет ссылки сделаем белым, а также уберем подчеркивание ссылок, при наведении курсора мышки на ссылку будем окрашивать её в чёрный цвет, и добавлять подчеркивание. Вот такая таблица стилей получилась.

 

#head_menu ul {
	list-style-type: none;
}

#head_menu ul li {
	float: right;
	margin: 5px 5px 5px 10px;
	font-family: Verdina;
	font-weight: bold;
	font-size: 170%;
}

#head_menu ul li a {
	color: #FFF;
	text-decoration:none;
}

#head_menu ul li a:hover {
	color: #000;
	text-decoration:underline;
}

 

Итог:

 

 

Добавим блок с id=”search”. В данном блоке расположим форму, в форме два поля с типом текст и submit. Вот так изменился код страницы:

 


 

А вот таблица стилей для данной формы.

 

#search {
	margin: 25px 5px 5px 5px;
}

 

Вот внешний вид:

 

 

Ну и напоследок создадим ссылку ниже формы поиска на карту сайта.

 


 

Таблица стилей для данного блока:

 

#site_map {
	margin: 15px 5px 5px 10px;
	font-family: Verdina;
	font-weight: bold;
	font-size: 170%;
}

#site_map a {
	color: #FFF;
	text-decoration:none;
}

#site_map a:hover {
	color: #000;
	text-decoration:underline;
}

 

Вот что из этого вышло:

 

 

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

Давайте организуем.

Вот такой код получился.

 

ДРУиД - Дом Рационально Умный и Душевный. Строительство частного "Умного" дома своими руками. Изучение МК STM32. Материалы по сайтостроению.

 

Таблица стилей для данного блока:

 

#slogan {
	width:25%;
	float: left;
	padding-top: 15px;
}

 

Итог:

 

 

Теперь для визуального эффекта, когда бумажное объявление наклеено на доску объявлений, и нижний край у объявления немного приподняты от доски. Для такого эффекта понадобится свойство box-shadow.

Вот код таблицы стилей для блока header.

 

box-shadow: 0 5px 5px rgba(0,0,0,0.5);

 

Визуальный эффект можно посмотреть по следующей ссылке.

 

Заключение.

 

Дизайн сайта уже приобретает необходимый вид. Шапка сайта оформлена. В следующий раз автор рассмотрит блоки контента и бокового меню.

 


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



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

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

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


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

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

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


Создаем общий вид сайта. Оформляем блоки контент и меню.

В прошлой статье мы оформили шапку (header) сайта, а также установили общий вид всей страницы целиком. В этой статье оформим основной блок - контент, а также боковое меню.

Верстка дизайна сайта на ДИВах (HTML+CSS).

В этой статье автор рассмотрит вопрос о верстки шаблона сайта. Использовать будем HTML и CSS. Верстать шаблон сайта будем по блочной технологии (на тегах div). Шаблон будет стандартный: верхнее меню (шапка, хидер), основной блок (контент), боковое меню и нижнее меню (подвал).



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



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

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

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

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

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

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

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


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