ВЕРСТКА ГРАФИЧЕСКИХ МАКЕТОВ. ПОДГОТОВКА ШАБЛОНОВ ДЛЯ ДАЛЬНЕЙШЕГО ИХ ИСПОЛЬЗОВАНИЯ CMS
Описание макета сайта
В целях эффективного и эргономичного программирования была поставлена задача создать макет, в котором, при переходе со страницы на страницу, будет меняться только информационное наполнение, добавляться/удаляться элементы дизайна, а основные элементы страницы будут оставаться неизменными.
На всех страницах сайта, кроме форума меняется только информация в блоке основного контента (Приложение А, рисунок А.1).
Таким образом, все страницы дополняются текстовым содержимым по тематике открытой страницы, графическими объектами, галереей (Приложение А, рисунок А.2). На странице форума отсутствуют блоки вывода последних книг и популярных книг (Приложение А, рисунок А.3).
После проработки дизайна, композиционной целостности и цветового решения для каждой страницы сайта, можно переходить к верстке шаблона и его последующему заполнению.
Верстка шаблона сайта
Шаблон Joomla! содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla!, каждый в собственной поддиректории.
Внутри директории шаблона находятся два ключевых файла:
· первый из них – это XML-файл шаблона – templateDetails.xml – это файл мета-данных в XML-формате, сообщающий Joomla!, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Он используется при инсталляции шаблона в административном интерфейсе.
|
|
|
· второй файл — это основной движок шаблона – index.php – этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla! CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:
/css/template.css – таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php.
/images/logo.png – любые изображения, включенные в шаблон. [2]
Первым делом создаем файл index.php.
В данном проекте используется «фиксированная» верстка. При «фиксированной» верстке, макет создается на основе тегов <div> с конкретной шириной. Выбор ширины зависит от того, на какое разрешение, настроенное на мониторе пользователя ориентируются разработчики. В данном случае – это 1024 пикселей. При разрешении выше указанного, то может создать ощущения пустого пространства, в данном случае этот недостаток компенсируется подложкой выполненной в виде графической композиции, которая так же является частью макета.
|
|
|
Базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег <div>. С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.
В данном проекте был использован простой и удобных способ верстки трехколоночного макета.
Ниже приведен код каркаса макета сайта.
<body>
<div id="header">
В данном <div>’е будет находиться шапка сайта.
</div>
<div id="content">
<div id="leftcolumn">
Данный <div> образует левую колонку.
</div>
<div id="maincolumn">
Данный <div> образует центральную колонку.
</div>
<div id="rightcolumn" style="float:right;">
Данный <div> образует правую колонку.
</div>
</div>
<div id="footer">
В данном <div>’е будет находиться «футер».
</div>
</body>
К этим основным <div>’ам будут добавляться и другие <div>’ы для правильного размещения всех элементов дизайна макета.
Правильное позиционирование и свойства отображения всех элементов макета прописываются с помощью каскадных таблиц стилей CSS, находящихся в css-файле по адресу css/template.css.
После создания файлов index.php и template.css, размещения всех необходимых изображений в директории images приступаем к созданию XML-файла templateDetails.xml. он будет выглядеть следующим образом:
|
|
|
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TEMPLATE </name>
<description>TEMPLATE_DESCRIPTION</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<filename>images/button_bg.jpg</filename>
<filename>images/content.jpg</filename>
<filename>images/content_bottom.jpg</filename>
<filename>images/h3.jpg</filename>
<filename>images/header.jpg</filename>
<filename>images/headerbottom.jpg</filename>
<filename>images/headerimg.jpg</filename>
<filename>images/headertop.jpg</filename>
<filename>images/menu_li.jpg</filename>
<filename>images/menu_row.jpg</filename>
<filename>images/search_field.jpg</filename>
<filename>images/searchbut.jpg</filename>
<filename>images/spacer.png</filename>
<filename>images/submenu_row.jpg</filename>
<filename>images/top_with_search.jpg</filename>
<filename>images/bottom_left.jpg</filename>
<filename>images/bottom_right.jpg</filename>
<filename>images/logo.png</filename>
|
|
|
<filename>css/index.html</filename>
<filename>css/template.css</filename>
<filename>css/editor.css</filename>
</files>
</install>
3.3 Подготовка шаблона для использования CMS Joomla!
Для корректного отображения шаблона в Joomla! необходимо в файл index.php прописать специальные инструкции Joomla!
В самом начале файла index.php прописывается строка:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
Это строка используется для того, чтобы система могла проверить все входящие данные, до того как они попадут в другие части, инициализировать сессию, проверить права, а также чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.
Далее необходимо прописать инструкции Joomla!, отвечающие за отображение различных модулей Joomla.
Инструкции Joomla выглядят следующим образом:
<jdoc:include type="тип" [name="имя"] [style="стиль"] />
Рассмотрим типы инструкций Joomla, которые были использованы при подготовке шаблона.
type="head" – добавляет вывод методанных, т.е. заголовков страницы, описание страницы, ключевых слов и т.д. Инструкция с данным типом распологается между тегами <head> </head>
type="modules" – выводит модули Joomla!, данный тип используется с атрибутом name="имя". Атрибут name="имя" может принимать различные значения (left, top, right, user) и определяет место вывода модуля.
type="component" – выводит компонент. Какой компонент будет использован, будет определяться ссылкой в меню.
type="message" – вывод warning сообщения.
type="module" name="breadcrumbs" – вывод модуля Навигатор сайта. [3]
Полный код макетной страницы приведен в приложении Б.
Дата добавления: 2018-08-06; просмотров: 210; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!