Часть I. Статья №4. Верстка правого бокового меню.

Часть I. Верстка шаблона сайта на основе макета фотошопа.

Статья №4. Верстка правого бокового меню.

Если рассмотреть макет сайта, то правого бокового меню в нем нет. Но имеется слева основные элементы, входящие в его состав. Так что оформление из макета.

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

 

	

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

		Боковое меню

 

Стили пропишем следующие:

 

.center {
	width: 90%;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
}
	.center-content{
		width: 70%;
		float: left;
	}
	.right-side {
		width: 25%;
		float: right;	
	}

 

 

Теперь приступим непосредственно к верстке бокового меню.

 

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

 

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

 

Код индекснего файла имеет следующее содержание:

 

	

		

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

			
		

			

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

				Последняя статья на сайте длинное название
			

				

					Краткое описание статьи и т.д. и тому подобное. Краткое описание статьи и т.д. и тому подобное
			
		
	
	

		

			Я хочу получать новости по E-Mail
		

			   
	

 

Файл стилей приобрел описание классов следующего вида:

 

		.right-side-center {
			border: 1px solid #d8dbde;
		}
			.right-side-center-p {
				color: #282d33;
				font-size: 110%;
				font-weight: bold;
				font-style: italic;
				padding-left: 20px;
				font-family: sans-serif;
			}
			.right-side-center-li {
				background-image: url(../images/arrow.gif);
				background-repeat: no-repeat;
				background-position: left;
				padding: 0 0 0 15px;
				border-bottom: 2px solid #E7EBED;			
			}
				.right-side-center-li-a {
					font-size: 90%;
					color: blue;
					text-decoration: none;			
				}
			.right-side-center-rekl {
				max-width: 300px;
				padding: 1px;
				max-height: 300px;				
			}
				.right-side-center-rekl img {
					width: 298px;
					max-height: 298px;				
				}
			.right-side-center-last-article {
				width: 100%;
			}
				.right-side-center-last-article-name {
					text-align: center;
					color: #000;
					font-size: 110%;
					font-weight: bold;
				}
				.right-side-center-last-article-link {
					text-align: center;
				}
					.right-side-center-last-article-link-a {
						color: #971E27;
						font-weight: bold;
						text-decoration: none;
						font-size: 90%;						
					}
				.right-side-center-last-article-p {
					text-indent: 10px;
					color: #282d33;
				}
			.right-side-center-subshribe {
				margin: 2px;
				border: 1px solid #989da1;
				text-align: center;
				background-color: #6E6E6E;				
			}
				.right-side-center-subshribe-name {
					font-style: italic;
					font-weight: bold;
					font-size: 110%;
					color: #FFF;				
				}
				.right-side-center-subshribe-input-text {
					width: 90%;
					background-color: #e3e4e5;
					border: 2px solid #fff;
					font-size: 110%;
					color: #707275;			
				}
				.right-side-center-subshribe-input-text[type="text"] {
					padding-left: 5px;
				}
				.right-side-center-subshribe-input-text:focus {
					border: 2px solid #772211;
				}

 

 

Блок со списком самых читаемых статей на ресурсе будет простым. Заготовок блока и ссылки на название статей.

 

	

		САМОЕ ЧИТАМОЕ:
	

 

 

 

Стили тоже не замысловатые:

 

		.right-side-top-articles {
			width: 80%;
			margin: 0 auto;
		}
			.right-side-top-articles-head{
				color: #000;
				font-weight: bold;
				text-align: center;
				font-family: 'Fira Sans',sans-serif;				
			}
			.right-side-top-articles-a:hover {
				text-decoration:none;
			}
			.right-side-top-articles-a {
				text-decoration: none;
				font-size: 89%;
				color: #1010ff;
			}

 

Видео данного урока представлено ниже.

 

 

 

 

Внешний вид сайта на данном этапе можно посмотреть здесь.

 

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

 

P.S.

Автор данного цикла статей далеко не дизайнер и даже не имеет хоть какого-то представления о художественной стилистике. Так что прошу покорно извинить, если дизайн сайта выглядит не модно или красочно. Главная тема показать, что верстать сайты на HTML и CSS не так уж и сложно. До новых встреч!

 

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

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