спецтеми

Війна Україна Росія

From PSD to HTML (Конвертуємо шаблон * .psd в HTML дизайн сайту)

У цьому уроці автор збирається показати вам як картинку дизайну перетворити в робочий інтерфейс сайту. (Далі від першої особи)

Що вам знадобиться:

Adobe Photoshop.
PSD файл уроку Fundamentals of Interface Design. У разі якщо ви не виконали цей урок, то PSD файл ви можете завантажити будь-яку іншу картинку
Бідний текстовий редактор. Я люблю Notepad ++

Примітка: я не використовую dreamweaver. Хоч це чудове додаток, все ж я вважаю за краще писати код з нуля, в ручну.

Частина перша: Візуалізація CSS і HTML.

Перед тим як я починаю робити, щось я оглядаю інтерфейс. Що можу я зробити, використовуючи CSS / HTML? Що мені потрібно нарізати? Це зберігає час і дуже часто призводить до отримання чудових результатів.

Які секції ви бачите?

Ось про що я думаю, коли роблю це:

Наступне може бути досягнуто за допомогою CSS

Розмір інтерфейсу і його розміщення.
Колір тексту і посилань, їх розмір і т.д.
Розміщення панелей, їх розмір, рамочки і колір фону.
Ромчик навколо іконок.
Горизонтальна лінія між секціями в тілі.

Мені треба нарізати наступне

Іконки в шапці (включаючи іконки активної сторінки).
Графіку шапки, включаючи лого і напис "Part Digital Designs".
Фон шапки.
Гдляентний фон всього сайту.
Гдляентний фон шапок панелей.
footer (нижня частина сайту)
Один з трикутників навігації.

Частина друга: Нарізка інтерфейсу.

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

Примітка: Протягом цього уроку я буду використовувати Photoshop. Однак, для нарізки, я вам рекомендую використовувати Adobe Image Ready або Adobe Fireworks, якщо звичайно у вас є ці програми.

Ну що ж, приступимо!

Відкрийте той PSD, що я виклав на початку цього уроку.

Перший фрагмент вашої нарізки.

Натисніть K, що б вибрати Slice Tool і намалюйте виділення навколо лого і назви сайту, як показано на малюнку.

Натисніть правою кнопкою миші на фрагменті і виберіть Edit Slice Options. Назвіть цей фрагмент header_title, після чого натисніть ОК.

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

Створіть інше slice-виділення шириною 1px біля того, що ви тільки що зробили і назвіть його header_bg. У вас повинно вийти як на малюнку нижче.

Створіть віделеніе навколо іконки home (включаючи картинку будиночка) і назвіть її icon_home. Переконайтеся, що виділення має розмір 60Х54px.

Повторіть цей процес для решти іконок.

Створіть виділення біля напису на панелі home, шириною в 1px і висотою в 19px. Назвіть її panel_bg.

Створіть виділення навколо одного з трикутників і назвіть його triangle-idle. Переконайтеся що довжина і висота цього виділення дорівнює 13px.

Маленька підказка: Затисніть клавішу Shift в той час коли ви малюєте виділення і ви отримаєте правильний квадрат.

Створіть виділення навколо всього footer і назвіть його footer.

Збережіть для веб (File> Save for web or devices).

Переконайтеся що тип (type) зображення встановлений на GIF.

Переконайтеся, що налаштування збігаються з тими що на зображенні і натисніть Save.

Натисніть Save.

Добре, ми ще не нарізали все, але у нас вже досить графіки, що б почати. Поверніть photoshop і відкрийте ваш улюблений бідний текстовий редактор.

Частина третя: Закладання фундаменту.

Створіть два нових файлу і назвіть їх interface.htm і stylesheet.css відповідно

Папка з вашим проектом повинна виглядати приблизно так.

Примітка: Не забувайте про відмінність в операційних системах, у вас можуть бути зовсім інші піктограми.

Примітка: Створення веб інтерфейсу дуже не легкий процес, я не можу вдаватися в усі деталі, так як це ціла книга, але я спробую розповісти про найважливіші аспекти html і css.

Скопіюйте та вставте наступний код в файл interface.htm.


 <!-- this sets the doc type --> 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <head> 
 <title>My Interface</title> 

 <!-- linking your stylesheet document --> 
 <link rel="stylesheet" type="text/css" href = "stylesheet.css" media="screen" /> 

 </head> 
 <body> 

 </body> 
 </html>


 <!-- this sets the doc type --> 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <head> 
 <title>My Interface</title> 

 <!-- linking your stylesheet document --> 
 <link rel="stylesheet" type="text/css" href = "stylesheet.css" media="screen" /> 

 </head> 
 <body> 

 </body> 
 </html>

Тепер з цим html кодом всередині, прийшов час подумати про те, як буде працювати наш інтерфейс.

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

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

Скопіюйте та вставте цей код в ваш html документ між тегами <body> ... </ body>.

<!-- 
 Start by blocking out the major sections of the website. 
 Create the site wrapper, header, body etc. 
 --> 
 <!-- 
 Site Wrapper 
 Always create a site wrapper, this helps with the overall size and position of your website. 
 --> 
 <div class = "site-wrapper"> 

 <!-- 
 Header Wrapper 
 This is where the logo, site title and top navigation will go 
 --> 
 <div class = "header-wrapper"> 

 </div> 
 <!-- 
 Body Wrapper 
 this section is what holds the left navigation, center content and right panels 
 --> 
 <div class = "body-wrapper"> 

 </div> 

 <!-- 
 Footer 
 as you might expect, this is the footer 
 --> 
 <div class = "footer"> 

 </div> 
 </div>

<!-- 
 Start by blocking out the major sections of the website. 
 Create the site wrapper, header, body etc. 
 --> 
 <!-- 
 Site Wrapper 
 Always create a site wrapper, this helps with the overall size and position of your website. 
 --> 
 <div class = "site-wrapper"> 

 <!-- 
 Header Wrapper 
 This is where the logo, site title and top navigation will go 
 --> 
 <div class = "header-wrapper"> 

 </div> 
 <!-- 
 Body Wrapper 
 this section is what holds the left navigation, center content and right panels 
 --> 
 <div class = "body-wrapper"> 

 </div> 

 <!-- 
 Footer 
 as you might expect, this is the footer 
 --> 
 <div class = "footer"> 

 </div> 
 </div>

Я не можу знайти слів, що б підкреслити те, наскільки важливий перший крок. Він вносить структуру, яку інші компоненти будуть добудовувати. Чи будите ви довіряти дому з хитким фундаментом? Те ж саме правило діє і тут.

Скопіюйте та вставте наступний код в stylesheet.css


 /*============================== 
 GLOBALS 
 Sets the default document font size, family 
 and color 
 ===============================*/ 
 body 
 { 
 font-family:Arial; 
 font-size:12px; 
 color:#3f4a4e; 
 } 
 /*============================== 
 SITE WRAPPER 
 ===============================*/ 
 .site-wrapper 
 { 
 width:800px; 

 /* min-height lets your site grow vertically 
 (like in tables). */ 
 min-height:600px; 

 /* By setting these to auto you are centering the 
 site */ 
 margin-left:auto; 
 margin-right:auto; 

 border:solid 1px black; 
 } 
 /*============================== 
 HEADER WRAPPER 
 ===============================*/ 
 .header-wrapper 
 { 
 width:800px; 
 height:54px; 

 background:url('images/header_bg.gif'); 

 /* css lets you designate how you want an image to 
 repeat. Along the x-axis, y-axis or not at all. */ 
 background-repeat:repeat-x; 
 } 
 /*============================== 
 BODY WRAPPER 
 ===============================*/ 
 .body-wrapper 
 { 
 margin-top:3px; 

 /* floats are crucial to the creation of any 
 web interface. Every web developer must master 
 this concept. Don't worry I'll be writing a 
 tutorial about this a little later. <img src="http://s7.ucoz.net/sm/19/smile.gif" border="0" align="absmiddle" alt="smile"> */ 
 float:left; 

 width:800px; 
 min-height:530px; 
 } 
 /*============================== 
 FOOTER 
 ===============================*/ 
 .footer 
 { 
 /* clears are the sisters to float, it's 
 time to meet the whole family <img src="http://s7.ucoz.net/sm/19/smile.gif" border="0" align="absmiddle" alt="smile"> */ 
 clear:left; 
 height:16px; 
 background:url(images/footer.gif); 
 }

Примітка: У початковій стадії розробки, як наприклад зараз, я рекомендую ставити рамочку на кожен блокової елемент (div, table, h1, h2 і т.д.), що ви створюєте. Це полегшить вам візуалізацію.

Відкрийте interface.htm в вашому браузері, він повинен виглядати приблизно так,

Тепер ми маємо хорошу базу, давайте будувати шапку.

Частина четверта: Споруда шапки.

Вставте цей код в interface.htm всередині header-wrapper div-тега.


 <div class = "header-title"> 
 <img src = "images/header_title.gif" /> 
 </div> 

 <div class = "header-menu"> 

 <!-- making an HTML list --> 
 <ul> 
 <li><img src = "images/icon_home.gif" alt = "home"/></li> 
 <li><img src = "images/icon_tutorials.gif" alt = "tutorials"/></li> 
 <li><img src = "images/icon_downloads.gif" alt = "downloads"/></li> 
 <li><img src = "images/icon_resume.gif" alt = "resume"/></li> 
 <li><img src = "images/icon_links.gif" alt = "links"/></li> 
 <li><img src = "images/icon_contact.gif" alt = "contact"/></li> 
 </ul> 
 </div> 

 </div>

Вище я створив список картинок. Зазвичай список відтворюються вертикально, але, додавши трохи магії CSS ми можемо перетворити його в гарне вертикальне меню. Подивіться на меню в браузері перед тим як ви приступите до наступного кроку. (примітка перекладача: нагадую, що після внесення змін у файли з HTML / CSS кодом ви повинні не забути зберегти ці файли і відновити сторінку в браузері за допомогою клавіші F5)

У stylesheet.css, під header-wrapper, скопіюйте та вставте наступний код.

/* this sets the position of the title. 
 header.gif goes here here */ 
 .header-title 
 { 
 float:left; 
 } 
 /* This sets the position of the menu */ 
 .header-menu 
 { 
 float:right; 
 width:370px; 
 height:54px; 
 } 

 /* The Menu */ 
 /*Whey you follow a class definition with an html element (such 
 as ul) all styles that you apply will only affect that element. 
 So for instance, in this case you read it as "apply these 
 settings to every ul html element inside every div tag named 
 <b>header-menu</b>, but no other." 
 */ 
 .header-menu ul 
 { 
 padding:0; 

 /* the removes the left margin */ 
 margin:0; 

 /* this removes the bullet */ 
 list-style:none; 
 } 
 .header-menu li 
 { 
 float:left; 
 }

/* this sets the position of the title. 
 header.gif goes here here */ 
 .header-title 
 { 
 float:left; 
 } 
 /* This sets the position of the menu */ 
 .header-menu 
 { 
 float:right; 
 width:370px; 
 height:54px; 
 } 

 /* The Menu */ 
 /*Whey you follow a class definition with an html element (such 
 as ul) all styles that you apply will only affect that element. 
 So for instance, in this case you read it as "apply these 
 settings to every ul html element inside every div tag named 
 <b>header-menu</b>, but no other." 
 */ 
 .header-menu ul 
 { 
 padding:0; 

 /* the removes the left margin */ 
 margin:0; 

 /* this removes the bullet */ 
 list-style:none; 
 } 
 .header-menu li 
 { 
 float:left; 
 }

Меню шапки буде виглядати як на малюнку нижче.

Тепер давайте приступимо до меню портфоліо

Частина п'ята: Створення меню потфоліо.

Скопіюйте та вставте наступний HTML код в interface.htm між div-тегами body-wrapper.


 <div class = "portfolio-menu"> 
 <h2>portfolio</h2> 
 <ul> 
 <li><a href = "">In Progress</a></li> 
 <li><a href = "">Design</a></li> 
 <li><a href = "">3D</a></li> 
 <li><a href = "">Traditional</a></li> 
 </ul> 
 </div>


 <div class = "portfolio-menu"> 
 <h2>portfolio</h2> 
 <ul> 
 <li><a href = "">In Progress</a></li> 
 <li><a href = "">Design</a></li> 
 <li><a href = "">3D</a></li> 
 <li><a href = "">Traditional</a></li> 
 </ul> 
 </div>

Чи повірите ви чи ні, але це весь html код, який вам потрібен для того, що б зробити меню! Тепер давайте розберемося з CSS кодом.

Скопіюйте та вставте це в stylesheet.css


 /*============================== 
 PORTFOLIO MENU 
 ===============================*/ 
 .portfolio-menu 
 { 
 float:left; 
 /*The width of the menu */ 
 width:140px; 
 min-height:530px; 

 /*The font of all the text in the menu */ 
 font-family:Arial; 
 } 

 /*The Portfolio Title */ 
 .portfolio-menu h1 
 { 
 margin:2px; 
 color:#3f4a4e; 
 font-size:18px; 
 } 
 /* Like before we just apply some styles to the list */ 
 .portfolio-menu ul 
 { 
 margin:0; 
 padding-left:15px; 
 list-style:none; 
 } 
 /* We have to apply a style to the links in the list, otherwise 
 they will default to the browser standard. (which is normally 
 blue with an underline.) */ 
 .portfolio-menu a 
 { 
 font-size:12px; 

 /* text-decoration removes the underline */ 
 text-decoration:none; 

 color:#3f4a4e; 
 } 
 .portfolio-menu li 
 { 
 background:url(images/triangle-idle.gif); 
 background-repeat:no-repeat; 
 background-position:center left; 
 margin-bottom:5px; 
 padding-left:15px; 
 border:solid thin black; 

 } 
 /* hover is a pseudo class, you can set styles for when 
 the user puts their mouse over an element. No Javascript 
 needed! */ 
 .portfolio-menu li:hover 
 { 
 background:url(images/triangle-active.gif); 
 background-repeat:no-repeat; 
 background-position:center left; 
 }


 /*============================== 
 PORTFOLIO MENU 
 ===============================*/ 
 .portfolio-menu 
 { 
 float:left; 
 /*The width of the menu */ 
 width:140px; 
 min-height:530px; 

 /*The font of all the text in the menu */ 
 font-family:Arial; 
 } 

 /*The Portfolio Title */ 
 .portfolio-menu h1 
 { 
 margin:2px; 
 color:#3f4a4e; 
 font-size:18px; 
 } 
 /* Like before we just apply some styles to the list */ 
 .portfolio-menu ul 
 { 
 margin:0; 
 padding-left:15px; 
 list-style:none; 
 } 
 /* We have to apply a style to the links in the list, otherwise 
 they will default to the browser standard. (which is normally 
 blue with an underline.) */ 
 .portfolio-menu a 
 { 
 font-size:12px; 

 /* text-decoration removes the underline */ 
 text-decoration:none; 

 color:#3f4a4e; 
 } 
 .portfolio-menu li 
 { 
 background:url(images/triangle-idle.gif); 
 background-repeat:no-repeat; 
 background-position:center left; 
 margin-bottom:5px; 
 padding-left:15px; 
 border:solid thin black; 

 } 
 /* hover is a pseudo class, you can set styles for when 
 the user puts their mouse over an element. No Javascript 
 needed! */ 
 .portfolio-menu li:hover 
 { 
 background:url(images/triangle-active.gif); 
 background-repeat:no-repeat; 
 background-position:center left; 
 }

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

Тепер, давайте побудуємо область контенту.

Частина шоста: Споруда області контенту.

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

Скопіюйте та вставте свіжих в interface.htm під portfolio-menu, переконайтеся що ви вставляєте це між body-wrapper тегами.


 <!-- Holds the panel --> 
 <div class = "content-wrapper"> 

 <!-- The panel --> 
 <div class = "panel"> 
 <div class = "panel_title">home</div> 

 <div class = "panel_content" style = "height:450px"> 

 </div> 
 </div> 
 </div>


 <!-- Holds the panel --> 
 <div class = "content-wrapper"> 

 <!-- The panel --> 
 <div class = "panel"> 
 <div class = "panel_title">home</div> 

 <div class = "panel_content" style = "height:450px"> 

 </div> 
 </div> 
 </div>

Скопіюйте та вставте наступне в stylesheet.css під portfolio-menu.


 /*============================== 
 CONTENT-WRAPPER 
 ===============================*/ 
 .content-wrapper 
 { 
 float:left; 
 width:470px; 
 margin-right:5px; 
 } 
 /*============================== 
 PANEL CONTENT 
 ===============================*/ 
 .panel 
 { 
 margin-bottom:5px; 
 border:solid 1px #869ca4; 
 } 
 /*The panel content */ 
 .panel_content 
 { 
 padding:2px; 
 background:#effaff; 
 } 
 /* The panel title */ 
 .panel_title 
 { 
 height:16px; 
 font-size:14px; 
 color:#effaff; 
 padding:2px; 
 padding-left:4px; 
 background:url(images/panel_bg.gif); 
 background-repeat:repeat-x; 
 background-position:center center; 
 }


 /*============================== 
 CONTENT-WRAPPER 
 ===============================*/ 
 .content-wrapper 
 { 
 float:left; 
 width:470px; 
 margin-right:5px; 
 } 
 /*============================== 
 PANEL CONTENT 
 ===============================*/ 
 .panel 
 { 
 margin-bottom:5px; 
 border:solid 1px #869ca4; 
 } 
 /*The panel content */ 
 .panel_content 
 { 
 padding:2px; 
 background:#effaff; 
 } 
 /* The panel title */ 
 .panel_title 
 { 
 height:16px; 
 font-size:14px; 
 color:#effaff; 
 padding:2px; 
 padding-left:4px; 
 background:url(images/panel_bg.gif); 
 background-repeat:repeat-x; 
 background-position:center center; 
 }

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

Частина сьома: Створення правих панелей.

Скопіюйте та вставте наступне в interface.htm відразу ж після content-wrapper div-тега.

<div class = "right-wrapper"> 
 <div class = "panel"> 
 <div class = "panel_title">news</div> 
 <div class = "panel_content" style = "height:210px"> 
 Your content for news goes here. 
 </div> 
 </div> 

 </div> 

 <div class = "panel"> 
 <div class = "panel_title">tutorials</div> 
 <div class = "panel_content" style = "min-height:210px"> 
 Your content for tutorials goes here. 
 </div> 
 </div> 
 </div>

<div class = "right-wrapper"> 
 <div class = "panel"> 
 <div class = "panel_title">news</div> 
 <div class = "panel_content" style = "height:210px"> 
 Your content for news goes here. 
 </div> 
 </div> 

 </div> 

 <div class = "panel"> 
 <div class = "panel_title">tutorials</div> 
 <div class = "panel_content" style = "min-height:210px"> 
 Your content for tutorials goes here. 
 </div> 
 </div> 
 </div>

Скопіюйте ето в stylesheet.css після panel_title


 /*============================== 
 RIGHT WRAPPER 
 ===============================*/ 
 .right-wrapper 
 { 
 float:left; 
 width:180px; 
 min-height:530px; 
 }


 /*============================== 
 RIGHT WRAPPER 
 ===============================*/ 
 .right-wrapper 
 { 
 float:left; 
 width:180px; 
 min-height:530px; 
 }

Подивіться на результат в браузері. Вітаю! Ви зробили ваші меню і контент області готові для використання на сайті!

Висновок.

У цьому уроці я представив вам дуже корисні і важливі концепції

Відділення CSS в окремий файл.
Використання div теґи для верстки дизайну.
Використання wrappers (обгортки) для побудови секцій сайту.
Використання списків для створення меню

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

Я сподіваюся, цей урок був корисним. Не бійтеся залишати будь-які коментарі.

Сподобалося? Підпишись на RSS новини!
Ви також можете підтримати shram.kiev.ua, тисніть:

Не зайвим буде і твоїм друзям дізнатися цю інформацію, поділися з ними статтею!

Розгорнути / згорнути вікно з коментарями

Коментарі

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

' +'' +'' +'' +'' +'


' +' ' +' подробнее' +' скачать' +' ' +'

' +'';res[1] = '

' +'' +'' +'' +'' +'' +'' +'' +'

' +'

' +'Агентство аномальных явлений. Тайна приюта Синдерстоун' +'

Расследуйте дело о пожаре в приюте и узнайте, куда исчезли его воспитанники.

' +'