Корпоративный сайт-каталог сувенирной и полиграфической продукции с фотогалереей и обратной связью на примере компании Rebaz

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

Рисунок 9 - Эскиз расположения основных блоков сайта

Рабочее пространство сайта делится на 4 основных блока. Макет сайта представлен на рисунке 10.

- Основная панель навигации (левая верхняя часть) - здесь находится логотип компании, строка поиска и располагается главное меню сайта.

- Основной информационный блок (занимает большую часть экрана) - в этой части, на главной странице, располагаются заглавное фото и слоган компании, а на остальных страницах - изображение категории, описание продукции, цены и фотогалерея.

- Актуальная продукция (располагается под основным блоком информации) - в этой части располагаются самые важные или наиболее часто заказываемые изделия.

- Нижняя панель навигации - здесь располагается информация о компании, контактная информация, форма обратной связи, форма заказа и карты сайта, а также информация о «копирайте».

Рисунок 10 - Макет главной страницы сайта

Для сайта выбрана теплая цветовая палитра из близких цветов. Оранжевый - для главного меню, этот цвет яркий и привлекает внимание к основному - панели навигации, в которой отражена изготавливаемая продукция и информация о ней. Маджента используется для обозначения важных элементов - ссылок, пунктов меню при наведении. Основной текст и текст пунктов меню в стационарном состоянии коричневого цвета.

Организация навигации сайта

Вертикальное меню продукции. Для основной навигации на сайте решено сделать многоуровневое вертикальное меню со всплывающими названиями категорий (Рисунок 11). Данный тип навигации отличается удобством для пользователя сайта. Навигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице сайта, к тому же оно корректно отображается в браузерах Mozila Firefox, Safari, Opera и Internet Explorer.

Рисунок 11 - Главное меню сайта (блок слева)

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

Всплывающее меню сайта написано на языке JavaScript с использованием программы AllWebMenus 5 PRO, которая является приложением для создания JavaScript и DHTML (динамических HTML-файлов). Создание меню происходит следующим образом:

Выбирается тип меню - вертикальное или горизонтальное.

Выбирается стиль меню, его внешний вид.

Далее следует настройка меню для сайта Rebaz (оно должно быть соответствующим по стилю и цвету). Редактор стилей меню показан на рисунке 12.

Рисунок 12 - Редактор стиля меню в программе AllWebMenus 5 PRO

Для настройки использованы следующие параметры: выравнивание пунктов по левому краю, шрифт Century Gothic, размер шрифта 13 pt, цвет текста темно-коричневый #663300 в нормальном виде, #FF0066 - при наведении мыши и при клике на пункт меню, цвет рамки #E6B300, толщина рамки 2 pt, цвет фона FAB003. Далее создаются пункты меню, они названы так же как и разделы и подпункты меню - категории на сайте. При этом пункты отображаются постоянно, а пункты «всплывают» при наведении на соответствующий раздел.

Структура разделов (пунктов меню) и категорий (подпунктов) изображена на рисунке 13.



Рисунок 13 - Структура главного меню: разделы и категории

Нижнее меню - это информация о компании, форма обратной связи и карта сайта. Отдельно представлена информация о компании: история создания, производственные возможности, основные принципы компании. Отдельный раздел «контакты» здесь размещены электронный адрес, адрес офиса, телефоны и банковские реквизиты. В разделе «поговорите с нами» простая форма обратной связи, для ответа на возникшие вопросы, например, по срокам печати. «Форма заказа» - здесь можно заполнить поля формы и выбрать интересующую продукцию, это удобнее для написания чем обычное электронное письмо. Внешний вид нижнего меню представлен на рисунке 14.



Рисунок 14 - Нижнее меню сайта

Установка системы управления контентом сайта и дополнение ее под задачи сайта. Загружается актуальная версия Joomla, на данный момент Joomla 1.5. Разархивируются файлы дистрибутива Joomla в корневой каталог сервера ( C:\WebServers\home\test1.ru\www - для локального сервера). Открывается интернет-браузер и вводится адрес: www.test1.ru , загрузится веб-инсталлятор Joomla. Нужно выполнить пошаговые действия:

Проверка системы и принятие лицензии. Joomla! проверяет настройки сервера, является ли сервер подходящим для того, чтобы установить Joomla! Затем должна загрузиться страница с лицензией GNU/GPL, которую нужно прочитать и принять (Рисунок 15).

Рисунок 15 - Лицензия Joomla!

Основная настройка и установка Joomla!

- Настройка Joomla! для подключения к базе данных MySQL. Показана на рисунке 16.

Имя хоста MySQL - localhost

Имя пользователя MySQL - root

Пароль доступа к БД MySQL

Имя БД MySQL - rebaz

Префикс таблиц БД MySQL - rebaz

Joomla! предоставляет возможность удаления существующих таблиц (Drop Existing Tables), как и возможность создания резервной копии старых таблиц (Backup Old Tables). При первой инсталляции необходимо оставить эти флажки пустыми.

Программа установки Joomla! Создаст необходимые таблицы и разместит в них пробную информацию. Следующая страница отобразит список ошибок, если они возникли при установке базы данных.

Рисунок 16 - Настройка Joomla! для подключения к базе данных MySQL

- Название сайта. Необходимо ввести название сайта. Это название отображается в заголовке окна браузера, при обращении в web-сайту и в Административной панели. В данном случае Rebaz: шелкография и полиграфия.

- Подтверждение параметров настройки. Проверяется: абсолютный путь и url сайта. Вводится e-mail и пароль администратора.

Это все основные этапы установки Joomla! После завершения установки можно перейти в панель Администратора www.test1.ru/administrator и выполнить основные настройки сайта.

Разработка шаблонной страницы сайта и создание основных модулей сайта. Для создания шаблона страницы системы управления Joomla используется блочная верстка. Это делается для того, чтобы в будущем, если появится необходимость отредактировать какой-то блок страницы, выполнить это можно будет очень быстро. В версиях 1.5 и ранее табличная верстка поддерживается, в более поздних - можно будет использовать только блочную верстку.

Страница делится на блоки модули с указанием к какому модулю сайта привязываются блоки (Рисунок 17).



Рисунок 17 - Расположение блоков и соответствующих модулей сайта

Создается файл templateDetails.xml, в котором будут храниться блоки (основные модули), информация об авторе, прописываются все изображения используемые для сайта, файлы, входящие в состав шаблона.

Для сайта Rebaz созданы следующие модули:

<positions>

<position>logo</position> // Логотип компании

<position>search</position> // Строка поиска

<position>leftmenu</position> // Основное (левое) меню сайта

<position>mainbanner</position> // Главный баннер сайта, главное изображение (на главной странице)

<position>smallbanner</position> // Баннер категории, отображается на всех страницах, кроме главной

<position>slogan</position> // Слоган на главной странице

<position>user1</position> // Модуль с часто-заказываемой продукцией

<position>user2</position> // Модуль с часто-заказываемой продукцией

<position>user3</position> // Модуль с часто заказываемой продукцией

<position>bottommenu</position> // Нижнее меню сайта

<position>footer</position> // Строка авторских прав

</positions>

Параметры модулей задаются во вкладке Менеджер модулей Администраторской панели, здесь можно создать модуль со свободным HTML-кодом или выбрать готовые (все модули для данного сайта прописываются HTML-кодом). Указывается позиция в соответствии с файлом templateDetails.xml, состояние публикации (включен/выключен), права доступа (в сайте Rebaz все модули общедоступны), выбираются страницы на которых должен отображаться модуль, каждый модуль имеет свой идентификатор. Создается файл index.php, в котором и происходит разметка страницы сайта и разделение на блоки. Полностью файл index.php представлен в Приложении А.

Для обозначения месторасположения модулей для Joomla используются следующие включения:

<jdoc:include type="modules" name="logo" />

Соответственно, один из модулей, в данном случае логотип, выглядит следующим образом в PHP:

<div id="leftpart"> // Блок logo создан внутри блока leftpart

<div id="logo">

<jdoc:include type="modules" name="logo" /> // Включается модуль logo

</div>

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

Для того, чтобы задать стиль блоков сайта, создается каскадная таблица стилей (CSS), назовем ее template.css. Полностью файл template.css представлен в Приложении Б.

Здесь можно задать стиль текста, фона ( в данном сайте используется фоновое изображение страниц ), ссылок, кнопок, и модулей сайта. Например, левая часть сайта (включает логотип, строку поиска и главное меню)

#leftpart {

padding: 0;

margin: 0;

width: 230px;

float:left; }

Организация обратной связи на сайте

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

Более всего для создания форм к сайту Rebaz подходит компонент ArtForms для Joomla! 1.5. Этот компонент дает широкие возможности для создания разнообразных индивидуальных форм на сайте. ArtForms имеет следующие преимущества:

- неограниченное количество форм и полей;

- сохранение форм в базе данных;

- индивидуальный стиль для разных полей;

- поддержка Captcha.

Этапы создания «обратной связи»:

Планирование полей, которые должна содержать обратная связь и анализ степени важности этих полей (обязательно для заполнения, необязательно для заполнения), определение типа поля (ввод данных, текстовое поле, выбор, пароль). Форма обратной связи для данного сайта должна содержать следующие поля с указанием (в скобках) типа поля:

- обязательные - имя отправителя(ввод данных), e-mail отправителя (ввод данных), текст сообщения (текстовое поле);

- необязательные - название компании-заказчика (ввод данных), номер телефона (ввод данных), тема сообщения (ввод данных).

Установка компонента ArtForms через Установку/Удаление расширений в Административной панели Joomla!

Настройка формы (происходит во вкладке Формы) - название формы, электронный адрес получателя формы, отправка копии формы клиенту (да/нет), пользовательский JavaScript код, загрузка пользовательского CSS-кода, возможность включения проверочной системы (Captcha), указать параметры публикации.

Для сайта используются следующие настройки:

- название формы - «поговорите с нами»;

- e-mail адрес - rebaz.print@gmail.com;

- проверочная система - Captcha Form.

Разрешение загрузки файлов - если загрузка разрешена, то определяется размер прикрепляемого файла, количество вложенных файлов, выбор разрешенных типов файлов. Для вложения используются следующие типы файлов: doc (Microsoft Word), pdf (Adobe Acrobat), gif, jpg, png, cdr (Corel Draw), psd (Adobe Photoshop).

Создаются поля обратной связи в соответствии с типом поля, важностью выполнения, если необходимо выполняется проверка полей, например, проверка e-mail или номера.

Интерфейс формы обратной связи приведен на рисунке 18.

Рисунок 18 - Форма обратной связи сайта Rebaz

Все данные компонента ArtForms хранятся в базе данных: в таблице jos_artforms - параметры формы, jos_artforms_inbox - входящие сообщения, в jos_artforms_items - поля таблицы и их свойства.

Принцип работы формы: после заполнения пользователем полей, и нажатия кнопки «Отправить» форма проверяет была ли произведена попытка заполнения, затем проверяется были ли заполнены все обязательные поля и правильность введения Captcha, если поля заполнены не верно или не заполнены, форма выдает сведения об ошибке. Если все верно, то с помощью команды sendmail отправляется сообщение на указанный электронный адрес. А пользователь видит текст сообщения «Форма успешно отправлена, мы свяжемся с Вами как можно скорее».

Заключение

В общей части был проведен обзор существующих типов сайтов, обеспечения работы веб-сайта: описание информационного обеспечения, программного обеспечения и технического сайта. Рассмотрены теоретические основы построения веб-сайтов: принципы работы web-сервера, основы построения сайта на языке PHP, основы работы с базой данных MySQL, взаимодействие PHP сайта и базы данных MySQL, даны основные преимущества динамического веб-сайта.

В практической части приведены основные этапы создания сайта компании Rebaz. Дана характеристика объекта проектирования сайта - сайт компании, занимающейся изготовлением сувенирной и полиграфической продукции. Рассмотрены сайты компаний из печатной отрасли, причем это не только российские разработки, но и западные сайты. Проведен сравнительный анализ разработок сайтов, выделены основные функции, работающих сайтов и на их основе проанализированы основные функции необходимые для сайта компании Rebaz. Выбран сайт прототип - сайт компании «UK colour printing» (Derby, England), т.к. реализованные в нем функциональные возможности более всего удовлетворяют потребностям создаваемого сайта. Для увеличения количества клиентов и повышения уровня информации о предмете, администрацией компании было принято решение о создании электронного ресурса компании. Электронный ресурс должен не только предоставить информацию о сфере деятельности и контактную информацию о компании, но и предоставить возможность обратной связи посредством сети интернет. Возможность подробно узнать о продукции, способах печати и посмотреть уже готовые работы через интернет может привлечь новых клиентов.

Были определены задачи, которые поможет решить веб-сайт. Изложен процесс разработки сайта компании Rebaz: построение базы данных сайта и разработка основной части. Вследствие того, что разработка основной части достаточной длинный трудоемкий процесс его решено разбить на более мелкие составные части, и выполнять каждую и них последовательно. Основные этапы разработки основной части сайта: разработка макета дизайна сайта, установка системы управления контентом сайта Joomla! и дополнение ее под задачи сайта, разработка шаблонной страницы сайта и создание основных модулей сайта.

Список использованных источников

1. Дизайн-студия Smart [Электронный ресурс]: типы сайтов, или классификация интернет ресурсов. Режим доступа: http://www.smart-web.ru/types-of-sites.html - 07.12.2010.

2. Дизайн-студия Trilan [Электронный ресурс]: разработка и создание сайтов. Режим доступа: http://develop.trilan.ru - 07.12.2010.

3. Веб-студия BSWS [Электронный ресурс]: информационное обеспечение сайта. Режим доступа: http://bsws.com.ua/ru/teoriya/stati.html - 08.12.2010.

4. Russian Apache - сайт о сервере Apache [Электронный ресурс]: краткий обзор сервера. Режим доступа: http://apache.lexa.ru/intro.html - 08.12.2010.

5. Дэвис Е.М. Изучаем PHP и MySQL [Текст]: учебник / Дэвис Е.М., Филипс Дж.А. - пер. с англ. - СПб.: Символ-Плюс, 2008. - 448 с.

6. phpMyAdmin по-русски [Электронный ресурс]: описание приложения. Режим доступа: http://php-myadmin.ru/about/notice.html - 10.12.2010.

7. Портал о веб-технологиях [Электронный ресурс]: основы и синтаксис PHP. Режим доступа: http://php.su/learnphp/?syntax - 13.12.2010.

8. Курс PHP [Электронный ресурс]: типы данных, переменные и операторы в PHP / Артемьев С.И. Режим доступа: http://on-line-teaching.com/php/struct.types.htm - 13.12.2010.

9. Портал о веб-разработке [Электронный ресурс]: циклы в PHP. Режим доступа: http://wcode.ru/php/89 - 13.12.2010.

10. Дюбуа П. MySQL. Полное и исчерпывающее руководство по применению и администрированию баз данных MySQL, а также программированию приложений [Текст]: учебник - 2-е изд. - пер. с англ. - М.: Изд. дом "Вильямс", 2004. -- 1056 с.

Приложение А

Шаблонная страница сайта index.php

<?php

/**

* @copyrightCopyright (C) 2005 - 2010 Open Source Matters. All rights reserved.

* @licenseGNU/GPL, see LICENSE.php

* Joomla! is free software. This version may have been modified pursuant

* to the GNU General Public License, and as distributed it includes or

* is derivative of works licensed under the GNU General Public License or

* other free or open source software licenses.

* See COPYRIGHT.php for copyright notices and details.

*/

// no direct access

defined( '_JEXEC' ) or die( 'Restricted access' );

include_once (dirname(__FILE__).DS.'/ja_vars.php');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

</head>

<body>

<div align="center">

<div id="main" align="left">

<!-- BEGIN: LEFTPART -->

<div id="leftpart">

<div id="logo">

<jdoc:include type="modules" name="logo" />

</div>

<?php if($this->countModules('search')) : ?>

<div id="search">

<jdoc:include type="modules" name="search" />

</div>

<?php endif; ?>

<div id="leftmenu">

<jdoc:include type="modules" name="leftmenu" />

</div>

</div>

<!-- END: LEFTPART -->

<div id="mainpart">

<!-- BEGIN: BANNER -->

<?php

if ($_REQUEST["Itemid"] =="" || $_REQUEST["Itemid"] =="1") { ?>

<div id="mainbanner">

<jdoc:include type="modules" name="mainbanner" />

</div>

<?php }else { ?>

<div class="smallbanner">

<jdoc:include type="modules" name="smallbanner" />

</div>

<?php } ?>

<?php

if ($_REQUEST["Itemid"] =="" || $_REQUEST["Itemid"] =="1") { ?>

<div class="slogan" >

<jdoc:include type="modules" name="slogan" />

</div>

<!-- END: BANNER -->

</div>

<div id="module">

<jdoc:include type="modules" name="user1" />

</div>

<?php }else { ?>

<div >

<table class="nopad">

<tr valign="right">

<td>

<jdoc:include type="component" />

</td>

</tr>

</table>

</div>

<?php } ?>

</div>

</div>

<div align="center">

<div id="footer">

<div id="bottommenu">

<table width="741" align="center">

<tr>

<td width="741">

<jdoc:include type="modules" name="bottommenu" />

</td>

</tr>

</table>

</div>

<br />

<div id="copyright">

<jdoc:include type="modules" name="footer" />

</div>

</div>

</div>

</body>

</html>

Приложение Б

Каскадная таблица стилей template.css

/* COMMON STYLE

--------------------------------------------------------- */

BODY {

margin-left: 0;

margin-top: 0;

background: url(../images/back.gif);

background-attachment: scroll;

background-position: top-center;

width:100%;

height:auto;

color: #630;

font-family:Century Gothic, Tahoma;

font-size: 12pt;

line-height: 18pt;

}

p, category.text {

color:#630;

font-style: normal;

font-face:Century Gothic, Tahoma;

font-size: 11pt;

line-height: 14pt}

b {

color:#630;

font-style: normal;

font-face:Century Gothic, Tahoma;

text-align:center;

font-size: 11pt;

line-height: 13pt

}

textarea {

color:#630;

font-style: normal;

font-face:Century Gothic, Tahoma;

font-size: 11pt;

line-height: 13pt

}

select {

color:#630;

font-style: normal;

font-face:Century Gothic, Tahoma;

font-size: 10pt;

line-height: 13pt

}

input {

background-color: #FC0;

color: #630;

font-family:Century Gothic, Tahoma;

font-size:10.5pt

}

a {

color: #F09;

font-style: normal;

text-decoration: none;

font-size: 13pt

}

a:link {

color: #630;

text-decoration: underline

}

a:hover {

color: #F60;

text-decoration:none;

}

v:link {color: #FC0; text-decoration:none;}

h3 {color: #630; font-family:Century Gothic, Tahoma; font-style:normal; font-size:15pt, line-height: 15pt}

h4 {color: #F60; font-family:Century Gothic, Tahoma; font-style:normal; font-size:14pt, line-height: 14pt}

h5 {color: #F60; font-family:Century Gothic, Tahoma; font-style:normal; font-size:12pt, line-height: 14pt}

/* FORM

--------------------------------------------------------- */

form {

margin: 0;

padding: 0;

}

form label {

cursor: pointer;

}

.inputbox {

padding: 3px 5px;

font-family: "Century Gothic", "Tahoma";

font-size: 12px;

}

.button {

padding: 0;

width: 80px;

height: 30px;

background: #F60;

color: #FFF;

font-size: 13px;

text-transform: uppercase;

font-family:"Century Gothic";

}

.button:hover, .button:focus {

background: #F09;

color: #FFF;

}

.inputbox:hover, .inputbox:focus {

background: #FFFFCC;

}

table.nopad {

width: 70%;

border-collapse: collapse;

padding: 0;

margin: 0;

margin-bottom: 15px;

margin-left: 30px;

}

#category.text {

font-family: "Century Gothic", "Tahoma";

font-size:12px;

font-style:normal;

}

/* BANNER

--------------------------------------------------------- */

#main {

background-color: #FFFFFF;

width: 932px;

}

#leftpart {

padding: 0;

margin: 0;

width: 230px;

float:left;

}

#mainpart {

margin-left: 231px;

padding-left: 0px;

}

# module {

padding: 0;

margin: 0;

float:left;

}

#logo {

width: 190px;

height: 94px;

top: 0px;

left: 20px;

}

#search {

color:#F09;

font-family: "Century Gothic";

}

#search .inputbox {

width: 120px;

border: 1px solid #F09;

padding: 3px 5px;

color: #630;

background: #FC3;

font-size: 100%;

}

#leftmenu{

}

#mainbanner {

width: 700px;

height: 336px;

}

#smallbanner{

width: 700px;

height: 184px;

}

#slogan {

width: 700px;

height: 200px;

right: 250px;

top: 360px;

}

/* FOOTER

--------------------------------------------------------- */

#footer {

}

#bottommenu {

}

#copyright {

}

Размещено на Allbest.ru