Дизайн Web- сайта

Автор: Пользователь скрыл имя, 02 Апреля 2012 в 16:44, курсовая работа

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

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

Оглавление

Введение_____________________________________________________2


1 Глава. Определение дизайна и его функции
1.1) История дизайна _________________________________________ 3
1.2) Дизайн: основные понятия и определения ___________________5
1.3) Виды дизайна __________________________________________9
1.4) Цвет и его значение в дизайне _____________________________12

2 Глава. Создание Web-страницы с помощью HTML и CSS
2.1) Язык HTML ____________________________________________15
2.2) CSS ___________________________________________________16
2.3) Структура HTML документа ______________________________18
2.4) Вёрстка с помощью слоёв _________________________________21
2.5) Преимущества и недостатки слоёв__________________________22
2.6) Особенности верстки слоями ______________________________25
2.7) Блочная верстка _________________________________________29
2.8) Форматирование текста___________________________________30
2.9) О шрифте_______________________________________________33
А) Живые и статичные шрифты _________________________________44
Б) Шрифт как элемент фирменного стиля __________________________47

3 Глава. Инструментарий для создания Web-страниц
3.1) HTML-редакторы________________________________________55
3.2) Графические редакторы___________________________________58
А) Редакторы растровой графики ________________________________60
Б) Редакторы векторной графики ________________________________62

4 Глава. Проектирование
4.1) Вступление_____________________________________________ 65
4.2) Идея ___________________________________________________66
4.3) Разработка структуры сайта _______________________________67
4.4) Оформление сайта _______________________________________68
4.5) Кодинг и программирование_______________________________71
4.6) Тестирование и доработка_________________________________72




Заключение______________________________________________________________________74

Список используемой литературы______________________________75

Файлы: 1 файл

3.Дипломная.doc

— 818.00 Кб (Скачать)

 

 

 

 

 

 

1.3 Виды дизайна.

 

              Выше неоднократно подчёркивалось, что дизайн – понятие многозначное, применяемое в самых разных сферах. В целом различают три основных вида дизайна. Самый распространенный из них относится к промышленным изделиям, это так называемый индустриальный дизайн, охватывающий широкий круг объектов, как говорят, от иголки до самолёта. Приоритет отдаётся изделиям группы «А», Наиболее наукоёмкими, технически сложным, определяющим хозяйственно экономический потенциал государства: Продукции машиностроения и станкостроение, средством транспорта, вооружению. Наиболее массовый характер имеет дизайн изделий группы Б – предметов потребления. Внутри этой группы выделяются отдельные подгруппы. В традиционном понимании индивидуальному дизайну относятся бытовые приборы, аппаратура, инвентарь и другое. Особое место занимает дизайн мебели и оборудование для интерьеров, посуда, корни которого уходят в эпоху ремесленного производства. Специфические черты имеет дизайн медицинского оборудования, изделия для лиц с ограниченными возможностями, для детей (в частности дизайн игрушек).

              Другой вид дизайна связан с миром графики: с плакатом, типографией, рекламой, оформлением книги – словом, со всеми зрительными средствами информации. Графический дизайн является продолжателем многовековых традиций и одним из наиболее распространенных видов дизайнерского творчества. Получив в месте с рекламой второе дыхание в начале 20 го века, прикладное графическое искусство охватывает практически все сферы жизни общества. К традиционным видам книжного и плакатного оформления, решение упаковки, этикеток, разработка фирменных знаков и фирменных стилей, шрифтов добавилось коммуникативная ветвь (в интерьерах зданий, на пространствах населённых пунктах), затем рекламные ролики на телевидении и в последнее время – компьютерный дизайн.

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

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

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

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

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

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

              Особенность Арт – дизайна состоит в том, что усилия дизайнера направлены главным образом на организацию художественного впечатления получаемого от образа воспринимаемого объекта. Изделия лишаются утилитарного значения и становятся декоративными и выставочными то есть практически проектируются эмоции. В связи с переходом к рынку «эмоциональных покупок» опыт создания произведений арт дизайна всё шире используется проектирование продукции индустриального дизайна.

 

 

 

 

 

1.4 Цвет и его значение в дизайне

 

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

Значение холодных цветов: холодные цвета оказывают успокаивающее действие. С одной стороны спектра расположены холодные, безличные цвета. Расположенные с другой стороны холодные цвета успокаивают и облагораживают. К холодным цветам относятся синий (голубой), зеленый, нейтральные белые цвета, серый и серебряный. 

 

Позитивные свойства холодных цветов:

 

Значение голубого (синего) цвета - сила, важность, умиротворенность, интеллект

 

Значение зеленого цвета - рост, здоровье, природа, гармония

 

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

 

Позитивные свойства теплых цветов:

 

Значение красного цвета - любовь, страсть, тепло, радость, мощь

 

Значение розового цвета - сладость, удовольствие, игривость, романтика, утонченность

 

Значение желтого цвета - эйфория, радость, оптимизм, память

 

Значение золотого цвета - роскошь, излишество, яркость, традиции

 

Значение оранжевого цвета - энергия, перемены, здоровье

 

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

 

По зитивные свойства смешанных цветов:

Значение фиолетового цвета - аристократизм, величественность, романтика, духовность

 

Значение лавандового цвета - харизма, элегантность, утонченность, женственность

 

Значение зеленого цвета - рост, здоровье, природа, гармония

 

Значение бирюзового цвета - женственность, утонченность, ретро

 

Значение бежевого цвета - консерватизм, умиротворенность

 

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

 

Позитивные свойства нейтральных цветов: 

 

Значение черного цвета - консерватизм, таинственность, утонченность

 

Значение серого цвета - официоз, консерватизм, утонченность

 

Значение серебряного цвета - тонкость, гламур, роскошь

 

Значение белого цвета - чистота, невинность, мягкость, женственность

 

Значение цвета словной кости - безмятежность, удовольствие, сдержанная элегантность

 

Значение коричневого цвета - основательность, простота, дружелюбие

 

Значение бежевого цвета - консерватизм, умиротворенность.

 

 

 

 

2 глава. Создание Web-страницы с помощью HTML и  CSS

 

2.1 Язык HTML

 

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

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web,  как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

 

 

 

2.2 CSS

 

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

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

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

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

использование различных расширений HTML;

применение изображений вместо текста;

использование рисунков для контроля пустого пространства, так называемые распорки;

использование таблиц для верстки веб-страниц;

написание программных скриптов вместо использования HTML.

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

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

 

 

 

 

 

 

2.3 Структура HTML документа

 

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag -  специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.

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