Разработка электронного мультимедийного каталога элитной парфюмерии и косметики «Нежность»

y">Для просмотра страниц созданных на HTML требуется только интернет браузер, который устанавливается по умолчанию при установке операционной системы. Установка дополнительного программного обеспечения на компьютер пользователя требуется только в некоторых случаях, для корректного отображения некоторых элементов страницы. Также HTML поддерживает представление мультимедийной информации (графика, видео, звук), с помощью которой можно привлечь интерес пользователей.

2.2. Выбор программного средства

Электронный каталог должен разрабатываться с учетом минимальных системных требований, чтобы программа корректно работала на любом ПК (это значит, что не стоит злоупотреблять новомодными «прожорливыми» технологиями).

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

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

Программа FrontPage, входящая в состав Microsoft Office, предназначена для создания Web-страниц и Web-узлов. Применяя панели инструментов и команды меню, на странице можно размещать текстовую и графическую информацию, панели навигации и ссылки, предназначенные для перехода от одной страницы к другой. Кроме того, для оформления Web-страницы можно использовать таблицы, фреймы, бегущие строки, анимацию и многое другое. Чтобы ускорить разработку Web-страниц и узлов, можно применять шаблоны и мастера. Увидеть, как будет выглядеть созданная с использованием FrontPage страница при просмотре в обозревателе можно, не выходя из редактора.

Преимущества FrontPage перед другими редакторами:

1. FrontPage имеет мощную поддержку в Интернете. Существует много Web-узлов, групп новостей, конференций, ориентированных на пользователей FrontPage. Также к FrontPage существует масса платных и бесплатных плагинов (plug-ins), расширяющих его возможности. Например, самые лучшие, на сегодняшний день, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro от компании Ulead встраиваются плагинами не только в Photoshop, но и в FrontPage. Помимо этого, имеется целая индустрия фирм, разрабатывающих и выпускающих темы для FrontPage.

2. Интерфейс FrontPage схож с интерфейсом программ, входящих в Microsoft Office, что облегчает его освоение. К тому же между программами, входящими в Microsoft Office, существует полная интеграция, что позволяет использовать во FrontPage информацию, созданную в других приложениях.

2.3. Структура электронного издания

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

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

1.      Навигационное меню в виде кнопочной формы, не имеющее подразделов.

2.      Меню в виде текстовых ссылок, имеет подразделы (подразделы указываются на странице при переходе по ссылке).

Схематично это можно представить как на рис.2 (те части меню, которые обведены оранжевой рамкой, будут всегда присутствовать на страницах сайта).

Рис. 2. Схема структуры сайта

2.3.1. Разработка дизайна электронного издания

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

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

2.3.2. Создание интерактивных кнопок

Чтобы сделать меню интерактивным, а также просто оригинальным и красивым добавим к нему анимации в формате GIF, которые будут активироваться при наведении курсора мышью.

В этом нам поможет «Замена изображения», с помощью которой можно управлять поведение изображения. Поведение – это сочетание события и действия, которое должно случиться при взаимодействии посетителя узла с web-страницей или с элементом страницы.

Для этого необходимо проделать следующие действия:

a.      Выделяем необходимый объект, в данном случае кнопку.

b.     Выбираем вкладку Формат/Поведение/Вставить/ Замена изображения.

c.      Указываем изображение, которое будет появляться при наведении на него курсора. Теперь событие onnmouseover заменят изображение «Вариант_2_01.jpg» другим изображением — «Главная.gif».

d.     Чтобы вернуть исходное изображение при перемещении указателя мыши за пределы кнопки, поставим галочку «Восстановить по событию onmouseout» (рис.3).

Результат применения этой команды представлен на рис. 4.

Рис. 3. Диалоговое окно «Замена изображения»

Рис. 4. Исходное изображение и изображение в формате GIF, которое появляется при наведении на него курсора

2.3.3. Интерактивные иллюстрации

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

Для этого воспользуемся «Изменением свойства». С его помощью можно изменять (в данном случае необходимо увеличивать) размер изображения, при наведении курсора. Это позволит более детально изучить товар.

a.      Выделяем необходимый объект, в данном случае иллюстрацию.

b.     Выбираем вкладку Формат/Поведение/Вставить/ Изменение свойства/Положение.

c.      В «Смещение и размер» в поля «Ширина» и «Высота» вводим значения размера изображения, которые хотим увидеть при наведении курсора, например 423448 (рис. 5). Теперь событие onnmouseover увеличит размер изображения на заданные параметры.

d.     Чтобы вернуть исходное изображение при перемещении указателя мыши за пределы изображения, поставим галочку «Восстановить по событию onmouseout» (рис. 6).

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

Рис. 5. Задаем новые размеры изображения

Рис. 6. Диалоговое окно «Изменение свойства»

2.3.4. Вставка гиперссылок

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

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

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

Чтобы создать гиперссылку необходимо выбрать объект, который мы хотим сделать гиперссылкой, далее в меню «Вставка», выбрать команду «Гиперссылка», в появившемся окне указать адрес страницы (рис. 7).

Рис. 7. Создание гиперссылок

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

2.3.5. Размещение «якорей»

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

Для создания ссылки на якорь, достаточно выделить желаемый текст, например, «Вверх», далее выбрать в меню Вставка/Гиперссылка. Имя ссылки на якорь начинается символом #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. В данном случае в окне адреса укажем #top. Теперь для быстрого перемещения вверх документа, достаточно просто нажать на слово «Вверх».

2.3.6. Создание карты сайта

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

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

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

Создадим карту сайта с текстовыми гиперссылками в виде иерархической структуры. Поместим карту сайта на главной странице. Результат готовой карты сайта представлен на рис. 8.

 

Рис. 8. Карта сайта

Заключение

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

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

o        Электронное издание значительно дешевле, чем печатное. Изготовление такого издания не связано с расходом трудно восполняемых ресурсов (леса) и загрязнением окружающей среды.

o        Существенное преимущество электронного издания в сравнении с любым изданием на бумаге – интенсивности его использования никак не влияет на качество хранимого материала

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

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

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

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

1.      Вуль В. А. Электронные издания. Учебное пособие. URL: http://www.hi-edu.ru/e-books/xbook119/01/title.htm

 

2.      Гасов В.М., Цыганенко А.М. Методы и средства подготовки электронных изданий. Учебное пособие. URL: http://www.hi-edu.ru/e-books/xbook081/01/title.htm

 

3.      Рейзлин В.И., Склярова М.С. Электронный учебник по FRONTPAGE. FrontPage 2003-glava26 - Разработка на языке HTML. 2004г. URL: http://ad.cctpu.edu.ru/method/FrontPage2003/glava26.html

 

4.      Электронный каталог: создание и тиражирование. URL: http://www.e-catalogue.ru/what.shtml

 

5.      Формат PDF - описание и специфика. URL: http://pdf-reader.ru/

 

6.      Википедия – свободная энциклопедия. HTML. URL: http://ru.wikipedia.org/wiki/HTML

 

7.      Википедия – свободная энциклопедия. Карта сайта. URL: http://ru.wikipedia.org/wiki/Карта_сайта

 

8.      Якоря (anchors) | Применение якорей в HTML-документах. URL: http://cp77.byethost32.com/html/anchors-in-html

 

9.      Монитор - web-дизайн для всех. Гиперссылки. URL: http://web-monitor.narod.ru/web-design/web016.htm

 

2