Профессиональная html и css вёрстка

В студиях часто процесс создания сайта разбивается на несколько этапов: дизайн макета будущего проекта, проще говоря, внешний вид, вёрстка, то есть создание html, css страницы, создание шаблона, если мы имеем дело с CMS, программирование и дальнейшее сопровождение и продвижение сайта в поисковых системах. Одним из самых важных моментов является вёрстка сайта. Данный этап разработки профессионального сайта, будь это простой сайт – визитка какой либо фирмы или же крупный корпоративный портал, является одним из самых ответственных.

Любая даже самая простая вёрстка макета начинается с «нарезки» графики, роще говоря, мы сохраняем каждый графический элемент в дизайне, начиная от фона и заканчивая различными иконками и кнопочками отдельно в формате .JPG,  .JPEG, .GIF или .PNG.  Выбор формата зависит от особенности макета и места, в котором она применяется.

После того как мы сохранили всю графику и «запихнули» её в отдельную папку, начинается сам процесс html и css вёрстки макета.
Чаще всего, во всяком случае на начальном этапе, создаётся всего два файла:

Index.html
css/css.css

Таким образом, папочка с вёрсткой выглядит так:

Index.html
css/css.css
img/
js/script.js

В настоящее время самым популярным и можно сказать, что «серьёзным» стандартом вёрстки является, советуемая W3C, вёрстка стандарта  xHTML 1.0 Strict. Несмотря на то, что даже сам W3C предлагает сразу 3 варианта вёрстки, именно Strict требует большинство заказчиков.

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

Проверять правильность html и css вёрстки можно проверять либо валидатором , либо актуальной версией плагина HTML Validator для браузера Firefox .

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

Что бы правильно создавать структуру сайта при вёрстке, особенно  это касается новичков, лучше всего воспользоваться  ещё одним плагином для  Firefox под названием Firebug . Он позволит всегда знать какая именно часть кода отвечает за определённый блок на сайте или же вовремя обнаружить ошибку, например, отсутствие закрывающегося тега «div».

Профессионализм верстальщика – это его опыт!

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

Кроме того, всегда стоит помнить, что сам xhtml, для тех, кто не знает, это более современный привычный всем html 4.1 служит не столько как средство для оформления внешнего вида страницы, а больше как средство для создания структуры. Внешнем же видом «занимается» только CSS, именно поэтому в качественной вёрстке не должно быть никаких стилей, которые позволительны только лишь в исключительных случаях.

Так же стоит помнить, что в обязанности верстальщика входит максимально минимализировать объём кода для каждой отдельной страницы, то есть чем меньше  html и css тегов, а так же JavaScript   (если вы его использовали) кода вы после себя оставите, тем лучше.

Работа в команде

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

Кроме того, часто в задачу «html кодера» входит так называемой вёрстки под определённую CMS, чаще всего это  вёрстка для Wordpress,  Joomla, Drupal и реже для других систем управления контентом. Поэтому верстальщику, который хочет добиться высоких доходов и постоянных заказов, стоит обратить внимание на работу этих систем: встраивание модулей, настройка правильного отображения страницы уже в шаблоне. Между тем, получив достаточный опыт в создании шаблонов и изрядно «налавчившись» верстать для Joomla, например, можно постоянно работать за вполне неплохие деньги и гарантированно получать постоянные заказы на вёрстку.

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

Браузеры и вёрстка

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

1.    Internet Explorer
2.    Firefox
3.    Opera
4.    Safari
5.    Chrome

Менее популярны:

1.    Netscape Navigator
2.    Mozilla
3.    многие другие.

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

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

В любом случае, в настоящее время вёрстка превратилась в настоящее искусство, в котором «побеждает» самый опытный и терпеливый веб-мастер.