Dies ist nur ein Test. Dies ist nur ein Test. Dies ist nur ein Test. Dies ist nur ein Test. Dies ist nur ein Test.

Grundsätzlich gilt bei den Templates: HTML-Elemente wenn möglich (h2, h3, p, strong usw.); CSS-Klassen wenn nötig; und wenn selbst das CSS nicht mehr ausreicht, sparsam JavaScript. Alles in XHTML1.0 Strict nach W3.org validiert.

Dieses Element ist der bekannte Reiter, der Inhalt dazu (die Tabelle) taucht so nur auf der Modellstartseite auf (unter den 4 Subbannern). Dieses Element ersetzt das alter derselben Position ("teaserDescribed").

• 

*Manual transmission.

Die Link-Klasse "illustratedModelLinkInfo" enthält Modellinfos und verlinkt auf das Modell selbst.
Neu hierbei: der Link zum Car-Configurator fällt komplett weg. Andere Änderungen auschließlich im CSS.

Motor:
2.7 liter, 6 cylinder, boxer engine
240 hp (SAE) @ 6,200 rpm
Torque 199 lb-ft @ 4,700 rpm
240 hp (SAE) @ 6,200 Performance*:
Top Track Speed: 159mph
0-100 km/h (62 mph) in 6.2 secs
MSRP
$823,099 (USA)

Die Christophorus-Übersichtseite. Wohl am besten als XHTML-Template zu implementieren? Es gibt 1-6 Cover + Link. Dieses Template – wieder eine Liste – tritt nur so allein auf auf einer Seite. Nach den Slash im Titel jeweils ein Leerzeichen, sonst kann es in Fremdsprachen zu Problemen führen. Die Cover-Bilder enthalten weder Rand noch Schatten, und sind nur in genau dieser Größe erlaubt. (Für all das muß jeweils der Redakteur/ der Grafiker sorgen.)

• Februar / März 2004
• April / Mai 2004
• Juni / Juli 2004
• August / September 2004
• Oktober / November 2004
• Dezember 2004 / Januar 2005

Den unsichtbaren Ad-Tracking-Code von Double-Click gibt es nur für USA. Dabei braucht dieses Modul einen Parameter, der sich jeweils ändert.
Beispielswert unten: http://ad.doubleclick.net/activity;src=787382;type=cpopr250;cat=preow905;ord=1;num= (kommt zweimal vor)

Die Link-Klasse "illustratedModelLinkInfo" enthält Modellinfos und verlinkt auf das Modell selbst. "Build Your Own" sollte von der Image-Machine als Button gerendert werden, verlinkt auf den Car-Configurator (entweder mit Zwischenseite, oder direkt das Popup; am besten wär natürlich eine normale Verlinkung ganz ohne Popup und Zwischenseite.)

Motor:
2.7 liter, 6 cylinder, boxer engine
240 hp (SAE) @ 6,200 rpm
Torque 199 lb-ft @ 4,700 rpm
240 hp (SAE) @ 6,200 Performance*:
Top Track Speed: 159mph
0-100 km/h (62 mph) in 6.2 secs
MSRP
$823,099 (USA) Motor:
2.7 liter, 6 cylinder, boxer engine
240 hp (SAE) @ 6,200 rpm
Torque 199 lb-ft @ 4,700 rpm
240 hp (SAE) @ 6,200 Performance*:
Top Track Speed: 159mph
0-100 km/h (62 mph) in 6.2 secs
MSRP
$823,099 (USA)

*Manual transmission

Die ImageCombo entspricht normalen Zoombildern, enthält aber für die div-Elemente die Zusatzklassen "imageCombo1" bzw. "imageCombo2", und wird umschlossen von einem div-Element der Klasse "imageCombos".

Für den Fall, dass Sie neugierig
geworden sind, und einen tieferen Einblick in unser Porsche Magazin wünschen, stellen wir Ihnen hier ausgewählte Artikel als Leseprobe zur Verfügung. Wer sich durch konjunkturelle und wirtschaftliche Unwägbarkeiten nicht aus der Bahn werfen lassen will, der braucht ein Leitprinzip. Bei Porsche ist es die Linientreue, die sich erfolgreich vom Gestern über das Heute ins Morgen fortgesetzt hat.

Die Knowledge-Base-Einträge als Liste mit Links und Bildern, die einen DHTML-Layer in der Seite öffnen – später soll der Layer Flash enthalten, welches mit einer Knowledge-Base-ID gefüttert wird. Auf diese ID soll dann das CMS ein XML liefern können, wenn das Flash anfragt. Es gibt bis zu 10 Einträge.

• Chassis concept
  
• Wheels
  
• Steering
  
• PASM
  
• Chassis concept
  
• Wheels
  
• Steering
  
• PASM
  

Es gibt 2 Tabellentypen innerhalb einer normalen Seite (Popuptabellen werden noch definiert), die sich allerdings nur in den Klassennamen im Table-Element unterscheiden. Jede Tabelle gibt jeweils Klasse "alternate" aus bei jedem zweiten tr- bzw. td-Element. Die ersten tr-Zeile bleibt dabei außen vor; sie enthält nur th's, und muß immer angelegt sein (und darf auch vom Redakteur nicht gelöscht werden – er darf allerdings einzelne th's mit Leerwerten füllen). Spalten- und Reihenanzahl ist nicht begrenzt für diese 4 Typen. Tabellen enthalten in Ausnahmefällen (Motorsport...) auch Bilder, diese Seiten müssen aber evtl. hier noch nicht abgebildet werden. Hervorhebungen innerhalb von Zellen sind erlaubt.

Es gibt die folgende Tabelle der Klasse "normalTable", die als Default zu verstehen ist wenn der Redakteur keine weiteren Angaben macht. Reihen sind alternierend koloriert:

Vorname	Nachname
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.
Fritz	Hals	Er leistet vorwiegend gute Arbeit.
Franz	Meier	Meier ist Mitarbeiter seit 1999. Er arbeitet.
Hansi	Hinterseer	H. ist Mitarbeiter seit 1999. Er leistet vorwiegend Arbeit.
Thomas	Sonstwas	Frans Hals ist Mitarbeiter seit 2005.
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.

Es gibt die folgende Tabelle der Klassen "normalTable separateColumns", dasselbe wie zwei weiter oben, allerdings mit alternierenden Spalten:

Vorname	Nachname
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.
Fritz	Hals	Er leistet vorwiegend gute Arbeit.
Franz	Meier	Meier ist Mitarbeiter seit 1999. Er arbeitet.
Hansi	Hinterseer	H. ist Mitarbeiter seit 1999. Er leistet vorwiegend Arbeit.
Thomas	Sonstwas	Frans Hals ist Mitarbeiter seit 2005.
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.

Diese Tabelle der Klassen "normalTable extensive separateColumns" ist dasselbe wie oben in der Mehrinhalts-Form:

Vorname	Nachname	Beschreibung
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.
Fritz	Hals	Er leistet vorwiegend gute Arbeit.

Folgende Tabelle der Klasse "normalTable extensive" ist dasselbe wie oben, aber für mehr Inhalte – diese Einstellung sollte vom Redakteur ausgewählt werden dürfen:

Vorname	Nachname	Beschreibung
Franz	Hals	Frans Hals ist Mitarbeiter seit 1999. Er leistet vorwiegend gute Arbeit.
Fritz	Hals	Er leistet vorwiegend gute Arbeit.

Die "Neuigkeiten"-Links, eine Multilinkliste in einem div-Element der Klasse "newsLinks", und einem h3. Das h3 ("What's new") sollte dann mit der Image-Machine gerendert werden.

Die Label für die Tabs müssen auf einem Hintergrund in der Farbe (230, 230, 230) gerendert werden, der anschließend auf transparent gesetzt werden muss. Sollte das nicht ausreichen: Alternativ können die Labels auch 2 mal gerendert werden in einem active und inactiv state ohne transparenten Background. Das ist noch zu prüfen.

Aktive Tabs erhalten die Klasse "selected", der letzte Link die Klasse "lastChild". A-href muß auch für das aktive Element mit drin sein.

• 
• 
• 
• 
• 
• 
• 

Für die Einbindung von Flash gibt es ein neues Objekt. Das bindet außerdem im Headbeareich ein neues JS "flashobject" ein.

Die Modelleinstiegsseiten-Teaser. Immer 4, Redakteur sorgt dafür, dass die einzeilig sind.

• Features & Specifications
• Boxster in Detail
• Service
• Gallery

Die Link-Klasse "illustratedModelLink" listet die verschiedenen Baureihen. Der Redakteur muß dafür sorgen, dass der Text hier ungefähr diese Länge hat und dadurch 2-zeilig erscheint.

Eine Symbiose aus Fortschritt und Tradition. Eine Symbiose aus Fortschritt und Tradition. Eine Symbiose aus Fortschritt und Tradition. Eine Symbiose aus Fortschritt und Tradition. Eine Symbiose aus Fortschritt und Tradition.

Dieser Linktyp der Klasse "illustratedLink" ist der Standard für Kapitelseiten und sollte schon bekannt sein. Hier nur nochmal der Vollständigkeit halber.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Erfahren Sie hier, wie sich Porsche in den.

Dieser Linktyp der Klasse "link" ähnelt dem vorherigen, es gibt aber kein Bild.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Erfahren Sie hier, wie sich Porsche in den.

Diese Tabelle der Klasse "Features" kommt nur im Galerie-Tab "Features & Specifications" vor. Sie enthält erstmal nur genau diese Felder, mit Einzelverlinkungen zu Knowledgebase-Layern. Alle jetzt grauen Überschriften in fett sollte von der Image-Machine gerendert werden.

Price	base price	$43,800
Power	6.400 rpm torque	240 hp 199 ft.-lb.
Fuel consumption		Gearbox	Tiptronic S
	City	TBD	TBD
	Highway	TBD	TBD
	Combined	TBD	TBD
	CO2 emissions in g/km	N/A	N/A
Guarantee	Guarantee	5 placeholder
	KM Guarantee	3 placeholder

Der Sound-Download, kommt auch so nur in Galerien vor. KB-Größe sollte wenn möglich automatisch angehängt werden. "Play" und "Download" sollten als Buttons von der Image-Machine gerendert werden.

Der Flash-Film-Abspieler für die Galerie. Er sollte später den Haupt-Introlayer oben, der dann eine ID haben muß, via innerHTML ansteuern und Flash reinschreiben. "DSL-Version" und "ISDN-Version" sollten als Buttons von der Image-Machine gerendert werden.

Klasse "appDownload" erstmal nur für Galerie + Bildschirmschonerdownloads Win/ Mac (plus Hilfetext). "Windows", "Mac", "Screensaver" sowie die Buttons "Download" sollten von der Image-Machine gerendert werden.

Die "linkOverviews"-Liste, die ich schonmal kurz geschickt hatte (diese kommt nur auf Modell-Detailübersichtsseiten vor und enthält bis zu 8 Elemente). Die Überschriften (bis auf den Pfeil, wie besprochen) sollten von der Image-Machine gerendert werden. (Finale Pfeilabstände werden wir noch im CSS feinjustiere, sobald die Image-Machine hier im Einsatz ist.)

• Design
  Tightened design, a new headlamp, special exterior mirror.
• Engine
  2,7l displacement, Ajax powered, with Ruby on Rails and iPods.
• Chassis
  It has a wide track and a new gear assembly, uncoditional agility.
• Safety
  2,7l displacement, Ajax powered, with Ruby on Rails and iPods.
• Comfort
  Tightened design, a new headlamp, special exterior mirror.
• Colours
  It has a wide track and a new gear assembly, uncoditional agility.
• Environment
  2,7l displacement, Ajax powered, with Ruby on Rails and iPods.

Eine Filmbox – hierbei soll nach aktuellem Stand (da kann sich noch was ändern) die Überschrift von der Image-Machine erzeugt werden, die Buttons von uns von der Grafik, und die Texte "Media Player" und "Quicktime" sind HTML:

Die sog. Flip-Flop-Navigation – hier kann man via JavaScript Unterpunkte auf- und zuklappen:

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Folgend ein normaler Paragraph mit Inline-Link und Hervorhebung:

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Die (automatisch generierte) Übersichtsseite für Pressemitteilungen -- das h3 ist von der Image-Machine gerendert:

• January - March
• April - June
• July - September
• October - December

Test

Porsche helps tsunami victims in South-East Asia with EUR 1 million	22.04.2005
Porsche builds new sports prototype - Penske Motorsports exclusive partner	15.04.2005
Porsche helps tsunami victims in South-East Asia with EUR 1 million	22.04.2005
Porsche builds new sports prototype - Penske Motorsports exclusive partner	15.04.2005

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration. Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Ein "illustrierter Link" – hierbei werden noch ähnliche Varianten nachgeliefert (Link ohne Bild, Multilink-Element):

Für den Fall, dass Sie neugierig geworden sind, und einen tieferen Einblick in unser Porsche Magazin wünschen, stellen wir Ihnen hier ausgewählte Artikel als Leseprobe zur Verfügung. Wer sich durch konjunkturelle und wirtschaftliche Unwägbarkeiten nicht aus der Bahn werfen lassen will, der braucht ein Leitprinzip. Bei Porsche ist es die Linientreue, die sich erfolgreich vom Gestern über das Heute ins Morgen fortgesetzt hat.

Wer das Tempo der Zukunft mitgehen will, der bestimmt es am besten schon heute. Das verlangt Kreativität, Kompetenz und Konzentration.

Alle "h3"-Elemente sollen über die Image-Machine in Porscheschrift ausgegeben weden. Folgendes H3 enthält beispielhaft hier nur Text:

Ich bin ein Hadrei und wäre ein Bild

Erfahren Sie hier, wie sich Porsche in den unterschiedlichen Bereichen des Unternehmens schon heute auf die Anforderungen von morgen vorbereitet.

Ein normales Bild im Fließtext.

Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.

Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.

Das Download-Element soll erstmal nur für PDFs zum Einstatz kommen. Es enthält auch wieder ein H3, welches mit der Image-Machine generiert werden sollte: