Создание web-сайта

 

Рачеева А.Н. Зачетная книжка № 090428 группа 7191-з

СОДЕРЖАНИЕ

 

ВВЕДЕНИЕ……………………………………………………………………………….3

1. ПРАВИЛА ПОДБОРА ЦВЕТА ПРИ СОЗДАНИИ WEB-САЙТА……………..4
1. Теория цвета: основные принципы………………………..……………………..4

1.2 Подбор цветов с помощью цветового круга………………………..…………….6

2. СОЗДАНИЕ WEB-САЙТА ТУРИСТИЧЕСКОЙ КОМПАНИИ……………....10

ЗАКЛЮЧЕНИЕ…………………………………………………………………………16

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ И  ЛИТЕРАТУРЫ…………….17

 

ВВЕДЕНИЕ

 

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

Умение создавать Web-сайты становится актуальным навыком пользователя ЭВМ. Опубликовать сайт в Интернете просто и доступно, по сравнению с публикациями в «бумажных» изданиях. Для создания Web-страниц существует целый ряд инструментальных средств высокого уровня, которые называются HTML-редакторы. Существуют отдельные мощные системы разработки сайтов, например MS FrontPage, Macromedia Dreamweawer.

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

Визуальное представление  позволяет осуществлять наиболее быструю  передачу информации, обеспечивая также  быстрое её восприятие наблюдателем (читателем) как непосредственно, так  и с использованием принятых в  мировой культуре источников информации (книги, газеты, кино, телевидение, Интернет). Манипулируя цветом, контрастом и  символами, можно вызвать у наблюдателя  ощущение тепла либо холода, спокойствия  или напряженности, а вместе с  тем передать некоторые сведения. Важную роль в графической передаче информации играют ассоциации - определённые образы, всплывающие в сознании пользователя в моменты, когда он видит некоторые  символы или систему графических  объектов.

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

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

В работе рассмотрим : наиболее значимые аспекты при выборе, основные принципы сочетания, назначение цвета в web-дизайне и его символическое значение.

 

1. ПРАВИЛА ПОДБОРА ЦВЕТА ПРИ СОЗДАНИИ WEB-САЙТА

 

1.1 Теория цвета: основные принципы. Как подобрать гармоничную комбинацию цветов для web-сайта.

 

Можно без проблем  подобрать цветовую схему сайта, имея чувство вкуса. Есть мнение, что чувство цвета - нечто врожденное, и этому невозможно научиться. Но на самом деле, при наличии соответствующих инструментов, любой может научиться подбирать цветовые схемы, которые будут радовать глаз. Рассмотрим, как выбирать цвета, опираясь на базовые знания о цвете. Для того чтобы правильно объединить цвета при создании web-сайта, ознакомимся с основами теории цвета.

Основные  цвета :

Все мы знаем, что первичными (primary) цветами являются красный, желтый и синий.

Составные цвета :

Для того, чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий - фиолетовый/лиловый, а синий и желтый - зеленый. А чтобы получить третичные (tetriary) цвета, просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). На рис. 1 описаны все цвета во всей их красоте.

            Рис. 1 - Первичные, вторичные и третичные цвета

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

Рис. 2 - Цветовой круг

Цветовой круг изобрел  Исаак Ньютон, обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии).

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

Дополнительные цвета:

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

Аналогичные цвета:

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

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

 

1.2 Подбор цветов с помощью цветового круга

 

Самый простой способ подбора цветов в цветовом круге - представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами - потенциальные кандидаты  на использование. Этот тип подбора  цветов называется «триадной схемой». На рис. 3 показаны четыре различных триадных схемы, с которыми уже можно работать. Суть заключается в том, что эти цвета, работая вместе, образуют гармоничную комбинацию цветов.

 

Рис. 3 - Четыре возможных триады цветов

Но триадами не стоит  ограничиваться. Можно выбрать и  комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга - например, красный и зеленый. Они называются комплиментарными/дополняющими потому, что, будучи помещенными рядом, они делают друг друга ярче и живее, см. рис. 4.

Рис. 4 - Комплиментарные/дополняющие цвета

 

На этом этапе  мы уже можем приступить к более  сложным комбинациям. Например, можно  взять две пары комплиментарных  цветов, что называется "двойной комплемент" (double complement). Скажем, желтый и пурпурный/лиловый, синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый - пример такой комбинации. Также существует "расщепленный комплемент" (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

И наконец, тетрада: когда берутся четыре цвета, которые расположены прямо напротив друг друга. Т.е. выбираются 1 первичный, 1 вторичный и два третичных цвета. На рис. 5 показаны примеры вышеперечисленных схем.

Рис. 5 - Эти схемы вдохнут жизнь в любой Web-сайт

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

Рис. 6 - Сходственная схема очень напоминает монохроматическую

 

Теперь, несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. По-прежнему придется кое-что поменять в цветах (насыщенность или яркость), чтобы они "ужились". Приведенные здесь схемы - лишь отправная точка, а не вершина мастерства. Ведь, в конечном счете, решающим фактором будет читаемость текста на Web-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция "слои", и сравнить различные варианты схем, переключаясь между ними. Например, на рис.7, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Рис. 7 - Не всякая комбинация годится

 

 

3. СОЗДАНИЕ  WEB-САЙТА ТУРИСТИЧЕСКОЙ КОМПАНИИ ИНСТРУМЕНТАЛЬНЫМИ СРЕДСТВАМИ ПРОГРАММЫ FrontPage 2003

 

1. Создаем папку Сайт компании.
2. В папке Сайт компании создаем папку с именем Image.
3. Подготовили фон, картинки, рисунки, фотографии, подходящие под тематику сайта в формате *.gif или *.jpg, и скопировали их в папку Image.
4. Подготовили в графическом редакторе картинку с эмблемой компании и сохранили её в формате GIF с именем Emblem в папке Image.
5. Подготовили текст для Web – страниц и сохранили в текстовом формате *.txt в папке Сайт компании.
6. Запустили программу FrontPage (Пуск \ Программы \ Microsoft Office \Microsoft Office FrontPage).
7. Создали (Файл \ Создать) пустую страницу и сохранили (Файл \Сохранить как…) Web – страницу с именем index.htm в папке Сайт компании.
8. Настроили свойства страницы (Файл \Свойства…) (см. рис. 1.2) и нажали кнопку OK.

 

Рис.1.2 – Web-страница, свойства страницы

9. Набрали заголовок (ХОББИ-ТУРДВ), отформатировали текст: для изменения шрифта применяем команду Формат/Шрифт (Format/Font), выбраем полужирный (Script MT Bold), размер 36 пт (pt), цвет синий (color).
10. Перевели курсор на следующую строку (клавиша Enter) и вставили горизонтальную линию Вставка/Горизонтальная линия (Insert / Horizontal Line).
11. Перевели курсор на следующую строку и вставили таблицу (1×2) Таблица / Вставить таблицу (Table / Insert Table), указав количество Строк (Rows): 1, Столбцов (Columns): 2, Границы Размер (Border size): 0.
12. В левую ячейку таблицы вставляем картинку с эмблемой компании : Вставка / Рисунок / Из файла… (Insert / Image) и выбраем файл Emblem.gif, который находится в папке Image.
13. В правую ячейку таблицы – ввели текст с названиями Web – страниц (см. рис. 2.2).

 

Рисунок 2.2 – Титульная страница сайта

14. Ниже таблицы вставили картинку: Вставка / Рисунок / Из файла… (Insert / Image) из папки Image. Вставили фон: Формат / Фон (Format / Background), выставить флажок Фоновый рисунок (Background Image), нажать кнопку Обзор (Browse) и выбрать файл Fon.gif, который находится в папке Image (см. рис. 3.2).

 

Рисунок 3.2 – Титульная страница сайта с картинкой и фоном

15. Вставить бегущую строку на титульной странице сайта Вставка / Веб - компонент…/ Динамические эффекты / Бегущая строка (Insert / Active Elements / Marquee) (см. рис. 4.2), нажать кнопку Готово и написать Текст (Text): Туристическая компания ХОББИ-ТУРДВ.

 

Рисунок 4.2 – Окно вставки бегущей строки

 

16. Сохранили титульную страницу Файл / Сохранить (File / Save).
17. Создаем Web – страницу История компании и сохраняем под именем Istoria.htm в папке Сайт компании.
18. Выполняем пункты 8 - 14 данного алгоритма.
19. Сделли обтекание рисунка, для чего вызваем контекстно-зависимое меню щелчком правой кнопки мыши на картинке и выбираем команду Свойства рисунка… / Обтекание / слева (Image Properties / Appearance / Alignment / left) (см. рис. 5.2).

 

 

Рисунок 5.2 – Окно «Свойства рисунка»

20. Вставили текст для страницы, скопировав его из подготовленного текстового файла в папке Сайт компании.
21. Выполняем пункт 15 данного алгоритма.
22. Сохранили страницу История компании : Файл / Сохранить (File / Save) (см. рис. 6.2).