Разработка веб-сайта

Автор работы: Пользователь скрыл имя, 22 Марта 2013 в 18:25, курсовая работа

Описание работы

Целью курсовой работы является проектирование и разработка web-сайта на тему: «Дизайн фирменного стиля». В соответствии с поставленной целью решаются следующие задачи:
• определить тематику сайта в целом
• раскрыть понятие «фирменный стиль»
• выявить основные элементы фирменного стиля, его функции и задачи
• определить цель сайта

Содержание работы

1. Введение
2. Теоретическая часть.
Глава 1. Определение понятия фирменного стиля и его элементы
1.1 Понятие фирменного стиля
1.2 Элементы фирменного стиля
3. Практическая часть.
Глава 2. Планирование и реализация web-сайта
2.1 Планирование web-сайта
2.2 Реализация сайта
4. Заключение
5. Список литературы
6. Приложения

Файлы: 1 файл

курсовик.docx

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

Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если нам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.

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

рис. 6

 

 

Код главной  страницы следующий:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Дизайн-студия Light</title>

<style type="text/css">

body {

color: #FFF;

background-color: #000;

text-align: center;

margin: 0px;

padding: 0px;

}

#wrapper {

color: #FFF;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

width: 960px;

background-color: #000;

height: auto;

margin-bottom: 20px;

}

#header {

margin-top: 0px;

background-color: #6FC;

height: 100px;

width: 960px;

border: medium outset #0C9;

color: #FF0;

border-radius: 20px;

background-image: url(%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8/77129_oboi-dlya-rabochego-.jpg);

padding-top: 0px;

font-weight: bold;

}

#menu {

margin-top: 12px;

padding-top: 0px;

background-color: #6FF;

color: #000;

text-align: center;

margin-bottom: 12px;

border: medium outset #6FC;

height: 40px;

width: 960px;

border-radius: 20px;

font-weight: normal;

font-style: normal;

font-family: Verdana, Arial, sans-serif;

background-position: center bottom;

}

#rasdel {

color: #000;

background-color: #CFF;

height: 30px;

width: 960px;

border: thin outset #6FC;

border-radius: 20px;

}

#content {

margin-top: 0px;

padding-top: 0px;

width: 960px;

height: 400px;

background-color: #CFF;

color: #000;

border: medium outset #9FF;

border-radius: 20px;

background-image: none;

}

#graf {

background-color: #CFF;

padding: 0px;

height: 200px;

width: 960px;

margin-top: 12px;

margin-bottom: 12px;

color: #000;

border: medium inset #9FF;

border-radius: 20px;

background-image: url(%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8/Karandashi.jpg);

background-position: left center;

}

#banner {

background-color: #CFF;

height: 100px;

width: 960px;

border: medium outset #9FF;

border-radius: 20px;

color: #000;

background-image: none;

}

#copyrite {

margin-top: 12px;

padding-top: 0px;

clear: both;

background-color: #6FC;

height: 30px;

width: 960px;

border: medium inset #0C9;

color: #000;

border-radius: 20px;

background-image: url(%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8/77129_oboi-dlya-rabochego-.jpg);

background-position: left top;

}

</style>

<link href="style.css" rel="stylesheet" type="text/css">

<style type="text/css">

body,td,th {

font-family: Verdana, Arial, sans-serif;

}

</style>

</head>

<body>

<div id="wrapper">

  <div id="header">

    <blockquote><img src="Картинки/logo.png" width="212" height="81" align="left" longdesc="Картинки/logo.png">

    </blockquote>

  </div>

  <div id="menu"><strong><a href="glavnaya.html">Главная</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="О компании/o kompanii.html">О компании</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Услуги/yslygi.html">Услуги</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Контакты/kontakti.html">Контакты</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="Статьи/statyi.html">Статьи</a></strong></div>

  <div id="content">

    <div id="rasdel">Здравствуйте!  Мы рады видеть Вас на сайте студии Light!</div>

    <p>Основными направлениями нашей деятельности являются: создание фирменного стиля,  разработка логотипов и полиграфический дизайн.<br>

    Каждый  заказчик для нас уникален. Для  каждого мы стараемся предложить  лучшее и  сделать все на  самом высоком уровне.</p>

    <p>Грамотно и своевременно  выполнять свою работу - это и есть профессионализм. В студии работают  обаятельные и квалифицированные специалисты, которые предложат Вам интересные  идеи, подскажут грамотные решения. Вы - уникальны! Индивидуальны! И именно  поэтому все Ваши пожелания отразятся в работе над проектами.<br>

      <br>

      У всех сотрудников студии  художественное образование и  хороший вкус.&nbsp;<br>

      Идеи для логотипа, сайта или  иного творческого решения тщательно   прорабатываются нашими сотрудниками.&nbsp;<br>

      Вы можете быть уверены, что  для Вас будет разработан оригинальный, эксклюзивный  дизайн.<br>

  <br>

      Итак, Вам нужен запоминающийся  стиль, яркий логотип или привлекающие  внимание  рекламные материалы?  Мы создадим необходимый имидж  для Вашей компании, о  котором можно только мечтать!<br>

  <br>

  <strong>Обращайтесь в дизайн-студию</strong><strong> Light</strong><strong> Мы всегда Вам рады!</strong></p>

  </div>

  <div id="graf"></div>

  <div id="banner"></div>

  <div id="copyrite">&copy; 2012</div>

</div>

</body>

</html>

 

 

 

 

 

 

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

Так выглядит главная страница в браузере:

рис. 7

А так  выглядит одна из внутренних страниц  сайта «Контакты»:

 

рис. 8

 

для сайта  я разработала статический баннер в программе Adobe Photoshop CS5:

рис. 9

 

 

рис. 10

Разработка  логотипа представлена в приложении 2.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Заключение

На основании  вышеизложенного главная цель курсовой работы была достигнута. Я разработала web-сайт на тему: «Дизайн фирменного стиля».

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

Фирменный стиль (англ. corporate identity advertising) ─ комплекс комбинированных элементов, служащий для идентификации, создания определенного управляемого имиджа, системы корпоративной культуры. Он может включать в себя товарный знак, шрифт, фирменную цветовую гамму, слоган. Или иначе фирменный стиль представляет собой набор цветовых, графических, словесных, типографических, дизайнерских элементов (констант), обеспечивающих визуальное и смысловое единство восприятия товаров (услуг).

Элементами  фирменного стиля являются товарный знак, логотип, фирменный блок, слоган, фирменный цвет, фирменный комплект шрифтов, корпоративный герой, постоянный коммуникант (лицо фирмы), фирменная одежда и другие фирменные константы.

Во второй главе  курсовой работы я перешла  непосредственно к планированию и разработке сайта.

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

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

При выполнении курсовой работы я закрепила теоретический  материал по дисциплине «Web-графика и web-дизайн», и отработала навыки на практике создания сайта.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Список литературы

 

  1. Алексеев А.П. Введение в Web-дизайн: учебное пособие. – М.: СОЛОН-ПРЕСС, 2008
  2. Барысов Р. Постройте профессиональный сайт сами. – СПб., 2009
  3. Печников В.Н. Сомоучитель Web-страниц и Wrb-сайтов. – М.: Триумф, 2006
  4. Печников В.Н. Создание Web-сайтов без посторонней помощи. – М.: Триумф, 2006
  5. Панфилов К. По ту сторону веб-страницы. – СПб.: ДМК Пресс, 2008
  6. Кроудер Д. Создание web-сайта для чайников: 3-е издание. – М.: Диалектика, 2009
  7. Вильямсон Х. Универсальный Dynamic HTML / Библиотека программиста – СПб.: ПИТЕР, 2001
  8. Гольман И.А. Рекламная деятельность: Планирование. Технологии. Организация. – М.: Гелла-принт, 2002
  9. Гольман И.А., Добробабенко Н.С. Практика рекламы. - Новосибирск: СП "Интербук", 1991
  10. Добробабенко Н.С. «Фирменный стиль: принципы разработки».- М: Инфра-М., 2003»
  11. Дронов В. А. Самоучитель Macromedia Dreamweaver 8. — СПб.: БХВ-Петербург, 2006
  12. Ромат Е.В. «Реклама. - СПб.: Питер, 2001. – с. 122;
  13. mdesign.ru/publications/design/4287ad40e78e3?start= Все о фирменном стиле. Статьи;
  14. www.sreda.ws/uchebnik_dreamweaver.htm Глава 6. Создание сайта в Dreamweaver;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ПРИЛОЖЕНИЯ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 1

 

Цветовая гамма сайта.

 

Основные  цвета: черный, белый;

Дополнительные:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 2

 

Разработка  логотипа в программе CorelDRAW X5.

 

 

 

 


Информация о работе Разработка веб-сайта