Tag: css

Responsive CSS Module: Pure

Frameworks für Responsive Design gibt es einige (z. B. Bootstrap). Viele davon beinhalten diverse Elemente, um bei der Umsetzung von Responsive Websites schneller und einfacher ans Ziel zu kommen. Ein interessante Sammlung aus CSS Modulen im minimalistischen Look gibt es unter dem Namen „Pure“. Pure beschreibt sich selbst folgendermaßen:

Pure
A set of small, responsive CSS modules that you can use in every web project.

Komprimiert ergeben die CSS Dateien nur gerade mal 4kb. Zusätzlich zu generellen Styles enhält das Pure-CSS auch Definitionen für Menüs, Tabellen, Grids, Formulare und Buttons in minimalem Design. Alles weitere Wissenswerte, Beispiele und Anleitungen für die Verwendung von Pure bei Responsive Webdesign Projekten finden sich auf der offiziellen Website.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) ist eine deklarative Stylesheet-Sprache für strukturierte Doku-mente (z.B. HTML, XHTML und XML). Durch die Trennung von Stil und Inhalt wird das Veröf-fentlichen und Betreuen von Dokumenten wesentlich vereinfacht. CSS wurde vor allem im Hinblick auf HTML entwickelt, ist aber auch für XML-Dokumente anwendbar. CSS ermöglicht es auch, Inhalte nach dem Ausgabemedium (z.B. Druck, Handy) zu ändern. Oder um für ein Anzeigemedium wie ein Handy mit geringerer Auflösung die Anzeige zu optimieren (geringe Seitenbreite und -höhe). CSS wird vom W3C spezifiziert, die CSS1-Spezifikation (1996) ist in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt. Von CSS2 (1998) sind einige Elemente bereits weit verbreitet, aber einige Fehler und Lücken in den Implementierungen machen die praktische Anwendung schwerer als nötig. Die Fähigkeiten von CSS sind vielfäl-tig: Neben diversen, weit über HTML 4 hinausgehenden Fähigkeiten im Farb- und Schriftbereich, die sich allerdings (noch) nicht mit spezialisierten Textsatzsprachen wie TeX messen können, bietet es etwa die Möglichkeit, alle Elemente frei zu positionieren, Hintergrundbilder und Vorlesestimmen festzulegen sowie noch einiges mehr. Das derzeit in Diskussion befindliche CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, d.h. einzelne Substandards (beispielsweise zur Audiowiedergabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. CSS gilt heutzutage als die Standard-Stylesheet-Sprache für das Web.

Cascading Style Sheet der Printversion ne_print.css

body {
background-color: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 11pt;
line-height: 16pt;
width: 620px;
padding-top: 20px;
padding-left: 0px;
padding-right: 20px;
padding-bottom: 20px;
}

#content {
height: auto;
padding-top: 10px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}

#footer {
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 11pt;
color: #555555;
font-weight: normal;
line-height: 13pt;
}

/* ALLGEMEINE TEXTFORMATIERUNGEN */

/* �berschriften */

h1 {
font-size: 13pt;
font-weight: bold;
color: #000080;
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 0px 0px 0px;
}

h2 {
font-size: 11pt;
font-weight: bold;
color: #000080;
margin-top: 10px;
margin-bottom: 10px;
}

h3 {
font-size: 11pt;
font-weight: normal;
color: #000080;
margin-top: 8px;
margin-bottom: 8px;
}

h4 {
font-size: 11pt;
font-weight: normal;
color: #000080;
margin-top: 8px;
margin-bottom: 8px;
}

/* Textstile */

.bodytext {
/* text_normal */
font-size: 11pt;
font-weight: normal;
color: #000000;
line-height: 16pt;
margin: 0px 0px 16px 0px;
padding: 0px;
}

.bodytext a {
color: #000080;
}

.text_footer {
margin: 0px;
padding: 0px;
font-size: 11pt;
color: #555555;
font-weight: normal;
line-height: 13pt;
}

hr {
border: 1px solid #CCCCCC;
border: none;
height: 1px;
background-color: #CCCCCC;
color: #CCCCCC;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
}

#news_container {
font-size: 11pt;
line-height: 16pt;
color: #555555;
}

#news_container a{
font-size: 11pt;
line-height: 16pt;
color: #000080;
text-decoration: none;
}

#news_container a:hover{
text-decoration: underline;
}

#news_content {
font-size: 11pt;
line-height: 16pt;
padding-top: 0px;
padding-bottom: 4px;
}

#news_head {
font-size: 11pt;
line-height: 16pt;
padding-top: 0px;
padding-bottom: 12px;
}

#news_teaser {
font-size: 11pt;
line-height: 16pt;
padding-top: 0px;
padding-bottom: 10px;
}

.news_image {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}

.news_image_text {
font-size: 10pt;
font-style: italic;
}

/* Textstile */

.bodytext {
font-size: 11pt;
font-weight: normal;
color: #555555;
line-height: 16pt;
margin: 0px 0px 18px 0px;
padding: 0px;
}

.bodytext a {
color: #000080;
text-decoration: none;
}

.bodytext a:hover {
text-decoration: underline;
}

.csc-form-label-req, .csc-form-label {
font-size: 11pt;
line-height: 18pt;
color: #555555;
}

/* Hyperlinks */

.lightblue_bottom_border a {
font-size: 10pt;
line-height: 14pt;
color: #000080;
text-decoration: none;
}

.lightblue_bottom_border a:hover {
text-decoration: underline;
}

.csc-sitemap {
padding-top: 0px;
padding-bottom: 0px;
}

.csc-sitemap a {
font-size: 11pt;
color: #000080;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
line-height: 18px;
text-decoration: none;
}

.csc-sitemap a:hover {
text-decoration: underline;
}

.csc-sitemap-level1 {
padding-top: 11pt;
padding-bottom: 0px;
margin: 0px;
}

.csc-sitemap-level2 {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 30px;
margin: 0px;
}

.csc-sitemap-level3 {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 60px;
margin: 0px;
}

#hr {
border-bottom: 1px solid #CCCCCC;
width: 490px;
height: 5px;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

ul {
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}

li {
font-size: 11pt;
color: #555555;
list-style: square;
padding-top: 5px;
padding-bottom: 5px;
}

li a {
color: #000080;
font-size: 11pt;
text-decoration: none;
}

li a:hover {
text-decoration: underline;
}

img {
border: 0px;
}

Cascading Style Sheet der Website ne_01.css

body, html {
background-color: #A6A6A6;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #555555;
height: 100%;
min-height:100%; /* for mozilla etc*/
max-height: 100%;
}

.border_top {
width: 760px;
height: 30px;
margin-left: auto;
margin-right: auto;
background-image: url(../img/border_top.gif);
}

.border_middle {
width: 760px;
height: auto;
margin-left: auto;
margin-right: auto;
background-image: url(../img/border_middle.gif);
}

.border_bottom {
width: 760px;
height: 30px;
margin-left: auto;
margin-right: auto;
background-image: url(../img/border_bottom.gif);
}

#head {
width: 700px;
height: 20px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-top: 20px;
text-align: left;
}

#head-logo {
width: 170px;
height: 20px;
float: left;
}

#head-slogan {
width: 180px;
height: 20px;
font-size: 14px;
color: #999999;
float: left;
padding-left: 20px;
font-weight: bold;
}

#metanavi {
width: 330px;
height: 20px;
font-size: 11px;
line-height: 14px;
float: left;
text-align: right;
}

#main {
width: 700px;
padding-left: 30px;
padding-right: 30px;
background-image: url(../img/main_bg.gif);
}

#main_top {
width: 700px;
clear: both;
}

#main_bottom {
width: 700px;
clear: both;
}

#container_navigation {
width: 169px;
margin-right: 1px;
height: auto;
float:left;
}

#container_content {
width: 530px;
float: right;
}

.lightblue_top_container {
width: 169px;
height: 29px;
margin-right: 1px;
margin-bottom: 1px;
background-color: #C9D6EA;
float: left;
}

.lightblue_bottom_container {
width: 169px;
height: 22px;
padding-top: 7px;
margin-right: 1px;
border-top: 1px solid #FFFFFF;
background-color: #C9D6EA;
float: left; /**/
}

.lightblue_top_border {
width: 510px;
height: 22px;
border-bottom: 1px solid #FFFFFF;
background-color: #C9D6EA;
padding: 7px 0px 0px 20px;
font-size: 12px;
color: #555555;
text-align: left;
float: left; /**/
}

.lightblue_bottom_border {
width: 510px;
height: 24px;
border-top: 1px solid #FFFFFF;
background-color: #C9D6EA;
float: left; /*clear: both;*/
padding: 5px 0px 0px 20px;
}

#mainnavi {
width: 169px;
height: auto;
}

#locator {
width: 490px;
padding-top: 10px;
padding-left:20px;
padding-right:20px;
padding-bottom: 0px;
font-size: 11px;
}

#locator a {
font-size: 11px;
color: #000080;
line-height: 14px;
text-decoration: none;
}

#locator a:hover {
text-decoration: underline;
}

#main_content {
background-color: #EFF3F9;
margin: 0px;
padding: 0px;
}

#content {
width: 490px;
min-height: 150px;
padding-top: 20px;
padding-left:20px;
padding-right:20px;
padding-bottom: 20px;
}

#headerimage {
width: 530px;
height: 149px;
border-bottom: 1px solid #FFFFFF;
}

.left_container {
width: 290px;
height: 140px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
margin-right: 1px;
margin-bottom: 1px;
background-color: #ECECEC;
float: left;
}

.right_container {
width: 159px;
height: 140px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 1px;
background-color: #E1E1E1;
float: left;
}

.footer {
width: 510px;
height: 20px;
padding-top: 5px;
padding-left: 220px;
clear: both;
font-size: 11px;
color: #555555;
}

#news_container {
font-size: 12px;
line-height: 18px;
color: #555555;
}

#news_container a{
font-size: 12px;
line-height: 18px;
color: #000080;
text-decoration: none;
}

#news_container a:hover{
text-decoration: underline;
}

#news_content {
font-size: 12px;
line-height: 18px;
padding-top: 0px;
padding-bottom: 4px;
}

#news_head {
font-size: 12px;
line-height: 18px;
padding-top: 0px;
padding-bottom: 12px;
}

#news_teaser {
font-size: 12px;
line-height: 18px;
padding-top: 0px;
padding-bottom: 10px;
}

.news_image {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}

.news_image_text {
font-size: 11px;
font-style: italic;
}

/* ALLGEMEINE TEXTFORMATIERUNGEN */

/* �berschriften */

h1 {
font-size: 14px;
font-weight: bold;
color: #000080;
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 0px 0px 0px;
}

h2 {
font-size: 12px;
font-weight: bold;
color: #000080;
margin-top: 10px;
margin-bottom: 10px;
}

h3 {
font-size: 12px;
font-weight: bold;
color: #555555;
margin-top: 8px;
margin-bottom: 8px;
}

h4 {
font-size: 12px;
font-weight: normal;
color: #555555;
margin-top: 8px;
margin-bottom: 8px;
}

/* Textstile */

.bodytext {
font-size: 12px;
font-weight: normal;
color: #555555;
line-height: 18px;
margin: 0px 0px 18px 0px;
padding: 0px;
}

.bodytext a {
color: #000080;
text-decoration: none;
}

.bodytext a:hover {
text-decoration: underline;
}

.csc-form-label-req, .csc-form-label {
font-size: 12px;
line-height: 18px;
color: #555555;
}

/* Hyperlinks */

.mainnavi-level1-no A {
display: block;
background-color: #000080;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
width: 159px;
height: 13px;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
font-size: 12px;
line-height: 13px;
color: #FFFFFF;
text-decoration: none;
}

.mainnavi-level2-no A {
display: block;
font-size: 11px;
line-height: 13px;
color: #000080;
background-color: #C9D6EA;
width: 149px;
height: 11px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 10px;
text-decoration: none;
}

.mainnavi-level2-act A {
display: block;
font-size: 11px;
line-height: 13px;
color: #000080;
background-color: #C9D6EA;
width: 149px;
height: 11px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 10px;
text-decoration: none;
font-weight: bold;
}

.mainnavi-level3-no A {
display: block;
font-size: 11px;
line-height: 13px;
color: #000080;
background-color: #C9D6EA;
width: 139px;
height: 11px;
padding-left: 30px;
padding-top: 0px;
padding-bottom: 12px;
text-decoration: none;
}

.mainnavi-level3-act A {
display: block;
font-size: 11px;
line-height: 13px;
color: #000080;
background-color: #C9D6EA;
width: 139px;
height: 11px;
padding-left: 30px;
padding-top: 0px;
padding-bottom: 12px;
text-decoration: none;
font-weight: bold;
}

.metanavi-no A {
font-size: 11px;
color: #555555;
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
}

.metanavi-no A:hover {
color: #000080;
}

.lightblue_bottom_border a {
font-size: 11px;
line-height: 15px;
color: #000080;
text-decoration: none;
}

.lightblue_bottom_border a:hover {
text-decoration: underline;
}

.csc-sitemap {
padding-top: 0px;
padding-bottom: 0px;
}

.csc-sitemap a {
font-size: 12px;
color: #000080;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
line-height: 18px;
text-decoration: none;
}

.csc-sitemap a:hover {
text-decoration: underline;
}

.csc-sitemap-level1 {
padding-top: 12px;
padding-bottom: 0px;
margin: 0px;
}

.csc-sitemap-level2 {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 30px;
margin: 0px;
}

.csc-sitemap-level3 {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 60px;
margin: 0px;
}


hr {
padding: 0px 0px 0px 0px;
border: 1px solid #C9D6EA;
border: none;
height: 1px;
background-color: #C9D6EA;
color: #C9D6EA;
width: 490px;
margin-bottom: 10px;
}

#hr {
border-bottom: 1px solid #CCCCCC;
width: 490px;
height: 5px;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

ul {
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}

li {
font-size: 12px;
color: #555555;
list-style: square;
padding-top: 5px;
padding-bottom: 5px;
}

li a {
color: #000080;
font-size: 12px;
text-decoration: none;
}

li a:hover {
text-decoration: underline;
}

img {
border: 0px;
}

Einpflegen der Inhalte in TYPO3

Für die Gestaltung der Inhalte existieren in TYPO3 bereits in der Standardinstallation umfangreiche Möglichkeiten. Aus verschiedenen Seiteninhaltstypen kann gewählt werden. Dazu gehören bspw. reine Textfelder, Texte mit einer frei wählbaren Anzahl von Bildern (samt Positionierung), Formulare, Tabellen, Auflistungen oder multimediale Inhalte . Durch die Extension „CSS styled Content“, welche die Inhaltselemente mit CSS-Formatierung verknüpft, wird dem Administrator die Möglichkeit gegeben alle Module nach eigenen Ansprüchen übergreifend und konsistent zu gestalten.

Das Einfügen neuer Inhaltstypen ist leicht und schnell erledigt. Ein spezielles TYPO3-Modul steht dafür zur Verfügung, welches wie ein Assistent funktioniert und von dem bearbeiten-den Redakteur alle notwendigen Daten abfragt. Es können beliebig viele, unterschiedliche Module für eine Seite festgelegt werden. Die Reihenfolge der Inhaltsobjekte kann auch im Nachhinein verändert und verschoben werden.

Jedes Seitenelement kann mit einer Überschrift versehen werden, die den im Style Sheet definiertem Aussehen entspricht. Nach diesem Prinzip funktioniert die gesamte Textformatierung in TYPO3. Des Weiteren stehen für den Inhaltstyp allgemeine Optionen zur Verfügung, die es z.B. ermöglichen das Element zu verstecken, einen Veröffentlichungstermin oder –zeitraum festzulegen und die Seite nur ausgewählten Benutzern bzw. Benutzergruppen zugänglich zu machen . Besonders komfortabel ist das Editieren von Texten unter Verwendung des Internet Explorers, da TYPO3 für diesen Browser standardmäßig einen „Rich Text Editor“ (kurz RTE) anbietet. Mit Hilfe dieses Editors kann der Redakteur in Anlehnung an die Bedienungsweisen einer Textverarbeitung wie z.B. „Word“ den Content erstellen, gliedern und formatieren. Durch diese praktische Funktionalität sind keine Vorkenntnisse von HTML o.ä. notwendig, um die Seiten zu warten.

Für das Einpflegen von Inhalten können in TYPO3 verschiedene Rollen vergeben werden. Für Mitarbeiter mit unterschiedlichen Kompetenzbereichen können Benutzer mit dementsprechend konfigurierten Zugriffs- und Schreibrechten eingerichtet werden, so dass ein Mitarbeiter ausschließlich in seinem Bereich tätig sein kann. Die übrigen Seitenteile sowie administrativen Funktionen werden für ihn dann komplett ausgeblendet. Die ihm zugeordneten Bereiche sind frei skalierbar. Ebenfalls können Restriktionen festgelegt werden, was das Anlegen und Weiterverarbeiten von neuen oder bestehenden Seiten belangt. Ein Benutzer kann dann bspw. eine Seite zwar verändern, jedoch nicht löschen oder neue hinzufügen. Dadurch ist optimal gewährleistet, dass der zukünftige Redakteur nicht überfordert, sondern ein auf ihn speziell abgestimmtes und passendes Angebot zusammengestellt wird. Des Weiteren ist eine intuitive Bearbeitung der Inhalte durch das sogenannte „Frontend-Editing“ möglich. Dieser Begriff beschreibt die Funktionalität, dass ein Redakteur direkt in dem Internetauftritt Änderungen an den Inhalten vornehmen kann ohne über das Backend zu agieren. Veränderbare Bereiche werden durch ein nebenste-hendes Stift-Symbol angezeigt. Durch die Auswahl dieser Edit-Funktion wird in den Bearbeitungsmodus gewechselt, der dem Redakteur bereits bekannt ist.

Da während der Bearbeitung der Diplomarbeit noch keine vollständigen Texte für die Inter-netseite bereitgestellt werden konnten, wurde der textuelle Bereich mit Blindtext zur besseren Veranschaulichung aufgefüllt und die sonstigen contentrelevanten Elemente prototypisch angelegt. Bis zum Launch der Internetpräsenz sind die Inhalte durch die Firma selbstverständlich zu ergänzen.

Erstellen der Designvorlage

Als Designvorlage kann eine normale HTML- bzw. XHTML-Seite dienen. TYPO3 verwendet dann diese ohne spezielle Präparationen versehene Vorlage, um nach ihrer Gestaltung die kompletten Seiten für das Frontend dynamisch zu generieren. Das manuelle Erstellen von Webseiten wird dadurch überflüssig und komplett durch das System abgewickelt. Dabei werden zuvor definierte Bereiche in der Vorlage mit Inhalten aus den Zellen der zu Grunde liegenden Datenbank passend ersetzt.

Als Format für die Vorlagendatei wird XHTML gewählt. Außerdem soll der Aufbau des Layouts komplett tabellenlos durch Einsatz von entsprechenden CSS-Definitionen angelegt werden.

Der exakte Doctype der Seiten wird „XHTML 1.0 Strict“ lauten, wobei es sich um eine offi-zielle Empfehlung des W3-Konsortiums handelt, die nach und nach den letzten veröffentlichten HTML 4.01-Standard ersetzen wird. XHTML ist XML-kompatibel und wurde im Januar 2000 definiert. Der Hintergedanke bei XHTML ist, dass durch Standardisierung eine medienneutrale Beschreibung von Dokumenten ermöglicht wird. So könnten XML-basierende Formate bspw. für das Web, für den Printbereich oder für mobile Endgeräte verwendet werden. Der Inhalt ist im Idealfall unabhängig vom Ausgabemedium.

Außerdem sind in XHTML definierte Internetseiten schlanker, werden schneller geladen, strukturell flexibler änderbar und bedeuten einen großen Schritt in Richtung barrierefreies Internet. Zusätzlich unterstützt werden diese Vorteile durch den Einsatz von Cascading Style Sheets und den Verzicht auf HTML-Tabellen als Mittel zur Definition des Layouts. Tabellen sind in ihrem Ursprung nicht für die Nutzung als Gestaltungsraster ausgelegt gewesen, um Internetseiten eine Struktur zu verleihen, sondern sollen als Hilfsmittel zur geordneten Darstellung von Textinformation eingesetzt werden. Die Verwendung als Gestaltungsmittel vermischt das Layout mit den Inhalten und vergrößert die Dateigröße der Seiten unnötig. Bei jedem Seitenaufruf müssen die Layoutinformationen neu geladen werden. Dies strapaziert die Bandbreite und erhöht die Ladezeiten. Ein Style Sheet mit den Angaben zum Aufbau wird lediglich einmal in den Browsercache zwischengespeichert und dann von dort aus geladen. Das reduziert das Datenvolumen merklich und führt langfristig betrachtet zu geringeren Kosten für das Webhosting. Das Einhalten moderner Webstandards bringt also, wie aus dieser Kurzbetrachtung hervorgeht, eine Vielzahl an Vorteilen mit sich.

Da das Stichwort Barrierefreiheit gefallen ist, soll in wenigen Worten der Hintergrund geklärt werden. Mit Barrierefreiheit wird der ungehinderte Zugang zu Informationen im World Wide Web besonders für körperlich eingeschränkte Internetuser bezeichnet. Im Bundesbehindertengleichstellungsgesetz (BGG) ist der exakte Begriff definiert, wobei hier der Paragraf 11 „Barrierefreie Informationstechnik“ besonders interessant ist. Die genauen Richtlinien sind in Deutschland in der „Barrierefreie Informationstechnik-Verordnung (BITV)“ festgelegt. Öffentliche Einrichtungen müssen bis spätestens Ende 2005 durch die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem BBG“ ihr Informationsangebot problemlos barrierefrei nutzbar machen. Durch die für die nordEnergie-Präsenz getroffenen technologischen Entscheidungen ist der Auftritt aus rein technischer Sicht für die Barrierefreiheit bereits optimal vorbereitet und entspricht modernsten Standards.

Der komplette Quellcode der für TYPO3 umgesetzten XHTML-Designvorlage samt Style Sheet kann im Anhang eingesehen werden. Das entwickelte Design- und Layoutkonzept wird übereinstimmend durch diese beiden Elemente abgebildet. Die Meta-Tags zur Suchmaschinen-Optimierung sind zu diesem Zeitpunkt uninteressant und werden nach späterer Definition eigenständig durch das CMS hinzugefügt.

Realisation

Die Umsetzung des Konzepts samt des erarbeiteten Design- und Layoutentwurfs stellt den finalen Schritt der Diplomarbeit dar. Das Content Management System TYPO3 muss zu diesem Zweck auf dem Server installiert und anschließend den Vorgaben entsprechend konfiguriert werden. Die Realisation des gesamten grafischen Entwurfs erfordert verschiedene, schrittweise abzuarbeitende Phasen bis das Befüllen mit den eigentlichen Inhalten beginnen kann. Das Testen unter verschiedenen Bedingungen (z.B. Darstellung in unterschiedlichen Browsern) hilft letzte Fehler auszumerzen. Als Abschluss dieses praktisch orientierten Kapitels steht das Bekanntmachen des Auftritts im World Wide Web durch Suchmaschinen-Optimierung an.