52
навигация представляет собой оформленные различными способами
текстовые ссылки.
Различают горизонтальное и вертикальное меню. Вертикальное меню
располагается справа или слева каждой страницы. Горизонтальное меню
располагается, как правило, сразу под шапкой сайта. Для повышения
удобства рекомендуется дублировать горизонтальное меню внизу каждой
страницы (только не оформлять его также пышно, как верхнее).
Кнопки – являются вторыми по частоте использования элементами
навигации. Кнопки могут быть любого размера, формы, цвета и стиля.
Используя их, вам придется подключить к каждой обработчики событий
(например, на java script), которые будут описывать действия по нажатию на
кнопку или наведения на нее курсора мыши. Более оптимальным решением
является следующее: оставить лишь вид кнопки (фоном), а текст на ней все-
таки оформить в виде ссылки. Этого не трудно добиться средствами CSS.
Пример обыкновенной кнопочной навигации показан на рисунке 5.
Рисунок 5 – Кнопочная навигация
Навигационные карты. При таком подходе берется изображение и к
различным его областям привязываются ссылки. Самым распространенным
примером являются туристические карты мира, щелкаете по ее части с какой-
либо страной и попадаете на страницу, посвященную этой стране. Карты
обязательно надо дублировать хотя бы скромным горизонтальным меню
внизу страницы. Иначе, при малейшем сбое пользователь вообще никуда не
сможет перейти.
53
Пример навигационной карты для сайта мог бы выглядеть так, как
показано на рисунке 6.
Рисунок 6 – Навигационная карта
На этом сайте нет страниц, поэтому ссылки ведут на эту же страницу,
но если вы создадите нужные страницы, то при щелчке по области с
лепестком будет осуществляться переход на страницу. Аналогично и для
других областей карты.
В разрабатываемом сайте будет использоваться текстовая навигация в
виде горизонтального меню сверху и снизу сайта. Меню показаны на
рисунках 7 и 8.
Рисунок 7 – Верхнее меню
Рисунок 8 – Нижнее меню
3.1. Описание страниц сайта
Главная страница сайта.
Обычно это первая страница, на которую попадает пользователь.
Поэтому она будет удовлетворять некоторым условиям:
54
Главная страница должна отражать тематику сайта.
Она должна быть интересной, чтобы пользователю захотелось
пройтись по другим страницам сайта.
Разместить на ней функцию поиска по сайту.
На ней будет раздел с постоянно обновляющейся информацией
(список последних новостей компании)
Обязательно должен присутствовать способ обратной связи
(телефон, адрес).
Новости.
Одной из важных страниц на сайте будет являться страница с
новостями.
Страница будет выводить новости ввиде простого списка. Макет
страницы представлен на рисунке 9.
Так же, если нажать на новость, то можно будет увидеть ее детальное
описание.
Рисунок 9. Макет списка новостей
Файлы.
В данном разделе будут размещены все самое свежие электронные
материалы для успешной сдачи дисциплин.
Наши издания.
55
Этот раздел предоставит пользователю информацию об издаваемых
публикациях компанией.
Полезные ссылки.
Данный раздел будет содержать ссылки сайтов, напрямую связанных с
сайтом компании.
О Нас.
Данный раздел будет содержать необходимую информацию о
компании, а именно: история компании, научная работа, учебная работа,
список преподавателей с подробной информацией о каждом из них, а так же
расписания занятий и дежурств сотрудников компании.
Контакты.
Текущий раздел будет содержать контактные данные компании:
точный адрес, индекс и контактный телефон компании. Так же на этой
странице будет расплогаться карта с расположением компании.
3.2. Инфоблоки
Информационные блоки – модуль, позволяющий каталогизировать и
управлять различными типами (блоками) однородной информации. С
помощью информационных блоков может быть реализована публикация
различных типов динамической информации: каталоги товаров, блоки
новостей, справочники и т.д.
Информационные блоки – ключевой момент Bitrix Framework.
Практически всё, что делается в системе в той или иной мере завязано на
этот модуль, даже если это и не отображается явно.
Информационные блоки представляют собой очередной уровень
абстракции над обычными таблицами СУБД, своеобразная "база данных в
базе данных". Поэтому к ним частично применимы все те правила, которых
придерживаются при проектировании БД.
Инфоблоки – сущность, которая в физической структуре БД создает 4
таблицы, не меняющиеся при изменении структуры данных: типы объектов,
экземпляры объектов, свойства объектов и значения свойств объектов.
56
Плюсы такого подхода:
удобный контроль над данными такой структуры из своего
приложения,
универсальность методов,
общая структура данных для любого проекта,
возможность многократно менять типы данных для полей без
уничтожения самих данных.
Минусы такого подхода:
повышенные требования к производительности,
непрозрачность при прямом доступе к данным.
В разрабатываемом проекте будут такие инфоблоки: новости,
преподаватели.
Инфоблок новости:
Необходим для вывода новостей на всех страницах и в разделе
«Новости». Содержит картинку, заголовок новости, дату новости и текст
новости.
Инфоблок преподаватели:
Необходим для реализации подраздела со списком преподавателей.
Содержит фотографию, ФИО, научную степень и информацию сотрудника
компании.
3.3. Дизайн
Разрабатываемый ресурс будет иметь уникальный дизайн. При
создании шаблона были применены следующие принципы:
Шаблон должен быть понятным;
Главная страница не должна быть перегружена информацией;
На главной странице должны распологаться контактные данные
компании;
Светлая цветовая палитра
57
Ширина макета 1024px (Для удобного восприятия на мониторах
размером <19 дюймов);
Исходя из вышеописанных принципов был подготовлен дизайн,
изображенный на рисунке 10
Рисунок 10 – Шаблон сайта
В разделе реализация описан процесс внедрения макета в CMS Bitrix.
58
ГЛАВА 4: РЕАЛИЗАЦИЯ.
4.1. Установка CMS Bitrix и веб окружения
В разработке сайта используется Битрикс Управление сайтом редакция
стандарт. Дистрибутив для установки можно скачать с официального сайта.
После запуска установщика предлагается установить «Битрикс веб
окружение» (Рисунок 11).
Рисунок 11 – Установка Битрикс
Битрикс веб окружение – это решение, позволяющее быстро развернуть
все необходимое для работы. Необходимо поставить галочку и можно
перейти к следующим этапа. На следующем этапе необходимо выбрать
расположение файлов и даллее производится установка. После установки
необходимо зайти на localhost:6448 и увидить мастер установки битрикс.
Процесс установки представляет выбор редакции, ввод параметров
администратора и выбора готового решения.
Сделан акцент на том, чтобы не использовать готовые решения, т.к.
предусмотрен собственный дизайн, поэтому была выбрана чистая установка.
После завершения распаковки файлов можно перейти в панель
администратора (Рисунок 12).
59
Рисунок 12 – Панель администратора
4.2. Внедрение дизайна
Так как была произведена чистая установка, то при заходе на localhost
видно белый лист с предложением установить шаблон. Для того, чтобы
установить шаблон в панели администратора нужно перейти в настройки –
шаблоны сайтов и нажать кнопку «Добавить шаблон».
Необходимо проделать следующие действия:
Ввести название шаблона;
В поле «Шаблон» поместить верстку дизайна и в нужные места
вставить основные функции вывода в шаблонах битрикс;
В поле «Стили сайта» поместить css стили шаблона;
Нажать «Сохранить».
Основные функции вывода в шаблонах битрикс:
<?$APPLICATION->ShowTitle()?> – вывод тайтла в основном
шаблоне сайта
<?$APPLICATION->ShowHead()?> – подключение для вывода в
шаблоне сайта основных полей тега : мета-теги Content-Type, robots,
keywords, description; стили CSS; скрипты
<?$APPLICATION->ShowPanel();?> – вывод панели управления
администратора
60
<?=SITE_TEMPLATE_PATH?> – подстановка пути к шаблону
<?$APPLICATION->ShowTitle(false);?> – вывод заголовка
<? $APPLICATION->ShowMeta("keywords") ?> – Вывод мета тега
keywords
<? $APPLICATION->ShowMeta("description") ?> – Вывод мета
тега description
<? $APPLICATION->ShowCSS(); ?> – Подключение основных
файлов стилей template_styles.css и styles.css
<? $APPLICATION->ShowHeadStrings() ?> – Отображение
специальных стилей, JavaScript
<? $APPLICATION->ShowHeadScripts() ?> – Вывод служебных
скриптов
Теперь, чтобы перенести дизайн остается переместить картинки в
папку созданного шаблона.
Результат после выполнения всех действий показан на рисунке 13.
Рисунок 13 – Шаблон после внедрения
61
4.3. Создание меню
Для создания меню у битрикс имеется готовый компонент «Меню».
Необходимо получить код вывода компонента. Проще всего это сделать, если
открыть редактирование страницы, вынести на нее компонент «Меню» и
перейти в режим кода. (Рисунок 14).
Рисунок 14 – Получение кода компонента
Данный код необходимо поместить в том месте, где должно быть
меню. Для этого нужно зайти в настройки шаблона и поместить его в
необходимое место.
После проделанных действий появится меню, но оно будет пустое.
Чтобы его заполнить, необходимо создать разделы. Это можно сделать через
меню администратора, нажав кнопку «Создать раздел». Самаое важное при
создании раздела поставить галочку «Создать пункт меню».
Результат показан на рисунке 15.
Рисунок 15 – Меню