Хотите преобразовать свой превосходный по пикселям файл .PSD в хорошо структурированный HTML-формат? Что ж, тогда вы можете выбрать кодирование PSD в форматах HTML и CSS . Если вы новичок, вам может быть трудно работать с частью кода. Этот гостевой пост будет служить базовым руководством для начинающих, в котором будет рассказано, как успешно перенести код из .PSD в HTML.
Шаг 1 — Получите ваш .PSD Shared
Итак, у вас есть пиксельный .PSD с тяжелым дизайном, вам, вероятно, придется экспортировать из него элементы дизайна. Давайте сначала начнем с самого основного элемента — фона. При работе с фоном отключите все остальные слои и нарисуйте вокруг него марку. Для этого щелкните правой кнопкой мыши (Windows) и выберите «Показать / скрыть все другие слои» в инструменте фотошопа. А затем, удерживая нажатой клавишу «Alt» (Windows), активируйте инструмент перемещения и перетащите выделенную область, которую хотите скопировать. После того, как инструмент перемещения активирован, вы можете переместить свой выбор из окна этого активного изображения в окно красивого конечного изображения.
Предостережение: поскольку большинство современных веб-сайтов обычно создаются с эффектом прокрутки параллакса, важно убедиться, что ваш дизайн достаточно широк, чтобы он не обрезался при просмотре на большом экране. И так, убедитесь, что ширина вашего дизайна установлена на 2200 пикселей, что является достаточным размером, который можно легко разместить на экранах большего размера.
Теперь, когда вы создали изображение большого размера, вам нужно убедиться, что качество изображения не пострадает, поэтому важно тщательно выбирать параметры сжатия.
Теперь продолжайте выполнять те же шаги для отдельных элементов страницы, используя инструмент выделения (как описано выше для фона). Затем нажмите Ctrl + Shift + C, чтобы скопировать и объединить элементы, а затем вставьте их в новый документ, откуда вы можете их экспортировать. В частности, такие элементы, как логотип вашего сайта, изображения профиля и маленькие значки навигации, должны быть сохранены в виде отдельной графики. Затем выберите правильный тип файла и настройку сжатия для каждого из этих элементов. После того, как вы сохранили все изображения, вам нужно перейти в раздел HTML.
Шаг 2 — Работа с HTML
Теперь, когда вы тщательно нарезали каждый элемент вашего .PSD, вам нужно придать им структуру, используя HTML, написав следующий код:
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
При структурировании HTML вы должны учитывать 3 основных элемента: верхний колонтитул, нижний колонтитул и контент. Следует помнить о лучших способах преобразования PSD в файлы HTML, чтобы можно было подготовить надлежащий код HTML с ручной кодировкой.
1. Заголовок
Каждый веб-дизайн содержит заголовок, который обычно содержит логотип и главное меню навигации. Давайте посмотрим, как написать структуру для заголовка:
<div id="header">
<h1><a href="#">Our Company Logo</a></h1>
<ul id="nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Как видно из приведенного выше фрагмента, в разделе заголовка содержится ваш логотип и меню навигации, разделенные на различные разделы: «Дом», «О программе», «Портфолио» и «Контакт», определенные в неупорядоченном списке.
2. Содержание
Далее следует самая важная часть, которая поможет вам донести информацию о вашем бренде до целевой аудитории — это содержание вашего сайта. При структурировании HTML вам нужно будет написать структуру для контента, который содержится в div вместе с идентификатором контента. Вы можете написать контент в виде больших графических изображений. Ниже приведен код, который поможет вам лучше понять, как структурировать контент:
<div id="content">
<div id="services">
<ul>
<li><a href="#"><img src="images/services-1.jpg" alt="The main Heading goes here" /></a></li>
<li><a href="#"><img src="images/services-2.jpg" alt="Sub-heading" /></a></li>
</ul>
</div>Допустим, вы хотите разделить дизайн на две колонки. В первом столбце вы хотите добавить избранное видео (которое может быть видео на Youtube или видео vimeo), за которым следуют заголовок и описание. Ниже приведен фрагмент кода для первого столбца:
<div class="column">
<h2 class="featured-video">Featured Video</h2>
<div class="video">
<object width="340" height="205" type="application/x-shockwave-flash" data="http://xyz.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://xyz.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1" />
</object>
</div>
<h3><a href="#">New Design Blog Launched</a></h3>
<p>This is the dummy text</p>
<p class="btn"><a href="#">See more videos here</a></p>
</div>Во втором столбце вы можете определить любые предстоящие события с датой и небольшим описанием событий или программ.
<div class="column">
<h2 class="events">Upcoming Events or Programmes</h2>
<dl>
<dt>4 <span>Dec</span></dt>
<dd>
<h4>Launch of New Website</h4>
<p>This is the dummy text</p>
</dd>
</dl>
<p class="btn"><a href="#">See more events</a></p>
</div>В приведенном выше фрагменте кода вы можете заменить текст «Это фиктивный контент» своим исходным контентом. А также, вы можете определить ваши предстоящие события (если таковые имеются) в соответствии с вашими требованиями.
3. Нижний колонтитул
Теперь пришло время закрыть HTML нижним колонтитулом. Нижний колонтитул обычно содержит простую ссылку в начало страницы. Однако вы также можете добавить навигационное меню в нижний колонтитул, если хотите.
<div id="footer">
<p><a href="#header" class="back-top">Back to top</a></p>
</div>
</div>
</body>
</html>Шаг 3 — Давайте добавим стиль в CSS
После того, как вы завершили написание своей структуры HTML, далее следует основная часть стилизации вашего CSS. Этот шаг гарантирует, что элементы всех ваших HTML-разделов: верхний и нижний колонтитулы, содержимое и нижний колонтитул расположены в чистом виде и без помех. Стилизация CSS включает в себя сборку всех элементов дизайна в организованном порядке. Вы можете определить семейство шрифтов и размер текста, который будет отображаться на вашем сайте. И тогда вы можете добавить основное фоновое изображение вашего сайта, которое расположено вверху по центру (и не забудьте добавить, чтобы не повторяться). Все это необходимо для преобразования PSD в CSS- файлы. Вы можете увидеть ниже:
/*
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font-family: Arial Black, Times New Roman; line-height: 20px;
background: ##0099CC url(images/xyz.jpg) center top no-repeat;
}
/*Теперь давайте начнем стилизовать все разделы HTML один за другим.
Как стилизовать раздел заголовка?
При стилизации раздела заголовка сначала необходимо стилизовать основной контейнерный элемент div, за которым следует заголовок и его подэлементы. Обязательно назначьте некоторый отступ для заголовка div, чтобы создать пробелы сверху и сбоку в соответствии с концепцией .PSD.
#container {
width: 930px; margin: 0 auto;
}
#header {
padding: 42px 12px 0 12px; overflow: hidden;
}
#header h1 a {
display: block; width: 210px; height: 104px; float: left;
background: url(images/companylogo.jpg); text-indent: -9999px;
}
#header ul#nav {
width: 705px; float: right; margin: 35px 0 0 0;
}
#header ul#nav li {
float: left; list-style: none;
}
#header ul#nav li a {
display: block; width: 160px; height: 32px; margin: 0 0 0 25px; padding: 15px 0 0 0;
font-size: 23px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
text-shadow: 0 4px 4px #444;
}
#header ul#nav li a:hover, #header ul#nav li a.active {
background: url(images/nav.png);
}Как оформить контент?
Давайте начнем со стилизации фона контента.
#content {
width: 910px; padding: 16px 16px 50px 13px; overflow: hidden;
background: url(images/img1.png);
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 2px;
}Теперь давайте стилизуем раздел функций, написав следующий фрагмент кода:
#content #features {
width: 935px; height: 455px; margin: 0 0 45px 0;
overflow: scroll; /* Changed to hidden if javascript enabled */
}
#content #features ul {
width: 2720px;
}
#content #features ul li {
float: left;
}Теперь давайте посмотрим, как стилизовать содержимое двух столбцов, которые мы создали выше. Столбцы должны плавать рядом, поэтому мы добавим ширину (которая легко помещается в div содержимого) и свойство float: left. Кроме того, вам придется стилизовать видео и предстоящие события, отображаемые в этих столбцах. Вы можете просто добавить фон изображения в div видео, чтобы оживить встроенное видео, а добавление отступов поможет выровнять все. Кроме того, вы можете планировать добавление необычного макета к элементам событий. Например, посмотрите на следующий код, который поможет вам стилизовать содержимое столбцов.
#content .column {
width: 410px; float: left; padding: 0 28px 0 28px; margin: 0 0 20px 0;
}
#content .column .video {
width: 395px; height: 230px; padding: 12px 0 0 15px; margin: 0 0 20px 0;
background: url(images/xyz.jpg) no-repeat;
}
#content .column dl dt {
width: 58px; float: left; padding: 13px 0 0 0; overflow: auto;
color: #f00; font-size: 64px; line-height: 32px;
}
#content .column dl dt span {
font-size: 16px; text-transform: uppercase; display: block;;
}
#content .column dl dd {
float: left; width: 354px;
}
}Как оформить нижний колонтитул?
Вы можете стилизовать область нижнего колонтитула, просто добавив текстурированный фон и ссылку «вверх-вниз», расположенную в правильном положении.
#footer {
min-height: 158px; overflow: hidden;
background: url(images/footer-xyz.jpg) center 0 no-repeat;
}
#footer p a.back-top {
float: right; margin: 12px 20px 0 0;
font-size: 12px; text-decoration: none; color: #0C090A;
}
#footer p a.back-top:hover {
color: #250517;
}Вывод
So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original .PSD concept.