Как да си направим шаблон за Joomla 1.0.x с Dreamweaver extension

Какво ви е нужно:

Първо инсталирайте template builder extension в Dreamweaver

  • Отворете Dreamweaver. от менюто горе, намерете 'Commands' после 'manage Extensions'. това ще отвори extension manager-а.
  • В extension manager-а, изберете 'File' после 'Install Extension'. намерете мястото на mambosolutions451a2.mxp и го инсталирайте.
  • След инсталацията, излезте от Dreamweaver апликацията.
  • След рестарт на Dreamweaver Вие ще видите ново меню наречено 'MamboOS'
Фигура 1: Менюто в Dreamweaver

 

Вече сме готови да създадем шаблон за Joomla

Има много начини за създаване на шаблони. В описаното по-долу ще създадем шаблон с таблици, като поставяме стъпка по стъпка Joomla кода с dreamweaver extension.

Създаване на шаблон с 3-колони за Joomla

Стъпка 1:

  • Отворете Dreamweaver и създайте нов 'dynamic page' --> php
Фигура 3: Нов документ в Dreamweaver

  • Преминете към Code view и вие ще видите нещо такова:
Фигура 4: Code View в Dreamweaver


  • Изберете целият код преди </head> тага и го изтриите
Фигура 5: Изтриване на head кода в Dreamweaver

  • Сега поставете mambo Head кода който ще намерите като натиснете бутона 'Insert Head Code'в новата лента с инструменти MamboOS
  • Вшият код трябва да изглежда така:
Фигура 6: Поставяне на Joomla Head код в Dreamweaver

Joomla 1.0.x HEAD КОД (copy/paste от тук)

Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
Стъпка втора:

Създаване на таблици за шаблона.

  • Преминете към 'Design View' в Dreamweaver. r
  • Сега ще създадем 3 таблици на 100% with . Горната таблица ще използване за хедър; средната таблица ще бъде за ляво и дясно съдържание; а долната таблица ще бъде за footer -а.
  • От менюто горе изберете Insert>Table (Ctrl+Alt+T)
  • Напишете следните настройки:
Фигура 8: Поставяне на таблици с Dreamweaver

Фигура 9: Design View в Dreamweaver

  • Натиснете някъде в средната таблица за да я изберете
  • После, идете на 'Insert' >'Table' (CTRL+ALT+T) и създайте 3 колони по 100%
Фигура 10: Поставяне на други таблици в Dreamweaver

  • Сега вече трябва да изглежда така:
Figure 11: 3 допълнителни колони в Dreamweaver

  • сега ще променим размера на левите и десните колони на тази таблица - това ще бъдат нашите леви и десни колони в нашият Мамбо шаблон а средната колона ще бъде за основното съдържание на сайта.
  • селектирайте лявата клетка
  • В Properties, напишете 18% за щирочина
  • Изберете вертикално подреждане 'Top'
  • повторетв същата стъпка и с дясната колона
Фигура 12: Оразмеряване на колоните в Dreamweaver

Стъпка 3: Поставяне на Joomla php кодовете!
Вече сме готови да слагаме специфичните за Joomla кодове в шаблона.

  • Намерете бутона Insert Main Body от MamboOS менюто в Dreamweaver
  • Натиснете някъде в средната колона за да я селектирате и натиснете на бутона Insert Main Body
    Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)

     

  • Натиснете в лявата колона за да я селектирате, после натиснете на бутона Insert Left Modules за да поставите следния код:
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • Нека да добавим и 'user1' директно под 'left' позицията която добавихме преди малко
  • Бъдете сигурни че не е избран като натиснете някъде в лявата клетка.
  • Намерете бутона Insert User1 и натиснете за да поставите следния код:
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • Сега ще преминем в дясната колона
  • Намерете бутона Insert Right Modules и го натиснете за да поставите кода:
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • Нека да добавим и User2 точно под 'Right' позицията която поставихме преди малко, убедете се че не сте маркирали като натиснете някаде в дясната клетка.
  • Намерете бутона Insert User2 и го натиснете за да поставите кода:
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)

Вашите таблици при 'code view' трябва да изглеждат така:

Фигура 13: Таблиците заедно с Joomla кода

  • Нека да добавим и кода за търсене, (Търсенето е модул в Joomla 1.0.x така че поставете този код ако искате)
  • Ще сложим полето за търсене най-горе в дясната колона
  • В дясната колона, където сме поставили 'Right' и 'User2', натиснете с мишката пред кодовете
Фигура 14: Маркирайте точно зад съществуващия код в Dreamweaver

  • Натиснете на бутона 'Insert Search' за да добавите Search кода
  • Сега трябва да изглежда така:
Фигура 15: Полето за търсене в Dreamweaver

  • Добавяне на кода който извежда компонента за банери.
  • Натиснете някаде в долната таблица (footer table) за да я селектирате.
  • Центрирайте в таблицата като натиснете на Align Center:
Фигура 16: Центриране в Dreamweaver
  • Натиснете на бутона 'Insert Banners' за да добавите следния код:
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • Нека да добавим и Footer кода:
  • Убедете се че не сте марткирали като натиснете някъде в долната таблица.
  • Добавянето става като натиснете на бутона Insert Footer
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)


Да се върнем в горната таблица за да добавим pathway и дата.

  • Натиснете някъде в гормата таблица за да я изберете
  • От Dreamweaver топ менюто, добавете две нови колони по 100%
  • Натиснете в дясната клетка от новата таблица, идете на Properties и ръчно я направете с ширина 30%
Фигура 17: Дата и Pathway

  • В дясната клетка натиснете на бутона Insert Date за да добавите следния код
    Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • А сега да добавим и Pathway
  • Натиснете някъде в лявата клетка на новата таблица
  • Намерете и натиснете на бутона Insert Pathway
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)



Създаване на структурата на директориите в Joomla шаблон.

Фигура 18: Структура на директориите на шаблона

  • Създайте нова папка наречена 'ms_dwtutorial'
  • Отворете папката 'ms_dwtutorial' , и създайте 2 папки едната наречена 'css' а другата 'images'
  • Запазете този файл който направихте преди малко с Dreamweaver като index.php в 'ms_dwtutorial' папката
  • Сега трябва да направите файла Details.xml. Създайте нов xml фаил, копирайте кода който виждате по-долу и го запазете в папката 'ms_dwtutorial' като 'templateDetails.xml'
Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)
  • Сега ще създадем CSS файл за вашият шаблон, цветове на линкове, бордери, стил на съдържанието и други.
  • Отворете CSS папката и създайте нов css файл наречен 'template_css.css'
  • Copy/paste следния css в файла template_css.css и го запазете.
  • Може да погледнете и готов CSS стил от друг шаблон

Select and Copy (натиснете за да селектирате кода и да го копирате в клипборда)

Добавяне на картинка в хедъра

Ако искате да добавите картинка в хедъра на шаблона, вижте как

Можете да свалите готовата която се намира най-отгоре на този урок, или да направите собствена чрез Photoshop, или някой друг графичен редактор. Запазете вашата картинка като header_bg.jpg в папка images.

И добавете следното във вашият HTML код в index.php файла

:

вашият нов шаблон е готов и той трябва да изглежда така:


Това е!

Успех на всички които искат да правят шаблони за Joomla, и не забравяйте да изпращате вашите нови шаблони на http://joomla-bg.com за да ги добавим в секция файлове.


Оригинал от http://mambosolutions.com