Что такое верстка шаблона для сайта

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

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

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

Верстка шаблона – это процесс формирования веб-страницы по готовому макету. Процесс верстки заключает в себе создание кода страницы при помощи понятного браузерам языка разметки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS).

Кто выполняет верстку шаблона

Верстку шаблона или кодирование страниц выполняет специальный человек – верстальщик.

Верстка и дизайн ширины страницы

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

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

Дизайн сайта может быть с фиксированной шириной или с изменяемой шириной. Верстка с изменяемой шириной часто называется «резиновой» версткой.

Верстка с фиксированной шириной выбирается исходя из средней ширины обычных настольных систем. Для мониторов это часто разрешение 1024х768 пикселей. Поэтому для корректного отображения на экранах, без появления дополнительных полос прокрутки, нужно выбирать ширину рабочей площади сайта в пределах 800-990 пикселей.

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

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

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

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

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

Кроссбраузерная верстка. Что такое верстка сайтов с учетом кроссбраузерности

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

Сегодня существует множество популярных браузеров, используемых для работы в сети Интернет. К ним относятся: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Netscape Navigator, Safari и другие.

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

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

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

Верстка сайтов с чистым кодом

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

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

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

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

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

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

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

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

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

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

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

Блочная верстка использует блоки, и представляется более удобной и правильной, с точки зрения убеждений о разделении содержания и оформления.  Блочная верстка позволяет верстать сайт при помощи слоев (блоков).

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

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

Заключение

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

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