Интернет магазин копьютер

Таблица 19 – Описание структуры класса «Товары» (Tovari)

Таблица 20 – Описание структуры класса «Сотрудники» (Sotrudniki)

На рисунке 16 представлена диаграмма компонентов интернет-магазина Копьютер.

Рисунок 16 – Диаграмма компонентов

Диаграмма внедрения для интернет-магазина показана на рисунке 17.

Рисунок 17 – Диаграмма внедрения

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

1.                  Создание структурного макета интернет - магазина

Программа установлена и вы готовы к работе.

Запустите программу Пуск  Программы  WYSIWYG Web Builder  WYSIWYG Web Builder

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

Преступим к созданию Интернет – магазина – 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)

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

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

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

3.                  Текст с новостями сайта

4.                  Бегущую строку

5.                  Картинки – гиперссылки на Новинки

6.                  Надписи – гиперссылки на Новинки

7.                  Рекламный ролик (Windows media объект)

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

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

Посередине страницы вставьте надпись «Интернет - магазин 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[1]