Как правильно верстать сайт


Как быстро верстать сайты

Автор: Анатолий Черкес /

Дата: Опубликовано: 19 мая 2019 /

Просмотров: 2668

Здравствуйте уважаемые друзья!

Если Вы хотите знать как быстро верстать сайты и уже знакомы с HTML и CSS, то эта статья для Вас.

В данном обзоре рассмотрен классический процесс вёрстки без использования препроцессоров и различных библиотек, например, таких как Bootstrap.

Ускорение вёрстки будет происходить за счёт применения правильного алгоритма самой вёрстки.

Насколько же быстро можно ускорить процесс вёрстки? По моим подсчётам строгое соблюдение данного алгоритма позволяет ускорить процесс вёрстки как минимум в 5, а то и в 10 раз.

Давайте сразу перейдём к делу.

Алгоритм быстрой вёрстки имеет 7 основных шагов

  1. Иметь подготовленный шаблон.
  2. Подключить нестандартные шрифты в самом начале вёрстки.
  3. Составить макет архитектуры тегов страницы.
  4. Иметь систему названий селекторов.
  5. Подготовить сразу все изображения.
  6. Вёрстку проводить по специальной схеме.
  7. Настроить скрипты и формы.

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

Подготовленный шаблон для вёрстки

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

  1. файл главной страницы сайта index.html с размеченной структурой HTML-страницы, основными первичными блоками, подключёнными файлами стилей и скриптов;
  2. файл стилей style.css – основной файл стилей со сбросом стилей и стилями для первичных блоков и меню;
  3. файл стилей media.css – файл стилей для адаптации с расставленными media-запросами и стилями адаптивного меню;
  4. файл скриптов script.js с настроенными скриптами различных блоков таких как адаптивное меню, меню аккордеон, всплывание модального окна и др.;
  5. папку images для хранения изображений;
  6. папку fonts для хранения нестандартных шрифтов;
  7. файл form.php – файл обработчик формы отправки заявки;
  8. другие файлы.

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

Минимум 5 часов времени Вы сэкономите при вёрстке каждого сайта, имея такой вот специальный макет для вёрстки.

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

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

Полную версию страницы можно посмотреть здесь.

Учитывая факт того, что дизайн был немного замороченный, и мне параллельно приходилось записывать видео вёрстки, то на вёрстку главной страницы сайта у меня ушло около 7 часов времени. Считаю это хорошим показателем. Думаю, что данный показатель можно было догнать и до 5 часов, если бы не приходилось отвлекаться на составление данного обзора. Если же Вы используете для вёрстки препроцессоры и библиотеку Bootstrap, то вполне вероятно сверстать такой сайт, имея свою заготовку для вёрстки, у Вас получится быстрее.

Подключение нестандартных шрифтов в самом начале вёрстки ускоряет процесс вёрстки

Большинству верстальщиков известна проблема кроссбраузерности нестандартных шрифтов на сайте. Одно дело подключить шрифты через сервис Google Fonts. Но этот способ не всегда приемлем. Второе дело подключить загрузку нестандартных шрифтов автономно с сайта. Вот здесь то и возникают различные траблы: то шрифт вдруг не отображается в каком-либо браузере, то в макете PSD, вы встречаете новый шрифт, который изначально не подключили. Начинаете его искать и снова подключать. А на это всё расходуется дополнительное время. Поэтому настоятельно рекомендую подключить все нестандартные шрифты на сайт в самом начале вёрскти.

Составление макета архитектуры тегов HTML-страницы ускорит Ваш процесс вёрстки минимум в 3 раза

Что такое макет архитектуры тегов страницы?

Макет архитектуры тегов страницы – это графическое отображение тегов на странице согласно дизайна.

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

Полный макет архитектуры тегов можно посмотреть здесь.

При разработке архитектуры тегов страницы необходимо учесть следующие факторы:

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

Составление макета архитектуры тегов страницы занимает около 20 минут времени, но в дальнейшем экономит от 3 до 20 часов времени на вёрстку.

Система названий селекторов

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

Система названий селекторов помогает избежать зависаний при вёрстке.

В моём случае система выглядит следующим образом: внешним тегам я задаю название логически соответствующее блоку (его содержимому), например, если это шапка, то название селектора будет header. Внутреннему блоку я задаю название внешнего блока + слово inside, т.е. внутренний блок у меня будет называться header_inside. Если внутри внутреннего блока идут два блока слева и справа, то каждый из них будет иметь соответственно следующие названия: header_inside_left и header_inside_right. В данной статье я не ставлю целью полностью расписать свою систему названий селекторов. Думаю, что смысл уловили.

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

Подготовка сразу всех изображений экономит время в процессе вёрстки

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

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

Проведение вёрстки по специальной схеме

Все предыдущие этапы вёрстки рассмотренные в данной статье можно назвать подготовительными. Ну а теперь давайте рассмотрим основной этап вёрстки.

Что же из себя представляет специальная схема вёрстки?

Специальная схема вёрстки предусматривает 5 шагов вёрстки:

  1. Провести расстановку тегов согласно макету архитектуры тегов.
  2. Задать селекторы классов для тегов согласно системы названий селекторов.
  3. Задать свойства тегам.
  4. Доверстать внутренние блоки.
  5. Произвести попискельное равнение всех блоков.

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

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

Провести расстановку тегов согласно макету архитектуры тегов

Расстановка тегов подразумевает под собой написание тегов в HTML-странице согласно макету архитектуры тегов, который был создан на 3-м этапе алгоритма быстрой вёрстки.  Делается это очень быстро, т.е. за 5-10 минут мы полностью расставляем все основные теги страницы. Рекомендуется каждому внешнему блоку задавать комментарии. Обязательно соблюдать штабную культуру вёрстки, т.е. делать соответствующие отступы для каждого дочернего тега на один tab относительно родительского тега.

Задать селекторы классов для тегов согласно системы названий селекторов

Далее, для расставленных на предыдущем шаге тегов мы просто задаём соответствующие селекторы классов. Ещё одной хорошей рекомендацией по заданию названий селекторов классов служит задание селекторов с двумя словами через нижнее подчёркивание, а не через дефис. В данном случае в редакторе кода для выделения селектора класса достаточно будет произвести двойной щелчок левой кнопки мыши, что также экономит время. На выполнение данного пункта может уйти 5-10 минут.

Задать свойства тегам

После того как у нас построена HTML-структура тегов и заданы селекторы классов, теперь в файле стилей прописываем свойства данным селекторам классов. Здесь рекомендуется выявить повторяющиеся блоки и задать им свойства в одном месте. Например, у нас заголовки h3 имеют одинаковый размер шрифта, одинаковое обрамление, то мы один раз для тега h3 прописываем соответствующие стили и они автоматически применятся для всех наших тегов h3. Чем больше одинаковых блоков Вы выявите и пропишите им сразу стили, тем больше времени сэкономите при вёрстке.

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

В файле стилей рекомендуется проставлять комментарии.

Доверстать внутренние блоки

На данном этапе просто верстаем те блоки, которые не были свёрстаны ранее. Можно данный этап совместить с предыдущим.

Попискельное равнение всех блоков

Что я понимаю под попиксельным равнением? Это приведение вёрстки в точное соответствие с макетом. Т.е. на данном этапе все элементы выравниваются пиксель в пиксель под дизайн. Для решения данной задачи есть различные плагины позволяющие производить точное сравнение вёрстки и дизайна. Я же пользуюсь программой прозрачности мониторов «See Through».

Настройка скриптов и форм

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

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

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

Общие выводы по алгоритму быстрой вёрстки

Ну что ж друзья! В данной статье я представил свой субъективный опыт для ускорения процесса вёрстки основанный на 10-и летнем стаже. Каждый верстальщик может данный алгоритм заточить под себя.

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

Основным выводом по данной статье стоит считать строгое соблюдение всех этапов алгоритма быстрой вёрстки.

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

Желаю Вам удачи и до новых встреч.

Добавить комментарий

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера