Створюємо сайт за допомогою expression design expression web, світ пк, видавництво «відкриті системи»

У наш час багатьом користувачам доводиться розробляти для себе сайти. І хоча одним випадає побудова інформаційних порталів, а другим- невеликих іміджевих візиток, всім їм з самого початку даного процесу необхідно забезпечувати уніфікований дизайн всіх сторінок веб-сайту. Тому буває доцільно робити проекти на основі готових шаблонів.

Надіслати заявку на отримання матеріалів

Але часом настає момент, коли навіть маленька персональна веб-сторінка повинна стати унікальною, і тоді постає питання про те, щоб перевести її оформлення на більш високий рівень. У цьому випадку власник сайту може спробувати самостійно освоїти ази веб-дизайну і розробки

Ми вже звикли до того, що світ ПО стрімко розвивається. Свою нішу займають в ньому і засоби по створенню веб-проектів, причому спектр таких інструментів настільки широкий, що змусить задуматися будь-якого початківця розробника. Наприклад, багатьом з нас знайомі, зокрема, такі продукти, як Adobe Photoshop CS4 або Adobe Fireworks CS4 для створення дизайну, і Adobe Dreamweaver CS4 для веб-розробки.

Якщо ж оцінювати ПО за зручністю використання, легкості освоєння та доступності, то пакет Microsoft Expression Web 3 також увійде в число лідерів. До того ж школярі, студенти та аспіранти можуть безкоштовно отримати його повні ліцензійні версії за програмою DreamSpark www.dreamspark.ru.

Пакет професійних засобів для веб-розробки - Expression Web 3 - включає в себе взаємопов'язані продукти Expression Design, Expression Web і Expression Encoder. Для вирішення завдань створення дизайну і розробки невеликого сайту ми зупинимося на двох продуктах.

Перший з них, Expression Design, - повноцінний, професійний і одночасно легкий в освоєнні інструмент графічного дизайну, що допомагає створювати ілюстрації, графічні елементи і різні ресурси для призначеного для користувача інтерфейсу веб-і настільних додатків. Другий, Expression Web, являє собою додаток для веб-розробки, що дозволяє використовувати HTML, DHTML, CSS і інші стандартні веб-технології для побудови веб-додатків.

Виберіть на панелі інструментів прямокутник і, провівши мишкою від лівого верхнього кута до правого нижнього, утворіть область з такими ж розмірами, як у вашого документа. В панелі Properties виберіть для заливки, наприклад, темно-сірий колір, і фон для вашого сайту буде готовий.

Виберіть із списку пункт Lighten. Потім в знаходиться нижче закладці Effects (Ефекти) натисніть на кнопку fx (Додати ефект), знайдіть і додайте, наприклад, два ефекту з наступними властивостями: Patchwork (Square size = 1, Relief = 0) і Glowing Edges (Edge width = 1 , Edge brightness = 7, Smoothness = 2). Ці три зміни і забезпечать потрібний результат.

Оскільки весь знімок цілком для колажу не потрібен, виберіть відповідний його фрагмент. Для цього створіть прямокутник без заливки, наприклад, розмірами 790 × 270 пікселів (його величину можна задати на панелі Action Bar) за допомогою вже знайомого вам інструменту Rectangle і закруглите його краю (панель Properties • закладка Edit Rectangle • властивість Corner Radius) радіусом 10 пікселів . Помістіть на панелі Layers вийшла форму над обраним знімком і виділіть обидва об'єкти, утримуючи і по черзі клацаючи на кожному з них. В меню Object • Clipping Path (Область відсікання) виберіть команду Make with Top Path. Після застосування даної операції фото «відсічеться» за формою закругленого прямокутника. Одержаний колаж перемістіть в верхню частину документа.

А тепер слід зайнятися логотипом. За допомогою інструменту Text напишіть назву свого сайту, наприклад Shot (Кадр). Потім виберіть шрифт в панелі Properties на закладці Text, зокрема, візьміть NewtonXC розміром 36 pt. Поставте градієнтну заливку для своєї написи зверху вниз: від більш темного до більш світлого кольору, наприклад, від шоколадного # 340900 до теракотових # D24413. Потім надайте своїм текстом невеликий декоративний ефект у верхній частині. Для цього скопіюйте свою напис (+ C) і помістіть її дублікат попереду (+ F). Для останнього об'єкта знову зробіть градієнтну заливку зверху вниз від білого з прозорістю 90% до білого з прозорістю 0%. Перетворіть останню напис в криві (меню Object • Convert Object to Path), а потім в складовою контур (меню Object • Compound Path • Make).

Вибравши на панелі інструментів еліпс (цей пункт може ховатися за прямокутником, для відображення інших базових форм натисніть маленьку стрілочку), намалюйте відповідний об'єкт так, щоб він закривав тільки нижню половину тексту. Виділивши два об'єкти (останній і напівпрозорий текст), на панелі Action Bar виконайте операцію над контурами Path • Back Minus Front. Для отриманої нової форми можна легко змінити напрямок градієнта, якщо вибрати на панелі інструментів Gradient Transform (Трансформація градієнта) і утримуючи ліву кнопку миші, провести поверх об'єкта з градієнтної заливкою. В результаті вийде стилізований напис.

Для логотипу не буде зайвим і невеликий символ. За допомогою обраного на панелі інструментів Pen (Перо) легко створити довільний контур, наприклад у вигляді зірочки. Приберіть заливку і поставте штрихпунктирною окреслення. Далі розкрийте в закладці Appearance додаткові властивості. Для властивості Stroke поставте параметри Joint • Round Join, Caps • Round Cap, відзначте прапорець Dash (Штрихування) і задайте йому значення 2. Тепер логотип готовий. Можна ще за допомогою трансформації нахилити трохи текстовий напис і пов'язаний з нею декоративний ефект. Щоб зробити це, потрібно на панелі Action Bar задати кут нахилу Skew Angle.

Заголовки для блоків

Спочатку зробіть прямокутник розмірами 285 × 30 пікселів з радіусом заокруглення кутів 10 пікселів, Після чого залийте градієнтом зверху вниз: від шоколадного до теракотового. Тепер створіть прямокутник розмірами 279 × 22 пікселя з радіусом заокруглення кутів 8 пікселів і залийте його градієнтом зверху вниз від білого 90% Alpha до білого 0% Alpha із загальною прозорістю заливки, що дорівнює 40%.

Нарешті, виділіть обидва прямокутника, вирівняйте їх центри командою Align • Centers на панелі Action Bar і змістите також меншу з фігур на 2 пікселя вгору. Отже, заголовок створений, причому його легко зробити будь-якої довжини. Щоб було наочніше, можна поверх фону написати текст.

Якщо ви збираєтеся вживати отримані елементи дизайну і надалі при створенні веб-сторінок, необхідно експортувати зображення в формати GIF, JPEG або PNG. Це можна зробити двома способами. При першому слід перейти до елементу або групу елементів (наприклад, логотип), натиснути праву кнопку миші і викликати контекстне меню. Потім необхідно вибрати пункт Create Slice from Selection (Створити зріз на основі вибору), після чого поверх об'єкта з'явиться напівпрозорий прямокутник блакитного кольору, що символізує виділену область.

В панелі Properties активізується закладка Edit Slice (Редагування зрізу). Необхідно задати ім'я зрізу і вибрати формат зображення на експорт, дотримуючись баланс між необхідною якістю і допустимим розміром в кілобайтах. Крім того, можна змінити розміри, відзначити прозорість, вибрати маскує колір і навіть включити або виключити зі складу зрізу окремі елементи.

Редагування параметрів зрізу

Зараз ми обговорили процес створення дизайну елементів сайту в Microsoft Expression Design. У наступній статті ви познайомитеся з ще одним продуктом, Microsoft Expression Web, і дізнаєтеся, як з його допомогою зробити верстку веб-сайту, використовуючи зображення, експорт яких був тут описаний. Якщо ви хочете більше дізнатися про продукти Microsoft Expression і їх можливостях, то відвідайте російськомовний ресурс www.microsoft.com/rus/expression/.

Порада. Якщо доводиться часто використовувати одні і ті ж кольори і градієнти, то має сенс занести їх в бібліотеку зразків Swatch Library в закладці Appearance, і тоді в черговий раз для заливки потрібно буде просто брати зі списку потрібний елемент.