Создаем инновационный сайт-портфолио, применяя альтернативный UI/UX

создание сайта портфолио

От автора: Лауреат премии awwward, уникальный сайт-портфолио Пола Дж. Нобла (Paul J Noble) привлек внимание множества людей, и в том числе не только клиентов. Сегодня в своем учебнике он продолжит объяснять раздел дизайна и продемонстрирует его кодирование.

Детали учебника

Сложность: Средняя

Тема: HTML, CSS

Примерное время выполнения: 1 час

создание сайта портфолио

демо

Шаг 1: Что мы создаем

результат

Примером портфолио в данном учебнике используется великолепный вебсайт ROA (Швеция). Этот сайт был недавно представлен на Creattica и его автор не связан с ROA. Не стесняйтесь в качестве элементов портфолио использовать свои собственные работы.

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

Создание шаблона HTML и CSS подготовит нас к следующему разделу этого учебника, где мы с помощью Javascript добавим пользовательского взаимодействия и вдохнем в проект жизнь.

Шаг 2: Устанавливаем шаблон

Создайте в своем любимом текстовом редакторе документ html. Присоедините jQuery (1.4.2+) и новый пустой файл CSS.

Первой созданной нами разметкой будет div, содержащий весь контент. Попозже мы установим значения минимальной высоты и ширины для этого div’а (‘#page’) для гарантии того, что модель масштабируется при более низком разрешении. Создайте еще несколько div’ов для представленных ниже основных элементов страницы.

<!DOCTYPE html>
    <html>
    <head>
        <title>Your Name - Digital Portfolio</title>
 
        <link rel="stylesheet" href="css/master.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
 
    <body>
    <div id="page">
        <div id="header">
            <div class="inner">
                <div id="logo"><img src="img/icons/logo.png" alt="Your Name Here"/></div>
 
                <div id="social"> <!-- Social media buttons --> </div>
                <div id="nav"> <!-- Global nav --> </div>
            </div>
 
        </div>
 
        <div id="horizon">
 
            <div id="main">
                <div id="gallery"> <!-- The image grid --> </div>
 
                <div id="leftCol"> <!-- Text annotations --> </div>
            </div>
 
        </div>
 
    </div>
 
    </body>
    </html>

установка шаблона

Шаг 3: Заголовок

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

Хотя визуально он размещается внизу, на самом деле он окажется поверх разметки документа. Мы создадим div с ID ‘header’, а затем вложенный div с классом ‘inner’. Скрытый упаковщик упростит размещение внутренних элементов.

Внутри упаковщика мы создадим три div’а; ‘#logo’, ‘#social’ и ‘#nav’.

Для создания логотипа мы вложим файл изображения под названием ‘img/icons/logo.png’ и добавим немного текста. Создайте файл с изображением логотипа, вырезав свой лого из PSD. Так как его нужно абсолютно позиционировать, точный размер неважен – однако убедитесь, что изображение-логотип подходит к колонке навигации проекта.

заголовок

Для кнопок социальных сетей нам понадобятся три указателя – по одному для Facebook’а, Flickr’а и LinkedIn. У них будут фоновые изображения, применяемые как графика, однако мы все еще будет использовать в семантических целях текст и скроем их с помощью CSS. Для внешних ссылок мы употребим атрибут target=’_blank’, чтобы страницы открывались в новой вкладке или окне.

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

<div id="header">
    <div class="inner">
        <div id="logo"><img src="img/icons/logo.png"/></div>
 
        <div id="social">
            <a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
 
            <a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
            <a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>
            </div>
 
        <div id="nav">
            <a class="about" href="about" id="aboutBtn">About</a>
            <a class="photos" href="photos" id="photoBtn">Photography</a>
 
            <a class="workActive" href="work" id="workBtn">Work</a>
        </div>
    </div>
 
</div>

Графические объекты для остальных элементов не будут такими же простыми, как логотип. Так как они интерактивны, то им понадобятся состояния проведения над ними мышью, а для кнопок навигации потребуются активные состояния.

Для кнопок навигации мы создадим изображение-спрайт. Вернитесь в Photoshop и создайте вокруг кнопок buttons выборку в PSD. Выберите Edit/Редактировать > Copy Merged/Скопировать совмещенные данные.

заголовок

Затем выберите File/Файл > New/Создать новый. Появится диалоговое окно с шириной и высотой выбранного перед этим прямоугольника по умолчанию. Измените высоту на в 3 раза большую, чем значение по умолчанию. Так создастся новый холст, подходящий к трем версиям навигационной графики, по одному для каждого состояния; активного, состояния проведения мышью над элементом и неактивного.

заголовок

Теперь переместите папку с кнопками buttons из PSD и дважды продублируйте эту группу для создания трех групп. Слегка отрегулируйте цвет текста каждой группы для создания различных состояний кнопок. Внизу приведен пример окончательного графического вида. Сохраните конечную версию как PNG (24-бит) в ‘img/icons/nav.png’, убедившись, что фон прозрачный.

заголовок

Для кнопок социальных сетей нам понадобятся всего два состояния (‘hover’ и ‘off’). Повторите вышеописанный процесс для создания изображений-спрайтов кнопок социальных сетей. Сохраните изображение как ‘img/icons/social-media.png’.

кнопки

Наконец, создайте новое изображение ‘img/bg/header.png’.

кнопки

Теперь, когда мы разработали структуру и цифровые объекты-изображения, давайте создадим CSS-стили для этой страницы.

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
 
}
body {
    line-height: 1.2em;
    font-family: arial, sans-serif;
 
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
:focus {
    outline: 0;
}
 
ins {text-decoration: none;}
del {   text-decoration: line-through;} 

Теперь создадим несколько основных стилей главных элементов страницы.

body, html {
    height: 100%; }
 
body {
    background: #0f1219; }
 
#page {
    height: 100%;
    min-height: 700px;
    position: relative;
    min-width: 1100px;
    overflow: hidden; }
 
h1, h2, p, li,div { font-family: "arial", "helvetica",sans-serif; }
li {font-size: 12px;}

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

Примечание: мы намереваемся назначить стили своим указателям как элементам блока (‘display: block’) и при отрицательном текстовом отступе гарантировать доступные, вдобавок основанные на графике элементы. Ширину и высоту можно подогнать, если ваши пользовательские файлы изображений-спрайтов отличаются по размерам.

#header {
    background: url('../img/bg/header.png') repeat;
    height: 60px;
    z-index: 1200;
    overflow: hidden;
    position: absolute; bottom: 0; width: 100%; }
 
#logo {
    position: absolute;
    top:0px;
    left: 30px; }
 
#header .inner {
    width: auto;
    padding: 0 30px;
    position: relative;
    height: 70px; }
 
#nav {
    position: absolute;
    right: 30px;
    top: 14px;
    height: 31px;
    width: 290px;  }
 
#nav a {
    background: url('../img/icons/nav.png') no-repeat 0 0;
    text-indent: -9999px;
    float: right;
    display: block;
    outline: none;
    height: 31px; }

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

#nav a.work {
    width: 95px;}
#nav a.work:hover {
    background-position: 0 -62px;}
 
#nav a.about {
    width: 93px;
    background-position: -188px 0;}
 
#nav a.about:hover {
    background-position: -188px -62px;}
 
#nav a.workActive {
    width: 95px;
    background-position: -0px -31px;
    cursor: default; }
 
#nav a.aboutActive {
    width: 93px;
    background-position: -188px -31px;
    cursor: default;}
 
#nav a.photos {
    width: 93px;
    background-position: -95px 0; }
 
#nav a.photos:hover {
    background-position: -95px -62px;}
 
#nav a.photosActive {
    width: 93px;
    background-position: -95px -31px;
    cursor: default; }   

Далее сделаем то же самое для кнопок социальных сетей.

#social {
    width: 88px;
    height: 26px;
    position: absolute;
    top: 17px;
    right: 330px; }
 
#social a {
    display: block;
    background: url('../img/icons/social-media.png') no-repeat 0 0;
    float: left;
    height: 26px;
    width: 26px;
    outline: none;
    float: left;
    margin-right: 4px;
    text-indent: -9999px;
    overflow: hidden; }
 
#social a.fb { background-position: 0 0;}
#social a.fb:hover { background-position: 0 -26px;}
#social a.flickr { background-position: -30px 0;}
#social a.flickr:hover { background-position: -30px -26px;}
#social a.linkedin { background-position: -60px 0; margin-right: 0;}
#social a.linkedin:hover { background-position: -60px -26px;}   

OK, теперь обновите страницу, вы должны увидеть нечто, похожее на изображение внизу. Проведите над клавишами курсором, чтобы просмотреть различные состояния. Если в состояниях проведения мышью имеются какие-либо причуды, попробуйте отрегулировать в своем CSS свойство background-position.

Попробуйте изменить размеры окна своего браузера для имитации мониторов с более низким разрешением. При уменьшении окна полосы прокрутки должны появляться под значениями min-height и min-width, назначенных div’у ‘#page’.

Шаг 4: Эффект подсветки

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

Чтобы добиться этого, понадобится добавить немного разметки. В div’е ‘#main’ создайте следующие новые div’ы.

<div id="main">
 
    <div class="glowBg" id="bg2">&nbsp;</div>
 
    <div id="glowTexture">&nbsp;</div>
 
    <div id="gallery"> <!-- The image grid --> </div>
    <div id="leftCol"> <!-- Text annotations --> </div>
 
    <div id="glowShadow">
        <img src="img/bg/glow-shadow.png" />
    </div>
 
</div>

Сначала давайте создадим изображение светлого пятна (‘img/bg/glow-shadow.png’), которое будет перекрывать галерею изображений. Вернитесь к Photoshop’у, выберите слой в группе ‘vignette’. Перейдите к Select/Выбрать > All/Все и скопируйте выбранную область. Создайте новый документ (он должен быть по меньшей мере 1400 x 900) и вставьте содержимое буфера обмена в холст.

эффект подсветки

эффект подсветки

Теперь нам нужно немного отрегулировать свое изображение. Во-первых, увеличьте размер холста так, чтобы вверху он стал выше на 100 пикселей.

эффект подсветки

Затем увеличьте на 50 пикселей левый край.

эффект подсветки

Наконец, увеличьте нижний и правый края так, чтобы общий размер холста стал 1600 x 1600.

эффект подсветки

эффект подсветки

Теперь выберите инструмент Ведро (bucket) и при отключенной фильтрации-сглаживании (на ‘off’) и допуске (tolerance), установленном на ’0′, заполните цветом фона страницы (#0f1219) прозрачную область вокруг краев. Окончательный результат должен выглядеть похожим на изображение внизу.

эффект подсветки

Выберите File/Файл > Save for Web/Сохранить для веба и сохраните это изображение как 24-битный PNG (‘img/bg/glow-shadow.png’) с включенной прозрачностью.

Теперь, вернувшись к нашему исходному изображению, выберите слой Заполнение шаблона 1/Pattern Fill 1 (это слой с диагональными линиями). Щелкните правой кнопкой мыши и выберите Растеризовать слой (‘Rasterize layer’). Затем увеличьте побольше масштаб и выберите область слоя, как показано внизу. Скопируйте его (только линии – не копируйте фон) и вставьте в новый документ. Сохраните для веба, снова как 24-битный PNG с прозрачностью и с путем ‘img/bg/lines.png’.

эффект подсветки

Теперь давайте добавим CSS для интеграции наших новых изображений…

#horizon {
    min-height: 700px;
    width: 100%;
    overflow: hidden; }
 
#main {
    background: #0f1219;
    width: 1300px;
    margin: auto;
    margin-top: -190px;
    height:1000px;
    overflow: hidden;
    position: relative; }
 
#main .inner {
    width: 9000px;
    height: 9000px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0; }
 
.glowBg {
    background: #282d3f;
    height: 100%;
    width: 100%;
    position: absolute; }   
 
#glowTexture {
    background: url('../img/bg/lines.png') repeat;
    height: 900px;
    width: 1300px;
    position: absolute;
    top: 0;
    left: 0; } 
 
#glowShadow {
    height:1600px;
    position: absolute;
    width: 1500px;
    top: 00px;
    overflow: hidden;
    z-index: 200; }
 
#glowShadow img {
    display: block;
    position:relative;
    left: -100px; } 

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

эффект подсветки

Шаг 5: Галерея

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

Создайте новое изображение 640×480 и вставьте мгновенный снимок (снэпшот) вебсайта или кадр какой-то из работ, которую вы хотели бы выставить. Более темный стиль этого дизайна отлично сочетается с изображениями, преобладающий фон которых – светлый.

Для начала давайте добавим разметку.

<div class="inner">
 
    <div class="col">
        <div class="item" style="top: 200px">
            <img src="img/work/demo-01.jpg" alt="Title 1a"/>
        </div>
 
        <div class="item"  style="top: 710px">
            <img src="img/work/demo-01.jpg" alt="Title 1b" style="opacity: 0.3"/>
        </div>
 
        <div class="item"  style="top: 1220px">
            <img src="img/work/demo-01.jpg" alt="Title 1c" style="opacity: 0.3"/>
        </div>
 
    </div>        
 
    <div class="col" style="left: 660px">
        <div class="item" style="top: 200px">
            <img src="img/work/demo-01.jpg" alt="Title 2a" style="opacity: 0.3"/>
        </div>
 
        <div class="item"  style="top: 710px">
            <img src="img/work/demo-01.jpg" alt="Title 2b" style="opacity: 0.3"/>
        </div>
 
        <div class="item"  style="top: 1220px">
            <img src="img/work/demo-01.jpg" alt="Title 2c" style="opacity: 0.3"/>
        </div>
 
    </div>
 
</div>

Вы заметите, что мы добавили к тэгам несколько встроенных стилей. Так моделируется то, что позже наш слой взаимодействия будет применять автоматически (в следующей части этого учебника мы увидим, как это делается). Однако на данный момент мы всего лишь жестко закодируем стили. Примечание: атрибут opacity (непрозрачность) не будет работать в Internet Explorer 8 и предыдущих версиях.

Добавьте следующий CSS к изображениям галереи:

#gallery {
    left: 285px;
    position: absolute;
    width: 100%;
    height: 900px; }
 
#gallery .col {
    position:absolute;
    top: 80px;
    width: 640px; }
 
.item {
    height: 480px;
    width: 640px;
    background: #181a22;
    position: absolute;
    margin: auto;
    top: 320px;
    z-index: 100;
    overflow: hidden; }

Самое важное свойство тут – абсолютное позиционирование колонок (это div’ы с классом ‘col’). При абсолютном позиционировании можно независимо передвигать каждую колонку или передвигать все колонки синхронно, что позволит нам передвигаться по сетке изображений, как только будет применен слой взаимодействия.

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

Создайте новый тэг скрипта script прямо перед закрывающим тэгом body и вставьте следующий код:

<script>
 
var yShift = -190;
arrange()
 
function arrange() {
 
    var winHeight = $(window).height();
 
    if (winHeight > 760) {
        yShift = (((winHeight - 900)/2) - 110)
        newHeight = (winHeight - yShift)
        newHeight -=60
        $('#main').css('height', newHeight)
    }
 
    if (yShift < -190) {
        yShift = -190;
    }
 
    $('#main').css('margin-top', yShift)
 
}
 
$(window).resize( function() {
    arrange()
})
</script>

Убедитесь, что jQuery был добавлен в заголовок страницы, иначе сценарий не будет работать.

Этот сценарий выполняет несколько задач. Функция arrange() определяет высоту окна, а затем настраивает свойства CSS ‘#main’ elements’ для центрирования содержимого по вертикали. Такое происходит в тех случаях, когда окно пользователя больше 760 px в высоту (смотри условие в строке 541), так как для меньшей высоты окна применяются значения CSS по умолчанию. Слушатель $(window).resize() (строка 25) вызывает функцию adjust() каждый раз, когда меняется размер окна пользователя.

Шаг 6: Пара слов

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

Добавьте в div ‘#leftCol’ следующую разметку:

<div id="projectInfo">
    <h1>Demo Project</h1>
    <p class="sub">WEBSITE 2011</p>
 
    <h1>Demo Project</h1>
    <p class="sub">WEBSITE 2011</p>
    <p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
 
    <p class="link"><a href="#">Link to project here</a></p>
</div>

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

Теперь мы добавим этому содержимому стили при помощи дополнительного CSS:

#leftCol {
    padding-top: 30px;
    width: 200px;
    height: 480px;
    left: 30px;
    position: absolute;
    z-index: 10001;
    top: 270px; }
 
#projectInfo {
    top: 50px;
    position: absolute;
    height: 350px;
    width: 200px; }
 
#leftCol h1 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 6px;
    top: 50px;
    font-weight: 300;
    line-height: 30px; }
 
#leftCol p.sub {
    color: #338966;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing:2px;
    font-weight: bold; }
 
#leftCol p.body, #leftCol p.link {
    color: #8c8f95;
    font-family:  'lucida grande', 'arial';
    font-size: 12px;
    line-height: 19px;
    padding-top: 30px;
    margin-bottom: 10px; }
 
#leftCol p.link {
    padding-top: 10px; }    
 
#leftCol p.link  a {
    color: #8c8f95;
    text-decoration: underline; }
 
#leftCol p.link a:hover {
    color: #fff;
    text-decoration: underline; }

Тут снова важнейшим соображением является абсолютное позиционирование элемента ‘#leftCol’. Так как он размещен вне тэга ‘#gallery’, однако внутри тэга ‘#main’, его расположение будет соответствовать отцентрированному тэгу ‘#main’ и не зависеть от перемещения в галерее. Это означает, что текст может обновляться без смены расположения, когда изменяется активный проект. Очень высокий z-index у ‘#leftCol’ (10001) помещает это содержимое над всем прочим контентом страницы. Это означает, что на текст эффект пятна света не будет влиять. Прочие свойства – это в основном стили текста и связанное с ними форматирование, которые можно настраивать по желанию.

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

текст

Шаг 7: Элементы интерфейса

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

Возвратившись к div’у ‘#leftCol’, добавьте следующий код:

<div id="controls">
 
    <div id="grid">
 
    </div>
 
    <div id="keys">
        <a href="#" class="kup">Up</a>
        <a href="#" class="kdown">Down</a>
 
        <a href="#" class="kleft">Left</a>
        <a href="#" class="kright">Right</a>
 
    </div>
 
</div>

Элемент ‘#grid’ пуст; в конечной работающей версии он будет заполнен Javascript’ом. Однако на данный момент мы просто жестко кодируем несколько дочерних элементов для получения представления о том, как это будет выглядеть.

<div id="grid">
    <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
    <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
    <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
    <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
    <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
    <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
    <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
    <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
    <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
    <div id="tracker" style="height: 14px;">&nbsp;</div>
</div>

Сейчас мы снова применим изображения-спрайты, на этот раз для указателей-стрелок. Вернувшись к Photoshop’у, перейдите к группе ‘keyboard’ и с помощью инструмента «линейка» (ruler) отметьте общие размеры.

линейка

Снова нам нужно внести поправку на две высоты группы для включения состояний по умолчанию ‘default’ и проведения мышью над элементом ‘hover’. Создайте новый документ с прозрачным фоном, равный по ширине группе ‘keyboard’ и в два раза большей высоты. В примере из учебника это равно 70 x 92.

Перетащите группу ‘keyboard’ в новый документ. Продублируйте ее и расположите одну из них сразу над второй. Группа внизу станет нашим состоянием проведения мышью ‘hover’. Немного измените для него элементы, сделав ярче перекрывание цвета, стрелки и контур. Для состояния проведения мышью часто достаточно тонких поправок, а небольшое изменение яркости обычно хорошо заметно.

В примере из учебника идеальный эффект создается изменением фонового цвета с #262a34 на #2b2f3a и фонового цвета черты/стрелки с #32343f на #4b4d56.

линейка

Окончательное изображение должно выглядеть примерно так, как показано внизу:

линейка

Сохраните его как ‘img/icons/keys.png’.

Теперь добавим немного CSS для установления соответствия изображения различным классам.

#leftCol #controls {
    width: 200px;
    height: 55px;
    position: absolute;
    bottom: 18px; }
 
#grid .line {
    width: 5px;
    background: #666;
    overflow: hidden;
    float: left;
    margin-right: 2px;
    position: relative;
    cursor: default; }
 
#grid {
    height: 55px;
    width: 200px; }
 
#tracker {
    height: 10px;
    background: #fff;
    width: 5px;
    position: absolute;
    z-index: 10000;
    cursor: default; }
 
#grid .line {
    width: 5px;
    background: #3d424f;
    overflow: hidden;
    float: left;
    margin-right: 2px;
    position: relative;
    cursor: default; }
 
#keys {
    width: 92px;
    height: 46px;
    position: absolute;
    left: 86px;
    bottom: 0;  }
 
#keys a {
    text-indent: -999px;
    width: 22px;
    height: 22px;
    background: url('../img/icons/keys.png') no-repeat 0 0;
    overflow: hidden;
    position: absolute; }

Дочерние элементы ‘.line’ сформируют сетку, представляющую сравнительную высоту колонок. Это обобщение станет идеальным способом дать пользователю возможность узнать размер портфолио, его разделы и их текущее состояние – что в некотором смысле эквивалентно breadcrumbs (навигационным цепочкам) традиционного сайта.

линейка

Как бы там ни было, следующая задача – установить соответствие классов key к изображению-спрайту:

#keys a.kup {
    left: 24px;
    text-indent: -999px;
    top: 0;
    background-position: -24px 0; }
 
#keys a.kup:hover, #keys a.hoveru {
    background-position: -24px -46px; }
 
#keys a.kdown {
    left: 24px;
    top: 24px;
    background-position: -24px -24px; }
 
#keys a.kdown:hover, #keys a.hoverd {
     background-position: -24px -70px;
    }
 
#keys a.kleft {
    left: 0px;
    top:24px;
    background-position: 0px -24px; }
 
#keys a.kleft:hover, #keys a.hoverl {
    background-position: 0px -70px; }
 
#keys a.kright {
    left: 46px;
    top: 24px;
    background-position: -46px -24px;
    width: 24px; }
 
#keys a.kright:hover, #keys a.hoverr {
    background-position: -46px -70px; }

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

Шаг 8: Элементы интерфейса

Наконец добавим динамическую навигацию, которая прикрепится к активному проекту. Вставьте следующую разметку сразу за открытым тэгом элемента ‘#leftCol’:

<a href="#" id="left" class="mover" style="display: none"></a>
 
<a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
<a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
 
<a href="#" id="up" class="mover" style="display: none"></a>

Здесь мы применили встроенные стили для имитации того, чего можно достичь автоматически при добавлении полной интерактивности Javascript.

Для этих указателей будет использоваться другое изображение-спрайт. Вернувшись к файлу Photoshop, откройте группу ‘buttons’ и выберите слой правого угла. Так как нашему указателю понадобится некоторый отступ, их мы сделаем с размерами 44 x 44.

элементы интерфейса

Создайте для размещения двух наборов из 5 иконок новый документ 88 x 176 с прозрачным фоном. Создайте новый слой, черный, чтобы можно было видеть полупрозрачные стрелки. Перетащите вертикальную направляющую на 44 px по оси Х (передвигайте направляющие при отключенных линейках и убедитесь, что видны Window/Окно > Info/Сведения, чтобы видеть текущее положение). Затем перетащите три горизонтальных направляющих на 44, 88 и 132 пикселя по оси Y.

элементы интерфейса

Теперь, возвратившись к исходному PSD, перетащите стрелку-уголок в новый документ и создайте слева 4 копии. Это будет наше состояние по умолчанию ‘default’. Сделайте непрозрачность каждого слоя 12%. Воспользуйтесь Edit/Редактировать > Transform/Трансформирование для вращения направляющих таким образом, чтобы порядок их расположения был как внизу:

элементы интерфейса

Скопируйте эти слои и передвиньте каждый точно на 44 пикселя вправо. Установите непрозрачность каждого из новых слоев на 20%. Отключите черный фон для того, чтобы холст казался почти совсем прозрачным и выберите Save for Web/Сохранить для веба. Экспортируйте как 24-битный PNG с включенной прозрачностью в ‘img/icons/movers.png’.

элементы интерфейса

Теперь добавим немного CSS для установления соответствия этого изображения:

a.mover {
    background: url('../img/icons/movers.png') no-repeat -44px 0;
    height: 44px;
    width: 44px;
    outline: none !important; } 
 
#up, #right, #down, #left {
    display: block;
    z-index: 300;
    position: absolute;
    top: 10px;
    left: 10px; }
 
#right {  background-position: 0px -44px; }
#right:hover { background-position: -44px -44px; }
 
#down {  background-position: 0 -88px;}
#down:hover {  background-position: -44px -88px;}
 
#up{  background-position: 0px -132px;}
#up:hover {  background-position: -44px -132px;}

Обновите браузер и увидите нечто, похожее на приведенное ниже.

результат

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

На случай, если вы что-то пропустили, вот окончательная разметка HTML:

<!DOCTYPE html>
    <head>
        <title>Your Name - Digital Portfolio</title>
        <link rel="stylesheet" href="css/master.css"/>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
 
    <body>
    <div id="page">
        <div id="header">
 
            <div class="inner">
                <div id="logo"><img src="img/icons/logo.png"/></div>
                <div id="social">
 
                    <a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
                    <a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
 
                    <a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>
                </div>
 
                <div id="nav">
                    <a class="about" href="about" id="aboutBtn">About</a>
                    <a class="photos" href="photos" id="photoBtn">Photography</a>
 
                    <a class="workActive" href="work" id="workBtn">Work</a>
                </div>
            </div>
 
        </div>
 
        <div id="horizon">
 
            <div id="main">
 
                <div class="glowBg" id="bg2">&nbsp;</div>
 
                <div id="glowTexture">&nbsp;</div>
 
                <div id="gallery"> 
 
                        <div class="inner">
 
                            <div class="col">
 
                                <div class="item" style="top: 200px">
                                    <img src="img/work/demo-02.jpg" alt="Title 1a"/>
                                </div>
 
                                <div class="item"  style="top: 710px">
                                    <img src="img/work/demo-02.jpg" alt="Title 1b" style="opacity: 0.3"/>
                                </div>
 
                                <div class="item"  style="top: 1220px">
                                    <img src="img/work/demo-02.jpg" alt="Title 1c" style="opacity: 0.3"/>
                                </div>
 
                            </div>        
 
                            <div class="col" style="left: 660px">
                                <div class="item" style="top: 200px">
                                    <img src="img/work/demo-03.jpg" alt="Title 1a" style="opacity: 0.3"/>
                                </div>
 
                                <div class="item"  style="top: 710px">
                                    <img src="img/work/demo-03.jpg" alt="Title 1b" style="opacity: 0.3"/>
                                </div>
 
                                <div class="item"  style="top: 1220px">
                                    <img src="img/work/demo-03.jpg" alt="Title 1c" style="opacity: 0.3"/>
                                </div>
 
                            </div>
                        </div>
 
                        <!-- End Step 6 -->
                </div>
                <div id="leftCol"> <!-- Text annotations -->
 
                        <a href="#" id="left" class="mover" style="display: none"></a>
 
                        <a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
                        <a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
 
                        <a href="#" id="up" class="mover" style="display: none"></a>
 
                    <div id="projectInfo">
 
                        <h1>Demo Project</h1>
                        <p class="sub">WEBSITE 2011</p>
                        <p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
 
                    <p class="link"><a href="#">Link to project here</a></p>
                    </div>
 
                    <div id="controls">
 
                        <div id="grid">
                            <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
                            <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
                            <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
                            <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
                            <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
                            <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
                            <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
                            <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
                            <div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
                            <div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
                            <div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
                            <div id="tracker" style="height: 14px;">&nbsp;</div>
 
                        </div>
 
                        <div id="keys">
                            <a href="#" class="kup">Up</a>
 
                            <a href="#" class="kdown">Down</a>
                            <a href="#" class="kleft">Left</a>
 
                            <a href="#" class="kright">Right</a>
                        </div>
 
                    </div>
 
    </div>
 
                <div id="glowShadow">
                    <img src="img/bg/glow-shadow.png" />
                </div>
 
            </div>
 
        </div>
 
    </div>
 
    <script>
    var yShift = -190;
    arrange()
    function arrange() {
 
        var winHeight = $(window).height();
 
        if (winHeight > 760) {
        yShift = (((winHeight - 900)/2) - 110)
        newHeight = (winHeight - yShift)
        newHeight -=60
        $('#main').css('height', newHeight)
        }
 
        if (yShift < -190) {
            yShift = -190;
        }
        $('#main').css('margin-top', yShift)
 
    }
 
    $(window).resize( function() {
        arrange()
    })
 
    </script>
 
    </body>
    </html>   

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (21)

  1. fantom

    Андрей доброго времени суток!
    спасибо за уч. пособие!
    подскажите хороший хостинг с разрешением конектом на другой Мускул!

  2. Любовь

    Солнышки! Вы хорошие программисты, а я пока блондинка в этих делах. Простите, но мне было сложно что-нибудь понять. так что этот урок не для новичков. Мне жаль)

  3. Мария

    Надеюсь,что когда-нибудь мне это тоже будет понятно.:)

  4. Владимир

    Здарвствуйте!!!! Перекрасная вещь, правда с моим МТС 2G, это долго грузилось. Надо будет попробывать у себя такое!!!
    Поболее таких ценных уроков.

  5. Игорь

    Не всё понятно, но что-то можно скопировать и применить по аналогии, не вникая в суть.

  6. Эдуард

    Безусловно полезная статья!
    Огромное спасибо!!!
    Обязательно применю на практике!

  7. Егор

    жду продолжения, самое интересное)

  8. Евгений

    Хм…, я вот о чём подумал: а что если вместо изображений задать тэг размером 640*480 и в нём разместить контент (небольшую статью, таблицу или видеоролик)? Получиться так сделать, как Вы считаете?

  9. Денис

    Все замечательно вышло, спасибо

  10. Денис

    прошу оценить как у меня получилось!

  11. Денис

    web-elegance.net.ua
    Тут работа выложена.

  12. Денис

    когда будет продолжение ?

  13. Alexander

    Привет, а где PSD скачать к уроку?

  14. Денис

    Хочется уже увидеть продолжение.

  15. алексей

    ну когда же продолжение!!!хоть намекните:(

    • Виктор Рог

      Как только автор сделает, мы сразу же сделаем перевод и дадим Вам ссылку.

  16. Олег

    Спасибо Вам Андрей большое,было интересно,вот видео бы урок по этой верстке,было бы шикарно.

  17. Андрей

    Здравствуйте!
    Во-первых. спасибо за такой материал. А во-вторых, помогите, а то я голову сломаю! Почему у меня в фоне выходит какое-то несоответствие цветов, смотрите по ссылке spravka-azov.ru/portf/index.html, по краям цвет фона другой, почему?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree