Как верстать на ноутбуке
Обновлено: 05.07.2024
HTML-верстальщик — это человек, который делает из графического макета работающий сайт. В работе верстальщика много рутины, к тому же важно не упустить различные мелочи и сделать работу максимально быстро. Чтобы облегчить эту задачу, разработчики придумали множество инструментов. В статье мы рассказываем про некоторые из них — выбирайте по вкусу.
Без редактора кода не сверстать сайт. Это основной инструмент верстальщика. Он позволяет писать код на десятке языков программирования, подсвечивать синтаксис, выравнивать код, тестировать его (иногда прямо в редакторе), пушить в репозиторий гитхаба. Какой из редакторов выбрать - дело вкуса. Самые популярные: VSCode, Sublime Text, Brackets, Atom. Все современные редакторы кода обладают примерно одинаковым функционалом, позволяют работать с Git и устанавливать дополнения. А вот плагины к редакторам могут сильно облегчить жизнь верстальщику.
Работает практически с любым редактором кода. В VSCode, например, его даже не надо специально устанавливать: он уже встроен в его функционал.
Этот плагин способен значительно сократить разработчику количество написанного текста. Эммет превращает короткие аббревиатуры в куски кода html. С ним можно быстро построить структуру страницы, написать список из множества элементов, таблицу, несколько вложенных друг в друга блоков вместе с классами. И никаких больше потерянных закрывающих скобок! Все закрывающие теги появятся автоматически.
Также Эммет может написать префиксы для кроссбраузерной верстки и даже сгенерировать “Lorem ipsum” нужной длины.
Аккуратный и хорошо читаемый код — признак мастерства, но выравнивать его муторно и скучно, особенно, если проект насчитывает уже не одну тысячу строк кода. На помощь придут плагины для выравнивания кода. Один из них - Prettier. Надо всего лишь выделить кусок кода и нажать на комбинацию клавиш, и вуаля — ваш код аккуратно выстроен в соответствии с шаблоном. Конечно, все правила выравнивания можно при желании настроить.
Плагин позволяет не перезагружать страницу браузера каждый раз, как вы внесли изменения в код html. Он будет следить за всеми изменениями в ваших файлах, и мгновенно показывать результат в браузере. Очень удобно, когда надо внести незначительные изменения в стилях или, наоборот, перестроить структуру блоков и принять решение, стоит ли оставлять изменения.
Браузер — еще одна вещь, без которой работа верстальщика немыслима. Естественно, у вас должно быть несколько браузеров для проверки кроссбраузерности верстки. Удобнее всего пользоваться Google Chrome или Mozilla Firefox: во-первых, это самые популярные браузеры, и во-вторых, к ним существует множество интересных дополнений, в том числе для разработчиков.
Инструмент для генерации css-кода для некоторых небольших, но трудоемких задач. CSS3 Generator может трансформировать цвет из одного формата в другой, создать css-код для тени, градиента, фильтра картинки. С его помощью можно написать код трансформации блока и сделать простую анимацию.
Цветовая пипетка. Позволяет узнать цветовой код выбранного участка любого сайта. Код можно получить в любом из цветовых форматов, используемых в разработке сайтов, сохранить его в истории и вернуться к нему еще раз в любой момент.
Еще одна полезная фича — доступ в один клик на страницу генератора градиентов от Колорзиллы. Этот сайт позволяет быстро и легко создать кроссбраузерный код для градиента любой сложности.
Разработчики придумали множество инструментов, доступных онлайн. Некоторые из них незаменимы для работы, другие облегчают работу, некоторые служат просто для развлечения или вдохновения.
Лучший бесплатный каталог шрифтов, насчитывает около 100 шрифтов на разных языках. В интерактивном каталоге можно детально изучить символы шрифта, оценить, как он будет выглядеть в разных размерах и начертаниях. Выбранный шрифт можно скачать и подключить локально, а можно сгенерировать код для подключения его с сервера Гугла.
Незаменимый инструмент, если на ваш сайт нужно добавить иконки.
Font awesome - коллекция векторных иконок, которые можно вставить на сайт, как шрифт. Иконки векторные, это значит, что их можно масштабировать до любого размера. И значит, что они будут отлично выглядеть и на retina-дисплеях, требующих высокого разрешения графики. Их легко подключить и легко настроить: размер, цвет, тень - все свойства можно прописать в css, как для обычного шрифта.
Песочницы — это площадки для тестирования и демонстрации фрагментов кода HTML, CSS и JavaScript. Другие языки программирования они тоже поддерживают, как и некоторые библиотеки и фреймворки, но этот функционал нас сейчас не интересует.
Важный этап в работе — проверка работы написанного вами кода. Необходимо проверить, как открывается сайт в разных браузерах и при разной ширине экрана. Соответствует ли он дизайнерскому макету. Все ли его интерактивные элементы: кнопки, форма связи, ссылки работают как задумано.
Популярный инструмент для проверки качества верстки и соответствия ее макету. Существует как дополнение для любого браузера.
Perfect Pixel позволяет добавить на страницу jpg с макетом отдельным полупрозрачным слоем. Таким образом, можно сравнить точность вашей верстки и ее соответствие замыслу дизайнера.
Проверяет разметку html и css на наличие ошибок и соответствие стандартам Консорциума World Wide Web. Этот сервис не напишет за вас хороший и правильный код, но укажет на места, в которых возможны проблемы при работе кода в реальности.
В валидаторе можно проверить код по ссылке, можно загрузить файл целиком или фрагмент кода. В результате вы получите список из ошибок и предупреждений. Ошибки могут навредить работе сайта, а предупреждения показывают код, не соответствующий стандартам, с избыточными или бессмысленными элементами. Участки кода с предупреждениями могут навредить положению сайта в поисковиках.
В предыдущей статье я уже писал о том, что такое адаптивный дизайн и зачем он нужен. Но как достичь этой самой адаптивности?
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта.
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
Работаю верстальщиком удаленно. Работаю на ноутбуке DNS с оперативной памятью 2ГБ.
Если открываю макеты в фотошопе и плюс несколько программ (опенсервер, скайп, редактор кода), то все очень виснет и работать невозможно. Намучился, решил купить новый ноутбук для работы. В связи с этим у меня вопрос, какой ноутбук выбрать именно для вёрстки? В игрушки не играю. На что нужно обрать кроме оперативной памяти? Какой объем оперативки будет оптимальным для комфортной работы? Переплачивать за бо'льшие параметры тоже не хочется.
Та же фигня была, фотошоп и phpstorm и ноут умирал, поставил SSD и всё летает, правда оперативы у меня 8, так что советую брать ноут с SSD под систему.
Плюсую за ssd. Ну и оперативки, мне кажется, сейчас меньше 8 брать не стоит.
Возможно, дешевле будет взять ноут и sdd отдельно. Заменить им hdd, а hdd вместо оптического привода.
Остальное можно по самому минимуму
ЗЫ. Если модель ноута позволяет добавить оперативки и SSD, то сам ноут можно и не менять, а апгрейднуть
Если есть средства, лучше всего купить macbook pro - это будет идеально.
Лучше для работы ничего не существует.
Мне кажется, если бы были средства в достаточном количестве - то ноут DNS ТС никогда в жизни бы не купил :)
verstalshikKHV:Переплачивать за бо'льшие параметры тоже не хочется. adel92:
лучше всего купить macbook pro - это будет идеально.
Купите MacBook Pro - Apple (RU)
От 102 990,00 ₽ до 207 990,00 ₽
открываю макеты в фотошопе и плюс несколько программ (опенсервер, скайп, редактор кода), то все очень виснет и работать невозможно. Намучилсяиз этой фразы я сделал вывод, что человек готов заплатить за комфорт.
Это для подобных целей лучший выбор.
adel92:Если есть средства, лучше всего купить macbook pro - это будет идеально.
Лучше для работы ничего не существует.
мак и работа - вещи в принципе не совместимые, он только для видео редакторов нужен
чего нет на маках:
1. там нет нормального офиса
2. вы в принципе не можете нормально работать с внешними файлами
3. полностью несовместимые кодировки
оно вам как верстальщику надо?
4Гига оперативы на старой тошибе за глаза хватает и на фотошоп и на 3dmax
и на нопетад++ и файловый менеджер
скайп убивайте на фиг, по мимо того что это обычный шпион, так он ещё интегрирован с виндой, что даже полностью убитым в автозапуске (и сам скайп и все его менеджеры) умудряется запускаться в фоновом режиме и искать обновления, особенно после обновлений винды ;)
Может оно и не надо.
Но то что Вы говорите, полные сказки, вот пруфы:
Нормальный офис, word, excel, powerpoint ничем не отличаются:
О каких внешних файлах идет речь?
Стандартный терминал как в любой unix системе, ftp клиенты
+в отличии от windows можно монтировать ftp как папку, и еще куча других удобных линукс команд работают
Обычный Notepad++ такой же как у всех, текстовый редактор, с такими же кодировками как у всех.
Он (мак про) для фотошопа, насколько мне известно идеален. Для верстальщика - аналогично, не тормозит работает быстро, можно запускать довольно много программ одновременно. Вообще если исключить игры - он идеален и создан для работы.
Вы так говорите как будто mac os x с другой планеты и несовместим с этим миром🍿
adel92:Нормальный офис, word, excel, powerpoint ничем не отличаются:
не может быть нормального офиса, а тем более винды без ie - это один из основных компонентов.
и именно поэтому ни одного файла в офисе из сети открыть нельзя - там тупо нет нужных библиотек.
а если вы используете офис только как печатную машинку, то офис вам вообще не нужен и скорей всего даже не знаете и 1% возможностей офиса ;)
мак создан для работы с графикой и видео и больше ни для чего он не пригоден
не даром, при скачивании различных веб шаблонов, под маки идёт отдельная версия ;)
adel92:Вы так говорите как будто mac os x с другой планеты и несовместим с этим миром
вообще-то, именно так
в основном маки - это гламурные игрушки, для альтернативно одарённых особей
«Нетология» подобрала 10 полезных инструментов, которые пригодятся при верстке HTML: от текстовых редакторов до генераторов CSS.
Notepad++
Кроссплатформенный редактор, схожий с Notepad++, но обладающий множеством дополнительных функций. Подсвечивает синтаксис, автоматически сохраняет изменения в файлах, поддерживает 27 языков программирования, плагины и макросы на Python. Программа умеет запускать код без переключения в командную строку. Приложение доступно в версиях для Windows, OS X и Linux, лицензия стоит 70 долларов.
Firebug
Расширение для браузера Mozilla Firefox. Консоль и отладчик JavaScript, CSS и HTML, определяет часть кода, которая вызвала ошибку. Умеет редактировать код на стороне клиента в браузере.
PerfectPixel
Расширение для Google Chrome, которое накладывает на верстаемый сайт полупрозрачный макет. Оба изображения можно попиксельно сравнить и на ходу внести результат изменений кода. Поддерживает несколько слоев и их гибкую настройку, а также функцию блокировки, при которой все элементы на странице становятся кликабельными.
WinMerge
Удобный бесплатный инструмент под Windows для сравнения разных версий файлов, в том числе макетов верстки. Различия отображаются в визуальной текстовой форме, из которой видно, что изменилось в проекте в новой версии.
WinLess
Бесплатная Windows-программа для работы с препроцессором LESS. Он представляет из себя надстройку над CSS с дополнительными динамическими свойствами. WinLess поможет конвертировать LESS в CSS. Программа автоматически сканирует выбранную папку и выбирает файлы, которые содержат нужный код.
CSS3 Generator
Минималистичный инструмент для генерации CSS-кода под множество предустановленных задач.
Ultimate CSS Gradient Generator
Сервис для генерации градиентов. Результат сразу отображается в боковой панели в виде кода.
Livetools Ui Parade
Подборка из четырех бесплатных генераторов элементов для макета: кнопок, форм, иконок и ленточек. Результат можно выгрузить в виде кода HTML или CSS.
павел федоров
курс для начинающих
Старт в программировании
Узнать больше
- Научитесь писать код за две недели
- Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
- Сделайте шаг к новой профессии
Page Ruler
- Бесплатный курс «Основы HTML и CSS»
- Программа обучения «HTML-верстка: с нуля до первого макета»
- Стать фронтенд-разработчиком с нуля — «Профессия front-end разработчик»
Читайте также: