Від автора: Сьогодні я проведу вас через весь процес отримання з 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 скріншоти .
Частина 1 — Створення структури і першої сторінки
Ця стаття забезпечує пристойного розміру шаблон. Таким чином, ми збираємося зробити все крок за кроком. Спочатку ми створимо структуру нашого сайту, потім першу сторінку, а потім додаткові сторінки, і нарешті додатковий колір схеми.
Крок 1 — Підготовка
Отже, перш за все, ми завантажуємо наш редактор коду на вибір. Я використовую найчастіше Dreamweaver (і Textmate іноді). Я знаходжу, що Dreamweaver має досить пристойні інструменти коду і деякі особливості, які я дійсно використовую (зокрема, потужний Find+Replace і швидке підключення ).
У будь-якому випадку перше, що роблять — це створюють структуру каталогів і готуються до створення сайту. Зазвичай я створюю папку images і папку scripts, а потім я кладу весь мій CSS і HTML в основу.
Шаг2 – Швидка попередня розмітка
Перше, що ми зробимо — це повна розмітка HTML з деякою частиною CSS для того, щоб упевнитися, що у нас є солідна основа. Ми можемо перевірити її в основних браузерах (IE7, IE6, Firefox, Safari), щоб переконатися, що ми знаходимося на твердій опорі. Немає нічого гірше, ніж повертатися повністю до початку, щоб усунути проблеми сумісності браузерів. Набагато краще зробити це заздалегідь.
Таким чином, створюючи перший макет, ми можемо побачити кілька речей:
Дизайн центрований. Це відразу говорить нам, що ми повинні обернути його в контейнер і потім центрувати цей контейнер.
По суті, дизайн являє собою ряд горизонтальних блоків. Іноді блоки мають два стовпці, а іноді один. Тому ми можемо зробити це у вигляді серії
У нас є нижній колонтитул, в якого інший колір. Це означає, що фон повинен бути того ж кольору, у разі, якщо користувальницький браузер розтягується. Таким чином, нижній колонтитул повинен буде знаходитися в іншому контейнері (в основному).
Отже, ось HTML розмітка:
Creatif
Як ви бачите, тут є дві частини: #main і #footer. Всередині кожної є
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 буде більш світлий фон. Нарешті, у
Ви можете побачити розмітку тут або подивитися скріншот нижче.
Крок 3 – додати деякі фонові зображення
Таким чином, наша розмітка готова, але у неї є тільки основні елементи, які відцентровані. Тепер дамо їй потрібний зовнішній вигляд.
Перше, що нам потрібно це кілька зображень. Ви можете зробити їх самі, якщо у вас є PSD, або просто візьміть download ZIP, і ви побачите деякі зображення, які я зробив раніше!
Ось скріншот першого зображення — великий фоновий JPG. Я використовую це велике фонове зображення, щоб отримати радіальний градієнт на передньому плані, потім я буду використовувати тонкий фрагмент 1px, щоб заповнити ліву і праву сторони, таким чином сторінка буде розтягуватися.
Аналогічним чином ми створимо фонове зображення для нижнього колонтитула, торуючи межу між ним і основною областю, (Ви можете знайти зображення в 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» до
Крок 4 – Тестування в браузерах
Поки непогано. Не забувайте перевіряти в різних браузерах. Тут Ви можете бачити в IE7, це виглядає чудово!
Крок 5 – робимо прозорий логотип
Потім я створив Логотип. Оскільки надалі ми будемо працювати з альтернативної колірною схемою, я збираюся використовувати прозорий фон PNG файлу. Ви можете зробити це, вимкнувши фон в Photoshop і виконати у File > Save for Web and Devices і вибрати PNG-24. Ви повинні знати, що PNG-24 це файли досить великого розміру. Для маленького зображення як наше це нормально, але для великих зображень файл може бути занадто великим.
(Якщо хтось знає, як зробити стислий файл PNG, залиште коментар, тому що я впевнений, що є спосіб зробити це, але я просто не знаю, як!) У всякому разі, ви можете отримати прозорий логотип PNG тут.
Тепер ми додамо наш логотип, а також меню за допомогою цього HTML коду:
Creatif
Creatif
A Family of Rockstar WordPress Themes
і доповнимо 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 для
Нарешті, т. до у нашого
Крок 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 — не розпізнає виправлення.. Таким чином, я поняття не маю, чи це працює 
Так у всякому разі на даному етапі я не приділяю багато уваги IE6 .
У будь-якому випадку, ось скріншот того, що ми отримали в IE6, коли прозорість не працює…
Крок 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 ми зробимо так, що можна буде сказати, на якій сторінці ви знаходитесь в будь-який момент часу.
Крок 8 –Додавання вмісту Content
Тепер у нас є основа нашої сторінки і пора почати додавати вміст блоків. Як я згадував раніше, ми збираємося зробити цей сайт ряд взаємозамінних блоків змісту. Перший блок «Featured Project «. Отже, давайте додамо 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
Таким чином, цей код нижче
Слід відзначити дві важливі речі:
Ви побачите, що у нас є
У нас є кнопка 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, який дає нашому зображенню подвійну кордон (на одну
Крок 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, що б все виглядало як кнопка.
З нашим додатковим моделюванням сторінка починає набувати форму!
Крок 11 – Додавання стрічки
Однією з витончених речей у цьому дизайні є маленька блакитна стрічка в правому верхньому куті. Завдяки поєднанню CSS, прозорих файлів PNG і абсолютного позиціонування, вона дійсно нескладно додається. Отже, спочатку ми повинні зробити зображення. Ще раз ми створюємо зображення з прозорим фоном і зберігаємо його як PNG-24, ось зображення:
Далі нам потрібно помістити зображення в наш 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
Таким чином, Ви можете бачити тег там у другому рядку. Зауважте, що я присвоїв йому class= «ribbon» і помістив в
.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 правіше правого краю.
Легко! Ще день тому, ми повинні були б використовувати супер складну
не правильно. Я не пам’ятаю, що я у мене було все коли-небудь правильно з першого разу, повинні ж бути в мене погані звички!
