Создание Интернет-магазина при помощи программы WYSIWYG Web Builder v3.2.0 на примере создания Интернет-магазина "MEDIATORG.ru"
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
визоры SamsungTv_samsung.phpМониторыMonics.phpМониторы LGMonic_lg.phpМониторы AsusMonic_asus.phpМониторы AcerMonic_acer.phpНоутбукиNout.phpНоутбуки AsusNout_asus.phpНоутбуки AcerNout_acer.phpНоутбуки SonyNout_sony.php
После того, как вы создадите все вышеперечисленные страницы можно будет приступить к их редактированию. Структура сайта отображается в правой части экрана и должна иметь вид:
Создание Главной страницы (index.php)
Данная страница будет содержать следующие элементы и иметь вид:
.Заголовок страницы
.Главное меню
.Текст с новостями сайта
.Бегущую строку
.Картинки - гиперссылки на Новинки
.Надписи - гиперссылки на Новинки
.Рекламный ролик (Windows media объект)
.Ссылку на возвращение в начало страницы
Создание текстовых полей:
Посередине страницы вставьте надпись Интернет - магазин MEDIATORG.
Для этого на панели Инструментарий (находится в левой стороне окна программы) в разделе Общие используйте инструмент Текст.
Активизировав инструмент текст, необходимо, удерживая левую клавишу мыши, выделить на рабочем листе область, в которую предположительно будет занимать текст.
Инструменты форматирования расположены в Прочие Шрифт / Абзац и т.д. или на панели инструментов. (Установите Размер текста - 26, Полужирный, Цвет - Желтый).
Таким же образом заполните самостоятельно Новости Интернет - магазина MEDIATORG.
На главной странице обычно располагаются ссылки на основные ресурсы сайта (Главное меню), новости интернет - магазина, а также информация о новинках поступления. Создание вышеперечисленного мы сейчас и рассмотрим на примере интернет - магазина MEDIATORG.
Создание главного меню:
Для этого на панели Инструментарий Навигация Панель навигации.
Активизировав инструмент Панель навигации, необходимо выделить на рабочем листе область, в которую предположительно будет находиться Главное Меню.
На рабочем листе появится меню из 4х кнопок (оно идет по умолчанию), но ванн необходимо самостоятельно его настроить для вашего интернет - магазина.
Откройте Свойства меню (Контекстное меню Свойства).
На вкладке Общие:
поставьте галочку в области Синхронизировать со структурой сайта.
В списке Уровень выберите Родительский уровень
Установите Тип По горизонтали
Нажмите Ok
(рис. 4)
На вкладке Стиль вы можете изменять картинки, т.е вид кнопок меню и форматировать шрифт кнопки.
В итоге у вас получится меню следующего вида:
Основная информация, имеющаяся на сайте создается в визуальном редакторе WYSIWYG Web Builder v3.2.0 с помощью таких элементов навигации, как Текст, Таблица, Картинка, Список, Бегущая строка и т.д.
Создание Бегущей строки:
Для этого на панели Инструментарий Общие Бегущая строка.
Активизировав инструмент Бегущая строка, необходимо выделить на рабочем листе область, в которую предположительно будет находиться Бегущая строка. Форматируется она таким же образом, как и объект Инструментария Текст. В Свойствах данного элемента можно отредактировать Текст, Направление, Скорость движения, Поведение, Поворот (на вкладке Общие) и внешний вид (на вкладке Стиль).
Новинки поступления могут быть отображены, например, картинками или текстом со ссылками.
Создание Картинок:
Для этого на панели Инструментарий Общие Картинка.
Активизировав инструмент Картинка, выделить на рабочем листе область, в которой разместится картинка. После выделения области автоматически всплывает окошко, запрашивающее путь к вставляемой картинке. Выберите картинку и нажмите Открыть (D:\MEDIATORG \images).
В Интернет - магазине MEDIATORG на странице index.php создайте 3 картинки. Создайте надписи к этим картинкам с помощью инструмента Текст.
Создание Гиперссылок:
Гиперссылки могут быть созданы на различных инструментах, таких как Текст, Картинки, Кнопки и т.д.
Гиперссылка может быть создана двумя способами
.Контекстное меню Свойства. Вкладка Ссылка (только для картинок)
.Активизировав / выделит элемент (картинку/текст) нажать на кнопку Гиперссылка на Панели инструментов. (см. рис.ниже)
По итогам любого из вышеперечисленных действий вы попадаете в следующее окно:
Объект может быть связан с:
FTP (страница ftp типа)
Веб - сайтом (сайтом в интернете, необходимо указать http адрес)
E-mail адресом (указать e-mail по которому будет осуществляться связь)
Локальной веб- страницей (страницей, находящейся в Локальном доступе)
Страница index.php Интернет - магазина MEDIATORG будет содержать ссылки на Локальные Веб - страницы. Ссылки картинок и подписей к ним будут совпадать.
Для того, чтобы создать ссылки - картинки на Новинки, которыми являются ЖК-телевизор LG RZ-37LP1R, 22" TFT Acer P223Wbd black и SONY VAIO (VGN-AR51MR):
.Используйте объект Картинка
.Во вкладке Общие: заполните поля следующим образом Имя файла: D:\MEDIATORG \images\3_tv_lg.jpg, Подсказка ЖК - телевизор LG RZ-37LP1R
.Во вкладке Ссылка: заполните поля следующим образом Связана с: Локальная веб-страница Страница tv_LG Закладка tv_lg_3
.нажмите ОК.
Для создания следующий картинке совершите вышеперечисленные действия, но со следующими изменениями:
Для 22" TFT Acer P223Wbd black
Во вкладке Общие: за