Диплом (1218676), страница 4
Текст из файла (страница 4)
Рисунок 2 – Диаграмма вариантов использования
-
Макеты страниц
На рисунке 3 представлен макет главной страницы сайта, разработанный в соответствии с техническим заданием.
Рисунок 3 – Макет главной страницы сайта
Далее представлен макет интернет-магазина автозапчастей (рисунок 4).
Рисунок 4 – Макет страницы Интернет-магазина автозапчастей
На рисунке 5 представлен макет страницы личного кабинета.
Рисунок 5 – Макет страницы личного кабинета
Эскизы других страниц сайта выполнены по аналогии и приведены в приложении А.
Таким образом, выполнено проектирование макетов страниц сайта.
По итогам первых двух глав, можно сделать вывод, что подготовка к разработке сайта компании для автотехцентра окончена, теперь можно перейти к реализации проекта на платформе «1С-Битрикс».
-
РАЗРАБОТКА САЙТА ДЛЯ АВТОТЕХЦЕНТРА
-
Верстка сайта
-
HTML верстка сайта – это размещение элементов web-страницы так, чтобы максимально упростить поиск необходимой информации на сайте, и, как можно лучше, донести до посетителя идею сайта.
Верстка это, прежде всего деление страницы сайта на логические блоки: верхняя часть, центральная часть, боковые части, нижняя часть. Причем, каждая из логических частей также может быть разбита на более мелкие составляющие части.
Ш 
апка сайта (header) – это верхняя часть сайта. Как правило, содержит в себе основную картинку (рисунок), растянутый во всю ширину, а так же может содержать логотип сайта, название (имя) сайта, или другую информацию, которую пользователь увидит в первую очередь после загрузки страницы. Шапка сайта показана на рисунке 6.
Рисунок 6 – Шапка сайта
Html код верстки шапки сайта:
<header>
<div id="logo">
</div>
<div class="title">
</div>
<div class="slogan">
</div>
<div class="contacts">
</div>
<div class="phones">
<div>
</header>
Центральная часть содержит основной контент.
Контент – это информация (статьи, аудио, видео, изображение и т. д.). Другими словами – это все то, ради чего посетитель приходит на сайт.
К 
онтент – это основа любого интернет ресурса и от его качества зависит посещаемость и заработок на сайте. Поэтому вебмастер должен приложить все усилия, чтобы наполнить свой ресурс качественной и уникальной информацией, которая будет нравиться посетителям. Центральная часть сайта показана на рисунке 7.
Рисунок 7 – Центральная часть сайта
Html код вёрстки контента:
<div id="content">
<div id="left">
<div class="left-col">
<div>
<div class="center">
</div>
</div>
<div id="right">
<div class="way">
</div>
<div class="review">
</div>
<div class="right-column-reviews">
</div>
</div>
</div>
Футер или так называемый «Подвал» можно найти в самой нижней части сайта, в нем обычно дублируется информация из горизонтального меню и контактная информация из шапки. Этот раздел очень важен для удобства пользователя, так как отменяет необходимость возвращаться к началу страницы, экономит время и облегчает поиск.
Н 
ижняя часть сайта показана на рисунке 8.
Рисунок 8 – Нижняя часть сайта
Html код нижней части сайта:
<footer>
</footer>
-
Программирование сайта. Наполнение сайта информацией
После вёрстки сайта можно приступить к программированию и наполнению информацией.
Начинается программирование с верхней части сайта. После вёрстки шапки появились контейнеры(теги div).В этих контейнерах и будет находиться код.
<div id="logo">
<a href="<?=SITE_DIR?>" title="Перейти на главную страницу сайта">
<img src="/bitrix/templates/alfa-service/images/car.png" alt="Техавтоцентр " />
</a></div>
<div class=" title ">
<a href="<?=SITE_DIR?>">Техавтоцентр </a>
</div>
<div class="slogan">Профессиональное техобслуживание и ремонт автомобилей</div>
<div class="contacts">
<p><strong><a href="<?=SITE_DIR?>contacts/">Контакты</a></strong></p>
<p>Мы работаем<br/>с 8 до 22, без выходных</p>
</div>
<div class="phones">
<strong>(495) 111-22-33</strong> <strong>(495) 111-22-33</strong>
<div>
Код <?=SITE_DIR?> означает ссылку на главную страницу(если нет другого условия)
С помощью кода:
<?$APPLICATION->IncludeComponent("bitrix:news.list", "header-model-list", Array(
"DISPLAY_DATE" => "Y", // Выводить дату элемента
"DISPLAY_NAME" => "Y", // Выводить название элемента
"DISPLAY_PICTURE" => "Y", // Выводить изображение для анонса
"DISPLAY_PREVIEW_TEXT" => "Y", // Выводить текст анонса
"AJAX_MODE" => "N", // Включить режим AJAX
"IBLOCK_TYPE" => "alfa_service", // Тип информационного блока (используется только для проверки)
"IBLOCK_ID" => "3", // Код информационного блока
"NEWS_COUNT" => "20", // Количество новостей на странице
"SORT_BY1" => "ACTIVE_FROM", // Поле для первой сортировки новостей
"SORT_ORDER1" => "DESC", // Направление для первой сортировки новостей
"SORT_BY2" => "SORT", // Поле для второй сортировки новостей
"SORT_ORDER2" => "ASC", // Направление для второй сортировки новостей
"FILTER_NAME" => "", // Фильтр
"FIELD_CODE" => "", // Поля
"PROPERTY_CODE" => "", // Свойства
"CHECK_DATES" => "Y", // Показывать только активные на данный момент элементы
"DETAIL_URL" => "", // URL страницы детального просмотра (по умолчанию - из настроек инфоблока)
"PREVIEW_TRUNCATE_LEN" => "", // Максимальная длина анонса для вывода (только для типа текст)
"ACTIVE_DATE_FORMAT" => "d.m.Y", // Формат показа даты
"SET_TITLE" => "N", // Устанавливать заголовок страницы
"SET_STATUS_404" => "N", // Устанавливать статус 404, если не найдены элемент или раздел
"INCLUDE_IBLOCK_INTO_CHAIN" => "N", // Включать инфоблок в цепочку навигации
"ADD_SECTIONS_CHAIN" => "N", // Включать раздел в цепочку навигации
"HIDE_LINK_WHEN_NO_DETAIL" => "N", // Скрывать ссылку, если нет детального описания
"PARENT_SECTION" => "", // ID раздела
"PARENT_SECTION_CODE" => "", // Код раздела
"CACHE_TYPE" => "A", // Тип кеширования
"CACHE_TIME" => "3600", // Время кеширования (сек.)
"CACHE_FILTER" => "N", // Кэшировать при установленном фильтре
"CACHE_GROUPS" => "N", // Учитывать права доступа
"DISPLAY_TOP_PAGER" => "N", // Выводить над списком
"DISPLAY_BOTTOM_PAGER" => "N", // Выводить под списком
"PAGER_TITLE" => "Новости", // Название категорий
"PAGER_SHOW_ALWAYS" => "N", // Выводить всегда
"PAGER_TEMPLATE" => "", // Название шаблона
"PAGER_DESC_NUMBERING" => "N", // Использовать обратную навигацию
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000", // Время кеширования страниц для обратной навигации
"PAGER_SHOW_ALL" => "N", // Показывать ссылку "Все"
"AJAX_OPTION_SHADOW" => "Y", // Включить затенение
"AJAX_OPTION_JUMP" => "N", // Включить прокрутку к началу компонента
"AJAX_OPTION_STYLE" => "Y", // Включить подгрузку стилей
"AJAX_OPTION_HISTORY" => "N", // Включить эмуляцию навигации браузера
),
false
);?>
выводиться инфоблок “Марки машин”.
С помощью следующего php кода создаётся горизонтальное меню сайта, где каждая строка кода отвечает за определённое свойство данного меню.
<? $APPLICATION->IncludeComponent('bitrix:menu', "horizontal", array(
"ROOT_MENU_TYPE" => "top", //Тип меню
"MENU_CACHE_TYPE" => "Y", //Тип кэширования
"MENU_CACHE_TIME" => "3600", //Время кэширования
"MENU_CACHE_USE_GROUPS" => "Y", //Учитывать права дотупа
"MENU_CACHE_GET_VARS" => array(),
"MAX_LEVEL" => "1", //Уровень вложенности меню
"USE_EXT" => "N",
"ALLOW_MULTI_SELECT" => "N"
)
);?>
Горизонтальное меню представлено на рисунке 9.
Р 
исунок 9 – Горизонтально меню
Для левой колонки, центральной части сайта, создаётся включаемая область с помощью php кода.
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "sect",
"AREA_FILE_SUFFIX" => "left_column",
"AREA_FILE_RECURSIVE" => "Y",
"EDIT_TEMPLATE" => "page_inc.php"
),
false
);?>
Так же эта область создаётся и для правой колонки. Включаемая область нужна для того, чтобы можно было работать с этой колонкой, в конструкторе, отдельно от рабочей области.
Рабочая область создаётся между левой и правой колонкой с помощью класса #WORK_AREA#.
С
помощью визуального редактора, центральную часть сайта, или ещё её называют рабочей областью, наполняем информацией.
Рисунок 10 – Визуальный редактор
В итоге данная информация будет показана на главной странице сайта, где её смогут посмотреть все зашедшие пользователи. Такие же действия можно проделать и на остальных страницах.
Так же с помощью визуального редактора можно редактировать включаемые области. Заполним левую включаемую область с помощью визуального редактора.
Рисунок 11 – Левая область в визуальном редакторе
Рассмотрим, из чего состоит левая колонка. Вначале находится обычный заголовок второго уровня и это заголовок является ссылкой для раздела «услуги и цены».
<h2>
<a href="<?=SITE_DIR?>services-menu/">Услуги и цены</a>
</h2>
Так же с помощью редактора можно добавлять различные компоненты. В левой области используются два компонента «Меню» и «Список новостей» .
С помощью компонента «Меню» создаётся вертикальное меню.
С помощью второго компонента создаётся список новостей, с помощью которого в данную область выводятся последние добавленные новости.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
