Для того, чтобы установить WYSIWYG Web Builder v3.2.0 необходимо проделать следующие действие:

1. Запустите загрузочный диск с программой

2. Откройте папку WWB

3. Откройте папку Setup

4. Загрузите файл WYSIWYG Web Builder 3.2.0.exe

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

1) Next

2) Вам предлагается ознакомиться с условиями соглашения. Для того, чтобы продолжить установку, согласитесь с условиями, поставив переключатель на «I agree to the terms of this license agreement». Next

3) В данном окне вы можете выбрать папку, в которой будет храниться программа WYSIWYG Web Builder v3.2.0 на Локальном диске. Также вы можете изменить программу, выбранную по умолчанию, нажав кнопку «Change…», и выбрав там путь к желаемой папке хранения.) Next

4) Next (В представленном окне вам предлагается выбрать способ отображения программы WYSIWYG Web Builder v3.2.0 в «Программах» в «Главном меню»)

5) Next (После нажатия начнется процесс установки. Вам придется немного подождать)

6) Finish

· Запустите программу WYSIWYG Web Builder v3.2.0

· При запуске программа попросит вас об активации. Для того, чтобы активизировать программу снова откройте установочный диск и следуйте по адресу D:WWBKey

· В папку Key откройте файл Serial.txt.

· Скопируйте данные из файла Serial.txt в окно программы WYSIWYG Web Builder v3.2.0

Программа успешно запущена. Но она на английском языке. Для того, чтобы русифицировать вашу версию WYSIWYG Web Builder v3.2.0 откройте загрузочный диск с программой D: WWB us.

В папке rus вы найдете файл Russian.lng. Скопируйте его в папку с установленным WYSIWYG Web Builder. По умолчанию: C:Program FilesWYSIWYG Web Builder

Запустите WYSIWYG Web Builder и выберите в меню: Tools->Options->Application в списке Language выберите Russian. (см. рис. 1_7)

Щелкните ОК и перезапустите программу.

Теперь интерфейс приложения стал русскоязычным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список html страниц Интернет — магазина MEDIATORG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Нажмите Ok

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

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

Основная информация, имеющаяся на сайте создается в визуальном редакторе 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 images3_tv_lg.jpg, Подсказка ЖК — телевизор LG RZ-37LP1R

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

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

Для 22″ TFT Acer P223Wbd black

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

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

Для SONY VAIO (VGN-AR51MR):

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

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

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

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. Заголовок страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Нажмите Ok

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

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

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

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

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

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

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

· Нажмите Ok

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

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

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

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

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

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

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

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

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

· Нажмите Ok

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Нажмите Ok

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

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

интернет магазин программный макет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Нажмите Ok

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

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

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

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

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

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

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

· Нажмите Ok

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

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

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

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

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

· Значение действия 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 images1_tv_sony.jpg, Подсказка ЖК-телевизор Sony KDL-37P3000

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

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

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

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

Как установить веб билдер