Тестовый дизайн новой версии сайта IGD.BY         RU   |   EN
Быстрая блочная верстка из PSD (с помощью Serif WebPlus)
Автор: Кристофер

В большинстве случаев дизайнеры предоставляют веб-программистам или верстальщикам макеты будущих страниц сайта в виде PSD-файлов. Превращение их в готовые сверстанные страницы с полным соблюдением точности, учетом кроссбраузерности и современных требований, в частности, к которым относится "блочная верстка" (верстка div'ами), зачастую является затяжным процессом. На самом деле все можно достаточно быстро и удобно автоматизировать.

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

Нам понадобятся две программы: Adobe Photoshop (либо же Paint.NET с плагином для чтения PSD-файлов) и Serif WebPlus. Если с графическим редактором все понятно, то описанию Serif WebPlus стоит уделить несколько предложений. WebPlus — это визуальный html-конструктор. Суть его работы состоит в том, что веб-страницу вы составляете из визуальных блочных компонент, будь то текстовые элементы, таблицы, изображения, кнопки, фреймы, меню, формы, видео и так далее. 

Интерфейс программы очень сильно напоминает фотошоп, то есть панель инструментов находится слева, рабочая область по центру, справа закладки управления цветом и так далее, сверху главное меню. Если присмотреться поближе, WebPlus — это развитый самостоятельный продукт, у которого, кстати, есть немало поклонников. Для того, чтобы сделать простой и красочный сайт на статических страницах, не вникая в верстку, этот вариант подходит практически для всех пользователей со стартовым уровнем подготовки и базовыми навыками (html ниже среднего). Плюс ко всему у программы хорошая поддержка и большое количество современных шаблонов сайтов. 

В рамках этой статьи мы рассмотрим WebPlus только с точки зрения быстрой реализации блочной верстки. Представим стандартную ситуацию, а именно, дизайнер прислал шаблон страницы в формате psd. 

Наши действия:

1. Открываем шаблон psd в графическом редакторе (фотошопе) и аккуратно вырезаем все изображения, сохранив их в отдельные файлы. 

2. Экспортируем саму страницу (psd-файл) в отдельный графический файл (jpeg или png). При этом нужно экспортировать только рабочее разрешение страницы по ширине (обычно в psd-шаблонах дизайнеры делают отступы по бокам, они нам не нужны). Запоминаем ширину и высоту нашего файла. Фотошоп не закрываем.

3. Открываем Serif WebPlus, создаем новый документ.

4. В рабочей области над изображением страницы открываем правой кнопкой мыши контекстное меню и в нем выбираем пункт Page Properties. В открывшемся окне нас интересует два пункта. В закладке Appearance вводим ширину и высоту общего файла, который мы до этого сохраняли в фотошопе.


5. В закладке Background это же окна мы в качестве фонового изображения загружаем этот же самый файл. В результате получается, что мы будем работать с калькой.


6. Начинаем вставлять наши нарезанные изображения, воспользовавшись соотвествующим пунктом меню либо нажимая Ctrl+G, позиционируя их строго по шаблону. Увеличение и уменьшение масштаба просмотра производится как и в фотошопе (Ctrl++/Ctrl--).


7. То же самое делаем с текстовыми элементами. А фотошоп мы не закрывали потому, что из него можно быстро узнать всю информацию о шрифтах. Кстати, тут сразу стоит сказать об одном ключевом моменте, потому как у WebPlus есть два раных визуальных компонента для помещения текста: Text Frame и Artistic Text. Нужно выбирать первый. Artistic Text при экспорте преобразуется в изображение (поэтому его можно поворачивать и накладывать множество эффектов).

8. После того как расстановка всех элементов завершена, заходим опять в свойства страницы и отключаем background (см. п. 5)

Обычно на такую расстановку тратится очень мало времени. Теперь нам осталось произвести настройки экспорта. Для начала входим в Site Properties (главное меню Properties -> Site Properties) и делаем активным указатель "Use riginal names of pictures files" в закладке Advanced -> Images.

Если эта опция не будет включена, то все изображения будут сохраняться под зашифрованными именами. Также в настройках Advanced -> HTML Format делаем активным пункт Write ID for each object. 

Затем нажимаем заветную F5 (File-> Publish Site -> Publish to Disk), и указываем путь сохранения сверстанной html-страницы и сопутствующих папок. 

Открываем полученный html-файл в текстовом редакторе и видим примерно такое:

  <body style="height:1000px;background:#ffffff;">
    <div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:960px;height:1000px;">
      <img alt="" src="wpimages/wpc15d13ce_06.png" id="pic_1" style="position:absolute;left:232px;top:211px;width:200px;height:53px;">
      <div id="txt_1" style="position:absolute;left:232px;top:325px;width:303px;height:129px;overflow:hidden;">
        <p class="Body">Здесь должен быть текст</p>
        <p class="Body">Здесь должен быть другой текст</p>
      </div>
    </div>
  </body>

Как можем убедиться, данный вариант значительно ускоряет процесс блочной верстки, но не заменяет. Естественно, сформированный код нужно будет править, а именно, расположить основной div со страницей по центру (margin:0 auto;), то же самое применить и к body, вынести все стили в css, сделать необходимые элементы интерактивными и т.п. 

Стоит сказать, что, по сравнению с некоторыми конкурирующими программами, WebPlus выдает в итоге довольно чистый, внятный и валидный код. При этом вы делаете верстку "пиксель в пиксель". И тратите на все не так много времени. 

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