1.

Windows-Explorer:
Arbeitsverzeichnis anlegen, z.B. 'cafe' mit Unterordner 'bilder', ist hier schon vorgegeben.

• Alle neuen Dateien möglichst nur in Kleinbuchstaben benennen
• Alle zusammengehörigen Dateien (Bilder, Texte) im Arbeitsverzeichnis zusammentragen, sonst lässt sich das Verzeichnis nicht auf einen anderen Rechner kopieren.
• Kurze und aussagekräftige Namen verwenden, keine Umlaute und keine Leerstellen benutzen
• Alle Bilder und Grafiken in den Bilderordner, z.B. 'bilder'
  Alle HTML-Dateien und der Bilderordner sollten im Arbeitsverzeichnis liegen, hier 'cafe'

2.

Internet-Browser aufrufen, er soll später die erstellten Seiten testen. Hier wird die vorbereitete Datei 'anleitung.htm' im Ordner 'cafe'über den Windows-Explorer mit Doppelklick auf die Datei  gestartet, der Internet-Browser zeigt dann die Seite an. Ein Doppelklick im Windows-Explorer auf die angezeigte Datei 'anleitung.htm' startet den Internet-Browser und zeigt dann die Seite an.

3.

Bildverarbeitung, z.B. PaintShopPro aufrufen. Damit werden die Bilder aufbereitet bzw. optimiert, d.h. auf optimale Pixelgröße verkleinert

4.

HTML-Editor z.B. Namo aufrufen. (Word oder Phase 5 sind für diesen Lehrgang ungeeignet.)

5.

Windows Taskleiste zum raschen Wechsel zwischen den 4 Tasks verwenden

Browser zum Testen benutzen, dazu Aktualisierung nicht vergessen! Die Lehrgangsseiten sind schon alle miteinander verlinkt, nur die sog. Startseite fehlt noch.

6.

Weiterführende Infos zur HTML-Programmierung:

Adresse der zentralen deutschsprachigen Online-Hilfe:
http://de.selfhtml.org/ von Stefan Münz

7.
a)

Startseite einrichten "index.htm" - der fremde User steht jetzt im Mittelpunkt. Wie soll er meine Arbeit kennen lernen?

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

Wir arbeiten ohne Framesets, das ist die übersichtlichste Arbeitsweise. Die Startseite ist deshalb eine normale HTML-Seite und heißt index.htm.

Jetzt muss die neue, noch leere Seite im Ordner 'cafe' unter dem Namen 'index.htm' gespeichert werden. (Speichern!)
Das Konzept für Startseite (Logo, Link-Gruppen und Footer mit eMail, Update, Impressum) sollte jetzt entstehen, wir haben es hier in der Übung schon vorgegeben.

Damit der User die Seite später gut lesen und auch ausdrucken kann, beginnen wir mit einer leeren Tabelle, in die wir später alles einfüllen, was uns so einfällt. Die Tabelle ohne Rand mit 640 Pixel Breite soll mittig am Bildschirm stehen. So kann jeder Drucker diese Seite drucken.

Dazu gehen wir wie folgt vor:

a) Wir setzen den Cursor mittig (wie in Word) und rufen eine neue Tabelle bestehend aus einer Spalte und einer Zeile auf. (Einfach mit gedrückter linker Maustaste aufziehen.) Mit rechtem Mausklick in die Tabelle rufen wir das Menü zur Festlegung der Tabelleneigenschaften auf. (Table Properties)
Die Tabelle soll 640 Pixel breit sein, sie soll zentriert liegen und der Rand soll die Breite 0 haben (= Tabelle ist unsichtbar).
Merken: Tabelleneigenschaft geht vor Zelleneigenschaft. Über "Select Cell" kann auch die Hintergrundfarbe einer Zelle verändert werden, macht aber nur selten Sinn.
b) Wir löschen den Cursorplatz über und unter der Tabelle.

b)

Nun legen wir die Eigenschaften der Seite fest.

"Page Properties": Titel, Titelmusik, Hintergrundfarbe, META-Text, hierzu gibt es im Editor einen eigenen Menüpunkt.

Am wichtigsten sind Titel und META-Text, weil manche Internet-Suchmaschinen danach suchen. Der Titel wird gewöhnlich vom Drucker oben auf der Seite ausgedruckt. Speichern!
Was hat der Webeditor bisher alles für uns erledigt? Wechsle in den "HTML-Anzeige-Modus" (links unten!). Jetzt sieht man den HTML-Code, der vom Browser interpretiert wird. Zurück in den "Bearbeiten-Modus"!

c)

Tabellen sind das wichtigste Gestaltungselement auf einer Website

Das Problem:
Die Web-Browser passen einen Text an den aktuell benutzten Bildschirm an. D.h. ein Fließtext wird über die volle Breite gezogen. Bei sehr hoch aufgelösten Bildschirmen hat da in einer Zeile sehr viel Platz. Drucker schneiden davon den rechten Teil ab, weil das Papier zu wenig breit ist.

Deshalb setzt man den Text in eine Tabelle, die schmäler ist als die Bildschirmbreite. Die Tabelle verhindert das Zerfließen des Textes.

Bei der Benutzung von Bildern kann eine Tabelle mit sichtbarem Rand als Rand für Bild und Bildtitel benutzt werden. Der Hintergrund einer Zelle und der Rahmen einer Tabelle können über Zellen- bzw. Tabellen-Eigenschaft farbig umgestaltet werden. Dies geschieht (im Editor) über einen Doppelklick auf ein Bild.

Hier auf der Anleitungsseite wird gerade eine sichtbare Tabelle mit zwei Spalten und vielen Zeilen in einer unsichtbaren Tabelle verwendet. Die unsichtbare Tabelle umgibt die sichtbare Tabelle.
'Cell-Padding' setzt den Text bzw. das Bild vom Tabellenrand ab, damit lässt sich Text besser lesen.

Zur Aufgabe "tabelle.htm"

8.

Textseite gestalten - Text steht im Mittelpunkt

Fließtext kann auch aus Word über die Zwischenablage direkt übernommen werden, ist dann aber sehr schwer in seiner Form umzugestalten. Ein Text aus einer Internetseite lässt sic über Markieren (bei gedrückter linker Maustaste) und einem rechten Mausklick in die Markierung in die Zwischenablage 'kopieren' und von dort problemlos über die Menüpunkte 'Bearbeten' und 'Einfügen' übernehmen.

• Shift+Return = fester Zeilenumbruch
  
• Return = neuer Absatz
  
• Schriftwahl nach Art (Default Font), Größe (Heading 2 bzw.Schriftgröße 4), Hervorhebung, Farbe

Zur Aufgabe "text.htm"

9.

10.

Linksammlung gestalten - Adressen stehen im Mittelpunkt

Hier geht es um interessante Internet-Adressen. Eine kleine geordnete Sammlung mit diesen sog. externen Links kann ganz nützlich sein.

• 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 Hyperlinks - die Kernstücke einer HTML-Seite

Zuerst Seite ablegen, erst dann Hyperlink setzen!!!

Zurück zur Startseite und nun die Hyperlinks ausgehend von den 2 Wörtern hinter den blauen Punkten zu den Dateien 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!
Wenn man nichts sieht, so ist der Internet-Browser falsch eingestellt.

12.

Aufbereitung von Bildern

Bildformate:
- *.gif für Grafiken (Diagramme), max. 256 Farben oder Graustufen
- *.jpg für Fotos, 16 Millionen Farben
Bildgröße:
- 640 (max 700) Bildpunkte in der Breite (wegen Drucker und Datenübertragung)
- Thumbnails etwa 200 breit oder 150 hoch
Bildschirmauflösung:
- 1024 x 768 Bildschirmpunkte mit 16 Mio. Farben ist heute die übliche Situation, für die Webseiten erstellt werden sollten.
Bildanimation nur als Blickfang nutzen und nicht zu groß gestalten, sonst gibt es Anzeigeprobleme

Album gestalten - Bilder stehen im Mittelpunkt

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

Zur Aufgabe "album.htm" ergänzen

13.

Einstellen der Website beim Provider - Upload über FTP - Unsere Software seit 1998, damit wird eine Seite öffentlich.

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. Google geht hier eigene Wege. Google-Roboter suchen im Text der ganzen Seite, das Prinzip ist geheim. Google sucht auch nach Verlinkungen zu anderen Seiten.