Сайт Вадима Аниканова

Template Kit 3.1: создание шаблона для . Часть 4

postsblog8Приветствую Всех! Сегодня я Вас хочу порадовать 4й статьей посвященной созданию шаблона для Joomla с помощью плагина для Adobe Dreamweaver — Template Kit 3.1

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

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

Размер заготовки шаблона — 900X750 пикселей.

В процессе дизайн само-собой будет дорабатываться и принимать финальную версию.

Тип сайта трехколонный, его структура такова:

Если Вы готовы — мы можем приступить.

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

  1. Программа Adobe Dreamweaver + установленный плагин Template Kit 3.1. Подробнее о установке и настройке программы и плагина смотрим в статье Установка и настройка Dreamweaver CS4 + Template Kit 3.1
  2. Пустой шаблон на базе TK 3.1 подключенный к хостингу. Как это реализовать смотрим в статье Template Kit 3.1: создание шаблона для . Часть 1
  3. Готовый дизайн будущего шаблона, реализованный в каком-либо растровом или векторном редакторе (у меня он сделан в Illustratore)
  4. Предустановленная (без демоданных)

Этапы нашей работы.

  1. Внедрение в шаблон нарезки дизайна (header, footter, logo)
  2. Выводим и определяем место для сайтбаров и контента.
  3. Настройка FOOTER или как правильно размещать модули.
  4. Оформление ссылок и левого сайтбара.
  5. Добавление вертикального CSS меню.
  6. Создаем с помощью CSS и JQuery красивое горизонтальное меню.

Внедрение в шаблон нарезки дизайна

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

Реальные размеры заготовок на выходе следующие:

  • header.jpg — 900X337 пикселей;
  • bgcontent.jpg — 900X15 пикселей (сейчас его использовать мы не будем);
  • footer.jpg — 900X123 пикселей;
  • Logo.png — 265X69 пикселей (его я нарисовал отдельно и сохранил отдельно от основного макета).

С нарезкой закончили, переходим к внедрению.

Предполагаю, что Вы уже создали пустой шаблон и связали его локально и виртуально (с хостингом). Обязательно на хостинге выставляем права на шаблон 777. Открываем в DW файл index.php. В панели JTKTools 3.1 нажимаем «Add local»

Копируем картинки в папку images. C помощью CSS выводим header.jpg и footer.jpg. Для этого в DW открываем template.css по адресу /imya_saita/css/template.css. И прописываем значения:

Затем в index.php выводим наши картинки в шаблон следующим кодом:

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

Следующим нашим шагом будет вставка логотипа, в нужное нам место. Осуществляем это с помощью кода вставки изображения в div «hd» в файле index.php:

Если хотим, чтобы логотип стал ссылкой на главную страницу, обрамляем новый код в тег <a href="http://vash_sait">вышеуказанный код</a>

Сохраняем и смотрим общий результат:

Если Вы все сделали правильно то и у Вас все получилось однозначно :). Если нет — самостоятельно ищем проблему. Могу сказать лишь одно, что данный шаблон верстается в процессе составления статьи и вся проделанная работа приводит к тому результату, который я параллельно скриню и вы можете наблюдать.

И так поехали дальше.

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

Прежде чем мы приступим, в админ панели joomla  создадим Главное меню с несколькими пунктами меню (выведем его в модуль left), модуль поиска (выведем его в модуль right) и создадим тестовую страничку в менеджере материалов, ее мы прикрепим ко всем пунктам меню для того, чтобы у нас появился контент на сайте

В файле index.php, между дивами шапки и футера, рисуем табличку с тремя колонками. Левую и правую колонку обозначаем модулями left и right, а в среднюю выводим контент сайта:

После того как мы прописали и сохранили вышеприведенную таблицу, обязательно обновляем templateDetails.xml путем нажатия в панели JTKTools 3.1 на эту кнопку:

Еще раз сохраняем, задаем нашему Поиску место расположения в модуле right и смотрим на результат:

Не забудьте о том, что заранее я создал Главное меню и в последствии вывел его в модуль «left», а также создал модуль поиска и дал выход ему в «right». Если Вы используете демо данные результат у Вас будет другой.

Настройка FOOTER или как правильно размещать модули.

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

В Диве футера выводим новый див footcont с выводом модуля footer:

Обновляем наш Details.xml, чем сообщим Джумле о появлении новой позиции модуля. Теперь если мы создадим (в админке Joomla) новый модуль в качестве произвольного html кода, пропишем там желаемое предложение и зададим место вывода footer, то получим текст в верхнем углу ДИВА ФУТЕР:

окончательный вид нас не устраивает, так как мы хотим разместить текст в центре зеленого блока. Для этого, прописываем значения нашего нового дива footcont, отвечающего за вывод модуля footer, в таблице стилей:

Учтите что в CSS я указал те значения которые будут коректны для отображения в моем шаблоне, в своем же вам придется подобрать значения для нормального отображения на Вашем шаблоне. Сохраняем наш индекс и CSS файлы и смотрим на результат (+ немножко подправил глобальные настройки в joomla, касающихся вывода имени автора, даты и т.п.):

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

Оформление ссылок и левого сайтбара.

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

И так для того, чтобы в результате мы увидели на сайте вот это:

Нам нужно открыть template.css и задать параметры ссылок:

 

  • a:link — изначальны цвет ссылки;
  • a:hover — цвет ссылки под наведенным курсором;
  • a:visited — цвет ссылки после нажатия.

Теперь открываем modules.css и добавляем в любом удобном для Вас месте значение суффикса модуля меню _menu, то бишь для того чтобы он стал активным в настройках выводимого модуля в админ панели Joomla нам нужно указать этот суффикс модуля:

  • leftmenu.jpg — это фоновая картинка заголовка меню.
  • Название меню у нас обозначается заголовком h3, а потому его значения мы и правим. Здесь мы указываем размеры картинки, расположения текста и другое. Надеюсь у Вас не возникнет проблем с разбором значений.

Мне еще не нравится то, что составляющие главного меню находятся очень низко от заголовка, пожалуй поднимем его немного выше и поместим немного левее. Для этого нам нужно открыть файл navigation.css и задать значение ul.menu:


В результате мы получим смещение влево и вверх.

Еще корректируем наше меню, путем добавления новых значений и их описания, если вы захотите добавить фон пунктам меню или еще что-нибудь — правим именно эти значения:

Вот и все, на самом деле все не так сложно как кажется с первого взгляда :) Вот наш результат:

Хочу сказать, что правка CSS также очень удобна с использованием Dreamweaver попробуйте самостоятельно разобраться с ним, место нахождения этого удобства вы сможете найти на вкладке с плагином JTK 3.1:

Я не буду сейчас объяснять подробности работы с CSS приложением, так как на это уйдет много времени, а статья и так уже приобретает большой объем. Поэтому в целях обучения мы будем все делать вручную. Но не забывайте об этом моменте, потихоньку разбирайтесь.

Добавление вертикального CSS меню.

Задачу которую мы сейчас будем воплощать смотрим ниже — пункт №1:

Приступим к реализации бокового меню. Для этого нам нужно создать новый суфикс меню который мы укажем при создании модуля меню в Joomla:

Выводим расположение модуля user1 в левой части хедера (файл index.php):

Теперь прописываем его значения в CSS (template.css):

Для того, чтобы наше меню приобрело уникальный вид создаем суффикс клаcса меню _eko где и пропишем наши значения меню (navigation.css):

Теперь нам осталось создать модуль меню в админке, отменить вывод оглавления меню и прописать суффикс класса меню _eko. Мы получили меню, при наведении на пункты меню появляется красный фон:

Создаем с помощью CSS и JQuery красивое горизонтальное меню.

Приступаем к реализации верхнего меню. Выводим модуль (Див hd)  user2 и задаем ему класс topmenu (index.php):

Отлично, теперь нам нужно задать CSS значения новому классу topmenu (template.css):

Вот то, то мы получили после того как прописали все вышеуказанное, касательно второго меню:

Теперь бросаем наш взор на navigation.css. Прописываем нижеследующий код для вывода нашего меню и параллельно создаем суффикс меню top:

.menu_top li {
display: inline;
}
.menu_top {
margin:0;
padding:0;
list-style:none;
}
.menu_top li {
float:left;
display:block;
width:100px;
background:#34A635;
position:relative;
z-index:500;
margin:0 1px;
}
.menu_top li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#fff;
text-align:center;
}
.menu_top li a:hover {
color:#fff;
background-color: #F00;
}
.menu_top a.active {
color:#fff;
background-color: #F00;
}
.menu_top ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
background-color: #FFF;
}
.menu_top ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
.menu_top ul a {
display:block;
height:15px;
padding: 8px 5px;
color:#fff;
text-decoration: none;
}
.menu_top ul a:hover {
text-decoration:underline;
}

Далее создаем файл menuj.js запихиваем в него нижеследующий код и бросаем его в папку js нашего шаблона:

// JavaScript Document
$(document).ready (function () {

$('.menu_top li').hover (
function () {
//show its submenu
$('ul', this).slideDown (200);

},
function () {
//hide its submenu
$('ul', this).slideUp (200);
}
);

});

$(document).ready (function () {
var active_url=location.href;
if (active_url.split ('/')[3]!=0) {
$.each ($(«a[href*=/"+active_url.split('/')[3]+»]"),
function (){$(this).addClass ('active');});
}
});

Качаем библиотеку jQuery по этой ссылке и бросаем ее также в папку js.

После того, как наши файлы лежат на месте, CSS прописан и подогнан под наш шаблон — двигаемся дальше. Очень многие не знают каким образом подключается jQuery к Joomla. Именно этим мы сейчас и займемся. Открываем файл index.php и между тегами <head> и </head> прописываем следующий код:

<script type="text/javascript" src="<?php echo $this->baseurl ;?>/путь_к папке/js/jquery.js" ></script>

<script type="text/javascript" src="<?php echo $this->baseurl ;?>/путь_к_папке/js/menuj.js" ></script>

Наше jQuery подключено :) Теперь в админ панели настраиваем модуль верхнего меню, суффикс класса меню — «_top»; Всегда показывать вложенные подпункты — «Да»; стиль меню — «список». И на Выходе мы имеем симпатичную менюшку:

На этом, пожалуй, я и проведу жирную черту. Наконец-то статья закончена! Надеюсь она помогла Вам в реализации вашего начинания. Представляю Вам окончательный вид шаблона по ссылке на дэмосайт, со временем он будет усовершенствоваться, так как до ума он еще не доведен :)

Дэмо-сайт шаблона MYEKOMOTO 0.1

 

Тэги: для, на, по, вам, создание, мы, сегодня, дизайн, вами, template, , шаблона

Copyright © 2013. All Rights Reserved.

Yandex-metrika