Web-разработка

Автор работы: Пользователь скрыл имя, 13 Октября 2013 в 01:58, курсовая работа

Краткое описание

Під час виконання курсової роботі було розроблено статичні та динамічні зображення різних форматів, якими було заповнено сторінки веб-сайту також оформлення веб-сйату здійснювалося за допомогою стилів css , та Java скриптів, які написані спеціально для графічного оформлення сайту. Також для оформлення веб-сайту було використане інформаційне забезпечення та анімаційні зображення у форматі gif , що допомогли розкрити тему веб-сайту. У процесі розробки сайту були використані „Adobe Photoshop СS5” , ,, Adobe Dreamweaver CS4” , Microsoft Office Picture Manager, бібліотеки Jquerry, для створення графічних переходів між зображеннями на сайті.

Вложенные файлы: 1 файл

Комп_граф.docx

— 8.89 Мб (Скачать файл)

                                                         АНОТАЦІЯ

 

Під час виконання курсової роботі було розроблено статичні та динамічні зображення різних форматів, якими було заповнено сторінки веб-сайту також оформлення веб-сйату здійснювалося за допомогою стилів css , та Java скриптів, які написані спеціально для графічного оформлення сайту. Також для оформлення веб-сайту було використане інформаційне забезпечення та анімаційні зображення у форматі gif , що допомогли розкрити тему веб-сайту. У процесі розробки сайту були використані „Adobe Photoshop СS5” , ,, Adobe Dreamweaver CS4” , Microsoft Office Picture Manager, бібліотеки Jquerry, для створення графічних переходів між зображеннями на сайті.

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

 

 

 

 

 

 

 

 

 

 

 

ВСТУП

 

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

  • розпізнавання образів;
  • обробку зображень;
  • машинну графіку.

Основне завдання розпізнавання образів  полягає в перетворенні вже наявного зображення на формально зрозумілу  мову символів.

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

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

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

При розробці курсової роботи об’єктом виступають використані та оброблені графічним редактором „Adobe Photoshop СS5”, статичні зображення у форматах jpg також розроблені анімаційні зображення у gif форматі за допомогою потужного графічного редактора „Adobe Photoshop СS5”. В подальшому вони використані для оформлення веб-сторінок розробленого сайту.

 

 

 

 

 

 

 

 

 

 

1 АНАЛІЗ  СТАНУ ПИТАННЯ І ПОСТАНОВКА  ЗАДАЧІ РОЗРОБКИ

 

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

Це зумовлене  тим, що у Інтернеті почали вести  свою комерційну діяльність незліченна кількість підприємств, у кожної компанії світового рівня є власний, якісно графічно оформлений веб-сайт. Саме тому створення веб-сайтів є  досить важливим навиком сучасного  працівника, який зайнятий у сфері комп’ютерних технологій. Комп'ютерна графіка – це наука, предметом вивчення якої є створення, зберігання і обробка моделей та їх зображень за допомогою ЕОМ, тобто це розділ інформатики, який займається проблемами отримання різних зображень (малюнків, креслень, мультиплікації) на комп'ютері.

У комп'ютерній  графіці розглядаються наступні завдання:

  • представлення зображення в комп'ютерній графіці;
  • підготовка зображення до візуалізації
  • створення зображення;
  • здійснення дій із зображенням.

Під комп'ютерною  графікою зазвичай розуміють автоматизацію  процесів підготовки, перетворення, зберігання та відтворення графічної інформації за допомогою комп'ютера. Під графічною  інформацією розуміються моделі об'єктів і їх зображення. У випадку, якщо користувач може управляти характеристиками об'єктів, то говорять про інтерактивну комп'ютерну графіку, тобто здатність комп'ютерної системи створювати графіку і вести діалог з людиною. В даний час майже будь-яку програму можна вважати системою інтерактивної комп'ютерної графіки. Інтерактивна комп'ютерна графіка – це так само використання комп'ютерів для підготовки та відтворення зображень, але при цьому користувач має можливість оперативно вносити зміни до зображення безпосередньо в процесі його відтворення, тобто передбачається можливість роботи з графікою в режимі діалогу в реальному масштабі часу. Комп'ютерна графіка налічує у своєму розвитку не більше десятка років, а її комерційним додаткам - і того менше. Андрієс ван Дам вважається одним із батьків комп'ютерної графіки, а його книги - фундаментальними підручниками з усього спектру технологій, покладених в основу машинної графіки. Також в цій області відомий Айвен Сазерленд, чия докторська дисертація з'явилася теоретичною основою машинної графіки. Сьогодні комп’ютерна графіка представлена у багатьох галузях різноманітними способами. Починаючи від графічного оформлення привітань у телевізійних новинах та оформлення веб-сайтів і закінчуючи створенням складних об’ємних моделей, що використовуються у будівництві, бізнес плануванні та у сучасній ігровій індустрії де для відображення такої графічної інформації потрібні спеціальні периферійні пристрої зі своїми власними графічними процесорами, оперативною пам’яттю та спеціальними графічними додатками, такими як DirectX . Разом ії цим розвивається галузь веб-дизайну, на даний момент існує маса програмних додатків та для створення графічного контенту сайту, його кодової HTML чи php частини [1].

Процес створення  сайту містить такі етапи :

  • уточнення технічного завдання;
  • розробка дизайну;
  • верстка дизайну;
  • програмування;
  • перевірка та здача в експлуатацію.

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

2 РОЗРОБКА СТРУКТУРИ САЙТУ

 

При створенні  сайту потрібно відштовхуватись  від технічного завдання та за допомогою цього ми зможемо створити структуру нашого сайту. Кожен сайт має свою унікальну структуру, але більшість компаній при створенні сайту використовують CMS системи , такі як WordPress,Joomla, IP Board, які дають змогу використовувати готові шаблони для швидкого створення сайту. Це вигідно з точки економії часу на створення сайту, але при використанні певного шаблону ми втрачаємо унікальність унікальність створюваного сайту, тому у даному випадку, використання шаблонів CMS системи є не доцільним. Кожен сайт повинен мати так звану логічну схему, тобто певну логічну схему переходів між сторінками, також на схемі показано розміщення елементів на сторінках сайту.

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

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

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

Якщо говорити про сам сучасному вигляді  структур сайту, то тут слід відзначити саме деревоподібний. Завдяки її широкому профілю ви можете укласти в структурі дерева безліч розділів, підрозділів і сторінок, які розміщуватимуться у довільній або фіксованій послідовності. Приклади структури сайтів розміщені на рисунку 2.1 [2].

 

 

Рисунок 2.1 – Різні структури сайту

 

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

Для створеного сайту краще всього підходить деревоподібна структура. 
Завдяки її широкому профілю можливо укласти в структурі дерева безліч розділів, підрозділів і сторінок, які розміщуватимуться у довільній або фіксованій послідовності. Ні для кого тут немає ніяких обмежень і можливо реалізувати проект так, як вважаєте за потрібне, самостійно визначивши його ієрархію. Але тут слід правильно розподіляти всі матеріали, щоб у майбутньому не допустити плутанини. Особливо треба стежити за навігацією, адже якщо всередині сайту буде безліч «перехресть» і поділів, то вам потрібно продумати такі умови, щоб навіть гість який вперше потрапив тут не заблукав. Тому потрібно намагатися чітко ділити всю інформацію, щоб не відбувалося ,,засмічення” , вчасно видаляти неактуальні відомості та непотрібні архіви.

Структура розробленого сайту представлена на рисунку 2.2.

 

 

Рисунок 2.2 – Структура  сайту ,,Озброєння української армії ”

 

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

 

Рисунок 2.3 – Розміщення елементів сайту

 

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

Информация о работе Web-разработка