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

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

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

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

Верстка — это процесс создания веб-страницы по макету дизайна с помощью кода соответствующего языка разметки (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, используйте редактор только для облегчения работы, но никак не для создания всей страницы.

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

← Предыдущая статья
Блочная верстка сайта
Автор статьи: 
 

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






Ваша оценка:

Свежие статьи

  • 08 апреля 2012г. –  Кодинг

    Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

    Всем привет.

    Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

    Немного отойду от темы и расскажу предысторию.

    Предыстория

    Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?

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

    Читать далее →
  • 11 февраля 2012г. –  Кодинг

    Realtime xRTML — новый html-подобный язык разметки

    Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax.

    Читать далее →
  • 10 марта 2011г. –  Интернет

    Рамблер Нихром. Коротко о главном

    В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google.

    На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще.

    Читать далее →
  • 22 февраля 2011г. –  Кодинг

    Верстка сайта на HTML5 с примерами

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

    Читать далее →
  • 30 января 2011г. –  Кодинг

    Блочная верстка сайта

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

    Читать далее →
  • 30 января 2011г. –  Кодинг

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

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

    Читать далее →

Статьи по тегам