З PSD в HTML, створення дизайну веб крок за кроком

20

Від автора: Сьогодні я проведу вас через весь процес отримання з Photoshop HTML. Ми збираємося побудувати з 4 PSD макетів веб-сайт, який в кінцевому підсумку стане темою WordPress. Це велика стаття, тому, якщо ви збираєтеся йти до кінця, переконайтеся, що у вас є кілька вільних годин!

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Демо

Якщо Ви схожі на мене, Вам цікаво подивитися кінцевий результат перед початком. Ви можете побачити чотири кінцевих HTML-файлу, слідуючи за цими посиланнями:

Portfolio Home

Blog Home

General Purpose Page

Alternate Colour Scheme

Завантажити Файли

Додатково ви можете завантажити файли download the full HTML/CSS/Image source files here.

Що ми будемо створювати?

Як Ви, може, знаєте чи не знаєте, я написав (дуже повільно) книгу за темами WordPress. Те, що ми створимо, є HTML, який я використовую в книзі для створення головного прикладу тим. Остаточний набір тем називається Creatif. Ви можете побачити ці 4 макета, які показані в скріншотах нижче (клацніть, щоб отримати великі версії).

Ви можете отримати повний набір PSD файлів від PSDTUTS Plus, але це обійдеться вам в $ 9 на місяць за доступ. Якщо ви не хочете приєднатися, не турбуйтеся, оскільки ви зможете простежити сьогоднішню статтю, використовуючи тільки JPG скріншоти .

З PSD в HTML, створення дизайну веб крок за кроком

З PSD в HTML, створення дизайну веб крок за кроком

З PSD в HTML, створення дизайну веб крок за кроком

З PSD в HTML, створення дизайну веб крок за кроком

Частина 1 — Створення структури і першої сторінки

Ця стаття забезпечує пристойного розміру шаблон. Таким чином, ми збираємося зробити все крок за кроком. Спочатку ми створимо структуру нашого сайту, потім першу сторінку, а потім додаткові сторінки, і нарешті додатковий колір схеми.

Крок 1 — Підготовка

Отже, перш за все, ми завантажуємо наш редактор коду на вибір. Я використовую найчастіше Dreamweaver (і Textmate іноді). Я знаходжу, що Dreamweaver має досить пристойні інструменти коду і деякі особливості, які я дійсно використовую (зокрема, потужний Find+Replace і швидке підключення З PSD в HTML, створення дизайну веб крок за кроком).

У будь-якому випадку перше, що роблять — це створюють структуру каталогів і готуються до створення сайту. Зазвичай я створюю папку images і папку scripts, а потім я кладу весь мій CSS і HTML в основу.

З PSD в HTML, створення дизайну веб крок за кроком

Шаг2 – Швидка попередня розмітка

Перше, що ми зробимо — це повна розмітка HTML з деякою частиною CSS для того, щоб упевнитися, що у нас є солідна основа. Ми можемо перевірити її в основних браузерах (IE7, IE6, Firefox, Safari), щоб переконатися, що ми знаходимося на твердій опорі. Немає нічого гірше, ніж повертатися повністю до початку, щоб усунути проблеми сумісності браузерів. Набагато краще зробити це заздалегідь.

Таким чином, створюючи перший макет, ми можемо побачити кілька речей:

Дизайн центрований. Це відразу говорить нам, що ми повинні обернути його в контейнер і потім центрувати цей контейнер.

По суті, дизайн являє собою ряд горизонтальних блоків. Іноді блоки мають два стовпці, а іноді один. Тому ми можемо зробити це у вигляді серії

-ів. Це добре тому, що ми можемо змішувати і поєднувати елементи з різних сторінок, як це буде видно пізніше.

У нас є нижній колонтитул, в якого інший колір. Це означає, що фон повинен бути того ж кольору, у разі, якщо користувальницький браузер розтягується. Таким чином, нижній колонтитул повинен буде знаходитися в іншому контейнері (в основному).

Отже, ось HTML розмітка:

Creatif

Content Featured
Content

Як ви бачите, тут є дві частини: #main і #footer. Всередині кожної є

елемент, який буде фіксованої ширини і центрований. Тоді всередині головного контейнера у нас буде просто послідовність
-ів. Тепер давайте додамо трохи CSS наступним чином:

body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
}

Таким чином, ми встановлюємо колір фону body темно-коричневий колір нижнього колонтитула. Тоді у галузі #main буде більш світлий фон. Нарешті, у

-ов з класом .container ширина 950px, і вони центровані, за допомогою margin: 0 auto. Я також додав червону межу так, що можна побачити, як елементи розташовані на сторінці.

Ви можете побачити розмітку тут або подивитися скріншот нижче.

З PSD в HTML, створення дизайну веб крок за кроком

Крок 3 – додати деякі фонові зображення

Таким чином, наша розмітка готова, але у неї є тільки основні елементи, які відцентровані. Тепер дамо їй потрібний зовнішній вигляд.

Перше, що нам потрібно це кілька зображень. Ви можете зробити їх самі, якщо у вас є PSD, або просто візьміть download ZIP, і ви побачите деякі зображення, які я зробив раніше!

Ось скріншот першого зображення — великий фоновий JPG. Я використовую це велике фонове зображення, щоб отримати радіальний градієнт на передньому плані, потім я буду використовувати тонкий фрагмент 1px, щоб заповнити ліву і праву сторони, таким чином сторінка буде розтягуватися.

З PSD в HTML, створення дизайну веб крок за кроком

Аналогічним чином ми створимо фонове зображення для нижнього колонтитула, торуючи межу між ним і основною областю, (Ви можете знайти зображення в ZIP архіві, воно називається background_footer.jpg). Тепер ми оновимо файл CSS, щоб видалити ту червону межу і додати наші нові фонові зображення, наступним чином:

@charset «UTF-8»;
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
}

Дві речі до відома:

Є кілька способів встановити фон. В #main я використовував одну селектор ,який встановлює три властивості — колір, зображення, повторити зображення. Але ви можете також встановити кожне властивості індивідуально, як я зробив це в #main .container і #footer.

Зверніть увагу, що, оскільки я хочу застосувати фонове зображення «background_light.jpg» до

, який знаходиться всередині #main, а не до того, що знаходиться всередині #footer,тому я написав #main .container. Іншими словами, це застосовується лише до елементів класу class=’container’ , які знаходяться всередині елементів з id=’main’.

Крок 4 – Тестування в браузерах

Поки непогано. Не забувайте перевіряти в різних браузерах. Тут Ви можете бачити в IE7, це виглядає чудово!

З PSD в HTML, створення дизайну веб крок за кроком

Крок 5 – робимо прозорий логотип

Потім я створив Логотип. Оскільки надалі ми будемо працювати з альтернативної колірною схемою, я збираюся використовувати прозорий фон PNG файлу. Ви можете зробити це, вимкнувши фон в Photoshop і виконати у File > Save for Web and Devices і вибрати PNG-24. Ви повинні знати, що PNG-24 це файли досить великого розміру. Для маленького зображення як наше це нормально, але для великих зображень файл може бути занадто великим.

(Якщо хтось знає, як зробити стислий файл PNG, залиште коментар, тому що я впевнений, що є спосіб зробити це, але я просто не знаю, як!) У всякому разі, ви можете отримати прозорий логотип PNG тут.

З PSD в HTML, створення дизайну веб крок за кроком

Тепер ми додамо наш логотип, а також меню за допомогою цього HTML коду:

Creatif

Content Featured
Content

і доповнимо CSS:

#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
}

Деякі моменти, які потрібно відзначити:

Замість того, щоб просто розмістити зображення логотипу в HTML, ми створили

і помістили всередину

з назвою. Потім за допомогою CSS ми змусили текст зникнути і замінили його зображенням логотипу. Це має переваги в SEO.

Я звик використовувати display:hidden, але сучасні пошукові роботи вміють читати файл CSS і ігнорують блоки в яких використовується display:hidden. Тому краще використовувати текстові відступи.

Я помістив без стилів меню з допомогою неупорядкованого списку. Встановивши властивості відображення Inline для

  • елементів, список змінився на горизонтальний набір елементів … Ура!

    Нарешті, т. до у нашого

    задано position:relative, ми можемо тепер використовувати абсолютне позиціонування всередині його і встановити right:0px для меню і воно буде притиснуте до правого краю. Це ідеальне рішення для теми WordPress тому що людина створюючи нові сторінки, розширить меню, і цей спосіб залишить його вирівняно по правому краю.

    Крок 6 – Встановлення прозорості в IE6

    Тепер є одна проблема з прозорим PNG і вона полягає в тому, що наш друг Internet Explorer 6 не підтримує його! На щастя, ця проблема легко усувається завдяки статті, яку я знайшов — The Easiest Way to Fix for PNG IE6 (Поки ще немає перекладу даної статті). Ми тільки завантажуємо скрипт і додаємо рядок у наш CSS:

    /* Fix up IE6 PNG Support */
    img, #logo { behavior: url(scripts/iepngfix.htc); }

    На жаль, моя перевірка в IE6, не дала результатів, тому що я використовую Mac, а перевірка на Mac. через Darwine — не розпізнає виправлення.. Таким чином, я поняття не маю, чи це працює З PSD в HTML, створення дизайну веб крок за кроком

    Так у всякому разі на даному етапі я не приділяю багато уваги IE6 З PSD в HTML, створення дизайну веб крок за кроком .

    У будь-якому випадку, ось скріншот того, що ми отримали в IE6, коли прозорість не працює…

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 7 – Установка меню

    Тепер наше меню все ще виглядає досить потворним, так давайте додамо стилі, щоб завершити його:

    ul#menu {
    margin:0px; padding:0px;
    position:absolute;
    right:0px;
    }
    ul#menu li {
    display:inline;
    margin-left:12px;
    }
    ul#menu li a {
    text-decoration:none;
    color:#716d6a;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    }
    ul#menu li a.active, ul#menu li a:hover {
    color:#211e1e;
    }

    Тут немає нічого цікаво, за винятком того, що ми визначили сласс «active», який такий же, як стиль :hover (а саме це більш темний відтінок). Це означає, що ми можемо написати і посилання потемніє. Пізніше в WordPress ми зробимо так, що можна буде сказати, на якій сторінці ви знаходитесь в будь-який момент часу.

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 8 –Додавання вмісту Content

    Тепер у нас є основа нашої сторінки і пора почати додавати вміст блоків. Як я згадував раніше, ми збираємося зробити цей сайт ряд взаємозамінних блоків змісту. Перший блок «Featured Project «. Отже, давайте додамо HTML:

    Таким чином, цей код нижче

    </ div> коду з попередніх кроків. І без стилів це виглядає так:

    З PSD в HTML, створення дизайну веб крок за кроком

    Слід відзначити дві важливі речі:

    Ви побачите, що у нас є

    йде перед . Це пояснюється тим, що у полів, які ми малюємо є подвійна межа, спочатку там є 1px темно — сіра кордон, потім 1px біла межа. Так наявність двох елементів означає, що у нас може бути межа на кожному. Я не знаю, чому я використовував і Ви побачите пізніше, як ми це змінимо З PSD в HTML, створення дизайну веб крок за кроком

    У нас є кнопка View, Project, замість зображення, ми створили створити клас ‘button’, а потім застосуємо до нього кілька стилів, і посилання буде виглядати дійсно, як кнопка.

    Крок 9 – Додавання деяких базових стилів

    Тепер ми додаємо деякі основні стилі наступним чином:

    /*
    Block-Styles
    */
    .block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    }
    .block_inside {
    display:block;
    border:1px solid #ffffff;
    background: #ffffff url(images/background_block_slice.jpg) repeat-x;
    padding:30px;
    overflow:auto;
    }
    .image_block {
    border:1px solid #b5b5b5;
    background-color:#d2d2d2;
    padding:5px;
    float:left;
    }
    .image_block img {
    border:1px solid #b5b5b5;
    }
    .text_block {
    float:left;
    width:430px;
    margin-left:30px;
    }

    Як було згадано вище, у нас є клас .block, який просто встановлює кордон і нижній margin. Відразу усередині нього у нас є клас .block_inside, у якого є біла межа, тонкий шматочок фону (для додання слабкого градієнта), padding, і, нарешті, значення overflow.

    У нас overflow:auto, оскільки у нас буде два floated елемента всередині. Раніше я використовував clearing

    але хто-то в моїх попередніх коментарях зазначив, що це працює так само добре і набагато чистіше!

    Всередині у нас йде клас .Image_block, який дає нашому зображенню подвійну кордон (на одну

    і одну собі на З PSD в HTML, створення дизайну веб крок за кроком), і якому зазначено float:left. Text_block, також має властивість float:left, що формує міні колонки розмітки. Таким чином, наша розмітка тепер виглядає наступним чином:

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 10 – Додавання стилів тексту

    Тепер займемося текстом. Це текст виглядає непогано на попередньому знімку вікна, тому що у Firefox, який я використовував, стоїть за умовчанням шрифт Sans-Serif. Але якщо б я б зробив скріншот IE, то Ви б побачили б замість цього шрифту Serif. Таким чином, ми повинні розібратися тепер з текстом. Ми додамо ці шматочки CSS до нашої таблиці стилів:

    body {
    margin:0px; padding:0px;
    background-color:#131211;
    font-family:Arial, Helvetica, sans-serif;
    color:#7f7d78;
    font-size:13px;
    line-height:19px;
    }
    /*
    Text-Styles
    */
    h2 {
    margin:0px 0px 10px 0px;
    font-size:36px;
    font-family:Helvetica, Arial, Sans-serif;
    color:#000000;
    }
    small {
    color:#595856;
    font-weight:bold;
    font-size:11px;
    display:block;
    margin-bottom:15px;
    }
    a {
    color:#007de2;
    text-decoration:none;
    }
    a:hover { text-decoration:underline; }
    p { margin: 0px 0px 0px 15px; }
    a.button {
    background:#32312f url(images/button_bg.jpg) repeat-x;
    padding:10px 5px 5px 10px;
    color: #ffffff;
    text-decoration: none;
    border:1px solid #32312f;
    text-transform:uppercase;
    font-size:9px;
    line-height:25px;
    }
    a.button:hover {
    background:#007de2 url(images/button_bg_o.jpg) repeat-x;
    border-color:#007de2;
    }

    Отже:

    Спочатку я оновив тег body, щоб у нас був заданий за замовчуванням шрифт, колір, розмір шрифту і висота рядка.

    Потім ми створили стиль для

    , який встановлює margins і шрифт Helvetica.

    Ми також створили стиль — підзаголовків (наприклад, в якої категорії знаходиться пост і т. д),

    Ми створили стиль посилання і стиль link:hover

    Ми скинули стилі абзаців

    , щоб у margins відступів за замовчуванням.

    Нарешті, ми створили той самий клас button. Зверніть увагу, що я визначив його як «a.button», або, іншими словами, всі теги з класом = «.button». Чому я просто не зробив його як «.button»? Краще робити це саме так, щоб мати можливість зробити другий клас button для і він буде трохи відрізнятися. Таким чином, вони не будуть взаємодіяти один з одним.

    У класі button ви побачите, що ми встановили деякі padding, border, фонове зображення, Hover стиль і атрибут line-height … Почекайте line-height атрибут? Так, на жаль, це встановлюється для IE, що б все виглядало як кнопка.

    З нашим додатковим моделюванням сторінка починає набувати форму!

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 11 – Додавання стрічки

    Однією з витончених речей у цьому дизайні є маленька блакитна стрічка в правому верхньому куті. Завдяки поєднанню CSS, прозорих файлів PNG і абсолютного позиціонування, вона дійсно нескладно додається. Отже, спочатку ми повинні зробити зображення. Ще раз ми створюємо зображення з прозорим фоном і зберігаємо його як PNG-24, ось зображення:

    З PSD в HTML, створення дизайну веб крок за кроком

    Далі нам потрібно помістити зображення в наш HTML, це можна зробити наступним чином:

    З PSD в HTML, створення дизайну веб крок за кроком


    З PSD в HTML, створення дизайну веб крок за кроком

    Eden Website Design

    in web design tagged corporate, web2

    And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how the happy client was.

    View Project

    Таким чином, Ви можете бачити тег З PSD в HTML, створення дизайну веб крок за кроком там у другому рядку. Зауважте, що я присвоїв йому class= «ribbon» і помістив в

    .block, а не в . Це тому що, якщо ми помістимо його всередину .block_inside, це зробить плутанину зі властивість overflow:auto, яке ми встановлюємо раніше. У всякому разі , зараз це тільки заплутає нашу розмітку, так що давайте додамо стилі :

    .block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    position:relative;
    }
    .ribbon {
    position:absolute;
    top:-3px;
    right:-3px;
    }

    Ви можете бачити, що у нас є:

    Додається position:relative до класу .block. Таким чином, ми можемо використовувати абсолютне позиціонування всередині щодо елемента з класом .block (а не для цілої сторінки)

    Потім ми встановили зображення, яке з’явитися на 3px вище верхнього краю і на 3px правіше правого краю.

    Легко! Ще день тому, ми повинні були б використовувати супер складну

    розмітку, щоб досягти того ж самого ефекту. Ось те, як це виглядає зараз:

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 12 – Створення другого блоку

    З доданою стрічкою наш перший блок закінчено! Тепер прийшов час починати наступний

    блок. У ньому будуть теми і список останніх проектів. Отже, для початку ми додаємо трохи HTML:
    З PSD в HTML, створення дизайну веб крок за кроком

    PSDTUTS Theme Design

    Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

    View Project

    З PSD в HTML, створення дизайну веб крок за кроком

    PSDTUTS Theme Design

    Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

    View Project

    З PSD в HTML, створення дизайну веб крок за кроком

    PSDTUTS Theme Design

    Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

    View Project

    Creatif is a WordPress portfolio theme for designers and creatives

    You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not the theme accompanies a book called How to Be a Rockstar WordPress Designer by Rockstar Resources due for release in 2008.

    The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.

    And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at PSDTUTS and NETTUTS.

    Здається так багато коду, але насправді це не так. Давайте пройдемося по ньому:

    Спочатку ми створили контейнер

    щоб обернути весь вміст цього блоку.

    Далі у нас є

    , який містить три ідентичних
    . Ми поговоримо про це трохи пізніше.

    Потім у нас йде

    , який заповнений деяким текстом і, у якого є заголовок

    .

    Те, що ми збираємося зробити — це два стовпці. Один з них з текстом, другий з темами. Щоб сформувати два стовпці, застосуємо в стилях властивість float.

    Ми замінимо

    фоновим зображенням.

    І ми розробимо ті mini_portfolio_item div-ви, щоб виглядало добре використання ефекту аналогічного подвійний кордоні, як ми робили це раніше.

    Ось CSS:

    /*
    Portfolio-Home-Styles
    */
    #block_portfolio {
    overflow:auto;
    margin-bottom:20px;
    }
    #portfolio_items {
    width:615px;
    margin-right:25px;
    float:left;
    }
    #text_column {
    float:right;
    width:310px;
    }
    #text_column h2#text_title {
    text-indent:-9999px;
    background-image:url(images/creatif.jpg);
    background-repeat:no-repeat;
    width:310px;
    height:129px;
    }
    .mini_portfolio_item {
    border:1px solid #a3a09e;
    margin-bottom:10px;
    }
    .mini_portfolio_item .block_inside {
    background:none; background-color:#e2dddc;
    padding:25px 30px 15px 30px;
    }
    .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

    ОК, виглядає переконливо, але це не так погано. Пройдемо все крок за кроком:

    Спочатку ми знову використовували overflow:auto для головного блоку з класом #block_portfolio. Тому що у нас знову є два floated стовпця і якщо ми не зробимо цього, то вони наїдуть на нижній колонтитул.

    Потім ми встановили #portfolio_items float left, має margin, щоб відокремити його від текстового стовпця, ширину 615px.

    Для #text_column встановлено float right з шириною 310px.

    У стовпці тексту ми знову застосували маленьку хитрість до нашого

    тегу, де ми використовуємо великий текстовий відступ, щоб текст зник, а потім замість нього використовуємо фонове зображення.

    Потім у нас є три визначення стилю для класу .mini_portfolio_item наступним чином:

    Спочатку ми встановлюємо 1px темної кордону і margin між ними

    Потім ми перевизначаємо стилі .block_inside, щоб вони підходили цим елементам. Пам’ятайте, що клас .block_inside був визначений раніше, коли ми робили Featured Project область. Таким чином, тут ми прибираємо фонове зображення, змінюємо колір фону і змінюємо padding.

    Отже, в цілому це виглядає ось так:

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 13 – Додавання стрічки

    Тепер ми хочемо додати «Recent Projects» стрічку до верхнього елементу. Зробити це ми можемо так само як і для попередньої стрічки:

    З PSD в HTML, створення дизайну веб крок за кроком
    З PSD в HTML, створення дизайну веб крок за кроком

    AudioJungle Site Design

    Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

    View Project

    Потім ми додаємо атрибут position:relative в елемент mini_portfolio_item наступним чином:

    .mini_portfolio_item {
    border:1px solid #a3a09e;
    margin-bottom:10px;
    position:relative;
    }

    Але щось дивне відбувається … Хоча права сторона виглядає правильно, верх отрезался, як видно на скріншоті:

    З PSD в HTML, створення дизайну веб крок за кроком

    Причина в тому, що наш елемент знаходиться всередині mini_portfolio_item, який обрізає. Таким чином, всі mini_portfolio_item всередині

    . Рішення є досить простим, ми додамо 3px відступ зверху, яких достатньо для нашої стрічки. Ось скоригований CSS:

    #portfolio_items {
    width:615px;
    margin-right:25px;
    float:left;
    padding-top:3px;
    }

    Крок 14 – Завершення елементів портфоліо

    Нарешті я змінив кілька зображень і заголовків, щоб ми могли побачити, як сторінка виглядає з 3 різними елементами замість одного і того ж. Потім я також вирішив позбавлятися від кнопки View Project і залишити тільки текст посилання. Це виглядає чистіше і менш важко. Таким чином, ось кінцевий розділ елементів портфоліо (показаний в Safari, не забувайте перевіряти в різних браузерах!):

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 15 – Додавання вмісту в нижній колонтитул

    Тепер є ще один розділ на нашій сторінці: Footer! Давайте додамо текстовий зміст до нього:

    Зверніть увагу:

    Я створив три

    , в яких розташовано вміст колонтитула, ми пустимо їх на свої місця дуже швидко.

    Так як перший стовпець іншої ширини, я присвоїв йому інший клас, названий «long». Відзначте, що Ви встановлюєте два класу наступним чином: class= «class1 class2» , не як : class= «class1» class= «class2» , що є неприпустимим.

    Всередині стовпців я використовував списки

    теги заголовків

    . Завжди добре використовувати правильну семантичну розмітку, і це робить її більш читабельною і пошуковим системам подобається бачити ці заголовки і перераховувати їх правильно.

    Ось як це виглядає!

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 16 – моделювання колонтитула

    Моделювання колонтитула є досить простим, ось код, який нам потрібен:

    /*
    Footer-Styles
    */
    #footer {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    .footer_column {
    float:left;
    width:120px;
    margin-right:30px;
    }
    #footer .long {
    width:610px;
    }
    #footer h3 {
    color:#e2dddc;
    text-transform:uppercase;
    font-size:10px;
    }
    .footer_column ul li, .footer_column ul {
    list-style:none;
    margin:0px;
    padding:0px;
    }

    Пройдемося докладно:

    Спочатку ми встановлюємо шрифти для #footer області

    Потім ми поставили всім стовпцям float з шириною за замовчуванням 120px

    Ми скасовуємо цю ширину стовпця з класом .long. Зверніть увагу, що я встановив «#footer .long» замість просто «.long». Причина в тому, що»long» є загальною назвою, яке я міг би використовувати де-небудь в іншому місці, так що це гарна ідея визначити його більш докладно.

    Нарешті

    і

    теги отримують прості Стилі

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 17 – Додавання іконки!

    Ми майже закінчили нашу першу сторінку. Настав час додати деякі тонкощі. Спочатку іконка. Це ті маленькі іконки, які з’являються в адресному рядку. Мені не потрібно нічого придумувати, просто маленький чорний квадратик з для Creatif буде красиво. Отже, спочатку ми створюємо квадратне зображення як це:

    З PSD в HTML, створення дизайну веб крок за кроком

    Є безліч сайтів по створенню іконок (Visit SixRevisions for a list of them), але я завжди використовую html-kit’s. Ви просто завантажуєте зображення і натискаєте створити Favicon.ico. Потім ми з’єднуємо це ось з такою рядком HTML:

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 18 — Перевірка!

    Тепер прийшов час перевіряти, що наша розмітка w3c валидная! Тому ми йдемо в валідатор, вставляємо наш код і схрещуємо пальці… і епрст З PSD в HTML, створення дизайну веб крок за кроком не правильно. Я не пам’ятаю, що я у мене було все коли-небудь правильно з першого разу, повинні ж бути в мене погані звички!

    З PSD в HTML, створення дизайну веб крок за кроком

    Подивіться, там 14 помилок. Проблема номер один полягає у відсутності супровідного тексту на кожне з моїх фотографій… на жаль! Тому повернемося і додамо його наступним чином:

    З PSD в HTML, створення дизайну веб крок за кроком

    слід виправити багато помилок. Отже, тепер ми запустимо його знову і… барабанний дріб… раніше неправильно. ОК, це виявилося трохи складніше:

    З PSD в HTML, створення дизайну веб крок за кроком

    На щастя, залишилися 8 помилок насправді та ж сама проблема. В основному я вже використали вбудований елемент (зокрема, ), а потім спробував помістити елементи блокового рівня, такі як

    всередину. Мабуть, що не правильно … Ого!

    На щастя, це легко виправлена, ми просто змінюємо кожен примірник на

    . І… УРА!Минуло:-)

    З PSD в HTML, створення дизайну веб крок за кроком

    Кінець першої частини!

    Відмінно, ми успішно зробили нашу основну сторінку! Тут Ви можете бачити, що я перевіряю це в IE7 і до щастя немає ніяких помилок.

    Ось закінчена сторінка

    З PSD в HTML, створення дизайну веб крок за кроком

    Частина 2 – Створення різновидів

    З допомогою нашої основної структури ми можемо створити додаткові сторінки і альтернативні колірні схеми. На щастя, у нас є хороша основа, і ми можемо використовувати частину коду, який ми вже писали. Саме тому дуже важливо планувати все заздалегідь.

    Крок 19 – Створення домашньої сторінки блогу

    Наступна сторінка, яку ми збираємося створити це домашня сторінка блогу. Вона схожа на сторінку портфоліо, на якій будуть показані повідомлення блогу і потім ряд повідомлень блозі. В результаті вони стануть двома взаємопов’язаними темами WordPress — одна для портфоліо, а інша для блогів.

    Тому спочатку ми дублюємо наш index.html і назвемо новий файл blog.html.

    В нашому blog.html ми для початку видалимо всі

    . Ми скоро замінимо цей блок на інший. Потім ми замінимо вміст блоку
    , які трохи відрізняється, і виглядає наступним чином:

    New Blog Design Launched

    on april 13 in web design tagged blogging

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

    Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit.

    Read More

    Отже, все, що я зробив — це змінив зображення стрічки і вміст в блоці з id = block_featuredblog. По суті це та ж розмітка. Так що, давайте подивимося, як це виглядає тепер:

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 20 – Невеликі зміни CSS

    Отже, щоб все працювало, ми тільки трохи скоригуємо CSS ось так:

    #block_featuredblog .text_block { padding-top:5px; width:490px;}
    h2 {
    margin:0px 0px 10px 0px;
    font-size:36px;
    font-family:Helvetica, Arial, Sans-serif;
    color:#000000;
    line-height:39px;
    letter-spacing:-1px;
    }

    Тут я скорегував «text_block» клас, але тільки тоді, коли він знаходиться в #block_featuredblog елементі. Тепер він має невеликий відступ зверху і він став ширше.

    Також я додав відповідну висоту рядка заголовка і з моєї примхи поправив кернінг тексту -1px. І ми закінчили з цим елементом!

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 21 — Створення області основного вмісту

    Створення цієї області є останньою великою річчю, яку ми повинні зробити. Це сформує не тільки основу цієї сторінки, але також і базу для інших універсальних сторінок (з деякими змінами звичайно!). Що ж спочатку давайте вставимо деяку основу HTML:

    Content

    Так в основному те, що ми створили це елемент —

    і всередині у нас є два блоки, які ми збираємося притиснути до обом сторонам. Ви бачите, що я використовую наші добрі старі
    щоб додати подвійні кордону. Ось CSS, щоб зробити це правильно:

    /*
    Block-Content-Styles
    */
    #block_content {
    }
    #content_area {
    width:665px;
    float:left;
    }
    #sidebar {
    float:left;
    width:281px;
    position:relative;
    left:-1px;
    margin-top:15px;
    background-color:#e2dddc;
    border:1px solid #a3a09e;
    }
    #sidebar .block_inside {
    background:none;
    background-color:#e2dddc;
    }

    Розберемося зі стилями:

    Ми призначили блоку #content_area і блоку #sidebar ширину і float.

    Потім я перемістив бічну панель ліворуч на 1px, використовуючи position:relative. Я зробив це для того, щоб створити ефект, як ніби вона видається вперед.

    Додатково я додав 15px до головного margin так, щоб бокова панель не була вирівняна зверху. В даний момент це виглядає трохи дивно, але коли ми додамо зміст, це буде виглядати краще.

    Нарешті я перевизначав .block_inside всередині #sidebar, щоб скасувати фонове зображення і замість цього зробив background-color:#e2dddc;.

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 22 – Додаємо зміст

    Тепер ми додаємо утримання нашим двом елементам:

    Working on a New Project

    on april 13 in web design tagged blogging

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

    Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

    Design Awards!

    on april 13 in web design tagged blogging

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

    Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

    This Site is Almost Complete Finally…

    on april 13 in web design tagged blogging

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

    Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

    OK три важливі речі, які варто згадати тут:

    Спочатку в області змісту я додав три замітки, і між ними порожні

    для того, щоб додати між нотатками тонку лінію з деяким інтервалом.

    Потім ми додали зображення стрічки до бічної панелі аналогічним способом як і раніше.

    Нарешті, я використовував очищаючий

    внизу. Потім, як і раніше в цій статті я використовував overflow:auto; щоб розібратися з floated стовпцями, але коли ми додаємо margin-top в попередньому кроці, щоб змістити бічну панель нижче, це змішується з overflow і створює смугу прокручування. Таким чином, оскільки можливі випадки, коли бічна панель буде довшим, ніж блок змісту, то в цих випадках використовують метод очищаючого
    -а.

    Тепер ми додамо стилі, щоб привести все в порядок:

    #sidebar h3 {
    font-size:20px;
    line-height:23px;
    }
    #sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
    #sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
    #sidebar ul li a { color:#7f7d78; }
    #sidebar ul li a:hover { color:#0172dd; text-decoration:none; }
    #content_area h2 { font-size:32px; line-height:31px; }
    #content_area .separator {
    border-top:1px solid #e3e3e3;
    margin-top:40px;
    padding-top:40px;
    }

    Відзначимо дві речі:

    Відформатований

    список бічній панелі для видалення маркерів і створення красивих відступів

    Створений стиль .separator, який використовує margin, padding та border-top:1px solid #e3e3e3; — для створення тонкої лінії.

    І ось наш #block_content елемент закінчено! Ви можете побачити працюючий HTML тут.

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 23 – Створення загальної сторінки

    Створення нашої кінцевої сторінки є частиною проекту. Ми просто дублюємо наш blog.html і називаємо його page.html. Потім видаліть featured blog post і змініть #block_content наступним чином:

    Services

    Branding

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

    Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

    Це досить великий шматок HTML аналогічний попередньому, але з іншим текстом і новою стрічкою. Єдине реальне зміна це те, що тепер у нас є заголовок, вище якого підзаголовок обгорнутий в тег

    . Таким чином, ми можемо розробити пару рядків CSS наступним чином:

    h4 {
    color:#007de2;
    margin:0px 0px 0px 0px;
    }

    І ось! Побачити остаточну універсальну сторінку можна тут.

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 24 — Це не має значення, чорний або білий!

    Тепер ми збираємося зробити дуже простий CSS, щоб переключити сайт зі світлого фону на темний. Щоб акуратні це зробити ми просто повинні змінити один рядок у HTML:

    От і все! З цим одним шматочком додаткового коду HTML ми можемо зробити всі необхідні коригування CSS. Це означає, що якщо б ви побажали, то змогли б дуже легко зробити маленькі JavaScript кнопки, щоб перемикати таблиці стилів. Цей спосіб буде працювати для будь-якого класу, який потрібно змінити, ми просто додаємо додатковий стиль, який починається з body#dark. Так що, перш за все, ми говоримо:

    body#dark {
    background-color:#1e1d1b;
    }
    body#dark #main {
    background:#292826 url(images/background_dark_slice.jpg) repeat-x;
    }
    body#dark #main .container {
    background-image:url(images/background_dark.jpg);
    }
    body#dark #footer {
    background-image:url(images/background_dark_footer.jpg);
    }
    body#dark ul#menu li a.active, ul#menu li a:hover {
    color:#ffffff;
    }

    І це говорить браузеру, що якщо потім скасувати стиль для #main, #main.container, #footer, active і hover states меню і поміняти фонові зображення і змінити колір тексту на білий! Просто, як пиріг!

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 25 — Кордону і фіксація тексту

    Як Ви можете бачити на зображенні нижче наш колонтитул фіксується завдяки новому фонового зображення і кольору, є тільки ще два виправлення: «Creatif — WordPress…» текст і межі навколо полів дуже світлі і повинні бути темними. Тому ми робимо так:

    body#dark .block, body#dark .mini_portfolio_item {
    border-color:#1b1a19;
    }
    body#dark #text_column h2#text_title {
    background-image:url(images/creatif_dark.jpg);
    }

    З PSD в HTML, створення дизайну веб крок за кроком

    Крок 26 – Додатковий колір!

    І це все! У нас є альтернативна колірна схема всіх тегів элеметна контрольованих одним ID. Це чарівництво прозорих файлів PNG і CSS!

    З PSD в HTML, створення дизайну веб крок за кроком

    Кінець

    От і все! HTML повністю закінчений. Не забувайте, що ви можете подивитися повні сторінки пройшовши по посиланнях:

    Portfolio Home

    Blog Home

    General Purpose Page

    Alternate Colour Scheme

    Додатково Ви можете завантажити download the full HTML/CSS/Image source files here або через PSDTUTS Плюс full layered PSD files *and* a tutorial on designing them up.

    Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.