Добавляете все изображения для данного шаблона, желательно сохранять в папку images. Идем дальше структуру нашу рассматриваем, здесь также, если вам вдруг понадобится какие-то дополнительные файлы, ну допустим для одной какой-то странички вам, возможно, понадобится определенный набор стилей, вот как у меня сделано, есть урок на сайте по CSS, и я отдельно прикрепил файл, который назвал csslesson.css. Вот таким образом, то есть это был блок head, как видите здесь все очень просто.
Для того чтобы создать шаблон, я использовал простую разметку table, в принципе она наиболее простая и для того чтобы вам объяснить, понять и создать первый шаблон в принципе можно с использованием таблиц, дальше уже по мнению профессионального роста уже конечно будем использовать блоки div и различные более сложные элементы. Ну, вот на первом этапе в принципе можно создать ваш первый ваш шаблон с таблицей, потому что когда мы с вами посмотрим далее весь контент Joomla, он используется на основе таблиц и в принципе можно их использовать. Но мы с вами будем комбинировать, то есть у нас будут идти таблички, и блоки div также иногда будут встречаться, мы будем смотреть каким образом, присваивать стили этим элементам.
Давайте посмотрим сейчас эту структуру, здесь все очень просто, здесь табличная разметка, то есть я вначале в самом верху сайта, я вставил таблицу, то есть у нас идет простая таблица, ширина таблицы 100%. Рамочка отсутствует, по центру, padding и spacing установлены 0. И внутри этой таблицы 2 строчки, в верхней строчке у нас будет содержаться картинка нашего header, а вторая строчка у нас, системный модуль breadcrumbs - это у нас навигатор и второй строчкой <jdoc:include type="module" name="breadcrumbs"/> добавляется как раз этот блок, в котором у нас будет размещаться навигатор сайта.
Идем дальше, табличка закрывается и открывается следующая таблица, она также расположена по ширине 100% и данная таблица у нас разбивается на 3 столбца, то есть мы взяли в этом шаблоне образец стандартной разметки таблицы. Который в себе содержит header, содержит leftmenu, center или основной контент, right и еще у нас будет footer, вот такой вот простой шаблон. И здесь у нас идет ячейка td с идентификатор id="leftmenu" ширина данной ячейки 200px, здесь же мы вставляем jdoc:include type="module" name="left" здесь присваиваем ему style="xhtml" это такой системный стиль, если вы этот стиль не поставите, у вас не будет выводиться заголовок модуля. Поэтому вот этот стиль вставляйте, также можно какой-то свой стиль приписать. Для удобства можно каждую ячейку именно помечать идентификатором, для того чтобы вы могли очень гибко настроить или прописать какие либо определенные стили именно левому блоку или правому блоку, поэтому я их здесь пометил leftmenu, rightmenu. Далее в центре у нас идет id="component", здесь вообще у нас очень простая строчка <jdoc:include type="component" /> эта строчка выводит основной контент, все статьи которые у нас будут появляться, они будут выводиться вот этой строчкой component. Внизу добавляется еще одна таблица, которая у нас будет содержать в себе footer, в которой мы размещаем счетчик или какую либо еще системную информацию.
Теперь мы с вами можем перейти в администраторский раздел сайта и уже вот на этом этапе, вот этот шаблон который мы с вами создали, то есть пока мы с вами не создавали css стили, то есть css файл на данный момент у нас пустой, мы с вами создали файл index.php и создали файл templateDetails.xml и на этом этапе уже можно применить шаблон к сайту и посмотреть, что же получилось, и дальше я вам покажу методику, по которой я создаю обычно шаблоны, то есть я по порядку иду и создаю все стили для различных элементов.
И так переходим в расширение, в менеджер шаблонов, мы с вами назвали шаблон New Template Lesson. Открываем все шаблоны, открываем весь список и здесь видим наш шаблон New Template Lesson, то есть, как видите этот шаблон, который мы сейчас создали, который мы поместили его в папку templates и он у нас уже здесь доступен. У многих шаблонов вы можете увидеть миниатюру, но у нас пока с вами никакого оформления нет, пока нам еще рано, то есть это простой png файл, который добавляется также, если вы посмотрите какой либо любой шаблон, вы здесь можете увидеть template_thumbnail.png файл, то есть потом можно, когда вы создадите полностью весь шаблон сайта, его Print Screen делаете, сохраняете вот с таким же форматом png и вас также будет для вашего сайта вот эта миниатюра, если конечно она вам нужна, то есть в принципе если это простой рабочий шаблон и поставили его на свой сайт и используете, то можно в принципе и не создавать эту миниатюру.
И так ставим New Template Lesson, нажимаем по умолчанию, у нас применяется данный шаблон к сайту и нажимаем просмотр, что мы видим, вот в принципе то, что мы видим в самом чистом виде, вот что из себя представляет выборка данных из баз данных Joomla, то есть мы можем увидеть главное меню, оно у нас выводится компонентом left, здесь у нас выводится breadcrumbs, здесь если мы нажмем, у нас сейчас будут выводиться статьи, то есть основной контент и выводится правое меню, правые модули, которые мы с вами создавали. То есть все работает, но вот в таком виде.
Теперь наша с вами задача применить и прописать стили для всех этих элементов. Первое с чего мы начнем, это мы вставим header, то есть верхнюю часть сайта, мы с вами создадим стили, которые у нас будут определять header. Как создавать стили, для этого мы открываем файл template.css и здесь начинаем прописывать стили. Итак я обычно, для того чтобы было все понятно, я создаю определенные разделы, пишу таким образом комментарии. Продолжение в следующем видео уроке.
