Internet Intern Professionelle Webseiten mit web to ... - Data Becker

2
Die Anatomie eines web to date-
Projekts: Wo Sie fürs Optimieren
und Individualisieren ansetzen
müssen
2.1 2.1 CCML-Dateien – die Architektur Ihrer Website ........................................... 20
2.2 2.2 Gewusst wie – Erläuterung zu den CCML-Dateien ...................................... 21

20 2.1 CCML-Dateien – die Architektur Ihrer Website | Die Anatomie eines web to date-Projekts
Nachdem wir uns das Funktionsprinzip unseres Content Management Systems nochmals
kurz vor Augen geführt haben, widmen wir uns nun dem strukturellen Aufbau
der einzelnen Dateien, die das Design erzeugen. Diese finden sich in den einzelnen
Designverzeichnissen im Programmordner – bei einer Standardinstallation üblicherweise
hier: C:\Programme\DATA BECKER\web to date\designs\name_des_designs.
Es handelt sich um die eingangs erwähnten CCML-Dateien, Stylesheets (also CSS-
Dateien) und einige Bilder in den Formaten GIF und/oder JPG, die uns helfen, unser
Design auszugestalten.
2.1 CCML-Dateien –
die Architektur Ihrer Website
Dateiname Funktion
config.ccml Grunddefinition aller Komponenten des Designs
global.ccml Definition von globalen Grafiken
link.ccml Definition von Links
navigation.ccml Definition des grundsätzlichen Seitenrahmens und der Hauptnavigation
aller Seiten
page.ccml Definition des Inhaltsbereichs einer Seite
palette*.ccml Definition von Farbpaletten
paragraph_form.ccml Definition eines Absatzes vom Typ Formular
paragraph_list.ccml Definition eines Absatzes vom Typ Aufzählung
paragraph_movie.ccml Definition eines Absatzes vom Typ Video
paragraph_picture.ccml Definition eines Absatzes vom Typ Bild
paragraph_table.ccml Definition eines Absatzes vom Typ Tabelle
paragraph_teaser.ccml Definition eines Absatzes vom Typ Aufmacher
paragraph_text.ccml Definition eines Absatzes vom Typ Text
splash.ccml Definition einer Splash-Vorschaltseite
substyle*.ccml Definition verschiedener Designvarianten
teaser_caption.ccml Aufmacherelement Überschrift
teaser_captionabstract.ccml Aufmacherelement Überschrift und Kurztext
teaser_captionabstractpicture.ccml Aufmacherelement Überschrift, Kurztext und Bild
teaser_lookup.ccml Aufmacherelement Liste A–Z

Die Anatomie eines web to date-Projekt | 2.2 Erläuterung zu den CCML-Dateien 21
2.2 Gewusst wie –
Erläuterung zu den CCML-Dateien
config.ccml – die Grundkonfiguration
Die config.ccml führt praktisch alle Komponenten auf, aus denen web/shop to date
eine Site aufbaut.
Es werden die übrigen CCML-Dateien und die web/shop to date-Version benannt, für
die das Design gelten soll, und für welche Browser-Auflösung das Template optimiert
ist – z. B. 800 x 600 oder 1.024 x 768 Pixel.
■
■
Zudem ist in der config.ccml festgelegt, welche Fontsets in den Designeinstellungen
angeboten werden ...
■
... und welche Varianten (substyle) ...
■
... und Farbpaletten (palette) zur Verfügung stehen.
■
Interessant für unsere Arbeit ist der nachfolgende Eintrag, da dieser definiert, ob und
– wenn ja – in welcher Größe ein benutzerdefiniertes Bild jede Seite schmücken soll.
Setzen Sie userpicture auf 0, so wird diese Option in web/shop to date nicht verfügbar
sein. width und height geben die Größe des Bildes an.
■
Die Einträge preview… beziehen sich auf die Anzeige im Designauswahlfenster. Die
Darstellung auf der eigentlichen Website beeinflussen sie nicht. Erzeugen Sie einfach
einen Screenshot Ihres Webdesigns. Drücken Sie hierzu die Taste [Druck] auf Ihrer Tastatur,
wechseln Sie in Ihre Bildbearbeitung und fügen Sie den Inhalt der Zwischenablage
durch Einfügen in eine neue Datei ein. Anschließend verkleinern Sie dieses Bild
auf die Maße 230 x 190 Pixel und sichern diese Grafik unter dem Namen preview_

22 2.2 Erläuterung zu den CCML-Dateien | Die Anatomie eines web to date-Projekts
user. Nach dem nächsten Programmstart von web/shop to date werden Sie Ihre
Website in der Vorschau der Designauswahl sehen können.
Unsere Preview-Datei preview_user ist ein GIF mit den Abmessungen 230 x 190 Pixel, die wir in unserem
Designordner speichern und gleichzeitig in der config.ccml wie oben beschrieben definieren.
Und so präsentiert sich unsere individualisierte Designvorschau in web/shop to date. Wie oben beschrieben,
lässt sich das mit wenigen Handgriffen bewerkstelligen.

Die Anatomie eines web to date-Projekt | 2.2 Erläuterung zu den CCML-Dateien 23
global.ccml – hier werden Bildobjekte definiert
Diese Datei dient uns dazu, Grafiken zu beschreiben, die von web/shop to date automatisch
erzeugt werden sollen, beispielsweise für Schaltflächen, Navigationselemente
oder auch Schmuckgrafiken, wie z. B. einen speziellen Bilderrahmen und anderes.
Nachfolgendes Beispiel definiert ein GIF, das wir später als Navigationselement am
Fuß jeder Seite verwenden werden, um wieder zum Seitenanfang zu gelangen. Wir
nennen dieses Objekt pic.up.
src beschreibt die Quelldatei. Wir benötigen also ein Bild im GIF-Format mit dem
Namen pic_up.gif, das wir in unserem Designordner im Programmverzeichnis ablegen.
dst gibt den Ausgabenamen an, also wird das Bild später auf unserer Website pup.gif
heißen.
incolor.a ist die Farbe, die das GIF aufweisen muss, soll ihm entsprechend der in
web/shop to date ausgewählten Farbpalette ein bestimmter Farbton zugewiesen
werden (outcolor.a).
■
Zueinander
passende Farben
wählen wir mit dem
Werkzeug Pipette in
der Bildbearbeitung
(hier Adobe Photoshop)
aus. Diese
Werte übertragen
wir dann in unsere
global.ccml als
outcolor, also die
Ausgabefarbe des
Objekts.

24 2.2 Erläuterung zu den CCML-Dateien | Die Anatomie eines web to date-Projekts
Je nachdem, welche Farbpalette Sie in den Designeinstellungen ausgewählt haben,
wird auf die Farbinformationen in der entsprechenden Datei zurückgegriffen, bei der
benutzerdefinierten Vorlage ist es die palette_user*.ccml.
Sie können aber auch incolor- und outcolor-Angaben weglassen und direkt ein Ihren
Wünschen entsprechend eingefärbtes GIF ins Designverzeichnis kopieren. In diesem
Fall genügt also auch:
■
Die Farbeinstellungen werden in die entsprechende palette_*.ccml geschrieben.
Die Beschreibungsfunktionen in der global.ccml lassen aber noch weitere Möglichkeiten
zu. Sie können in Ihre Grafik Text einbinden, wie am Beispiel des Objekts
pic.sendbutton ersichtlich. &site.resource.submit steht für den unter den Spracheinstellungen
für Absenden definierten Begriff.

Die Anatomie eines web to date-Projekt | 2.2 Erläuterung zu den CCML-Dateien 25
■
Im Grunde können Sie an jeder Stelle Ihrer Design-Templates, egal ob es sich um die
Beschreibung der Seite oder die eines Absatzes handelt, beliebige Bilder erzeugen.
Das gewünschte Bildobjekt muss dazu lediglich wie gezeigt zuvor in der global.ccml
beschrieben und eine entsprechend benannte Quelldatei (src) im Designverzeichnis
vorhanden sein.
Der Befehl, der die Grafik dann im Template generiert, lautet .
Doch dazu später mehr.
link.ccml – viele Wege führen zum Ziel
Hier wird festgelegt, wie mit Links zu verfahren ist, die Sie in web/shop to date auf
Textpassagen, Bilder oder Downloads setzen. Möchten Sie beispielsweise, dass
Downloads generell in einem neuen Fenster angezeigt werden, können Sie eine entsprechende
Ergänzung vornehmen (siehe fett gedruckter Text im nachfolgenden
Beispiel).
Links zu Zielen außerhalb unserer Website – und der Weg zurück
Verlinken wir auf Inhalte außerhalb unserer Website, werden diese durch die Anweisung
target=“_blank“ in einem neuen Fenster geöffnet:
■
■

26 2.2 Erläuterung zu den CCML-Dateien | Die Anatomie eines web to date-Projekts
Links im selben Fenster öffnen
Externe Links außerhalb
unserer Website werden
in einem neuen Fenster
geöffnet.
Befindet sich der Link innerhalb unseres web/shop to date-Projekts, wird dieser im
selben Fenster geöffnet.
■
■
Downloads in neuem Fenster öffnen
Standardmäßig öffnet web/shop to date Links auf Downloads im selben Fenster.
Handelt es sich bei den Downloads überwiegend um PDF-Dateien, ist es eher sinnvoll,
diese in einem neuen Fenster zu öffnen, da sich beim Öffnen eines PDF die
Oberfläche des Internetbrowsers ändert und das Design unserer Website gegen die
Benutzeroberfläche des Adobe Acrobat-Browser-Plug-ins ausgetauscht wird. Auch
hier genügt es, in der link.ccml die Anweisung target=“_blank“ mitzugeben.
■
■
■ [ KB]
■

Die Anatomie eines web to date-Projekt | 2.2 Erläuterung zu den CCML-Dateien 27
So bleibt unsere Website auch bei der Anzeige von PDF-Links im Hintergrund geöffnet. Die Anweisung, den
Link in einem neuen Fenster zu öffnen, ist schnell in der link.ccml hinzugefügt.
Links auf Bilder
Bei Links auf Bilder wird zunächst ein Bildobjekt in Originalgröße erzeugt und dann
verlinkt. Auch hier ist abweichend von der web/shop to date-Voreinstellung das Anzeigen
der Bilder in einem neuen Fenster überlegenswert, damit unsere eigentliche
Website im Hintergrund geöffnet bleibt. In diesem Fall muss wieder die Anweisung
target=“_blank“ gegeben werden.
■
■
■
■

28 2.2 Erläuterung zu den CCML-Dateien | Die Anatomie eines web to date-Projekts
Wer möchte, dass Links auf Bilder in einem neuen Fenster geöffnet werden, muss auch hier die Anweisung
target=“_blank“ in der link.ccml geben.
navigation.ccml – die Hauptnavigation verleiht Struktur
Diese Datei beschreibt den grundsätzlichen Aufbau aller Seiten, quasi den Rahmen
um die Inhalte, die wir in web/shop to date eingeben möchten. Wollen wir ein eigenes
Design umsetzen, müssen wir zunächst hier ansetzen. Bei allen Designs, die mittels
Tabellen aufgebaut sind, gibt es einen einfachen Trick, die Struktur zu durchschauen:
T I P P
Wir geben über die Suchen & Ersetzen-Funktion des Editors allen Tabellenrahmen einen Wert
.
Nun können wir leicht erkennen, wie mittels der navigation.ccml Hauptmenü, Untermenü, Suche,
ggf. Warenkorb, Merkzettel, Kasse und Informationsseiten (damit sind die Unterseiten der Startseite
gemeint, die immer sichtbar sind) platziert sind.