Дизайн Web- сайта
14
Содержание
Введение______________________
1 Глава. Определение дизайна и его функции
1.1) История дизайна ______________________________
1.2) Дизайн: основные понятия и определения ___________________5
1.3) Виды дизайна ______________________________
1.4) Цвет и его значение в дизайне _____________________________1
2 Глава. Создание Web-страницы с помощью HTML и CSS
2.1) Язык HTML ______________________________
2.2) CSS ______________________________
2.3) Структура HTML документа ______________________________
2.4) Вёрстка с помощью слоёв ______________________________
2.5) Преимущества и недостатки слоёв_________________________
2.6) Особенности верстки слоями ______________________________
2.7) Блочная верстка ______________________________
2.8) Форматирование текста________________________
2.9) О шрифте________________________
А) Живые и статичные шрифты ______________________________
Б) Шрифт как элемент фирменного стиля __________________________47
3 Глава. Инструментарий для создания Web-страниц
3.1) HTML-редакторы________________
3.2) Графические редакторы_____________________
А) Редакторы растровой графики ______________________________
Б) Редакторы векторной графики ______________________________
4 Глава. Проектирование
4.1) Вступление____________________
4.2) Идея ______________________________
4.3) Разработка структуры сайта ______________________________
4.4) Оформление сайта ______________________________
4.5) Кодинг и программирование______________
4.6) Тестирование и доработка_____________________
Заключение____________________
Список используемой литературы____________________
Введение
Почему я выбрал на дипломную работу создание сайта.
Потому что для меня Веб-сайт - это не только "визитная карточка", своеобразное и легкозапоминающееся "лицо" фирмы, но и мощный маркетинговый инструмент, способный создать имидж Вашей компании. Понимая это, я подхожу к планированию и разработке с большой тщательностью, особо уделяя внимание специфике фирмы-заказчика.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.
Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы.
В своей курсовой работе я сделал попытку разобраться в том, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания Web-страниц и как его эффективно использовать.
Также в данной работе мною рассмотрены основы языка программирования Web-страниц – HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления.
1 глава. Дизайн его определения и функции
1.1 История дизайна.
Широкое обсуждение проблемы дизайна как особого вида проектирования началась во второй половине ХХ столетия. Ему посвящённые страницы периодических изданий (таких, как «Техническая эстетика», «Декоративное искусство», «Человек и профессия» и др.), отдельные монографии и пособия.
Так, краткий обзор предметного мира далёкого прошлого предлагают авторы книг «Дизайн» Л.М. Холмянский и А.С. Шипанов (1985). В книге Казариновой «Красота, вкус, экономика» (1985) освещаются экономические, технологические и эстетические проблемы дизайна, его роль в формировании вещей «социально необходимых, удобных, по возможности многофункциональных, ориентированных на конкретную группу потребителей и соответствующих общественно необходимым потребностям».
Учебное пособие Рунге и Синьковского представляют собой систематическое изложение курса дизайна – от истории развития этой профессиональной деятельности до её современных направлений и концепций.
Задачи дизайнера, занимающегося организацией придметно пространственной среды, обозначены в работе Чернова «Дизайн – что это такое?». С профессией интерьер-дизайнера на знакомит книга Глинки «Искусство современного интерьера - школьнику».
Учёные уделяли внимание и различным вопросам библиотечной архитектуры и проектирования зданий. Так ещё в 1937 году на всероссийском совещании по теоретическим вопросам библиотековедения и библиографии Пащенко в своём докладе высказал интересные идеи по строительству библиотечных зданий.
В 1941 году Пащенко изложил свои идеи в книге «Архитектура и строительство библиотечных зданий». Он призвал вырабатывать систему критериев и правил проектирования библиотечных зданий, соответствующих технологическим и техническим требованиям.
В послевоенные годы проблемами библиотечной архитектуры занимались Жук и Гильман. Очень ценно, что вопросы архитектуры библиотековеды решали и самостоятельно и в тесном сотрудничестве с архитекторами.
Длительное время после войны в библиотечных институтах – Московском, Ленинградском, Харьковском – преподавались учебные дисциплины, посвящённые вопросам оборудования и устройства помещений библиотек. Но в связи с теоретической недооценкой бибилиотековедением этих вопросов преподавание и научная разработка их прекратилась.
Нельзя сказать что в настоящее время ситуация в области дизайна библиотек выправилась. По прежнему этим вопросам уделяется мало внимания. Отсутствуют отечественные обобщающие работы, хотя отдельные аспекты строительства и проектирования зданий библиотек, создания внутренней среды , имиджа и т. п. в профессиональной печати освещаются.
Таким образом, многие проблемы библиотечного дизайна, разрабатываемые библиотековедами, архитекторами, искусствоведами ХХ столетия, остаются актуальными и ждут своих исследоватилей.
1.2 Дизайн: основные понятия и определения.
Термин «дизайн» прочно вошло в нашу жизнь, употребляется практически всеми кругами общества, но в широком обиходе чаще всего для обозначения оригинального, модного, современного вида какого либо предмета. В тоже время суть, предназначения и возможности дизайна, его место в производственно экономической и тем более культурной сферах не всегда ясны не только основной массе населения _ практически со стажем, искусствоведы, архитекторы и даже философы до сих пор расходятся в оценках целей, задач, перспектив этой области деятельности.
Так, известный итальянский архитектор и дизайнер Понтии считал что цель дизайна – создание мира прекрасных форм, вещей, которые раскрывали бы истинный характер нашей цивилизации. Иного мнения придерживался другой теоретик дизайна Мальдонадо, утверждавший, что предмет употребления не может выполнять функции художественного произведения, а судьбы искусства не могут совпадать с судьбами промышленных изделий. За рубежом широко распространено мнение, не лишённое смысла, что главная задача дизайна – создание вещей которые было бы легко продать.
Российский учёный Бореев писал: «Дизайн – это наиболее развитая и теоретически осмысленная сфера деятельности человека по законам красоты в не искусства, охватывающая область проектирования, производства и бытия вещей, изготовленных промышленностью, с учётом их пользы, удобства и красоты».
О.Г.Лопшина в работе «Профессия - дизайнер» указывала, что это слово не так давно вошло в толковый словарь, хотя сама профессия древнее самого древнего славоря. Дизайнером был и первоначальный гончар и человек который смастерил копьё «по руке», не забыв при этом о главном, функциональном его назначении.
Что же такое дизайн? Смысловые корни термина «дизайн» восходят к латинскому «designare» определять, обозначать. Итальянское “designo” со времён ренессанса обозначало – проекты, рисунки а также основополагающие идеи. В Англии понятие «design» распространилось в 16 столетии. Существуют и отечественные трактования дизайна. Так, в словаре русского языка Ожёгова 1990 даётся такое определение: дизайн – это конструирование машин, вещей, интерьеров, основанное на принципах сочетания удобства, экономичности и красоты, куда же без неё любимой.
Этимология англоязычного понятия «дизайн» охватывает несколько смысловых рядов. Генетически первичным является ряд определений декоративного порядка : узор, орнамент, декор, украшение, убранство. Ко второму ряду относятся «проектно-графические» трактовки: рисунок, набросок, эскиз, собственно проект, чертёж, конструкция. Третий ряд, выходящий за рамки прямого проекта, - понятия «предвосхищающие»: план, предположение, замысел, намерение. И наконец четвёртый ряд определений – неожиданно «драматический»: затея, ухищрение, умысел и даже интрига.
Это широкий спектр англоязычных значений в сочетании с острой социальной направленностью традиционного дизайна при особом внимании к проблемам «человеческого фактора» оказался весьма соответствующим обозначению новых разновидностей проектной деятельности. Не в пример отечественным терминам, имевшим хождение с начала 1960х до 1980х гг. – «художественное конструирование» (официальное государственное) и «художественное проектирование» (в среде художников, искусствоведов и философов.), более конкретным и узким по значению.
В современном понимании объектами дизайн –проектирования являются не изделия а потребности , наличие спроса на выполнение какого либо вида деятельности, в частности осущиствление определённой утилитарной функции. По этому представляется приемлемым следующие определение изучаемого явления: Дизайн – специфическая сфера деятельности по разработке (проектированию) предметно пространственной среды (в целом и отдельных её компонентов), а также жизненных ситуаций с целью придания результатам проектирования высоких потребительских свойств, эстетических качеств, оптимизации и гармонизации их взаимодействия с человеком и обществом.
А теперь — буду обосновывать каждое слово. Чтобы не придрались. «Конструирование». Можно использовать «создание», «проектировка» и другие синонимы. То, что дизайн — это создание, думаю, объяснять не надо. Слово «вещь» здесь играет роль собирательного понятия. «Вещью» может быть и сайт, и молоток. Кому не нравится — может использовать слово «сущность», например. То есть дизайн — это создание сущностей.
Теперь надо описать характеристику создания сущностей, ибо не каждый процесс создания можно назвать дизайном. Прежде всего, у дизайна есть цель. Четкая, прагматичная цель: сделать так, чтобы вещь работала по назначению, то есть выделить существенные для работы признаки. Выделить их таким образом, чтобы они были очевидны и «принуждали» пользователя поступать именно так, а не иначе.
К примеру, молоток. Выделяем признак, необходимый для качественной работы: способность забивать гвозди. Замечательно. Значит то место, каким молоток бьет по гвоздю, должно быть твердым и ровным. Логично? Вполне. Берем железную болванку. Гвозди ей уже забивать можно, но все еще не совсем удобно. Добавляем рычаг — рукоятку. Так значительно лучше. Минимум выполнен. А вот все, что идет за минимум и направлено на дальнейшее повышение удобства пользования — как раз то самое, что отличает хороший дизайн от плохого. Можно, например, поместить на рукоятку в некоторых местах резиновые полоски, чтобы рука не соскальзывала. Это будет дизайном. Можно сделать бьющую часть молотка из золота. Это дизайном не будет. Не потому, что золота жалко, а потому что золото — металл мягкий и такой молоток долго не продержится.
Тем не менее, я написал «удобно, легко и приятно пользоваться». В понятие «приятности» входит в том числе и эстетическая красота. Согласитесь, просто приятней держать в руках молоток, металлические части которого, например, хромированы, а не просто являются черными железками. На такой молоток приятней смотреть и другим не стыдно показать.
«…формирование эстетических и функциональных качеств предметной среды» — это как раз и есть то, что я перечислил. Формирование функциональных качеств — это выделение значимых признаков, необходимых для работы предмета, (удобство и легкость пользования) а формирование эстетических качеств — это создание «приятности» пользования предметом.
«…и (практически) невозможно не по назначению» — здесь я имел в виду «понятный» дизайн. Кнопки должны вожделеть, чтобы на них нажали. Они должны всем своим видом показывать, что они — кнопки. (Смотри пример ниже). Нормальный текст должен всем говорить: «я — нормальный текст! меня нужно читать!», а ссылки — «мы — ссылки! видите, как мы выделяемся? это неспроста!». Сlick here, как говорится. Идеальный дизайн — это такой дизайн, при котором вещь, попав к вам в руки, «сама по себе» занимает удобное положение и вы уже «знаете» — чисто на уровне ощущений — что с этим предметом делать.
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 задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
- Дизайн архитектурной среды
- Дизайн барной стойки
- Дизайн в автомобилестроении
- Дизайн в обработке конструкционных материалов
- Дизайн в системе маркетинга. Условия, характеристики, особенности
- Дизайн в строительстве автомобиля
- Дизайн газетного номера
- Диеновый синтез
- Диетические лечебные свойства кисломолочных продуктов
- Диетический хлеб
- Диетическое и лечебное питание
- Диетическое питание
- Диетическое питание
- Диетическое питание
