Вам необходимо сделать несколько шаблонов для заказчика. Поскольку изображение, типа Jpg не даст в полной мере “почувствовать” сайт, а разрезанный макет в виде таблиц не лучший выход, поэтому неплохо было бы найти простейший путь показать эти шаблоны в виде готового XHTML и CSS кода. Фактически, давайте представим, что табличные шаблоны вообще никогда не существовали.

пояснение: Эта статья предназначена для людей, которым необходимо создать быстро валидный, соответствующий стандартам шаблон со всеми использующимися графическими элементами. Это не является руководством для создания чистого, хорошо структурированного документа (X)HTML, создание которого до сих пор остается сложной, трудоемкой задачей ручной верстки.

Графические WYSIWYG (визуальные) редакторы, такие как Fireworks, GoLive и ImageReady позволяют сгенерировать код HTML, однако в экспортированном коде присутствуют таблицы и абсолютное позиционирование. Однако эти программы могут делать некоторые полезные вещи (даже больше чем вы можете себе представить), относительно валидности и дальнейшего использования кода. Я покажу простой способ, как создать макет при помощи Photoshop, затем подготовить его в ImageReady и в завершении очистить полученный код.

Предпосылки

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

Сделать в ImageReady CSS-ready

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

Это означает, что можно начать делать все в Photoshop, тени, фильтры и т.д., затем переключиться в ImageReady для порезки шаблона. Убедитесь, что шаблон выровнен по левому краю, не центрируйте его. При помощи ImageReady можно стилизовать навигационное меню (даже если вы сделали его простым текстом) и создать роловеры. (При создании шаблонов, конечно можно и не использовать роловеры от Adobe, их наверняка вы сделаете при помощи CSS либо JavaScript, однако для нашей задачи такие роловеры вполне сгодятся)

Разрезаем

Для порезки шаблона используйте инструментом Slice. По окончании для выбора и переименования воспользуйтесь инструментом Slice Select. Например, у вас есть заголовок, который позже станет тэгом div. ImageReady любит названия, типа “Yourfile_1_01″, однако старайтесь давать логически понятные имена с самого начала, например “header”. Это пригодится в дальнейшем, при редактировании CSS. Аналогично поступаем и с контентом, любыми боковыми колонками, футером и др. называя их соответственно.

Вернемся назад и поработаем над дизайном, постоянно переключаясь между Photoshop и ImageReady, до тех пор, пока не протестим дизайн в браузере. Идем в ImageReady, меню File › Preview In ›, выбираем любимый браузер. Смотрим, чтобы в браузере все выглядело, как задумано в дизайне, меняя соответственно, что не так.
Экспортируемые части будут представлять из себя код с тэгами div, в которые вставлены графические файлы JPG или GIF. Позже можно будет вставить в них или в другие div‘ы фоновые изображения.

Экспорт HTML & CSS

Настройка: выбрать File › Output Settings › HTML и измените по своему усмотрению. Тут же можно выбрать опцию создавать код XHTML. Дальше жмем “Next”, выбираем Saving HTML Files.

Нажать снова “Next”, настройка для Slices. Выбираем “Generate CSS“. В выпадающем списке “Referenced” можно выбрать By ID, Inline или By Class. Выбираем By ID. Можно также поэкспериментировать с именами разрезанных частей в “Defailt Slice Naming”.

Экспортируем наш макет в (X)HTML/CSS с помощью меню File › Save Optimized As, выбираем место, куда сохранить. ImageReady создаст поддиректорию /images в папке, куда вы сохраняете это дело

Пример CSS кода, созданного ImageReady

#header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}

Пример HTML кода, созданного ImageReady

<div id="Table_01">

  <div id="header">

    <img id="header" src="images/header.jpg" »
width=”800″ height=”150″ alt=”" />
  </div>

  <div id=”navigation”>
    <img id=”navigation” src=”images »
/navigation.jpg” width=”200″ height=”450″ »

alt=”" />

  </div>
  <div id=”content”>
    <img id=”content” src=”images/content.jpg” »

 width=”600″ height=”450″ alt=”" />
  </div>
</div>

Что еще?

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

Во-первых, скопируйте полученный код в любой редактор (Dreamweaver, BBEdit и т.д.). Можно “обернуть” все div‘ы еще одним блоком для более четкого позиционирования. ImageReady экпортирует разрезанные части CSS блоками и “заворачивает” их в блок div с названием “Table_01″. Переименуем div “Table_01″ в “container”, например, и зададим ему стиль при помощи CSS, либо вообще попробуем его удалить вместе с его СSS кодом

Дальше, переводим все div‘ы в относительное позиционирование, удалив абсолютное, давая им унаследовать относительное, следя за элементами float и clear. Можно все сделать сразу и одним махом, но лучше менять по очереди каждый блок, проверяя результат.

Для блоков, содержащих изображения, нужно определиться, какие из них включить в CSS как фон. Фон страницы задавайте в CSS отдельно. Если этот шаблон пойдет на создание сайта, вынесите таблицу стилей отдельно. Проверьте весь код на валидность.

Пример конвертированного и “очищенного” CSS

#header {
float: left;
clear: right;
}

Вам придется добавить соответствующие высоты и ширины в блоках, если будете вставлять фоновые изображения в них.

Пример конвертированного и “очищенного” HTML

<div id="header">
  <img src="images/header.jpg" alt="" »
name=”headerimg” width=”800″ height=”150″ »

id=”headerimg” />

</div>

Автоматизация процесса

Если придется что-то менять или пересмотреть в шаблоне, просто меняем графику в Photoshop и ImageReady, потом ре-экспортируем в HTML файл, заменив первоначальный, со всеми новыми графическими изображениями. Только не забудьте сохранить отредактированный или “очищенный” HTML файл для простоты последующего изменения нового.

Источник alistapart.com

Перевод — Дмитрий Папуца

Оригинал статьи

Translated with the permission of A List Apart Magazine and the author[s].