Anzeige
Tutorialbeschreibung

Wir erstellen ein Template in Joomla! 1.0.X

Wir erstellen ein Template in Joomla! 1.0.X

Im folgen Tutorial bringe ich euch bei, wie man ein Template fuer das CMS Joomla! erstellt. Es wird alles notwendige erklaert! Es ist danach eure Kreativitaet gefragt, denn euch wird ein einfacher Seitenaufbau gezeigt, wo ein left und right Module, sowie ein Mainbody eingebaut wird.

Bevor ihr anfang dieses tutorial macht solltet ihr euch fuer Dreamweaver eine Erweiterung holen, diese vereinfacht die Gestaltung deutlich !

Ihr findet sie hier: http://www.joomlaos.de/option,com_remository/Itemid,41/func,fileinfo/id,266.html

Zum installieren muesst ihr den Macromedia Extension Manager aufufen und die Datei laden!

 

 


Fangen wir nun endlich an !

Schritt 1:
Als erstes solltet ihr euch eine Grafik erstellen in eurem Grafikprogramm, die wir dann als headimage benutzen koennen. Ich habe mir ein Bild mit der Groesse von 850 px Breite mal 250px Hoehe gemacht.

Schritt 2:
Sobald ihr eure headgrafik fertig habt, solltet ihr nun Dreamweaver aufrufen! Ihr erstellt eine neue Datei, und zwar eine dynamische Seite und dort waehlt ihr PHP aus! und klickt auf erstellen.

Bilder

Schritt3:
Da ihr nun euer neues Dokument vor euch habt, solltet ihr eine neue Tabelle erstellen. Ihr koennt natuerlich auch mit divs arbeiten, aber das kann jeder selber entscheiden, ich erklaere es anhand von Tabellen.

Ihr erstellt eine Tabelle mit 1 Zeile und 1 Spalte, keine Kopfzeile keine Randstaerke oder Zellauffuelung oder Zellabstand! Bei der Tabellenbreite gebt ihr die Breite von dem Bild ein, das ihr vorher erstellt habt ! In meinem Fall sind es 850 Px. Sobald ihr diese Tabelle erstellt habt drueckt am besten die Taste F6, damit wird eine erweiterte Ansicht der Tabellen angezeigt, ist im Endeffekt einfacher!

Bilder
 

 

Schritt4:
Nun erstellt ihr in dieser Tabelle eine weitere Tabelle. Diesmal aber mit 3 Zeilen und nur 1 Spalte und gebt wieder eure Breite in Pixel an, in meinem Fall 850 Pixel. Auf dem Bild sehr ihr zwar 100 Prozent, aber ich habe es spaeter geaendert! Also nicht beachten. Desweiten wie bei der Haupttabelle keine weiteren Umstellungen!

Bilder

Schritt 5:
So nun erstellen wir eine Weitere Tabelle. Diese erstellen wir in der zweiten Zeile der vorher eignefuegten Tabelle. Wir geben ihr eine Zeile und 3 Spalten und wieder die Breite von unserem erstellten Bild (850px).

Bilder

Schritt 6:
Mit unserem Grundgeruest sind wir nun fertig. Wir laden nun unser Headimage in unsere Seite. Dazu waehle wir die 1. Zeile der Mittleren Tabelle, die wir als 2te erstellt haben. Klickt dazu auf das sechste Icon in der "Allgemeinen'" Leiste, waehlt euer Bild aus und klickt auf ok.

Bilder

Schritt7:
In diesem Schritt habe ich die Hintergrundfarbe fuer die Tabelle eingestellt, genauso wie fuer die einzelnen Spalten! Dazu habe ich noch einen Border eingestellt mit der Groesse von 1px in schwarz.

Bilder

________

Es ist euch ueberlassen an dieser Stelle wie ihr eure Seite gestaltet, lasst euch was einfallen, ihr koennt auch komplexere Tabellen aufbauen um mehrere Module spaeter einzufuegen.

________

Schritt8:
Wenn ihr euch die Extension installiert habt, dann waehlt in der Toolbar, wo ihr bis jetzt Allgemein stehen hattet die Joomlasolution1 aus. Ihr seht nun andere Icons, die euch helfen mit einem Klick den Phpcode von joomla! einzufuegen.

Wir fuegen nun in die Linke Spalte den sogenannten LeftBereich an. Dazu klickt ihr mit der Maus in die linke Spalte rein und klickt dann auf in eurer kleinen joomla! toolbar auf das 7. Zeichen, wo einer kleines rotes Rechteck an der linken Wand "klebt". Ihr koennt dann im Codefenster sehen (hier blau markiert) was in euer Template als PHPcode eingefuegt worden ist. ihr koennt das natuerlich auch rauskopieren und an der stelle wo left steht einfach user1 einsetzen, mit der Toolbar koennt ihr nur user 1 und 2anlegen, aber im Adminbackend in Joomla! koennt ihr Module bis zu user9 anlegen. Um diese zu erstellen muesst ihr also nur die Zahl 1 oder 2 durch die Zahlen 3,4,5,6,7,8,9 ersetzen!

Bilder

Schritt9:
In diesem Schritt habe ich nichts weiteres gemacht, als die Breite der Spalten einzustellen und den "Right"Bereich eingefuegt. In der Mittleren Spalte habe ich den Mainbody eingebuden! Den waehlt ihr wieder in euerer J!toolbar aus, das ist das fuenfte Zeichen mit dem grozsen roten Viereck drin!

Bilder

Schritt10:
Nun geht ihr in die Code ansicht und markiert die Zeilen 1 bis 6, diese ersetzt ihr nun durch die Headerzeilen von Joomla! Diese koennt ihr natuerlich auch per einen Mausklick auf das erste Zeichen erhalten!

Bilder

Bilder

Fuer die Leute, die unsere Toolbar nicht benutzen wollen, kopiert euch folgendes:

 <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel="stylesheet" href="$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/images/favicon.ico" />" ; ?>
</head>

Schritt11:
Nun sind wir fertig, wir speichern die Datei unter dem Dateityp PHP und nennen sie Index.php.

Bilder

 

Nun sind wir soweit mit unserer Seite fertig. Nun muessen wir noch eine Details xml Datei erstellen. Erstellt also in Dreamweaver eine templateDetails.xml und gebt folgende Sachen, natuerlich mit euren Datein ein!:

Bilder

 Letzter Schritt:
Ihr erstellt nun in eurem Ordner des templates einen css order noch zusaetzlich und eine css Datei mit dem Namen:

template_css.css

In dieser koennt ihr nun euere Seite beliebig mit Schriftarten und allem drum und dran verfeinern. Ich empfehle euch dabei auf

http://joomlacssguide.com/ oder auf

http://www.joomlaos.de/CSS_Guide.html

zu gehen. Dort findet ihr die genauen CssNamen, die ihr fuer den Joomla! Frontend Bereich braucht um die Joomla Module und euren content an euerm selbst erstellten Design anzupassen.

Nun muesst ihr euren Ordner noch zippen und im Joomla Backend hochladen und als DEFAULT einstellen!

Ich wuensche euch viel Spass und ich hoffe ich koennte euch ein bisschen helfen, seid kreativ und seid komplexer! Um so mehr kleine Tabellenflaechen ihr habt umso mehr koennt ihr spaeter verteilen. Probiert am besten auch noch ein Top- und ein Botten Module einzubauen. Wie gesagt, die wichtigsten Dinge sind in eurer toolbar enthalten die ihr braucht, ihr muesst nur die Zahlen bei den Usern aendern!

mfg bpr


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Jürgen Anders
  • 29.03.2013 - 10:31

Alles gut erklärt.
Jedoch gibt es wesentlich aktuellere Versionen von joomla und der Beitrag sollte demzufolge auch angepasst werden oder nicht mehr erscheinen.

Portrait von Penagashea
  • 23.05.2011 - 15:55

Na suuuper... nächstes Mal lese ich mir zuerst alle Kommentare durch, bevor ich etwas runterlade.
Das hat mich jetzt 10 Punkte gekostet.
Aber aus Fehler lernt man ja.

Auf ein Neues (-;

Portrait von Sorex
  • 26.01.2011 - 19:56

kein Mensch erstellt heute noch eine Website anhand von Tabellen...

Portrait von Cholericker
  • 03.11.2010 - 15:20

Gutes Tutorial, blos wie Pyrocrystal schon sagt nicht für version 1.5

Portrait von Pyrocrystal
  • 26.09.2010 - 19:25

cool, aber leider nicht für 1.5 v.

Portrait von Shrix1989
  • 07.08.2010 - 23:59

Hat mir sehr geholfen! Vielen Dank!

Portrait von silvereye2000
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 27.06.2010 - 15:09

STOPP! So erstellt man keine Seiten mehr! Heutzutage erstellt man das design mittels css! also benützt man keine Tabellen mehr! Früher war das die Lösung, heute ist dies nicht mehr konform! Und barrierefrei ist das auch nich!

Portrait von Dennis3107
  • 03.04.2010 - 11:07

Gucken ob mir das Tut noch hilft...gibt ja mittlerweilen ein Neues CMS...xD

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.03.2010 - 19:13

super tutorial - hat mir echt weiter geholfen danke für die investierte arbeit :D

Portrait von tom55
  • 03.12.2009 - 14:35

super, selbst als anfänger hatte ich keine probleme .
hat mir echt geholfen
danke

Portrait von oxygen
  • 17.10.2009 - 18:56

schön gemacht - wenn das tatsächlich funktioniert ... haste echt was gut bei mir

... werd mich morgen dran hocken

Portrait von ikuchu
  • 28.08.2009 - 09:14

Sehr einfaches und gut erklärtes Tutorial. Werd ich gleich mal ausprobieren :) Vielen Dank dafür !

Portrait von Wildcard
  • 04.08.2009 - 21:23

tut hat sehr geholfen.... danke

Portrait von basti53
  • 24.04.2009 - 08:50

Sehr interssant. Freu mich schom mein eigenes Template zu erstellen.

Portrait von _max_
  • 21.04.2009 - 13:38

Finde ich gut gemacht, hat mir geholfen. Ein Template Tutorial für Joomla 1.5 fände ich auch nicht schlecht.

Portrait von Benjsch
  • 14.04.2009 - 00:36

Danke! war mir eine große Hilfe!

Portrait von temurlenk
  • 01.03.2009 - 20:56

@flashsoft
ja mach das mal bitte =)

Portrait von FlashSoft
  • 27.02.2009 - 13:53

Tolles Tutorial, bin am überlegen ob ich nicht für Joomla 1.5 ein Template Tutorial schreibe, da einiges wiederum anders ist.

Portrait von temurlenk
  • 24.02.2009 - 17:41

Echt sehr nützlich! Vielen Dank! 5 Punkte :)

x
×
×