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

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

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

Для этого создадим три контейнера 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;
}

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

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

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

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

Заключение.

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