Вам нужно сделать серию набросков дизайна для вашего клиента. Вы ищите простой способ показать эти наброски в чистом XHTML и CSS, потому что JPG не передает всего чувства дизайна, а нарезка таблицами — зло.

Предупреждение: в этой статье описан способ быстрого создания макета, соответствующего стандартам, с помощью графической программы, которой вы пользуетесь. Эта техника не предназначена для людей, которые хотят получить максимум от XHTML, используя структурированную семантическую разметку. Создание такой разметки, как рекомендует A List Apart и другие ревнители стандартов, остается трудоемкой, ручной работой.

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

Введение

Я должен признаться: Fireworks — главная часть моего дизайнерского арсенала с тех пор как я стал принимать всерьез аксессибилити и соответствие стандартам, и я не думаю, что смогу от него отказаться. Проблема в том, что я могу экспортировать код, только используя таблицы, а хочу относительно позиционируемые элементы div. Только после нелепых часов кодинга, и огромных доз кофеина вы можете превратить такие таблицы в относительно позиционируемые div, и это только потеря времени, в то время как вы могли бы разработать больше набросков или спать. Неужели нарезка таблицами — это все, что можно сделать. Что мне нужно — это способ создавать чистый код с использованием относительно позиционируемых div, не требующий вечности, чтобы привести его в соответствие стандартам W3C. На днях я был очень удивлен откровению от ImageReady.

Сделайте ImageReady CSS-ready

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

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

Нарезка

Используйте инструмент Slice чтобы сделать нарезку. Когда вы закончите нарезку, используйте инструмент Slice Select чтобы выбрать и переименовать каждую секцию. Например, у вас может быть шапка, которая выделяется в отдельный div. ImageReady может назвать его «Yourfile_1_01», но вы сэкономите свое время, если сразу дадите этому элементу логическое название «header». Это поможет вам в будущем, когда вы будете редактировать CSS.

Когда вы закончите разработку дизайна в Photoshop нужно протестировать его в браузере. Для этого, перейдите в ImageReady, в меню нажмите File › Preview In › (ваш любимый браузер). Вы увидите, как смотрятся блоки и правильно ли они размещаются, измените настройки оптимизации если необходимо. Экспортированные срезы сохраняются как JPG или GIF изображения, вставленные в div с помощью тега img, вместо этого вы можете вставить некоторые изображения как фон соответствующего div.

Экспортируем HTML и CSS

Настройки сохранения: File › Output Settings › HTML и измените настройки на соответствующие вашим запросам. Заметьте, что есть опция для создания XHTML кода. Нажмите Next и проверьте ваши установки.

Нажмите Next еще раз, вы попадаете на страницу Slices. Здесь вы можете выбрать опцию Generate CSS, после чего станет доступно выпадающее меню Referenced, которое позволяет вам выбрать один из трех вариантов By ID, Inline, или By Class, сейчас нам нужно By ID.

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

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

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

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

<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 прямо в секции head HTML файла. Может быть абсолютно позиционируемые div, как раз то, что вам нужно, тогда возьмите чашечку кофе и расслабьтесь. Иначе нам придется сделать еще кое-что, чтобы конвертировать их в относительно позиционируемые.

Сначала сделайте копию, сгенерированного ImageReady, HTML файла и откройте его в вашем редакторе кода (т. е. Dreamweaver, BBEdit, или любой другой которым вы пользуетесь). Вы, вероятно, хотите заключить все ваши div в дополнительный контейнер, чтобы более точно контролировать выравнивание вашего наброска. ImageReady экспортирует срезы как div и заключает их в контейнер div, который называется Table_01, переименуйте его по вашему усмотрению (например, container) и настройте его стиль как вам необходимо. Если вам не нужен дополнительный контейнер, просто удалите этот div и связанный с ним класс CSS.

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

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

Пример отредактированного CSS

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

В случае использования в элементе фонового изображения вмето тега img нужно сохранить свойства width и height.

Пример отредактированного HTML

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

Продолжаем работу

Если вам нужно немного изменить набросок, вы можете просто внести изменения в PhotoShop и ImageReady, а потом снова экспортировать HTML файл, заменив им более старый и перезаписав изображения в папке /images. Но прежде чем сделать это, убедитесь, что ваш отредактированный и очищенный файл, сохранен под другим именем, это позволит обновлять изображения без изменений в отредактированном файле.

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