|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>
Теперь с этим 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>Я не могу найти слов, что бы подчеркнуть то, насколько важен первый
шаг. Он вносит структуру, которую остальные компоненты будут
достраивать. Будите ли вы доверять дому с шатким фундаментом? То же
самое правило действует и здесь. Скопируйте и вставьте следующий код в 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>
