Быстрое творение CSS очерков в Photoshop
Вам необходимо изготовить серию очерков дизайна для вашего покупателя. Вы отыскиваете обычный метод представить данные очерки в чистом 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, которое дозволяет вам избрать 1 из 3-х разновидностей 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. некие блоки, к примеру область содержания, имеют все шансы применять только 1 краска, он обязан существовать установлен чрез 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. однако до этого нежели изготовить это, удостоверьтесь, будто ваш исправленный и чищенный файл, сохранен перед иным именованием, это дозволит восстановлять изображения в отсутствии конфигураций в отредактированном файле.