Донецкий техникум промышленной автоматики

Відеокурс: Шаблон Joomla 2.5 від А до Я

Привіт, любий друже!

Мене звуть Богдан, я автор сайту joomla-school.com .

Представляю вам свій відеокурс: Шаблон Joomla 2.5 від А до Я. Вивчивши його, ви дізнаєтеся всі етапи створення шаблону для кращої системи управління сайтом Joomla 2.5, а також навчитеся створювати свої унікальні шаблони.

5, а також навчитеся створювати свої унікальні шаблони

Відеокурс побудований так, що Ви практично відразу приступите до створення шаблону, а весь необхідний теоретичний матеріал буде частинами поданий в тому місці, де потрібно більш детально пояснити будь-які нові терміни, функції або властивості.

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

А всім відомо, що якісно зроблений шаблон - це обличчя сайту - його репутація. Адже зустрічають по зовнішньому вигляду, і якщо перше враження від сайту не дуже, то яку б корисну інформацію він не містив, все одно є великий ризик втратити довіру відвідувачів сайту.

Отже, в своєму видеокурсе я детально і поетапно розкриваю всі етапи створення шаблону Joomla 2.5.

А зараз я Вам розповім, як побудоване навчання.

Ось головна сторінка диска:

Ось головна сторінка диска:

Тут є два основні розділи: Відеоуроки та Довідник. Перейшовши в розділ Відеоуроки, Ви починаєте перегляд основних уроків, в яких відразу приступаєте до створення шаблону на практиці. Якщо ж Вам знадобиться теоретичний матеріал, або ж необхідно щось вивчити, що прямо не пов'язане з ходом процесу створення шаблону Joomla 2.5, то в ході відеоуроків наводяться посилання на необхідні розділи Довідника, або інших джерел.

У розділі основних відеоуроків розміщені такі уроки:

Як і належить, у веденні я розповідаю про що даний відеокурс, як ним користуватися, де і які відеоуроки розміщені, а також додаткові матеріали до них.

дивитися видеоурок

В даному відеоуроці йдеться про основні поняття про шаблони Joomla 2.5: що таке шаблон Joomla, його складові, як управляти шаблонами за допомогою менеджера шаблонів Joomla 2.5, встановлювати і видаляти їх, як включа ть і відключати перегляд позицій модулів, які є типи шаблонів, що таке стилі шаблонів, а також як ними управляти і редагувати.

дивитися видеоурок

  • 3. Технічне завдання

Технічне завдання

Тут Ви дізнаєтеся, як аналізувати технічне завдання, на що потрібно звертати увагу при його складанні для розробки шаблону Joomla. Також Ви ознайомитеся з повним обсягом робіт по створенню шаблону Joomla 2.5, який ми виконаємо у даному відеокурсу. А саме ми будемо створювати шаблон для сайту прокату ВІП-Автомобілів. Нам необхідно буде, маючи тільки графічний дизайн сайту в Фотошопі, розкроїти його і створити шаблон Joomla 2.5, зробити сайт як з фіксованою шириною (два варіанти фіксованої ширини) так і з гумовою і впровадимо зміна ширини шаблону в його параметри. Також, розставимо необхідні позиції модулів, пропишемо для них власні стилі виведення, додамо для них умови публікації в залежності від розміщеного в них контенту, перевизначити макети виведення модулів, компонентів, налаштуємо меню, додамо додаткові ефекти за допомогою впровадження javascript, та й багато інших опцій , які використовуються в процесі створення шаблонів Joomla.

дивитися видеоурок

  • 4. Вибір макета шаблону

Вибір макета шаблону

В даному уроці Ви дізнаєтеся, як, виходячи з технічного завдання, а саме з параметрів зміни ширини колонок, визначити тип CSS макета шаблону і звідки скачати необхідний макет, який оптимізований з точки зору пошукової оптимізації.

дивитися видеоурок

  • 5. Структура файлів шаблону

Структура файлів шаблону

З даного відеоуроку Ви дізнаєтеся про структуру шаблону Joomla 2.5, який файл за що відповідає, де зберігати CSS-стилі, малюнки, java-скрипти, які правила створення даних файлів, а також почнемо описувати всі необхідні опції і властивості шаблону в службовому файлі templateDetails. xml. Після всього цього, ми вже створимо інсталяційний архів шаблону, який буде складатися всього з трьох файлів, встановимо його в систему, і дізнаємося де зберігаються всі файли шаблонів Joomla 2.5.

дивитися видеоурок

  • 6. Стилі шаблону, cброс стилів

Стилі шаблону, cброс стилів

Тут ми приступимо до налаштування нашого примітивного шаблону, а саме створимо файл CSS і розмістимо в ньому необхідні стилі, правильно підключимо їх в головному файлі шаблону. Також Ви дізнаєтесь, як форматувати CSS-код в Dreamweaver-е і як підключати CSS-файл скидання стилів для забезпечення однакового відображення нашого шаблону в різних браузерах (кроссбраузерность)

дивитися видеоурок

Відеоурок описує якийсь код необхідно вставляти для запобігання прямого доступу до файлів шаблону, як підключати бібліотеку яваскрипт MooTools, як правильно прописувати директиву DOCTYPE і тег html, як вставити вміст тега head, використовуючи спеціальну конструкцію, як підключати загальні CSS-файли стилів system.css і general.css, а також як підключати різні стилі, для різних версій браузера Internet Explorer за допомогою умовних коментарів.

дивитися видеоурок

  • 8. Установка демо даних

Установка демо даних

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

дивитися видеоурок

  • 9. Вставка контенту в шаблон, позиції модулів

Вставка контенту в шаблон, позиції модулів

З даного відеоуроку Ви дізнаєтеся, як за допомогою спеціальних вставок включати в шаблон основний контент сайту, модулі, системні повідомлення. Також Ви вивчіть, які існують стандартні стилі виведення модулів, і Ви навчитеся призначати їх для різних позицій модулів, які Ви також навчитеся додавати в наш шаблон.

дивитися видеоурок

  • 10. Налаштування ширини шаблону, базова настройка css

Налаштування ширини шаблону, базова настройка css

В даному відео ми додамо шаблоном здатність змінювати властивості ширини. Спочатку встановимо гумову ширину шаблону, яка дорівнює 90% від ширини вікна браузера, і обмежимо її мінімальним і максимальним значенням. Також ми використовуємо кілька корисних трюків, які поліпшать нашу верстку з точки зору кросбраузерності при налаштуванні ширини шаблону і відображенні шрифтів.

дивитися видеоурок

  • 11. Верстка шапки сайту

Верстка шапки сайту

Тут ми приступимо до верстки шапки нашого шаблону. Ви научітьесь як правильно в Фотошопі розкроювати дизайн, налаштовувати параметри збереження малюнків шаблону, виріжемо логотип сайту, прикріпимо до нього активне посилання на головну сторінку, налаштуємо праву частину логотипу так, щоб вона завжди центрована при зміні ширини шаблону, дізнаємося, як за допомогою PHP- вставок прописувати посилання на сайт, а також його назву.

  • 12. Верстка верхнього і нижнього меню, модуль «Копірайт»

Верстка верхнього і нижнього меню, модуль «Копірайт»

В даному відео ми розглянемо, як верстати і налаштовувати верхнє і нижнє меню сайту. Спочатку ми додамо необхідні пункти меню і налаштуємо їх. А потім виріжемо необхідні малюнки для верстки меню, пропишемо їх властивості, налаштуємо контейнери пунктів меню, використовуємо спеціальний метод для центрування пунктів горизонтального меню, навчимося перевизначати стилі оформлення модулів за допомогою суфіксів класів модулів. Також ми налаштуємо візуальне відображення модуля «Копірайт».

  • 13. Права та ліва колонка, модуль «Акції!»

»

З даного уроку Ви дізнаєтеся, як оформляти зовнішній вигляд лівої і правої колонки шаблону, а також налаштуєте зовнішній вигляд лівого модуля «Акції!», Дізнаєтеся про ефекті напівпрозорої в різних форматах малюнків і використанні даного властивості при верстці.

  • 14. Створюємо власний стиль виведення модулів

Створюємо власний стиль виведення модулів

У відео розглядається процес настройки модуля правої колонки, а саме модуля з інформацією про телефони для замовлення автомобіля. На прикладі налаштування даного модуля Ви навчитеся визначити свій власний варіант виведення модулів за допомогою функції Сhrome, ознайомитеся з її синтаксисом, дізнаєтеся як і будь поширені параметри і атрибути використовуються і передаються в модулях, а також створите свій варіант даної функції.

  • 15. Перевизначення макетів виведення модулів

Перевизначення макетів виведення модулів

З видеоурока Ви дізнаєтеся про можливості перевизначати стандартні макети виведення вмісту Joomla 2.5, вивчіть можливі категорії макетів, а також на прикладі макетів виведення модулів меню, перевизначити макети їх виведення з метою додавання можливості стилізації окремо першого і останнього пунктів меню.

  • 16. Налагодження та перевизначення макетів виведення компонента «Контент»

Налагодження та перевизначення макетів виведення компонента «Контент»

Тут ми спочатку налаштуємо параметри даного компонента виходячи з технічного завдання, а потім навчимося настроювати, перевизначати і створювати альтернативні макети виведення одиночній статті, макети виведення статей у вигляді блогу, макети виведення блогу категорій, макети виведення категорій у вигляді списку, макети виведення пункту меню. Також Ви дізнаєтесь, як на прикладі додавання до назви категорій кількості вхідних в неї статей, використовувати різні параметри в шаблонах компонентів. Ми навчимося виводити статті в дві колонки, і налаштуємо візуальне відображення написів «Автор», «Кількості переглядів, а також кнопок« Печатки »і« Емейл ».

  • 17. Налаштування навігації

Налаштування навігації

В даному відео Ви навчитеся настроювати візуальне відображення посторінковою навігації, а саме налаштуємо кнопки «Вперед» і «Назад» при перегляді статті, а також інформацію про кількість сторінок в певній категорії, а також кнопки «На початок», «Назад», «Вперед »,« кінець »і номера сторінок. Ви дізнаєтеся з допомогою якого файлу і де перевизначити висновок даної інформації, не змінюючи системні файли Joomla 2.5.

  • 18. Умови в шаблоні

Умови в шаблоні

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

  • 19. Параметри шаблону

Параметри шаблону

З даного відео Ви дізнаєтеся, як розширювати функціонал шаблону Joomla 2.5, додаючи можливість змінювати його параметри, тобто прямо з адмінпанелі змінювати ширину шаблону, колірну схему, розміри колонок і так далі. Ми спочатку додамо можливість змінювати ширину шаблону, а саме задавати три різних значення (два фіксованих, а також «гумову» ширину зі значенням 90% від ширини вікна браузера), а потім додамо ще один параметр, за допомогою якого можна змінювати значення мета-тега generator.

  • 20. Модуль «Автомобілі» і «Корисне»

Модуль «Автомобілі» і «Корисне»

У відеоуроці розглянуто процес додавання і налаштування двох модулів сайту, а саме модуль «Автомобілі», який показує інформацію про трьох обраних автомобілях з Каталогу, а також модуль «Корисне», який відображає інформацію про 4 статтях з категорії Корисна інформація. Для модуля «Автомобілі» буде використаний сторонній модуль Deluxe News Module, а для модуля «Корисне» викорис стандартний модуль «Матеріали - Список матеріалів категорії». З відео Ви дізнаєтеся, як налаштовувати кожен модуль, виходячи з технічного завдання, а також розглянуто процес розміщення даних модулів в двох колонках.

  • 21. Налаштування компонента «Контакти»

Налаштування компонента «Контакти»

Тут ми навчимося настроювати ще один стандартний компонент «Контакти», який використовуються для зворотного зв'язку. Ми не тільки налаштуємо зовнішній вигляд даного компонента за допомогою стильових правил, а й перевизначити макет його виведення для переміщення форми зворотного зв'язку в самий верх, а також для коригування виведення написів, які використовуються за замовчуванням.

  • 22. Налаштування відображення банера

Налаштування відображення банера

В даному відеоуроці ми додамо новий баннер в компоненті «Банери», опублікуємо модуль для виведення даного банера у відповідній позиції, а також за допомогою стильових правил налаштуємо його зовнішній вигляд згідно з технічним завданням.

  • 23. Багатомовність шаблону

Багатомовність шаблону

Даний відеоурок навчить Вас, як додати нашому шаблоном можливість відображення його текстового вмісту на декількох мовах. Тобто, Ви зможете, по-перше, додати багатомовність для службової інформації в адмінпанелі управління шаблоном, а також зможемо перевизначити переклад будь-яких мовних констант, які вже визначені за замовчуванням в Джумла. Ви дізнаєтеся, як правильно називати і розміщувати мовні файли, як правильно прописувати константи, які потрібно переводити, як налагоджувати локалізацію, а також як прописувати службову інформацію для правильного розміщення мовних файлів в процесі установки.

  • 24. Вікно емейл, друку, сторінка помилок і оффлайна

Вікно емейл, друку, сторінка помилок і оффлайна

Тут Ви навчитеся настроювати візуальний вигляд вікна Печатки, Відправлення посилання матеріалу на Емейл, а також сторінку помилок і оффлайна. Ви дізнаєтеся, як і які файли необхідно налаштувати, а також які php-вставки необхідно використовувати при цьому.

Ви дізнаєтеся, як і які файли необхідно налаштувати, а також які php-вставки необхідно використовувати при цьому

З відео Ви дізнаєтеся як за допомогою спеціальних сервісів створити маленьку іконку для відображення в заголовку вікна браузера, а також навчитеся розміщувати її в шаблоні Joomla 2.5.

  • 26. Підключаємо яваскрипт

Підключаємо яваскрипт

В даному відеоуроці Ви навчитеся підключити в шаблон java-скрипт, який допоможе організувати на сайті меню з плавно випадають пунктами. Ви дізнаєтеся, де розміщувати файли java-скриптів, як їх правильно підключати в index.php файл шаблону, а також дізнаєтеся як, на прикладі скрипта Superfish, впроваджувати їх для додавання красивих ефектів на сайті.

  • 27. Додаємо превью

Додаємо превью

З видеоурока Ви дізнаєтеся, як створювати і додавати в панель управління шаблонами Joomla 2.5 два малюнки попереднього перегляду нашого шаблону.

  • 28. Підготовка архіву інсталяції шаблону

Підготовка архіву інсталяції шаблону

Даний відеоурок навчить Вас правильно створювати архів інсталяції нашого шаблону для установки в Joomla 2.5. Ви дізнаєтеся, як правильно записати всю необхідну інформацію про файлах в службовий файл templateDetails.xml, як створити інсталяційний архів і як протестувати процес установки шаблону в систему.

До кожного відеоуроку прикріплені вкладені файли, і якщо навіть у Вас щось не виходить, Ви завжди зможете звернутися до них за допомогою.

Крім того, в видеокурсе є розділ Довідник, де зібрана необхідна інформація, яку потрібно завжди тримати під рукою в процесі створення шаблону Joomla 2.5.

Ось, що увійшло до Довідника даного відеокурсу:

  • 1. Програми для розробки шаблонів

Програми для розробки шаблонів

З даних відео Ви дізнаєтеся, як встановити та налаштувати локальний сервер, браузер FireFox, розширення до нього, які допомагають швидко і ефективно розробляти шаблони Joomla 2.5 (FireBug, FireFile, WebDeveloper, Colorzilla), як встановлювати саму Joomla 2.5 на сервер, як встановити та налаштувати програму IETester для тестування відображення шаблону Joomla в різних версіях Internet Explorer.

  • 2. Структура файлів шаблону

Це довідник опису та розміщення всіх типових файлів і папок шаблону Joomla 2.5

  • 3. Що таке BOM?

Це стаття, яка допоможе Вам зрозуміти суть терміна BOM, а також уникнути проблем, пов'язаних з ним при створенні шаблонів Joomla 2.5.

  • 4. Умовні коментарі

Це довідник, в якому розміщені можливі комбінації підключення за допомогою умовних коментарів файлів стилів для різних версій Internet Explorer.

  • 5. Стилі виведення модулів

Довідник, в якому розміщено повний опис і синтаксис виведення стандартних стилів виведення модулів Joomla 2.5.

В даному довіднику розміщені найбільш часто використовувані php-вставки при створенні шаблону Joomla 2.5.

  • 7. Метод центрування горизонтального меню

У статті описаний метод центрування пунктів горизонтального меню за допомогою правил каскадних таблиць стилів.

  • 8. Варіанти призначення альтернативних макетів Joomla 2.5

З даної статті Ви можете дізнатися повну інформацію про правила створення і призначення альтернативних макетів для компонентів, модулів, категорій і пунктів меню Joomla 2.5.

Крім того, всі покупці даного відеокурсу зможуть отримати швидку відповідь на їх питання на спеціальному форумі підтримки клієнтів

Отже, в підсумку Ви отримуєте:

3. Що таке BOM?