Рейтинг@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 своими руками. Данный цикл будет носить более обучающий характер, с необходимыми иллюстрациями, ссылками на источники информации, интересные статьи в РУНЕТе на данною тематику и видео материалы.

 

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

 


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



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

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

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


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

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

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


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

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

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

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

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



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



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

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

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

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

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

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

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


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