| 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
|
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.
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