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

~ДРУиД~

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

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

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


В цикле статей по верстке дизайна сайта на ДИВах (HTML+CSS) автор ресурса ~ДРУиД~ делился своим опытом в сайтостроении. Данный цикл статей посвящен верстке сайта на HTML и CSS. Сегодняшняя статья станет заключительная. В данной статье оформим подвал сайта.

 

На данный момент внешний вид сайта выглядит следующим образом. В подвале сайта – блоке футер, поместим ссылки на контакты, форму обратной связи, справку, раздела faq, а также ссылку на rss – ленту, вставим копирайт сайта. Приступим.

 

Блок footer.

 

Код самого футера в данный момент выглядит так:

 

<div id="fotter">Подвал сайта</div>

 

Ссылки сделаем в виде списка, разместим в одну строку, а также добавим копирайт.

 

		<div id="fotter">
			<ul>
				<li><a href="#">Справка</a></li>
				<li><a href="#">Обратная связь</a></li>
				<li><a href="#">Вопросы и ответы</a></li>
				<li><a href="#">Контакты</a></li>
				<li><a href="#">RSS - лента</a></li>
			</ul>
			<div style="font-weight: normal; color: green; float: right;">&copy;2016, ДРУиД - Дом Рационально-Умный и Душевный</div>
			<br/>
		</div>

 

Код CSS для данного блока выглядит следующим образом:

 

#fotter {
	width: 100%;
	padding: 5px;
}

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

#fotter ul li {
	font-weight: bold;
	font-size: 16px;
	margin-left: 20px;
	float: left;
}

#fotter ul li a {
	color: #B8860B;
	text-decoration: none;
}

#fotter ul li a:hover {
	color: blue;
	text-decoration: underline;
}

 

Внешний вид подвала сайта стал выглядеть следующим образом:

 

 

Общий вид дизайна сайта можно посмотреть по этой ссылке.

Архив с данной версткой сайта можно скачать отсюда.

 

Вместо заключения.

 

 

Цикл статей о верстке шаблона сайта ресурса ~ДРУиД~ получился немного скомканным и довольно в сжатом изложении, без поясняющих иллюстраций, ссылок на источники информации по HTML и CSS, а также без конкретной цели и обучающего уклона. Данный материал для новичков, наверное, не самое лучшее руководство для начала обучения, а для гуру или продвинутых сайтостроителей вообще бесполезен. Но автор оформил своё умение и знание в данной области: верстка дизайна сайта своими руками.

 

Заключение.

 

Данное изложение материала стимулировало автора ресурса ~ДРУиД~ выпустить цикл статей по теме: Верстка дизайна сайта на основе шаблона PSD своими руками. Данный цикл будет носить более обучающий характер, с необходимыми иллюстрациями, ссылками на источники информации, интересные статьи в РУНЕТе на данною тематику и видео материалы.

 

Подписывайтесь на новостную рассылку и будьте в курсе выхода новых статей, материалов, новостей, видео и уроков ресурса ~ДРУиД~.

 


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



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

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

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


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

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

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


Часть I. Статья №1. Выбор макета для сайта.

В цикле статей по верстке дизайна сайта на ДИВах (HTML+CSS) автор ресурса ~ДРУиД~ делился своим опытом в сайтостроении, на примере верстки шаблона собственного ресурса. Цикл получился скомканным и не информативным.

Новый цикл статей будет носить более обучающий характер с видеоотчетами и ссылками на полезные ресурсы. Этот цикл статей положит начало всему разделу «Создание сайта | блога | своими руками».

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

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



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



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

Часть I. Статья №6. Верстка подвала – блока футтер

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

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

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

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

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


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