Рейтинг@Mail.ru
Верстка дизайна сайта. Оформляем «подвал» - блок футер - ДРУиД
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Верстка дизайна сайта. Оформляем «подвал» - блок футер.

Статья опубликована: 2016-06-30/21:14:27-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 своими руками. Данный цикл будет носить более обучающий характер, с необходимыми иллюстрациями, ссылками на источники информации, интересные статьи в РУНЕТе на данною тематику и видео материалы.

 

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

 


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



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

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

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

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

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


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



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

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


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


РУБРИКИ:








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

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

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

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


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика