• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

Перенос макета сайта в HTML

CSS, HTML, LESS, SASSПросмотров: 2437Комментарии: 021 декабря 2020 г.

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа.

Например у нас есть лендинг. Как правило на первом этапе происходит сбор информации, а потом рисуется графический прототип. Это может быть обычный Ворд, или гугл-документы, но часто это сервис wireframe.cc. Мне он очень нравится, поскольку не содержит ничего лишнего и прост для работы. Ну и бесплатный, что тоже важно.

Иногда работу в wireframe.cc выполняет сам копирайтер. Там он не только пишет тексты, но и размечает блоки, которые по его мнению можно скомбинировать определённым образом. Когда всё готово, этот макет получает html-верстальщик, который должен перенести тексты (это простое копирование) и разверстать блоки, только уже в HTML-код.

Здесь есть очень важный момент — первая версия вёрстки должна повторять макет wireframe.cc (это может быть любой другой сервис — я привожу его только как пример). То есть не нужно верстать в цвете, задавать все изображения, настраивать отступы: нет — это будет тоже черновой вариант, но только выполненный в html-коде.

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

Но при этом, полученный html-код должен содержать только самый минимум css-классов и html-тэгов, потому что на следующем этапе (приведение к дизайну) это всё возможно придётся переделывать.

Итак, пусть у нас есть вот такой макет от копирайтера.

Исходный макет

Нам нужно перенести его на HTML. Я покажу на примере Albireo, но вы можете сделать это даже вручную и под свой фреймворк. Мы будем использовать классы Berry CSS и парсер Simple.

Делаем страницу, где в параметрах указываем класс для BODY:

parser: simple
body: class="prototype"

Дальше пропишем css-стили прямо в тексте страницы:

<style>
.prototype .layout-center-wrap {margin-bottom: 50px;}
.prototype .flex > div {padding: 10px; border: 1px dotted lightgray; margin: 10px 10px 20px 10px; flex-grow: 1;}
.prototype p {margin: 0 0 5px 0;}
.prototype .img {background: lightgray; padding: 20px; text-align: center; width: 200px; height: 200px;}
.prototype .block {margin: 20px 0; padding: 30px; text-align: center; border: 1px dotted lightgray;}
</style>

Смысл в том, что они сработают только тогда, когда у BODY будет указан класс .prototype. В них мы добавляем простые отступы, цвета, то есть всё то, что может пригодится при прототипировании. Когда нужно будет начать чистовую верстку, то этот класс и стили достаточно будет удалить — они никак не скажутся на результате.

HTML-код можно писать с помощью Simple.

div(layout-center-wrap) || div(layout-wrap)
    div
        h2 Описание
    /div
 
    div
        ul
        * Для lorem
        * Для lorem lorem
        * Для lorem lorem lorem 
        /ul
    /div
/div || /div

Все блоки я заворачиваю в layout, чтобы ограничить их широту (это классы Berry CSS). А внутри каждый блок макета обрамляется в DIV. И здесь мы стараемся не использовать классы, чтобы не создавать лишней работы на будущее.

Когда стоит задача разместить колонки, то используется flex.

div(layout-center-wrap) || div(layout-wrap flex)
    div
        h1 Оффер оффер оффер оффер оффер оффер оффер
        
        ul
            * Для lorem
            * Для lorem lorem
            * Для lorem lorem lorem 
        /ul
    /div
 
    div
        __(img) картинка
    /div
/div || /div

В исходном макете в 99% случаев используется всего три элемента:

  • текст
  • блок
  • изображение

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

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

В некоторых случаях на макете может быть блок без конкретики. Например гугл-карта или блок фотографий галереи. Копирайтер просто его отмечает пустым блоком, а мы можем сделать так:

div(layout-center-wrap) || div(layout-wrap)
    __(block) Галерея
/div || /div

На выходе получается такой простенький вариант:

Итоговый вариант в HTML

Поскольку html здесь очень простой, то файл можно вообще передать копирайтеру для правки, чтобы «отвязаться» от графического макета.

При желании, можно ещё больше упростить написание кода, если предусмотреть замены в тексте. Например можно сделать так:

[boxf]
    div
        _ Название сайта
    /div
 
    div
        _ Телефон: +38 012 345 67 89
        _ понедельник - пятница: 9.00-18.00 
        _ суббота: 9.00-16.00
        _ Киев, Крещатик, 25
    /div
 
    div
        _ Аварийная служба: +38 012 345 67 89
        _ Круглосуточно
        _ Иконки соцсетей
    /div
[/boxf]
 
[box]
    div
        h2 Описание
    /div
 
    div
        _ Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
    /div
[/box]

Здесь мы оставляем все те же DIV, но вместо классов layout и flex используем замены в виде [box] и [boxf].

В Albireo это делается достаточно просто. В параметры страницы добавляем:

init-file: _proto.php
text-function: proto

Делаем файл _proto.php (в каталоге albireo-data):

<?php if (!defined('BASE_DIR')) exit('No direct script access allowed');
 
function proto($text) {
    $text = str_replace('[box]', '<div class="layout-center-wrap"><div class="layout-wrap">', $text);
    $text = str_replace('[/box]', '</div></div>', $text);
    
    $text = str_replace('[boxf]', '<div class="layout-center-wrap"><div class="layout-wrap flex">', $text);
    $text = str_replace('[/boxf]', '</div></div>', $text);
    
    return $text;
}

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

После того, как все тексты и блоки расставлены и утверждены, верстальщик удалит стили и класс .prototype и начнёт делать вёрстку согласно дизайна.


Создание сайтов (Украина) →
Асинхронная загрузка js-скриптов
Релиз шаблона MF 10 (декабрь 2020)
twitter.com facebook.com
Другие записи сайта
Новости по моим проектам
Новости по моим проектам
Шаблон Builder (Строитель)
Шаблон Builder (Строитель)
Взаимодействие между Alpine-компонентами
Взаимодействие между Alpine-компонентами
Чеклист или методика создания шаблона
Чеклист или методика создания шаблона
Как получить 100 баллов в Google PageSpeed Insights
Как получить 100 баллов в Google PageSpeed Insights
Простой шаблон в MaxSite CMS
Простой шаблон в MaxSite CMS
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2621 | SQL: 20 | Память: 4.6MB | Вход