Верстка

Инструментарий верстальщика

Теоретически верстка сайта возможна даже без компьютера: берутся ручка, бумага, и пишется HTML код. Некоторые утверждают, что лишь умение верстать в блокноте (NotePad и т.п.) и отказ от специальных редакторов отличают классного верстальщика. Внесем поправку: создание сайта и верстка «дедовскими» способами хороши для тех, кто только учится этому. Так быстрее и лучше запоминается язык разметки, вырабатывается автоматизм, развивается внимание. Но когда дело доходит уже до реальной верстки веб сайтов, есть риск остаться невостребованным, пользуясь одним блокнотом. У каждого верстальщика должен быть свой набор инструментов, который помогает ему делать работу и быстрее, и качественнее. Вот основные из них:

1. Adobe Dreamweaver

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

2. Adobe Photoshop

С его помощью осуществляется нарезка макета страницы, после чего (или одновременно) начинается верстка на div. Смысл работы с Photoshop в том, чтобы максимально уменьшить размер страницы за счет «обрезки» лишней графики. При этом верстальщик никак не изменяет картинку, его обязанность — верстка дизайна сайта.

3. Web Developer Toolbar

Это специальное дополнение к FireFox, позволяющее верстальщику просматривать любую нужную ему информацию о странице: сам код, валидность HTML и CSS, описание ошибок, как отображается сайт, если отключены стили, одинаково ли будет отображаться резиновая верстка дивами при разном разрешении браузера. Отдельно подсвечиваются таблицы, блоки, заголовки, подсчитываются размеры и отступы и т.д. Этот инструмент используется для тестирования страницы в обозревателе, и если он установлен, любой пользователь может посмотреть пример верстки сайта.

4. FireBug

Еще один чрезвывайно полезный плагин для FireFox. Подобно верстке сайта Dreamweaver, FireBug дает возможность «экспериментировать» со страницей, но уже в браузере: просматривать ее структуру, редактировать код и тут же смотреть, как это повлияет на качество ее внешний вид. Этот плагин используется, когда блочная верстка веб-сайта практически завершена, чтобы удостовериться, что не осталось ошибок.

5. FireBug Light

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

6. IETester и Multiple IE

Верстальщик должен иметь на своем компьютере все основные обозреватели, чтобы проверять кроссбраузерность. Но хитрый Internet Explorer не позволяет устанавливать несколько своих версий на одном компьютере. Указанные программы предназначены как раз для того, чтобы одновременно пользоваться IE 6 и 7. Первая программа открывает их в виде вкладок одного приложения, вторая требует установки каждой версии отдельно.

7. HTML Validator

Это плагин, с помощью которого сверстанный сайт проверяется на валидность. По результатам проверки в строке состояния появляются соответствующие значки (зеленый, красный). Можно посмотреть, какие конкретно ошибки допущены. Возможна проверка по трем алгоритмам (HTML Tidy, SGML Parser, Serial).

8. Color Zilla

Фактически, этот плагин — инструмент «Пипетка» для FireFox. С его помощью можно скопировать из браузера в буфер обмена любой цвет.

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

Если вы хотите лучше разбираться в деталях верстки, вам будут полезны следующие статьи: