Website Dokumentation - rene-hirt.ch | René Hirt's Website · 2013-02-08 · Website‐...

Website‐Dokumentationrene‐hirt.ch Es ist der Bauplan vom Konzept zur Umsetzung und Launch der Website. Das Dokument enthält technisch relevante Daten zu Konstruktion des Internetauftritts. René Hirt, renehirt@rene‐hirt.ch 29.10.2012

rene‐hirt.ch Website‐Dokumentation 2.Oktober2012

Website‐Dokumentation_Open.docx Version 0.3 Seite 1 von 26

1. Verzeichnisse

1.1. Inhaltsverzeichnis1. Verzeichnisse ................................................................................................................................... 1

1.1. Inhaltsverzeichnis .................................................................................................................... 1

1.2. Abbildungsverzeichnis ............................................................................................................. 3

1.3. Tabellenverzeichnis ................................................................................................................. 3

2. Planung ............................................................................................................................................ 3

2.1. Ziele und Inhalte ...................................................................................................................... 3

2.2. Strategisches Konzept ............................................................................................................. 3

2.3. Produktionshandbuch ............................................................................................................. 4

3. Realisierung ..................................................................................................................................... 4

3.1. Benutzte Hardware ................................................................................................................. 4

3.2. Benutzte Software ................................................................................................................... 5

3.2.1. Test‐Server‐Einstellungen von Dreamweaver ................................................................. 6

3.3. Speziell verwendete Scripts ..................................................................................................... 8

3.3.1. Script für die Schriftart: Lucida Calligrafy ........................................................................ 8

3.3.2. JavaScript für das Hochscrollen der Website .................................................................. 8

3.3.3. Border‐Radius .................................................................................................................. 9

3.4. Fein‐Konzept‐Abänderungen .................................................................................................. 9

3.4.1. Homepage ....................................................................................................................... 9

3.4.2. Text‐Definition ................................................................................................................. 9

3.4.3. Navigations‐Architektur ................................................................................................ 10

3.5. Design‐Konzept‐Abänderungen ............................................................................................ 10

3.5.1. Content_left .................................................................................................................. 10

3.5.2. Content_middle ............................................................................................................. 10

3.5.3. Sub‐Navigation .............................................................................................................. 10

3.5.4. Footer ............................................................................................................................ 10

4. Verzeichnisstruktur ....................................................................................................................... 10

4.1. Lokale Verzeichnisstruktur .................................................................................................... 10

4.2. Host Verzeichnisstruktur ....................................................................................................... 12

5. Style‐Guide .................................................................................................................................... 13

5.1. DIV‐Identifikation .................................................................................................................. 13

5.2. Site‐Identifikation .................................................................................................................. 14



5.3. Body ....................................................................................................................................... 17

5.4. Header ................................................................................................................................... 17

5.5. Navigation ............................................................................................................................. 17

5.6. Footer .................................................................................................................................... 17

5.7. Inhalt ...................................................................................................................................... 17

5.8. HTML‐Tags ............................................................................................................................. 17

5.9. Bildformatierung ................................................................................................................... 17

5.10. Style‐Sheets ....................................................................................................................... 17

5.10.1. Allgemeine Informationen und Sheets .......................................................................... 17

5.10.2. Spezieller Sheet‐Eintrag für die Vorlage: Haupt‐Kategorie ........................................... 18

5.10.3. Spezieller Sheet‐Eintrag für die Vorlage: Homepage .................................................... 18

6. Farb‐Tabellen ................................................................................................................................. 19

6.1. Homepage ............................................................................................................................. 19

6.2. Header ................................................................................................................................... 19

6.3. Body ....................................................................................................................................... 19

6.4. Navigation ............................................................................................................................. 19

6.5. Footer .................................................................................................................................... 19

7. Launch ........................................................................................................................................... 19

7.1. Meta‐Angaben ....................................................................................................................... 19

7.1.1. Allgemeine Meta‐Angaben ............................................................................................ 19

7.1.2. Meta‐Angaben nach Dublin Core .................................................................................. 20

7.2. Provider‐Angaben und Logins ............................................................................................... 20

7.3. Suchmaschinen‐Anmeldungen .............................................................................................. 21

7.4. Wartungsleitfaden ................................................................................................................. 21

8. Anhänge......................................................................................................................................... 22

8.1. Wordpress‐Grundeinstellungen ............................................................................................ 22

8.2. Einbindung des Wordpress in die Homepage ....................................................................... 23

8.3. Wordpress‐Test‐Server .......................................................................................................... 24

8.4. Style‐Sheet‐Änderungen in Wordpress ................................................................................. 24

8.5. Linkliste .................................................................................................................................. 25

8.5.1. Thema: font‐face ........................................................................................................... 25

8.5.2. Scroll to top ................................................................................................................... 25

8.5.3. Cascading Style Sheets und Design ............................................................................... 25



1.2. AbbildungsverzeichnisAbbildung 1: Web‐Host ‐ Hostpoint ........................................................................................................ 5

Abbildung 2: Lokale DW‐Einstellungen ................................................................................................... 6

Abbildung 3: Einfache Test‐Server‐Einstellungen ................................................................................... 6

Abbildung 4: Erweiterte Test‐Server‐Einstellungen ................................................................................ 7

Abbildung 5: Stammordner für Bilder ..................................................................................................... 7

Abbildung 6: Div‐Identifikation ............................................................................................................. 13

Abbildung 7: Div‐Identifikation mit Höhen ........................................................................................... 14

Abbildung 8: Wordpress ‐ Links und Einstellungen ............................................................................... 23

Abbildung 9: Style ‐ Wordpress ............................................................................................................. 24

1.3. TabellenverzeichnisTabelle 1: Benutzte Hardware ................................................................................................................. 4

Tabelle 2: Benutzte Software .................................................................................................................. 5

Tabelle 3: Neue Text‐Definition .............................................................................................................. 9

Tabelle 4: Neue Boxen im Footer .......................................................................................................... 10

Tabelle 5: Lokale Verzeichnis‐Strukturen .............................................................................................. 12

Tabelle 6: Host Verzeichnis‐Struktur ..................................................................................................... 12

Tabelle 7: Div‐Identifikation .................................................................................................................. 14

Tabelle 8: Site ‐ Identifikation ............................................................................................................... 17

Tabelle 9: Style‐Sheets .......................................................................................................................... 18

Tabelle 10: Allgemeine Meta‐Angaben ................................................................................................. 20

Tabelle 11: Meta‐Angaben nach Dublin Core ....................................................................................... 20

Tabelle 12: Provider‐Angaben und Logins ............................................................................................. 21

Tabelle 13: Wartungsleitfaden .............................................................................................................. 21

Tabelle 14: Wordpress‐Einstellungen ................................................................................................... 23

Tabelle 15: Stylesheet Wordpress ‐ Neue Codes .................................................................................. 25

Tabelle 16: Links ‐ Font‐Face ................................................................................................................. 25

Tabelle 17: Links ‐ Scroll to top.............................................................................................................. 25

Tabelle 18: Links ‐ CSS und Design ........................................................................................................ 26

2. Planung

2.1. ZieleundInhalteDie Website rene‐hirt.ch war bereits 8 Jahre alt und wurde selten aktualisiert. Sie entsprach nicht

mehr dem heutigen Standard und sie war auch vom Design her entsprach sie nicht mehr dem Stil von

René Hirt. Daher entschloss sich René Hirt die alte Website nicht mehr zu renovieren, sondern eine

komplett neue Website zu kreieren. Das Ziel der neuen Website ist es, die Person René Hirt im Stand

2012 zu wiederspiegeln.

2.2. StrategischesKonzeptDer Benutzer soll nach dem Besuch der Website die Person und den Charakter kennen. Daher

entschloss sich René Hirt die Website generell statisch zu gestalten, da sich die Inhalte eh kaum



ändern. Anhand der Konkurrenzanalyse und SWOT‐Profil erkannte der Auftraggeber, dass

zunehmend dynamische Inhalte wichtig werden. Daher wurde auch der Homepage ein Blog mit

einem persönlichen Tagebuch implementiert.

2.3. ProduktionshandbuchDer Grundton der Website wurde in einem violetten Farbton gehalten. Die Farben Rot und Blau

sollen das Violett unterstreichen. Die Schriftart wurde in der Farbe Schwarz gehalten mit weissem

Hintergrund. Diverse Style‐Elemente wurden durch die Farben Gold und Silber unterstützt.

Die Überschriften wurden generell in den Schriftarten Lucida Calligrafy und als Alternative die

Schriftart Tahoma gewählt. Für die Links und Inhaltstexten benutzte man die Schriftart Verdana.

Als Navigations‐Architektur wählte man eine Haupt‐Navigation, die horizontal direkt unterhalb des

Header positioniert wurde. Die Unter‐Navigation wurde auf die linke Website des Inhalts

untergebracht. Weitere Unter‐Navigation wurde nicht geplant, da auch bewusst die Klicktiefe gering

gehalten wurde. Die Meta‐Navigation für Inhalte, die nicht in eine Kategorie eingeteilt werden

konnte, wurde direkt oberhalb des Headers positioniert.

Als Gestaltungsrater wurde ein generelles Raster von 5 Spalten genommen, um den goldenen Schnitt

zu gewährleisten. Die Reihen wurden nicht bewusst eingeteilt, jedoch wurde bei der Konstruktion auf

die Rasterhaltigkeit geachtet.

3. Realisierung

3.1. BenutzteHardwareUmgebung Merkmale

Private Workstation

Berufliche Workstation Für die Öffentlichkeit gesperrt.

Web‐Host

Internetanbindung

Tabelle 1: Benutzte Hardware

Der bereits bestehende Web‐Host hat folgende Konfigurationen gemäss Abbildung 1: Web‐Host ‐

Hostpoint, Stand 13.11.2012.

Daher wurde entschieden auf der Workstation im Betrieb den WampServer 2.2E, 64bit auf

Grundlagen von PHP 5.3 zu installieren, obschon ein WampServer mit PHP 5.4 existieren würde.



Abbildung 1: Web‐Host ‐ Hostpoint

3.2. BenutzteSoftwareAnwendung Software Version

FTP‐Client WinSCP 4.3.7

HTML‐Editor Adobe Design Premium CS5: Dreamweaver 5.5

Notepad++ 6.1.3

CSS‐Editor Adobe Design Premium CS5: Dreamweaver 5.5

Notepad++ 6.1.3

Gestaltung Adobe Design Premium CS5: Fireworks 5.5

Bildbearbeitung Adobe Design Premium CS5: Photoshop 5.5

Blog Wordpress 3.4.2

Analyse Awstats Unbekannt

Host‐GUI Hostpoint Control Panel Unbekannt

Projektplanung Ganttproject 2.5.2

Mindjet MindManager Pro 7.1.394

Novell GroupWise 8.0.2

Outlook 2007 Unbekannt

Acrobat 9 Professional 9.5.2

Betriebssystem Microsoft Windows 7 SP1 Enterprise 6.1.7601 SP1

Test‐Server WampServer 2.2

Apache 2.2.22

PHP 5.3.13

phpMyAdmin 3.5.1

MySQL 5.5.24 Tabelle 2: Benutzte Software



3.2.1. Test‐Server‐EinstellungenvonDreamweaver

Abbildung 2: Lokale DW‐Einstellungen

Da die lokalen Dreamweaver‐Einstellungen direkt zum Test‐Server gehen, werden die Daten

regelmässig auf den Stick gesichert werden müssen!

Abbildung 3: Einfache Test‐Server‐Einstellungen

Für den Upload auf den Web‐Host von Hostpoint (Scharfschaltung – Launch) wird ein FTP‐Client

benutzt und die Daten mittels dem FTP‐Protokoll übertragen. Die Logins sind im Kapitel 7.2. zu

finden.



Abbildung 4: Erweiterte Test‐Server‐Einstellungen

Ob die Daten tatsächlich automatisch auf den Test‐Server beim Abspeichern raufgeladen werden

sollen, wird man in der Praxis noch ausprobieren müssen. Hier wird aber versucht, Flüchtigkeitsfehler

zu vermeiden, indem man vergisst, den Server zu aktualisieren.

Abbildung 5: Stammordner für Bilder

Diese Einstellung wird nicht zwingend benötigt, kann aber die Arbeiten vereinfachen.



3.3. SpeziellverwendeteScripts

3.3.1. ScriptfürdieSchriftart:LucidaCalligrafyDie Schriftart Lucida Calligrafy wird nicht in jedem Betriebssystem unterstützt. Daher wird über den

CSS‐Befehl folgendes Script eingesetzt:

@font‐face {

font‐family:'Lucida Calligraphy';

src: local('');

src: url('www.rene‐hirt.ch/tamplates/lucida‐calligrafy.eot') format('eot'),

url('www.rene‐hirt.ch/templates/lucida‐calligrafy.ttf') format('truetype'),

font‐weight:normal;

font‐style:italic;

}

Zudem wird im Host‐Server in der Datei .htaccess folgender Befehl eingetragen, damit auch Firefox

mit absoluten Links umgehen kann:

<FilesMatch "\.(ttf|otf|eot)$">

Header set Access‐Control‐Allow‐Origin "*"

</FilesMatch>

Mit allen anderen Browser‐Versionen sollte mit dem font‐face‐Befehl die Schriftart funktionieren.

3.3.2. JavaScriptfürdasHochscrollenderWebsiteVon Dynamic Drive wird ein spezielles JavaScript für das Hochscrollen der Website zum Anfang der

Seite benutzt. Das Script ist im Verzeichnis ‚scripts‘ auf dem Host gespeichert. Das Script wird im

Header aufgerufen unter folgendem Befehl:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="scripts/scrolltopcontrol.js">

/***********************************************

* Scroll To Top Control script‐ © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Project Page at http://www.dynamicdrive.com for full source

code***********************************************/

</script>

WICHTIG: Damit das Script funktioniert muss als Link: <a href="#top">Back to Top</a> enthalten

sein. Die Variablen können im Script scrolltopcontrol.js verändert werden. Entsprechende Angaben

sind im Script kommentiert.

Zudem wurde für den Scroll‐Button ein eigenes Bild generiert unter dem Namen: up_lila.png. Diese

ersetzt up.png im Orginal‐Script. Der neue Pfadt heisst:

controlHTML: '<img src="images/up_lila.png" style="width:100px; height:50px" />',



Auf der Zeile 59 wurde das Original‐Script auch verändert mit dem Eintrag:

.attr({title:'Nach oben ‐ Zum Haupt‐Menu'})

Wenn der Benutzer auf den Button geht erscheint mit diesem Eintrag ein Hilfsfenster mit der

Beschriftung: ‚Nach oben – Zum Haupt‐Menu‘.

3.3.3. Border‐RadiusDie sichtbaren Boxen sollen oben links und unten rechts abgerundet sein. Im Design‐Konzept ist dies

unterschiedlich gezeichnet worden, indem alle Ecken rund sind. Die obere rechte und die untere

linke Ecke sollen spitz verlaufen. Daher werden für die abgerundeten Ecken im Stylesheet der border‐

radius‐Befehle verwendet. Diese sind allerdings nur auf Browsern ersichtlich, die mit CSS3 umgehen

können. Im Code werden auch Hacks für die verschiedenen Browser geschrieben:

‐webkit‐border‐top‐left‐radius: 10px;

‐webkit‐border‐bottom‐right‐radius: 10px;

‐moz‐border‐radius‐topleft: 10px;

‐moz‐border‐radius‐bottomright: 10px;

border‐top‐left‐radius: 10px;

border‐bottom‐right‐radius: 10px;

Dies ist der Beispiel‐Code für die Hauptnavigation. Dies wird auch für die Boxen sub_navigation und

content_middle_right verwendet. Der Radius wird dabei 5px betragen.

Es wurde ein Border‐Radius‐Generator für den Code verwendet: border‐radius.com.

3.4. Fein‐Konzept‐Abänderungen

3.4.1. HomepageUm für das Wordpress auf der linken Seite einen geeigneten Seiten‐Spiegel zu haben, wurde die Box

content_left auf der Homepage entgegen dem Fein‐Konzept integriert mit dem Bild content_left.gif.

3.4.2. Text‐DefinitionDie Schriftart Lucida Calligrafy hat sich in den Screen‐Test für die Navigation und Sub‐Navigation

nicht bewährt. Auch funktionierte diese Schriftart mit dem @font‐face Script nicht sehr zuverlässig.

Zudem wirkte die Website zu schnörkelig und filigran. Deshalb wurde auch bei den Überschriften auf

Lucida Calligrafy verzichtet. Als Ersatz wurden folgende Fonts verwendet:

Objekt Tag Eigenschaften

Überschrift 1 H1 Tahoma, Geneva, 20px, letter‐space:1.5px



Überschrift 1 im content_middle_right

H1 Tahoma, Geneva, 14px, letter‐space:normal

Navigation A Tahoma, Geneva, 24px, letter‐space:1.5px

Sub‐Navigation A Tahoma, Geneva, 16px, letter‐space:1.5px Tabelle 3: Neue Text‐Definition

Das @font‐face‐Script wird nicht mehr benötigt und daher im Code auskommentiert, falls es später

dennoch benutzt werden sollte. Auch der Code im .htaccess bleibt bis auf weiteres bestehen.



3.4.3. Navigations‐ArchitekturDie beiden Links: Linkliste und Website‐Projekte, die zuerst ein Bestandteil der Haupt‐Navigation sein

sollte wurden aus Platz‐Gründen in den Meta‐Bereich versetzt. Dort wurden sie gestalterisch

getrennt von den übrigen Meta‐Links. Zusätzlich wurde ein Link für die DVD‐Sammlung von René Hirt

angebracht, die auf die Website http://connect.collectorz.com/users/renehirt/movies/view zeigt.

3.5. Design‐Konzept‐Abänderungen

3.5.1. Content_leftDie Box content_left wurde neu in der Homepage integriert mit einer Breite von den geplanten 50px.

Im Anschluss an content_left kommt der Tag iframe, der das Wordpress auf der Homepage

integriert. Die folgende Box wurde auf eine Breite von 950px angepasst.

3.5.2. Content_middleDamit das Floating und die Platzierung der Boxe content_middle besser funktioniert, wurde entgegen

dem Fein‐Konzept diese Box in der Breite auf 350px beschränkt. Zudem hat der Inhalt auf beiden

Seite einen Raum von 15px erhalten, damit dieser vom Style her besser funktioniert.

3.5.3. Sub‐NavigationDas Stimmungsbild für die Unter‐Navigation wurde wegen technischer und umständlicher Struktur

nicht mehr unterhalb der Box sondern innerhalb dieser Box programmiert. Auch der Style der Unter‐

Navigation wurde gestalterisch verändert, damit diese besser in das Gesamtbild der Website passt

und damit sich der Benutzer von der Usability her besser orientieren kann. Die Links und der Titel mit

Stimmungsbild werden über ein hr‐Tag voneinander getrennt.

3.5.4. FooterDamit die Inhalte im Footer besser unterteilt werden können wurden hier zusätzliche Boxen

generiert:

Boxen Name Inhalte Floating

Position Masse

footer_top Top Link Left Direkt nach der Boxe footer, die alle Boxen einschliesst.

Breite: 50px.

footer_copy Copyright und Design

Left Nach der Boxe footer_top Breite: 150px.

footer_navigation Haupt‐Menü Left Nach der Boxe footer_copy Breite: 400px.

footer_links Meta‐Links Left Nach der Boxe footer_navigation

Breite: 390px.

Tabelle 4: Neue Boxen im Footer

4. Verzeichnisstruktur

4.1. LokaleVerzeichnisstrukturHauptverzeichnis Unterverzeichnis Eigenschaften

Altes Projekt Diverse Hier sind alle Informationen über die alten Projekte der Website rene‐hirt.ch abgespeichert.

www.rene‐hirt.ch Die Online‐Dateien der Website aus dem Jahre 2004.



Backup ‐ Hier werden die kompletten Server‐Backups gespeichert.

Datenbank ‐ Verzeichnisse und Dateien, die für die Datenbank verantwortlich sind, wie das Wordpress Tagebuch

Wordpress Root für die Wordpress Module

Diverses ‐ Für Verzeichnisse und Dateien, die nicht zugeordnet werden können.

Konzept ‐ Alle Verzeichnisse und Dateien, die für die konzeptionellen Arbeiten notwendig sind. Hier sind auch enthalten: ‐ Website‐Konzept.docx ‐ Website‐Dokumentation.docx

Abbildung Diverse JPG‐ und PNG‐Dateien, die im Konzept und Dokumentationen enthalten sind.

Mindmaps Diverse Mindmaps und Brainstormings, die massgebend für das Konzept waren.

Präsentationen Diverse PowerPoint‐Dateien, die für das Konzept notwendig waren.

Org Bilder ‐ Bilder, die im Roh‐Zustand und unbearbeitet vorhanden sind.

Bern Bilder, die die Stadt Bern betreffen

Bilderübungen Übungen, die auch drei Bildern in den frühen Jahren gemacht wurden.

Diverses Zu zuordnungsbare Bild‐Dateien

Ferien Bilder aus den Ferien oder Ausflüge

Games Screenshot und Download‐Bilder aus den gespielten Games

Header Rohdateien aus dem entwickelten Header

Hintergrund Rohdateien für den Hintergrund

ICT Bilder, die im Zusammenhang mit der Informatik stehen.

Internet DL Download Bilder aus dem Internet in ihrer originalen Form.

Logos Selbst entworfene Logos.

Mittelalter und Fantasie

Bilder zum Thema Mittelalter und Fantasie, ev auch Science Fiction.

Photoshop Bilder in ihrer Roh Form als PSD‐Datei gespeichert.

Portrait Portrait‐Bilder von René Hirt

Sternzeichen Horoskop‐Bilder zum Sternzeichen Schütze und Pferd.

WOW‐Bilder Games‐Bilder, die ausschliesslich das MMORPG World of Warcraft betreffen.

Org Programme ‐ Diverse Programme, Manuals, ZIP‐Dateien, PDF‐Dateien und Notizen, die für die Arbeiten benutzt worden sind.

Formmail Roh‐Code für den Formmailer, der aus dem Generator von Hostpoint rauskopiert wurde. Wird für das Kontakt‐Formular verwendet.

Org Text ‐ Texte, die in ihrer Roh Form und unformatiert vorhanden sind.

rene‐hirt.ch ‐ Die Struktur, wie sie auf dem Webserver vorhanden sein wird. Von diesem Verzeichnis aus findet der Upload statt über FTP (WinSCP). Die detaillierte Struktur ist im



Kapitel 4.2. ersichtlich.

Vorlagen ‐ Diverse Vorlagen und Hilfsmittel zur Erstellung des Konzeptes, Dokumentation und der Website.

Tabelle 5: Lokale Verzeichnis‐Strukturen

4.2. HostVerzeichnisstrukturDiese Ordner‐Struktur wird online auf den Webserver von Hostpoint raufgeladen; in das Verzeichnis:

public_html. Auf dem Root besteht eine Verknüpfung www, die aber auch auf das Verzeichnis

public_html verweist. Generell wird die gesamte Website auf das Root des Servers geladen und keine

Unterverzeichnisse oder Sub‐Domains auf dem Server installiert. Ausnahmen können Module wie

zum Beispiel das Wordpress oder andere dynamische Elemente (CMS, Foren) darstellen. Weitere

Verzeichnisse, die über den FTP‐Zugang zu erreichen sind, werden für den Website‐Auftritt nicht

benötigt.

Aussergewöhnliche Konfigurationen, die auch den Webserver und die Sicherheit betrifft, werden

über den Support von Hostpoint eingestellt werden müssen. Dies kann Einträge im .htaccess

betreffen, die einen absoluten URL für das font‐face zulassen.

Hauptverzeichnis Unterverzeichnis Eigenschaften

_notes ‐ Wird automatisch von Dreamweaver generiert.

_Vorlage ‐ Hier werden die Original‐Vorlagen der Website gespeichert aus denen weitere Sites generiert werden können.

css ‐ In diesem Verzeichnis werden die Style Sheets der Website gespeichert.

images ‐ Die bearbeiteten Bilder werden dort abgelegt.

pdf ‐ Hier werden die öffentlich zugänglichen PDF‐Dateien abgelegt.

scripts ‐ Hier wird das Verzeichnis für diverse Skripte wie PHP, JavaScript oder ähnliche.

sites ‐ Es ist der Überordner für alle Webseiten.

01_home Die Index‐Seite wird direkt im Root stehen und nicht in diesem Unterverzeichnis! Hier werden die Seiten der Header‐Kategorien stehen.

02_itsme Websites der Haupt‐Kategorie: It’s me ^^

03_ausbildung Websites der Haupt‐Kategorie: Ausbildung

04_hobbies Websites der Haupt‐Kategorie: Hobbies

05_sport Websites der Haupt‐Kategorie: Sport

06_games Websites der Haupt‐Kategorie: Games

07 Reserve

08_links Websites der Haupt‐Kategorie: Linkliste

09_projekt Websites der Haupt‐Kategorie: Website‐Projekt

templates ‐ Hier werden generierbare Vorlagen abgespeichert für eventuell spätere dynamische Inhalte.

wordpress ‐ Wordpress‐Modul der Homepage.

Website_2004 Diverse Die Website aus dem Jahre 2004‐2012 Tabelle 6: Host Verzeichnis‐Struktur



5. Style‐Guide

5.1. DIV‐Identifikation

Abbildung 6: Div‐Identifikation

Es wurde die gleiche Identifikation benutzt wie sie vorher im Design‐Konzept beschrieben wurde.

Auch das Gestaltungsraster konnte direkt verwendet werden. Die Boxen content_middle_right und

content_right wurden wegen dem float:right Befehl getauscht.

Boxen Name Farb‐Code Floating Position Masse

content_body #FFFFFF None Rahmen‐Box über alle anderen Boxen

Breite: 1000px

meta_link #8F0072 None Direkt nach dem content_body und vor dem header

Breite: 1000px Höhe: 30px

header #64008F None Direkt nach dem meta_link und vor navigation


navigation #64008F None Nach dem Header und vor content_main


content_main #CCCCCC None Direkt nach navigation und vor dem footer!!!

Breite: 1000px Höhe: ‐

content_left #FFFFFF (#64002F)

Left Innerhalb des content_main und vor der sub_navigation

Breite: 50px Höhe: skaliert

sub_navigation #8F002A Left Direkt nach dem content_left und vor content_middle

Breite: 150px Höhe: skalierbar

content_middle #FFFFFF (#FFFF00)

None Nach der sub_navigation und vor dem content_middle_right

Breite: (400px), Höhe: skalierbar.



content_middle_right #FFFFFF (#CCCCCC)

Right Direkt nach dem content_middle und vor content_right

Breite: 200px Höhe: skalierbar.

content_right #FFFFFF (#999999)

Right Vor dem content_middle_right oder content_middle und als Abschluss des content_main

Breite: 200px Höhe: skalierbar.

footer #8F0072 Clear Direkt nach dem content_middle

Breite: 1000px Höhe: 50px.

Tabelle 7: Div‐Identifikation

Hier ist das höhenbereinigte Gestaltungsraster:

Abbildung 7: Div‐Identifikation mit Höhen

5.2. Site‐IdentifikationFür sämtliche Inhalt‐Seiten und Homepage wurden generell drei unterschiedliche Vorlagen

entwickelt, die im Verzeichnis _Vorlage abgelegt sind:

Index_haupt_kategorie.php – Für Websites der Haupt‐Navigation, ohne den rechten

mittleren Teil content_middle_right

Index_homepage.php – Für Websites, die für die Startseite oder Tests bestimmt sind.

Index_unter_kategorie.php – Für Inhalte aus der Unter‐Kategorien, bei denen alle Boxen

gezeigt werden.

Die folgende Tabelle zeigt den konkreten Aufbau der einzelnen Websites. Alle Websites, ausser die

index‐Seiten, sind im Haupt‐Verzeichnis ‚sites‘ im Root abgelegt:

Name Verzeichnis Vorlage Kategorie Inhalte



Index.php Root Index_homepage.php Keine Startseite (scharf)

Index_d.php Root Index_unter_kategorie.php Unter‐K. Haupt‐K.

Demo‐Seite für die komplette Website

Index_i.php Root Index_haupt_kategorie.php Keine Vorlageseite für das iframe, falls der Browser keine Frames anzeigt.

Index_iframe.php Root Index_homepage.php Keine Demo‐Seite für die Startseite inkl. Wordpress

Index_p.php Root Index_homepage.php Keine Test‐Seiten für Integration von PHP.

Index_w.php Root Index_homepage.php Keine Wordpress‐Seite für den Test‐Server

Inhalt.php 01_home Index_unter_kategorie.php Header Das Inhaltsverzeichnis

Impressum.php 01_home Index_unter_kategorie.php Header Das Impressum

Kontakt.php 02_itsme Index_unter_kategorie.php Header Kontakt‐Daten und das Kontakt‐Fomular

Suche.php 01_home Index_unter_kategorie.php Header Für eine spätere Such‐Funktion als Platzhalter.

Links.php 08_links Index_haupt_kategorie.php Header Überblick der wichtigsten Links

Websites.php 08_links Index_unter_kategorie.php Unter Zeigt die Websites von René Hirt

Bummel.php 08_links Index_unter_kategorie.php Unter Die E‐Shop‐Links.

Joblinks.php 08_links Index_unter_kategorie.php Unter Berufliche Links.

Gamelinks.php 08_links Index_unter_kategorie.php Unter Links über das Gamen.

Hobbylinks.php 08_links Index_unter_kategorie.php Unter Ein paar Links über die Hobbies.

Sportlinks.php 08_links Index_unter_kategorie.php Unter Links über Sport.

projekt.php 09_projekt Index_haupt_kategorie.php Header Überblick über das Projekt.

Fazit.php 09_projekt Index_unter_kategorie.php Unter Rückblick über das Websites‐Projekt

Konzept.php 09_projekt Index_unter_kategorie.php Unter Vorstellung des Website‐Konzepts.

Dokumente.php 09_projekt Index_unter_kategorie.php Unter Vorstellung der Website‐Dokumentation.

Design.php 09_projekt Index_unter_kategorie.php Unter Diverse Design‐



Skizzen aus dem Konzept.

Itsme.php 02_itsme Index_haupt_kategorie.php Haupt Der Überblick über meine Person.

Daten.php 02_itsme Index_unter_kategorie.php Unter Meine persönlichen Daten.

Stationen.php 02_itsme Index_unter_kategorie.php Unter Die Stationen und Wohnorte im Leben.

Lebenslauf.php 02_itsme Index_unter_kategorie.php Unter Ein kurzer Lebenslauf.

Charaktere.php 02_itsme Index_unter_kategorie.php Unter Eine Beschreibung der eigenen Sternzeichen.

Ausbildung.php 03_ausbildung Index_haupt_kategorie.php Haupt Die Übersicht meiner Ausbildung.

Ict.php 03_ausbildung Index_unter_kategorie.php Unter ICT‐Kenntnisse und Diplome.

Referenzen.php 03_ausbildung Index_unter_kategorie.php Unter Website‐Referenzen.

Kaufmann.php 03_ausbildung Index_unter_kategorie.php Unter Kaufmännische Ausbildung und Diplome.

Marketing.php 03_ausbildung Index_unter_kategorie.php Unter Diplome und Wissen im Marketing und Verkauf.

Technisch.php 03_ausbildung Index_unter_kategorie.php Unter Technisches Wissen und Diplome

Hobbies.php 04_hobbies Index_haupt_kategorie.php Haupt Überblick der eigenen Hobbies.

Schach.php 04_hobbies Index_unter_kategorie.php Unter Über die Zeit im Schach.

Musik.php 04_hobbies Index_unter_kategorie.php Unter Meine Lieblingsmusik.

Filme.php 04_hobbies Index_unter_kategorie.php Unter Die Liebe zum Film mit der Film‐Datenbank.

Lesen.php 04_hobbies Index_unter_kategorie.php Unter Die bevorzugten Bücher und Stile.

Schreiben.php 04_hobbies Index_unter_kategorie.php Unter Die ersten Versuche des Schreibens.

Sport.php 05_sport Index_haupt_kategorie.php Haupt Der Überblick über sportliche Aktivität.



Fitness.php 05_sport Index_unter_kategorie.php Unter Aktivität im Fitness‐Center

Wingchun.php 05_sport Index_unter_kategorie.php Unter Die Zeit als Wing Chun Schüler

Icehockey.php 05_sport Index_unter_kategorie.php Unter Die Zeit beim SCB

Formeleins.php 05_sport Index_unter_kategorie.php Unter Die Begeisterung im Renn‐Sport

Games.php 06_games Index_haupt_kategorie.php Haupt Überblick über das Gaming/Spiele

Playstation.php 06_sport Index_unter_kategorie.php Unter Die Zeit mit der Play Station.

Pc.php 06_sport Index_unter_kategorie.php Unter Die beliebtesten PC Spiele.

Mmorpg.php 06_sport Index_unter_kategorie.php Unter Über die Online Rollenspiele.

Tabelle 8: Site ‐ Identifikation

5.3. Body

5.4. Header

5.5. Navigation

5.6. Footer

5.7. Inhalt

5.8. HTML‐Tags

5.9. Bildformatierung

5.10. Style‐Sheets

5.10.1. AllgemeineInformationenundSheetsAuf den Websites wurden zwei unterschiedliche Links zu den Style‐Sheets definiert:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

Der obere Link leitet zur Haupt‐Sheet, der generell für die Gestaltung am Monitor verantwortlich ist.

Der zweite Link leitet weiter zum Sheet, der nur für die Ausgabe zum Drucker konzipiert worden ist.

In diesem Style‐Sheet werden der Header, die Haupt‐ und Unter‐Navigation, der Footer sowie das

Bildmaterial ausgeschlossen. Somit erhält der Benutzer reine Text‐Informationen für den Ausdruck.

Der Style‐Sheet für das Wordpress wurden im Kapiteln 8.1 und die Abänderungen in die Datei

style.css von Wordpress wurde in dem Kapitel 8.4 aufgeschrieben.

Aus dem Style‐Sheet main.css werden weitere Unter‐Sheets mittels Befehl @import integriert mit

den folgenden Aufgaben:



Style‐Sheet Aufgabe/Eigenschaft Boxen

Main.css Ist das erste Style‐Sheet mit der Verlinkung zu den anderen Sheets. Beinhaltet die generellen Tags‐Definitionen und Gesamt‐Struktur der Website.

#content_body #content_main

Print.css Sorgt für die Druck‐Ausgabe der Website Alle

Meta_link.css Formatiert den Meta‐Link‐Bereich und die Header‐Navigation.

#meta_link

Header.css Ist verantwortlich für den Header‐Bereich. #header

Navigation.css Sorgt für die Formatierung und die Positionierung der Haupt‐Navigation.

#navigation

Content_left.css Positioniert die erste Box im Inhalts‐Bereich. #content_left

Sub_navigation.css Definiert und Positioniert die Unter‐Navigation mit ihren Links, Boxen und Stimmungsbildern.

#sub_navigation

Content_middle.css Positioniert die Haupt‐Box für die Inhalte. #content_middle

Content_middle_right.css Sorgt für die Positionierung und Formatierung der zusätzlichen Inhalte in den Unter‐Kategorien.

#content_middle_right

Content_right.css Positioniert die Stimmungsbilder auf der rechten Seite der Website.

#content_right

Footer.css Zeigt sich Verantwortlich für den Schlussbereich der Website inkl. Links.

#footer #footer_top #footer_copy #footer_navigation #footer_links

Tabelle 9: Style‐Sheets

Alle Style‐Sheets sind im Verzeichnis ‚css‘ im Root zu finden. Wichtige Elemente, die zur

Positionierung der Boxen oder Links dienen sind im Script mit den entsprechenden Kommentaren

versehen.

5.10.2. SpeziellerSheet‐EintragfürdieVorlage:Haupt‐KategorieFür die Vorlage index_haupt_kategorie wurde im Header folgender Style definiert:

<style type="text/css" media="screen">

#content_right {

width:400px;

background‐color:#FFF;

}

</style>

Gemäss der Vererbungs‐Regeln wird mit diesem Script gesorgt, dass die äusserste Rechte Box mit

dem Stimmungsbild die notwendige Breite von 400px erhält und somit die Website‐Struktur aufrecht

erhalten wird. Dies ist nötig das die Box content_middle_right in der Haupt‐Kategorie nicht mehr

gezeigt wird und daher ausgeblendet wird.

5.10.3. SpeziellerSheet‐EintragfürdieVorlage:HomepageFür die Vorlage index_homepage wurde auch Sicherheitsgründen die Box #content_main nochmals

konfiguriert und positioniert. Je nach Inhalten kann daher die Breite, Höhe, Hintergründe etc. für die



Startseite individuell verändert werden. Zudem kann mit dieser Box die technische Möglichkeit

gegeben werden, zusätzlich die linken oder rechten Stimmungsbilder einzublenden.

Das Script im Header‐Tag:

<style type="text/css" media="screen">

#content_main {

width:1000px;

background‐color:#FFF;

display:block;

clear:both;

}

</style>

6. Farb‐Tabellen

6.1. Homepage

6.2. Header

6.3. Body

6.4. Navigation

6.5. Footer

7. Launch

7.1. Meta‐AngabenDa die Domain der Website bereits 8 Jahre existiert, ist diese im Ranking unter dem Suchbegriff rene

hirt an oberster Stelle. Die Website wurde wegen dem Provisorium (Tagebuch René Hirt) bereits im

November im Webmaster‐Tool von google angemeldet. Zur Verifikation gilt folgender Meta:

<meta name="google‐site‐verification" content="GKv‐ttHp8dAgY2b4L2or1kfAt0zigSEXnCEydxHzqf4"

/>

7.1.1. AllgemeineMeta‐AngabenMeta‐Name Inhalt

Description René Hirt's Persönliche Website ‐ Das eigene Tagebuch‐Blog mit täglich neuen Einträgen ‐ Lernen sie die Person René Hirt aus Bern, Schweiz kennen.

Keywords René Hirt, Website, Blog, persönlich, Erlebnisse, Geschehen, Zollikofen, Bern, Schweiz, It's me, Lebenslauf, Charaktere, Kontakt, Ausbildung, ICT, Wissen, Referenzen, Kaufmann, Kenntnisse, Marketing, Verkauf, Technisch, Hobbies, Hobby, Schach, Musik, Filme, Movies, Lesen, Schreiben, Sport, Fitness, Wing, Chun, Kung Fu, Ice, Hockey, Formel Eins, Play Station, PC, Games, MMORPG, Linkliste, Einkaufsbummel, Gaming, Fazit, Konzept, Dokumente, Design, Skizzen

Robots Index, follow, all

Content‐language De, deutsch, german



Revisit‐after 15 days

Author René Hirt

Publisher René Hirt

Copyright René Hirt

Date 2012‐12‐07 Tabelle 10: Allgemeine Meta‐Angaben

7.1.2. Meta‐AngabennachDublinCoreMeta‐Name Inhalt

DC.title René Hirt's Website ‐ Die persönliche Website von René Hirt mit eigenem Tagebuch

DC.creator René Hirt

DC.subject Personifizierte Website mit Tagebuch, Hobbies, Ausbildung, Interessen von René Hirt

DC.description René Hirt's Persönliche Website ‐ Das eigene Tagebuch‐Blog mit täglich neuen Einträgen ‐ Lernen sie die Person René Hirt aus Bern, Schweiz kennen.

DC.publisher René Hirt

DC.contributor René Hirt

DC.date 2012‐12‐07

DC.type Text

DC.format Text/html

DC.identifier http://www.rene‐hirt.ch

DC.source René Hirt, Autor, Wikipedia

DC.language De

DC.coverage Bern, Schweiz, Switzerland

DC.rights Alle Rechte liegen beim Autor Tabelle 11: Meta‐Angaben nach Dublin Core

7.2. Provider‐AngabenundLoginsHost‐Provider Hostpoint, St. Dionysstrasse 31, 8640 Rapperswil‐Jona, Schweiz

URL‐Provider http://www.hostpoint.ch

Provider‐Hotline 0844 040404 Support und Verkauf

Provider Online Support Support.hostpoint.ch

Login Control Panel Benutzername Für die Öffentlichkeit gesperrt.

Passwort

E‐Mail‐Account Email‐Adresse

Posteingangs‐Server

Postausgangs‐Server

Benutzername

Passwort

Login Open‐Xchange Benutzername

Passwort

Login Webserver Server‐Adresse

Protokoll

Benutzername

Passwort

Portnummer

Verschlüsselung

Wordpress Applikations‐Art



Applikations‐Name

URL

Website

Version

Verzeichnis

Datenbank

Datenbank‐Benutzer

Datenbank‐Passwort

Wordpress‐Testserver URL

Verzeichnis

Host

Domain‐Registratur Registrierungsstelle

URL

User‐ID

Passwort

Domain‐Name

Domain‐Halter

Technischer Kontakt

Name‐Server

IPv6

Google Webmaster‐Tool Benutzername

Passwort Tabelle 12: Provider‐Angaben und Logins

7.3. Suchmaschinen‐AnmeldungenDie erste Anmeldung wurde bereits Mitte Oktober 2012 über das Webmaster‐Tool von google

vorgenommen. Alle anderen wichtigen Suchmaschinen haben daher die Website innerhalb 3 Tagen

indiziert.

7.4. WartungsleitfadenWartungsfenster Arbeiten

Täglich Tagebuch‐Einträge verfassen. Kommentare verwalten. Kontakt‐Anfragen bearbeiten.

Wöchentlich Technische Korrektheit und Suchmaschinen‐Ranking überprüfen.

Monatlich Zugriffs‐Statistiken analysieren. Schlecht besuchte Seiten analysieren und für die Jahreswartung vormerken. Backup der Website vornehmen.

Jährlich Schlecht besuchte Seiten entsorgen oder Massnahmen zur Förderung suchen. Website‐Konzept auf ihren Erfolg überprüfen und eventuelle Massnahmen festlegen wie Fein‐ und Design‐Konzept überarbeiten.

Tabelle 13: Wartungsleitfaden



8. Anhänge

8.1. Wordpress‐GrundeinstellungenDas Wordpress dient nur zur Sammlung des Block‐Eintrags. Diese wird am Launchtermin in die

Homepage integriert. Entsprechend können Feineinstellungen und Konfigurationen abgeändert

werden. Sie dient aber zurzeit als Überganglösung der alten Website, da die alte aus dem Jahr 2004

zu kindisch aufgebaut und designet war.

Die Datenbank‐Angaben sind in der Tabelle: Provider‐Angaben und Logins zu finden.

Es wird nur eine einzige Seite im Wordpress dargestellt. Weitere Seiten existieren nicht. Dafür wurde

das Archiv aktiviert und der Benutzer kann über dieses Archiv auch ältere Tagebucheinträge

besichtigen. Generell wurde das Wordpress Design Twenty Eleven Version 1.4 mit leichten

Abänderungen benutzt. Die massgebenden Konfigurationen sind auch entsprechend in der Sparte

Design geändert worden.

Kategorie Unter‐Kategorie Eigenschaften

Seitentitel Blogtitel René Hirt’s Tagebuch

Untertitel Das aktuelle Geschehen und Erlebnisse während des Tages... ‐ Die Persönliche Website

Headertext anzeigen Hacken setzen

Farben Farbschema Hell

Textfarbe in der Kopfzeile

#9041af

Hintergrundfarbe #d4d0b7

Linkfarbe #8f0072

Layout Layout Inhalt links

Kopfbild Hochgeladen crooped‐tagebuch_wp.jpg

Hintergrundbild Hintergrundbild Kein Bild

Navigation Primäres Menü Fake

Statische Startseite Startseite zeigt Punkt in Dein letzter Beitrag

Widgets Allgemeine Sidebar Letzte Artikel, Anzahl: 5

Letzte Kommentare, Anzahl: 5

Archive, Zeige alle Artikel‐Zähler

Links, Ronny’s Linkliste, sortiert nach Link‐Wertung,, Zeige Link‐Grafik, Zeige Link‐Namen, Zeige Link‐Beschreibung.

Kalender

Fusszeile, erster Bereich Letzte Artikel, Anzahl: 3

Fusszeile, zweiter Bereich

Letzte Kommentare, Anzahl: 3

Fusszeile, dritter Bereich

Archive, Als Auswahlbox darstellen, Zeige Artikel‐Zähler

Menüs Primäres Menü Fake, keine Hacken wählen

Editor Kopfzeile Header.php (verändertes Script)

Einstellungen Wordpress Adresse http://www.rene‐hirt.ch/wordpress

Seiten‐Adresse http://www.rene‐hirt.ch (im index.php geändert)

E‐Mail‐Adresse renehirt@rene‐hirt.ch

Zeitzone UTC+1

Datumsformat 2. Monat Jahrzahl



Zeitformat 24:00

Woche beginnt am Montag

Blockseitenanzahl 8 Artikel

Suchmaschinen Dürfen Seite indexieren

Links Siehe Abbildung Abbildung 1: Wordpress – Links und Einstellungen Tabelle 14: Wordpress‐Einstellungen

Generell wurden die Links mit dem Target _blank konfiguriert, damit ein neues Fenster geöffnet

wird. Die Ausnahme bildet der Link Administration, der im demselben Fenster geöffnet werden soll

wie die Hauptseite. Als Target wurde _none gewählt. Die Bewertung wurde so eingestellt, um die

Reihenfolge der Links zu gewährleisten. Ein Benutzer wird aber keine Bewertung abgeben können.

Abbildung 8: Wordpress ‐ Links und Einstellungen

8.2. EinbindungdesWordpressindieHomepageNach einigen Versuchen und Recherchen in Foren habe ich mich entschlossen, das Wordpress mittels

iframe‐Tag auf der Homepage einzubinden. Dagegen spricht der Umstand, dass Frames heutzutage

eher verpönt sind. Der Vorteil ist aber, dass das Wordpress ohne massgebende und einschneidende

Veränderungen integriert werden kann und daher einige technische Probleme löst. Zudem ist auf der

Website und in Wordpress jeweils ein JavaScript implementiert, dass den Benutzer erlaubt, sehr

rasch nach oben zu scrollen, falls er sich auf der Website verliert.

Ein weiterer Gesichtspunkt ist der Umstand, dass generell die Homepage an die Person René Hirt im

Vordergrund steht und nicht das Tagebuch! Daher sind die Meta‐Angaben der Homepage

massgebend und nicht die Meta‐Tags in Wordpress. Somit ist es unwichtig, ob die Meta‐Angaben im

iframe gelesen werden können oder nicht. Als Schutz vor Spam kann dies sogar ein Vorteil bedeuten.

Nach der Boxe content_left wurde dieser Code geschrieben:

<iframe src="http://www.rene‐hirt.ch" name="Wordpress‐Blog‐Tagebuch" width="950px"

height="1000px" frameborder="0" marginheight="0" marginwidth="0" hspace="0" align="left"

vspace="0"><p>Leider kann ihr Browser keine iFrames darstellen</p></iframe>



Dieser Code ist allerdings ein Provisorium für den Test‐Server. Bei dem definitiven Launch werden

noch Angleichungen an den Server gemacht. Das Wordpress wird über die Datei index_w.php

(ehemals Test‐Server) gestartet und als Inhalt des Tag iframe wird eine eigene Homepage

index_i.htm gestaltet, falls der Browser das iframe nicht darstellen kann.

8.3. Wordpress‐Test‐ServerUm den Style vom Wordpress‐Tagebuch in die Website einbinden zu können, wurde auf dem Test‐

Server der Workstation im Betrieb das Wordpress‐Modul inkl. Datenbank mit dem Stand von

13.11.2012 gespiegelt und lokal integriert. Die entsprechenden Daten befinden sich im Verzeichnis

‚Datenbank‘. Lokal wurde ein Benutzer anhand der Tabelle 7.2 – Provider‐Angaben und Logins

erstellt (renehir_wp260).

ACHTUNG: Als Host wurde nicht der Pfad von Hostpoint angegeben sondern dieser wurde auf

‚localhost‘ gesetzt. Dieser wird in der Datei wp_config.php in der Zeile 30 von define('DB_HOST',

'renehir.mysql.db.internal'); auf define('DB_HOST', 'localhost'); geändert.

Das Tagebuch wird mit der URL http://localhost/renehirt/index_w.php aufgerufen.

8.4. Style‐Sheet‐ÄnderungeninWordpress

Abbildung 9: Style ‐ Wordpress

Unter Design > Editor > Stylesheet (style.css) im Bereich Structure in den Wordpress‐Konfigurationen

wurden folgende Styles verändert:



Tag/Objekt Original‐Code Neuer Code

Body padding: 0 2em; padding: 0;

#page margin: 2em auto; max‐width: 1000px;

margin: 0 auto; max‐width: 1000px; margin‐top:‐50px;

#branding hgroup margin: 0 7.6%; margin: 0 0;

#access div margin: 0 7.6%; margin: 0 0;

#content margin: 0 34% 0 7.6%; width: 58.4%;

margin: 0 34% 0 0; width: 58.4%;

#primary margin: margin: 0 ‐26.4% 0 0; margin: 0 ‐40% 0 0;

#secundary width: 18.8%; width: 25%; Tabelle 15: Stylesheet Wordpress ‐ Neue Codes

Generell wurde der Code so verändert, dass der linke Abstand von Wordpress bündig zu

content_left, also ohne Zwischenraum, ist. Bei #page {margin‐top:‐50px;} soll der Abstand der Haupt‐

Überschrift zur Haupt‐Navigation der Website stimmig eingestellt werden können.

Um das Wordpress von der Raumaufteilung besser der Website anzugleichen wurden auch die

Objekte #primary und #secundary verändert. Somit passt die Aufteilung besser zum Header und

verursacht einen natürlichen goldenen Schnitt.

Das Original‐Script wurde im Verzeichnis Backup gesichert.

8.5. Linkliste

8.5.1. Thema:font‐faceLinks Bemerkung

http://css3‐html5.de/css3‐web‐fonts/ Einfach deutsche Anleitung mit Film

http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm

http://forum.cmsmadesimple.de/viewtopic.php?id=1265

http://www.kupix.de/nc/news1/font‐face‐im‐firefox‐funktioniert‐nicht.html

.htaccess Eintrag

Tabelle 16: Links ‐ Font‐Face

8.5.2. ScrolltotopLinks Bemerkungen

http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm Anleitung auf Englisch

Tabelle 17: Links ‐ Scroll to top

8.5.3. CascadingStyleSheetsundDesignLinks Bemerkungen

http://www.css4you.de/

http://blogdrauf.de/qualitative‐schriftarten‐sammlung/809/ Schriftarten

http://border‐radius.com/ Border‐Radius‐Generator

http://farbwolke.de/top‐3‐farbharmonie‐tools/ Farbmodelle

http://mudcu.be/sphere/#config={%22hsl%22:{%22H%22:271.75340486007156,%22S%22:100,%22L%22:21.563273908200372},%22theme%22:%22dark%22,%22quantize%22:0,%22harmony%22:%22Analogous%22,%22vision%22:%22Normal%22,%22space%22:%22RYB%22,%22top%22:62,%22left%22:50,%2

Alternatives Farbmodel



2diameter%22:500,%22scale%22:3,%22dot%22:false}

Tabelle 18: Links ‐ CSS und Design

Website Dokumentation - rene-hirt.ch | René Hirt's Website · 2013-02-08 · Website‐...

Documents

Transcript of Website Dokumentation - rene-hirt.ch | René Hirt's Website · 2013-02-08 · Website‐...