Перейти к содержимому

Сервис обмена электронных валют


Урок (Viewport)#1 - основная разметка, спрайты, общие принципы

#1 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49
11

Отправлено 03 Октябрь 2013 - 11:47

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

Итак, нашел в просторах интернета такой вот не сложный, но и не легкий шаблончик.
Исходник были взяты от сюда http://www.premiumpi...e-template-psd/

viewport-pp.jpg

Для начала, перед версткой любого макета, нужно понимать следующие вещи:
  • Никогда не верстайте на таблицах, это уже забытое ремесло.
  • Вы должны посмотреть на макет глазами конечного пользователя/заказчика.
  • Определите изначально, что может пойти нитак, что могут попросить переделать.
  • Постройте в голове принцип, работы этого макета.
Давайте теперь посмотрим на макет, который я нашел...Итак:
  • Сразу бросается в глаза то, что макет выполнен в шаблоне 980px
  • Дальше обращаем внимание на фон вне нашего главного блока (980px в дальнейшем враппер), и видим то, что для каждого отдельного элемента на странице у него отдельные правила по фону.
  • Так же обращаем внимание на "текстуру" фона, она не сплошной заливки, а с эффектом "шума" (берем на заметку).
  • Так же обращаем внимание на текстуру фона для блока слайдера - косые линии. (тоже берем на заметку)
  • Есть "странный" визуальный эффект того, что средний блок враппер налезает на "шапку" и "футер"
Увеличенные куски фона шаблона:
Спойлер


Думаю на этом основные замечания которые бросаются в глаза пока заканчиваются...

Так же есть технические вариации... а именно:
  • Есть блок с копирайтами, который по логике вещей, должен всегда быть "прилеплен" к нижней части окна браузера, т.к. если такое случится и на странице не будет хватать контента для заполнения на всю высоту так, что бы появился скролл у страницы, то блок с копирайтами окажется где-то по середине экрана - не красиво.
  • Есть вариант того, что заказчик захочет сделать так, что б верхний блок навигации всегда был на экране (зафиксированным)
Итак, приступим к планированию создания каркаса для нашего шаблона.

Первое что я сделал, это разделил весь наш шаблон на 6 основных частей:
  • Верхнее меню навигации (#nav_bar)
  • Шапка (#header)
  • Слайдер (#index_slider)
  • Контент (#content)
  • Футер (#footer)
  • Копирайты (#copyright)
  • Добавил в каждый из этих блоков "Враппер" (.wrapper), тот самый который будет делать 980px и выравнивать по центру
viewport-pp_razmetka.jpg

Код:
Спойлер


И начнем постепенно писать CSS таблицу (стили):
(уважаемые верстальщики/программисты и т.д., убедительная просьба, запомнить! Что атрибут "ID" на странице может быть только один согласно W3C, и если вы хотите многократно применять группу правил CSS к разным элементам на странице - используйте классы, как сейчас будет использоваться класс .wrapper

body {
	width: 100%;
	height:100%;
	color:#555555;
	font-size: 12px;
	font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif
}
/** Основной враппер 980px **/
	.wrapper {
		margin: 0 auto;
		width: 980px;
		height: 100%;
	}
  • Тут мы описали небольшие стартовые настройки цвета и шрифта на странице в теге body
  • Описали наш класс wrapper с внешним отступом Сверху = 0 все остальные стороны auto и самое главное, с шириной в 980px;
И добавим немножко стилей сразу на перед для всех остальных наших блоков, что бы иметь небольшое визуальное представление о них на странице:
#nav_bar {
		height: 35px;
		border-bottom: solid 1px #3d3d3d; /*сразу добавляем линию снизу*/
	}
#header {
		height: 208px;
	}
#index_slider {
		height: 382px;
		background-color: #fafafa;
		position: relative;
	}
#footer {
		min-height: 200px;
}
#copyright {
	height: 60px;
}


Займемся "фонами":
Я вырезал с шаблона (паттерн для косых линий - прозрачный), и сгенерировал самостоятельно паттерн с эффектом шума.

Изображения:
Спойлер


Сделаем (опишем) классы с нашими фонами.

/**Фоны с шумом **/
	.bg_noise_white ,.bg_noise_black, .bg_noise_gray, .bg_noise_tint {
		background-image: url(img/noise.png);
		background-repeat: repeat;
	}
	.bg_noise_white {background-color: #fafafa;}
	.bg_noise_black {background-color: #232323;}
	.bg_noise_gray  {background-color: #2d2d2d;}
	.bg_noise_tint  {background-color: #353535;}

/** Фоны с линиями **/
	.hatch {
		background-image: url(img/hatch.png);
		background-repeat: repeat;
	}

Благодаря тому, что я использую прозрачную PNG с шумом и с Линиями - я могу самостоятельно при помощи CSS менять их задний цвет фона, таким образом я очень сильно сокращаю объемы передаваемых данных со стороны сервера к клиенту (noise.png - 10Kb, hatch.png - 170 байт)

Вернемся обратно к нашему шаблону, и посмотрим куда какой фон будем крепить.
Лично я принял решение, и оно получится в итоге единственным верным, что основной фон страницы будет темно серый (фон который используется на шапке и футере) - спросите почему? Потому, что в итоге как мы помним, мы будем делать "прилепленным" блок копирайтов, и в итоге футер имеет возможность не доставать до него по высоте, а согласно шаблону - нам нужно что бы он был темным. Поэтому на самом деле мы не будем использовать фон у Футера, он будет прозрачным, а под ним будем просматриваться фон с body.

Применяем соответственно классы к нашим блокам.

<body class="bg_noise_gray">..</body>
<div id="nav_bar" class="bg_noise_black">..</div>
<div id="index_slider" class="hatch">..</div>
<div id="content" class="bg_noise_white">..</div>
<div id="copyright" class="bg_noise_white">..</div>

На этом этапе, у нас начинает прорисовываться уже что-то похожее на наш шаблон.

Давайте теперь сразу займемся "прилепливанием" копирайтов к низу страницы.

Сделать это можно многими способами, даже с использованием JS, но мы пойдем "правильным" путем (мы же хорошие люди) и сделаем этот "финт" только при помощи CSS.
В чем заключается идея: а заключается она в том, что бы наш копирайт ВСЕГДА выходил ЗА границы нижней части окна браузера вне зависимости от количества контента во всех предыдущих блоках. Нам понадобится некий блок, который соберет в себя все предыдущие блоки до копирайтов, и будет иметь значение ВЫСОТЫ равным размеру окна браузера, но при большем количестве он растягивался далее и у нас появлялся скроллинг.
Поэтому я сделаю блок "page_holder" в который помещу nav_bar, header, index_slider, content и footer и дам ему следующие свойства:
/** 100% основной контент страницы **/
	#page_holder {
		width: 100%;
		margin: 0 auto;
		min-height: 100%;
		height: auto !important;
		height: 100%;
	}

Таким образом, наш блок копирайтов будет находится ЗА видимым окном браузера при условии что блоки, которые находятся в page_holder суммой высот не превышают высоту окна браузера, т.к. у этого page_holder стоит уже минимальная высота 100%. Теперь нам надо будет все же поднять копирайты вверх, притом подымаем мы его так, что он "как бы залазет" поверх блок page_holder
#copyright {
	margin: -60px auto 0;
	height: 60px;
}
** внешний отступ сверху блока копирайт = -60px **

Но и для того, что бы копирайт не налазел на контент последнего вложенного блока в page_holder нам потребуется поставить ему (последнему блок) внутренний отступ снизу на те же 60px, в нашем случаи это footer:
#footer {
		min-height: 200px;
		padding: 0 0 60px;
}


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

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

Полоску в коирайтах, я решил сделать обычными дивами.

Футер - Копирайт
Поэтому делим копирайт еще на 2 части.

  • Линия сверху
  • Див с нашим контентом уже в коирайте.
<div id="copyright" class="bg_noise_white">
		<div id="copy_line" class="bg_noise_tint"></div>
		<div id="copy_holder">
			<div class="wrapper">
				<div id="copy_content">
					Copyright © 2010 · All Rights Reserved
				</div>
			</div>
		</div>
</div>
Так же переносим враппер и сделаем еще отдельный вложенный во враппер блок, в котором укажим паддинг. Почему именно так, а не указать сразу паддинг по бокам во врапере? Можно конечно, но есть такая очень неудобная (лично для меня) штука, как то, что паддинг влияет на ширину дива.
Объясню: если мы ставим диву допустим ширину 100, и делаем паддинг (внутренний отступ) равным 20 по бокам, то ширина дива составит 20+100+20. И в нашем случаи, для того, что бы выравнять обратно врапппер до 980, нам прийдется убирать от него 50 пикселей, т.к. по шаблону отступы внутри враппера составляют по 25 пикселей.

Так же добавил к блок copy_line заготовленный ранее класс bg_noise_tint. Добавим к copy_holder высоту линии, что даст нам эффект линии по середине блока (вертикально) установив высоту линии равной высоте блока ну и цвета текста а так же размеры шрифта (берем все из шаблона)

Опишем CSS все это:
/** Копирайты **/
#copyright {
	margin: -60px auto 0;
	height: 60px;
}
	#copy_line {height: 10px;}
	#copy_holder {height: 50px;color: #999999; line-height: 50px;}
		#copy_content {padding: 0 25px; font-size: 11px;}

Футер -Верхняя линия


Для создания линии сверху футера, я буду использовать псевдо-классы (after/before) - которые делают симуляцию блока В БЛОКЕ к которому применен псевдо-класс. Следовательно, футер является родителем элемента, который мы опишем CSS. #footer:after, так же нам надо будет его позиционировать абсолютно. Для того, что б элемент позиционировался относительно своего родителя, у родителя должно быть свойство position: relative;. Так же, CSS элемент (виртуальный наш) создастся раньше чем HTML элемент, поэтому возникнет проблема с позиционирование по Z координатам. (линия получится поверх нашего wrapper), нам понадобится указать еще дополнительно z-index для нашей линии и враппера соответственно.


/** Футер **/
	#footer {
		color: #999999;
		padding: 0 0 60px;
		position: relative;
	}
	#footer:after {
		content: '';
		width: 100%;
		position: absolute;
		left: 0; top:0;
		height: 10px;
		background-color: rgba(250,250,250,.06);
		z-index: 5;
	}
#footer .wrapper {position: relative; z-index: 10;}

Теперь сделаем симуляцию "продолжения" нашего блока контента, который как-бы залазет на футер.
Понадобятся новые дивы... footer_overlay, f_overlay_line (добавляем класс hatch - косые линии) и footer_holder (делаем тот же эффект с отступами для самого контента футера как и с копирайтами, и по той же приниче). <span id="btt_arrow"> будет наша стрелка вверх. (согласно шаблону)

<div id="footer">
			<div class="wrapper">
				<div id="footer_overlay">
					<div id="f_overlay_line" class="hatch">Back to Top<span id="btt_arrow"></span></div>
				</div>
				<div id="footer_holder">
					{footer}
				</div>
			</div>
		</div>

Описываем CSS:
Спойлер



Как видите, я в #btt_arrow использую спрайт, что такое вообще спрайт? Спрайт это изображение, в котором содержится множество мелких изображений, вот пример спрайта, который я уже отдельно сделал:
sprites.png
Как видите, здесь все виды стрелочек которые используются в шаблоне, так же кнопки со слайдера, разделители в менюшка и если сильно присмотреться - то по бокам спрайта еще есть тени. Которые мы будем использовать для оформление боковых теней в блоках слайдер, и контент.
Использовать достаточно просто...

Рассмотрим #btt_arrow:
  • Создали блок 10х10 (именно столько в спрайте у нас выделено места под нашу стрелку
  • Устанавливаем фон наш спрайт background: transparent url(img/sprites.png) -10px 0;
  • где: [цвет фона] [путь изображения] [смещение Х] [смещение Y] [повторяться?]
  • таким образом, мы смещаем наше изображение на -10 пикселей влево (своего рода получается КРОП как в фотошопе, и т.к. наш виртуальный блок в спрайте под нашу нужную стрелку начинается с координат 10x,0y то получается что в блоке 10х10 какраз будет находится изображение с нашей стрелкой.
Пока говорим о спрайтах, займемся тенями для слайдера и контентом
По той же технологии, которую мы использовали для создания линии в футере (before/after) мы будем конструировать сейчас класс, который будет добавлять вертикальные тени по бокам блоков, к которым он будет применен. При этом мы будем использовать тени из спрайта, которые расположены по бокам спрайта и на всю высоту, для того, что бы мы могли его дублировать (repeat-y)

CSS:
/** Боковая тень **/
	.side_shadow {position: relative;}
	.side_shadow:before,.side_shadow:after {
		content: '';
		position: absolute;
		width:3px;
		height: 100%;
		top:0;
		background: transparent url(img/sprites.png) 0 0 repeat-y;
	}
	.side_shadow:before {left: -3px;}
	.side_shadow:after {right:-3px; background-position: -100px 0;}

И теперь применяем этот класс к врапперам в index_slider и content

<div id="index_slider" class="hatch">
			<div class="wrapper side_shadow">
....

<div id="content" class="bg_noise_white">
			<div class="wrapper side_shadow">
			 ....



Так же сразу сделаем по аналогии "холдеры" для них, это те самые блоки, которые будут управлять отступами внутри врапперов:

<div id="index_slider" class="hatch">
			<div class="wrapper side_shadow">
				<div id="index_slider_holder">
					{index_slider}
				</div>
			</div>
		</div>

<div id="content" class="bg_noise_white">
			<div class="wrapper side_shadow">
				<div id="content_holder">
					{<a href="#">content</a>}
				</div>
			</div>
		</div>


Добавляем горизонтальные линии в слайдере, похожие на те, которые мы видели в футере, добавляем по той же схеме:
/*Горизонтальные линии*/
		#index_slider:before, #index_slider:after {
			content: '';
			width: 100%;
			position: absolute;
			left: 0;
			height: 10px;
			background-color: rgba(250,250,250,.5);
			z-index: 5;
		}
		#index_slider:before	{top:0}
		#index_slider:after	 {bottom:0}
			#index_slider .wrapper {
				position: relative;
				z-index: 10;
				background-color: #fff;
			}


Начинаем оформлять блок враппера слайдера, используя холдер:
#index_slider_holder {
background: #666666;
margin: 15px 25px;
height: 300px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Нам понадобится еще два блока, что бы сделать косые линии сверху и снизу с классом косых линий:

<div id="index_slider_footer" class="hatch"></div>
CSS:
Спойлер

А сверху, я заранее сделаю общий класс,который буду использовать в будущем, для отображения названия страниц, на которой будет находиться пользователь.
<div class="page_title hatch">
					<!--<a href="#">{page_title}</a>-->
					<!--<h2>{page_title}</h2>-->
				</div>

CSS:
Спойлер


Шапка, наконец, дошли до шапки....
Все элементы в нашей шапке, я решил позиционировать абсолютно, что автоматически добавляет свойство position: relative к самому контейнера шапка...

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

Мне понадобится 2 основных блока (блок под меню, и блок под "подвал" шапки).

Получается такой HTML:
<div id="header">
			<div class="wrapper">
				{header}
				<div id="header_nav_container">
					{header_nav}
				</div>
				<div id="header_footer"></div>
			</div>
		</div>

"Подвал" шапки, мы разделим опять же таки псевдо-классами (before/after) на 2 горизонтальные части.

Описываем CSS:
/** Шапка */
	#header {
		height: 208px;
	}
	#header .wrapper {position: relative}
		#header_nav_container {
			height: 56px;
			background-color: #282828;
			-webkit-border-top-left-radius: 10px;
			-webkit-border-top-right-radius: 10px;
			-moz-border-radius-topleft: 10px;
			-moz-border-radius-topright: 10px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			width: 100%;
			position: absolute;
			bottom: 23px; left:0;
		}
	  
		#header_footer {position: absolute; bottom:0; width:100%;height:23px;}
			#header_footer:before,#header_footer:after {
				content: '';
				position: absolute;
				width:100%;
				top:0; left: 0;			  
			}
			#header_footer:before{height:8px; background-color: #1e1e1e;}
			#header_footer:after {height:15px;top:8px;background-color: #fff;}


Ну и немного косметики... ссылки и все такое.
	/*Ссылки*/
	a {color:#e47600;text-decoration:none}
	a:hover{text-decoration:underline}
	a:active {color:#c76701}


Вот то, что у меня получилось под конец первого урока:
final.jpg


Ну и конечно прилагаются исходники того, что я сейчас тут постарался рассказать на столько, на сколько смог :)
Прикрепленный файл  lesson00.rar   61,38К   Количество загрузок: 223



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

 

 

  • 2

#2 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 05 Октябрь 2013 - 16:39

вроде все хорошо, но что то вот не то...
судя по первой строчке <!DOCTYPE HTML> - доктайп для html5
а вот в самой структуре ни одного элемента, да и структура документа никак не соответствует html5

ребята, 21 век на дворе, пора уже переходить на новые технологии. хотя css3 в шаблоне присутствует, слегка
  • 0

#3 c0ns0l3

c0ns0l3
    Topic Starter
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 05 Октябрь 2013 - 17:48

isvetlichniy,
<!DOCTYPE HTML> не обязует использовать элементы HTML5.
да, 21 век.. я с тобой полностью согласен, очень хочется использовать все прелести как CSS3 так и HTML5 - но увы статистика браузеров (которыми пользуются простые смертные) огорчает...
  • 2

#4 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 05 Октябрь 2013 - 20:53

не обязует использовать элементы HTML5.

согласен, только зачем его писать если по сути оно не используется?

а касательно браузеров, так проблемы по большому счету только у IE версии ниже 9-й
смотри что пишут источники

P.S. ни в чем никого не убеждаю, высказываю мнение :)
  • 0

#5 c0ns0l3

c0ns0l3
    Topic Starter
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 05 Октябрь 2013 - 21:06

Ну в любом случаи, доктайп нужен в основном только для валидаторов. А данный доктайп помимо того что короткий, легко набираемый (у меня он вообще в снипете просто) он так же поддерживает в валидаторе все вариации элементов которые могут быть использованы на данный момент в WEB 1.0 и так называемым WEB 2.0, и то, доктайп это абстрактное явление, которое ничего в данном случаи не сыграет на рендере браузером верстки сайта.

Это как пример.. когда покупаешь компакт, или скорее ты скачаешь с торрента игрушку, в которой будет написано - минимальные требования компа, который реально слабее твоего, это ж не означает что у тебя не пойдет эта игра и что б тебе поиграться в нее, тебе нужно продавать свое качественное железо, и покупать дрова :)
  • 1

#6 maksim_egorov

maksim_egorov
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 24 Февраль 2014 - 22:04

Спасибо очень познавательно.


  • 0


Оформление форума – IPBSkins.ru