1. Перша умова - у вас вже є готовий макет для нарізки, скажімо такий -
2. Тепер беремо Slice tool -, саме за допомогою нього ми і будемо нарізати наш макет
3. Тепер давайте зробимо перший "надріз" - просто натисніть на ліву кнопку миші і ведіть мишкою до тих пір, поки у ви не бачили їм потрібну область. Я почав з шапки, головне не обводьте меню, його ми поріжемо трохи пізніше.
4. Тепер нарізаємо меню. Перший слайс закінчуємо трохи не доходячи кнопки "Home". Потім нарізаємо всі кнопки як показано на малюнку. Потім клацніть правою кнопкою миші по слайсами "Home", виберіть Edit Slice Options (Редагувати властивості) і заповніть це віконце як у мене.
5. Тепер нарізаємо контент-частина нашого макета. Спочатку виділіть частину вгорі центрального блоку -
Потім виділіть ще три частини, як показано на малюнку -
Тепер виділяємо центральний блок -
Ще виділимо нижню частину центрально блоку, залишивши при цьому невеликий зазор в самому низу макета
І, нарешті, виділимо і цей зазор -
6. Зберігаємо нарізаний макет для подальшого html-кодинга
File> Save for Web (Файл> Зберегти для Веб), в цьому вікні ми можемо вказати кінцевий формат графіки і ступінь стиснуті.
Далі тиснемо Save (Зберегти), в цьому діалоговому вікні вказуємо назву файлу (index.html), тип файлу - HTML and images і в рядку Slices (слайсами) виставляємо All Slices (Всі слайси). Тиснемо ОК!
Тепер ми переходимо до роботи з кодом. Знання HTML в даному випадку безумовно необхідно!
7. Перші рядки нашого коду такі -
Міняємо їх на такий код. (Якщо ви зробили фон макета іншим кольором, то, відповідно змініть атрибут bgcolor
8. Тепер трохи нижче знайдіть такі рядки коду -
І змініть їх на
9. Далі знайдіть і видаліть
Усе! Ми отримали готовий код для нашої сторінки, тепер він виглядає так -
Власне це все - простий, але дуже ефективний спосіб, щоб зберегти час і перетворити макет в готову до роботи html-сторінку. Звичайно, є ще такий дуже важливе питання як оптимізація графіки, але ця тема буде розглянута в іншому уроці
ЗИ. Движок форуму неадекватно Спарс html-код.
Само собою, подвійні лапки не повинні бути екрановані, тобто перед ними не повинен стояти слеш - \
правильно - alt = "" і т.д.
неправильно - alt = "" і т.д.