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

Ручная работа: создание шаблона для . Часть 3

postsblog8

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

В прошлой статье я рассказал каким образом создать пустой шаблон и раскрыл принципы подключения к нему component.php и модулей. Каждый шаг работы я лично проверял и неполадок у Вас, как и у меня, возникнуть не должно. В этой статье мы создадим с Вами шаблон используя Наши Руки и Dreamweaver CS4. Почему создание шаблона сегодня не будет затрагивать Temlate Kit — для полного понимания TK3.1, мы должны как минимум ознакомиться со структурой строения шаблона для и я считаю, что данный способ приблизит нас тыщ на 20 километров ближе :)

И так, надеюсь с инструментами, которые нам понадобятся в процессе работы, мы разобрались, а потому, возвращаться к этому вопросу не будем. Если кто-то упустил что-то, советую пройти «Руководство по созданию шаблона для » с первой статьи.

Что нам потребуется сегодня:

 

  1. Предустановленная 1.5.х на хостинге.
  2. Adobe Dreamweaver CS4/CS3.
  3. Модуль DJ-Multicolumn Menu (1.5)
  4. Шаблон исходник + DJ Menu          <<скачать>>

 

Этапы грядущей статьи:

 

  1. Создание index.php и templateDetails.xml.
  2. Создание таблицы стилей template.css и включение меню.
  3. Подключение component и включение footer в шаблон.

 

Создание index.php и templateDetails.xml.

 

Запускаем Adobe Dreamweaver CS4, создаем новую папку:

 

 

Я называю папку MyEksperement, Вы как угодно. Таким же образом внутри созданной папки, создаем еще две с названиями css и images. В папке CSS будут располагаться стили шаблона а в IMAGES — изображения.

 

Создаем новый файл с названием index.php. И вбиваем в его содержимое следующий текст:

 

 

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

 

Теперь мы создаем файл templateDetails.xml и наполняем его информацией, вместо моих координат вписываем свои:

 

 

Сохраняем наши файлы, у нас должен получиться вот такой набор начальных файлов:

 

 

Тут же мы не теряемся а нажимаем «Put File», этим действием мы переносим наш шаблон на хостинг. Все это мы проходили в прошлых статьях, так что если есть вопросы что это или подобные — читаем статьи с самого начала.

 

Заходим в административную панель , попадаем в менеджер шаблонов и включаем нашу тему по умолчанию.

 

 

При загрузке сайта в браузере, мы увидим пустую страничку — не волнуйтесь, все нормально, это говорит о том, что наша таблица стилей (CSS) еще пуста. Важнейшим моментом является то, что НАШ ШАБЛОН ЗАРАБОТАЛ, так как мы видим на экране «Hi NAROD!!!»

 

Создание таблицы стилей

 

Создаем файл template.css в нашем шаблоне. Создаем три рисунка в формате jpg:

 

  • header.jpg — шапка сайта; размер: 1048Х250;
  • background.jpg — фон сайта; размер: 1400Х1200;
  • menu.jpg — полоска нашего меню; размер: 970Х55.

 

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

 

Открываем template.css и прописываем свойства для тега body — шрифт, размер, цвет шрифта, цвет фона будет черный, а фоном будет наша картинга background.jpg:

 

 

Теперь открываем index.php и добавляем тег div — это будет основой для наших последующих записей (<p>Hi NAROD!!!</p> можно удалить).

 

Теперь задаем описание нашему див тегу в таблице стилей. Указываем стиль, ширину и выравнивание:

 

 

Теперь возвращаемся в index.php и создаем див для нашей шапки. Чтобы при нажатии на шапку сайта нас возвращало на главную страницу обнесем его тегом <a>

 

 

 

 

В таблице стилей прописываем составляющие шапки:

 

 

Теперь добавляем <див> для нашего меню. Возвращаемся в index и прописываем не только менюшку, но и кнопки для него:

 

 

<jdoc:include type="modules" name="имя модуля" /> — это команда с помощью которой в выводятся модули, в нашем случае кнопочки меню.

 

Переключаемся в нашу таблицу стилей и задаем параметры диву menu:

 

 

Далее задаем параметры нашим кнопкам меню:

 

 

Теперь задаем стиль всем нашим ссылкам:

 

 

Теперь внедрим менюшку, так как результат который у нас сейчас есть не очень меня радует. По этому качаем модуль DJ-Multicolumn Menu (1.5) и устанавливаем его на . В меню модулей активируем DJ меню и в настройках выбираем ему то меню, которое хотим отобразить, в моем варианте (у меня на Joomle предустановлены демо данные) это mainmenu.

 


 

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

 

Ищем файл menu-style.css по адресу на хостинге либо же на локальном севере: /modules/mod_djmenu и открываем его. Находим следующие строчки и изменяем родной цвет менюшки на следующий:

 

.dj-main li.active a.dj-up_a {
background: #666;
color: #ccc;
}

 

и...

 

.dj-main li a.dj-up_a {
display: block;
float:left;
text-align: center;
font-size: 12px;
line-height: 40px;
color: #666;

 

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

 

И так не останавливаемся! Вперед! Нас ждет еще не мало побед!

 

Подключение component и включение футера в шаблон.

 

Теперь мы подключаем component к нашему сайту. Идем в Index.php и пишем далее код вывода наших статей:

 

 

Паралельно вносим данные и в CSS таблици, постоянной «content», а также заливаем рисунок бекрауннда нашего рабочего стола который можно найти приложении:

 

 

Теперь выводим Footer картинку, а также «Авторские права». При установке с демо даннымы мы получаем уже активированный плагин  в результате чего у нас выходит вот такой код:

 

 

Тут мы указываем адрес-ссылку на нашу шапку и бежим в CSS:

 

 

Здесь тоже ничего сложного, все это уже мы обсуждали и проделывали ранее:

 

Вот и все! Шаблон готов, не могу сказать, что он таки готов к эксплуатации, но задачу мы выполнили — Мы создали шаблон для 1.5.x. Поработать над дизайном, стилизацией, оформлением, добавлением позиций модулей и т. д. Вот это и многое другое и будет рассматриваться в дальнейших статьях!

 

На выходе я получил вот такой черно-белый шаблон:

 

 

Я считаю поставленную задачу выполненной и с удовлетворенным чувством пишу последние строки этой статьи.

 

 

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

Copyright © 2013. All Rights Reserved.

Yandex-metrika