Ручная верстка: преимущества и недостатки

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

Начну, пожалуй, с некоторых понятий и определений.

Верстка — это процесс создания веб-страницы по макету дизайна с помощью кода соответствующего языка разметки (HTML, XML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).

Ручная верстка (handmade) — это верстка, код которой набран вручную, либо в «Блокноте», либо в любом другом не визуальном редакторе.

Визуальный редактор (WYSIWYG) — редактор с полным набором инструментов для редактирования текстов, вставки графики и других объектов, а также для создания различных документов, в том числе веб-страниц.

К визуальным редакторам относятся:

• Adobe Dreamweaver;
• Microsoft Word;
• Microsoft FrontPage;
• TinyMCE — созданный на основе JavaScript;
• и многие другие.

Стоит отметить, что TinyMCE используется в различных CMS как редактор контента сайта — позволяет вставлять рисунки, видео-объекты, таблицы, редактировать текст и стили оформления. Он не является редактором для построения полноценных html-страниц в отличие от Adobe Dreamweaver и Microsoft FrontPage.

Кстати сказать, Adobe Dreamweaver имеет три режима: просмотр, html-редактор и визуальное форматирование. Упоминая Dreamweaver, речь идет именно о визуальном форматирование. Прошу не путать.

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

Основной «минус» в использовании визуальных редакторов при верстке страниц — это, как правило, захламленный код, теговый мусор, неумение разделять HTML и XHTML разметку, а так же отсутствие семантики.

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

Преимущества и недостатки ручной верстки сайта

С визуальными редакторами разобрались и понимаем, что без знаний HTML заниматься версткой не стоит. Давайте рассмотрим преимущества и недостатки ручной верстки.

Преимущества ручной верстки

1. Четкое представление об исходном коде страницы — понимание того, что делаешь и как;
2. Отсутствие тегового мусора в коде страницы — правильный, более легкий и не нагроможденный код;
3. Наличие нужных элементов в коде страницы, например, !DOCTYPE и meta теги;
4. Выбор конструкций верстки — блочная и/или табличная модель, и техники;
5. Быстрое усвоение языка разметки, т.к. постоянно набираешь повторяющиеся элементы разметки и стилей.

Недостатки ручной верстки

1. Человеческий фактор — возможны опечатки и ошибки при наборе тегов разметки и их атрибутов, в том числе в каскадных таблицах стилей (CSS);
2. Отсутствие визуального просмотра страницы — при наборе тегов разметки не знаешь как выглядит страница, пока не откроешь ее в браузере;
3. Занимает больше времени, потому что приходится набирать часто повторяющиеся комбинации;
4. Необходимо по-памяти знать все используемые элементы разметки и элементы стилей;
5. Множество дополнительных действий при элементарных изменениях в разметке.

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

Как верстают профессионалы

Профессионалы верстают быстро и качественно с четким пониманием того, что они делают. Почему так? Потому что хороший верстальщик, как и программист, умеет логически думать и создавать необходимые конструкции в разметке при решении той или иной задачи, отлично знает HTML и CSS, часто JavaScript и другие технологии.

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

Вспомогательные редакторы

• HomeSite;
• Notepad++;
• TopStyle;
• TextMate;
• и многие другие.

Framework

Framework — относительно HTML, это подготовленная структура html-разметки и css-оформления, облегчающая процесс создания веб-страниц. Другими словами, это «база» для разработки html-сайта.

Использовать фреймворк или нет, дело каждого верстальщика, основанное на желании и создании собственного фреймворка. Собственного потому, что чужие могут не принести вам должного результата и качества. Один из таких фреймворков можете посмотреть здесь.

Заключение

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

Спасибо за внимание.