Доброго дня уважаемые.
Я хотел бы в дальнейшем, рассказать в виде урока о том, как я верстал шаблон, на чем я основывался принимая решения по верстке данного шаблона.
Итак, нашел в просторах интернета такой вот не сложный, но и не легкий шаблончик.
Исходник были взяты от сюда
http://www.premiumpi...e-template-psd/
Для начала, перед версткой любого макета, нужно понимать следующие вещи:
- Никогда не верстайте на таблицах, это уже забытое ремесло.
- Вы должны посмотреть на макет глазами конечного пользователя/заказчика.
- Определите изначально, что может пойти нитак, что могут попросить переделать.
- Постройте в голове принцип, работы этого макета.
Давайте теперь посмотрим на макет, который я нашел...Итак:
- Сразу бросается в глаза то, что макет выполнен в шаблоне 980px
- Дальше обращаем внимание на фон вне нашего главного блока (980px в дальнейшем враппер), и видим то, что для каждого отдельного элемента на странице у него отдельные правила по фону.
- Так же обращаем внимание на "текстуру" фона, она не сплошной заливки, а с эффектом "шума" (берем на заметку).
- Так же обращаем внимание на текстуру фона для блока слайдера - косые линии. (тоже берем на заметку)
- Есть "странный" визуальный эффект того, что средний блок враппер налезает на "шапку" и "футер"
Увеличенные куски фона шаблона:
Думаю на этом основные замечания которые бросаются в глаза пока заканчиваются...
Так же есть технические вариации... а именно:
- Есть блок с копирайтами, который по логике вещей, должен всегда быть "прилеплен" к нижней части окна браузера, т.к. если такое случится и на странице не будет хватать контента для заполнения на всю высоту так, что бы появился скролл у страницы, то блок с копирайтами окажется где-то по середине экрана - не красиво.
- Есть вариант того, что заказчик захочет сделать так, что б верхний блок навигации всегда был на экране (зафиксированным)
Итак, приступим к планированию создания каркаса для нашего шаблона.Первое что я сделал, это разделил весь наш шаблон на 6 основных частей:
- Верхнее меню навигации [b](#[/b]nav_bar)
- Шапка [b](#[/b]header)
- Слайдер [b](#index_slider)[/b]
- Контент [b](#[/b]content)
- Футер [b](#[/b]footer)
- Копирайты (#copyright)
- Добавил в каждый из этих блоков "Враппер" (.[b]wrapper), тот самый который будет делать 980px и выравнивать по центру[/b]
Код:
<div id="nav_bar" class="bg_noise_black">
<div class="wrapper">
{nav_bar}
</div>
</div>
<div id="header" class="">
<div class="wrapper">
{header}
</div>
</div>
<div id="index_slider" class="hatch">
<div class="wrapper">
{index_slider}
</div>
</div>
<div id="content" class="bg_noise_white">
<div class="wrapper">
{content}
</div>
</div>
<div id="footer">
<div class="wrapper">
{footer}
</div>
</div>
<div id="copyright" class="bg_noise_white">
<div class="wrapper">
{copyright}
</div>
</div>
И начнем постепенно писать CSS таблицу (стили):
(уважаемые верстальщики/программисты и т.д., убедительная просьба, запомнить! Что
атрибут "ID" на странице может быть только один согласно W3C, и если вы хотите многократно применять группу правил CSS к разным элементам на странице -
используйте классы, как сейчас будет использоваться класс
.wrapperbody {
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 горизонтальные линии на всю длину - в самом начале и в самом конце футера.
В самом конце футера, она должна относиться к копирайту соответственно (т.к. он у нас приклеенный к низу страницы).
А верхняя полоска уже будет к футеру.
Полоску в коирайтах, я решил сделать обычными дивами.
[indent=1]
Футер - КопирайтПоэтому делим копирайт еще на 2 части.[/indent]
- Линия сверху
- Див с нашим контентом уже в коирайте.
<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;}
[indent=1]
Футер -Верхняя линия[/indent]
[indent=1]Для создания линии сверху футера, я буду использовать псевдо-классы (
after/before) - которые делают симуляцию блока В БЛОКЕ к которому применен псевдо-класс. Следовательно, футер является родителем элемента, который мы опишем CSS.
#footer:after, так же нам надо будет его позиционировать абсолютно. Для того, что б элемент позиционировался относительно своего родителя, у родителя должно быть свойство
position: relative;. Так же, CSS элемент (виртуальный наш) создастся раньше чем HTML элемент, поэтому возникнет проблема с позиционирование по Z координатам. (линия получится поверх нашего wrapper), нам понадобится указать еще дополнительно
z-index для нашей линии и враппера соответственно.[/indent]
/** Футер **/
#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>
#footer_holder {padding: 0 25px 25px}
#footer_overlay {
height: 65px;
background-color: #fff;
margin-bottom: 40px;
}
#f_overlay_line {
text-align: right;
padding: 0 40px;
font-style: italic;
cursor: pointer;
height: 40px;
line-height: 40px;
margin: 0 25px;
position: relative;
}
#btt_arrow {
position: absolute;
top: 15px; right: 25px;
width: 10px; height: 10px;
background: transparent url(img/sprites.png) -10px 0;
display: block;
}
Как видите, я в
#btt_arrow использую
спрайт, что такое вообще спрайт? Спрайт это изображение, в котором содержится множество мелких изображений, вот пример спрайта, который я уже отдельно сделал:
Как видите, здесь все виды стрелочек которые используются в шаблоне, так же кнопки со слайдера, разделители в менюшка и если сильно присмотреться - то по бокам спрайта еще есть тени. Которые мы будем использовать для оформление боковых теней в блоках слайдер, и контент.
Использовать достаточно просто...
Рассмотрим
#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:
#index_slider_footer {
height: 36px;
margin: 0 25px;
}
А сверху, я заранее сделаю общий класс,который буду использовать в будущем, для отображения названия страниц, на которой будет находиться пользователь.
<div class="page_title hatch">
<!--<a href="#">{page_title}</a>-->
<!--<h2>{page_title}</h2>-->
</div>
/* Название страницы*/
.page_title {
margin: 0 25px;
height: 20px;
line-height: 20px;
font-size: 16px;
}
.page_title h2,.page_title a {
background: #fff;
padding-right: 15px;
display: inline-block;
font-style: italic;
font-weight: bold;
color: #444444;
}
.page_title a:hover {color: #3b3b3b}
.page_title a:active {color:#2c2c2c}
Шапка, наконец, дошли до шапки....Все элементы в нашей шапке, я решил позиционировать абсолютно, что автоматически добавляет свойство 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}
Вот то, что у меня получилось под конец первого урока:
Ну и конечно прилагаются исходники того, что я сейчас тут постарался рассказать на столько, на сколько смог
lesson00.rar ( 61,38 килобайт )
Кол-во скачиваний: 271Сразу хочу попросить прощения за качество изображений, которые прилагаются в посте, размер прикрепленных файлов - ограничен суммой в 300Кб, старался вписаться.
Сообщение сайта
Урок (Viewport)#1 - основная разметка, спрайты, общие принципы
c0ns0l3
50 
5.10.2013, 17:39;
Ответить: isvetlichniy
