ПЗ (1212777), страница 5
Текст из файла (страница 5)
Рисунок 18 – Шаблон Master2
Для визуального оформления и изменения CSS-шаблона потребуется браузер Google Chrome и Notepad++. Используется специальная панель для web-мастера, с помощью которой можно визуально оценить работу стилей, примененных к определенным элементам. Данная панель отображается при нажатии F12.
Были преображены кнопки социальных сетей и вид меню. Они стали более интересными, объемными и качественными.
По цветовому содержанию данный шаблон не подходит под фирменный стиль организации, поэтому необходимо его изменить. Для этого потребуются файл theme.css, а также файлы рисунков, находящиеся в папке images.
Необходимо изменить цвет фона на бесшовный фон, и задать границы для фирменного стиля организации. Для этого в файле theme.css необходимо найти параметр, отвечающий за цвет фона. Для фона сайта было решено использовать не однотонный фон, а фото-фон (т.е. небольшая по объему картинка). Ниже представлен фрагмент кода для решения этой задачи.
body {
color: #444444;
background-image: radial-gradient(100% 100% at center, #ffffff, #ffffff); background: url(../../../images/4.png) 0 0 repeat;
}
Для наибольшего акцентирования определенной области на странице было решено добавить границу между основным фоном и указанной областью, т.е. выделить на теле сайта зону для добавления информации. Фрагмент кода для создания границы, изменения цвета и параметров отображения текста основного окна представлен ниже.
tm-content > :last-child {
padding: 15px;
background: #fafafa;
box-shadow: 0 1px 3px rgb(254, 64, 6);
Требование заказчика к дизайну логотипа – придерживаться основного цветового стиля. Создание логотипа произведено в программе Picasa. Файл с логотипом помещен в папку images, путь к логотипу прописан в файле theme.php. Фрагмент соответствующего кода представлен ниже.
<a href="<?php echo $this['config']->get('site_url'); ?>">
<img src="images/logo.png" width="700" height="53"></a>
Требование заказчика предполагает наличие двух кнопок социальных сетей. Иконки на странице реализуются с помощью специальных иконочных шрифтов, действия для них настраиваются в модуле административной панели. Итоговый код страницы представлен ниже.
<div class="uk-margin-top">
<a href="https://vk.com/club136684011" target="_blank" class="uk-icon-button uk-icon-vk" rel="noopener noreferrer"></a>
<a href="https://ok.ru/profile/566869541716" target="_blank" class="uk-icon-button uk-icon-ok" rel="noopener noreferrer"></a></div>
-
Создание структуры меню и модулей.
Требование заказчика к меню сайта представлено ниже на рисунке 19.
Рисунок 19 – Структура меню сайта
Для создания собственной структуры меню необходимо использовать панель администратора «JOOMLA!». Реализация структуры меню происходит на вкладке «Меню – Менеджер меню – Main Menu». Исходя из требований заказчика реализуются следующие пункты меню, представленные на рисунке 20.
Рисунок 20 – Пункты меню
Далее необходимо отредактировать модули, которые применяются в шаблоне, т.е. оставить только те, которые нужны для сайта (рисунок 21).
Рисунок 21 – Необходимые модули для сайта
Оставленные модули выполняют следующие функции:
-
«Хлебные крошки» – навигатор сайта, при помощи этого модуля можно определить, в каком разделе находится пользователь;
-
«Footer Menu» – модуль, с помощью которого отображается нижнее меню, дублирующее основное меню сайта, для его реализации в настройках «Менеджера меню» для каждого компонента указываются ссылки на основное меню (рисунок);
Рисунок 22 – Реализация Footer Menu
-
«Футер» – модуль, в котором реализуется подпись сайта (на разрабатываемом сайте – это ссылка на основной сайт организации);
-
«Social icons» – модуль для социальных иконок;
-
«Main Menu» – модуль, отвечающий за главное меню сайта;
-
«Поиск» – модуль, отвечающий за поиск по сайту.
-
Создание категорий и наполнение сайта.
Для размещения материалов на сайте предварительно необходимо создать категории, а далее – создать материал для этой категории и добавить их в меню [28]. Создаются категории в панели администратора «Менеджер категорий», далее для этих категорий создаются материалы (см. рис), которые были предоставлены предприятием для отображения на сайте [29].
Рисунок 23 - Наименование материалов
После проведенных настроек и действий страницы сайта имеют вид, представленный ниже.
Рисунок 24 – Окно главной страницы
Рисунок 25 – Окно страницы «Цены»
На данной странице ниже представлена контактная информация организации, содержащая ссылки «Группа Вконтакте», «Группа одноклассники» и карта места расположения. При нажатии на ссылки соответствующие страницы открываются в новых вкладках.
Рисунок 26 – Окно страницы «Контакты»
Страница «Фотоальбом» заполняется качественными фотографиями, обработанными в фоторедакторе Picasa (рисунок 27).
Рисунок 27 – Окно страницы «фотоальбом»
По требованиям заказчика фотогалерея сайта должно иметь хорошую визуализацию картинок, с разворотом их на всю страницу, с возможностью просматривать фото поочередно, а также поддерживать функцию слайд-шоу. Для удовлетворения потребностей заказчика подходит плагин Mavik Thumbnails. Результат его использования представлен на рисунке 28.
Рисунок 28 – Результат работы плагина Mavik Thumbnails
Добавление формы обратной связи реализовано на странице «Контакты» при помощи модуля Fox Contact. Определение области для обратной связи реализуется при помощи команды /?tp=1.
Настройки компонента модуля Fox Contact: необходимо указать адрес электронной почты администратора, т.к. на его почту будут приходить письма с формы обратной связи, настроить вид полей формы при помощи CSS-стилей. Так же была использована возможность отправки от пользователей файлов любых форматов с ограничением по размеру файла.
Рисунок 29 – Форма обратной связи
-
Создание уникальной «иконки» для вкладки сайта.
Favicon (сокр. от англ. FAVorites ICON – «значок для избранного», от названия папки с закладками в Microsoft Internet Explorer) – значок web-сайта или web-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Используются изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.
Для создания можно воспользоваться профессиональным графическим редактором, либо программой, специально созданной для конвертирования изображений в формат ICO с соответствующим размером (например, Favicon Create). Также, в сети «Интернет» существуют бесплатные и легкие в использовании сервисы для преобразования графических файлов различных форматов в favicon.ico (http://www.favicon.cc/, http://favicon.ru ).
Сервис, расположенный на сайте http://www.favicon.cc, позволяет не только конвертировать файлы распространенных графический форматов в файл favicon.ico, но и редактировать полученные результаты.
В результате использования данного сервиса получена «иконка», изображенная на рисунке 30.
Рисунок 30 – «Иконка» сайта
-
Оптимизация сайта
На разрабатываемом сайте были произведены следующие действия для оптимизации:
-
написание качественного, уникального и интересного контента;
-
создание базы ключевых слов;
-
модификация мета-тегов для оптимизации сайта. Содержание мета-тегов <description> и <keywords> было изменено с использование данных организации-заказчика (рисунок 31). Для мета-тега <description> было сформулировано краткое описание, мета-тег <keywords> был заполнен ключевыми словами о компании. Параметры мета-тега необходимо прописать для всех категорий и материалов сайта, для наилучшей оптимизации;
Рисунок 31 – Настройка мета-тегов для поисковой оптимизации
-
оптимизация картинок сайта. Процесс работы с изображениями описан в пункте 3.1.3;
-
оптимизация URL сайта. Для того, чтобы ссылки на сайт имели удобный вид для поисковой системы и пользователя, необходимо в панели администратора «JOOMLA!» в настройке системы изменить параметры SEO, а именно «перенаправление URL» необходимо скрыть (рисунок 32). До оптимизации ссылка имела следующий вид: http://localhost/energy.ru/index.php/kontakty. После оптимизации ссылка имеет вид: http://localhost/energy.ru/kontakty;
Рисунок 32 – Настройки SEO
-
оптимизация структуры и навигации сайта;
-
продвижение сайта через социальные сети.
Также планируются следующие виды оптимизации сайта:
-
регистрацию сайта в каталогах таких как: Google, Yandex, Mail;
-
самостоятельное наращивание ссылочной массы (регистрация на досках объявлений, обмен ссылками с тематическими сайтами, размещение ссылок сайта на трастовых сайтах, комментирование других сайтов);
-
продвижении сайта уникальными статьями с помощью других сайтов;
-
организация конкурсов или акций для большего привлечения клиентов.
Для защиты административной панели сайта необходимо установить плагин AskMyAdmin (рисунок 33), настройка данного плагина заключается в вводе ключа и значения, которое знает только администратор, для защиты сайта. Теперь для перехода в панель администратора, необходимо в адресной строке ввести следующий адрес:
http://localhost/Energy.ru/administrator/?ai7avvhe=mt21w056
Рисунок 33 – Настройка плагина AskMyAdmin
Для защиты сайта от хакерских SQL-атак необходимо установить плагин JHackGuard (рисунок 34) и запустить, вся оптимизация проходит автоматически [30].
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
