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

~ДРУиД~

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

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

03 June 16 г. Автор - admin


Продолжим оформлять внешний вид сайта. Шапка сайта с прошлого урока уже выглядит в соответствии с тем дизайном сайта, который был выбран. Перейдем к основным блокам сайта: контент и боковое меню.

 

Боковое меню.

 

Начнем с него. В боковом меню будет несколько блоков: ссылки на рубрики сайта, реклама на сайте, самое читаемое в данный момент.

Для этого создадим три контейнера div с id=”menu”, а также объединим эти три контейнера в один общий с id=”main_menu”. И каждым блокам укажем свои стили. HTML код полученного безобразия подхода.

 

<div id="main_menu">
			<div id="menu">
				РУБРИКИ:
				</br>
				Ссылки
			</div>
			<div id="menu">
				Реклама на сайте
			</div>
			<div id="menu">
				Самое читаемое:
			</div>
		</div>

 

А это таблица стилей для данной реализации:

 

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

#menu{
	background: #FFF;
	padding: 5px;
	border-radius: 8px;
	margin-bottom: 5px;
}

 

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

 

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

 

Теперь заполним блок РУБРИКИ.  Здесь будут отображаться ссылки на рубрики сайта.

Для шаблона создадим 3 пустые ссылки и оформим их в соответствии с выбранным дизайном.

 

<div id="menu">
				<div style="text-align: center; font-size: 120%;"><b>РУБРИКИ:</b></div>
				</br>
				<div id = "menu_a"><a href="#">Ссылка 1</a></div>
				<div id = "menu_a"><a href="#">Ссылка 2</a></div>
				<div id = "menu_a"><a href="#">Ссылка 3</a></div>
			</div>

 

Таблица стилей:

 

#menu_a{
    background-image: url(../images/arrow.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding: 0 0 0 20px;
	margin-bottom: 5px;
    border-bottom: 2px solid #E7EBED;
}

#menu_a a{
	text-decoration: none;
}

 

Получилось вот так:

 

 

Как видно наш подвал немного не на своем месте. Для этого в блоке, который отделяет подвал от контента, высотой в 20 px, пропишем дополнительное свойство clear.

 

<div style="height: 20px; clear: right;"></div>

 

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

 

 

Теперь подвал сайта там, где и нужен. Продолжим работы со ссылками. Изменим цвет ссылки при наведении курсора мышки.

 

#menu_a a:hover{
	color:#8B864E;
}

 

Перейдем к блоку реклама на сайте. Расположим здесь картинку, призывающую поместить рекламу на нашем сайте.

 

<h3 style="color: #008B00; text-align: center; margin: 0;">Реклама на сайте</h3>
                <img src="images/banner_1.jpg" style="width: 210px; height: 120px; margin-left: 60px;" alt="Реклама на сайте" title="Реклама на сайте"/>

 

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

 

 

Оформим блок самое читаемое. Название блока отцентруем и не много изменим стиль заголовка.

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

 

<div id="menu">
				<div style="font-size: 120%; text-align: center;"><b><i>Самое читаемое:</i></b></div></br>
				<div id="popular_a"><a href="#">Статья 1</a></div>
				<div id="popular_a"><a href="#">Статья 2</a></div>
				<div id="popular_a"><a href="#">Статья 3</a></div>
			</div>

 

Оформим для данного блока стили.

 

#popular_a{
    padding: 0 0 0 10px;
	margin-bottom: 5px;
	text-align: center;
}

#popular_a a{
	text-decoration: none;
	color: #00008B;
}

#popular_a a:hover{
	color:#8B864E;
}

 

Итог:

 

 

Внешний вид становится более дружелюбным.

 

Основной контент.

 

Приступим к оформлению основного контента. В основном контенте будут отображаться статьи с краткими описаниями. Так же будет присутствовать информация о дате публикации статьи и об авторе публикации.

 

			<div>
				<div id ="name_article"><a href="#">Название статьи</a></div>
				<div id ="autor">Автор и дата публикации</div>
<div id="key_desc_article">
					<p>Краткое описание статьи</p>
				</div>
				<div id="link"><a href="#">подробнее...</a></div>
			</div>

 

При таком разбиении блоков внешний вид получился следующим:

 

 

Поработаем со стилями, придадим более интересный вид.

Начнем с названия статьи.

Увеличим немного шрифт, отцентруем и т.д. Код HTML:

 

<div id ="name_article">
				<h2 class="title">
					<a href="#">Название статьи</a>
				</h2>
			</div>

 

Код CSS:

 

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-family: 'Abel', sans-serif;
	font-size: 36px;
	color: #3DA29B;
	text-align: center;
}

.title {
	height: 41px;
	padding: 7px 0px 0px 0px;
	letter-spacing: -1px;
}

.title a {
	text-decoration: none;
	border: none;	
	color: #3A4648;
}
.title a:hover {
	text-decoration: underline;
	border: none;	
	color: #00008B;
}

 

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

 

 

Для даты публикации и автора статьи используем следующие стили:

 

#autor {
	margin-left:30px;
	font-size:90%;
	color: 787878;
}

.date {
	float: left;
}

.autor_name {
	margin-right: 30px;
	float:right;
}

 

Далее для текста статьи сделаем красную строку, немного увеличим шрифт и т.д.

Код CSS примет вид:

 

#key_desc_article{
	font-size: 110%;
}

#key_desc_article p{
	text-indent: 25px;
}

 

Для ссылки «подробнее…» тоже напишем свои стили.

 

#link {
	font-weight:bold;
	color: blue;
}

#link a{
	text-decoration:none;
}

#link a:hover{
	text-decoration:underline;
}

 

Для большей наглядности добавим больше текста в статью и разместим три статьи.

Итог представлен ниже.

 

 

Посмотреть, как это все выглядит в браузере можно по следующей ссылке.

Архив с данным получившимся шаблоном находится здесь.

 

Заключение.

 

На сегодняшнем уроке мы отредактировали центральную часть сайта и бокового меню. Дизайн сайта принимает законченный вид. Подвал сайта и некоторые другие мелочи оставим для следующего раза.


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



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

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

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


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

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

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


Верстка дизайна сайта. Оформляем «подвал» - блок футер.

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

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

В прошлой статье мы сделали необходимую основную разметку сайта блоками. Разметка сделана стандартно: header, content, menu, footer. В этой статье раскрасим станицу сайта. И Оформим шапку (header) нашего сайта.



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



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

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

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

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

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

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

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


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