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

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

 

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

 

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

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

 

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

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

 

 

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

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

 

Заключение.

 

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

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

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