Документация сервиса автоматической HTML верстки сайтов

На этой странице подробно описаны возможности сервиса PSD to HTML Converter и как ими воспользоваться. Вы узнаете как создать веб страницу и сделать свой web сайт практически бесплатно.

• Особенности конвертации Photoshop дизайна в CSS/HTML
• Правила, по которым PSD шаблон преобразовывается в HTML верстку
• HTML5/CSS3 верстка
• Верстка текста из слоев PSD-макета
• Поддерживаемые теги
• Примеры
• Группировка CSS слоев в div блоки
• SEO (Search Engine Optimization)
• Порядок загрузки файла и оплаты конвертации

Особенности конвертации Photoshop дизайна в CSS/HTML

Для эффективного использования сервиса PSD to HTML Converter необходимо знать следующие особенности Photoshop.

• Слой Photoshop всегда имеет прямоугольную форму и его размер определяется размером его содержимого. Любая часть слоя может быть прозрачной. Например, слой, состоящий из одного пикселя, имеет размер 1x1 пиксель. Если слой состоит из двух пикселей, один из которых находится в левом верхнем углу документа, а второй - в правом нижнем, то размер слоя будет равен размеру всего документа Photoshop (но все пиксели, кроме данных двух, будут прозрачными).
• Слои могут пересекаться и накладываться друг на друга. Если один слой в панели слоев Photoshop находится выше, чем другой слой, то содержимое первого слоя будет находиться поверх содержимого второго слоя. Порядок наложения слоев в Photoshop сохраняется для CSS слоев в сконвертированном HTML.
• Если какой-либо слой накладывается на текст, то текст становится недоступным для кликов мышкой. Поэтому избегайте случаев, когда слой перекрывает текстовые слои или слои с интерактивными элементами (ссылки, поля ввода).
• Слои можно объединять в группы. Они отображаются как папки на панели слоев Photoshop.
• Размер группы слоев определяется прямоугольной областью, которая включает в себя все слои группы. Группа - это тоже слой, поэтому относительно нее действуют те же самые правила относительно порядка наложения слоев.
• Чтобы изменить порядок следования слоев, либо перетаскивайте их мышью на панели слоев Photoshop, либо используйте комбинации "Ctrl + [" и "Ctrl + ]".
• Чтобы изменить имя слоя, дважды кликните по нему в панели слоев Photoshop. Вам это понадобится для того, чтобы помечать слои Вашего дизайна тегами.
• Не используйте в своем дизайне Adjustment layers, они не поддерживаются сервисом.

Правила, по которым PSD шаблон преобразовывается в HTML верстку

Видимость слоев

Любой Photoshop файл состоит из слоев (Layer). Любая блочная HTML верстка сайта также состоит из слоев, стиль которых задается через CSS. В процессе конвертации все видимые слои из PSD дизайна преобразуются в элементы CSS/HTML верстки: слои изображений перейдут в изображения, текстовые слои перейдут в текстовые блоки.

Если слой (Layer) или группа слоев (Layer Group) имеют в Photoshop аттрибут «невидимый» (“invisible”), то они будут пропущены и не попадут в CSS верстку. Таким образом, используя сервис автоматической генерации HTML и CSS верстки, вы всегда получите то, что видите в PSD файле (WYSIWYG - What You See Is What You Get).

Создание HTML элементов

HTML довольно богатый язык и HTML/CSS верстка обычно состоит не только из изображений и текста, но также содержит ссылки, различные формы, поля ввода текста, списки, таблицы и другие HTML элементы. Чтобы автоматически создать эти HTML элементы, требуется иметь больше информации, чем изначально содержится в PSD файле. Отличный способ дать нам эту информацию – сообщить ее в имени слоя (Layer Name) в Вашем PSD файле. В имени любого слоя в любом месте Вы можете указать один или несколько тегов, которые мы интерпретируем описанным ниже способом.

Каждый слой HTML/CSS верстки будет иметь такое же имя, какое этот слой имел в PSD шаблоне (за исключением тегов, мы удалим их из имен). При этом Вам нет необходимости думать об уникальности имен в Photoshop, заботу об этом мы берем на себя.

Сложные многослойные изображения

Как уже было упомянуто, из каждого Photoshop слоя в верстке получается отдельный HTML/CSS элемент. Таким образом, если в макете для создания одного изображения (логотип/бэкграунд/т.п.) использовано несколько слоев - это плохо отразится на автоматически созданной верстке сайта - вы получите излишние элементы с изображениями.
Справиться с этой проблемой легко. Выберите один из двух недеструктивных методов:

1. Объедините все соответствующие слои одну группу слоев и пометьте группу тегом #merge. В процессе верстки такая группа слоев будет автоматически объединена в один слой.
2. Объедините несколько слоев в один слой, сконвертировав их в Smart Object. Для этого выделите нужные слои на панели слоев и запустите команду "Layer" -> "Smart Objects" -> "Convert to Smart Object".

HTML5/CSS3 верстка

Верстка макета производится в соответствии со стандартами HTML5 и CSS3.
Пример генерируемого CSS3 кода можно увидеть на примере макета Flat Design UI Components.psd. Вы можете скачать сгенерированный код либо посмотреть сверстанную страницу по ссылке. Отметим, что данный макет служит примером генерации CSS3 кода. Он не был корректно подготовлен (макет содержит текстовые слои, пересекающиеся со слоями изображений) и поэтому сверстан не оптимально.

Верстка текста из слоев PSD-макета

Все текстовые слои в Photoshop преобразуются в текстовые блоки в HTML верстке. При этом сохраняются все стилевые параметры текста и параграфа, такие как:

• Шрифт
• Размер шрифта
• Цвет текста
• Эффект отбрасывания тени
• Выравнивание текста (left, centered, right, justify)
• Отступ сверху
• Отступ снизу
• Межстрочный интервал
• Надстрочный/подстрочный текст
• Направление текста (LTR или RTL)
• и другие

Сервис поддерживает автоматическое встраивание всех (650+) WEB шрифтов от Google.

Текст, шрифт которого не является стандартным WEB шрифтом, верстается как изображение, имеющее в качестве альтернативного текста текст из слоя в Photoshop. Сервис создаст предупреждение при использовании нестандартных шрифтов в текстовых слоях.

Если вы все же хотите сверстать слой с нестандартным шрифтом как текст и затем подключить шрифт с помощью @font-face, пометьте такой слой тегом #text. После конвертации не забудьте вручную добавить директиву @font-face в сгенерированный сервисом .css файл. Заметьте, что т.к. на нашем сервере нет нестандартных шрифтов, то произойдет замена шрифта стандартным, отчего на сгенерированном скриншоте верстка будет не соответствовать оригинальному дизайну.
Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией "Конвертировать ВСЕ текстовые слои в текст" при конвертации PSD файла.

Для текстовых слоев в Photoshop разрешается устанавливать только следующие эффекты (Blending Options) :

• Отбрасывание тени (Drop Shadow)
• Наложение цвета (Color Overlay)

Только эти эффекты могут быть установлены с помощью CSS. Текстовые слои, для которых установлены какие-либо другие эффекты, будут сконвертированы в изображения.
Для создания заголовков различных уровней используйте теги #h1, #h2, #h3, #h4, #h5, #h6.

Границы текстового блока могут отличаться в браузере и в Photoshop. Для более точного управления границами текста переведите текстовый слой в режим "Paragraph Text" из режима "Point Text". В данном режиме редактирования Вы сможете точно установить границы текстового слоя. Для изменения режима редактирования, кликните правой кнопкой мыши по слою в панели слоев и выберите соответствующую опцию - "Convert to Paragraph Text" либо "Convert to Point Text".

Всегда отключайте сглаживание текста в своих PSD макетах. CSS не поддерживает сглаживание, поэтому даже при ручной верстке не получится сверстать текст того же размера и начертания, как у текстового слоя в Photoshop, имеющего сглаживание.

Поддерживаемые теги

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

• добавить перед тегом хэш '#', например: #bg,
• добавить перед тегом тире '-', например: -bg,
• заключить имя тега в символы '$', например: $bg$.

Тегом можно пометить любой слой или группу слоев в дизайн-макете. Добавить тег в дизайн-макет Photoshop очень просто - нужно написать его в имени слоя в любом месте.
Например, если есть слой "Layer 1" и Вы хотите сделать его ссылкой, то нужно добавить тег #link в имя слоя, например, таким образом: "Layer 1#link", или "La$link$yer 1", или "-link Layer 1". В любом из случаев в получившейся верстке класс слоя будет: class = "layer_1".

Имена Clipping mask слоев не должны содержать тегов - тегами следует помечать базовый слой, к которому применяется маска.

На данный момент в именах слоев можно использовать следующие теги:

• #header, #footer, #section, #nav, #article, #aside - группы, помеченные этими тегами будут сконвертированы в соответствующие html5 блоки. Пример использования в PSD файле: html tags.psd, результат конвертации..
• #id{identifier_name} - слою или группе, помеченной данным тегом будет присвоен идентификатор, а не класс. Если указан опциональный identifier_name, то это имя будет использовано в качестве идентификатора. Иначе, имя будет сегенерировано на базе имени слоя. Пример: 1) для слоя layer#id{head} будет сгенерирован id="head", 2) для слоя layer#id будет сгенерирован id="layer".
• #merge - содержимое группы, помеченной этим тегом, будет объединено в один слой в результирующей верстке сайта. Используйте этот недеструктивный для вашего макета метод для тех изображений, которые представлены несколькими слоями - это может быть фон, логотип и т.п. Это не только повысит качество результирующей html верстку сайта, но и сильно повысит структурированность и читаемость вашего макета. Также, смотрите тег #bg.
• #alt{alternative text} - если слой изображения помечен данным тегом, то изображение в верстке в качестве альтернативного текста будет иметь заданное значение. Пример: "Logo#alt{My company}".
• #link - если тегом помечен один слой, то он будет сверстан, как ссылка. Если тегом помечена группа слоев, то каждый слой группы будет сверстан как ссылка.
• #link{hyperlink} - если в качестве параметра тега передана ссылка, то она будет использоваться в качестве гиперссылки в сгенерированном коде. Пример: #link{//psd2htmlconverter.com}.
• #nolink - текст или часть текста помеченного слоя, имеющий подчеркнутый стиль, не будет автоматически верстаться как ссылка. По умолчанию подчеркнутый текст конвертируется в гиперссылку.
• #bg - этот тег используется как подсказка, что данное изображение надо сверстать, как background свойство блока, содержащего этот слой. Если у в группе слоев несколько слоев помечено тегом #bg, то они будут объединены в одно изображение. Если пометить тегом целую группу слоев, то все слои группы будут объединены в одно изображение и оно будет использовано как бэкграунд.
  Единичные слои в группе необязательно помечать данным тегом, т.к. сервис сам находит наиболее подходящий в качестве фона слой. Обычно, это изображение наибольшего размера в данной группе.
• #bg{[тип повторения]}, где [тип повторения] - это одно из:
  - repeat-x или rx - фон будет повторяться по оси x
  - repeat-y или ry - фон будет повторяться по оси y
  - repeat или r или repeat-xy - фон будет повторяться по осям x и y
  Примеры: #bg{rx}; #bg{ry}, #bg{repeat}.
• #bg-size{[size]} - позволяет вручную задать css стиль background-size для фонового изображения.
  Параметр size - это либо 'cover', либо 'contain', либо пара значений в px или %.
  Примеры:
  #bg-size{cover}
  #bg-size{contain}
  #bg-size{100%, 500px}
• #bg-pos{[HorizontalPosition], [VerticalPosition]} - позволяет вручную задать css стиль background-position для фонового изображения.
    Параметр [HorizontalPosition] - одно из: left, right, center.
    Параметр [VerticalPosition] - одно из: top, bottom, center.
  Examples:
  #bg-pos{center, top}
  #bg-pos{center, center}
• #h1, #h2, #h3, #h4, #h5, #h6 - из текста или изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня. Если слой текстовый, то он должен обязательно состоять из одного параграфа.
• #h1{alt text}, ... , #h6{alt text} - из изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня, при этом изображение будет иметь в качестве альтернативного текста заданное значение. Пример: "Logo#h1{My company}". Также, для этой цели вы можете использовать тег #alt: "Logo#h1#alt{My company}".
• #in_text - Если пометить тегом одиночный слой, то из его изображения будет сверстана форма ввода текста (type=”text”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
  Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #in_passw - из изображения будет сверстана форма ввода текста для ввода пароля (type=”password”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
  Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #textarea - из изображения будет сверстана форма для ввода нескольких строк текста (textarea). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #in_button - из изображения будет сверстана форма ввода (input) типа «кнопка» (type=”button”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
  Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
• #in_checkbox - будет сверстана форма ввода (input) типа «флажки» (type=”checkbox”). Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #in_radio - будет сверстана форма ввода (input) типа «переключатель» (type=”radio”). Для того, чтобы объединить несколько переключателей в одну группу, задайте им идентичные имена в PSD шаблоне либо задайте имя переключателя как параметр тега: #in_radio{some name}. Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #in_file - из изображения будет сверстана форма для ввода имени файла для отправки на сервер (type=”file”).
• #in_image - из изображения будет сверстана форма ввода типа "поле с изображением" (type=”image”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
  Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
• #in_submit - из изображения будет сверстана форма ввода для отправки данных формы на сервер (type=”submit”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
  Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #select - позволяет сверстать список опций. Чтобы сверстать список опций, отметьте группу, содержащую один или несколько текстовых слоев с текстом опций, данным тегом. В качестве опций будут сверстаны даже те текстовые слои группы, которые имеют флаг "невидимый" (чтобы явно указать, что не надо верстать текстовый слой, как опцию, отметьте его тегом #skip). Кроме текстовых слоев, группа может содержать фигуру (Shape), представляющую фон списка. Остальные слои группы будут проигнорированы. Чтобы выбрать, какая опция должна быть выбранной по умолчанию, отметьте соответствующий текстовый слой тегом #selected. Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
• #form - имеет смысл только когда установлен для группы слоев (Layer Group). В этом случае будет сверстан контейнер форм (form). Все формы ввода должны быть помещены внутрь группы контейнера форм. Если ни одна группа не помечена тегом формы, то форма будет создана автоматически.
• #img - этим тегом можно пометить текстовый слой (Type Text Tool Layer). В этом случае текст будет сверстан как изображение. При этом в качестве альтернативного текста изображения (alt) будет задан текст слоя.
  Если пометить этим тегом фигуру, то она будет растеризована и сверстана как изображение, а не как CSS3 код.
• #jpg - изображение данного слоя будет сохранено в JPEG формате вместо PNG формата, даже если изображение содержит прозрачные пиксели. Так как JPG формат не поддерживает прозрачность, прозрачные пиксели будет заменены содержимым нижележащих слоев. Используйте этот тег с осторожностью.
  Помните, что если слой не содержит прозрачных пикселей, то он будет сохранен в JPG формате автоматически. Таким образом, не надо помечать слои данным тегом без особой на то необходимости.
• #gif - изображение данного слоя будет сохранено в GIF формате. Подробнее.
• #text - текстовый слой, помеченный данным тегом, будет сверстан как текст в независимости от того, использует ли текст нестандартный для web шрифт или слою заданы недопустимые эффекты (т.е. отличные от Drop Shadow и Color Overlay). В данном случае текст будет перенесен в CSS верстку сайта без эффектов. При использовании нестандартного шрифта ответственностью пользователя будет добавить в HTML верстку описание этого шрифта с помощью @font-face. Заметьте, что на скриншоте web верстки сайта текст будет рисоваться шрифтом по умолчанию.
  Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией "Конвертировать ВСЕ текстовые слои в текст" при конвертации PSD файла.
• #skip - любой слой или группа слоев, помеченная данным тегом, будет пропущена и не попадет в верстку. Удобен при создании списков. Внимание! Используйте с осторожностью.
• #ul - advanced tag. Применяется только к группе элементов (Layer Group). Из группы будет сверстан маркированный список ul. Все элементы данной группы станут элементами li этого списка. Внимание! Все слои с изображением маркера списка должны быть помечены тегом #limage (на самом деле, в качестве маркера будет взят первый встреченный элемент, помеченный этим тегом. Остальные будут пропущены). Это необходимо, чтобы изображения маркеров не стали элементами списка! Иногда в дизайн-макете все маркеры объединены в один слой. Чтобы облегчить себе работу, создайте слой с одним маркером (к примеру, для первого элемента списка). Пометьте его тегом #limage. Слой с оставшимися маркерами пометьте тегом #skip (тогда этот слой будет просто пропущен).
  Вы можете ознакомиться с использованием тега #ul для верстки горизонтального и вертикального меню на примере образцового PSD макета и сконвертированной из него верстки сайта).
• #limage - advanced tag. Имеет смысл только для элемента внутри группы, помеченной тегом #ul. Первый встретившийся внутри группы элемент, отмеченный этим тегом, будет использован в качестве изображения маркера списка. Остальные элементы, помеченные этим тегом, будут пропущены.
• #flex - если слой или группа помечены этим тегом, то сервис попытается сделать его ширину (а также ширину родительских и дочерних элементов) резиновой, т.е. их ширина будет задана в процентах от ширины родительского элемента.
• #fix - если слой или группа помечены данным тегом, то сервис сделает его (ее) ширину фиксированной, т.е. ширина будет установлена в пикселях.
• #min-width{[width]}, #max-width{[width]}
  где [width] это одно из:
  - значение в пикселях. Пример: #min-width{1000} или #min-width{1000px}
  - значение в процентах. Пример: #max-width{96%}
• #min-height{[height]}, #max-height{[height]}
  где [height] это одно из:
  - значение в пикселях. Пример: #min-height{1000} или #min-height{1000px}
  -  значение в процентах. Пример: #max-height{96%}
• #normal, #hover, #visited, #active, #selected - теги для верстки различных состояний текста, изображений, форм. Подробнее об их использовании читайте в статье.
• #table, #thead, #tbody, #tfoot - используйте данные теги для верстки таблиц. Подробнее читайте в статье о верстке таблиц.
• #pos_fixed - отметьте слой или группу слоев этим тегом, чтобы сверстать их, используя фиксированное позиционирование (CSS стиль "position: fixed;").
• #absolute - отметьте слой или группу слоев этим тегом, чтобы вынести их из общего потока документа и сверстать, используя абсолютное позиционирование (CSS стиль "position: absolute;").
• #hide - отметьте слой или группу слоев этим тегом, чтобы сверстать их невидимыми (CSS стиль "display: none;").

Примеры

Несколько PSD макетов, на примере которых рекомендуется изучить использование тегов, вы можете скачать по ссылкам ниже:

• Пример генерируемой верстки (без применения тегов): Psd file. HTML верстка, ZIP архив с версткой.
• Пример Bootstrap верстки: miami_home.psd, ZIP архив с версткой, HTML верстка
• Еще один пример Bootstrap верстки: notify_psd_theme.psd, ZIP архив с версткой, HTML верстка
• Пример генерируемого CSS3 кода: Psd file. HTML верстка, ZIP архив с версткой.
• Пример использования тегов HTML5: Psd файл, HTML верстка,  ZIP архив с версткой.
• Пример верстки форм ввода: Psd макет, HTML верстка,  ZIP архив с результатом конвертации.
• Пример верстки формы ввода с placeholders: Psd макет, HTML верстка,  ZIP архив с результатом конвертации.
• Пример верстки простого меню на списках: Psd файл, HTML верстка,  ZIP архив с версткой сайта.
• Пример верстки таблицы: Psd шаблон, результат html верстки таблицы, ZIP архив с версткой.
• Пример навигации с active/hover states: Psd макет, HTML верстка, ZIP архив с версткой.
• Еще один пример навигации с active/hover states: Psd макет, HTML верстка, ZIP архив с версткой.

Группировка CSS слоев в div блоки

Каждая группа слоев (Layer Group) в Photoshop конвертируется в div блок в результирующей HTML/CSS верстке.

Объединяйте логические группы элементов (такие, как заголовок, футер, основной контент, колонки и т.п.) в группы слоев (Layer Group) в Photoshop. Это поможет нам правильно объединить CSS элементы в гибкие div блоки HTML (таким образом, если кто-то добавит больше текста, ничего не испортится). Элементы будут сгруппированы в колонки и ряды, в которых выравниваться и располагаться друг относительно друга они будут используя такие css свойства, как 'margin', 'padding', 'float'.

Использование "плавающей" верстки является наилучшим практически для любого сайта. Если элемент CSS верстки изменит свой размер (например, добавится еще один параграф текста), то при HTML вёрстке в абсолютных координатах текст «наедет» на соседние блоки. В «плавающей» же CSS верстке, расширившийся блок «подвинет» блоки, которые с ним граничат.

Photoshop CS4 (и более ранние версии) имеет ограничение на уровень вложенности групп (Layer Group) равное 5-ти. В Photoshop CS5 оно было увеличено до 10-ти. Такого количества вложенных групп вполне достаточно для большинства дизайнов любой сложности.

Группировка элементов не только поможет сверстать Ваш дизайн-макет более правильно, но и облегчит Вашу работу с макетом. PSD дизайн намного легче и удобнее модифицировать, когда все слои логически объединены в группы.

SEO (Search Engine Optimization)

Чтобы поисковые системы успешнее находили Вашу HTML страницу в интернете, на ней следует задать значения таким мета тегам, как title, description, keywords.

Сервис CSS верстки Psd 2 Html Converter поможет автоматически добавить эти мета теги на Вашу страницу. Откройте форму информации о PSD файле (нажмите 'Alt + Shift + Ctrl + I' или в меню 'File' выберите пункт 'File Info...' и выберите вкладку 'Description') и заполните поля 'Document title', 'Description', 'Keywords'. Информация из этих полей автоматически попадет на сверстанную HTML/CSS страницу в качестве соответствующих мета тегов.

Для поисковой оптимизации важно следить за тем, чтобы информация на HTML странице была правильно структурирована. Текст HTML страницы состоит из заголовков различного уровня (в HTML таких уровней 6) и собственно из основного текста. Чтобы создать правильную структуру HTML документа, воспользуйтесь тегами #h1, #h2, #h3, #h4, #h5, #h6. Как понятно из названий, при их использовании будут созданы заголовки 1, 2, 3, 4, 5 или 6 уровня. Чем ниже уровень заголовка, тем он важнее. На правильно сформированной странице заголовки должны быть расположены сверху вниз в порядке возрастания уровня (т.е. уменьшения важности).

Порядок загрузки файла и оплаты конвертации

Процесс загрузки PSD макета, его конвертации в HTML/CSS верстку и оплаты состоит из нескольких шагов.

1. Выберите предлагаемые опции конвертации.
2. Загрузите файл на наш сервер. В зависимости от размера файла загрузка и конвертация может длиться разное время, вплоть до 10 минут.
3. При наличии каких-либо замечаний к подготовке PSD файла, мы предложим Вам с ними ознакомиться. Рекомендуем исправить все замечания к подготовке макета и вернуться к пункту 1. Если замечания не исправлены, CSS верстка может не соответствовать загруженному дизайн-макету.
4. Перед оплатой Вам будет доступен предпросмотр получившейся CSS верстки сайта (скриншот страницы), а также предпросмотр сгенерированного HTML кода. Ознакомьтесь с ними и только если Вас все устраивает, переходите к оплате.
5. Если Вы вошли под свои аккаунтом и на Вашем счету есть доступные конвертации, будет предложено воспользоваться конвертацией со счета.
6. Если Вы не вошли под своим аккаунтом, либо на Вашем счету нет доступных конвертаций, будет предложено воспользоваться одним из способов оплаты.
7. При успешной оплате Вы будете перенаправлены на страницу загрузки CSS верстки сайта. На Ваш e-mail будет отправлено письмо с информацией о конвертации. Если Вы авторизованы, информация о конвертации станет доступна из личного кабинета.