Создание Интернет-магазина при помощи программы WYSIWYG Web Builder v3.2.0 на примере создания Интернет-магазина "MEDIATORG.ru"

Интернет магазины это часть Интернет маркетинга, который на данный момент занимает значительное место на рынке товаров и услуг по всему миру.

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

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

В сравнении с другими видами медиамаркетинга (печатными, радио и телевидением), интернет-маркетинг растет очень быстро. Он завоевывает все большую популярность не только у бизнеса, но и обычных пользователей, которые хотят продвинуть свой веб-сайт или блог и заработать на нем. Тем не менее, в развитых странах, затраты на Интернет-маркетинг и рекламу составляют около 5 % от общих рекламных затрат.

Интернет - продажи являются очень перспективным направлением хозяйственной деятельности. Но они невозможны без непосредственных навыков создания интернет - сайтов. По этим причинам целью данной работы было показать каким образом и при помощи каких инструментов можно создать доступный для пользования и удобный в обращении, информационно насыщенный, качественно работающий Интернет - магазин «MEDIATORG.ru». В данной работе детально описано каким образом и при помощи каких элементов разработать Интернет - магазин.

Характеристики программного обеспечения

WYSIWYG Web Builder - Редамктор HTML или HTML-редамктор -- компьютерная программа, позволяющая составлять и изменять страницы в формате HTML. Несмотря на то, что HTML-код может быть написан на простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. Принцип их работы условно делится на две категории:

1. Редактор показывает только исходный код.

2. Редактор показывает готовую страницу, работая по технологии WYSIWYG.

Есть также редакторы, работающие по смешанной системе, то есть поддерживающие оба принципа работы

WYSIWYG (сокращение от What You See Is What You Get, англ. что видишь, то и получишь, произносится как «ви-зи-виг») -- способ редактирования, при котором редактируемый материал в процессе редактирования выглядит в точности так же, как и конечный результат.

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

Термин был придуман в исследовательском центре Xerox PARC.

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

Преступим к созданию Интернет - магазина - MEDIATORG.

Первым делом настроим главную страницу (index.htm), для этого вызовите Контекстное меню Свойства страницы

Заполните вкладку Общие (см рис.1)

Надпись - Интернет - магазин MEDIATORG

Имя кнопки - Главная

Ширина страницы 1280 Высота страницы 1024

(рис. 1)

Заполните вкладку Фон (см рис.2)

Картинка - Обзор… D:\Mediatorg\ background.jpg

Звук - Обзор… D:\Mediatorg\ just_do_it.mp3

(рис. 2)

Заполните вкладку Полосы прокрутки (см рис.3)

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

(рис. 3)

Теперь сохраните имеющийся проект: Файл Сохранить Web-страницу

Сохраните свою страницу в рабочей папке под названием MEDIATORG.wbs. Страница сохранится с расширением .wbs. Это стандартное расширение рабочего проекта программы WYSIWYG Web Builder v3.2.0.

Для того, чтобы просмотреть страницу нажмите Файл Открыть в браузере… или кнопку просмотр на панели инструментов.

Скопируйте страницу index.html и создайте 13 ее копий, каждую из который переименуйте в соответствие со следующим списком (About.html, Contacts.html и т.д.)

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

Создание Главной страницы (index.html)

Создание текстовых полей:

Посередине страницы вставьте надпись «Интернет - магазин MEDIATORG».

Для этого на панели Инструментарий (находится в левой стороне окна программы) в разделе Общие используйте инструмент Текст.

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

Инструменты форматирования расположены в Прочие Шрифт / Абзац и т.д. или на панели инструментов. (Установите Размер текста - 26, Полужирный, Цвет - Желтый).

Таким же образом заполните самостоятельно Новости Интернет - магазина MEDIATORG.

На главной странице обычно располагаются ссылки на основные ресурсы сайта (Главное меню), новости интернет - магазина, а также информация о новинках поступления. Создание вышеперечисленного мы сейчас и рассмотрим на примере интернет - магазина MEDIATORG.

Создание главного меню:

Для этого на панели Инструментарий Навигация Панель навигации.

Активизировав инструмент Панель навигации, необходимо выделить на рабочем листе область, в которую предположительно будет находиться Главное Меню.

На рабочем листе появится меню из 4х кнопок (оно идет по умолчанию), но ванн необходимо самостоятельно его настроить для вашего интернет - магазина.

Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· поставьте галочку в области «Синхронизировать со структурой сайта».

· В списке Уровень выберите Родительский уровень

· Установите Тип «По горизонтали»

· Нажмите Ok

(рис. 4)

На вкладке Стиль вы можете изменять картинки, т.е вид кнопок меню и форматировать шрифт кнопки.

В итоге у вас получится меню следующего вида:

Основная информация, имеющаяся на сайте создается в визуальном редакторе WYSIWYG Web Builder v3.2.0 с помощью таких элементов навигации, как Текст, Таблица, Картинка, Список, Бегущая строка и т.д.

Создание Бегущей строки:

Для этого на панели Инструментарий Общие Бегущая строка.

Активизировав инструмент Бегущая строка, необходимо выделить на рабочем листе область, в которую предположительно будет находиться Бегущая строка. Форматируется она таким же образом, как и объект Инструментария Текст. В Свойствах данного элемента можно отредактировать Текст, Направление, Скорость движения, Поведение, Поворот (на вкладке Общие) и внешний вид (на вкладке Стиль).

Новинки поступления могут быть отображены, например, картинками или текстом со ссылками.

Создание Картинок:

Для этого на панели Инструментарий Общие Картинка.

Активизировав инструмент Картинка, выделить на рабочем листе область, в которой разместится картинка. После выделения области автоматически всплывает окошко, запрашивающее путь к вставляемой картинке. Выберите картинку и нажмите Открыть (D:\MEDIATORG \images).

В Интернет - магазине MEDIATORG на странице index.html создайте 3 картинки. Создайте надписи к этим картинкам с помощью инструмента Текст.

Создание Гиперссылок:

Гиперссылки могут быть созданы на различных инструментах, таких как Текст, Картинки, Кнопки и т.д.

Гиперссылка может быть создана двумя способами

1. Контекстное меню Свойства. Вкладка Ссылка (только для картинок)

2. Активизировав / выделит элемент (картинку/текст) нажать на кнопку Гиперссылка на Панели инструментов. (см. рис.ниже)

По итогам любого из вышеперечисленных действий вы попадаете в следующее окно:

Объект может быть связан с:

· FTP (страница ftp типа)

· Веб - сайтом (сайтом в интернете, необходимо указать http адрес)

· E-mail адресом (указать e-mail по которому будет осуществляться связь)

· Локальной веб- страницей (страницей, находящейся в Локальном доступе)

Страница index.html Интернет - магазина MEDIATORG будет содержать ссылки на Локальные Веб - страницы. Ссылки картинок и подписей к ним будут совпадать.

Для того, чтобы создать ссылки - картинки на Новинки, которыми являются ЖК-телевизор LG RZ-37LP1R, 22" TFT Acer P223Wbd black и SONY VAIO (VGN-AR51MR):

1. Используйте объект Картинка

2. Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\3_tv_lg.jpg, Подсказка ЖК - телевизор LG RZ-37LP1R

3. Во вкладке Ссылка: заполните поля следующим образом Связана с: Локальная веб-страница Страница tv_LG Закладка tv_lg_3 Данные закладки самостоятельно создаются на страницах с информацией о товаре. Описание смотри в части - «Создание страниц с информацией о товаре (на промере TV_sony.html)»

4. нажмите ОК.

Для создания следующий картинке совершите вышеперечисленные действия, но со следующими изменениями:

Для 22" TFT Acer P223Wbd black

ь Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\2_mon_acer.jpg, Подсказка: 22" TFT Acer P223Wbd black

ь Во вкладке Ссылка: заполните поля следующим образом Связана с: Локальная веб-страница Страница Monic_Acer Закладка: _2_mon_acer, ³ Данные закладки самостоятельно создаются на страницах с информацией о товаре. Описание смотри в части - «Создание страниц с информацией о товаре (на промере TV_sony.html)»

Для SONY VAIO (VGN-AR51MR):

ь Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\4_nout_sony.jpg, Подсказка: SONY VAIO (VGN-AR51MR)

ь Во вкладке Ссылка: заполните поля следующим образом Связана с: Локальная веб-страница Страница Nout_sony Закладка: _4_nout_sony³

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

1. Используйте объект Текст. В текстовое поле введите «LG RZ-37LP1R». Выделите текст и нажмите на значок «Гиперссылка» на панели инструментов.

2. В появившемся окне действуйте также, как и с гиперссылкой - картинкой.

Использование инструмента Windows Media Player:

Для этого на панели Инструментарий Расширенные Windows Media player.

Активизировав инструмент Windows Media player, выделить на рабочем листе область, в которой разместится окно Windows Media player'a. После выделения области автоматически всплывает окошко, запрашивающее путь к загружаемому файлу. Выберите .avi файл и нажмите Открыть (D:\MEDIATORG \ Sony commercial .avi).

Создание гиперссылки на начало страницы:

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

Выберите на панели Инструментарий Общие Закладка. Поместите флажок (на рисунке показан стрелкой) в верхний левый угол рабочей страницы.

Откройте Свойства Закладки и измените имя на «_top».

В конце страницы создайте Текст с надписью «В начало»

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

· Связь с: - Локальная веб - страница

· Закладка - _ top (имя закладки, которую вы поместили в верхний угол стриницы)

· Цель - _top (означает, что при переходу по ссылке закладка - цель будет расположена в верхней части окна)

· Нажмите Ok

Создание страницы, с перечнем товарных наименований (на примере TV.html)

Данная страница будет содержать следующие элементы и иметь вид:

1. Заголовок страницы

2. Главное меню

3. Текущее меню

4. Кнопку загрузки Прайс листа (.xls страницы)

5. Текст с названиями групп товаров

6. Картинки - гиперссылки на конкретный товар

7. Надписи - гиперссылки на конкретный товар

8. Ссылку на возвращение в начало страницы

Во многом создание данной страницы напоминает создание страницы index.html. Поэтому в данном разделе будет не такой подробное описание действий, как в описании создания Главной страницы.

Создание текстовых полей:

Посередине страницы вставьте надпись «Интернет - магазин MEDIATORG».

Для этого на панели Инструментарий (находится в левой стороне окна программы) в разделе Общие используйте инструмент Текст.

Прочие Шрифт Установите Размер текста - 26, Полужирный, Цвет - Желтый.

Создание главного меню: (или можно скопировать его с главной страницы)

Для этого на панели Инструментарий Навигация Панель навигации.

Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· поставьте галочку в области «Синхронизировать со структурой сайта».

· В списке Уровень выберите Родительский уровень

· Установите Тип «По горизонтали»

· Нажмите Ok

Создание текущего меню:

Для этого на панели Инструментарий Навигация Панель навигации.

Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· поставьте галочку в области «Синхронизировать со структурой сайта».

· В списке Уровень выберите Текущий уровень

· Установите Тип «По вертикали»

· Нажмите Ok

На вкладке Стиль вы можете изменять картинки, т.е вид кнопок меню и форматировать шрифт кнопки.

В итоге у вас получится меню следующего вида(рис. 3_1):

(рис. 3_1)

Создание кнопки загрузки Прайс листа (.xls страницы):

Для этого на панели Инструментарий Формы Расширенная кнопка.

Двойным нажатием на объект можно изменять текст кнопки. Введите «Открыть Прайс». Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· Значение «price_list».

· Тип кнопки По щелчку

· Действие при щелчке Открытие окна или открытие адреса

· Значение действия price.xls

· Нажмите Ok

На вкладке Стиль измените цвет на Желтый.

Создание ссылок - картинок на телевизоры:

Страница TV.html Интернет - магазина MEDIATORG будет содержать ссылки на ЖК - телевизоры различных компаний, выставленные на продажу. Ссылки картинок и подписей к ним будут совпадать.

Для того, чтобы создать ссылки - картинки на ЖК-телевизор Sony KDL-37P3000, которыми являются:

1. Используйте объект Картинка

2. Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\1_tv_sony.jpg, Подсказка ЖК-телевизор Sony KDL-37P3000

3. Во вкладке Ссылка: заполните поля следующим образом Связана с: Локальная веб-страница Страница tv_Sony, Закладка tv_sony_1 Данные закладки самостоятельно создаются на страницах с информацией о товаре. Описание смотри в части - «Создание страниц с информацией о товаре (на промере TV_sony.html)»

4. нажмите ОК.

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

1. Используйте объект Текст. В текстовое поле введите «ЖК-телевизор Sony KDL-37P3000». Выделите текст и нажмите на значок «Гиперссылка» на панели инструментов.

2. В появившемся окне действуйте также, как и с гиперссылкой - картинкой.

И так далее с каждой следующей картинкой и текстовой ссылкой.

Создание гиперссылки на начало страницы: (или скопируйте поле «В начало» с гравной страницы)

Выберите на панели Инструментарий Общие Закладка. Поместите флажок (на рисунке показан стрелкой) в верхний левый угол рабочей страницы.

Откройте Свойства Закладки и измените имя на «_top».

В конце страницы создайте Текст с надписью «В начало»

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

· Связь с: - Локальная веб - страница

· Закладка - _ top (имя закладки, которую вы поместили в верхний угол стриницы)

· Цель - _top (означает, что при переходу по ссылке закладка - цель будет расположена в верхней части окна)

· Нажмите Ok

Таким же образом заполняются следующие страницы интернет - магазина «MEDIATORG.ru» ---- TV.html,Monics.html, Nout.html

Создание страницы, с перечнем товарных наименований (на примере TV_.html)

Данная страница будет содержать следующие элементы и иметь вид:

1. Заголовок страницы

2. Главное меню

3. Текущее меню

4. Кнопку загрузки Прайс листа (.xls страницы)

5. Рекламный ролик компании - производителя (Windows media объект)

6. Текст с информацией о товаре

7. Картинки - гиперссылки на место в документе с информацией о конкретном товаре

8. Надписи - гиперссылки на место в документе с информацией о конкретном товаре

9. Отправка письма с уведомлением о покупке (купить)

10. Ссылку на возвращение в начало страницы

Создание текстовых полей: (или вставьте заглавие с главной страницы)

Посередине страницы вставьте надпись «Интернет - магазин MEDIATORG».

Для этого на панели Инструментарий (находится в левой стороне окна программы) в разделе Общие используйте инструмент Текст.

Прочие Шрифт Установите Размер текста - 26, Полужирный, Цвет - Желтый.

Создание главного меню: (или можно скопировать его с главной страницы)

Для этого на панели Инструментарий Навигация Панель навигации.

Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· поставьте галочку в области «Синхронизировать со структурой сайта».

· В списке Уровень выберите Родительский уровень

· Установите Тип «По горизонтали»

· Нажмите Ok

Создание текущего меню: (или скопируйте его со страницы TV.html)

Для этого на панели Инструментарий Навигация Панель навигации.

Откройте Свойства меню (Контекстное меню Свойства).

На вкладке Общие:

· поставьте галочку в области «Синхронизировать со структурой сайта».

· В списке Уровень выберите Текущий уровень

· Установите Тип «По вертикали»

· Нажмите Ok

Создание кнопки загрузки Прайс листа (.xls страницы): (или скопируйте ее со страницы TV.html)

Для этого на панели Инструментарий Формы Расширенная кнопка.

Двойным нажатием на объект можно изменять текст кнопки. Введите «Открыть Прайс». Откройте Свойства. На вкладке Общие:

· Значение «price_list».

· Тип кнопки По щелчку

· Действие при щелчке Открытие окна или открытие адреса

· Значение действия price.xls

· Нажмите Ok

На вкладке Стиль измените цвет на Желтый.

Использование инструмента Windows Media Player:

Для этого на панели Инструментарий Расширенные Windows Media player. Выберите .avi файл и нажмите Открыть (D:\MEDIATORG \ Sony commercial .avi).

Создание ссылок - картинок на телевизоры:

Ссылки картинок и подписей к ним будут совпадать. Для того, чтобы создать ссылки - картинки на место в документе, в котором находится информация о ЖК-телевизор Sony KDL-37P3000:

1. Установите Закладку в том месте, где на странице TV_sony.html находится информация об указанном телевизоре.

2. Назовите закладку _tv_sony_1

3. Используйте объект Картинка

4. Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\1_tv_sony.jpg, Подсказка ЖК-телевизор Sony KDL-37P3000

5. Во вкладке Ссылка: заполните поля следующим образом Закладка tv_sony_1

6. нажмите ОК.

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

1. Используйте объект Текст. В текстовое поле введите «ЖК-телевизор Sony KDL-37P3000». Выделите текст и нажмите на значок «Гиперссылка» на панели инструментов.

2. В появившемся окне действуйте также, как с гиперссылкой - картинкой.

И так далее с каждой следующей картинкой и текстовой ссылкой.

Создание гиперссылки на начало страницы: (или скопируйте поле «В начало» с гравной страницы)

Выберите на панели Инструментарий Общие Закладка. Поместите флажок (на рисунке показан стрелкой) в верхний левый угол рабочей страницы.

Откройте Свойства Закладки и измените имя на «_top».

В конце страницы создайте Текст с надписью «В начало»

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

· Связь с: - Локальная веб - страница

· Закладка - _ top (имя закладки, которую вы поместили в верхний угол страницы)

· Цель - _top (означает, что при переходу по ссылке закладка - цель будет расположена в верхней части окна)

· Нажмите Ok

Таким же образом заполняются следующие страницы интернет - магазина «MEDIATORG.ru» ---- Tv_sony.html, Tv_lg.html, Tv_samsung.html, Monic_lg.html, Monic_asus.html, Monic_acer.html, Nout_asus.html, Nout_acer.html и Nout_sony.html

Создание Интернет - магазина «MEDIATORG.ru

После того, как все структурные единицы сайта будут заполнены, а именно все приведенные ниже страницы будут заполнены в соответствие с их структурной (описанной в пункте «Создание структуры интернет - магазина»).

После того, как Интернет - магазин готов нужно его опубликовать и перевести в привычную html форму. Для этого:

1. Нажмите на Панели инструментов значок «Опубликовать» (активен на рис.).

2. В появившемся окне нажмите кнопку Добавить и выберите место, в которое распакуется html вариант готового Интернет - магазина

3. Нажмите Опубликовать

4. После загрузки нажмите Done

Заключение

Итогом проведенной работы явилась точная инструкция , которой можно воспользоваться при создании Интернет - магазина. В работе детально и наглядно показано как и что делать про создании сайта. Там же описываются варианты, отличные от взятого за основу Интернет - магазина«MEDIATORG.ru».

Интернет - магазин «MEDIATORG.ru» был разработан при помощи программного продукта WYSIWYG Web Builder 3.2.0. Это простой в обращении, не требующий специальных познаний в HTML Java программировании. Данная программа подходит как опытному программисту, так и простому бизнес - клерку.

С помощью такого рода программ и данной работы любой желающий может разработать и открыть свой Интернет - магазин. Визуальный редактор WYSIWYG Web Builder с этим поможет.

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

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

1. http://setx.ru/2006/05/29/WYSIWYG_Web_Builder_3.2.0_ i_rusifikator.html

2. http://soft.mydiv.net/win/download-WYSIWYG-Web-Builder.html

3. http://ru.wikipedia.org/

Размещено на Allbest.ru