Видеокурсы создание сайтов

Видеокурс "Создание успешного шаблона для Joomla"

цена видеокурса: 3120 руб.
объём видеокурса - 2,1 Гб.

перейти на сайт видеокурса

Видеокурс "Создание успешного шаблона для Joomla"

Продолжительность: 9 час 45 минут

Видеокурс состоит из 4 модулей.

1 модуль. Html и CSS для новичков

По окончанию данного модуля вы сможете:

  • Легко читать html код и при необходимости править его.
  • Задавать оформление через css.
  • Использовать возможности html и css в повседневной работе с сайтами.

В комплект входит:

  • Рабочая тетрадь по HTML.
  • Рабочая тетрадь по CSS.
  • Необходимые программы.

Итого: 26 уроков (13 уроков по HTML, 13 уроков по CSS).

Продолжительность: 3 часа 29 минут.

2 модуль. Верстка шаблона из картинки

  • 1 шаг. Знакомимся с макетом дизайна и определяем, какие элементы нам нужно нарезать, а какие можем сверстать, используя css.

1 урок. Виды шаблонов

В данном уроке мы узнаем, что такое шаблон, какие виды шаблонов бывают и варианты получения шаблонов.

2 урок. Подготовка макета

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

Домашнее задание.

Изучить учебный макет.
Рассмотреть из каких элементов и слоев состоит данный макет.

  • 2 шаг. Нарезаем шаблон определенным образом.

3 урок. Нарезка макета.

В данном уроке мы рассмотрим, какие элементы необходимо нарезать, а так же три
способа нарезки макета.

Домашнее задание.

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

  • 3 шаг. Создаем каркас шаблона с минимально необходимыми файлами.

4 урок. Структура шаблона

В данном уроке вы узнаете из каких файлов и папок состоит шаблон. Какие из этих
файлов являются обязательными, а какие нет.

Домашнее задание.

В папку для шаблона поместить обязательные элементы шаблона.

  • 4 шаг. Подключаем Bootstrap и ставим "нулевой шаблон" на Joomla.

5 урок. Тэги Joomla

В данном уроке мы рассматриваем общий синтаксис тегов Joomla и какие теги бывают.

Домашнее задание.

Самостоятельно записать несколько тегов и атрибутов для них.

6 урок. Файл index.php

В данном уроке мы рассматриваем обязательные элементы файла index.php и создаем скелет для будущего шаблона

Домашнее задание.

Создать скелет шаблона в файле index.php.

7 урок. Создаем файл templatedetails.php

В данном уроке мы рассматриваем синтаксис файла templateDetails.xml и создаем свой файл для шаблона.

Домашнее задание.

Создать файл templateDetails.xml.

8 урок. Установка на сайт

В данном уроке мы подготовим архив шаблона для установки на сайт и установим наш шаблон

Домашнее задание.

Создать архив шаблона.

Установить шаблон на сайт.

  • 5 шаг. Верстаем шаблон по шагам: шапка, основная часть, модули, футер.
  • 6 шаг. Параллельно с версткой адаптируем сайт под различные устройства: изменяем меню, удаляем или перемещаем блоки в зависимости от разрешения.

9 урок. Основы верстки с помощью bootstrap

В данном уроке мы рассматриваем какие бывают виды верстки с помощью bootstrap, знакомимся с сеткой шаблона и размещаем сетку в index.php.

Домашнее задание.

Разместить контейнер и строку в index.php как показано в уроке.

10 урок. Переменные и условия при создании шаблона

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

Домашнее задание.

Создать любой дополнительный параметр.

Посмотреть, как он выводится в админке шаблона.

Прописать языковые переменные для данного параметра в языковом файле.

11 урок. Верстка для различных устройств.

В данном уроке мы рассматриваем какие устройства бывают, и какие классы bootstrap отвечают за вывод на данных устройствах.

Домашнее задание.

Ознакомиться с таблицей классов для устройств в документации bootstrap.

12 урок. Верстка шапки. Часть 1

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

Домашнее задание.

На основе данных урока создать верхнюю часть шапки для альтернативного цвета в файле orange.css.

13 урок. Верстка шапки. Часть 2

В данном уроке мы верстаем промо-блок и нижнюю часть шапки.

Домашнее задание.

На основе данных урока создать промо-блок и нижнюю часть шапки для альтернативного цвета в файле orange.css

14 урок. Верстка шапки. Часть 3

В данном уроке мы изменяем внешний вид верхнего меню и заканчиваем верстку шапки.

Домашнее задание.

На основе данных урока закончить верстку шапки для альтернативного цвета в файле orange.css.

Сверить получившийся результат с макетом.

15 урок. Верстка шапки для мобильных устройств.

В данном уроке мы изучаем синтаксис плагина collapse и применяем его относительно верхнего меню для мобильных устройств.

Домашнее задание.

Скрыть промо-блок от показа на сотовых телефонах.

16 урок. Верстка основной части сайта. Часть 1

В данном уроке мы изучаем вывод различных позиций в зависимости от наличия в них модулей. Выводим контент в основной части сайта.

Домашнее задание.

Расположить позиции в основной части как показано в уроке.

17 урок. Верстка основной части сайта. Часть 2

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

Домашнее задание.

Повторить действия как показано в уроке.

18 урок. Верстка основной части сайта. Часть 3

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

Домашнее задание.

Повторить действия как показано в уроке

19 урок. Внешний вид контента

В данном уроке мы оформляем внешний вид контента в соответствии с макетом.

Домашнее задание.

Повторить действия как показано в уроке.

Заменить стрелку пагинации на свою из макета.

Создать внешний вид контента для альтернативного цвета

20 урок. Внешний вид модуля по умолчанию

В данном уроке мы оформляем внешний вид модуля в соответствии с макетом.

Домашнее задание.

Повторить действия как показано в уроке.

Создать внешний вид модуля для альтернативного цвета

21 урок. Суффикс класса модуля

В данном уроке мы знакомимся с понятием суффикса класса модуля и меняем внешний вид через суффикс.

Домашнее задание.

Повторить действия как показано в уроке.

Создать внешний вид модуля для альтернативного цвета.

22 урок. Изменение внешнего вида стандартных компонентов. Часть 1

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

Домашнее задание.

Повторить действия как показано в уроке.

23 урок. Изменение внешнего вида стандартных компонентов. Часть 2

В данном уроке изменяем внешний вид формы контактов и всплывающих подсказок tooltip.

Домашнее задание.

Повторить действия как показано в уроке.

24 урок. Внешний вид навигации

В данном уроке знакомимся с классами навигации bootstrap и меняем внешний вид навигации.

Домашнее задание.

Повторить действия как показано в уроке.

25 урок. Верстка футера

В данном уроке мы создаем футер по аналогии с созданием шапки. А так же размещаем кнопку поднятия наверх сайта.

Домашнее задание.

Повторить действия как показано в уроке.

Создать футер для альтернативного цвета

  • 7 шаг. Сверстанный шаблон проверяем на кроссбраузерность. Исправляем ошибки.

26 урок. Финальная проверка готового шаблона

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

Домашнее задание.

Проверить шаблон как показано в уроке.

Исправить обнаруженные ошибки.

3 модуль. Создание шаблона Joomla из html-шаблона

Бывают ситуации, когда приходит пора переводить старый сайт из статичного html формата на систему управления контентом.

Иногда при переносе хочется сохранить дизайн старого сайта.

В этом курсе мы покажем, как из шаблона сайта на HTML сделать шаблон, который можно установить на Joomla.

Итого: 2 урока.

Продолжительность: 18 минут.

4 модуль. Обновление шаблона с Joomla 1.5 до Joomla 2.5/3.x

Если у вас сайт на Joomla 1.5 и вы хотите сохранить его дизайн при переходе на новую версию Joomla, то посмотрев эти уроки вы легко обновите шаблон с Joomla 1.5 до 2.5/3.х.

Итого: 2 урока.

Продолжительность: 13 минут.

перейти на сайт видеокурса

Вы здесь: Home ПЛАТНЫЕ ВИДЕОКУРСЫ Создание сайтов Видеокурс "Создание успешного шаблона для Joomla"