3.6 Дизайн логотипа
Логотип, а также некоторые векторные элементы сайта создаются в векторном графическом редакторе CorelDraw.
Создание нового документа (сочетание клавиш Ctrl+N).
Задание параметров документа.
Для более точного построения логотипа можно использовать направляющие линии и сетку, которая включается кнопкой, расположенной на верхней панели «показать / спрятать сетку».
За основу логотипа был взят шрифт TimesNewRoman. С помощью инструмента «текст» (клавишаF8) создаются три отдельных буквы «S», «E», «T».
Инструментом выбора выделяются буквы, нажатием правой кнопки мыши открывается меню, в котором выбирается пункт «преобразовать в кривую».
С помощью инструмента создание форм объекты редактируются: выделяя узел, его можно переносить, удалять, а также добавлять новые узлы на свободном месте.
Дополнительные элементы создаются инструментом «кривая безье» и, если необходимо, редактируются инструментом создания форм.
В свойствах объекта выбираются необходимые настройки, например, толщина абриса, цвет абриса, цвет заливки и т.д.
После завершения редактирования логотипа все его элементы выделяются и группируются (кнопка на верхней панели «сгруппировать»).
Файл сохраняется в необходимом расширении. Обычно для сайта - это расширение .png.
3.7 Интерактивный прототип
После создания макетов сайта, следует создать интерактивный прототип, для того, чтобы представить путь пользователя, по которому он будет следовать на сайте. Также интерактивный прототип утверждается с заказчиком и предоставляет ему возможность наглядно увидеть действие web-сайта.
Для создания интерактивного прототипа из файлов используется ресурс marvelapp.com.
С помощью кнопки addimages(добавить изображения) на сервис загружаются макеты страниц сайта в формате .jpeg.
При наведении мышки и нажатии на кнопку «edit» (изменить) открывается оригинальный вид макета. Существует возможность прокрутки всего макета для более детального рассмотрения.
Чтобы связать макеты страниц мышкой выделяется нужный элемент, после чего всплывает меню, в котором следует выбрать ссылку на место в данном макете, либо на макет другой страницы.
Настройки сервиса позволяют выбрать какой переход будет использован при переключении страниц, а также при каком действии переход следует осуществлять.
Нажатием кнопки «done» (выполнено) редактирование завершается, и пользователь попадает обратно на главную страницу, где можно перейти к просмотру готового прототипа.
3.8 Верстка сайта
Верстка сайта производится в программе sublimetext2.
Первый файл является основным при верстке сайта. Он содержит в себе все шаблоны страниц и инструкции к их применению.
В UMI создано несколько инструментов, которые позволяют получать в виде XML практически все данные, которые в ней есть. Можно получить информацию о странице, о каком-то объекте, информацию которая возвращает макрос.
Все шаблоны с расширением .xslдолжны храниться в папке на хостингеxsltTpls.
Шаблон преобразования – это правила, по которым данный XML-документ будет преобразовываться.
3.8.1 Структура xslt документа
<?xml version="1.0" encoding="utf-8"?>
Данная строка сообщает браузеру информацию о том, что файл использует формат XML.
Все преобразования должны быть заключены в блок с указанием версии и пространство имен:
<xsl:stylesheet version="1.0".
<xsl:include href="multi.xsl"/>
Следующим шагом, с помощью инструкции «xsl:include», идет подключение дочерних файлов, в которых также указаны шаблоны к модулям. Модули – это набор функцийUMI.CMS, которые определяют функциональность системы.
Далее идут правила преобразования, которые указываются в блоках.
<xsl:templatematch="/" >
Директива match=”/” говорит о том, что шаблон является глобальным. Основной шаблон строится на подобии структуры html-документа.XSLтакже имеет теги <head></head>, между которыми размещается информация, способствующая поисковым системам распознавать сайт,
<meta name="description" content="{result/meta/description}"/>
<meta name="keywords" content="{result/meta/keywords}"/>
Преобразовывает поля descriptionиkeywords, которые указываются при создании страницы вUMI.CMS.
Здесь же подключаются файлы стилей и скриптов.
Между тегами <body></body> размещается общая структура страниц:
Логотип
Меню
Контент
Подвал
Остальные шаблоны, размещенные в данном файле - уточняющие, т.е. описывают преобразования для конкретных страниц и модулей.
Когда создается шаблон для текущей страницы возникает необходимость из данного XML-документа вывести только нужную информацию.
<xsl:value-of select="result/@header " />
В кавычках указывается путь того элемента, который нужно вывести. Чтобы обратиться к узлу следует по иерархии указать путь до необходимого узла. Для обращения к атрибуту после пути до узла ставится знак «@».
Этот шаблон берет содержимое элемента udata с атрибутами module = 'content' и method = 'menu', вставляет теги <ul></ul> и отправляет на обработку все элементы item, результаты помещая между <ul></ul>.
Далее шаблон обращается ко всем элементам “item”, размещая их между тегами <a></a>, что позволяет использовать в дальнейшем элементы как ссылки.
Последний шаблон описывает инструкцию для активного пункта меню.
Во всех общих случаях, где не указано иных правил, берутся все элементы с атрибутами module = 'content' и method = 'content' и выводятся только те значения, которые вxmlдокументе соответствуют положению /result/page/properties/group/property[@name = 'content']/value.
«disable-output-escaping="yes"» указывает на то, что текст будет выведен без html-тегов.
Шаблон главной страницы содержит в себе несколько внутренних страниц. Благодаря такой структуре редактировать основную страницу сайта становится удобнее, так как контент разделен на несколько частей:
Баннер.
Основной контент.
Текстовый слайдер.
Форма заказа.
Страницы сайта, которые содержат более одного блока с контентом должны быть обозначены отдельными шаблонами для правильного отображения в браузере.
В шаблоне, который отвечает за страницу контакты помимо контента, подключен скрипт интерактивной яндекс-карты. Это делает сайт более удобным для пользователя, позволяя ему мгновенно просмотреть маршрут к организации.
Последний шаблон создан для несуществующих страниц. Если пользователь вводит в адресную строку адрес сайта с несуществующей страницей, в результате он увидит предупреждение о том, что запращиваемая страница еще не создана.