Професійні веб-дизайнери розробляють шаблони сайтів, як правило, в потужних графічних редакторах, таких як Adobe Photoshop. Результатом роботи є файл із зображенням, який у такому вигляді і надається замовнику. Для того, щоб використовувати готовий дизайн, тобто зверстати веб-сторінку, потрібно розрізати шаблон.
Вам знадобиться
- - редактор растрової графіки Adobe Photoshop.
Інструкція
1. Відкрийте файл шаблону у графічному редакторі Adobe Photoshop. Виберіть пункт File і Open або натисніть комбінацію клавіш Ctrl + O. У діалоговому вікні, що з 'явиться після цього, перейдіть до директорії з файлом, виділіть його у списку та натисніть кнопку "Відкрити".
2. Виберіть зручний масштаб перегляду зображення шаблону. Скористайтеся інструментом Zoom Tool або контекстним меню. Ви можете вибрати масштаб, що дозволяє розташовувати курсор з точністю до пікселя. Це необхідно для точної установки опорних ліній.
3. Сформуйте набір опорних ліній над зображенням шаблону. Увімкніть відображення лінійок у вікнах документа, якщо його ще не увімкнено. Для цього натисніть Ctrl + R або виберіть пункт View і Rulers.
4. Щоб додати горизонтальну опорну лінію, наведіть вказівник миші на верхню лінійку. Натисніть і утримуйте ліву клавішу. Рухайте курсор вниз у область зображення. Так само, використовуючи праву лінійку, можна додати горизонтальні лінії.
5. Додайте необхідну кількість опорних ліній та розташуйте їх по межах розділення областей шаблону. Лінії повинні проходити через всі місця, за якими необхідно розрізати шаблон. Вони повинні обмежувати всі зображення та логічні області (логотип, шапка сайту, горизонтальні та вертикальні меню, тощо), які будуть представлені на web-сторінці.
6. Активуйте інструмент Slice Tool. Його кнопка знаходиться на вертикальній інструментальній панелі.
7. Створіть необхідну кількість областей розрізання за допомогою інструмента Slice Tool. Виберіть зручний масштаб відображення шаблону. Мишкою задавайте межі областей. Напрямні лінії, додані на третьому кроці, забезпечать точне розташування меж створюваних об 'єктів. За потреби налаштуйте існуючі області за допомогою інструмента Slice Select Tool.
8. Змініть властивості областей розрізання, якщо це потрібно. Активуйте інструмент Slice Select Tool. Клацніть правою кнопкою миші на потрібній області. У контекстному меню виберіть Edit Slice Options. У діалоговому вікні Slice Options виберіть тип області (зображення, порожня область, таблиця), режим заповнення тла, вкажіть, якщо це потрібно, ім 'я, цільовий URL, вміст атрибута alt та інші значення. Натисніть кнопку Гаразд.
9. Розріжте шаблон. Виберіть пункт File і Save for Web & Devices, або натисніть клавіші Shift + Ctrl + Alt + S. У діалоговому вікні Save for Web & Devices вкажіть формат і параметри стиснення зображень, на які буде розрізано шаблон. Натисніть кнопку Save. Відкриває діалогове вікно Save Optimized As.
10. У спадному списку "Тип файлу" виберіть HTML and Images (* .html), у полі "Ім 'я файлу" введіть назву файлу, в який буде розміщено HTML-розмітку шаблону. У списку Slices виберіть All Slices. Вкажіть директорію для вихідних даних та натисніть кнопку "Зберегти".
11. У цільовий каталог буде розміщено файл HTML, який є фактично готовим шаблоном веб-сторінки. У підкаталозі images буде знаходитися набір зображень, на які був розрізаний вихідний шаблон.