Помогни ни да направим Uroci.net по - богат! Добави урок

Експортиране на Layout като CSS и картинки във Fireworks

SolidSoul   трудност:    видян: 10593

Това е част от урока, в който направихме показания Layout и го експортирахме, като PDF с помощта на Fireworks CS4.

 

Layout

 

Изисквания: Adobe Fireworks CS4

 

Стъпка 1: Дизайн на основния Layout

 

Стъпка 2: Създаване на уеб страници със Fireworks CS4

 

Стъпка 3: Създаване на slices,свързване на страниците и изнасяне на layout като PDF файл със връзките използвани във Fireworks CS4

 

Стъпка 4: Експортиране на Layout като CSS и картинки.

 

Можете да експортирате всяка една страница, като CSS страница с нейните изрезки или да копирате първата страница, с която ще направите всички останали в Dreamweaver (ако всички останали страници изглеждат, като Layout-а). Този експорт е много удобен защото можете да редактирате текста, когато отворите файла (за разлика от по старите версии, които експортираха само в картинки).

 

За да експортирате файла, като CSS и картинки трябва да направите изрезки на всички картинки и да оставите празна част там, където има текст за редактиране. Fireworks ще направи дифове според изрезките,правоъгълниците и текста. Долу може да видите как съм направил изрезките със Slice. Направил съм изрезки на графиката от ляво, навигационното меню горе, името на сайта и картинката за фон. Текста е без slice. Запомнете картинките трябва да са оптимизирани, като JPEG-Better Quality в Optimize панела.

 

Изрезки със Slice

 

Напишете име на всяка изрезка изберете страницата и отидете във File/Export за да експортирате избраната страница. Изберете CSS and Images (.htm) от падащото меню, където пише Export. Изберете Put Images in subfolder така картинките ви ще се запазят в отделна подпапка.

 

Експортиране

 

Отворете файла в Dreamweaver и ще видите че Fireworks е направил CSS стил, HTML страница и папка с картинките, а тескта може да се редактира. Сега ако е нужно можете да оптимизирате (optimaze) файла и да го копирате за да направите другите страници в Dreamweaver и да ги свържете помежду си.
Кликнете тук за да видите CSS сайта.

 

Източник: www.entheosweb.com



Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини