Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 20. Юзабилити, схема футера, свойство background: мультифон и градиент

Содержание курса

Юзабилити и доступность сайтов

Юзабилити (usability) - это удобство интерфейса сайта, простота и логичность расположения элементов управления. Другими словами сайт должен быть не только красивым, но и удобным.

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

Следует избегать информационного шума на страницах своего сайта. Если интернет магазин продаёт, скажем, смартфоны, а первой на сайте идёт вступительная статья о том, какая замечательная у них компания, то это - информационный шум и пользователь, скорее всего уйдёт с сайта. В таком примере первым делом должна идти информация непосредственно о товаре, а всё, что товара не касается, располагаться в конце страницы.

Правило "7+2" касательно меню сайта - рекомендуется делать не больше 5-7 пунктов в каждом меню.

"Хлебные крошки" сайта помогают пользователю вернуться на ранее посещённые им страницы и не заблудиться на сайте. Это что-то вроде истории посещений или полного пути, который в виде ссылок непринуждённо светится где-то на странице сайта.

Если на вашем сайте есть такой раздел, как новости, то они должны постоянно выходить с определённой периодичностью, а не "умереть" на какой-то дате. Такая мелочь может оттолкнуть посетителей от вашего сайта.

Схема прижатого к низу футера

Футер сайта (footer) - это самый нижний блок на страницах. Рассмотрим в примере ниже как это можно реализовать в коде html/css:

<!DOCTYPE html>
	<html>
		<head>
			<title>Схема футера сайта</title>
			<style>
			
				html, body, #box {
					height: 100%;
					}
					
				#box {
					width: 700px; 
					margin: auto;
					}
					
				#top {
					background: #bfb; 
					min-height: 100%;
					margin-bottom: -150px;
					}
					
				#top p {
					margin: 0 50px;
					}
					
				footer {
					background: #ccf;
					height: 150px; 
					width: 700px;
					}
					
				#empty {
					height: 150px;
					}
					
			</style>
		</head>
		<body>
			<div id="box">
				<div id="top">
					<p>text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					</p>
					<div id="empty"></div>
				</div>
				<footer></footer>
			</div>
		</body>
	</html>

Перво-наперво мы прописываем у всех родительских элементов блока c id="top" высоту в 100%, а у самого этого блока - минимальную высоту в 100%, чем добиваемся растягивания блока top на всю высоту области просмотра и области прокрутки браузера.

Однако теперь блок <footer> у нас съехал вниз. Чтобы это устранить, для блока с id=top задан отрицательный нижний margin, значение которого (по модулю) равно высоте блока <footer>, т.е. 150px.

После этих действий возникает такая проблема: отрицательный margin позволяет блоку <footer> наезжать на абзац в блоке с id=top. Чтобы от этого избавиться в блоке с id=box создан пустой служебный блок с id="top", для которого задана высота в 150px (равная высоте блока <footer>), от которой и отталкивается блок <footer>. В иоге мы получаем такой результат:

Это кросс-браузерный способ. Все элементы html и правила css, используемые в нём, доступны, начиная с 7-го Internet Explorer, а значит такая вёрстка будет отображаться идентично во всех браузерах и на любых мобильных устройствах. К минусам этого способа можно отнести введение служебного элемента - блока с id="empty".

Рассмотрим теперь способ без служебного элемента:

<!DOCTYPE html>
	<html>
		<head>
			<title>Схема футера сайта</title>
			<style>
			
				html, body, #box {
					height: 100%;
					}
					
				#box {
					width: 700px;
					margin: auto;
					}
					
				#top {
					background: #bfb; 
					min-height: calc(100% - 150px);
					}
					
				#top p {
					margin: 0 50px;
					}
					
				footer {
					background: #ccf;
					height: 150px;
					width: 700px;
					}
					
			</style>
		</head>
		<body>
			<div id="box">
				<div id="top">
					<p>text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					text text text text text text text text text text
					</p>
				</div>
				<footer></footer>
			</div>
		</body>
	</html>

В коде этого примера всё тоже самое, что и в предыдущем, но без служебного блока "empty". Здесь мы использовали функционал calc(), который работает, начиная с 9-го Internet Explorer. Он высчитает стопроцентную высоту блока top за минусом блока <footer>, высота которого 150px. Обратите внимание: слева и справа от знаа "минус" должны стоять пробелы. Таким образом, у нас получился тот же самый результат только одним действием.

Свойство background

Свойство background применяется для задания фона элемента, с ним мы уже ранее знакомились (7 урок курса) рассмотрим это свойство более подробно.

Когда мы задаём фон для элемента, он занимает три области: content box, padding box, border box и ограничен областью border box. О том, что это за области рассказано в 18 уроке.

Если в качестве фона выступает картинка и нужно задать координаты фоновой картинки у элемента для какой-то конкретной области, то используется свойство background-origin, в значении которого указывается нужная область: padding-box, border-box или content-box.

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство background</title>
			<style>
			
				#a {
					height: 200px; 
					padding: 50px; 
					border: 20px dashed red;
					background: silver url(fon.jpg) no-repeat;
					background-origin: content-box;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Содержимое в блоке "a"</div>
		</body>
	</html>

Указание свойства background-origin имеет смысл только если фоновая картинка не повторяется (background: no-repeat;)

Свойство background-size управляет размерами фоновой картинки. В значении можно указать растягивание картинки по ширине и высоте в процентах:
background-size: 100% 50%;

Свойство background-clip управляет обрезкой фона до одной из трёх областей элемента (content box, padding box, border box). В значении нужно указать требуемую область: background-clip: content-box;

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство background-clip</title>
			<style>
			
				#a {
					height: 200px; 
					padding: 50px; 
					border: 20px dashed red;
					background: silver;
					background-clip: content-box;
					}
			</style>
		</head>
		<body>
			<div id="a">Содержимое в блоке "a"</div>
		</body>
	</html>

Для этого примера вид в браузере будет таким:

Как видно фон применён только для области content box.

Мультифон - несколько фоновых рисунков

Раньше, когда одному элементу требовалось установить в качестве фона несколько картинок, эта задача решалась несколькими блоками, вложенными друг в друга, для каждого из которых задавалась своя картинка. Теперь, начиная с 9-го Internet Explorer появилась возможность использования мультифона. Это означает, что для одного и того же элемента можно задать несколько фоновых рисунков:

<!DOCTYPE html>
	<html>
		<head>
			<title>Мультифон</title>
			<style>
			
				#a {
					height: 200px;
					border: 2px solid blue;
					background: url(fon.jpg) no-repeat, 
					100% 0 url(fon-2.jpg) no-repeat,
					0 100% url(fon-3.jpg) no-repeat, 
					100% 100% url(fon-4.jpg) no-repeat;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Содержимое в блоке "a"</div>
		</body>
	</html>

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

Здесь есть нюанс: если помимо нескольких фонов вам нужно указать ещё и цвет фона, то его нужно прописывать в последнем значении!

Градиентный фон - linear-gradient.

Градиент - это плавный переход цвета от одного к другому. Градиентная заливка фона поддерживается начиная с 10-го Internet Explorer. Рассмотрим пример кода, где используется градиентный фон:

<!DOCTYPE html>
	<html>
		<head>
			<title>Мультифон</title>
			<style>
			
				#a {
					height: 200px;
					border: 2px solid blue;
					background: linear-gradient(to bottom right, red, green,
					yellow) repeat-x;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Содержимое в блоке "a"</div>
		</body>
	</html>

В скобках значения linear-gradient() указаны направление градиента (к низу от право), переходные цвета (от какого к какому)

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля