Опис комплекту технічних засобів

 

Графічні редактори Створення й оптимізація графіки - складна і примхлива задача. Безумовно, можливе створення Web-сторінки і без використання графіки - за допомогою шрифтів, скриптів і таблиць стилів (CSS) - і це буде красиво і стильно. Але остаточний вид документа залежить від великого числа різних факторів, таких як: ширина вікна браузера, попередні настроювання браузера, прийняті за замовчуванням розмір шрифту, його ім'я і колір. До того ж не всі скрипти і стилі підтримуються всіма браузерами. Якщо ж буде використана графіка, то відвідувач вашої сторінки побачить її точно такою. Основна складність роботи з Web-графікою полягає в тому, що пропускна здатність каналів Інтернету, у більшості випадків, дуже низька і відразу постануть проблеми - як зробити графічний файл невеликий по обсягу, але гарної якості, які програми і прийоми використовувати для його оптимізації.

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

Растрові зображення забезпечують високу точність передачі градацій кольорів і півтонів, а також високу деталізацію зображення, тому вони є оптимальним засобом представлення тонових зображень, таких як скановані фотографії. Для зображення растрової графіки завжди використовується фіксована кількість пикселов, тобто якість растрового зображення прямо залежить від здатності устаткування, що дозволяє. Це значить, що будь-яка зміна зображення (поворот, збільшення і т.д.) приводить до незмінного перекручування картинки і границі об'єктів виходять нерівними.

Векторні зображення формуються на основі математично описаних фігур, називаних векторами, а вид зображення визначається параметрами векторів. Іншими словами, векторна графіка складається з кривих, що мають координати, колір та інші параметри, а також замкнутих областей, заповнених визначеним кольором. Границі цих областей також описуються кривими. Файл із векторною картинкою містить координати і параметри кривих.

Результати обробки векторних зображень не залежать від здатності устаткування, що дозволяє, тому ви можете довільно змінювати їхні параметри (розмір, колір, форму і т.д.) - якість не погіршиться. Векторна графіка застосовується при створенні цифрових об'єктів з використанням дрібних кеглів (розмірів шрифту) чи таких об'єктів, як логотипи, для яких важливо зберігати чіткі контури, при необмеженому масштабуванні.

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

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

Пакет пропонує, наприклад, засоби для відновлення ушкоджених зображень, ретушування чи фотографій створення самих фантастичних колажів, що тільки може дозволити собі наша уява. Загалом, потенціал цього пакета величезний. Починаючи з версії 5.5 у пакет включена програма Adobe ІmageReady, що надає величезні можливості при обробці графіки під WEB (оптимізація зображень, створення анімованих gіf, "розрізування" картинок на більш дрібні і т.д.). Девіз розроблювачів Photoshop CS5 - "Camera of your mіnd" - припускає не тільки технічну досконалість, але і повну волю творчості, на яку людина, що працює з цією програмою.

PhotoPaіnt - ще один не менш відомий графічний редактор (з пакета Corel Draw) для обробки растрової графіки, що конкурує з Photoshop CS5. Тут також є всі необхідні інструменти для обробки графіки, різноманітні фільтри, текстури. Різниця лише в зручності роботи, інтерфейсі і швидкості накладення фільтрів - накладення відбувається небагато повільніше.

Paіnter - редактор надає чудові можливості для эмуляції реальних інструментів малювання: графіт, крейда, олія і т.д. Також дозволяє імітувати фактуру поверхні матеріалів, живопис, створювати анімацію. Дуже зручний для розробки фонових чи малюнків Web-сторінок у стилі живопису. Користаючись цією програмою відчуваєш себе художником.

Існує ще ряд редакторів (Mіcrosoft Photo Edіtor, Mіcrosoft Photo DRAW), що також дозволяють реалізувати найпростіші задачі, але не задовольняючим запитам професіоналів.

KoolMoves 7.0 - програма призначена для створення веб-анімації, при використанні різноманітних інструментів для роботи з Flash елементами і анімованими файлами формату GIF.

KoolMoves нагоді веб-дизайнерам, як новачкам, так і професіоналам, так як вона відрізняється своєю простотою та зручністю. Для створення web-анімації високої якості варто скористатися саме нею, інструменти, які увійшли до її складу, допоможуть вам досить ефективно працювати з файлами формату Flash і анімаційними GIF.

KoolMoves 7.0 дозволяє здійснювати різні дії з анімацією, наприклад градієнтну заливку створеної кривої. Додатковою зручністю є можливість присвоїти дії кнопками до створених вами зображенням. Так само ви зможете озвучити, як би оживити створену вами анімацію, записавши аудіо файл wav. формату. Навіть якщо ви не має досвіду роботи з flash додатками, нічого страшного, KoolMoves настільки проста, що ви без зусиль зможете створити високоякісні анімаційні ролики. Створені вами ролики можна спокійно експортувати в різні web-банери або мультимедійні слайд-шоу. Що дуже зручно при створенні сайтів, вам не доведеться користуватися різними громіздкими програмами, це допоможе прискорити процес створення та оптимізувати вашу роботу.

123 Flash Menu - програма надає швидкий спосіб для створення професійних Flash-меню і підтримує всі популярні Web-браузери, причому офіційні користувачі разом з реєстрацією отримують більше 100 шаблонів.

Назва 123 Flash Menu програма отримала на підставі того, що керівництво користувача пропонує створити меню за три простих кроки: вибір шаблону, модифікація шаблону, опублікування. Програма дозволяє створювати динамічні ефекти (анімація, звуки, прозорість), але при цьому від користувачів не вимагається знання програмування. Сотні заздалегідь підготовлених шаблонів дають можливість швидко створити персоналізовані меню. Рublish Wizard допомагає згенерувати досконалий HTML-код. Flash-меню буде працювати при перегляді різними браузерами. Зареєструвавшись одного разу, можна періодично отримувати шаблони з сайту розробника.

Робота з програмою досить проста. На першому етапі у вікні Wizard Window потрібно вибрати категорію шаблону (Тemplate Сategory) в лівій панелі, після чого відповідні шаблонні файли (Тemplate Files), що мають розширення * fmp, будуть перераховані в правій панелі. При листанню шаблонів можна переглядати їх вид у вікні Рreview Рane.

Adobe Dreamweaver cs5 - Розширене рішення по роботі та створенні власних сайтів! Нові можливості втілені в новій версії Web редактора Adobe Dreamweaver cs5. Adobe Dreamweaver це відмінне рішення для Web-майстра в галузі створення сайтів і реалізації будь-яких можливостей в області верстки дизайну (шаблону)! Посравненію з попередніми версіями доданий дуже багато: расшіріна база команд коду, поліпшений дизайн, вікно для CSS, Допомога при роботі з Java Script і Ajax. У програмі є вбудована система управління сайтом, яка включає в себе: FTP-клієнт, функцію управління посиланнями і візуальну карту сайту, на якій графічно відображається структура сайту. Adobe Dreamweaver може працювати зі скриптами, оптимізувати сторінки для різних браузерів, перевіряти посилання на працездатність і знаходити непотрібні файли. Відмінна риса цього редактора - коректна робота з HTML кодом. Російська та Повна версія! Програма Adobe (Macromedia) Dreamweaver забезпечує функціональну середу написання коду, яка включає інструментальні засоби редагування коду (розмальовка коду або перевірка закриття тегів).html-редактор Adobe (Macromedia) Dreamweaver має повну підтримку формату CSS, з функцією перевірки його сумісності з різними браузерами, функціональний редактор коду веб-сторінок і можливість працювати з такими технологіями, як: XML, javascript, PHP, Adobe ColdFusion, ASP і ASP.net.

Adobe (Macromedia) Dreamweaver - потужний професійний HTML-редактор для візуального створення та управління web-сайтами різної складності. Програма Adobe (Macromedia) Dreamweaver включає самі прогресивні інноваційні технології і можливості, за допомогою яких можна створювати динамічні і сучасні веб-сайти, відповідні сьогоднішнім стандартам.

Також присутній середу для розробки сучасних Ajax-додатків, які сьогодні набувають все більшої популярності.

Adobe (Macromedia) Dreamweaver на сьогоднішній день є одним з кращих і відомих HTML-редакторів, що дозволяє без особливих зусиль створювати сучасні барвисті веб-сайти, а також керувати Інтернет-проектами.

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

Допомога при роботі з Java Script і Ajax:

При написанні ява скриптів, ви полчіте швидку і якісну підказку, що значно полегшить вашу роботу. Вам підкажуть ка краще працювати з певними об'єктами і різними типами даних. Ви зможете працювати з популярними базами javascript, наприклад, з jQuery, Prototype, і Spry.

Використовувати всі функии html, створювати стандартні таблиці, серії div-тегів, ненумерование списки, а потім просто вибрати в меню Insert> Spry> Spry Data Set щоб інтегрувати ваші дані в динамічну таблицю з отсортірованності рядками, професійно деталізація шарами або виконати інші складні завдання.

Краща практика для CSS:

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

 

Проектування веб-сайту

 

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

Поняття системи навігації Наявність навігаційної системи дозволяє відвідувачу візуально визначати цінність інформації, схованої в самих віддалених куточках того чи іншого інтернет-проекту, за допомогою вивчення тематичних заголовків. Кожен заголовок у стиснутій формі характеризує конкретний розділ чи групу підрозділів сайта, присвячених визначеній темі, і є гіперпосиланням на їхній повний варіант. Сукупність таких заголовків складає згадану вище систему навігації по сайту. Типи навігації Існує кілька типів організації навігації по Web-сайту. Розглянемо основні:

Текст

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

Однак 90-і рр. XX століття породили тенденцію до эстетизації складених елементів електронних документів у мережі, що виражалася в стрімкому підвищенні користувальницьких вимог до візуального оформлення сайта, у тому числі до його навігації. Незважаючи на зростаючий інтерес до таблиць стилів, що дозволяє трохи перетворити і прикрасити стандартний вид шрифтів, текстова навігація зрештою поступилася "місце під сонцем" своєму графічному аналогу.

Графіка

Графічний варіант представлення системи навігації є, мабуть, найбільш розповсюдженим в Інтернеті. Воно зрозуміло: сучасні графічні редактори укупі з усілякими надбудовами (plug-іns), ефектами і фільтрами здатні створювати приголомшливі зразки оформлювальних рішень. Застосування фотографічних зображень, малюнків, а також анімації залучило величезну кількість Web-дизайнерів, що віддали перевагу візуальній привабливості.

При розробці системи навігації необхідно відповідати деяким обов'язковим вимогам, дотримання яких допоможе створити просту і зручну, інтуїтивно зрозумілу будь-якому користувачу навігаційну структуру. Ці вимоги можуть несуттєво варіюватися в залежності від особливостей Web-сайта, представленої на ньому інформації, а також деяких суб'єктивних факторів розроблювача. Однак розроблювальна система навігації повинна в остаточному підсумку відповідати ряду критеріїв зручності користування навігацією. Таких як: розташування, ієрархія і найменування, приступність.

 

Рисунок 1 - Компонування блоків Web-сайта

 

Розробка графічного макета майбутнього web-сайта. Компонування макета Під компонуванням макета прийнято розуміти умовне (схематичне) розташування блоків інформації на майбутньому Web-сайті. Усього можна виділити чотири блоки інформації. Розглянемо кожний з них:

1. "шапка" - займає верхню частину сайта у вікні браузера (як правило, не більше 1/4 видимої частини екрана без прокручування) і може містити:

логотип;

слоганы, гасла, девізи;

рекламну інформацію (банери і текстові блоки) та ін.;

2. Меню навігації - воно може бути вертикальним, горизонтальним, містити підменю і т.д. і т.п.

3. Змістовна частина - тут відображається основна і сама головна складова будь-якого Web-сайта - інформація: новини і каталог продукції, контактні дані і гостьова книга і т.д.;

4. "Підвал" - нижня частина сайта у вікні браузера, не є обов'язковим блоком, він лише підкреслює чітку структуру. Він може містити:

інформацію про авторське право розроблювачів Web-сайта (повний чи текст посилання на нього);

координати для зв'язку;

дублюючу навігацію (текстову);

рекламну інформацію (баннеры і текстові блоки) і ін.

Ще одним важливим моментом, що передує початку роботи над графічним макетом, є вибір типу верстки. Усього існує два типи:

"фікс" - у цьому випадку сайт "затачивается" під конкретний мінімальний розмір екрана і при зміні розмірів вікна браузера його компонування залишається фіксованим;

"гума" - структура сайта змінюється пропорційно змінам розмірів вікна браузера (тобто сайт "розтягується"). Логічно припустити, що при виборі типу верстки варто виходити з мінімального розміру екрана. У даному випадку вибраний перший тип верстки - "фікс".

Екслуатаційний розділ