В этой части руководства мы собираемся заняться разработкой дополнительного контента, расположенного на главной странице. На данном этапе ваш сайт должен выглядеть приблизительно следующим образом.
У вас должно быть полноэкранное фоновое изображение, которое изменяется в размере, адаптируясь под разрешение экрана, основная панель навигации, а также небольшая сноска, которая привлечет внимание посетителей, и мотивирует их продолжить просмотр сайта. Наилучшим способом привлечения внимания пользователей считается то, когда вы предлагаете свои лучшие творения прямо на главной странице. Как только вы пробудите в них интерес, они продолжать кликать по ссылкам, переходить по страницам.
Сегодня мы собираемся задействовать jQuery-слайдер для отображения мини-портфолио прямо на главной странице, сразу под основным разделом. Так как это довольно объемный этап работы, мы разобьем его на два руководства. Для начала займемся разработкой HTML-кода, а также структурой контента для нашего основного раздела, а затем мы внедрим jQuery, и сделаем наш слайдер адаптивным. Продолжайте заниматься разработкой, но для начала посмотрите на результат, который вы получите по окончании работы.
Давайте начнем с нашего файла index.php. После того, как мы закроем наш div «mainBG», нам нужно будет открыть еще один div для второго раздела, который и будет содержать в себе слайдер-портфолио. Мы дали ему незатейливое название «mainBG2». Далее нам нужно будет применить еще кое-что к нашему id «container» таким образом, чтобы наш контент был выравнен по центру страницы. Затем мы добавили в дизайн раздел «Articles» в левую часть шапки сайта. Сразу под закрывающим тэгом нашего div’а «mainBG», наш код выглядит следующим образом.
<div id="mainBG2" class="homeContent" data-type="background">
<div id="container">
<div class="articlesHeader">Articles</div>
</div><!--end div "container"-->
</div><!--end div "mainBG2"-->
Как только структура нашего второго раздела, предназначенного для портфолио, завершена, мы можем создать HTML-структуру, необходимую для нашего слайдера. Вы можете наполнить её любым необходимым вам контентом, мы же используем пару статей. Как видно, мы имеем возможность вставлять сюда изображения и текст. Вам нужно будет расположить его после нашего класса «articlesHeader», но перед закрывающим div’ом «container».
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<h3>A Look At Responsive Web Design</h3>
<img src="images/responsive.jpg" />
<div class="hideSmall"><img src="images/responsivesmall.jpg" /></div>
<p>By Scott Stanton</p>
<p>Responsive web design is widely thought of as a design trend, but it's much more than that.</p>
<p>It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device. It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time.</p>
<p>In this tutorial, we take a look at what responsive web design entails for the developer.</p>
<p>Read the full article <a href="http://www.developerdrive.com/2011/12/a-look-at-responsive-web-design/" target="_blank">here</a>.</p>
<hr />
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<h3>Designing a Clean Website: Navigation</h3>
<img src="images/clean1.jpg" />
<div class="hideSmall"><img src="images/clean1small.jpg" /></div>
<p>By Scott Stanton</p>
<p>There is one design style that can withstand the fluctuating trends that come and go in the design world, and that is to have a clean, simple, minimalist site.</p>
<p>Think of sites like Apple and The New York Times. One thing you will notice that they all have in common is perfectly executed use of white space.</p>
<p>This tutorial will take you through the development process and point out things to consider along the way to keep your site looking like a modern, polished, website, not something from the 90's.</p>
<p>Read the full article <a href="http://www.developerdrive.com/2011/11/designing-a-clean-website-navigation/" target="_blank">here</a>.</p>
<hr />
</div>
</div>
</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->
На данном этапе, если вы сохраните всю проделанную работу и включите предварительный просмотр, то, прокрутив страницу чуть ниже основного раздела на главной странице, вы увидите нечто похожее на то, что показано на изображении ниже.
Выглядит это все таким образом потому, что мы пока еще не применили CSS-стили к нашему разделу с портфолио. Итак, открывайте документ main.css, и продолжайте разработку.
В HTML-коде нашего портфолио мы использовали тэг h3 для того, чтобы дать имя каждому слайду и, так как они указаны в самом верху нашего файла каскадных таблиц, мы применим этот стиль перед тем, как добавлять новые элементы.
h3{
font-size:1.7em;
color:#474E51;
border-bottom: 3px solid #6BA5BD;
margin-bottom: 5%;
padding-bottom: 3px;
text-align: center;
}
После того, как наш тэг h3 оформлен, мы можем приступить к оформлению новых элементов типа #mainBG2 и .articlesHeader. Что касается #mainBG2, то здесь у нас будет идентичный стиль с #mainBG, за исключением того, что мы добавили верхнюю границу для того, чтобы отделить его от верхнего изображения и, конечно же, изменили изображение. Класс .articlesHeader довольно прост – мы применили цвет, который создал плавное сочетание цвета логотипа с более мягким цветом текста, а затем применили к блоку тень.
#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/big2.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.articlesHeader {
margin-top:6%;
width:24%;
height:6%;
background-color:#C15007;
color:#FFD08C;
font-size:1.5em;
-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
text-align:center;
line-height:50px;
text-transform:uppercase;
font-weight:bold;
}
Теперь, когда мы закончили работу над фоновым изображением и заголовком блока «Articles», мы можем приступить к оформлению HTML-раздела для слайдера. Ввиду большого объема кода, необходимого для оформления нашего слайера, мы просто поместили заметки в CSS-коде с объяснениями функции каждого тэга.
.slider-wrap { /* This helps position the side arrows vertically */
margin: 2% 0;
position: relative;
width: 100%;
}
.stripViewer { /* This is the main viewing window */
position: relative;
overflow: hidden;
margin: auto;
width:675px;
height: 70%;
clear: both;
}
.stripViewer .panelContainer { /* This is the container housing all of our slides. Width is calculated and specified by the JS */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width:675px;
}
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding:3% 5%;
}
.wrapper p, wrapper ul { /* The text inside each slide */
font-size: 1.1em;
line-height:1.2em;
}
.wrapper a { /* Any links inside each slide */
text-decoration:none;
color:#C15007;
}
.wrapper a:hover { /* Any links inside each slide */
text-decoration:underline;
}
.wrapper img { /* Any image inside each slide */
float:left;
margin-right:5%;
-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
.wrapper hr { /* Any horizontal rule inside each slide */
height: 3px;
background-color:#6BA5BD;
border:0;
margin-top:6%;
}
.stripNav ul { /* The auto-generated set of links, which I chose to hide */
list-style: none;
}
/* These are tabs created by the java, I also chose to hide these */
.stripNav li.tab1 a { display:none; }
.stripNav li.tab2 a { display:none; }
.stripNav li.tab3 a { display:none; }
.stripNav li.tab4 a { display:none; }
.stripNav li.tab5 a { display:none; }
.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a { /* The left and right arrows */
display: block;
height: 40px;
width: 40px;
}
.stripNavL { /* The left and right arrows */
position:absolute;
left:0;
}
.stripNavR { /* The left and right arrows */
position:absolute;
right:0;
}
.stripNavL { /* The left and right arrows */
background: url("images/arrow-left.png") no-repeat center;
}
.stripNavR { /* The left and right arrows */
background: url("images/arrow-right.png") no-repeat center;
}
.hideSmall img { /* This is a smaller version of our main slider image that should only be displayed on mobile phones */
display:none;
}
На этом мы завершаем стадию разработки слайдера с мини-портфолио. Если вы сейчас посмотрите на проделанную работу, то наверняка увидите нечто подобное.
Не забудьте также внедрить jQuery, чтобы сделать слайдер адаптивным. Если вы хотите скачать полный исходный код примера из нашего руководства, то сделать это можно здесь!