7 правил быстрой верстки


Содержание

Программы для верстки сайтов.

06.02.2020

Программы для верстки сайтов.

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

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

1. Редактор кода — думаю можно скачать бесплатно

Первая из программ для верстки сайтов, это редактор кода. В принципе подойдет любой из современных редакторов, ну т.е. я думаю, Вы логически уже пришли к тому что не стоит верстать на фрилансе или в офисе в стандартном блокноте windows или Notepad++. Все же перечислю те которые мне понравились:

Сейчас по факту у меня на пк установлены две программы для верстки, — IDE PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:

  • Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
  • Поиск по всему проекту + найти и заменить (ctrl + shift +F)
  • Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
  • Закомитить + запушить (ctrl + K ctrl + shift + K)
  • Работаю с базой данных проекта (на правой стороне панели редактора)
  • Обнять часть кода новым тегом html (ctrl +alt + J)
  • Показать идентичные куски кода (ctrl + alt + shift + J)
  • создание и использование сниппетов и пр.

2. Emmet.

Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например такой строкой:
nav>ul>li*3
По жамканью на tab Вы получите такой код:

Или вот так например в CSS :
bg
Даст:
background: #000;

3. CSS препроцессоры.

Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтексом. Я использую препроцессоры потому что в них есть:

Код css получается более удобочитаемым, структурированным, легко редактируемый и расширяемый. Ух какие длинные слова, но они очень важны для верстальщика HTML .

4. Grid (сетка).

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

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

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

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом.
Здесь тоже есть большие боссы:

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

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

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

6. Онлайн программы, для верстки и работы с .psd макетами сайтов.

И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

Hello-site.ru

Emmet — быстрая верстка с помощью скоростного написания html кода. Альтернатива Zen Coding.

Занимаясь когда-то версткой макетов, я познакомился с очень интересной и удобной для верстки штукой. Zen Coding — плагин для NotePad++, который ускоряет написание html кода. Несколько символов с помощью горячих клавиш превращаются в большое дерево html кода.

Здесь же я хочу познакомить вас с новым плагином для текстовых редакторов. Emmet — плагин, который также предназначен для скоростного написания кода, имеет преимущества над Zen Coding. Заметно, что у него появилось больше комбинаций для написания html, плюс появились комбинации для css стилей, я этого не заметил в Zen Coding. Единственное, показалось, что emmet на долю секунды работает медленее Zen Coding. Ваш выбор, или большой набор комбинаций для html и css или привычный и быстрый Zen Coding.

Данный код строит структуру html документа с разметкой HTML5:

html:5

Тег div с размещенным в нем текстом:

Вложенность тегов с указанием классов для некоторых тегов:

div.active>p>a>span.text

Теги списка с указанием количества вложенных тегов li:

Указав такую комбинацию скрипт печатает div с указанным класс и id:

.block#doc

Следующим образом можно распечатать тег img с любым атрибутом и его значением:

img[data=»s»][src=»https://hello-site.ru/»]

Также можно записать теги друг за другом через знак плюса:

.firts+.second

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

lorem

А такая комбинация распечатает несколько элементов списка с разным экспериментным текстом:

l>lipsum10*5

Здесь то же самое, но с тегом div:

lipsum*6

Пара комбинаций для быстрого написания стилей в css:

Комбинация для написания стилей: значения высоты и внешнего отступа:

h10p+m5px

Рабочий кроссбраузерный пример подключения нестандартных шрифтов:

7 советов по качественной верстке шаблона сайта

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

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

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

Итак, какие же эти правила? Разберем их в семи шагах.


1. Макет сайта.

Минимальная ширина макета 1000 пикс, не зависимо, от того какой тип макета у нас — фиксированный или резиновый. Почему именно 1000 пикс? Ширина макета должна подстраиваться под популярное разрешение монитора и желательно без появления полосы горизонтальной прокрутки (лично я ее не люблю). На сегодняшний день это — 1024 x 768 пикс. Вычитаем из ширины окна браузера полосу вертикальной прокрутки и получаем ширину 1000 пикс. При уменьшении или увеличении окна браузера все должно смотреться также красиво, т.е. элементы сайта не должны ни куда расплываться или наезжать друг на друга. Макет сайта должен быть гибким – легким движением руки превращаем фиксированный макет в резиновый и наоборот. Делается это примерно так: создается общий каркас (контейнер) и внутрь него кладутся уже остальные блоки (шапка сайта, левая и/или правая колонки, меню и т.д.). Далее через файл стилей оперируем уже минимальной шириной основного контейнера.

Нижний блок (подвал) сайта со счетчиками и копирайтами всегда должен быть прижат к низу. Проверить это можно, зажав клавишу Ctrl + прокручивая вниз колёсико мыши. Разрешение макета будет увеличиваться так, как на мониторе с высоким разрешением экрана. Чтобы вернуться в обычный режим нажмите комбинацию клавиш Ctrl + 0.

2. Код.

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

Код должен быть как можно простым и легко читаемым. Также следует использовать все принципы семантической верстки, т.е. использование тегов по их прямому назначению. Вот, к примеру, заголовки всех уровней H1-H6 – по иерархии заголовок первого уровня H1 должен всегда быть выше всех остальных, потом идет заголовок H2 и т.д. Списки должны быть списками – нумерованный (ol) и не нумерованный (ul). Вот еще пример: контактные данные, а именно адрес целесообразно будет заключить в теги (теги HTML5). В общем суть надеюсь вы поняли. Более подробно, что такое семантическая верстка вы можете почитать в интернете, вбив в адресную строку Яндекса или Гугла фразу «Семантическая верстка это…».

Несколько слов о файлах стилей. При написании кода в файле стилей старайтесь разделять код по таким же блокам что и в html, т.е. стили для шапки сайта, стили для левой колонки, правой колонки и т.д. Желательно отделять осмысленными комментариями. Помните, что с данным кодом в дальнейшем могут работать и другие верстальщики, так, что они должны легко разобраться. Все файлы стилей желательно объединить в один единый. Сделать это можно через импорт (@import url(‘styles.css’);), предварительно сложив все файлы в общий каталог.

3. Кроссбраузерность.

Сверстанный макет должен одинаково смотреться во всех популярных браузерах и не забываем про старые версии. Основные браузеры, под которые я «затачиваю» свои макеты это – Firefox, Opera, Google Chrome, Safari, Internet Explorer 7, 8, 9. Для 6-го ИЕ (Internet Explorer) ставлю заглушку. Когда пользователь заходит на сайт, при помощи ИЕ 6.0, то для него открывается страница с информацией о том, что данный браузер устарел и что пора обновляться до более современных и ниже предлагаются ссылки на скачивание популярных браузеров.

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

4. Графика.

На любом сайте есть графика – это картинки, видео, флеш… К чему я это говорю? Представьте вы сверстали макет, заполнили его какими то демо-материалами и в результате вес одной вашей странички составил более 2 Мб. А ведь по сути на странице еще ничего нет и мы не знаем, что еще захочет разместить на ней владелец площадки. В общем – вся графика используемая при верстке должна быть оптимизирована под веб-формат. Желательно, чтобы одна картинка не весила более 50 кб. Картинки кнопок, стрелок и подобной графики, которая не имеет плавных переходов и теней желательно сохранять в формате GIF. Изображения, которые не имеют прозрачного фона сохраняйте в формате JPG, выбрав оптимальное соотношение качество и объема (вес файла). В Photoshop при сохранении файла для «Веб и устройств» это «Высокое качество — 60». Тоже касается и флеш-роликов, они должны обязательно оптимизированными. Если вы заказывали его флеш-мастеру, то обязательно расскажите ему про соотношение качества и объема файла.

Проверить сколько у вас весит страничка после верстки вы можете, воспользовавшись плагином Firebug для Mozilla Firefox. Откройте Firebug, переключитесь во вкладку «Сеть» и обновите страничку. В самом конце списка вы увидите количество запросов и общий объем странички.

5. Строгое соответствие макету PSD.

Ваш сверстанный шаблон, должен строго соответствовать psd-исходнику. Дизайнер возможно на прорисовку одного элемента потратил какое то n-ое количество времени, а вы взяли и все испортили – сделали как вам удобно. В крайнем случае, если у вас что то не получается вы можете проконсультироваться по этому поводу с дизайнером, а также с менеджером проекта или с самим заказчиком.

6. Соответствие стандартам W3C.

Верстка сайта выполняется в соответствии с некоторыми стандартами, выпущенной консорциумом Всемирной паутины (W3C). Данная организация занимается разработкой и внедрением технических стандартов web-разработок. Так вот, ваш сверстанный дизайн должен придерживаться данных стандартов или как еще говорят пройти валидацию. Проверить шаблон на соответствие поможет специальное программное обеспечение, которое называется валидатор.

Почему так важно, чтобы код сайта был валидным?

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

Во-вторых, поисковые системы могут негативно относится к сайтам, код которых содержит ошибки. Чем больше ваш код соответствует политике консорциума W3C, тем лояльнее к вам будут относиться поисковики. Поэтому уделите этому аспекту внимание для продвижении сайта в поисковых системах.

Цукерберг рекомендует:  Framework - В чём смысл противостояния Python vs Ruby

Больше всего валидатор может «ругаться» на старые теги, незакрытые, неправильно оформленные и т.д.

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

7. Проверка на наличие ошибок.

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

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

Ну вот в принципе и все что хотел сказать. Всем удачи! Всем пока!

Заур Магомедов

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

Верстка сайта — шпаргалка для начинающих

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

Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

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

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox , Opera , Safari , Google Chrome и Internet Explorer , который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно ( menu , footer , header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1 , h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

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

  • Фиксированная верстка . При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка . В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка . Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка . Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств . Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

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

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

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

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

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

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

Блочная верстка сайта

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

Блочная верстка сайта имеет следующие преимущества:

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


Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:

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

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript , что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

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

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования ( VBScript , CSS , JavaScript );
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

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

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

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

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

Вступление на путь верстальщика

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

Что же такое верстка?

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

HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.

В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.

По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.

Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.

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

Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:

На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.

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

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

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

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

Основные направления: фриланс или конторки.

О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.

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

Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.

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

МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.

Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.

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

1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.

http://htmlacademy.ru/ — ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.

http://learn.javascript.ru/ — по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.

http://codeschool.com/ — тут платно, но есть бесплатные курсы, годные вещи про jquery и git

http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.

http://teamtreehouse.com — тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.

Интенсивы от академии:

Базовый интенсив HTMLacademy за 2015 год:

Продвинутый интенсив HTMLacademy за 2015 год:

Лично я бы советовал сначала браться за http://htmlacademy.ru/ . В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.

Курсы дадут понимание элементов верстки, но только разрозненное. Вряд ли ты сможешь после них сверстать полноценный сайт самостоятельно, это нормально. Для того и нужен базовый интенсив. После него ты сможешь делать фиксированные простенькие странички. Запили минимум 3 из представленных учебных макетов. Практика просто необходима.

Затем переходи на продвинутый интенсив. Твоя основная задача там — освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.

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

Не лишним будет ознакомиться с сетками на flexbox и прочими новыми фишками. Вот здесь уже можно проплатить, если есть желание, продвинутые курсы в академии. Месяц там стоит 300 рублей, и за это время ты вполне успеешь пройти все даже дважды. Это не то чтобы мастхев, но понимание работы ксс-анимаций, хороших практик верстки, различных продвинутых элементов в новой спецификации и т.д. там дается. Хотя я буду лукавить, если скажу что всю эту инфу нельзя найти в инете и в разрозненном виде.

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

Тут надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.

http://www.ozon.ru/context/detail/id/20279391/ — «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS» Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.

http://habrahabr.ru/post/240219/ — «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.

http://frontendbookshelf.ru/ — список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.

http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.


Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:

Появились новые тренировочные задания с ТЗ:

ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:

Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.

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

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

Ревью верстки: 10 полезных замечаний и советов

Статья рассчитана на новичков в верстке, но не исключено, что и опытный верстальщик узнает себя в каком-то из пунктов. Примеры ниже написаны с использованием соглашения по именованию селекторов БЭМ, препроцессора Sass и шаблонизатора Jade.

Code-review для верстки часто пренебрегают, отчасти, возможно, из-за сложившегося стереотипа, что верстать нужно, набрав побольше воздуха, зажмурившись и раскидываясь хаками и костылями, пока не будет достигнута та самая неуловимая кроссбраузерность. А поддерживать чужую верстку — только человеку с крепкими нервами и достаточным запасом медикаментов.

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

Ошибка 1: Не продумана структура проектной папки

Довольно часто верстальщикам ставят задачи постранично и макеты предоставляют тоже постранично. Это иногда порождает иллюзии, что работы мало и вся верстка будет прекрасно себя чувствовать в 2–3 папках, а если нет, то всегда найдется время поправить структуру. Но чем больше блоков и страниц сверстано, чем ближе к релизу и чем больше страниц / компонентов уже интегрировано, тем сложнее что-то изменить.

Предлагаю с первого же коммита поддерживать прозрачную структуру. Вот пример структуры проектной папки, которую мы использовали на зимней стажировке 2020:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Совсем необязательно в точности копировать эту структуру, достаточно обратить внимание на ряд моментов:

1. Вспомогательные документы, блоки и страницы живут отдельно

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

В scss общие стили типа reset, или подключения шрифтов, или лейаута верхнего уровня стоит также хранить отдельно от стилей для страниц и блоков. Также целесообразно импортировать все в один документ (например, main.scss) и только этот документ компилировать в css. По объективным причинам таких документов может быть несколько (например, из-за ограничения по количеству селекторов / весу css-документа в IE9 или для поставки специфических стилей для редко встречающихся устройств отдельно от основного документа), но, как и с Jade, не стоит компилировать все подряд.

2. Jade-блоки = БЭМ-блоки

Если у вас небольшой опыт работы с шаблонизаторами, это дробление может слегка напугать, но на самом деле работать с большим количеством документов для компонентов гораздо удобнее, чем в одном документе с тремя тысячами строк. Ничто не мешает объединять компоненты в директории, если проект большой. Так компоненты легко переиспользовать и «инклюдить» на разные страницы, а для компонентов с разными состояниями и/или разным контентом (например, для кнопок) можно написать миксин, который может в качестве входных параметров принимать контент, модификатор или значение атрибута.

В итоге в коде index.jade и других страниц должна быть строчка, указывающая на базовый шаблон, возможно, 1–2 тега верхнего уровня, инклюды и вызов миксинов.

3. Scss зеркалит Jade

Если в Jade-директории blocks есть какой-то документ, то стили для него должны находиться в Scss-директории blocks в документе с таким же названием.

Например, согласно структуре, указанной выше, стили для jade/1_blocks/header.jade должны лежать в scss/3_blocks/header.scss , а не где-то еще. Если следовать этому простому правилу, то вносить изменения будет удобно всем разработчикам на проекте, даже новым.

Для тех, кому необходимо запушить структуру проектной папки сразу после создания (т.е. когда большая часть папок пуста), напоминаю про существование .gitkeep , документа, который позволит гиту «затрекать» вашу пустую директорию.

Добавить .gitkeep во все пустые папки можно с помощью этой команды:

После заполнения папок не забудьте удалить ненужные .gitkeep.

Ошибка 2: копипаста есть, комментариев нет

С копипастой нужно быть особенно аккуратным: вдумчиво все перечитать, исправить «под проект» и удалить лишнее. Однажды мне встретилось:

, при этом обычный содержал совершенно другую строку :).

Не важно, делаете вы редизайн или используете решение из интернета, пока копипаста не будет переработана, рядом с ней должен быть комментарий с TODO , чтобы:

  • не забыть и не утащить этот кусок в продакшн,
  • дать понять другим разработчикам, что это не окончательное решение,
  • дать понять ревьюеру, что этот код будет изменен.

Начинающие верстальщики иногда пренебрегают тем, чтобы потратить несколько минут и переработать найденное решение. Так в scss появляются вендорные префиксы, когда в сборку включен автопрефиксер, мусорные свойства и даже переопределения в рамках одного правила:

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

У авторов статей есть такой прием — вычитка, когда написанный текст перечитывают несколько раз, чтобы исправить пропущенные ошибки и перефразировать предложения, которые плохо звучат. Рекомендую активно проводить вычитку своего кода и особенно копипасты. Еще в борьбе с копипастой в стилях может очень пригодиться csscomb.

Ошибка 3: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

Будет скомпилирован в:

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

Блок — это отдельный компонент, который не знает о других блоках и их расположении.

«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)

Такой код будет ошибочным, т.к. состояние одного блока влияет на элемент в другом блоке:

Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child :

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

В случаях, когда only-child не подходит, используйте модификаторы.

Ошибка 4: не использовать миксины, когда можно использовать миксины

Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Ошибка 5: беспорядок в медиазапросах

Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width , используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.

Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой).

В scss есть возможность вкладывать медиазапросы в правила. Например:


Это будет скомпилировано в:

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

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

Ошибка 6: не интересоваться UX-проектированием

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

Для начала предлагаю обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт. Чтобы такого не происходило с вашими пользователями, советую почитать гайдлайны от Google или SmashingMagazine.

Ошибка 7: все в пикселях, даже font-size

Советую сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

  • размер шрифта и высота строки,
  • размеры иконок,
  • размеры кнопок,
  • вертикальный ритм.

В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

  1. em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,
  2. rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаю обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

Также с псевдоэлементами и em стоит быть осторожней:

«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

Ошибка 8: не думать о переполнении и предельных значениях

Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка.

Ошибка 9: уделять недостаточно внимания графике

Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает, а вот с иконками и контентными изображениями все не так хорошо.

Сегодня стоит предпочесть svg-спрайты иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать тут и тут. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть полифил, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон.

Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у или с помощью тега

. Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советую бесплатный курс «Responsive images» от Udacity.

Ошибка 10: Pixel Perfect? Не, не слышал.

Не зря этот пункт последний в этой статье — о Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (смотри переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это – адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.

В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

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

Секреты верстки

Как покрасить буквы в слове?

Письмо от подписчика:

Серёга, привет. Написал в теме письма, что вопрос по материалам сайта, просто потому, что не нашел другой подходящей категории.

Мой вопрос касается стилей css, ты же мастер У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.

Заголовок моего сайта из 12 букв, мне надо чтобы он был трехцветным, то есть первые три буквы — белые (#ffffff), следующие пять букв — синие (#0060ff), и последние четыре — красные (#ff0000).

Как мне все это изобразить, ниже вставил в письмо код заголовка в файле style.css шаблона темы:

Что мне надо там прописать, и можно ли вообще прописать каждую букву своим цветом? Искал информацию в сети по этой теме, ничего не нашел.

Раньше у меня была темка шаблона, где одна буква (первая) прописывалась своим цветом:

Может мой вопрос и лоховский. я не спец. Поможешь, скажу СПАСИБО.

Ответ на вопрос:

Привет Юра. В стилях можно задать отдельные значения как для первого символа так и для первой строки. Но если тебе надо покрасить в разный цвет буквы или слова в предложении. Рекомендую использовать парный тег — это так сказать «пустой» тег строчного типа. То есть оформление у него по умолчанию отсутствует и он идеально подходит для таких вот задач. Вот пример:

В итоге получаем вот такую надпись (шрифт увеличил, что бы было лучше видно):

www. Master-CSS .com

Если остались вопросы — задавайте в комментариях.

Как стать начинающим верстальщиком

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников glivera-team, но может помочь всем, кто решил освоить данную специальность.

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работает float, inline-block и flexbox
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом


Дизайнер предоставляет верстальщику макет в формате psd(формат файлов Photoshop). Поэтому верстальщику необходимо уметь с ним работать. Все функции программы не нужны, главное уметь следующее:

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто — машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите — попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Адаптивность

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

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Практика

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

PSD to HTML — супер быстрая вёрстка!

Привет!
У меня большое количество мелких заказов на сайты-одностранички. Я быстро рисую макеты в Photoshop, разделяю на области (инструмент Slice), экспортирую в html и дорабатываю в DreamWeaver (возни в котором очень много, меня это не устраивает). Загвоздка в том, что работа эта требует очень быстрых решений (сайт в день заказа) и при экспорте получается таблица на всю страницу с фоновыми изображениями. Мне же нужен ещё и текст, и ссылки, и чтобы аккуратно.
Что можете посоветовать для такой работы? Подойдёт ли для этого FireWorks (я слышал о нём, даже стоит у меня, но что это не разбирался)? И где тогда найти вменяемые маны по его использованию?

Да, сильно не пинать, я сам и верстать и программировать умею, но нужно автоматизированное решение!

18.07.2012, 19:18

Вёрстка шаблона psd, HTML-CSS
Помогите как сверстать из psd сайт ,3 недели мучаюсь не как не выходит . если онлайн сервис.

Вёрстка по PSD макету
Здравствуйте. Мне очень быстро нужно сделать страницу по PSD макету, только сверстать с HTML и СSS.

Верстка из PSD в HTML
Добрый день, web-программисты/верстальщики. Подскажите пожалуйста каков принцип верстки psd макета.

Различия шрифтов PSD и HTML
Доброго времени. Вопрос в следующем почему в псд и в браузере визуально различаются шрифты? И там.

Автоматическая верстка psd в html
Заходите не пожалеете Конвертер psd в html

Удобная и быстрая вёрстка с использованием продуктов Adobe

Недавно я видел, что некоторые верстальщики всё ещё сохраняют фрагменты дизайна в виде отдельных файлов, т.е. используют Crop Tool в Photoshop, получается медленно, некачественно и неудобно. Для таких верстальщиков или для начинающих опишу более удобный, и наверно более правильный способ вёрстки, который заключается в использовании инструмента Slice Tool в Photoshop, последующего «сохранения для Web» и использования программы Dreamweaver для HTML-вёрстки.

Введение

После того, как готов дизайн надо разделить его на куски, причём надо сразу представлять, как будет выглядеть HTML-структура странички, чтобы потом не провести несколько мучительных часов в раздумьях о том, как бы теперь эти картинки разместить в таблицах или div`ах.
Также надо стараться, чтобы картинки можно было сохранить в самом подходящем формате. Например, если есть объект с чёткими границами цветов, и один из его краёв переходит в другое изображение в виде градиента, то имеет смысл сохранить этот край отдельным куском в формате JPG, а остальную часть в GIF (только без фанатизма). Но к выбору формата сохранения кусков картинки вернёмся позже. А сейчас о самом процессе.

Фрагментация дизайна в Photoshop

Для начала надо разметить будущие фрагменты изображения с помощью Slice Tool (или кнопка “k” по умолчанию). Если два раза кликнуть на полученную область (возможно с зажатой кнопкой Ctrl), то открывается окно настроек. В этом окне можно отметить, будет ли на выходе создаваться картинка соответствующая этой области или вместо неё в выводимом HTML-файле оставлять пустую область. После того, как вы создаёте свои (пользовательские) фрагменты, автоматически создаются технологические фрагменты, на которые вы можете не обращать внимания.

Чтобы отметить все фрагменты, по которым не надо создавать картинки, придётся настраивать достаточно большое их количество, поэтому я обычно этого не делаю. Если не отмечать области как «No Image», то после вывода в папке с картинками получится много файлов, из которых трудно будет выбрать нужные, но все эти файлы будут иметь префикс, который является именем .PSD файла. Можно назвать PSD файл именем, которое начинается с 2-х подчёркиваний, и все технологические файлы будут сгруппированы.

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

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

После того, как все куски размечены и названы, переходите в File->Save For Web & Devices.
В открывшемся окне выберите Slice Select Tool (или кнопка “k” по умолчанию) и поочерёдно выбирайте каждый из пользовательских фрагментов, чтобы указать параметры сохранения. Параметры для каждого из фрагментов устанавливаются в правой части окна. В этом меню можно выбрать формат картинки и её качество/количество цветов. Для сравнения оригинального изображения и оптимизированного используйте вкладки над областью просмотра и размер изображения на выходе.

После того, как все фрагменты оптимизированы, можно произвести «сохранение для Web» (кнопка Save).
При сохранении проверите параметры:

  • Тип файла: HTML and Images
  • Settings: Default Settings (для ознакомления можно посмотреть Others…)

В результате вв получите html файл и папку images с картинками. Среди картинок будет файл spacer.gif – это прозрачный однопиксельный GIF.

Вёрстка HTML странички при помощи Dreamweaver

Откройте сгенерированный Photoshop`ом файл в Dreamweaver в Design View.

Создайте новый HTML-файл.

В новом HTML-файле создавайте таблицы или DIV`ы, т.е. делайте структурный макет станицы. Когда вам надо вставить картинку в ячейку таблицы, вы нажимаете Ctrl+Tab тыкаете мышкой в картинку, нажимаете Ctrl+C, Ctrl+Tab и Ctrl+V в нужное место.
Желательно, чтобы новый HTML-файл был открыт в Code and Design View, тогда при вставке скопированной картинки вы будете контролировать генерируемый код. Перенос картинок в визуальном режиме позволяет значительно ускорить и упростить этот процесс, т.к. не надо выбирать картинки из списка, все картинки у вас перед глазами.

Выводы

В результате, при использовании Slice Tool можно быстро разрезать дизайн на фрагменты и оптимизировать их. При сохранении в режиме «Save For Web and Devices» автоматически сгенерируется HTML-фал, который можно использовать для удобной вставки изображений в новый HTML-файл в процессе вёрстки.

Цукерберг рекомендует:  Тест по Базам данных. MySql
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих