СИСТЕМА УПРАВЛЕНИЯ САЙТОМ С ОТКРЫТЫМ ИСХОДНЫМ КОДОМ
РУКОВОДСТВО (пошаговое) по созданию шаблонов для Joomla 1.5
http://www.joomlaua.com – Документация к Joomla на русском языке
Создание шаблонов Joomla!
Для того, чтобы изменить внешний вид сайта и привести его в соответствие и привести его в соответствие с вашими требованиями, необходимо создать новый шаблон или изменить уже имеющийся. В этой статье вы узнаете об основах создания шаблонов в Joomla!
Корпоративная индивидуальность
Корпоративное индивидуальность (Corporate Identity или CI) – это отличительные признаки внешнего представления компании, традиционно сложившиеся за время существования компании или специально разработанные для нее.
Корпоративная индивидуальность включает:
Корпоративный образ (цены, продукция, рекламная стратегия)
Корпоративный дизайн (внешнее представление)
Корпоративное общение
Корпоративное поведение (отношение сотрудников друг к другу и к клиентам)
Данные аспекты корпоративной индивидуальности следует принять во внимание во время разработки сайта. В этот статье мы рассмотрим Корпоративный дизайн. Как минимум он состоит из логотипа, основного шрифта, и основных цветов компании. Пользователь должен «узнать» компанию впервые зайдя на ее сайт.
HTML/XHTML, CSS, XML
Аббревиатуры HTML/XHTML, CSS и XML – это Интернет технологии применяемые Joomla! Данные технологии стандартизированы консорциумом W3C (World Wide Web Consortium).
HTML/XHTML
WWW (World Wide Web или Всемирная паутина) основана на HTML. HTML – это не язык программирования. HTML является языком описания и форматирования текста. Текст при этом состоит из различных структур: заголовков, списков, частей, выделенных жирным или наклонным шрифтом, таблиц и т.д. HTML работает с помощью так называемых Тегов (tags). Тег имеет открывающую и закрывающую формы. Например, заголовок первого уровня может выглядеть следующим образом:
<h1> Это заголовок </h1>
Теги интерпретируются пользовательскими веб обозревателями (браузерами) и отображаются согласно их значению. HTML прост в изучении, а онлайновые пособия по данному языку широко доступны. Следующим этапом развития HTML стал XHTML версии 1.0
CSS
Каскадные листы стилей (Cascading Style Sheets или CSS) – это расширение HTML. CSS – это также не язык программирования. CSS можно рассматривать как своеобразный словарь свойств форматирования различных элементов HTML страницы.
С помощью CSS команд можно, например, определить, что заголовки первого уровня будут иметь размер 18 точек, использовать шрифт Arial, и иметь вертикальный отступ от следующей строки в 1.9 см. Внедрение таких опций форматирования не доступно при использовании «чистого» HTML. Необходимости в них во время разработки HTML не существовало. Однако, с растущей коммерциализацией Интернета дополнительные возможности форматирования становились все более важны.
Данные CSS можно интегрировать в HTML следующими путями:
В центральный HTML файл: Команды CSS могут быть определены в заглавной
секции HTML файла следующим образом:
<head>
<title>title of the file</title>
<style type="text/css">
<!-
/* … тут определяются css команды … */
->
</style>
</head>
В отдельном CSS файле: если команды CSS должны применяться к нескольким HTML страницам, целесообразнее хранить их в отдельном файле, прописывая путь к нему в заглавных секциях HTML файлов. Именно такой подход используется Joomla!:
<head>
<title>title of the file</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
Внутри HTML тега: Команды CSS также могут быть интегрированы в HTML теги:
<body>
<h1 style="… CSS command …">…</h1>
</body>
Данные методы могут быть без особых проблем совмещены в одном CSS файле.
Например, CSS команды, указанные в заглавной части HTML файла, могут быть заменены CSS командами, записанными внутри тегов, имеющими более высокий приоритет исполнения. Однако, практика совмещения различных методов внедрения CSS как правило приводит к появлению сложных и неудобочитаемых конструкций исходного кода. Поэтому рекомендуется использовать один из вариантов, например, размещать CSS команды только в отдельном файле.
XML
Расширенный язык разметки (Extended Markup Language или XML) – это обширный и многофункциональный мета-язык, разработанный на основе более сложного SGML (Standardized Generalized Markup Language). Зачастую XML используется для написания различных файлов настроек или обменных файлов для передачи информации между объектами. Применительно к Joomla!, XML используется как язык описания метаданных создаваемых шаблонов. Эти метаданные важны для работы Инсталлятора Шаблонов (Template Installer) и Менеджера Шаблонов (Template Manager).
Метаданные в XML файлах представляют собой текстовые элементы с открывающими и закрывающими тегами. Например:
<name>Joomla_book</name>
В отличие от HTML в XML нет предопределенных тегов. Пользователь может самостоятельно организовывать структуру и именовать теги.
Создание собственных шаблонов
Теперь сфокусируемся на том, как создать собственный шаблон. Перед началом работы над шаблоном необходимо обдумать некоторые ключевые моменты. Рассмотрим их по порядку.
Концепция
Перед началом работы необходимо определить концепцию. Для графического воплощения концепции целесообразно создать набросок или диаграмму шаблона. При этом вы вольны воспользоваться любыми удобными для вас средствами. Это может быть Adobe Photoshop, Microsoft Paint, любой другой графический редактор или просто листок бумаги.
Фиксированный или изменяемый размер
Вы можете создать два типа шаблонов. Шаблоны, адаптирующие свой размер под размеры окна веб обозревателя или шаблоны фиксированного размера.
Пример «гибкого» шаблона: если горизонтальное разрешение вашего экрана 2048 пикселей и окно веб обозревателя развернуто, шаблон «растянется» до размеров окна.
Однако полученное при этом изображение может выглядеть несколько странно, особенно, если вы используете графические или немасштабируемые элементы, как логотипы или подписи.
Второй вариант – это определится с разрешением шаблона, и размещать элементы на шаблоне, используя пиксельные координаты. Преимуществом данного метода является то, что вы всегда можете быть уверены, что шаблон отобразится правильно не зависимо от разрешения монитора пользователя. Хотя, если разрешение пользовательского монитора 1400 на 1050 пикселей а размер шаблона 800 на 600, он будет несколько «теряться» в окне веб обозревателя.