HP-Gestaltung

Homepage

Schilderungen meiner Erfahrungen die ich beim erstellen dieser Homepage gemacht habe. Anhand dieser Screenshots lässt sich recht gut erkennen, wie sich das Erscheinungsbild meiner Startseite bisher verändert hat:

alte Seite neue Seite Januar 2020

(2009 -> 2011 -> Januar 2020)

Die Farben des ersten Entwurfes, haben mir persönlich eigentlich ganz gut gefallen. Bis sich herausstellte, dass das wohl an meinen Monitor Einstellungen lag! Auf anderen Bildschirmen, sah es schon ziemlich bunt aus.
Das Foto auf der Index-Seite diente mir erstmal als Platzfüller, bis ich genug Material und Ideen für die Startseite zusammen hatte. Da die HP Stück für Stück wachsen sollte, gab es besonders am Anfang sehr viele Löcher zu stopfen.
Zu Beginn hatte ich mir überlegt, was alles auf die Page soll, welche Rubriken es geben soll und welcher Inhalt wofür bestimmt ist. Damit man ein Grundgerüst zum basteln hat. Also Startseite mit Navigationsmenü erstellen und dann auf Themen orientierte Seiten verlinken, die dann ihrerseits wieder auf Unterseiten verweisen.
Inzwischen ist das Menü mit den Links nach oben gewandert. So bleibt mehr Platz für den Inhalt , bei der von mir fest gelegten Seitenbreite. Das zeigt sich besonders bei mobilen Endgeräten wie Smartphones. Wobei ich mit der Darstellung auf Smartphones immer noch nicht ganz zufrieden bin.

Im Juni 2020 habe ich mich noch einmal daran versucht, die Darstellung der HP auf mobilen Endgräten zu verbessern.

Title Footer

Folgendes wurde überarbeitet: Februar 2021

Zum erstellen meiner Homepage, habe ich am Anfang den Composer verwendet (links), benutze aber seit geraumer Zeit den Editor Bluefish (rechts):

Im Composer kann man die Seiten im groben zusammen stellen. Während sich der Bluefish sehr gut zum editieren von HTML oder CSS (Cascading Style Sheets) eignet. Da meine Seite recht einfach gehalten ist, reichte zum erstellen der Composer vollkommen aus. Zum editieren meiner CSS-Menüs und zum ausmerzen von Fehlern im Quelltext ist der Bluefish, wegen seiner Syntax Highlighting, jedoch besser geeignet.
Beim Composer handelt es sich um ein WYSIWYG-Editor ("What You See Is What You Get").
Sodas man direkt beim erstellen einer HTML-Seite schon sehen kann, wie sie einmal aussehen wird. Ohne den Quelltext editieren zu müssen. Was das arbeiten - besonders am Anfang - sehr erleichtert. Besonders wenn man nur ein paar Kleinigkeiten an einer Seite verändern möchte, lässt sich das mit dem Composer sehr gut umsetzen. Vergleichbar mit dem Composer, im Bereich der Handhabung, wären noch die Programme Nvu Composer und KompoZer. Bei beiden Programmen handelt es sich wohl um Weiterentwicklungen des Mozilla-Composers. Mehr Information findet man auf der Nvu-Homepage. Nach einer gewissen Einarbeitungszeit wird sich aber der Bluefish als weitaus geeigneter erweisen, da sich mit diesem Editor fehlerfreies HTML leichter erzeugen lässt. Außerdem verfügt er über einen größeren Funktionsumfang, was man mit der Zeit zu schätzen lernt.

Die Funktion meiner Seite habe ich mit den folgenden Browsern überprüft: Mit Windows XP und dem Internet Explorer (IE), der Versionen 6.0 und 7.0. Beide Versionen stellen die Homepage nahezu so dar, wie sich das der Autor vorgestellt hat :-) Wobei der IE 6.0 (und ältere Versionen sowieso) Probleme mit einigen CSS-Menüs zu haben scheint. Ohne Einschränkungen ließ sich die Seite erwartungsgemäß mit dem Firefox 3.x, dem Opera 9.52 bzw. 10.00 und dem Google Chrome darstellen.
Mit meiner Linux Distribution und den Browsern: Firefox und Opera, habe ich ebenfalls keine Probleme festgestellt. Außerdem gehe ich davon aus, dass es mit dem Galeon/Epiphany und dem Konqeror ähnlich ist. Welche ich allerdings nicht explizit getestet habe. Beim IE unter XP ist mir aufgefallen, dass einige png und gif-Dateien nicht so wie erwartet - bzw. zum Teil gar nicht angezeigt werden. Möglicherweise hängt das mit der Transparenz zusammen. Des weiteren hat der IE scheinbar etwas andere Vorstellungen von CSS als ich. Was zugegebener Maßen nichts hießen muss. Nach dem W3C sollten HTML und CSS valide sein.

Nachtrag: Zur Zeit (2020) habe ich nur ein Windows 8.1 mit den gängigen Browsern parallel installiert, sodass ich auch nur mit denen testen konnte (wobei ich natürlich keinen IE oder Edge verwende). Mit Mint 19.3 und den Browsern: Opera, Firefox und Chrom, gibt es keine Probleme. Für Smartphones wurde meine Seite bisher noch nicht optimiert. Wenn man das Smartphone allerdings zum lesen der Seite quer hält, ist die Darstellung nicht schlecht. Die Bilder sind zum Teil aber recht klein, da man sie nicht alle durch anklicken vergrößern kann. Die Originale einiger Fotos sind leider nicht mehr vorhanden, sodass ich nicht mehr auf diese verlinken kann.

CSS - Cascading Style Sheets

Im Laufe der Homepage Entwicklung kam es natürlich zu sehr vielen Umgestaltungen, Veränderungen und Erneuerungen. Was immer einen Haufen Arbeit mit sich brachte. Das wird sich sicher auch in Zukunft nicht wesentlich ändern. Da meine Homepage aber ein Hobby von mir ist, wollte und will ich mir nicht unbedingt unnötige Arbeit aufhalsen.
Und auf der Suche nach Möglichkeiten, die mir das Leben so einfach wie möglich machen, bin ich über Cascading Style Sheets (CSS) gestolpert.

CSS biete mir die Möglichkeit, per Syntax in Form von Stylesheets festzulegen, wie sich meine HP-Seiten verhalten sollen. Wenn ich zum Beispiel bei allen meinen Seiten die Überschriften von schwarz auf rot ändern möchte, müsste ich das bei (reinen) HTML-Seiten bei jeder Seite einzeln machen. Bei CSS müsste ich nur in der CSS-Datei den Farbwert für die Überschrift ändern, die Datei speichern und neu auf den Server hoch laden - fertig.
Die Änderung wäre dann für alle Seiten gültig, die an dieses Stylesheet gebunden sind.

Eine Überschrift der Größe 3 in schwarz: h3 {color: black;}
Wäre sie recht flott in rot zu haben: h3 {color: red;}

Wenn man eine Seite in Titel, Menü und Inhalt mittels <div> unterteilt, könnte das Menü vielleicht so aussehen wie in meinem Beispiel. Also die Links in rot und wenn man mit der Maus darüber fährt, wird die Schrift der Línks blau und unterstrichen. Während der Hintergrund der Links die Farbe der Seite annimmt. Das Menü hätte eine Breite von 28% und der Inhalt würde sich rechts am Menü ausrichten. Das hieße für das Menü float:left

Das würde dann in einem Stylesheet so aussehen: 

/*Angaben fuer das Menue*/
	
}

.menutitle {
	font-weight: bold;
	text-align: center;
	margin: 2px;
}

.menucontainer {
	background-image: url(fv8.gif);
	border: outset 2px #ded7c5;
	border-top: 1px solid #000;
	width: 120px;
	margin: 10px;
}

a.menu {
	 display: block;
	 padding: 3px;
	 border-top: 1px solid #000;
	 text-align: center;
	 font-family: 'Comic Sans MS', verdana, 
	 arial, helvetica, sans-serif;
	 font-weight: bold;
	 text-decoration: none;
 }

Kürzliche Änderungen

Eine kurze Zusammenfassung der von mir gemachten Änderungen. Ich versuche möglichst zeitnah mit zuschreiben was sich auf meiner Seite verändert hat, um die einzelnen Schritte auch später noch nachvollziehen zu können. Wahrscheinlich werde ich aber nicht jede Kleinigkeit dokumentieren.

Februar '21

Die Seite mit meinen Lauftouren wie folgt überarbeitet:

Die Übersichtsseite: Laufen in Bidern, wie folgt überarbeitet:

Die kleine Seite über einen Ausflug zur Ostsee überarbeitet:

Februar '21

Januar '20

To-do-List

September '17

Februar '16

März '15

Februar '15

August '13

August '11

Januar '11

Mai '10

Oktober '09

Nachdem ich mit bedauern feststellen musste, dass sich meine Homepage mit älteren Internet Explorern schlecht bis gar nicht darstellen lies, habe ich mich dazu durchgerungen meine Seite etwas zu überarbeiten. Eigentlich hatte ich ja bereits im August damit begonnen meine Seite ein wenig aufzufrischen, so dass sie im IE 6.0 und 7.0 recht ordentlich aussah, aber eben nicht in den 5er Versionen. Da ich selbst bekanntlich kein Windows benutze, surfe ich nicht nur nicht mit dem IE, er würde nicht mal auf meinem System laufen. Was natürlich zur Folge hatte, dass ich lange nicht wusste, dass meine Seite schlecht IE kompatibel ist. Obwohl das HTML valide war (naiv gell)! Außerdem funktioniert die CSS-Angabe position: fixed; auch erst im IE7, weswegen ich beim Hintergrund für das <body>-Element etwas tricksen musste. Wie dem auch sei: habe ich die Situation genutzt, um die HP auf XHTML umzustellen. Wenn man eh schon einiges umarbeiten muss, kann man auch gleich mal richtig aufräumen.

Im Einzelnen habe ich folgenden Änderungen vorgenommen
(die Auflistung ist natürlich nicht vollständig):

August '09