В какой программе делать верстку

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

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

1. Редакторы кода и плагины к ним

Без редактора кода не сверстать сайт. Это основной инструмент верстальщика. Он позволяет писать код на десятке языков программирования, подсвечивать синтаксис, выравнивать код, тестировать его (иногда прямо в редакторе), пушить в репозиторий гитхаба. Какой из редакторов выбрать — дело вкуса. Самые популярные: VSCode, Sublime Text, Brackets, Atom.

ХВАТИТ ОБ ЭТОМ МОЛЧАТЬ — ВЕРСТКА КНИГ

Все современные редакторы кода обладают примерно одинаковым функционалом, позволяют работать с Git и устанавливать дополнения. А вот плагины к редакторам могут сильно облегчить жизнь верстальщику.

Emmet

Работает практически с любым редактором кода. В VSCode, например, его даже не надо специально устанавливать: он уже встроен в его функционал.

Этот плагин способен значительно сократить разработчику количество написанного текста. Эммет превращает короткие аббревиатуры в куски кода html. С ним можно быстро построить структуру страницы, написать список из множества элементов, таблицу, несколько вложенных друг в друга блоков вместе с классами. И никаких больше потерянных закрывающих скобок! Все закрывающие теги появятся автоматически.

Также Эммет может написать префиксы для кроссбраузерной верстки и даже сгенерировать «Lorem ipsum» нужной длины.

Prettier

Аккуратный и хорошо читаемый код — признак мастерства, но выравнивать его муторно и скучно, особенно, если проект насчитывает уже не одну тысячу строк кода. На помощь придут плагины для выравнивания кода. Один из них — Prettier. Надо всего лишь выделить кусок кода и нажать на комбинацию клавиш, и вуаля — ваш код аккуратно выстроен в соответствии с шаблоном. Конечно, все правила выравнивания можно при желании настроить.

Live Server

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

2. Браузерные дополнения

Браузер — еще одна вещь, без которой работа верстальщика немыслима. Естественно, у вас должно быть несколько браузеров для проверки кроссбраузерности верстки. Удобнее всего пользоваться Google Chrome или Mozilla Firefox: во-первых, это самые популярные браузеры, и во-вторых, к ним существует множество интересных дополнений, в том числе для разработчиков.

#1 Верстка сайта с нуля для начинающих | HTML, CSS

CSS3 Generator

Инструмент для генерации css-кода для некоторых небольших, но трудоемких задач. CSS3 Generator может трансформировать цвет из одного формата в другой, создать css-код для тени, градиента, фильтра картинки. С его помощью можно написать код трансформации блока и сделать простую анимацию.

ColorZilla

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

Еще одна полезная фича — доступ в один клик на страницу генератора градиентов от Колорзиллы. Этот сайт позволяет быстро и легко создать кроссбраузерный код для градиента любой сложности.

3. Онлайн-инструменты

Разработчики придумали множество инструментов, доступных онлайн. Некоторые из них незаменимы для работы, другие облегчают работу, некоторые служат просто для развлечения или вдохновения.

Google fonts

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

Font Awesome

Незаменимый инструмент, если на ваш сайт нужно добавить иконки.

Font awesome — коллекция векторных иконок, которые можно вставить на сайт, как шрифт. Иконки векторные, это значит, что их можно масштабировать до любого размера. И значит, что они будут отлично выглядеть и на retina-дисплеях, требующих высокого разрешения графики. Их легко подключить и легко настроить: размер, цвет, тень — все свойства можно прописать в css, как для обычного шрифта.

Песочница кода

Песочницы — это площадки для тестирования и демонстрации фрагментов кода HTML, CSS и JavaScript. Другие языки программирования они тоже поддерживают, как и некоторые библиотеки и фреймворки, но этот функционал нас сейчас не интересует.

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

Источник: productstar.ru

Программы для вёрстки, кроме InDesign

Какие ещё есть программы для верстки, помимо InDesign, и почему он стал так популярен? Чтобы подробнее ответить на этот вопрос начнём немного издалека.

Настольные издательские системы (DTP, desktop publishing) — ведут свою историю из 1970-х, когда компания Ксерокс активно занималась разными экспериментальными разработками. Есть спорное мнение, что именно настольные издательские системы начались в 1983 году — с программы, разработанной Джеймсом Дэвайзом для общественной газеты Филадельфии.

В 1984 выходит Программа Type Processor One работала на PC, и использовала видеокарту для вывода WYSIWYG интерфейса. (Разбирать TeX и LaTeX, более поздние FrameMaker и прочие тут не будем.)

Рынок издательских систем буквально взорвался, когда в январе 1985 Apple представили свой принтер LaserWriter, а позже — в Июле — Aldus (впоследствии Aldus была поглощена Adobe, как и Macromedia в 2004 — та самая, которая выпустила Flash, FinalCut, и прочие) представили программу PageMaker, которая быстро стала стандартом индустрии, в 1985 даже обогнав Майкрософт Ворд в этом сегменте. Ещё была Ventura — впоследствии Corel Ventura, и пара других.

В 1990-х годах QuarkXPress (первая версия вышла на рынок в 1987 году) приобрел широкую популярность в области профессиональной верстки и полиграфического дизайна благодаря простоте использования, неприхотливости системных требований, поддержке векторных шрифтов и других широко востребованных в отрасли возможностей.

На момент появления своего основного конкурента Adobe InDesign в 1999 году, QuarkXPress, несмотря на постоянную критику за высокую стоимость лицензии и довольно долгий период внедрения инноваций, де-факто являлся промышленным стандартом, покрывая около 90% рынка.

Adobe PageMaker 7.0.

Выпуск пятой версии в 2002 году привел к конфликту с фирмой Apple, поскольку релиз все еще не поддерживал Mac OS X, в то время как Adobe InDesign, выпущенный на той же неделе, поддерживал.

Настальгический сплеш-скрин моей первой версии Кварка. QuarkXPress 6.5, 2004.

Одновременно с этим президент Quark Inc. Фред Эбрахими (англ. Fred Ebrahimi) выступил с резкой критикой платформы Macintosh и отметил, что тем, кто не удовлетворен работой Quark на платформе Mac, стоит попробовать что-нибудь другое.

Adobe InDesign CC.

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

Основная проблема Quark, которая стала основной причиной их проигрыша в 2000-х — глухота компании к пользователям, и действительно сильно завышенная на тот момент цена. Вторая — как следствие — техническое отставание, которое компания-производитель здорово сократила в 2018 году, однако все же не смогла окончательно ликвидировать. Были ещё причины, связанные именно с качеством производства, но их можно отнести к первому пункту.

Однако есть распространённое мнение, что с введением в Adobe системы подписки с версии CC, и постепенным полным отказом от бессрочных лицензий, Adobe стала вести себя так же, как и Quark когда-то. Мое личное мнение заключается в том, что для Адоби это совсем не ново (см. хотя бы судьбу бездарно угробленного Flash), и отсутсвие конкуренции ведёт к тому, что отпадает острая необходимость реагировать на замечания пользователей, что многие старые баги не исправляются от версии к версии, а новые функции не вводятся так же активно, как на ранних стадиях развития.

В PageMaker я стал работать, перейдя из QuarkXPress, через который в принципе вошёл в вёрстку. В то время (это была середина 2000-х) QuarkXPress проигрывал PageMaker, и уже появился приличный InDesign. (Тут надо отметить, что с интернетом у нас в стране в это время было ещё всё очень непросто, и программы эти поступали к нам с хорошей задержкой, на CD. И было мало информации о том, что происходит в мире.)

После работы в PageMaker, InDesign — как его продолжение и замена — казался большущим шагом вперёд, он был значительно удобнее. С тех пор прошло больше 15-ти лет, и InDesign развивался стремительно почти все это время.

В определенной степени, в последних версиях это развитие замедлилось, но оживление со стороны Quark настраивает на оптимизм. Ещё очень вдохновляют нововведения в недавно вышедшей последней — на момент написания этого текста версии (CC 2018) — а именно возможность менять размеры макета и автоматически перестраивать свёрстанное содержимое в связи с этим — эта столь долгожданная функция реализована на качественно новом уровне по сравнению с предыдущем решением. Так что надежда на развитие остаётся, и конкуренция между производителями его подстёгивает.

Ну а если вы ещё не знаете InDesign в совершенстве — у нас есть курс, на котором вы научитесь профессионально верстать в нём всё что угодно. И ещё немножечко шить.

Может быть интересно:

• Подкасты для архитекторов на русском языке
• Отчего Ревит уныл
• Кернинг и трекинг
• 5 причин наконец-то начать верстать в InDesign
• Поля ввода в InDesign (и прочих программах Adobe CC)

Источник: dmtrvk.ru

Как сверстать макет. Пошаговый план

Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.

Осмотрите макет

Зачем. Чтобы потом не отвлекаться от вёрстки.

Смотрите макет по принципу «Снаружи — внутрь» — двигаясь от крупных смысловых элементов к деталям дизайна. Чтобы было удобнее, сделайте дубликат макета в Фигме и пишите там заметки о том, что нашли.

Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:

• — шапка сайта, одинаковая на всех страницах.
• — уникальный контент;
• — подвал, одинаковый на всех страницах.

Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:

Проанализируйте контент. Присмотритесь к тексту на макете, какую функцию он выполняет? Может быть то, что вы видите, это не текст, а кнопка или раскрывающиеся меню?

На этом этапе отметьте:

Когда вы закончите работу, у вас в заметках будет готовая схема вёрстки и уже ничего не будет отвлекать вас от кода.

Настройте редактор кода и проект

Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.

Структура проекта. Создайте папку и положите туда файл index.html, папку css с файлами style.css и normalize.css, а также папки для картинок и шрифтов. Получится так:

Разметка

Рабочую среду подготовили, приступаем к разметке.

1. Создаём разметку страницы в файле index.html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
2. Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
3. Теперь определим ! DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.

Выделяем крупные смысловые блоки на каждой странице сайта. Это — шапка, — подвал и — основное содержимое.

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

Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:

Определить, какие теги использовать, можно методом исключения:

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — .
• Для мелких фразовых элементов (слово или фраза) — .

Разметка в редакторе кода выглядит так:

А так проект выглядит в браузере:

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

• Добавление классов в разметку;
• Подключение нестандартных шрифтов (локально или из сервиса);
• Подключение normalize.css (по желанию);
• Указываем параметры шрифта — название, размер, цвет, жирность;
• Указываем высоту строки;
• Описание фоновых параметров (фоновый цвет);
• Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
• Все цвета вынесены в кастомные свойства в селектор :root.

Пример проекта с базовой стилизацией:

Работа с графикой

Экспортируйте всю графику из макета в Figma и подключите её в разметке.

SVG-изображения рекомендуется собрать в спрайт и подключить первым элементом в body. Спрайт — это файл, который мы сшили из нескольких графических элементов, например, из иконок. Спрайты экономят запросы к серверу — с ними сайт работает и загружается быстрее. В спрайт сшивается и растровая, и векторная графика.

В папке вашего проекта подготовьте графику: подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:

project | – css | – fonts | – img | [ваши картинки] | favicon.ico | index.html | catalog.html

Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.

При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:

Подключите к проекту фавиконки. favicon.ico размером 32×32 положите в корень проекта и подключите в , остальные версии фавиконок делать не обязательно.

Пример проекта в котором подключена графика:

Построение сетки

Построение сеток производится в общем стилевом файле style.css.

При работе с созданием крупных структурных сеток, в вёрстке используется подход desktop-first, то есть сайт прежде всего должен корректно отображаться на больших разрешениях экрана.

Расположите элементы страницы по сетке в соответствии с макетом. Для удобства используйте один из следующих способов визуального выделения элементов:

1. C помощью свойства background-color c разными цветами для разных блоков;
2. С помощью свойства outline (для удобства также можно использовать разные цвета).
3. Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Добавление декоративных элементов

На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.

Пример готового проекта, где добавлены декоративные элементы:

Всё почти готово, осталась пара шагов.

Адаптивные сетки и декоративные элементы

Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: как работают вьюпорт, медиавыражения, адаптивные картинки. Эту тему стоит разобрать отдельно, но если хотите, познакомьтесь с ней в блоге Академии.

Адаптивная графика

Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?

1. Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
2. В HTML используем элемент picture , с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
3. В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.

Пример готового проекта, где настроена адаптивная графика:

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

Следующие шаги:

• Шаблон простого сайта на HTML
• Шаблон HTML-формы
• Основы дизайна для верстальщиков
• Как добавить изображение на страницу
• Частые ошибки в HTML-коде

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник: htmlacademy.ru