Создание шаблонов Joomla (fb2) читать постранично, страница - 2
- Создание шаблонов Joomla (а.с. Документация к joomla на русском языке) 1.02 Мб, 25с. скачать: (fb2) читать: (полностью) - (постранично) - Автор неизвестен
[Настройки текста] [Cбросить фильтры]
- 1
- 2
- 3
- 4
- . . .
- последняя (10) »
Шаблонов (Template Manager).
Метаданные в XML файлах представляют собой текстовые элементы с открывающими и закрывающими тегами. Например:
<name>Joomla_book</name>
В отличие от HTML в XML нет предопределенных тегов. Пользователь может самостоятельно организовывать структуру и именовать теги.
Пример «гибкого» шаблона: если горизонтальное разрешение вашего экрана 2048 пикселей и окно веб обозревателя развернуто, шаблон «растянется» до размеров окна. Однако полученное при этом изображение может выглядеть несколько странно, особенно, если вы используете графические или немасштабируемые элементы, как логотипы или подписи.
Второй вариант – это определится с разрешением шаблона, и размещать элементы на шаблоне, используя пиксельные координаты. Преимуществом данного метода является то, что вы всегда можете быть уверены, что шаблон отобразится правильно не зависимо от разрешения монитора пользователя. Хотя, если разрешение пользовательского монитора 1400 на 1050 пикселей а размер шаблона 800 на 600, он будет несколько «теряться» в окне веб обозревателя.
Однозначного решения, какой из типов шаблона использовать, нет. Если вы предпочитаете фиксированный размер, стоит выбрать размер удобный для любого монитора (800 на 600 пикселей). Учитывая то, что каждый веб обозреватель имеет полосу прокрутки справа, а само окно обозревателя находится в рамке, ширину шаблона можно сделать еще меньше, например 780 пикселей.
Рис. 1: Структура
Секция 1: Часть 1: Тут стоит разместить логотип или название сайта Часть 2: Тут стоит разместить поисковое поле Часть 3: Тут стоит разместить навигационные ссылки
Секция 2: Часть 4: В левой колонке размещаются самые важные меню Часть 5: Тут размещается основной контент сайта Часть 6: В правой колонке можно разместить дополнительные меню
Секция 3: Часть 7: Нижняя часть страницы (footer)
Листинг 1:HTML файл
<html> <head> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="780" border="1"> <!– Section 1 –> <tr> <!– Part 1 –> <td colspan="2" height="89" bgcolor="#F5C228"> </td> <!– Part 2 –> <td width="178" height="120" rowspan="2" bgcolor="#FFCC33"> </td> </tr> <tr> <!– Part 3 –> <td colspan="2" height="33" bgcolor="#FFCC33"> </td> </tr> <!– Section 2 –> <tr> <!– Part 4 –> <td width="197" height="233" bgcolor="#F5EE28"> </td> <!– Part 5 –> <td width="389" height="233"> </td> <!– Part 6 –> <td width="178" height="233" bgcolor="#FFFF33"> </td> </tr> <!– Section 3 –> <tr bgcolor="#FFCC33"> <!– Part 7 –> <td colspan="3" height="40"> </td> </tr> </table> </body> </html>
Листинг 2: CSS файл
body { font-family: Arial, Helvetica, Sans Serif; }
Данный код несколько упрощен, а его заглавная часть (<head>…</head>) не совсем отвечает стандарту XHTML. Также таблица имеет визуальную границу между ячейками (атрибут border=1), позволяющую легче увидеть структуру шаблона. Теперь вы можете максимально воспользоваться своим воображением и креативными способностями в плане подбора цветовой гаммы
Создание собственных шаблонов
Теперь сфокусируемся на том, как создать собственный шаблон. Перед началом работы над шаблоном необходимо обдумать некоторые ключевые моменты. Рассмотрим их по порядку.Концепция
Перед началом работы необходимо определить концепцию. Для графического воплощения концепции целесообразно создать набросок или диаграмму шаблона. При этом вы вольны воспользоваться любыми удобными для вас средствами. Это может быть Adobe Photoshop, Microsoft Paint, любой другой графический редактор или просто листок бумаги.Фиксированный или изменяемый размер
Вы можете создать два типа шаблонов. Шаблоны, адаптирующие свой размер под размеры окна веб обозревателя или шаблоны фиксированного размера.Пример «гибкого» шаблона: если горизонтальное разрешение вашего экрана 2048 пикселей и окно веб обозревателя развернуто, шаблон «растянется» до размеров окна. Однако полученное при этом изображение может выглядеть несколько странно, особенно, если вы используете графические или немасштабируемые элементы, как логотипы или подписи.
Второй вариант – это определится с разрешением шаблона, и размещать элементы на шаблоне, используя пиксельные координаты. Преимуществом данного метода является то, что вы всегда можете быть уверены, что шаблон отобразится правильно не зависимо от разрешения монитора пользователя. Хотя, если разрешение пользовательского монитора 1400 на 1050 пикселей а размер шаблона 800 на 600, он будет несколько «теряться» в окне веб обозревателя.
Однозначного решения, какой из типов шаблона использовать, нет. Если вы предпочитаете фиксированный размер, стоит выбрать размер удобный для любого монитора (800 на 600 пикселей). Учитывая то, что каждый веб обозреватель имеет полосу прокрутки справа, а само окно обозревателя находится в рамке, ширину шаблона можно сделать еще меньше, например 780 пикселей.
Структура
Так как вы имеете дело с отображением структурированных данных, необходимо определится с общим размещением. Обычно Joomla! использует структуру размещения элементов показанную ниже:Рис. 1: Структура
Секция 1: Часть 1: Тут стоит разместить логотип или название сайта Часть 2: Тут стоит разместить поисковое поле Часть 3: Тут стоит разместить навигационные ссылки
Секция 2: Часть 4: В левой колонке размещаются самые важные меню Часть 5: Тут размещается основной контент сайта Часть 6: В правой колонке можно разместить дополнительные меню
Секция 3: Часть 7: Нижняя часть страницы (footer)
Переход на HTML
Теперь необходимо превратить нашу концепцию в HTML код. В зависимости от графического редактора, который вы использовали для разработки концепции шаблона, существует вероятность, что изображение может быть конвертировано в HTML автоматически. Это также можно сделать вручную с помощью текстового редактора Notepad или HTML редактора, такого, как Macromedia Dreamweaver (http://www.macromedia.com/software/dreamweaver), или одного из многочисленных бесплатных HTML редакторов (http://www.thefreecountry.com/webmaster/htmleditors.shtml). Исходный HTML код при этом может выглядеть таким образом:Листинг 1:HTML файл
<html> <head> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="780" border="1"> <!– Section 1 –> <tr> <!– Part 1 –> <td colspan="2" height="89" bgcolor="#F5C228"> </td> <!– Part 2 –> <td width="178" height="120" rowspan="2" bgcolor="#FFCC33"> </td> </tr> <tr> <!– Part 3 –> <td colspan="2" height="33" bgcolor="#FFCC33"> </td> </tr> <!– Section 2 –> <tr> <!– Part 4 –> <td width="197" height="233" bgcolor="#F5EE28"> </td> <!– Part 5 –> <td width="389" height="233"> </td> <!– Part 6 –> <td width="178" height="233" bgcolor="#FFFF33"> </td> </tr> <!– Section 3 –> <tr bgcolor="#FFCC33"> <!– Part 7 –> <td colspan="3" height="40"> </td> </tr> </table> </body> </html>
Листинг 2: CSS файл
body { font-family: Arial, Helvetica, Sans Serif; }
Данный код несколько упрощен, а его заглавная часть (<head>…</head>) не совсем отвечает стандарту XHTML. Также таблица имеет визуальную границу между ячейками (атрибут border=1), позволяющую легче увидеть структуру шаблона. Теперь вы можете максимально воспользоваться своим воображением и креативными способностями в плане подбора цветовой гаммы
- 1
- 2
- 3
- 4
- . . .
- последняя (10) »
Последние комментарии
15 часов 46 минут назад
20 часов 49 минут назад
1 день 4 часов назад
1 день 7 часов назад
1 день 7 часов назад
2 дней 18 часов назад