Erste Tricks zu PSP und HTML mit Webeditor

2. HTML-Seite mit Bild und Text erstellen,
fast wie in Word

 

a) Vorbereitungen
- Windows-Explorer: Arbeitsordner (bei uns 'cafe') und darin einen Ordner 'bilder' anlegen (bei uns vorgegeben). Vorbereitete Bilder darin ablegen. Die großen "Rohlinge" aus Kamera oder Scanner sollten hier nicht liegen!!

b) Startseite "index.htm" (= Deckblatt, Verteiler, Inhaltsverzeichnis) erstellen. (Wenn es diese Seite schon von einem anderen Workshop gibt, so neue Einstiegsseite 'welcome.htm' nennen, wird auf Server auch als Startseite akzeptiert.)
- Im Webeditor neue leere Seite öffnen.
- Diese erste Seite als "index.htm" (genormt!) im Arbeitsverzeichnis speichern.
- Leere (1,1)-Tabelle anlegen, also 1 Zeile und 1 Spalte, und Leerzeile darüber löschen.
- Tabelle formatieren: Rechter Mausklick in die Tabelle "Tabellen-Eigenschaften" auf "640 Pixel", "zentriert" und "ohne Rand" setzen.

- Überschrift in Tabelle mittig setzen, "Überschrift 2" wählen, über Eingabetaste Cursor auf neuen Absatz setzen.
- An Cursorstelle (mittig) neue (1,2)-Tabelle anlegen und evtl. Leerzeile darüber löschen.
- Tabelle formatieren: Rechter Mausklick in die Tabelle "Tabellen-Eigenschaften" auf "100 %", "zentriert", "mit Rand Stärke 1" und "Zellenfüllabstand auf 10" setzen.
- Cursor in linke Zelle setzen und Bild einfügen, hier auf der Startseite nur Minibild "_k".
- Doppelklick ins Bild und bei "Stil" die Bildbreite abfragen.
- Linke Zelle formatieren: Cursor in die Zelle setzen. Rechter Mausklick in die Zelle "Zell-Eigenschaften" einstellen: "Bild-Breite in Pixel", "zentriert", "oben", evtl. Hintergrundfarbe.

- Rechte Zelle formatieren: Cursor in die Zelle setzen und über rechten Mausklick die Zell-Eigenschaften einstellen: "ohne Breite", "links", "oben".
- Nun Kurztext zum Bild in rechte Zelle schreiben. Text markieren und Schriftgröße und Attribut wie bei Word wählen. Nur in Ausnahmefällen Schriftart wählen, andere User haben vielleicht nicht die von dir gewählte Schrift auf ihrem PC.
- Titel für Seite vergeben: Doppelklick auf den Reiter "index.htm" ermöglicht die Vergabe eines Titels. Dieser Titel wird beim Druck oben ausgegeben, sonst steht dort "Kein Titel".
- Speichern: Da die HTML-Seite bereits einen Namen hat, genügt ein Klick auf das Disketten-Symbol. Der Webeditor fragt, ob das Bild im Verzeichnis abgelegt werden soll. Mit "Ja" beantworten.

Die Startseite ist fertig, nun zur eigentlichen Bildseite.


- Neue leere Seite öffnen und als "seite_01.htm" im Arbeitsverzeichnis ablegen.
- Leere (1,1)-Tabelle anlegen und Leerzeile darüber löschen.
- Tabelle formatieren: Rechter Mausklick in die Tabelle "Tabellen-Eigenschaften" auf "640 Pixel", "zentriert" und "ohne Rand" setzen.
- Überschrift in Tabelle mittig setzen, "Überschrift 2" wählen, über Eingabetaste Cursor auf neuen Absatz setzen.
- Jetzt kommt der Inhalt der Seite.
- An Cursor-Stelle (mittig sieht gut aus) das vorbereitete Bild (ohne "_k") einfügen (Bilderrahmen-Icon). Darunter Text zum Bild schreiben.
- Als letzte Zeile: "Zurück" schreiben.
- Text "Zurück" markieren und Hyperlink (Ketten-Icon) auf "index.htm" setzen.
- Seite speichern. Da die HTML-Seite bereits einen Namen hat genügt ein Klick auf das Disketten-Symbol. Der Webeditor fragt, ob das Bild im Verzeichnis abgelegt werden soll. Mit "Ja" beantworten.


Die Startseite "index.htm" nochmals im Editor öffnen und Hyperlink auf die neue Seite legen. Dazu Minibild oder geeignete Textstelle markieren und Hyperlink zu "seite_01.htm" legen.
Veränderte Seite über das Disketten-Icon speichern


Im Windows-Explorer HTML-Datei "index.htm" mit Doppelklick vom Internet-Browser anzeigen lassen und prüfen.

Leere Seite öffnen bestehende Seite öffnen benannte Seite speichern Bild einfügen Tabelle einfügen Hyperlink einfügen Hyperlink löschen Text-Attribute und
Einstellungen wie bei Word Schrifthervorhebung
für ganzen Absatz gleich zu einem HTML-Kurs Das Logo von SatGeo Zum Internet-Portal
bei ZUM Das Hauptmenü Dialog für Meta-Texte
z.B. Titel