Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Форум о uCoz и Web » Веб-программирование и дизайн » Дизайн » Из PSD в HTML
Из PSD в HTML
SleepWalkerДата: Понедельник, 19.01.2009, 18:25 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
From PSD to HTML

-------------------------------------------------
Серия уроков Part Digital Designs


-------------------------------------------------

В этом уроке автор собирается показать вам как картинку дизайна сделанного в уроке Fundamentals of Interface Design превратить в рабочий интерфейс сайта. (далее от первого лица)

Что вам понадобится:

  • Adobe Photoshop.
  • PSD файл урока Fundamentals of Interface Design. В случае если вы не выполнили этот урок, то PSD файл вы можете скачать здесь
  • Бедный текстовый редактор. Я люблю Notepad++ (примечание переводчика: а я люблю PSPad)

Так же вы можете скачать готовый html исходник здесь.

Примечание: я не использую 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.

Code

<!-- 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>.

Code
<!--
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

Code

/*==============================
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-тега.

Code

<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, скопируйте и вставьте следующий код.

Code
/* 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.

Code

<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

Code

/*==============================
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 тегами.

Code

<!-- 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.

Code

/*==============================
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-тега.

Code
<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

Code

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

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

Заключение.

В этом уроке я представил вам очень полезные и важные концепции

  • Отделение CSS в отдельный файл.
  • Использование div-тегов для верстки дизайна.
  • Использование wrappers (обертки) для постройки секций сайта.
  • Использование списков для создания меню

Это постоянно используемые техники, используйте их, с ними вам будет намного удобнее.

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

Источник: http://www.partdigital.com/
Перевод: http://udf.su/

Как установить кнопки социальных сетей?

Time Waits For No One
 
JesseДата: Четверг, 22.01.2009, 20:57 | Сообщение # 2
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
очень понятно для новичков smile
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
SleepWalkerДата: Четверг, 22.01.2009, 21:36 | Сообщение # 3
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
ага, завтра думаю еше в цсс коментарии переведу....там тож умные вещи говорят)
Time Waits For No One
 
JesseДата: Четверг, 22.01.2009, 21:39 | Сообщение # 4
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
SleepWalker, ну давай)))
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
JesseДата: Четверг, 18.06.2009, 22:55 | Сообщение # 5
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
Не плохо было-бы сделать свой образец))
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
SleepWalkerДата: Пятница, 19.06.2009, 13:31 | Сообщение # 6
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
вплане?
Time Waits For No One
 
JesseДата: Понедельник, 22.06.2009, 21:48 | Сообщение # 7
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
SleepWalker, не перевести, а нарисовать и показать как верстать...

ЗЫ: это я не для себя))

На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
SleepWalkerДата: Среда, 24.06.2009, 23:07 | Сообщение # 8
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
ето уже другая история)))
я собираюсь писать статьи по цсс и так же буду писать про верстку... но нужно б для начала покончить с етим семестром)

Time Waits For No One
 
JesseДата: Четверг, 30.07.2009, 14:48 | Сообщение # 9
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
я тоже хочу что-то написать интересное))
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
HangmanДата: Воскресенье, 27.12.2009, 11:48 | Сообщение # 10
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
вам не плохобы начать видео уроки записывать..а то врятли начинающие люди(вроде меня)что то поймут smile

Добавлено (27.12.2009, 11:48)
---------------------------------------------
так как в этих уроках все практически в кратце описано,что и куда нажимать,то видео курсы как раз это и исправят!

 
SleepWalkerДата: Понедельник, 28.12.2009, 01:52 | Сообщение # 11
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

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

Time Waits For No One
 
TobiДата: Суббота, 09.01.2010, 01:06 | Сообщение # 12
Полковник
Сообщений: 244
Репутация: 15
Социальная репутация:

Статус: Offline
тагда такой вопрос как зделать в шаблоне для ucoz что бы он растягивался(новости меню )!а то вроде зделал !а как под юкоз начались одни проблемы ((
то шабон не растягивается !то другие проблемы !и вроде проблемы фигня !а чтото неправельно косяк на весь шаблон!
 
SleepWalkerДата: Воскресенье, 10.01.2010, 13:19 | Сообщение # 13
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Tobi, вообще-то не играет роли на что ты собрался вешать шаблон. если он растягивается, то он будет растягиваться везде.
Time Waits For No One
 
EstennyДата: Вторник, 28.09.2010, 18:08 | Сообщение # 14
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
SleepWalker, могу я позаимствовать это пособие на несколько недель, пока свое не напишу?
 
felixДата: Среда, 29.09.2010, 14:51 | Сообщение # 15
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
привет а можете оставить хтмл код мини чата для сайта,заранее спасью!!!
 
Форум о uCoz и Web » Веб-программирование и дизайн » Дизайн » Из PSD в HTML
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск: