Дизайн web-страниц - Курсовая работа

Знание данной темы, даст нам возможность углубить свои навыки при создании графики для Web-сайта, узнать и увидеть все нюансы Web-дизайна. Цель данной курсовой работы: разобраться какая графика необходима для использования в Web-документе, рассмотреть графические редакторы и разработать примеры графики и gif-анимации для Web-сайта. Данная работа позволит нам увидеть огромный набор средств включения изображений в Web-документы, даст обзор различных графических приложений и форматов, позволяющих сделать все для большей информативности и заинтересованности Web-сайту, что улучшит его по многим важным характеристикам. Web-дизайн - это область дизайна, связанная с web-разработкой, графическим оформлением структуры сайта и проектированием пользовательских веб-интерфейсов. Другими словами, web-дизайн представляет собой логическую структуру web-страниц, с удобной и яркой подачей информацией, а также художественным оформлением интернет-ресурса.Не отдаляясь от темы, скажем, что компьютерная графика так же крайне необходима и при создании Web-страниц. В этот момент именно графика для Web, дает возможность обрабатывать фотографии, подготовить графику для публикации размещения на Web-сайте, а также создать свой собственный логотип или иконку. Изображения на Web-страницах могут размещаться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ. Для обработки, редактирования, создания или просмотра графических иллюстраций, существует графический редактор, специализированная программа для работы над изображением. На сегодняшний день существует огромное количество разнообразных программ и редакторов, с помощью которых мы создаем и редактируем наши изображения, цифровые фото, или имеем возможность превратить свое воображение в наглядную графику или анимацию.На сегодняшний день существует большое количество форматов хранения графики в файлах. Формат GIF (Graphics Interchange Format) был создан в 1987 году и усовершенствован в 1989 году. Одним из них считается возможность задавать для изображения прозрачный цвет, что в свою очередь позволяет стать невидимыми тем участкам, что будут закрашены таким цветом. Так же, в одном файле GIF можно хранить сразу несколько изображений, иными словами анимацию (анимированный GIF). Формат JPEG также имеет и отрицательные стороны: • Файл JPEG не поддерживает очень высокую глубину изображения, имея при этом глубину цвета 24 бита (8 бит/канал);Шаг №2 Создаем прозрачный слой, и называем его "Фиолетовый", выбирали в палитре цвет "#b10993" (рис.2). Шаг №3 Настроили параметры градиента радиальной формы, и прозрачностью 50, рисуем градиент как указано на изображении (рис.3). Шаг №4 Создаем прозрачный слой и называем его "Затмение 1". Шаг №6 Затем мы применяем к данному слою с окружностями "Фильтр - Размывание - Гауссово размывание" со значением 40 рх (рис.5). Шаг №7 Создаем еще один прозрачный слой, называя его "Затмение 2", тем же способом мы рисуем еще несколько окружностей различного размера, применяя фильтр Гауссово размывание, но со значением в 10рх.Мы уже говорили, что для сайта необходим HTML язык, а т.е язык программирования, иначе говоря его задача отвечать за расположение в документе нужных для сайта текстов, изображений видео или таблиц. Данный язык пишется в привычном для всех нас документе "Блокнот", а открыть для обзора итогового ресурса нам помогает всем известные браузеры. В нашем случае, так же необходим тег, позволяющий нам не просто вставить изображение в интернет-ресурс, а сделать картинку фоновым изображением.Способность развивать и использовать образное мышление и пространственное воображение, дает возможность работать с образами в голове, превращая их в готовый продукт, в виде Web-сайта. Умение рождать новые идеи и образы, трансформировать их по средствам графического дизайна, красочно, визуально грамотно представлять информацию, залог успешного, готового Web-сайта. Говоря о Web-дизайне, мы возьмем смелость поставить его на ровне с искусством, в основе которого лежит композиция. Сравнивая, мы можем провести аналогию Web-сайта, состоящего из множества элементов, в виде контента, интерфейса, логотипа, контактной информации и конечно графических элементов.

Содержание

Введение

1. Введение в дизайн web-страниц

1.1 Что такое web-узел?

1.2 Виды графических редакторов

1.3 Форматы интернет-графики

2. Основы создания графики

2.1 Создание графики для веб-страницы

2.2 Вставка графики в интернет-ресурс

Заключение

Библиографический список

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

Текст документа станет более полным и содержательным с помощью интересных изображений. Использование графики легко недооценить в различных видах публикаций, сюда можно и отнести многочисленные Web-документы.

Актуальность: выбранная тема обусловлена неразрывной связью между интернет-ресурсом и его уникальным дизайном, в виде изображений, различного рода иллюстраций, увлекательных материалов сайта. Знание данной темы, даст нам возможность углубить свои навыки при создании графики для Web-сайта, узнать и увидеть все нюансы Web-дизайна.

Цель данной курсовой работы: разобраться какая графика необходима для использования в Web-документе, рассмотреть графические редакторы и разработать примеры графики и gif-анимации для Web-сайта.

Объект: является изучение основ компьютерной графики в растровых и векторных графических приложениях.

Предмет: создание графики и gif-анимации.

Задачами работы являются: • рассмотреть виды графических редакторов;

• изучить основы Web-дизайна;

• разработать мультимедиа для сайта.

При этом использованы следующие методы: • изучение литературы;

• изучение графических редакторов;

• оценивание.

Изображения всегда лучше передают суть, ведь при изучении текста, идет визуальное восприятие, и наглядное представление материала отлично показывает содержание. Слова "лучше один раз увидеть, чем сто раз услышать" в нашем случае, прочитать, отлично раскрывают смысл визуального восприятия.

Какая энциклопедия обходится без иллюстраций? Размещенные изображения позволяют даже и без того интересному тексту стать еще более читабельным и привлекательным.

Данная работа позволит нам увидеть огромный набор средств включения изображений в Web-документы, даст обзор различных графических приложений и форматов, позволяющих сделать все для большей информативности и заинтересованности Web-сайту, что улучшит его по многим важным характеристикам.

1.1 Что такое web-узел?

Всем известно, что графическое оформление интернет-ресурса, играет огромную роль в достижении успеха и популярности. Каждодневный рост сайтов одной тематики напрямую связан с борьбой между ними за целевую аудиторию. Главной задачей при разработке сайта, это грамотное и интересное оформление дизайна. Именно понятный, увлекательный дизайн позволит выделиться среди других и привлечь внимание посетителей сайта.

Так, что же такое Web-дизайн? Web-дизайн - это область дизайна, связанная с web-разработкой, графическим оформлением структуры сайта и проектированием пользовательских веб-интерфейсов. Другими словами, web-дизайн представляет собой логическую структуру web-страниц, с удобной и яркой подачей информацией, а также художественным оформлением интернет-ресурса. Функция, что несет в себе сайт, это донести нужную информацию до различной аудитории. А правильный дизайн сайта, заменяет нам своего рода средства массовой информации, преимущества которого известны многим. Ведь именно интернет-ресурс не загнал в рамки времени и доступа, как в этом ограничены телепередачи или газеты, которым отведено определенное время или размер колонки. И напротив web-сайт доступен из любой точки планеты, в любое нужное время, где есть доступ в Интернет.

При создании сайта, мы должны обозначить задачи, которые могут вставь перед разработчиком: 1. Уникальность;

2. Одна из основных задач дизайна web-страниц, создание уникальности, отличия от других. Для достижения индивидуальности, web-дизайнеры прибегают к оригинальным цветовым и художественным решениям, ярким и привлекающим внимание логотипам, что представляют лицо компании, а также удобный и необычно размещенный контент сайта. При этом не стоит забывать, что интерфейс должен оставаться аналогичным по всему сайту, чтобы посетитель не путаясь, находил нужную для себя информацию.

3. Привлечение внимания;

Не менее важная задача по сравнению с уникальностью, является привлечение внимания как можно большего количества посетителей страницы. Дизайн сайта должен притягивать взгляд, акцентировать важные детали сайта, показать удобный интерфейс и привлечь художественными элементами.

4. Донесение необходимой информации. Дизайн страницы, не является просто красивой обложкой, наполненной яркими иллюстрациями и графическими элементами. Также стоит помнить, что донесение необходимой информации для пользователя сайта, является не менее важной задачей в сравнении свыше сказанными.

Выложенный на сайт контент, необходимо правильно скомпоновать и оформить, добавляя графики и изображения дополняющие информацию. Заходя на сайт, пользователь должен найти все интересующие его ответы на поставленные вопросы. Оригинальный дизайн и соответствие всем правилам оформления сайта, всегда подчеркнет важность содержимого.

Детальное рассмотрение процесса создания сайта, поможет нам точно знать, чем необходимо заняться на различным этапах разработки: 1. Техническое задание (ТЗ);

Осознавая поставленную цель, для которой создается Web-страница, зная объем сайта, его функциональность, задаются основные параметры визуального представления и структуры сайта. Данный этап заканчивается утверждением технического задания заказчиком.

2. Структурирование информации;

Этот этап несет в себе формы и организации содержимого сайта. Включает широкий ряд вопросов, от логической структуры Web-сайта, до выбора наиболее удобных форм подачи информации.

3. Графическое оформление;

В графическом редакторе формируются визуальные пространства сайта с помощью графических элементов в качестве украшения или навигации. Дизайн страницы представляет собой большой графический файл.

4. Верстка;

На данной стадии графическая картинка нарезается на отдельные элементы и с использованием формата HTML (Hyper Text Markup Language - язык разметки гипертекста).Язык трансформируется в код, который можно просматривать с помощью браузера.

5. Вебмастеринг.

На последнем этапе осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Здесь нам необходимо размещение на хостинге для дальнейшего пользования сайтом во всемирной паутине.

При создании сайта мы также не должны придерживаться еще одному руководству по дизайну страниц: 1. Простота;

2. Центрированная разметка;

3. Небольшое количество колонок;

4. Отдельная верхняя секция;

5. Яркие цветные блоки;

6. Простая навигация;

7. Увеличенный размер шрифтов;

8. Вставки большого текста (обычно реализованы в виде графического элемента);

9. Индивидуальный логотип.

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

- Сайт-презентация, такой сайт представляет информацию о фирме, услуге, продукте. Основной задачей данного сайта, по средствам визуального оформления, по максимуму эффективно преподнести содержимое для посетителя страницы. В таком сайте больше идет акцент на графическое оформление, нежели текстовую информацию.

- Корпоративный сайт, является представителем какой-либо организации (фирмы, университета), но только уже во всемирной сети. Именно к таким сайтам, имеются самые высокие требования по оформлению дизайна Web-страницы. Ясная, четкая структура сайта, соответствующая цветовая гамма, уникальность графических элементов, индивидуальный мощный логотип, будут выделять и придавать "изюминку" такому сайта. Текстовая информация на ровне балансирует с графическим дизайном.

- Информационные ресурсы, такие сайты чаще всего являются библиотеками, газетами, средствами массовой информации. Как правило, информация, выложенная на данном ресурсе обновляется несколько раз в сутки. Перед разработкой данного типа сайта, необходимо учитывать желание посетителей, а это потребность в содержании, а не в красивом оформлении. Текстовая информация, максимально структурирована, предоставляя посетителю, найти нужную информацию, но напротив, графика сведена к минимуму, показывая лишь четкие относящие к материалу факты.

- Электронный магазин, данный тип сайта, ставит перед собой задачу, не только быстро и эффективно заполучить внимание посетителя сайта, предоставив интересующую информацию, но и также заинтересовать клиента к покупке. При разработке такого Web-ресурса, в первую очередь необходимо уделить должное внимание сервисному обслуживанию. Поиск по товарам и услугам, удобный и красочный каталог продукции, быстрая связь со службой поддержки и легкая регистрация при оформлении заказа, имеют большую значимость, чем графический дизайн.

Работа над графическим Web-дизайном, представляет собой сложный вид деятельности. Ведь, только представьте, что перед разработчиком Web-сайта, стоит задача, упаковать огромный объем информации, в лаконичный, удобный для восприятия, единый интернет-ресурс.

Человек может видеть окружающий мир не только таким, какой он есть на данный момент, но и так же мир, каким он может быть. Способность развивать и использовать образное мышление и пространственное воображение, дает возможность работать с образами в голове, превращая их в готовый продукт, в виде Web-сайта. Умение рождать новые идеи и образы, трансформировать их по средствам графического дизайна, красочно, визуально грамотно представлять информацию, залог успешного, готового Web-сайта.

Говоря о Web-дизайне, мы возьмем смелость поставить его на ровне с искусством, в основе которого лежит композиция. Любая композиция, состоит из множества отдельных, но связанных между собой элементов. Сравнивая, мы можем провести аналогию Web-сайта, состоящего из множества элементов, в виде контента, интерфейса, логотипа, контактной информации и конечно графических элементов.

Как и художественная композиция, Web-сайт несет в себе смысл, удовлетворяя своего зрителя. Искусство, преследует цель в виде эстетического наслаждения картиной, но и Web-сайт помимо интересующей информации для посетителя, должен вызывать моральное удовлетворение, при виде художественного оформления страницы. Мы должны понимать, что при создании художником картины, он затрачивает все свои ресурсы: старание, воображение, талант, время, потенциал. Так и Web-дизайнер при создании Web-страницы вкладывает не меньше усилий.

Человек создающий Web-сайт, соединяет свои знания с художественным талантом и воображением. Умение реализовать свои образы - вот что отличает настоящего Web-разработчика, соединяя в одном лице художника и программиста.

Подводя итог, мы можем сказать, что создавая Web-сайт, мы берем на себя ответственность, за индивидуальность, простоту и красоту нашего продукта, ведь Web-страница, это аналогия живописной картины, но в условиях современных Интернет технологий.

1. Абрамова, О.Ф. Использование мультимедийных технологий в процессе обучения дисциплине "Компьютерная графика": [краткое сообщение]/ О.Ф. Абрамова. - Волгоград: ВПИ, 2012. - 90с.

2. Аверин, В.Н. Компьютерная инженерная графика:[ учебное пособие для использования в учебном процессе образовательных учреждений, реализующих программы среднего профессионального образования]/ В.Н. Аверин. - 3-е изд., испр. - Москва: Академия, 2012. - 180с.: ил.-(Среднее профессиональное образование)- ISBN: 978-5-7695-9194-5.

3. Басс, Н.В. Введение в компьютерную графику: [методические указания к выполнению графической работы]/ Н.В. Басс, М.А. Притула. - Брянск: БГТУ, 2013. - 42с.

4. Грогуль, Н.В. Обучение компьютерной графике и компьютерному проектированию студентов специальностей "Дизайн" и "Декоративно-прикладное искусство": [научая статья]/ Н.В. Грогуль, Е.В. Победаш. - Иркутск: ИГТУ, 2011. - 193-197с.

5. Гурский, Ю.В. Компьютерная графика: Photoshop CS5, CORELDRAW X5, Illustrator CS5/ Ю. Гурский, А. Жвалевский, В. Завгородный. - Санкт-Петербург: Питер, 2011.- 688 с.: ил.- (Трюки и эффекты).- ISBN: 978-5-459-00524-0.

6. Дегтярев, В.М. Инженерная и компьютерная графика: [учебник для вузов по техн. Направлениям]/ В.М. Дегтярев, В.П. Затыльникова. - 2-е изд., испр.- Москва: Академия, 2011.- 240 с.: ил.- (Высшее профессиональное образование) (Бакалавриат).- Библиогр.: с. 236.- ISBN: 978-5-7695-7940-0.

7. Евсеев, Дмитрий Андреевич WEB-дизайн в примерах и задачах: учебное пособие для вузов по специальности "Прикладная информатика" и др. эконом. специальностям: рек. УМО вузов РФ / Д.А. Евсеев, В.В. Трофимов; под ред. В.В. Трофимова; Санкт-Петербург. гос. ун-т экономики и финансов. - Москва: Кнорус, 2010. - 272 с. - Словарь: c. 238-263. - ISBN 978-5-406-00017-5.

8. Залогова, Л.А. Компьютерная графика: учебное пособие: [элективный курс]/ Л.А. Залогова. - 3-е изд.- Москва: Лаборатория Базовых знаний, 2009.- 213 с.: ил., 8 л. ил.- (Информатика. Элективный курс).- Изд. подготовлено при содействии НФПК - Национального фонда подготовки кадров.- Предм. указ.: с. 210-213.- ISBN: 978-5-9963-0043-3.

9. Захаров, А.А. Компьютерная геометрия и графика: [учебное пособие для студентов образовательной программы "Информационные системы и технологии"]/ А.А. Захаров. - Муром: МИ ВЛГУ, 2010. - 137с. ISBN: 978-5-8439-0225-4.

10. Королев, А.Л. Компьютерное моделирование: [учебное издание]/ А.Л. Королев. - Москва: БИНОМ. Лаборатория знаний, 2012.- 230 с.: табл., схемы, ил.- (Педагогическое образование).- Библиогр.: с. 223-228.- ISBN: 978-5-94774-487-3.

11. Курушин, В.Д. Графический дизайн и реклама: [самоучитель]/ В.Д. Курушин. - 2-е изд., стер.- Москва: ДМК Пресс, 2012.- 272 с.: ил.- (Самоучитель).- Библиогр.: с. 266.- Предм. указ.: с. 267-270.- ISBN: 978-5-94074-722-2.

12. Петров, М.Н. Компьютерная графика: [учебное пособие для вузов по направлению "Информатика и вычислительная техника"]: доп. М-вом образования РФ/ М.Н. Петров. - 3-е изд.- Санкт-Петербург [и др.]: Питер, 2011.- 544 с.: ил. 1 CD-R- (Учебник для вузов).- Алф. указ.: с. 533-541.- Словарь: c. 532.- ISBN: 978-5-459-00809-8.

13. Субхангулова, Л.М. Методы проектирования в дизайне и разработка дизайн - концепций: [научная статья] / Л.М. Субхангулова. - Уфа: БЭЮТ, 2012. - 87-92с.

14. Тозик, В.Т. Компьютерная графика и дизайн: [учебник для нач. проф. Образования]/ В.Т. Тозик, Л.М. Корпан. - 2-е изд., стер.- Москва: Академия, 2012.- 208 с.: ил.- (Начальное профессиональное образование).- Библиогр.: с. 198-199.- Словарь: c. 187-192.- ISBN: 978-5-7695-8980-5.

15. Тункевич, Е.И. Самоучитель Adobe Photoshop CS5/ Е.И. Тучкевич. - Санкт-Петербург: БВХ-Петербург, 2011. - 496с.: ил., фот. 1 CD-R- (Самоучитель).- Предм. указ.: с. 493-495.- На обл. доп. загл.: Полный спектр инструментов и команд для выделения, приемы работы в слоях, работа с каналами, все виды маскирования, тоновая и цветовая коррекция, работа с векторными объектами, гламурная ретушь и коррекция фигуры, создание профессиональных коллажей и монтажей.- ISBN: 978-5-9775-0588-8.

16. Хейфец, А.Л. Инженерная 3D-компьютерная графика: [учебное пособие для бакалавров, для студентов инженерно-технических вузов при изучении курса "Инженерная графика", "Инженерная и компьютерная графика"]/ А.Л. Хейфец; под ред. А.Л. Хейфец. - 2-е изд., перераб. и доп. - Сер. Бакалавр/ М-во образования и науки Российской Федерации, Южно-Уральский гос.ун-т. - Москва: Юрайт, 2012. - 464с. - ISBN: 978-5-9916-1477-1.

17. Чигинцева, О.Н. Формирование композиционных умений у учителей начальных классов средствами компьютерной графики: автореф. дис. ... канд. пед. наук: (13.00.02)/ О.Н. Чигинцева; науч. рук. А.Ф. Яфальян; Уральский гос. пед. ун-т, Нижнетагильская гос. соц.-пед. акад.. - Екатеринбург: [б. и.], 2011.- 23 с.: табл., схемы- Библиогр.: с. 20-23.

18. Шишкин, В.В. Трехмерное моделирование в среде Blender: [учебное издание]/ В.В. Шишкин, С.Т. Гераськина, О.Ю. Шишкина. - Ульяновск: УЛГТУ, 2010. - 185с. ISBN: 978-5-9795-0580-0.

19. Алексеев, Александр Петрович Введение в Web-дизайн [Электронный ресурс] : учебное пособие по специальности "Програмное обеспечение вычислительной техники и автоматизированных систем" : рек. УМО вузов РФ / А.П. Алексеев. - Москва: СОЛОН-Пресс, 2008. - 192 с. - (Библиотека студента). - Доступна эл. версия. ЭБС "IPRBOOKS". - Режим доступа:http://www.iprbookshop.ru/8714. - ISBN 978-5-91359-033-6.

20. Горельская, Любовь ВЛАДИМИРОВНАКОМПЬЮТЕРНАЯ графика [Электронный ресурс] : учебное пособие по курсу "Компьютерная графика" / Горельская Л.В.. - Оренбург: Оренбургский государственный университет, 2003.- 148 с.- Доступна эл. версия. ЭБС "IPRBOOKS".- Режим доступа:http://www.iprbookshop.ru/21601.- ISBN: 5-7410-0696-5.

21. Леонова,Наталья Ивановна Основы дизайна: [учебно-методическое пособие для фак. технологии и предпринимательства] / Н.И. Леонова; Новосиб. гос. пед. ун-т. - Новосибирск: НГПУ, 2013.- 125 с.: ил.- Библиогр.: с. 123-124.- Доступна эл. версия в ЭБ НГПУ.- Режим доступа:http://lib.nspu.ru/views/library/7821/read.html. - Подготовлено и издано в рамках реализации Программы стратегического развития ФГБОУ ВПО "НГПУ" на 2012-2016 гг..- ISBN: 978-5-00023-154-8.

22. Некрасова, Ирина Ивановна Основы Web-дизайна [Электронный ресурс]: учебно-методическое пособие / И.И. Некрасова; Новосиб. гос. пед. ун-т. - Новосибирск: НГПУ, 2012. - 103 с. : ил. - Библиогр.:с. 101-103. Доступна эл. версия в ЭБ НГПУ.- Режим доступа: https://lib.nspu.ru/views/library/1332/read.php.

23. Перемитина, Татьяна Олеговна Компьютерная графика [Электронный ресурс] : учебное пособие / Перемитина Т.О.. - Томск: Эль Контент, Томский государственный университет систем управления и радиоэлектроники, 2012. - 144 с. - Доступна эл. версия. ЭБС "IPRBOOKS". - Режим доступа: http://www.iprbookshop.ru/13940. - ISBN: 978-5-4332-0077-7.

24. Сергеев, Григорий Геннадьевич Конструирование Web-сайтов: быстрый старт / Г.Г. Сергеев, С.П. Костин. - Москва: Мир книги, 2008. - 176 с. : ил., табл., схемы 1 CD-R - (Быстрый старт Видеокурс). - ISBN 978-5-89392-398-8.

Размещено на .ru