Mini-Dokumentation zur Bearbeitung der Website massweiler.de

Transkript

1 Mini-Dokumentation zur Bearbeitung der Website massweiler.de 10. März 2015

2 Die Website massweiler.de Die Website massweiler.de wird mit dem Content Management System (CMS) Joomla betrieben. Joomla ist ein freies CMS das, von einer Community erstellt und gepflegt wird. Die Verwendung von Joomla ist unter der GNU General Public License (GPL) lizenziert. Es darf sowohl privat als auch kommerziell kostenfrei verwendet werden. Es fallen somit keine Lizenzkosten an! Das Joomla CMS besteht aus einem Frontend und einem Backend-Bereich. Das Frontend ist der Teil der für die Öffentlichkeit zugänglich ist und angezeigt wird wenn in einen Internet Browser eingegeben wird. Das Backend dient zur Administration einer Joomla Website. Der Aufruf erfolgt über den Link Es wird eine Login-Seite angezeigt. Seite 2 8

3 Der Editor Das Bearbeiten von einzelnen Webseiten im Front- bzw. Backend-Bereich erfolgt über einen Editor. Aktuell wird der Joomla Content Editor (JCE) für die Website massweiler.de verwendet. Der JCE ist ein sehr umfangreicher und mächtiger Editor, der z.b. für unterschiedliche Benutzergruppen unterschiedlich konfiguriert werden kann. Der Joomla Content Editor (JCE) Beim Editieren einer Seite steht dem Bearbeiter der Editor im oberen Bereich zur Verfügung. Durch klicken des Icons Weiter Icons zur Bearbeitung werden weitere Bearbeitungsicons angezeigt. Einige besondere Icons für die Bearbeitung Vollbildmodus Das Bearbeitungsfenster wird im kompletten Fenster dargestellt Quellcode-Editor Die Website wird als HTML Quellcode dargestellt Format Anwenden der Formatierungen Überschrift Größe 1 bis 6 Stile Anwenden weiterer Formatierungen z.b. für Bilder (img), Überschrift 2 (h2), Ebenen (div) Hyperlinks - Links einfügen, bearbeiten uns entfernen Tabelle Tabelle, Reihen und Zellen erstellen, bearbeiten und löschen Ebene Ebenen einfügen und bearbeiten Seite 3 8

4 Tabellenstruktur von Übersichtsseiten Bei Übersichtsseiten werden die Links auf die untergeordneten Seiten in zwei Spalten dargestellt. z.b. Die Übersichtsseite der Vereine Die Umsetzung erfolgt über zwei geschachtelte Tabellen. Die rote Tabelle bildet das Gerüst für die zweispaltige Anzeige <table border="0" cellspacing="0" cellpadding="0"> <tbody> grüne Tabelle <img style="width: 50px; height: 10px;" src="images/spacer.gif" /> grüne Tabelle </tbody> </table> Die Tabelle besteht aus seiner Zeile (tr-tag) mit je drei Zellen bzw. Spalten (td-tag) In den beiden äußeren Zellen werden die Links zu den Vereinen über eine grüne Tabelle eingefügt. Die mittlere Zelle dient als Abstandshalter und enthält dafür ein "unsichtbares" Bild (spacer.gif) Seite 4 8

5 Die grüne Tabelle dient zur Anzeige der Links innerhalb einer Spalte <table border="0" cellspacing="0" cellpadding="0"> <tbody> <!-- oberste Zeile Abstandshalter --> <img style="width: 50px; height: 10px;" src="images/spacer.gif"/> <img style="width: 20px; height: 10px;" src="images/spacer.gif" /> <img style="width: 200px; height: 10px;" src="images/spacer.gif" /> <!-- 1. Zeile Logo und Link zur Vereinsseite (über Unter-Menü) --> <img src="images/vereine/logo-des-vereins-max-50x50.png" alt="" /> <img style="width: 20px; height: 10px;" src="images/spacer.gif" /> <p> <a href="linkk zum Unter-Menüeintrag">Vereinsname</a> </p> <!-- 2. Zeile Abstandshalter --> <img style="width: 20px; height: 10px;" src="images/spacer.gif" /> Die Tabelle besteht aus mehreren Zeilen (pro Verein zwei! Zeilen) mit je drei Zellen Die oberste Zeile dient lediglich der Formatierung. Jede Zelle enthält ein "unsichtbares" Bild (spacer.gif) das die mind. Breite der Zelle (Spalte) bestimmt. Die erste Zelle der ersten Zeile enthält das Logo des Vereins (max. 50x50 Pixel!) Die zweite Zelle dient wieder als Abstandshalter und enthält dafür ein "unsichtbares" Bild (spacer.gif) Die dritte Zelle enthält einen Link auf den Unter-Menüpunkt des Vereins im Hauptmenü sollte noch kein Link existieren muss dieser zuerst erstellt werden! Die zweite Zeile dient als Abstandshalter zum nächsten Verein Für die nächsten Vereine werden die Zeilen eins und zwei wiederholt! Seite 5 8

6 Tabellenstruktur von Gewerbe bzw. Firmenseiten Bei der Darstellung von Gewerben und Firmen wird die gesamte Breite verwendet. z.b. Die Gewerbe von Internet Design, IT-Beratung und Systemarchitektur Die Umsetzung erfolgt über eine Tabelle mit einer Hilfstabelle. Seite 6 8

7 Die rote Tabelle bildet die Haupttabelle für die Aufteilung. Die Darstellung basiert auf einer dreispaltigen Anzeige. Insgesamt werden vier Zeilen benötigt <table border="0" cellspacing="0" cellpadding="0"> <tbody> <!-- oberste Zeile Abstandshalter --> <img style="width: 150px; height: 10px;" src="images/spacer.gif"/> <img style="width: 30px; height: 10px;" src="images/spacer.gif" /> <img style="width: 450px; height: 10px;" src="images/spacer.gif" /> <! 1. Zeile Namen --> <td style="vertical-align: top;" colspan="3"> <h2 class="h2_gewerbe">name des Eintrags</h2> grüne Tabelle <img style="width: 50px; height: 10px;" src="images/spacer.gif" /> grüne Tabelle </tbody> </table> Innerhalb der Tabelle wird ein Eintrag über jeweils vier Zeilen (tr-tag) angezeigt eine Zeile hat in der Regel drei Zellen. Teilweise sind die Drei Zellen mit einander verbunden. Die oberste Zeile der Tabelle dient lediglich der Formatierung und ist nicht Teil eines Eintrags. Jede Zelle enthält ein "unsichtbares" Bild (spacer.gif) das die mind. Breite der Zelle (Spalte) bestimmt. Die erste Zeile eines Eintrags enthält den Namen des Eintrags alle drei Zellen der Zeile sind mit einander verbunden (colspan="3") Der Name steht im h2-tag mit der zusätzlichen CSS Klasse h2_gewerbe Die erste Zelle der zweiten Zeile enthält das Logo (max. 200x150 Pixel!) Die zweite Zelle dient wieder als Abstandshalter und enthält dafür ein "unsichtbares" Bild (spacer.gif) Die dritte Zelle enthält die Anzeige der Adress- und Kontaktdaten Die Anzeige wird über eine grüne Tabelle umgesetzt. Die dritte Zeile dient wiederum als Abstandshalter und enthält dafür ein "unsichtbares" Bild (spacer.gif) alle drei Zellen der Zeile sind mit einander verbunden (colspan="3") Seite 7 8

8 Die grüne Tabelle dient zur Anzeige der Adress- und Kontaktdaten <table border="0" cellspacing="0" cellpadding="0"> <tbody> <!-- 1. Zeile Adresse und Telefon --> <td style="width: 180px; vertical-align: top;" rowspan="4"> <strong>straße und Hausnummer</strong><br /> <strong>plz Ort</strong> <td style="width: 10px; text-align: right;"> <td style="width: 50px; text-align: right;">telefon: <td style="width: 220px; text-align: right;"> <strong> </strong> <!-- 2. Zeile Fax --> <td style="width: 10px; text-align: right;"> <td style="width: 50px; text-align: right;"> Fax: <td style="width: 220px; text-align: right;"> <strong> </strong> <!-- 3. Zeile --> <td style="width: 10px; text-align: right;"> <td style="width: 50px; text-align: right;"> <td style="width: 220px; text-align: right;"> <!-- 4. Zeile Link zur Homepage --> <td style="width: 10px; text-align: right;"> <td style="width: 50px; text-align: right;">internet: <td style="width: 220px; text-align: right;"> <a href="url" target="_blank"><strong>homepage</strong></a> </tbody> </table> Die Tabelle besteht aus vier Zeilen mit je vier Zellen wobei die erste Zelle der ersten Zeile sich über die alle Zeilen erstreckt (rowspan="4") dadurch haben die folgenden Zeilen nur drei Zellen Die erste Zelle der ersten Zeile beinhaltet die Adresse diese Zelle erstreckt sich über alle vier Zeilen Die zweite Zelle dient wieder als Abstandshalter und enthält dafür ein "unsichtbares" Bild (spacer.gif) Die dritte Zelle enthält den Text "Telefon" Die vierte Zelle enthält die Telefonnummer Die Zeilen zwei bis vier unterscheiden sich jeweils nur in den Zellen drei und vier Seite 8 8