|
СУБД <#"656266.files/image001.gif">
Рисунок
1- Вид сайта <#"656266.files/image002.gif">
Рисунок
2- Вид сайта <#"656266.files/image003.gif">
Рисунок
3- Вид сайта <#"656266.files/image004.gif">
Рисунок
4- Вид сайта <#"656266.files/image005.gif">
Рисунок 5- Фон для сайта
Далее выполнились работы, по определению основного внешнего вида сайта и
расположению на нём компонентов. В результате работы создан прототип сайта
представленный на рисунке (Рисунок 6).
Рисунок 6 -Вид дизайна сайта.
Обсудив с руководителем практики от предприятия модель сайта, было
принято решение внести некоторые изменения в вид сайта и добавить
дополнительные функции на главной странице, сделать цветовое оформление более
светлым и избавиться от серых тонов. После коррекции цвета дизайн сайта
получился насыщенным белым цветом и более интуитивно понятым пользователю
(Рисунок 7)
Рисунок 7 -переработанный дизайн для сайта
Для привлечения потенциальных покупателей необходима яркая реклама.
Потому необходимо создать временный баннер, который смог бы привлечь внимание и
не вносить радикальных изменений в макет сайта.
В ходе консультаций с заказчиком было принято решение о размещении
рекламы справа.
Для внедрения рисунка (Рисунок 8) использовались:
· создание листа 200х300 px;
· коррекция цветового тона;
· трансформация;
· вставка.
Рисунок 8 - Изображение девушки, для будущей рекламы.
Картинка редактировалась и подгонялась под нужные размеры в графическом
редакторе. Готовое изображение размещалось и помещалось на странице с
выравниванием текста (Рисунок 9)
Рисунок 9- Создание банера.
Все слайды для оформления страниц создавались с помощью редактора Photoshop. Слайды создавались из нескольких
картинок. Основным являлось изображение представленное на рисунке (Рисунок 10).
Рисунок 10- Картинка с пустым видом
. 
Рисунок 11- Доработанное изображение
Далее использовался photoshop был вырезан и вставлен диван, с дороботкой
тени, цветовым тоном и корекцие тени. (Рисунок 11).
Так в результате работы с графическим редактором были созданы все слайды
для web-страниц. Пример работы можно увидеть нп рисунке ( Рисунок 12).
Рисунок 12-Изображение дивана в тёплых тонах
Были и другие работы, где важным было соблюсти цветовой контраст на
изображение, что бы у пользователя не было ощущения обмана (Рисунок 13)
 
Рисунок 13- Пример создания изображения с правильным подбором цветового
тона.
После создания макета и других нужных материалов, можно начинать работу
по вёрстке сайта. Для правильной вёрстки необходимо решить некоторые
организационные моменты, после чего верстать шаблон.
На данном этапе важно было решить каким будет содержание сайта. Важным
критерием является лаконичный подход, информация не должна хаотично размещена
на сайте, кроме того форма подачи материала, должна быть ясна и понятна.
Информационное наполнение должно носить информативный, развлекательный
характер. Сайт не должен быть чрезмерно перегружен информацией. Как бы не были
хороши картинки, от текста нельзя отказаться, так как именно текстовое
наполнение страниц является объектом поисковых систем.
Функциональность - критерий, характеризующий технологическую сторону
сайта. Хорошая функциональность означает, что сайт быстро загружается, что все
его ссылки "живые", а технологии применяются к месту и отвечают
предполагаемой аудитории. Сайт не должен не зависеть от платформы и типа
браузера.
Интерактивность характеризует возможности, которые сайт предоставляет
пользователю. Хорошая интерактивность не исчерпывается гиперссылками и
всплывающими меню - сайт должен предоставлять пользователю возможности диалога.
Интерактивность - это возможность двустороннего обмена информацией, как в
поисковых системах, чатах, сетевых играх. Благодаря интерактивным элементам
пользователь должен постоянно ощущать отличие Сети от журнала или телевизора.
[12, с. 78]
Сайт не содержит кричащих картинок, ссылок, и прочих элементов. На
страницах присутствует минимализм, есть место для «отдыха глаз» , потому работа
пользователя будет проходить в комфортных условиях .
Так как разработки сайта выполняются с использованием joomla необходимо выбрать шаблон для сайта,
из предлагаемых стандартных вариантов для работы не оказалось подходящего,
потому было принято решение создать шаблон для сайта. В работе с созданием
шаблона использовалась программа Artisteer. Из списка стандартных шаблонов
выбран шаблон , который наиболее подходит для основы. (Рисунок 14)
Рисунок 14-стандартный шаблон
После чего создавался дизайн, а именно создание точной ширины страницы,
нужные отступы, создание меню, ссылок, цветовой гаммы, разбиение шаблона на две
части (Рисунок 15)
Рисунок 15- переработанный шаблон
Но всё равно даже с помощью универсальных программ не всегда всё
получается сделать как надо, а потому детально шаблон пришлось дорабатывать в
ручную. Сама вёрстка шаблона осуществлялась с помощью notepad++ и dreamweaver cs6 , тегов Html и таблицей стилей css. Изначально была
прописана основная разметка для браузера
<html>
<head>
<title>название</title>
</head>
<body>
</body>
</html>
В работе использовалось много тегов и у каждого из них свои функции, так
тег <html> является контейнером, который заключает в себе все содержимое
веб-страницы, включая теги <head> и <body>. Открывающий и
закрывающий теги <html> в документе необязательны, но хороший стиль
диктует непременное их использование. Как правило, тег <html> идет в
документе вторым, после определения типа документа <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"#"656266.files/image017.gif">
Рисунок 16- Вид заголовка в браузере Firefox
Элемент <body> хранит в себе содержимое контейнера и отображается в
окне браузера. Информацию, которую следует выводить в документе, следует
располагать именно внутри контейнера <body>. Открывающий и закрывающий
теги <body> на веб-странице не являются обязательными, однако хорошим
стилем считается их использование, чтобы определить начало и конец
HTML-документа. В ходе работе для тега были прописаны следующий код в CSS, который при подключение каскадных
таблиц стилей, сразу сообщает ему нужные функции, это цвет, адрес картинки и её
формат, расположение фоновой картинки. Также задаётся повторение фоновой
картинки для сайта, отступ внутренний и внешний и минимальная ширина.
body {attachment: fixed;color: #B2C2D1;image:
url("../images/Bottom_texture.jpg");position: left top;repeat:
repeat;: #0F1419;: 0;width: 1100px;
padding: 0;
}
Элемент <div> является блочным элементом и предназначен для
выделения фрагмента документа с целью изменения вида содержимого. Вид блока
отображается с помощью стилей. Что бы не было необходимости описывать вид блока
внутри кода, его часто описывают во внешнем файле .css, а в сам тег добавлялся лишь атрибут class или id с
именем селектора описанного в каскадных таблицах стилей. [33]
В работе <link> устанавливает связь с внешним документом вроде
файла со стилями или со шрифтами. <link> размещается всегда внутри
контейнера <head> и не создает ссылку. При работе с движком линки
создаются автоматически, они подключают сайт к модулям и плагинам.
<link type="text/css"
href="/components/com_virtuemart/assets/css/vmsite-ltr.css"
rel="stylesheet">
<link type="text/css"
href="/media/system/css/modal.css" rel="stylesheet">
<link type="text/css"
href="/components/com_virtuemart/assets/css/facebox.css"
rel="stylesheet">
<link type="text/css"
href="#"656266.files/image018.gif">
Рисунок 17- Вход в админ панель
На форме вводится логин и пароль для открытия главной страницы
администрирования системой - панели управления Joomla, которая предоставит
управление всеми функциями и возможностями пакета. (Рисунок 18)
Рисунок 18 - Панель управления
Для наполнения контента использовался созданный ранее шаблон и два модуля
разработанных раннее:_picker-Модуль поиска товаров, придающий магазину такую же
функциональность, как Amazon или Newegg. Модуль Vmbreadz, показывает все
выбранные параметры фильтра, и компонент FastSeller, позволяет быстро создавать
правила фильтрации для товаров.
Для настройки модуля пришлось добавить следующие изменение в /administrator/components/com_virtuemart/models/product.php
// new
// it should be added to query only in frontend
$backend = strpos(JPATH_BASE, 'administrator');(!$backend) {
// search by price
functionality_once(JPATH_BASE.'/modules/mod_vm_cherry_picker/controller.php');
$chp=new chpController();
$w=$chp->getVMPriceQuery();
//if you're using taxes, specify the tax here, e.g. 1.2 for
20%
//$w=$chp->getVMPriceQuery(1.2);($w) {
$where[]=$w;
$joinPrice=true;
}
}
// new
// add filters to search(!$backend) {
$g=$chp->getVMFilters();($g) {
$where[]=$g['where'];
$joinedTables.=$g['join'];
}
}
// end(count($where)>0){
$whereString = ' WHERE ('.implode(' AND ', $where ).') ';
} else {
$whereString = '';
}
com_virtuemart-бесплатный модуль для создания базы
для интернет магазина.
DJ Image Slider - Image MooTools
Slideshow- DJ Image Slider - продукт
разработчиков Design-Joomla.eu, является одним из лучших расширений Joomla,
которое позволяет отображать галерею изображений с заголовком и кратким
описанием, связанных с любым пунктом меню или URL-адресом. Позволяет создавать
категории для слайдов или настроить интерфейс в параметрах модуля.
Использовался для создания галерей изображений.
Создание разделов сайта
Раздел - это главный (верхний) объект в иерархии структуры содержимого.
Для работы с разделами необходимо перейти на страницу
"Разделы". Можно нажать на главной странице панели кнопку
"Разделы" или в основном меню выбрать "Материалы", затем
пункт "Менеджер разделов".
Для того, чтобы создать новый раздел, следует нажать кнопку
"Создать". Для изменения существующего раздел, нужно нажать на
название раздела или отметьте нужный раздел и нажать кнопку
"Изменить". Для удаления существующего раздела необходимо отметить
нужный раздел и нажать кнопку "Удалить". Копируется существующий
раздел также как и операция у удалением. Отмечается нужный раздел и нажимается
кнопка "Копировать".
Создание категорий сайта
Категория - это второй (после раздела) объект в иерархии структуры
содержимого. Создание категории похоже на создание раздела.
Для работы с категориями необходимо перейти на страницу «Менеджер
категорий».
При открытии страницы «Менеджер категорий» опция фильтрации будет
"жестко" привязана к выбранному разделу. (Рисунок 19)
Рисунок 19-менеджер категорий: Материала.
На странице «Менеджер категорий», используя кнопки на панели
инструментов. Страница редактирования категории аналогичная странице
редактирования раздела. Основное отличие страниц редактирования
"Категории" и "Раздела" - наличие поля выбора раздела, в который
относиться категория. Создание новой категории почти полностью аналогично
созданию нового раздела.
Объект содержимого - это основное содержание сайта и нижний объект в
иерархии структуры содержимого. Иными словами объект содержимого - это статья,
которая должна содержаться в одной из наших категорий
Для работы с объектами содержимого необходимо перейти на страницу
"Менеджер материалов".
Нужно нажать на главной странице панели кнопку "Менеджер
материалов" или в основном меню выберем "Материалы", затем пункт
"Менеджер материалов". Будет открыта страница "Менеджер
материалов", при открытии страницы будет доступна фильтрация объектов по
следующим критериям:
· по разделам;
· по категориям;
· по автору;
· по заголовку, значение указывается в поле "Фильтр".
(Рисунок 20)
Рисунок 20 -менеджер материалов.
Большая часть работы проходила в модуле virtueMart (Рисунок 21) сам модуль работает как
нейтральный, то есть не нужно почти никакого взаимодействия с другими
компонентами joomla.
Рисунок 21 - Панель управления virtueMart
Для начала работы было необходимо создать категории товаров (Рисунок 22),
что бы впоследствии присвоить их к самим товарам, при работе с данным модулем
были созданы следующие категории:
· диваны;
· угловые диваны;
· детские диван;
· комплекты мебели;
· кресла;
· аксессуары.
Очень важно было создать категории, так как с помощью компонентов модуля
их можно вывести , как категории товаров на сайт.
Рисунок 22 -категории товаров
После того, как категории товаров были созданы, можно было приступать к
работе по созданию товаров и присваиванию их к категориям. Каждый товаров
проходил несколько пунктов по созданию:
· загрузка изображения;
· указание цены;
· указание категории;
· артикула товара ( для создания номера-ключа при продаже);
· создание описания товара.
В итоге после создания товаров, их нужно было публиковать и после всего
товары стали отображаться на страницах сайта ( Рисунок 23)
Рисунок 23-Опубликованные товары
Некоторые товары можно определить как рекомендованные, потом создать их
публикацию на сайте и после только отобразить в нужной позиции.
2.3
Похожие работы на - Принципы разработки презентационного сайта предприятия 'Царь Мебель'
|