Наш сайт доступен в четырех расцветках, чтобы сменить расцветку нажмите на понравившуюся картинку. (Выбранная Вами расцветка сохраняется в Cookies)
def def def def

Создание шаблона Joomla за 6 шагов. Введение. » Статьи » FreeCSS.Net: Шаблоны для сайта

FreeCSS.Net - это крупный архив шаблонов для различных CMS (24 CMS), Веб форумов (5 веб форумов) и прочих готовых дизайн решений для созданания своего сайта. Помощь в установке шаблонов, статьи по веб-дизайну, форум. На нашем сайте Вы можете заработать на продаже и размещении шаблонов в наш архив.
Всего в нашем архиве 6112 различных шаблонов, а это ≈4.17 GB информации. Мы помогаем уже 7 лет различным веб-мастерам и веб-дизайнерам готовыми дизайнерскими решениями сайта.

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

Разместил: AdminПросмотрено: 2436
Категория: Установка шаблонов Joomla CMSДата: 18.06.2011
 
План

В уроках будут раскрыты следующие вопросы.
Что из себя представляет шаблон 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, будете ограничены тем фактом, что нельзя сразу увидеть эффект изменений кода в редакторе. поэтому можно рекомендовать следующий процесс разработки:

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


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

Для дальнейших действий в уроках вам понадобится локальный веб сервер. Если вы его еще не установили, самое время разобраться и сделать это. В качестве простых вариантов возможно использовать 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
Источник урока: http://net.tutsplus.com/tutorials/site-bui...a-step-by-step/
Перевел: Сергей Фастунов

Версия для печати Рейтинг: 0.00  Голосов: 0

Комментировать

Логин
Комментарий
Подтверждение кода безопасности
Код безопасности
Введите код




Быстрый переход на определенную категорию шаблонов (CMS & Форум).

Случайный шаблон


Добавлен: 01.08.2011
Размер шаблона: 2.71 MB
Версия шаблона: 1
Просмотров: 1062
Загрузить Загрузить шаблон
 Шаблон Assassin's Game для сайтов системы ucoz. Скажу по правде, очень хороший шаблон на тему популярной игры Assassin's Creed. В архиве Вы...

Все шаблоны uCoz

Меню пользователя

Здравствуйте, Guest
Guest
 личные настройки
 добавить шаблон

Регистрация
Забыли пароль?

Логин
Пароль
Сейчас онлайн
Админов: (0)
Пользователей: (0)
Ботов: (2)
Гостей: (1)
Всего: (3)
Список онлайн
oBotFiles
Yandex BotFiles

Опрос

Должно ли главное меню находится в шапке?
Меню должно быть в шапке
Меню должно быть в сайдбаре
Меню должно быть продублировано везде где можно
Меню не должно быть заметно

Спонсор страницы