Что нужно знать для верстки сайтов

Что нужно знать для верстки сайтов

Дата публикации: 2016-01-04

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

Азы верстки

Если вы полный новичок в сайтостроении и мечтаете когда-то сверстать свой первый шаблон сайта, то начинать нужно строго с макетов на чистом HTML и CSS. Это наиболее простые веб-технологии, которые можно изучить. Основы верстки сайтов – это именно знание этих двух языков, без которого дальше продвигаться нет никакого смысла.

Изучив их, находите в сети бесплатные PSD-макеты и пытайтесь из них верстать сайт. Стоп. Что такое PSD-макет? Шаблон сайта, нарисованный дизайнером в фотошопе. Соответственно, вам понадобиться фотошоп или его бесплатный, но менее функциональный аналог – GIMP. В этой программе тоже можно работать с макетом. Вам нужны базовые знания работы со слоями. Их можно получить буквально за пару часов, посмотрев пару видеороликов о работе верстальщика с макетом. Их можно бесплатно найти на Youtube.

Рис. 1. Мастером фотошопа можешь ты не быть, но вырезать слои обязан.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

А где же получить основные знания по верстке? Правильно, на нашем сайте. Чем для вас это выгоднее? Во-первых, вся информация структурирована по разделам. Когда я начинал изучение HTML и CSS, мне приходилось бегать по десяткам сайтов и форумов. Не разумнее ли воспользоваться одним ресурсом, одним справочником и одним складом, где собрано все, что вам нужно для старта. А изучив основы вы определенно точно поймете, что вам нужно дальше и нужно ли, а также где это можно найти.

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

Что нужно знать о верстке сайтов

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

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

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

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

Использование актуальных тегов. Если вы учили HTML 10 лет назад, то наверняка помните теги, которые сегодня практически не используются или вовсе более не поддерживаются. Ни в коем случае не стоит использовать их, потому что в новых браузерах будут возникать ошибки. Например, frame или object — старые неудачные эксперименты, которым давно есть более удачная альтернатива.

Также есть устаревшие CSS-правила. Если вы учите эти языки на новом сайте, то там наверняка не будет всего этого старья. В подробных справочниках по HTML и CSS вы можете найти описания старых свойств и тегов, а также их поддержку в различных спецификациях и браузерах. Обращайте на это внимание, чтобы не использовать то, что стало неактуальным.

Придерживаться стандартов Web 2.0. Это такая концепция, которая стремиться сделать веб-стандарты наиболее простыми, удобными и понятными. Так, она требует разделять содержимое, представление и поведение (HTML, CSS и JS) друг от друга. Это означает, что использование внутренних таблиц стилей приветствуется все меньше и меньше, встроенные в HTML скрипты и стили не поддерживаются концепцией Web 2.0, которая содержит в себе много других дополнительных моментов. Подробнее можно посмотреть на сайте W3C.

Кроссбраузерность, насколько это возможно. Как мы уже сказали, нужно использовать новые свойства и теги. Беда в том, что не все из них везде поддерживаются. Еще хуже, если они поддерживаются по-разному. Некоторые свойства поддерживает только Google Chrome, другие – Safari, третьи – Mozilla. Постарайтесь не использовать те из них, которые поддерживаются исключительно в одном браузере. Делать это можно, только если нет серьезного ущерба кроссбраузерности. Добавляйте вендорные префиксы или автоматизируйте этот процесс с помощью autoprefixer.

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

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

В верстке сайта от основ до конкретного результата можно дойти уже за месяц. Это вполне реальный срок, если уделять изучению примерно 1-2 часа в день. Под конкретным результатом здесь понимается верстка самостоятельно своего первого макета. На этом останавливаться не нужно. Чтобы стать профессионалом потребуется много лет практики.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Поговорили с Антоном Пановым, верстальщиком компании Say What. Антон занимается вёрсткой полтора года и рассказывает, почему он ушёл из продаж, какие инструменты использует и как новичку выучить HTML и CSS.

— Ты занимаешься вёрсткой полтора года, чем занимался до?

Работой совсем не связанной с программированием. Довелось поработать водителем, продавцом (а в последствии зам. управляющего магазином) в DNS.

— Почему ушёл из продаж в вёрстку?

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

— Что нужно минимально знать, чтобы верстать сайты?

HTML, CSS, JavaScript. HTML — язык разметки, используется для описание структуры проекта (можно представлять себе как «скелет»). CSS — язык стилей, необходим для создания визуальной составляющей. JS — язык программирования. Он делает веб-странички «живыми».

— Как думаешь, сколько нужно учиться до мастера?

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

— Кому не рекомендуешь идти в профессию?

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

— Насколько нужны PHP, jQuery, AJAX для верстальщика? Вообще насколько важно знать программирование?

Я себе уже не представляю верстку без JS. Хотя по началу учатся именно HTML и CSS, но это не программирование в чистом виде. HTML это язык разметки, CSS таблицы стилей. Со временем понимаешь, что некоторые задачи фронтенда просто не решить без программирования на JS. PHP желательно понимать хотя бы на начальном уровне. Ведь простая задача адаптировать под мобильные экраны рабочий, запрограммированный сайт, введет начинающего верстальщика в ступор. Когда понадобится дописать или немного изменить структуру веб страницы.

— Есть ли у тебя какой-то принцип, по которому ты работаешь?

KISS (keep it short and simple), при стилизации и разметке использовать любую методологию, главное чтобы была. Ну и нужно понимать, что после тебя с кодом будут работать другие люди, поэтому нужно делать так, чтобы было понятно не только тебе.

— Вёрстка сайтов — это творчество или рутина?

Считаю, что это творчество. Если для вас это стало рутиной, значит что-то нужно менять.

— Где черпаешь вдохновение?

tympanus.net/codrops — обучающие статьи для фронтенд-разработчиков, идеи и решения для дизайна.

codepen.io — на лету можно смотреть как работает код, аналог jsfiddle.net, только более няшный.

— Какую самую крутую работу видел?

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

— Какие ресурсы порекомендуешь читать?

— Какие книги?

Много рекомендаций дать к сожалению не могу, читал только «Выразительный JavaScript», Э.Фримен, Э.Фримен «Изучаем HTML, XHTML и CSS (Бестселлеры O’Reilly)». В основном изучал все по возникающим вопросам в ходе разработке. Очень важно научиться гуглить 🙂

— Какие инструменты используешь?

Jade — шаблонизатор для упрощение написания HTML.

Sass (SCSS) — для упрощения написания CSS.

Gulp — для автоматизированной сборки проекта.

Git — система контроля версий.

— В каком редакторе пишешь код? Если поддерживает плагины, то какие используешь?

Sublime Text 3, если выбирать IDE то WebStorm.

Список основных плагинов, которые использую в ST3:

Package Control — плагин для установки других плагинов.

Emmet — с ним можно писать HTML в сокращённом виде.

BracketHighligther — выделяет открывающий и закрывающий теги, делает их более заметными.

Color highlighter — подсвечивает номер цвета указанным цветом.

ColorPicker — выбор цвета мышкой из цветового поля.

HTML-CSS-JS Prettify — правильно и быстро расставляет отступы.

Занимаетесь вёрсткой и программированием и хотите рассказать о своих любимых инструментах или плагинах? Пишите на [email protected]

10 ноября 2017 года. Опубликовано в разделах: Азбука терминов. 24567

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

Что нужно знать для верстки сайтов? Как минимум, основы работы с графическими редакторами (Photoshop, Gimp, Krita), язык HTML, CSS, библиотеки Java Script (JS).

Если мы нажмем в браузере правую кнопку мыши и выберем «Просмотреть HTML-код», то увидим следующее:

Это и есть сверстанная веб-страница.

Виды верстки

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

  • Табличная. Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц
    . В настоящее время такая верстка считается устаревшей.
  • Блочная. HTML-документ представлен как совокупность блоков

Верстка сайта: с чего начать

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

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

  • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
  • Выпишите шрифты, которые необходимо будет отразить в CSS.
  • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
  • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
  • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
  • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
  • Закрывайте все теги, проверяйте правильность их вложения.
  • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
  • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
  • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
  • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
  • Изучите страницу на валидность – отсутствие ошибок в коде.

Какая верстка считается качественной

  • Блочная – с применением

Инструменты верстальщика

  • Обработка изображений: Adobe Photoshop, Gimp, Krita.
  • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
  • Работа с JS: Front Page, NetBeans.
  • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

Ссылка на основную публикацию
Что делать если виснет браузер
Автор Юрий Белоусов · 18.03.2019 Пользователи могут столкнуться с неприятной ситуацией, когда браузер Опера зависает, виснет, подвисает, тормозит, лагает, глючит....
Хранение машины в гараже плюсы и минусы
От того, в каких условиях хранится автомобиль, во многом зависит его техническое состояние, а также внешний вид, а при желании...
Хранилище игр на пк
Играй в любимые игры на любом компьютере без лагов и тормозов Играй в крутые игры Как работает Loudplay Мы предоставляем...
Что делать если винда 10 не запускается
В нашей сегодняшней статье будет рассмотрен ряд случаев, связанных с отказом запуска операционной системы Windows 10 на компьютере или ноутбуке....
Adblock detector