Для того, чтобы установить 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
После того, как все структурные единицы сайта будут заполнены, а именно все приведенные ниже страницы будут заполнены в соответствие с их структурной (описанной в пункте «Создание структуры интернет — магазина»).