zurück zur Startseite
"Gestaltung einer Homepage in HTML"


Mit Animationen allein ist es nicht getan!
Als Blickfang oder Köder, um eine langweilige Seite zu besuchen, bringen sie aber sehr viel.
Der gute Inhalt, die bestechende Gestaltung oder die lustige Animation
halten eine Seite im Bewusstsein der User.

Unsere Inhalte:
(Links zu Bookmarks)
Vorgehensweise
Gestaltung der Startseite
Eigenschaften einer Seite
Tabellengestaltung
Verknüpfungen
Bildaufbereitung
1. Arbeitsverzeichnis anlegen mit Unterordner "bilder" und "icons"

Alle neuen Dateien nur in Kleinbuchstaben benennen
Alle zusammengehörigen Dateien (Bilder, Texte) im Arbeitsverzeichnis zusammentragen
Kurze und aussagekräftige Namen verwenden, keine Umlaute und keine Leerstellen benutzen
Größere Bilder und Grafiken in den Bilderordner, kleine Bilder zur Menüsteuerung in das Verzeichnis "icons"
Alle HTML-Dateien sollten im Arbeitsverzeichnis liegen, hier "cafe"
2. Internet-Browser aufrufen, er soll später die erstellten Seiten testen
3. Bildverarbeitung PaintShopPro aufrufen, damit werden die Bilder aufbereitet bzw. optimiert
4. HTML-Editor Webdesigner aufrufen und Arbeitsverzeichnis ("Set Server Root") festlegen bzw. überprüfen !!!!!

Ein anderer leicht zu bedienender HTML-Editor heißt "Namo". Dieses Programm ist sehr stark auf den Internet-Explorer von Microsoft abgestimmt.

Sieht Ihr "Server-Root" so aus? Alle wichtigen Dateien müssen in diesem Verzeichnis "cafe" liegen, z.B. der Ordner "bilder" oder "icons".

5. Windows Taskleiste zum raschen Wechsel zwischen den drei Programmen verwenden

Browser zum Testen benutzen, dazu Aktualisierung nicht vergessen!

6. Weiterführende Infos zur HTML-Programmierung

Adresse der zentralen deutschsprachigen Online-Hilfe:

http://www.teamone.de/selfaktuell/

7.
a)
Startseite einrichten "index.htm" - der fremde User steht im Mittelpunkt

Auf dem Server wird die HTML-Seite mit der Bezeichnung "index.htm" automatisch gesucht. Wenn man im Browser die URL "http://www.groegym.de" eingibt, so wird automatisch die Seite mit dem Namen "index.htm" aufgerufen.

Startseite als normale HTML-Seite (index.htm) oder als Frameset (index.htm, leiste.htm, willkommen.htm) gestalten

Konzept für Startseite (Logo, Link-Gruppen (max. 7) und Footer (mit eMail, Update, Impressum) und Unterseiten entwerfen

Ein Frameset besteht normal aus drei Dateien:
1. Die Organisations-Einheit mit dem Namen "index.htm"
2. Die Linkliste, sie heißt bei uns "leiste.htm"
3. Die Startseite, sie heißt bei uns "willkommen.htm"

Sie können sich die HTML-Texte durch Anklicken der Namen ansehen.

b)

Eigenschaften einer Seite festlegen

"Page Properties": Titel, Titelmusik, Hintergrundfarbe, META-Text

Siehe hierzu den META-Text auf unserer Homepage

c)

Tabellen sind das wichtigste Gestaltungselement auf einer Website

Die Tabelleneigenschaften werden zuerst festgelegt (Breite, Ränder), nachträgliche Änderungen im Editor über rechten Mausklick in die Tabelle.
Die Zelleneigenschaften werden festgelegt, um das Layout zu verfeinern. Dazu in eine Zelle mit einem rechten Mausklick gehen und die Zelleigenschaften ändern. Merken: Tabelleneigenschaft geht vor Zelleneigenschaft. Über "Select Cell" kann auch die Hintergrundfarbe einer Zelle verändert werden.

Bei der Benutzung von Bildern kann eine Tabelle mit sichtbarem Rand als Rand für Bild und Bildtitel benutzt werden.

Über einen Doppelklick auf ein Bild im Editor kann das Bild und sein Umfeld gestaltet werden: Ränder, Zwischenraum, ...

Zur Aufgabe "tabelle.htm"

8. Textseite gestalten - Text steht im Mittelpunkt

Fließtext kann auch aus Word über die Zwischenablage direkt übernommen werden
Shift+Return = fester Zeilenumbruch
Return = neuer Absatz
Schriftwahl nach Art (Default Font), Größe (Heading 2 bzw.Schriftgröße 4), Hervorhebung, Farbe
Tabelle zur Textgestaltung benutzen: Ein Text sollte nicht von Bildschirmrand bis Bildschirmrand laufen, er ist schwer lesbar.
Integration von Bildern


Zur Aufgabe "text.htm"

9.

Album gestalten - Bilder stehen im Mittelpunkt

Konzept für das Auffinden von Bildern (Thumbnails, Kurztexte)
Konzept für das Weiterblättern

 

10.

Linksammlung gestalten - Adressen stehen im Mittelpunkt

Konzept für inhaltliche Gruppen von Links entwickeln
Konzept für die Hervorhebung spezieller Links entwickeln
Links nicht ohne Kommentar, jeder Link sollte auch im "Klartext" zu lesen sein, also nicht nur im Hintergrund verstecken!

Zur Aufgabe "links.htm"

11. Verknüpfungen über Links - die Kernstücke einer HTML-Seite

Quelle Ziel Endung der Dateien
Dokument

*.htm

Wort

Bild

*.jpg, *.gif

Bild

-->

Tondokument

*.mid, *.wav, *.mp3

Bildausschnitt

Programm

*.exe

Anwendungen

*.doc, *.xls, *.ppt, *.zip

Nur wenn User die passenden Programme hat,
mit dem die Dokumente geöffnet werden können!

Bookmark #

Sonderfall innerhalb einer Seite

Zuerst Seite ablegen, erst dann Pfad setzen!!!
Jedes Bild lässt sich mit einem alternativen Text versehen, der beim Warten des Mauszeigers über dem Bild angezeigt wird. Ein Doppelklick auf ein Bild im Webeditor öffnet ein Menü, in dem sich der "Alternate Text" eingeben lässt.

unser Männchen begrüßt Sie
Hier ist auch ein alternativer Text versteckt!

 

12.

Aufbereitung von Bildern

Bildformate - *.gif für Grafiken (Diagramme), *.jpg für Fotos
Bildgröße - 700 Bildpunkte in der Breite, 450 Bildpunkte in der Höhe - Thumbnails etwa 200 breit oder 150 hoch
Bildauflösung - 800 x 600 Bildschirmpunkte mit 16 Mio. Farben ist die übliche Situation, für die Webseiten erstellt werden sollten
Bildanimation nur als Blickfang nutzen

Zur Aufgabe "album.htm" ergänzen

 

13. Einstellen der Website beim Provider - Upload über FTP - Unsere Software

14. Anmeldung der Website bei Suchmaschinen, die Bedeutung der META-Texte
Automatische Roboter suchen META-Texte auf und werten sie aus. Suchwörter, unter denen die eigene Seite gefunden werden soll, werden hier eingetragen.


Anleitung Aufgaben
Startseite