Что такое psd шаблон и как его правильно верстать?

Содержание:

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб
Добавляем разметку HTML
Признаки правильной вёрстки
Табличная верстка
Третий уровень — продвинутый
Создание структуры веб-страницы
Используйте Emmet и/или Jade
4. Grid (сетка).
Что такое вёрстка сайта
Retina, графика, иконки и иконочные шрифты
Изучайте jQuery
Когда верстка считается правильной
Четвертый уровень — конечный
А как же мобильные?
Используйте таск-менеджер
Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки
Поиск в Google и в Яндекс
Приобретение PSD макетов напрямую у дизайнера
Проверка вёрстки
Главные блоки (верх, середина и низ)

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом. Gulp, Webpack, — это сборщик проекта для продакшена, здесь минифицируются и объединяются файлы, — HTML, CSS, Javascript. Оптимизируются и ужимаются изображения, так же можно jpeg, jpg, png, переделать в современный формат изображений, — WebP, что даст хороший прирост по скорости заргрузки страниц. Здесь тоже есть большие боссы:

Grunt
Gulp
WebPack

Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp. Ну и WebPack тоже сильный инструмент, но моё мнение что он больше подходит для SPA проектов, или можно сказать сборщик javascript файлов с поддержкой современных версий ECMAScript.

Gulp который я настроил, закрывает задачи на моих проектах

Расставляет префиксы CSS для всех браузеров
Минимизирует CSS удаляя пробелы, и переносы
Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
Преобразует препроцессорный код в обычный CSS
Минимизирует изображения
Уродует и минимизирует код JavaScript
Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
Минимизирует файлы HTML
Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
Конфигурирует файл Smart-Grid

Так же дома на всех устройствах в одной сети я могу посмотреть в реальном времени как выглядит то что я верстаю.Моя сборка Gulp и WebPack

Добавляем разметку HTML

Что такое хештеги: как правильно их писать и использовать

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header class="header">
<div id="headerInner">

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">

</div><!-- Конец коллефт -->

<aside id="colRight">

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer id="footer">
<div id="footerInner">

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header class="header">
<div id="headerInner">

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">

</div><!-- Конец коллефт -->

<aside id="colRight">

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
id=»colLeft» — левая сторона сайта (Посты)
id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<!-- Начало футер -->

<footer id="footer">
<div id="footerInner">

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Признаки правильной вёрстки

Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.
У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.
Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.
Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.
Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.
Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.
Используйте заголовки H1, H2, …, H6.
Заполняйте атрибуты элементов: <title>, <alt>, <description>.
Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.

Что такое smart hub в телевизоре samsung и как правильно его настроить

Табличная верстка

Портфолио: что это такое и как правильно его составить (примеры оформления)

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

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Однако имеет место быть и небольшая ложка дёгтя:

Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.

Третий уровень — продвинутый

Здесь стоит уже знать ВЕСЬ CSS. Функции, псевдоэлементы, псевдоклассы и так далее. Конечно, в процессе практики на втором уровне вы часть изучите из-за необходимости, но в целом — это все сюда.

Конечно же, в этот этап относим и адаптивную верстку. Медиа-запросы, как с помощью flexbox делать адаптивно, вьюпорт и так далее. Опять же, с практикой все придет гораздо быстрее. Так же сюда же можно добавить кроссбраузерность.

В этом же уровне пора изучать js или хотя бы jQuery на уровне работы с DOM. Как раз недавно закончил записывать мини-курс по jQuery: jQuery-мастер, советую изучить для старта. С помощью данного языка можно создавать кучу интерактива на сайте, а в наше время без этого просто никуда.

На моем канале (ссылка в шапке) множество материалов по среднему и продвинутому уровню — смотрите и пользуйтесь!

Я бы советовал погрузиться в самые-самые азы работы с PHP, на уровне создания обработчика для отправки форм.

Ну и конечно практика. Верстайте + смотрите уже готовые верстки (есть такие длинные видео) — очень удобно. Например, мой марафон

Создание структуры веб-страницы

Создайте на рабочем столе папку и назовите ее simple text. В этой папке создайте два файла index.html и style.css.

Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл index.html, и записываем в нем первоначальный код:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>

    </body>
</html>

Теперь между тегами создайте блок при помощи тега :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>
        <div>

        </div>
    </body>
</html>

Тег является универсальным блочным элементом, и задает на веб-странице блок.

Пропишем в этом блоке элементы, которые присутствуют на макете, а именно заголовок и абзацы:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple text</title>
    </head>
    <body>
        <div>
            <h1></h1>
            <p></p>
            <p></p>
            <p></p>
            <p><em></em></p>
        </div>
    </body>
</html>

Самостоятельно добавьте текст между этими тегами.

Теперь в контейнере пропишите путь к файлу со стилями:

<link rel="stylesheet" href="style.css">

Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент 🙂

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например: Skeleton или Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

Что такое вёрстка сайта

Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст.

Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг
Узнать подробнее

Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.

В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.

В контексте создания сайтов есть два вида разработки:

Back-end — программирование функционала сайта;

Front-end — программирование внешнего отображения и интерактивных элементов сайта.

Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.

Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования.

Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:

<body> </body> — все содержимое страницы;
<h1> </h1> — это обозначение заголовка;
<h2> </h2> — подзаголовок;
<img> — изображение;
<strong> </strong> — жирный шрифт;
<a> </a> — ссылка на другой ресурс, но между ними надо поставить атрибут href, который содержит адрес этой ссылки и так далее.

К вёрстке предъявляются особые требования и она бывает нескольких видов.

Retina, графика, иконки и иконочные шрифты

Все что можно сделать векторным (в том числе и иллюстрации) — должно быть векторным. Векторные элементы лучше передать отдельными файлами.

Все иконки без сложных эффектов (градиенты, тени) должны быть векторными и без проблем эскпортироваться в svg. Такие иконки следует рисовать шейпами в Photoshop или в Illustrator, вставляя в макет также шейпами (shape). Вставленные смарт-объектами иконки приходится по-отдельности открывать в Illustrator и сохранять оттуда, что замедляет работу.

Выравнивайте точки в кривых по пиксельной сетке, если возможно. Тогда иконки не будут мыльными на экранах с низким разрешением, к тому же будут лучше сжиматься. В редакторах настройка обычно называется «snap to pixel».

Артборд должен быть подогнан по габаритам фигуры. Для нескольких иконок одинакового размера допустимо, чтобы артборды были одинаковых размеров (больше габарита фигур).

Всё, что может быть слито в единую форму, должно быть слито.

Избегайте наложения эффектов и трансформаций.

Избегайте градиентов и теней. В некоторых случаях это может наложить ограничения на использование векторной графики.

Не комбинируйте в макете слои со вставленной векторной графикой с элементами, нарисованными в макете. Если вы вставили в макет векторную картинку и потом дополнили её какими-то слоями макета, использовать такую картинку без растеризации в вёрстке не получится

Не накладывайте на векторные изображения в PSD-макетах корректирующие слои, маски, эффекты. Это приведёт к невозможности использования такой векторной графики.

Все элементы интерфейса со сложными эффектами, которые будут экспортироваться в растре, должны быть в двукратном размере (тогда весь макет рисуется в двукратном размере) либо без потери качества ресайзится.

Контентные элементы (фото, баннеры и т. д.) готовятся под ретину по согласованию с заказчиком и разработчиком. При поддержке retina-экранов и для контента весь макет рисуется в двукратном размере.

Не стоит использовать иконочные шрифты из-за проблем с кроссплатформенностью и возможных дефектов отрисовки.

Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

Практикуйтесь в решении каких-либо задач с использованием jQuery, изучите базу (благо, там немного) и разминайте мозг, создавая интересные динамические элементы и jQuery плагины.

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

Для решения типовых задач (карусели, галереи, попап окна, валидация форм и т.д.) используйте jQuery плагины, не стоит писать свои велосипеды — это долго, нестабильно и неэффективно в большинстве случаев.

Когда верстка считается правильной

Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.

Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
Весь написанный код должен быть чистым и легко читаемым.
Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
Сайт должен работать одинаково во всех браузерах.
Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице

Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
Также для поисковиков важно, чтобы были заполнены атрибуты , и .
Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
Сайт должен быть адаптирован для мобильных устройств. . Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт

Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.

Четвертый уровень — конечный

Хотя, это я, наверное, лукавлю. Не конечный, но близкий к таковому 🙂

Что нужно здесь:

Изучить работу сборщиков типа gulp и webpack.
Изучить препроцессоры, хотя бы один.
Изучить git
Изучить доступность. Применять подходы в доступной верстке. Скоро на эту тему будут статьи у меня 🙂
Уметь написать кастомные анимации на CSS или JS. Без них опять же — никуда.

Больше ничего не идет в голову, если что-то есть у Вас — пишите в комментарии 🙂

Вот такой вот списочек в целом. Возможно что-то упустил, бывает. Но примерно всем этим (и чуть больше) владею сейчас я, и по сути, могу сверстать любой сайт. Как именно это изучать — вам решать, но самому, без наставника — довольно тяжело 🙂

А как же мобильные?

Быстрое развитие веба и наличие разных устройств, на которых можно открыть сайт, побуждает к созданию адаптивных сайтов. Это значит, что мобильная или планшетная версия сайта может отличаться по внешнему виду, редко — по содержанию, от десктопной версии. Что мы получаем в папке с макетами? Еще пару папок с дизайном, заточенным под определённые разрешения. Например, для планшетов это может быть 780px по ширине, а для мобильных — 320px (цифры взяты неспроста — http://mydevice.io/devices/). Но стоит учесть следующее:

Ширина окна браузера на планшетах может находиться в пределах от 600px до 1024px.
У мобильных — от 320px до 504px.

О чём это говорит? Правильно, как верстать сайт, если ширина макета отличается от медиа-запроса под планшеты или мобильные телефоны. Ответ прост — если сайт предусмотрен с fluid (резиновой) вёрсткой, то проблем быть не должно; если используются фиксированные по ширине блоки под определённые устройства и их переходное состояние от дексктопа к планшетной версии не учтено и не согласовано с заказчиком в техническом задании, то этим стоит заняться до начала вёрстки, иначе проблем не избежать.

Как может выглядеть боль и отчаяние на примере (figure 2)

figure 2

Если заказчика устраивает тот факт, что блоки перестроятся на указанных break-points согласно дизайну, но в промежуточных вариантах что-то будет выглядеть не так, как на макете, то приступаем к работе. Если же он не согласен, можно предложить верстать на своё усмотрение или сразу определить внешний вид явных несоответствий.

Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

Вы можете также использовать инструменты типа Prepros, но Prepros — это не Gulp. Для Gulp существует тысячи полезных плагинов — от работы с файловой системой, создания спрайтов, до генерации шрифтовых иконок и многое другое. Очень часто меня спрашивают, в чем разница между Gulp и Prepros, вот вам и ответ. За один раз вы сможете настроить целый комбайн, построить нейросеть задач и пустить по трубам горячую воду, все будет автоматически работать и экономить ваше время при работе над более или менее сложными проектами.

Более подробно изучить Gulp вы можете в уроке Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Все должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок…»;
Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Поиск в Google и в Яндекс

Неплохой вариант с точки зрения экономии времени. Позволяет быстро найти довольно большое количество PSD макетов, на которых можно потренироваться. Однако шаблоны, найденные через поисковые машины, выглядят очень похоже. Новичку, наверное, не следует добавлять такие работы в своё портфолио, так как в итоге получится, что такие примеры окажутся в коллекциях многих верстальщиков.

Можно поступить иначе: искать макеты на английском языке в Google. Например по запросу “Free template PSD” можно найти и скачать большое количество бесплатных шаблонов. Но тогда новичок сталкивается с проблемами работы с англоязычными шаблонами, перечисленными выше.

В качестве слабого утешения — для русскоязычных заказчиков ваши макеты могут выглядеть необычно. Впрочем, необычность часто отпугивает.

Приобретение PSD макетов напрямую у дизайнера

Хороший вариант для получения настоящих, “боевых” макетов. Если дизайнер опытный, у него будут неплохие шаблоны, при работе с которыми можно получить много опыта.

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

Предложить дизайнеру какой-либо бартер. Например, вы верстаете ему сайт, он отдает вам макет взамен;
Попросить что-нибудь из тех вариантов, что дизайнер сам использовал в учебных целях. И что в дальнейшем не пошло в продажу;
Искренне рассказать о том, откуда вы, что вы пока новичок, что хотите попрактиковаться в верстке, добавить макет в портфолио. Есть хороший шанс, что дизайнер сам пойдет вам навстречу и отдаст макет бесплатно.

Огромным преимуществом такого подхода является то, что макет, по сути, становится индивидуальным. Можно даже попросить дизайнера его немного усложнить или упростить. Добавить элементы, которые вам особенно интересны. И уж точно такого дизайна ни у кого больше не будет.

Еще одно преимущество этого способа — дополнительные контакты. Возможно тот дизайнер, к которому вы обратились, станет хорошим партнером для дальнейшей работы.

Проверка вёрстки

Базовое тестирование включает в себя ручные прогоны сценариев в нескольких браузерах и устройствах.

Боле фундаментальную информацию дают сервисы jigsaw.w3.org/css-validator и validator.w3.org.

Любая вёрстка должна соответствовать макету. Нередко случается, что финальный вариант вёрстки не выглядит так, как задумывалось. Чтобы это проверить, надо воспользоваться сервисом welldonecode.com/perfectpixel/.

А сервис Page Ruler нужен как линейка, чтобы в пикселях измерить свёрстанные блоки и прочие элементы страниц. Пригодится, чтобы оценить размеры логотипов, шапок, форм, контактных данных, рубрик, карточек, виджетов и так далее.

Window Raizer — расширение браузера Google и must have для верстальщика и дизайнера. С его помощью можно узнать, насколько страница сайта адаптирована под разные размеры экраны и разрешения.

Что еще стоит проверить в вёрстке веб-страницы:

Код не должен содержать ошибок, например, все теги закрыты: за открытым <strong> всегда следует закрытый </strong>;
doctype полностью прописан;
Страница функциональна, даже если отключены изображения (атрибут alt в помощь) и заблокированы javascript-коды;
Правильная семантическая разметка для поисковых систем;
Страница одинаково корректно отображается во всех браузерах.

Главные блоки (верх, середина и низ)

Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.

#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav class="topMenuRight">

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список: