Создание шаблона Joomla за 6 шагов. Введение.

В данной серии уроков мы разберемся, как создавать собственные шаблоны для Joomla. Весь процесс будет проделан с нуля до вполне рабочего варианта.

 

План

В уроках будут раскрыты следующие вопросы.

  • Что из себя представляет шаблон Joomla? Какие функции он выполняет? Какая разница между шаблоном, который не имеет содержания, и шаблоном, который наполнен данными CMS?
  • Чем отличается процесс разработки шаблона на локальном компьютере от процесса создания статических HTML страниц? 
  • К чему ведет дизайн шаблона без таблиц в Joomla, и какая связь между стандартами W3C, удобством использования и  доступностью интерфейса?
  • Какие файлы должны входить в шаблон Joomla и какие функции они выполняют?
  • Как создать шаблон из 3-х колонок с помощью CSS, а не табличной структуры?
  • Какие основные стили CSS следует использовать в Joomla, и какие стили по умолчанию используются ядром CMS?
  • Как размещать и задавать стили для модулей, и как использовать новые техники для скругленных углов?
  • Как проще построить меню CSS, которое будет имитировать эффекты меню, сделанного с помощью JavaScript?
  • Как управлять выводом и отключением колонок, когда в них отсутствует содержание?
  • Какие шаги надо сделать для создания шаблона для Joomla 1.6?

 

Что такое шаблон Joomla?

Шаблон Joomla - это набор файлов в CMS Joomla, которые управляют представлением данных. Шаблон не является веб сайтом и не рассматривается как завершенный дизайн сайта. Шаблон представляет собой основание дизайна для вывода веб сайта под управлением CMS Joomla. Для достижения эффекта завершенного дизайна шаблон плотно взаимодействует с содержанием сайта, которое хранится в базе данных Joomla.

Стили шаблона созданы так, что при вставке данных, они автоматически наследуют правила оформления, определенные в шаблоне для ссылок, меню, навигации, текста и прочих элементов.

Использование шаблона так, как это организовано в Joomla, имеет ряд преимуществ:

  • Joomla выполняет всю работу по размещению содержания на сайте. Вы можете добавить новую информацию просто набрав текст статьи. Шаблон со своими стилями CSS сделает внешний вид соответствующим общему дизайну сайта.
  • Содержание и его представление разделены. Особенно четко разделение проявляется при использовании CSS в шаблоне (в противоположность задействованию таблиц в файле index.php). Данный фактор является основным критерием для определения соответствия сайта новейшим стандартам веб разработки. В соответствии со стандартами HTML теги таблиц могут использоваться только для представления табличных данных, но не для разметки структуры страницы в виде колонок.
  • Новый шаблон, соответственно, и новый вид веб сайта может быть применен мгновенно. Так могут быть изменены положения модулей и содержания, цвета и графика страниц.

 

Процесс разработки дизайна на локальном компьютере

Страницы сайта, работающего под управлением Joomla не являются статическими. Они генерируются динамически из содержания, которое хранится в базе данных. При изменении данных изменяются все страницы, которые отображали эти данные. Страницы создаются набором PHP команд в шаблоне, которые генерируют запросы к базе данных. Так как шаблон выглядит как строчки кода без содержания, то процесс создания представляет определенную трудность.

Весьма распространенной практикой является использование визуальных редакторов для редактирования кода HTML (например, Dreamweaver), что снижает требования к знанию команд HTML. Однако, использование возможностей таких редакторов для создания шаблона Joomla будет весьма ограничено, так как они не выводят динамических страниц.  Придется редактировать код шаблона и его стилей CSS вручную и просматривать результат работы PHP на тестовых страницах, которые надо будет обновлять после внесения изменений. При наличии достаточно быстрого соединения можно использовать удаленный и даже реальный веб сервер. Но большинство дизайнеров использует веб сервер, установленный на локальный компьютер (localhost). Обычно это программное обеспечение, которое генерирует веб страницы, расположенные в специальной папке.

Нет правильного метода создания страниц. Все зависит от разработчика и его пристрастий. Есть те, кто больше расположен к созданию графического "образа" страницы (например, в программе Фотошоп), а затем разбивает его на отдельные изображения, используемые на веб сайте. Другие дизайнеры сразу погружаются в код CSS и начинают генерировать правила для шрифтов, рамок и фонов. Но вы, как разработчик шаблона Joomla, будете ограничены тем фактом, что нельзя сразу увидеть эффект изменений кода в редакторе, поэтому можно рекомендовать следующий процесс разработки:

  1. Иметь под рукой запущенный на локальном компьютере сервер с содержанием под управлением Joomla.
  2. Редактировать код HTML и CSS в редакторе и сохранять изменения на сервере.
  3. Смотреть результат изменений в веб браузере.

 

Использование сервера на локальном компьютере

Для дальнейших действий в уроках вам понадобится локальный веб сервер. Если вы его еще не установили, самое время разобраться и сделать это. В качестве простых вариантов возможно использовать DENWER или XAMPP. Существует большое количество описаний процесса установки локального сервера.

В папке веб сервера вы можете редактировать шаблон HTML и файлы CSS с помощью любимого редактора, а в браузере смотреть на результат своих действий. После сохранения изменений останется только перезагрузить страницу. Файлы можно оставлять открытыми в редакторе.

 

W3C и стандарты

Удобство использования, доступность и оптимизация для поисковых серверов (SEO) - данные термины используются для описания отличных веб страниц. Но в  реальности все три термина очень сильно перекрывают друг друга. И страница, демонстрирующая отменные характеристики по одному пункту обычно хороша и в остальном. Самым простым методом будет использование рабочей среды, удовлетворяющей стандартам W3C. 

Например, посетитель со слабым зрением может легко изучить сайт, который семантически структурирован, с помощью программы для чтения с экрана. Но такой сайт будет легко читать и роботу поискового сервера. 

Чтобы понимать, откуда пришли веб стандарты, следует вспомнить историю. Много страниц разработаны специально для старых браузеров. Почему? Браузеры постоянно развиваются с момента появления WWW. Каждое новое поколение браузеров имеет новые функции, и производители используют для таких функций разные, часто свои собственные, теги. Каждый браузер имеет склонность использовать разный синтаксис, или "диалекты", и собственные реализации для одних и тех же базовых структур HTML.  Новые браузеры появляются, старые сходят со сцены (помните Netscape?).

Другим фактором усложнения ситуации является то, что исторически разные производители браузеров (например, Microsoft) имеют тенденцию интерпретировать HTML немножко по другому. Следовательно, веб дизайнерам  приходится прилагать усилия для поддержки старых версий браузеров.

Стандарты W3C созданы для достижения согласованности в коде веб страниц. Сайт, соответствующий стандартам W3C, имеет отличную базу, которая делает его удобным в использовании, доступным и оптимизированным для поисковых серверов.

Проверить соответствие сайта стандартам W3C можно с помощью специального сервиса validator.w3.org. Это просто и бесплатно. Нужно только правильно установить DOCTYPE. Сайт, который проходит проверку на соответствие W3C, использует семантически верный код HTML и разделение содержание и представления.

 

Семантически правильный код

Термин "семантически правильный" означает, что HTML теги на веб странице используются только для описания содержания, но не для представления. В частности, это означает структурную организацию кода с помощью тегов h1, h2 и так далее, а также таблиц только для описания табличных данных, а не для создания структуры шаблона.

Следует также использовать семантические имена для различных областей шаблона. Например, при создании двух или трех колоночного шаблона лучше использовать не названия "left" (левый) и "right" (правый), а  "sidebar" или "side". При задании соответствия кода HTML и классов CSS назначение областей будет понятно из названия.

 

CSS

CSS является простым механизмом для изменения стилей для различных элементов шаблона. В качестве примера можно посмотреть сайт CSS Zen Garden, на котором можно выбрать разные стили отображения одного содержания. 

Разработка сайтов под управлением Joomla в настоящее время существенно приблизилась к реализации стандартов W3C. В первых версиях в коде использовалось большое количество таблиц для организации структуры страниц, что не соответствовало ни семантически правильному коду, ни технике разделения содержания и представления. Проблема проявляется в факте, что многие разработчики компонентов и модулей до сих пор используют таблицы для своих шаблонов.

К счастью, команда разработчиков Joomla пересмотрела свой подход. В версии 1.5 появилась возможность изменять вид по своему усмотрению с полноценным использованием CSS.

 

Анонс

В следующих уроках будет рассмотрен процесс построения шаблона Joomla.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 16 Июня 2011
Просмотров: 119355
Правила перепечатки


5 последних уроков рубрики "Joomla!"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Июня 2011 23:49
    dimaxp
    Отлично! работаю с джомла, но материал наверное будет очень полезным) Узнаю много нового! жду жду жду
  • 17 Июня 2011 06:29
    Frozen54rus
    Отлично! Жду продолжения. Очень даже не плохой урок =)
  • 17 Июня 2011 09:06
    WI_Wind
    Во! Классно, жду!!!
  • 17 Июня 2011 09:15
    Дмитрий Арефьев
    Что интересно! Сайт на MODx, а по этой CMS нет ни одного урока! :-)
    • 18 Июня 2011 19:19
      Evgenics
      MODx Revo крутая штука
    • 19 Июня 2011 20:40
      Владислав
      Разве не самописная CMS?
  • 17 Июня 2011 10:39
    gelogus
    Тоже жду)
  • 17 Июня 2011 10:52
    m4a1fox
    не спортивные вы все тут однако!!!!
  • 17 Июня 2011 13:31
    ppaull
    Самим нужно CMS писать!
    • 21 Июня 2011 17:36
      politaev
      Интересно зачем её писать??? Грамотные программисты годы на это тратят... Не думаю что пару месяцев самописки это будет CMS скорее просто какие то наработки...Тем более опыта должно быть огого сколько... Думаю стоит подходящую CMS и работать с ней... А если хочется код пописать и быстрое и сложное приложение - фреймворк...)) Из CMS хорош и быстр MODX (уроки по нему есть!) Из фреймворков CI, Kohana, Yii.
  • 17 Июня 2011 16:45
    slav541
    Я за творчество! Применяем техническую мысль в действительности!!! Ушел по ссылке контекстной рекламы!
  • 17 Июня 2011 19:42
    Super_Sanya
    Давно пора. респект вам!
  • 17 Июня 2011 20:02
    hitman4uk
    И что интересного в етой Joomla. Разви не интересно создать все самому??? Ну ладно надо 5000 строк кода написать но етот сайт и создан для того чтоби учиться. Сергей Фастунов - Вам неуважение с моей сторони....для меня етот урок не имеет никакого смисла....
    • 21 Июня 2011 17:46
      politaev
      А фишка в том что на сайте в основном что то поверхностное (для новичков..) Когда сюда пришел (2009г) был доволен (САЙТ ХОРОШИЙ НИЗКИЙ ПОКЛОН ПОПОВУ И ПО СЕЙ ДЕНЬ!)... Хватило меня тут на 0,5-1г. .. Может стоит развиваться в проф. сторону?? Например XML ? xPath ? Xslt? AJAX ? И начать их разбирать нормально))) web разработка php и mysql не заканчивается... Хотелось бы это видеть...
      • 25 Июня 2011 14:04
        hitman4uk
        Так тебе что лучше: Joomla или самому все писать??
        • 26 Июня 2011 21:26
          politaev
          Велосипед уже есть зачем всё с 0 писать...Joomla слишком медленная,и много чего не нужного... опять же зависит от проекта..
    • 28 Ноября 2011 16:56
      loky30
      Надо исходить от цели, времени и ресурсов. Если цель создать быстро сайт не нанимая программистов и не тратя много времени я выберу CMS. А если мне потребуется создать специфический сайт и на него будет высокая нагрузка, тогда найму программистов с опытом.
  • 18 Июня 2011 15:58
    nastyamn
    спасибо большое,жду продолжения :)
  • 19 Июня 2011 15:15
    MayheM
    В заголовке стоило бы указать что для джумлы версии 1.6, на которую пока только переводят все модули, компоненты и др. Шаблон Joomla - это набор файлов в CMS Joomla_?_ которые управляют представление данных. И исправьте ссылку на первоисточник.
^ Наверх ^