Разработка сайта-визитки для фирмы «Кондиционер-сити»

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Тверской Государственный Технический Университет

Кафедра Информационные системы

Курсовая работа

По дисциплине: «Веб-дизайн и веб-мастеринг»

На тему: «Разработка сайта-визитки для фирмы «Кондиционер-сити»

Выполнил: студент 4 курса

Группы ИСТ

Мулин Н.А.

Тверь, 2013

1. Введение

2. Программные средства и технологии, используемые при разработке сайта

2.1 Программные средства

2.2 Технологии

3. Создание сайта-визитки «Кондиционер-сити»

3.1 Основная структура сайта и размещение исходных файлов

3.2 Создание графических элементов и рисунков

3.3 Создание FLASH-анимации

3.4 Создание страниц сайта

4. Размещение сайта в сети Internet

Заключение

Использованные материалы

1.Введение

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

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

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

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

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

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

Данная курсовая работа будет посвящена разработке сайта-визитки компании «Кондиционер-сити», занимающейся реализацией кондиционеров и сплит-систем таких крупных и известных фирм, как Daikin, Hitachi, LG, Panasonic, Samsung, Toshiba.

С целью достижения наименьшей стоимости сайта при адекватном качестве и внешней красоте сайта, при его разработке будут использованы основные, наиболее распространенные и наименее затратные веб-технологии, такие как HTML, CSS, JavaScript, а также небольшая FLASH-анимация с целью привлечения интереса потенциальных клиентов компании. Основная часть сайта будет разработана в приложении FrontPage. FLASH-анимация будет создана с помощью программы Macromedia Flash MX 2004. В качестве редактора визуальных элементов будет использована программа Paint.Net (бесплатный аналог распространенной программы Photoshop). Сайт будет разрабатываться для адекватной работы в браузере Opera, а также проверен на адекватность отображения в таких браузерах, как Internet Explorer 6,7, Google Chrome, FireFox.

2. Программные средства и технологии, используемые при разработке сайта

2.1 Программные средства

FrontPage Программа FrontPage выпущена компанией Microsoft и выполнена в едином стиле продуктов, входящих в пакет Microsoft Office, поэтому внешний вид программы практически не отличается от текстового процессора Word .

В верхней части окна располагается строка меню и две панели инструментов: Стандартная и Форматирование. Включать или отключать отображение панелей инструментов позволяет меню Вид.

В левой части находится Панель представлений, при помощи которой можно переключать режимы документа.

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

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

Отображение панелей инструментов.

Для управления панелями инструментов во FrontPage можно воспользоваться теми же способами, как в Microsoft Word. А именно:

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

FrontPage, как и другие приложения Microsoft Office, позволяет добавлять, удалять, менять местами пункты меню и кнопки на панелях инструментов. Также существует возможность создавать полностью свои панели.

Для этого надо:

* в меню Сервис выбрать пункт Настройка…

или

* в меню Вид выбрать пункт Панели инструментов, а в появившемся каскадном меню — пункт Настройка…

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

Macromedia Flash MX. Эта программа была разработана известной компанией Macromedia (которую впоследствии купила не мене известная компания Adobe) специально для разработки FLASH-анимаций и FLASH-фильмов, которые могут использоваться как для веб-сайтов, так и для презентаций, создания фильмов и мультфильмов и т. д.

В данной курсовой работе будет использована русифицированная версия Macromedia Flash MX Pro 2004 v7.0.1. Главное окно программы отображено на рисунке ниже.

Как видно на картинке, Macromedia Flash MX поддерживает несколько вариантов FLASH-файлов, а именно Flash документ (стандартный Flash), Flash Slide Presentation (презентация), Flash Form Application (flash-приложение), Action Script («Активный скрипт»), Action Script Communication File, Flash JavaScript File и Flash-проект.

В контексте данной курсовой работы нас интересует разработка FLASH-анимации (будет использован стандартный Flash-документ) для сайта-визитки компании «Кондиционер-сити». Забегая вперед, скажу, что созданная нами анимация будет носить информативный характер и будет простой по содержанию.

Paint.Net. Приложение Paint.Net — расширенная версия стандартной программы Paint, входящей в комплект операционной системы Windows. Paint.Net использует библиотеки Net. Framework, что позволяет ему приблизиться по своей функциональности к такому гиганту как Adobe Photoshop.

В данной курсовой работе будет использована версия Paint.Net v3.22. Несмотря на то, что данная версия не русифицирована, разобраться в программе можно на интуитивном уровне, либо «методом тыка». Программа проста в управлении и не требует особых навыков работы. Главное окно Paint.Net изображено на рисунке ниже.

Данная программа поддерживает основные форматы графических файлов (bmp, jpg, tiff, gif, pdn, tga, dds), имеет множество графических эффектов, опций и настроек, что делает ее незаменимой в создании графических элементов интерфейса будущего сайта.

2.2 Технологии

HTML. Основной технологией, используемой при разработке большинства сайтов является язык гипертекстовой разметки HTML (HyperText Markup Language). Большинство элементов HTML являются контейнерами для текста или используются для форматирования текста, при этом есть множество элементов, отвечающих за вставку графических элементов и flash-анимаций. HTML — сравнительно несложный язык, имеющий огромное количество элементов, причем некоторые из них используются очень редко.

Язык гипертекстовой разметки HTML был создан Тимом Бернс-Ли в 1990 году для использования в им же разработанном браузере гипертекста. Но популярной стала вторая версия языка в 1994, когда появился и начал распространяться по всему миру сервис интернета World Wide Web. Тогда же появился ряд браузеров, поддерживающих этот язык (Mosaic, Netscape, Navigator).

В 1996 году популярность получила версия HTML 3.2. Она получилась достаточно удачной, и на ее основе можно создавать неплохие веб-страницы и в наше время.

В 1997 году появился HTML 4 (Dynamic HTML), который используется до сих пор. Создаются лишь незначительные модификации этого языка.

JavaScript. JavaScript — язык для написания так называемых «сценариев» — программных кодов, включаемых в текст веб-страницы в виде исходного текста и выполняемых при просмотре страницы.

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

Существуют серверная и клиентская реализации языка JavaScript. Серверная реализация позволяет манипулировать объектами на сервере — обращаться к базам данных или управлять файлами. Клиентская реализация, как следует из названия, обеспечивает работу на компьютере клиента. Подобные программы могут иметь самое разное назначение. Они могут быть самодостаточными (например, игры) или могут расширять возможности HTML.

В данной курсовой работе будет использована клиентская реализация языка JavaScript с целью расширения возможностей HTML.

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

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

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

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

Также недостатком технологии является высокие требования к ресурсам компьютера конечного пользователя.

3. Создание сайта-визитки «Кондиционер-сити»

3.1 Основная структура сайта и размещение исходных файлов

Как уже говорилось ранее, целью данной курсовой работы является создание сайта-визитки для компании «Кондиционер-сити», занимающейся реализацией кондиционеров и сплит-систем известных марок Daikin, Hitachi, LG, Panasonic, Samsung, Toshiba.

Наш сайт-визитка будет содержать всего 7 основных разделов:

— «Главная» — вступительные слова;

— «История» — история появления и развития кондиционеров и сплит-систем;

— «Типы» — типы кондиционеров;

— «Новинки» — новинки на рынке кондиционеров;

— «Марки» — описание марок кондиционеров Daikin, Hitachi, LG, Panasonic, Samsung, Toshiba;

— «Прайс-листы» — прайс-листы на реализуемую компанией «Кондиционер-сити» продукцию;

— «Контакты» — адрес и телефон компании, схема расположения офиса, форма связи с менеджерами компании.

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

Также на всех страницах сайта будет использована flash-анимация в шапке сайта со слоганом компании «Кондиционер-сити»: «Кондиционер-сити — погода зависит только от Вас».

На странице «Новинки» будет использован эффект открытия нового окна определенного размера при помощи JavaScript. Этот эффект нам понадобиться для реализации просмотра пользователем общих характеристик новой модели кондиционера.

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

На странице «Контакты» будет использована форма отправки сообщения менеджерам компании прямо с сайта. Форма отправки будет создана с помощью специальных элементов языка HTML.

Исходные файлы страниц, каскадных стилей, скриптов, рисунки и flash-анимация будут размещены следующим образом.

Основные страницы сайта index. htm («Главная»), history. htm («История»), type. htm («Типы»), new. htm («Новинки»), sign. htm («Марки»), price. htm («Прайс-листы») и cont. htm («Контакты») будут размещены в главной директории сайта.

В папке CSS будет размещен файл таблицы каскадных стилей style.css.

В папке Flash будет размещен файл flash-анимации kond.swf.

В папке frame_html будут размещены html-страницы, необходимые для вставки во фрейм в разделе «Марки». Всего их 6 штук: daikin_frame.htm (фирма «Daikin»), hitachi_frame.htm (фирма «Hitachi»), lg_frame.htm (фирма «LG»), Panasonic_frame.htm (фирма «Panasonic»), Samsung_frame.htm (фирма «Samsung») и Toshiba_frame.htm (фирма «Toshiba»).

В папке har_htm будут размещены Html-страницы с характеристиками новинок кондиционеров, соответственно на каждую новинку будет отведена своя страница. Всего их будет 12 штук — по 2 новинки на каждую марку кондиционера.

В папке icon будут размещены иконки файлов для страницы «Прайс-листы», определяющие соответственно Word-файл, Excel-файл и RAR-архив.

В папке img будут размещены основные рисунки и графические файлы, используемые в интерфейсе и в контексте материала сайта.

В папке logo будут размещены логотипы фирм. Формат логотипов GIF позволяет использовать эффект прозрачности для отдельных частей рисунка. Логотипы из этой папки будут использованы на странице «Прайс-листы».

В папке new_kond_img будут размещены изображения новинок кондиционеров в формате JPG для страницы «Новинки».

В папке price будут размещены файлы с прайс-листами для каждой фирмы в форматах Word, Excel и Rar. Загрузка этих файлов будет производится соответственно со страницы «Прайс-листы».

И, наконец, в папке slide_ будет размещено наше слайд-шоу. Само слайд-шоу будет написано на языке JavaScript и помещено в страницу slide.htm. Это необходимо для того, чтобы в том же документе использовать контейнер div для определения рисунков, входящих в слайд-шоу. Сами рисунки будут размещены в той же папке.

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

3.2 Создание графических элементов и рисунков

Как уже говорилось ранее, все графические файлы будут созданы или отредактированы в программе Paint.Net. Также нам потребуются программы IconGrabber — для получения файлов-иконок из исполняемых файлов *.exe и IconoMaker — для редактирования полученных иконок. В разрабатываемом сайте иконки будут использованы лишь на странице «Прайс-листы». Это иконки для Word-, Excelи Rar-файлов.

Для создания нового файла в Paint.Net необходимо выбрать пункт меню File -> New. Далее ввести размеры будущего рисунка и нажать кнопку OK. Появится чистый лист заданного размера, на котором можно создавать рисунок с помощью блоков Tools и Colors, отображенных на рисунке выше.

При разработке данного сайта необходимо сделать графический файл для пунктов меню навигации по сайту (файл but. gif в папке img), 4 рисунка сглаженных углов (right.gif, left. gif, downright. gif и downleft. gif в папке img), рисунок с изображением стрелки для страницы «Типы» (up.gif) и рисунок для линии (line.gif), отделяющей основную часть сайта от его шапки и от нижней части — так называемого подвала или «footer». Эта разделяющая линия за счет использования градиента (изменения оттенка цвета в разных частях рисунка) будет придавать красочность всему дизайну сайта.

Программа IconGrabber представляет из себя форму, в которую будут выводится все найденные иконки по запросу пользователя. Пользователю лишь необходимо выбрать директорию, в которой будет проведен поиск файлов, содержащих иконки (*.ico, *.exe, *.dll) и нажать кнопку с изображением руки («Scan File»). Все найденные иконки будут выведены в виде изображений в специальную форму. Для их сохранения необходимо нажать кнопку с изображением листка и стрелки («Copy Icons»). Вид программы представлен на рисунке ниже.

С помощью программы IconGrabber мы сможем вытащить иконки из файлов Winword. exe, Excel. exe и WinRAR.exe.

Программа IconoMaker представляет из себя графический редактор, похожий на Paint, но она предназначена специально для создания и редактирования файлов типа *.ico, т. е. иконок.

С помощью программы IconoMaker мы отредактируем полученные иконки, добавив в них цветности и контрастности.

Вид программы представлен на рисунке ниже.

3.3 Создание FLASH-анимации

Для создания Flash-анимации используем специализированную программу Macromedia Flash MX 2004.

Окно программы имеет следующий вид:

Основной принцип создания flash-анимации — создание отдельных кадров и сборка их в одну анимацию. В Macromedia Flash MX имеет множество инструментов, настроек и параметров для создания и редактирования Flash. Программа работает с файлами формата *.fla. Есть возможность сохранения полученных анимаций или роликов в форматы *.swf (используется для вставки в код сайта) и *.exe (полноценное flash-приложение).

Наша flash-анимация состоит из фона и изменяющегося со временем текста. Сам текст представляет из себя слоган компании «Кондиционер-сити»: «Кондиционер-сити — Погода зависит только от Вас». Анимация создана за счет добавления в каждый новый кадр новой буквы либо нового слова. Фон анимации с течением времени не меняется.

Промежуточный этап анимации показан на рисунке ниже:

Для сохранения flash-анимации в формат *.swf необходимо выбрать пункт меню «Файл -> Экспорт -> Экспорт фильма.». В появившемся окне ввести желаемое имя файла и нажать кнопку «Сохранить»:

3.4 Создание страниц сайта

сайт программный файл графический

Создание новой Web-страницы.

Если вы запустили FrontPage, значит, новая Web-страница у вас уже создана (при запуске FrontPage сразу открывается новая пустая Web-страница, готовая для размещения текста и любых других элементов).

Создать новую Web-страницу можно и другими способами:

с помощью кнопки Новая страница на Стандартной панели инструментов.

· меню Файл выбрать подменю Создать, а затем — Страница или Web-узел;

· с помощью комбинаций Ctrl+N;

· с помощью контекстного меню (работает во всех режимах, кроме режимов Задачи и Отчеты) — для этого внутри Списка папок данного Web) надо щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать пункт Создать Страница.

Создание станиц при помощи мастера и шаблонов.

Как уже говорилось выше, если для создания новой страницы вы воспользовались меню Файл Создать Страница или Web-узел, то FrontPage предложит вам воспользоваться шаблоном для создания новой страницы.

Для этого он откроет диалоговое окно, внешний вид которого приведен ниже:

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

Создание FrontPage Web.

Microsoft FrontPage Web — это набор Web-страниц, файлов с изображениями и других компонентов, которые можно рассматривать как единое целое.

Если делать сайт во FrontPage, то для его хранения удобней всего использовать FrontPage Web.

* самый главный плюс — это возможность переименовывать файлы, входящие в состав FrontPage Web.

Представьте себе, что перед публикацией вашего сайта в Интернет вы вдруг заметили, что пара файлов у вас названа русскими именами. «О, боже!» — думаете вы, — «Теперь по всем файлам придется лазить и ссылки ручками менять!» Вот тут-то и поможет FrontPage Web — вы можете покойно переименовать файлы, а FrontPage самостоятельно пройдется по всем другим файлам, входящим в FrontPage Web и переименует все ссылки на исправленный вами файл. Здорово!

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

Итак, чтобы создать новый FrontPage Web нажмите на стрелочку, расположенную слева от кнопки Новая страница на панели инструментов и в появившемся выпадающем меню выберите пункт Веб-узел…

Открытие Web-страниц.

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

Открыть уже существующую Web-страницу можно в любом из существующих режимов.

Из режима Page Views есть четыре способа открыть существующую страницу:

1 способ Если вы работаете с FrontPage Web, то просто выберите нужный файл в Списке папок и дважды щелкните по нему мышью.

2 способ В меню Файл выберите пункт Последние файлы. Из появившегося каскадного меню выберите нужный файл.

3 способ С помощью диалогового окна Открытие файла: Файл Открыть.

Предварительный просмотр.

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

* воспользоваться кнопочкой на панели инструментов

* или в меню Файл выбрать пункт Предварительный просмотр в обозревателе.

Если вы воспользовались первым способом, то содержимое вашей страницы отобразиться во встроенном браузере FrontPage.

Если же вы воспользовались вторым способами, то FrontPage выведет диалоговое окно Просмотр в обозревателе…

Здесь можно:

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

· Добавить любой другой обозреватель, для чего необходимо воспользоваться кнопкой Добавить.

· Редактировать или удалить установленные обозреватели.

· Установить размер экрана, на котором будет просматриваться ваша Web-страничка

Сохранение Web-страниц.

Чтобы сохранить файл, в меню Файл выберите пункт Сохранить. Если страница еще ни разу не сохранялась, FrontPage откроет диалоговое окно Сохранить как…

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

Удаление Web-страниц.

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

Существует три способа удаления Web-страницы.

1 способ В панели Список папок выделите файл, который необходимо удалить и нажмите кнопку Delete на клавиатуре.

2 способ В панели Список папок щелкните правой кнопкой мыши по файлу (или значку файла), который необходимо удалить и в появившемся контекстном меню выберите пункт Удалить.

3 способ В панели Список папок выделите файл, который необходимо удалить и затем выберите пункт Удалить в меню Правка.

Работа с текстом.

На первый взгляд, ввод текста во FrontPage ничем не отличается от ввода текста в любом текстовом редакторе (например, в Microsoft Word).

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

Набор прописных букв, редактирование текста (удаление символов, вставка текста и т. д.) производится точно также, как в Microsoft Word.

Есть только одно небольшое НО: при нажатии клавиши Enter во FrontPage осуществляется принудительный переход курсора на новую строку, при этом до и после абзаца ставятся фиксированные абзацные отступы.

Если вам не надо создавать абзацы, то для перехода на новую строку лучше всего использовать комбинацию клавиш Shift +Enter.

Работа с изображениями.

Графически форматы в Web.

Все компьютерные изображения, все форматы для их хранения (а, следовательно, и все программы для их обработки) делятся на два больших класса — векторные и растровые.

Векторное изображение состоит из объектов — геометрических форм, составленных из прямых, дуг, окружностей и кривых Безье. Достоинств у векторной графики немало. С точки зрения дизайнера, самое главное ее достоинство состоит в том, что векторную графику можно «вертеть» как угодно, не боясь «протереть дырку» в изображении или потерять часть информации. Другое достоинство — небольшой объем файлов (в сравнении с растровыми изображениями) и независимость от разрешения устройств вывода (будь то принтер или экран монитора). Эти факторы сделали векторную графику вероятным кандидатом для использования в Internet. Правда стоит оговориться, что на сегодняшний момент векторная графика встречается не так уж часто, как хотелось бы.

Тем не менее, среди реально применяемых векторных форматов хотелось бы отметить формат Shockwave Flash фирмы Macromedia. Для просмотра этого формата в браузере нужен подключаемый модуль (plug-in), бесплатно распространяемый фирмой Macromedia. На сегодняшний день существуют как сайты целиком и полностью созданные по этой технологии, так и сайты, используемые Flash-формат лишь частично.

Если мы теперь вернемся к браузерам, то можно сказать следующее, что большинство браузеров без проблем могут отображать графические файлы четырех форматов (*.gif, *.jpg, *.png, *.bmp), использовать из которых на сегодняшний момент лучше всего два — *.gif и *.jpg. Да и то после предварительной оптимизации.

Вставка изображений на Web-страницу.

Вставлять изображение на вашу Web-страницу можно несколькими способами:

1. Перетащить изображение из Windows Explorer (то есть прямо из проводника).

2. Перетащить изображение из Internet Explorer.

3. Перетащить файл с изображением с панели Список папок, прямо на страницу.

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

5. С помощью кнопки Добавить рисунок из файла на панели инструментов Стандартная.

6. С помощью меню Вставка Рисунок.

Рассмотрим эти способы более подробно:

Способ 1

Для того чтобы перетащить изображение из Windows Explorer (то есть прямо из проводника) надо:

* во FrontPage открыть страницу, на которую вы хотите добавить изображение;

* открыть окно проводника;

* в окне проводника выделить файл с картинкой, которую вы хотите вставить на свою страницу;

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

Способ 2

Для того чтобы перетащить изображение из Internet Explorer надо:

* во FrontPage открыть страницу, на которую вы хотите добавить изображение;

* в браузере откройте то изображение, которое вы хотите поместить на своей Web-странице браузера название файла должно оканчиваться на jpg, jpeg, gif);

* левой клавишей мыши перетащите выделенную картинку на свою Web-страницу;

* выбранная картинка вставиться в то место, где на странице находился курсор вставки.

Способ 3

Для того чтобы перетащить файл с изображением с панели Список папок, прямо на страницу надо:

* во FrontPage открыть страницу, на которую вы хотите добавить изображение;

* выбрать необходимый файл с картинкой на панели Список папок;

* левой клавишей мыши перетащите выделенную картинку на свою Web-страничку;

* выбранная картинка вставиться в то место, где на странице находился курсор вставки.

Способ 4

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

* в том приложении, из которого вы хотите скопировать картинку, выделить изображение и при помощи клавиш Ctrl + C скопировать рисунок в буфер обмена;

* на своей Web-странице вставить это изображение из буфера обмена при помощи клавиш Ctrl + V

Способ 5

Если для вставки изображения на свою Web-страницу вы решили воспользоваться кнопкой Добавить изображение из файла на панели инструментов Стандартная, то FrontPage откроет диалоговое окно Рисунок.

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

Способ 6

Если для вставки изображения на свою Web-страницу вы решили воспользоваться меню Вставка Рисунок, то FrontPage предложит сделать вам дальнейший выбор:

· Картинки… — выбор того пункта меню предоставляет вам возможность воспользоваться готовой библиотекой картинок.

· Из файла… — выбор данного пункта меню предоставляет вам возможность самостоятельно указать местонахождение файла с картинкой, который вы хотите добавить на свою Web-страницу (использование этого пункта приведет к открытию диалогового окна Рисунок, работа с которым была описана выше).

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

Добавление файлов мультимедиа.

Помимо простой графики, как — изображения в форматах *.gif, *.jpg, *.png и т. д. FrontPage позволяет размещать на ваших Web-страницах файлы мультимедиа. К ним относятся: видеоклипы, звуки…

Для вставки видеоклипа надо в меню Вставка выбрать пункт Рисунок, а затем Видеозапись…

Откроется диалоговое окно Видео, в нем будут отображаться видеоклипы в формате *.avi, *.asf, *.ram, *.ra.

Добавить звук на Web-страницу можно на вкладке Общие диалогового окна Свойства страницы.

Работа с таблицами.

Таблица — одно из наиболее мощных инструментов используемых при создании сайтов.

Изначально таблицы применялись только для представления структурированных данных. Однако постепенно они превратились в мощное универсальное средство для компоновки Web-страниц.

Создание таблиц

Самый простой способ создания таблицы — использовать кнопку Добавить таблицу, расположенную на панели инструментов Стандартная.

Еще один способ — при помощи пункта меню Таблица Вставить Таблица.

А так же таблицу можно нарисовать и вставить при помощи буфера обмена.

Ввод данных и навигация по таблице.

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

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

Однако более удобно для перемещения между ячейками использовать комбинации клавиш:

Создание и применение форм.

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

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

Такая программа может быть расположена на сервере; она может находиться в вашем Web-сайте в виде отдельного файла, а может быть просто прописана в коде html на вашей Web-страничке.

Именно она определяет — что же произойдет с той информацией, которую ввел пользователь:

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

* информация может быть переправлена по электронной почте (это часто используют для получения информации о пользователе в анкетах различного рода);

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

В отношении форм существует несколько основных правил:

1. Каждая форма занимает определенный участок Web-страницы. На одной Web-страничке может быть расположена одна или несколько форм.

2. Внутри каждой формы должен размещаться, по крайней мере, один из элементов форм (хотя, как правило, их несколько).

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

4. Один из элементов формы (им может быть обычная кнопка или любой рисунок) должен выполнять функцию кнопки Отправить.

Создание форм во FrontPage.

Чтобы добавить форму на Web-страницу, надо:

· Установить курсор в то место, где вы хотите вставить форму.

· В меню Вставка выбрать пункт Форма, в открывшемся меню снова выбрать пунктФорма. Форма будет помещена на вашу Web-страницу — появиться область, помеченная пунктирной рамочкой, с двумя кнопками: Отправить и Сброс.

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

После того, как форма создана, остается только наполнить ее содержанием — элементами форм, текстом, изображениями, таблицами… (при этом размеры формы будут меняться автоматически).

Добавлять содержание форм можно обычным образом. Например, текст можно набирать, а можно вставлять из буфера обмена… Все действия с добавленными объектами аналогичны. Однако создание формы — это только начало работы. После ее создания необходимо настроить свойства, как самой формы, так и ее элементов.

Настройка свойств формы.

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

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

Чтобы открыть окно свойств формы, надо:

* в меню Вставка выбрать пункт Форма, а затем —

или

* вызвать контекстное меню к форме и в открывшемся контекстном меню выбрать пункт Свойства формы.

В результате откроется диалоговое окно Свойства формы.

В поле Сохранение результатов необходимо указать, что надо будет сделать с данными, введенными в форму. Вы можете выбрать следующие варианты:

o Отправка Имя файла — данные будут помещены в указанный файл на Web-сервере. Этот файл может быть Web-страницей, которая со временем будет становиться все длиннее и длиннее, или файлом данных, который потом можно будет обработать в Excel, Access или любой другой программой;

o Отправка Адрес почты — в этом случае каждый раз при нажатии посетителем Web-странички кнопки Отправить на форме будет генерироваться электронное сообщение, которое будет отправляться по указанному вами адресу. В этом сообщении будут содержаться все данные, которые были введены пользователем на Web-страничке.

o В базе данных — в этом случае данные формы будут отправлены в базу данных. База должна находиться на Web-сервере (или быть доступной для него).

2. В поле Свойства формы необходимо указать имя формы

Режимы просмотра во FrontPage.

FrontPage предлагает шесть различных режимов для просмотра содержимого Web-сайта:

* Страница,

* Папки,

* Отчеты,

* Переходы,

* Гиперссылки,

* Задачи.

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

Страница

В этом режиме осуществляется создание и редактирование Web-страниц. Здесь можно создавать пустые Web-страницы и страницы, базирующиеся на шаблонах, назначать страницам темы (набор стилей представления страницы на экране). В этом режимы можно добавлять и форматировать текст, оформлять страницы с использованием графических и видеоизображений (поддерживается преобразование ряда графических форматов в форматы *.gif, *.jpg и *.png), добавлять к странице звуковое сопровождение, представлять информацию в таблицах, кадрах и формах и, наконец, создавать гиперссылки. Таков далеко не полный перечень возможностей FrontPage по редактированию содержимого Web-страниц.

Папки

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

Отчеты

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

Переходы

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

Гиперссылки

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

Задачи

Этот режим предназначен для управления задачами Web-узла (добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач).

Общий вид сайта на примере главной страницы имеет вид, изображенный на рисунке:

4. Размещение сайта в сети Internet

Для того, чтобы разместить свой сайт в сети Internet, нам необходимо иметь свой домен и хостинг.

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

Хостинг — некоторый раздел (папка) на сервере, в котором располагаются файлы вашего сайта.

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

Для данной курсовой работы целесообразно использовать бесплатный домен и хостинг. Наиболее распространенным сервисом, раздающим бесплатные домены и хостинг является сервис narod.ru (narod.yandex.ru) от Yandex.

Для создания нового домена необходимо зайти на сайт http://narod.yandex.ru/ и нажать на ссылку «Создайте свой сайт». Так как narod.ru — сервис от компании Yandex, то вам потребуется регистрация в yandex.ru. Если Вы зарегистрируетесь, Вам будет выделен домен вида ваше_имя.narod.ru и хостинг на 100Мб (с возможностью увеличения места по мере необходимости).

В Вашем распоряжении будет 2 варианта управления файлами сайта — мастерская и доступ по ftp. Не важно какой вариант Вы выберите, главное, что после загрузки всех необходимых файлов на сервер Ваш сайт появится в сети Internet по адресу ваше_имя.narod.ru.

В нашем случае это сайт http://kondicioner-city.narod.ru.

Заключение

В процессе выполнения курсовой работы был создан сайт-визитка компании «Кондиционер-сити», занимающейся распространением кондиционеров марок Daikin, Hitachi, LG, Panasonic, Samsung, Toshiba.

Сайт состоит из 7 разделов:

· «Главная»

· «История»

· «Типы»

· «Новинки»

· «Марки»

· «Прайс-листы»

· «Контакты»

В процессе создания сайта были освоены основные технологии веб-мастерига, такие как HTML, CSS, JavaScript, Flash, графические форматы файлов *.jpg, *.gif и основы работы с ними.

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

Таким образом, создание небольшого, но внешне привлекательного сайта — вещь не сложная, и каждый человек, владеющий компьютером, изучив основные принципы и технологии веб-мастеринга (например, HTML и CSS) может создать свой собственный сайт и выложить его совершенно бесплатно в сеть Internet. Вопрос здесь лишь в том, понадобится ли кому-нибудь созданный Вами сайт.

Использованные материалы

1. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник./ Гончаров А. Ю. — М.:КУДИЦ-ПРЕСС, 2007. — 320с.

2. Электронный учебник Macromedia Flash MX с сайта http://screew.narod.ru/book.htm

3. Web-мастеринг без посторонней помощи: учеб. пособие/Б.Артанов — М.: 100 книг, 2006. — 336с.

4. Строим Web-сайты. Дизайн — HTML — CSS. Garage: пер. с англ./Марк Кэмпбел; [пер. с .англ. Александр Горлач, Александр Климович]. — М.: Триумф, 2006. -480с.

5. Информационный сайт http://htmlbook.ru