Siteua.info - створи собі сайт безкоштовно!

:: Меню ::

Головна

1. Як створюють веб-сторінки
1.1 Як створюють веб-сторінки
1.2. Як розмістити веб-сервер-сторіночку на сервері
1.3. Як написати веб-сторінку
1.4. Огляд програм для проглядання веб-сторінок
1.5. Огляд програм для створення веб-сторінок
1.6.(Частина-I) Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion
1.6.(Частина-II)Автоматизація введення

2. Основні засоби мови htmL
2.1. Просте форматування тексту
2.2. Найголовніше на будь-якій веб-сторінці - гіперпосилання
2.3. Як створити списки на веб-сторінці
2.4. Створення таблиць
3. Графіка на веб-сторінці
3.1.(Частина-I) Основні способи застосування графіки
3.1.(Частина-II)Зображення-карта
3.2. Графічні формати Інтернету
3.3. Графічні елементи оформлення веб-сторінок
3.4. Графічні маркери
3.5. Підготовка малюнків в програмі Xara Webstyle
3.6.(Частина-I)Підготовка малюнків в програмі Adobe Photoshop
3.6.(Частина-II)Прикраса зображення дрібними деталями
4. Оформлення веб-сторінки з використанням стилів
4.1. Оформлення за допомогою атрибуту STYLE
4.2. Визначення стилів в спеціальній таблиці
4.3. Огляд інших можливостей стильових таблиць
5. Використання звуку на веб-сторінці
5.1. Додавання звукового оформлення
5.2. Програми для стиснення звукових фрагментів
5.3. Маленькі хитрощі
6. Динамічні веб-сторінки на основі JavaScript
6.1. Прості приклади
6.2. Як писати власні функції
6.3. Динамічна зміна зовнішнього вигляду сторінки
6.4. Інші можливості мови JavaScript
7. Веб-сторінки, що реагують на дії користувача
7.1. Введення даних користувачем у форми htmL
7.2.(Частина-I)Сторінка, керована за допомогою миші
7.2.(Частина-II)Динамічне управління позиціонуванням елементів
7.3. Сторінка, керована з клавіатури
7.4.(Частина-I)Динамічне відображення тексту веб-сторінки
7.4.(Частина-II)Використання інших властивостей при роботі з текстом
7.5. Динамічна зміна графічних елементів веб-сторінки
8. Розміщення елементів на веб-сторінці і навігація по сайту
8.1. Використання структури фреймів
8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць
9. Додаткові можливості формування веб-сторінок
9.1. Приклад використання елементу управління Tabular Data
9.2. Приклад простого серверного сценарію
Цікаві сайти!
+

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Контакти
Додати у вибране

:: Друзі:

Biz-nes.info самовчитель по веденню бізнесу в інеті
Каталог
Цікаві статті інтернету

:: Статистика ::

каталог сайтів

 

 

 

 

 

3.5. Підготовка малюнків в програмі Xara Webstyle

Дрібні графічні елементи оформлення, які ми розглядали в розділі 3.3, зручно готувати в програмі, яка називається Xara WebStyle. Ця програма узкоспециалізірована - вона призначена тільки . для створення дрібних графічних елементів оформлення, і ні для чого іншого. Така вузька спеціалізація - одночасно і гідність, і

недолік. Гідність - тому що навіть непідготовлений користувач може швидко зробити в ній все, що потрібне. Недолік - тому що, якщо у вас багата фантазія, незабаром ви вичерпаєте її можливості і вам стане “тісне” в її рамках. Проте пам'ятаєте, що ви все одно зможете скористатися цією програмою для отримання проміжного результату, який згодом можна “довести до пуття” в повноцінному графічному редакторові.

Можна вибрати тип графічного елементу який слід створити. Таких типів тут шість:

• звичайні заголовки (Headings);

• тривимірні заголовки (3D Headings);

• фонові малюнки (Backgrounds);

• кнопки (Buttons);

• графічні маркери (Bullets);

• горизонтальні смуги-роздільники (Dividers).

Вибір шаблону

Клацнувши кнопкою миші на якому-небудь з цих типів, ми потрапляємо у вікно вибору шаблону, на основі якого створюватиметься графічний елемент. Наприклад, клацнемо на типі Headings - відкриється вікно. При цьому у верхній частині екрану з'являється область, в якій наочно видно результат наших маніпуляцій. Наприклад, коли ми виберемо який-небудь шаблон, його зображення тут же з'явиться в області перегляду.

Настройка параметрів малюнка

Вибравши шаблон, приступимо власне до створення нашого елементу. Для цього можна скористатися кнопками, розташованими в лівій частині екрану: Text (Текст), Color (Колір), Texture (Текстура), Shadow (Тінь) і Size (Розмір).

Щоб ввести текст заголовка, натисніть кнопку Text. Далі можна набрати будь-яке словосполучення, а також вибрати шрифт, яким воно буде накреслено. Шрифт вибирається будь-якій з числа встановлених в операційній системі. Всі зміни, що відбуваються, негайно ж відображаються в області перегляду. Зручно, що назва кожного шрифту відображається самим цим шрифтом (окрім тих випадків, коли шрифт не алфавітний, наприклад Maestro або Wingdings).

Натиснення на кнопку Color (Колір) відкриває можливість вибору кольору майбутнього заголовка. Залежно від вибраного шаблону цих квітів може бути декілька. Наприклад, шаблон заголовка Embossed (Тиснення) дозволяє вибрати три кольори: колір світлих країв, колір темних країв і колір тіні. Крім того, зазвичай є ще можливість вибрати колір фону (Background color), яка не впливає, власне, на наш елемент, проте може допомогти в його настройці, якщо заздалегідь відомо, на якому фоні він буде розташований.

Для вибору кольору пропонується цікава палітра, складена з 216 (36х6) квітів і шести градацій сірого кольору. Один з пропонованих кольорів вибирається клацанням миші. Якщо ж цих квітів недостатньо, можна натиснути кнопку Advanced (Додатково) і перейти до вибору кольору з повної TrueColor-палітри або навіть ввести код кольору в цифровому вигляді, вказавши насиченість червоною, зеленою і синій складовій у відсотках або абсолютних значеннях (десяткових або шестнадцатерічних), а також ввести параметри кольору в режимі HSV.

Кнопка Texture дозволяє вибрати покриття текстури для графічного елементу. Можливість накладення текстур також залежить від шаблону. Як і у попередньому випадку, надається можливість вибору фонової текстури для перегляду.

Наступна кнопка, Shadow, дозволяє відрегулювати тіні, що відкидаються графічним елементом. Спершу пропонуються вісім варіантів відкиданої тіні. Якщо вони не влаштовують, натисніть на кнопку Advanced (Додатково) - відкриється вікно, засобами якого тіні можна набудувати акуратніше. У лівій частині цього вікна задають тип тіні (Wail - тінь, падаюча на стіну, або Floor - тінь, падаюча вниз “ на підлогу ”; є ще варіант None - без тіні). У наступному розділі (projection) можна задати кут відкидання тіні і її розмір по вертикалі (у відсотках). І, нарешті, в правій частині вікна задають насиченість тіні (darkness) і ступінь розмиття її країв (blur).

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

Вибір способу збереження

Коли графічний елемент створений, його потрібно зберегти в оптимальному вигляді - щоб якість було трохи краще, а розмір трохи менше. Для цього в програмі Xara WebStyle є дуже наочна утиліта. Якщо натиснути на кнопку Save (Зберегти), відкривається діалогове вікно, в якому можна вибрати тип файлу, - GIF або JPEG і розмір файлу (Fast Download - для швидкого завантаження, низька якість; Medium Quality - середня якість і середній розмір, і High Quality - висока якість, але і розмір більше). А якщо натиснути на кнопку Advanced (Додатково), можна тонко набудувати всі параметри збереження файлу. Для формату JPEG це стандартна шкала якості (від 0 до 100), а для формату GIF можна вибрати кількість квітів (16 або 256), палітру, режим передачі півтонів, режим чересстрочной розгортки і режим прозорого малюнка. У останньому випадку за допомогою движка Trim transparency можна вибрати кількість квітів, які будуть перетворені в колір, призначений прозорим. Найчудовіше, що під час всіх цих маніпуляцій їх результат можна безпосередньо спостерігати в області перегляду, і контролювати при цьому розмір файлу, що виходить (указується в нижній частині панелі попереднього перегляду). Крім того, можна натиснути на кнопку Browser Preview (Перегляд в броузере) і проглянути результат роботи так, як він виглядатиме в броузере. При цьому видаються також додаткові відомості, наприклад час завантаження даного файлу при різній продуктивності модемного з'єднання з Інтернетом.

Звернете увагу на те, що в лівому нижньому кутку робочої області практично завжди розташована кнопка Revert (Повернення), що дозволяє зробити декілька “відкотів” назад, якщо здійснена трудноїсправімая помилка. А в правому нижньому кутку часто розташовується кнопка Theme (Тема), при натисненні якої пропонуються декілька заздалегідь підібраних варіантів кольору, шрифту і т.п.

Ми розглянули роботу в програмі Xara WebStyle на прикладі вибору заголовка, але і робота з іншими типами графіки практично нічим не відрізняється від розглянутого прикладу. Різниця помітна лише в можливостях вибору: наприклад, при створенні графічного маркера не можна вводити текст і т.п.

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

 

Всё про путешествия | Все о здоровье


:: Наша кнопка ::

Отримати код:


:: Реклама ::

+setl

:: Ссилки ::

+


:: Баннери ::

 

 

 


Copyright © Siteua.info, 2008