3 заметки с тегом

вёрстка

Где редактору бесплатно учиться базовой вёрстке

Без базового знания HTML и CSS редактору сейчас совсем тяжко, а платить готовы не все — я жмот и не стыжусь этого. Поэтому вот вам ссылки на статьи, вебинары и курсы, где можно, при желании и стремлении, научиться основам бесплатно. Я советую только те курсы и вебинары, которые посмотрел сам, и считаю действительно полезными.

Вебинар Ильяхова «Веб-верстка для редакторов»

Вебинар идёт 2,5 часа, его вполне можно смотреть на скорости 1,5, останавливаясь изредка. Максим подробно и понятно объясняет основы — что такое HTML и CSS, зачем нужен Bootstrap и почему важно знать всё это.

Вебинар Ильяхова «Вёрстка длинной статьи на Bootstrap»

Ещё почти что 3 часа вёрстки от Максима. Но в этот раз практической — Ильяхов прямо на месте верстает статью и показывает, как и что работает. Тоже смотрите с ускорением.

Вебинар Люды Сарычевой «Вёрстка в Pingendo»

Люда рассказывает о вёрстке не чистым кодом, а через суперудобный конструктор Pingendo. Это всё тот же Bootstrap, только в визуальном редакторе. Если сначала сделать там, а потом подточить кодом, то выйдет шик.

Курс Нетологии

Базовый бесплатный курс от Нетологии. На вебинарах расскажут об основах и покажут примеры кода и вёрстки.

Записаться

HTML Academy

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

Пройти курс

htmlbook.ru

Гигантский справочник по HTML. Я постоянно в него заглядываю, чтобы посмотреть, как решается та или иная задача.

Читать

26 июля   вёрстка

Русское поле экспериментов

Когда я вижу дырку в вёрстке, сразу представляю, что это белая стена. Хочется что-нибудь на ней нарисовать.

Из вёрстки Русбейса в октябре 2016 года вышла нормальная такая сказка
Из вёрстки Русбейса в октябре 2016 года вышла нормальная такая сказка

Рисовать мышкой (или на тачпаде) неудобно, поэтому я теперь поступаю иначе: в дырках стараюсь уместить текст песни «Русское поле экспериментов» Егора Летова.

Русское поле экспериментов в блоге Ромы Скрупника
Русское поле экспериментов в блоге Ромы Скрупника

Если заниматься этим делом через Скитч, выходит гламурно:

Русское поле экспериментов на курсовой о разводе
Русское поле экспериментов на курсовой о разводе

Так вот. Если на сайте есть дырка, в которую влезает хотя бы один куплет Русского поля экспериментов, и эта дырка никакую задачу не решает, то надо что-то делать.

2017   вёрстка   лайфхаки

Как установить типограф в Sublime Text 3

Все нормальные редакторы подсматривают у Ильяхова вёрстку в две колонки, а я насмотрел текстовый редактор — Sublime Text 3. Я люблю плагины и настройки, поэтому раскопал типограф и залепил его прямо в Саблайм — теперь я могу автоматически ставить неразрывные пробелы и менять кавычки на правильные нажатием трёх кнопок. Рассказываю.

1. Установите Package Control

Узнать, есть ли у вас Пэкедж Контрол, легко: если вы не знаете, значит у вас его нет.
Через меню Preferences выберите последний пункт и установите его. Если всё ок, меню будет выглядеть так:

2. Установите репозиторий

Пэкедж Контрол вызывается комбинацией Ctrl+Shift+P.

Вылезает окно с командами:

Вводите:

Package Control: Add Repository

Потом адрес репозитория: https://github.com/anwinged/SublimeTypograph

3. Установите плагин

Вызываете Пэкедж Контрол и вводите команду:

Package Control: Install Package

Потом название плагина:

SublimeTypograph

Плагин установлен, осталось настроить.

4. Записываем макрос

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


Чтобы результат был сразу виден, справа снизу смените тип документа Plain Text на HTML — включится автоматическая подсветка синтаксиса.

В редакторе открываем кусок текста, выделяем его. Жмём Ctrl+Q — макрос начал запись.

Вызываем Пэкедж Контрол через Ctrl+Shift+P, вводим команду:

Typograph: typo selection

Выбранный кусок текста автоматически типографится — вы заметите разницу.

Ещё раз Ctrl+Q. Всё, макрос записан. Через меню Tools в верхней панели Save Macro сохраняю макрос в предложенную папку под названием typo.

В тяжёлые минуты жизни макрос можно запустить через меню Tools → Macros → user → название макроса. Чтобы не страдать такой ерундой каждый раз, пропишем макросу сочетание клавиш.

5. Биндим макрос на клавиши

Меню Preferences → Key bindings.

Открывается файл с пользовательскими настройками клавиш. Я хочу типографить по сочетания Ctrl+Shift+A, поэтому вношу в текст код:

[
    { "keys": ["ctrl+shift+a"], "command": "run_macro_file", "args": {"file": "Packages/User/typo.sublime-macro"} }
]

Меняете под себя сочетание клавиш и место, где сохранён файл. Готово.

6. Проверяем

Иногда типограф не работает: жмёте клавиши, а текст не типографится. Кажется, проблема на стороне репозитория, но я не уверен. Просто знай: проблема не в тебе.

Если всё настроено нормально, то текст типографится вот так:

Чтобы текст нормально типографился, не оставляйте пустых строк между абзацами. Если типографите уже свёрстанный текст с тегами, проверьте, не появились ли лишние теги p. И обязательно прощёлкайте ссылки.

2016   вёрстка   инструкция   программы