—»     —»   Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице
  Раздел: Руководства   Нет комментариев  

Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице



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

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

Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице

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

Сегодня мы собираемся задействовать jQuery-слайдер для отображения мини-портфолио прямо на главной странице, сразу под основным разделом. Так как это довольно объемный этап работы, мы разобьем его на два руководства. Для начала займемся разработкой HTML-кода, а также структурой контента для нашего основного раздела, а затем мы внедрим jQuery, и сделаем наш слайдер адаптивным. Продолжайте заниматься разработкой, но для начала посмотрите на результат, который вы получите по окончании работы.

Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице

Давайте начнем с нашего файла 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 -->

На данном этапе, если вы сохраните всю проделанную работу и включите предварительный просмотр, то, прокрутив страницу чуть ниже основного раздела на главной странице, вы увидите нечто похожее на то, что показано на изображении ниже.

Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице

Выглядит это все таким образом потому, что мы пока еще не применили 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;
}

На этом мы завершаем стадию разработки слайдера с мини-портфолио. Если вы сейчас посмотрите на проделанную работу, то наверняка увидите нечто подобное.

Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице

Не забудьте также внедрить jQuery, чтобы сделать слайдер адаптивным. Если вы хотите скачать полный исходный код примера из нашего руководства, то сделать это можно здесь!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 9362   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Медицинские весы
Электронные весы для новорожденных. Доступные цены. Доставка
весы-жироанализаторы.рф
Вывод из запоя на дому
Профессиональные наркологи. Срочный выезд на дом - круглосуточно. Звоните
narkodetox.ru
Купить кастрюли в интернет магазине недорого
купить кастрюли в интернет магазине недорого
dosh-home.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930