Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern

Teil 4

Nun schauen wir uns diesen Netscape Composer etwas genauer an. Schliesst vorerst einmal alles, was mit Netscape zu tun hat, und startet dann den Navigator neu (NICHT den Composer!):

Hier zunächst ein alternativer Weg, um eure Datei zu öffnen und in den Composer-Modus zu wechseln. Öffnet zuerst mal eure Seite mittels "File / Open File" - nun euren Ordner suchen und index.htm doppelklicken.

Wenn die Seite offen ist, bitte "File / Edit Page" ("Datei / Seite bearbeiten" oder Ctrl+E) wählen - jetzt wird die Seite im Composer geöffnet und müsste nun etwa so aussehen: 

In der Zeile, wo ich den roten Pfeil eingezeichnet habe (der Symbolleiste), hat es nun diverse Tools, mit denen Ihr Links, Tabellen, Linien usw. einfügen könnt. Mit dem Knopf BROWSE ("Vorschau") in der Mitte der Symbolleiste könnt Ihr jeweils nach dem Speichern schauen, wie die Seite im Browser tatsächlich dargestellt wird. Es geht dann ein neues Navigator-Fenster mit eurer Seite auf.

Nicht vergessen: Im Editor siehts selten so aus wie es die User nachher im Browser sehen - hier hilft nichts als testen, testen, testen... bis es im Browser gut aussieht.

Mit "Publish" ist es natürlich jederzeit möglich, die Seite auf den Webserver zu kopieren auch dort via http://.... zu betrachten (Angabe siehe auf FTP-Blatt).

Übt nun auch mit den Instrumenten in der Symbolleiste etwas zu arbeiten. Markiert ein Wort, formatiert es in einer anderen Farbe - das geht so: Markiert das Wort, dann klickt in den beiden Farbfeldern (im nächsten Screenshot mit rotem Pfeil markiert) mit der Maus ins obere Farbfeld. Es erscheint ein Farbwahl-Feld, wo ihr die gewünschte Textfarbe wählen könnt:

Im unteren dieser beiden Farbfelder könnt ihr übrigens die Hintergrundfarbe der Seite wählen - das sollten dann aber nicht allzu grelle Farben sein... weiteres zu den Farben folgt dann in einer der nächsten Übungen.

Nun ist es Zeit für eine zweite Seite! Die bestehende Seite wird nun kopiert - das geht ganz einfach: Wählt einfach "File / Save As" und gebt als Dateinamen "seite2.htm" ein.

Verändert ein wenig das Design der seite2.htm, damit ihr sie später gut von index.htm unterscheiden könnt.

Wir haben nun also schon zwei Seiten im unserer Website und können nun beginnent, Links von einer Datei zur anderen zu setzen.

Markiert also ein Wort und "verlinkt" es (fügt einen Link ein, der erscheint, wenn man aufs Wort klickt) - hier geht alles relativ einfach, einfach den LINK- (Verknüpfung-) Button klicken und einen URL eingeben (bei Links ausserhalb eurer Website IMMER http:// voranstellen!) - oder, versucht doch zuerst mal einen Link auf die "andere Seite", index.htm - für Links auf lokale Seiten (=Seiten innerhalb Eurer Website) "Choose File" ("Datei wählen") klicken und dann aus dem richtigen Ordner die gewünschte Datei auswählen (und mit OK bestätigen):

Wichtig! Wenn ihr den Link testen wollt, geht das nicht im Composer. Das müsst ihr im Browser tun - also entweder den BROWSE- (Vorschau-) Knopf klicken und auf den Link klicken. Oder: Versucht doch nun einmal, die Seite im Internet Explorer zu öffnen, wie vorhin geübt! Klappts mit dem Link?

Wenn nein, weiter versuchen... oder Fragen.

Wenn ja: Jetzt solltet ihr in der Lage sein, auch die Datei index.htm im Composer zu öffnen und auch dort einige Bearbeitungen vorzunehmen. Legt zum Beispiel von dort (index.htm) einen Link auf seite2.htm - so sind dann beide Seiten schön miteinander verknüpft.

Auch Aufzählungen sind kein Problem - der entsprechende Button sieht fast gleich aus wie im Word... try it!

Wichtig ist es hier, einmal alles auszuprobieren, was man kann - und folgenden Mechanismus weiter in Fleisch und Blut übergehen zu lassen, der zum Alltag aller Webpublisher gehört:

• Seite bearbeiten (Composer)
• Speichern
• Seite im Browser prüfen
• Im Composer korrigieren
• Speichern
• Seite im Browser prüfen
• Wenn OK, Seite in anderem Browser prüfen
• usw....

Ein weiterer revolutionärer Schritt... zu jeder guten Website gehören auch Bilder. Und gut abgekupfert ist halb selbst erfunden. Kopiert aus dem Web (da es ja nur für einen Test ist, z.B. eins aus einer Bildersammlung wie Getty Images oder aus der Fotosammlung des ikmb) zwei, drei Fotos in euren Ordner auf Laufwerk D. Wenn ihr wollt, könnt ihr für die Fotos einen Unterordner "fotos" erstellen, so bleibt die Übersicht besser.

Ihr erinnert Euch ja sicher noch, wie das geht...? - Bild mit rechter Maustaste anklicken, "Save Image as" oder "Bild speichern unter", als Ziel Laufwerk D, Dann Euren Ordner wählen. So sind die Bilder parat, um in Eure Seite eingefügt zu werden.

ACHTUNG: Hier muss leider ein Windows-technischer Exkurs eingeschoben werden, um technische Probleme zu verhindern. Öffnet einen Windows-Explorer (nein, nicht den Internet Explorer, sondern den Windows-Explorer) und geht ins Menu "Extras / Ordneroptionen", dort ins Register "Ansicht" (diese Funktion ist ev. in Kursräumen aus Sicherheitsgründen gesperrt - daheim gehts aber!). Sofern hier unter "Erweiterungen bei bekannten Dateinamen ausblenden" ein Häkchen gesetzt ist, nehmt dieses weg:

Das Problem ist, dass wir im Webpublishing sehr genau arbeiten müssen - und folglich auch genau wissen müssen, ob eine Datei .htm oder .html als Endung hat. Dies kann man nur mit eingeschalteten Erweiterungen feststellen. Mac-User können dies ignorieren.

Zurück zum Bilder Speichern: Vergebt den heruntergeladenen Bildern im Speicherdialog unbedingt eine Endung, also .jpg oder .gif! Gewisse Systeme speichern JPG-Dateien fälschlicherweise mit .jpeg oder .jpe ab - darum haben wir vorhin den Exkurs in die Windows-Systemwelt machen müssen.

Wenn Eure Dateien also "bild.jpeg", "Ich bin das hier.jpg", "foto.jpe" oder "schütteln.jpeg" heissen, benennt sie vor dem Einfügen unbedingt in .jpg um - achtet zudem darauf, dass die Dateinamenkonventionen UNBEDINGT eingehalten sind: Dateinamen und Ordner durchwegs klein geschrieben, keine Umlaute, Leerschläge oder Sonderzeichen. Wenn ihr die Bilder in einen Unterordner speichert, MUSS dieser ebenfalls nur mit kleinbuchstaben geschrieben sein.

Also nochmals, da es in der Regel mehr als die Hälfte der Teilnehmenden immer wieder vergessen :) ... ALLE Dateinamen und Ordner MÜSSEN die oben genannten Konventionen erfüllen! Und falls der Fettdruck nichts nützt: Wer eine Website zur Berwertung abgibt, wo dies nicht der Fall ist - das gibt Abzug... also lieber jetzt schon dran denken.

Wer also eigene Bilder verwendet, muss diese zuerst in den Ordner kopieren, in dem die Website entsteht, und diese korrekt umbenennen. Es ist auch von Vorteil, wenn diese Bilder nicht zu gross sind (ca. 300 Pixel breit).

Wie nun das Einfügen der Bilder auf die Website genau geht? Ganz einfach: Platziert den Cursor da, wo ihr das Bild haben wollt. Wählt "Insert / Image" ("Einfügen / Grafik"), dann "Choose File" ("Datei wählen") und wählt das gewünschte Bild aus (Bilder müssen die Endungen .jpg oder .gif haben - anderes lässt sich nicht auswählen bzw. einfügen):

Was das mit dem "Alternate Text" ("Alternativer Text") soll in diesem Einfüge-Dialog? Ihr müsst auf dieser Zeile einen Text eingeben, der das Bild beschreibt. Dieser wird dann z.B. in Blindenbrowsern angezeigt oder vorgelesen. Diese sogenannten ALT-Texte sind also eine Art Hintergrundinfo, die gerade für Behinderte sehr wichtig ist, um eine Seite navigierbar zu machen. Wenn ihr keinen solchen Text angeben wollt: "Don't use alternate text" ("Keinen alternativen Text wählen") wählen.

Wenn ihr das ganze - wie immer - im Browser anschaut, werdet ihr sehen, dass beim überfahren des Bildes mit der Maus der ALT-Text in einem kleinen gelben Fenster erscheint.

WICHTIG: Die Fotos / Bilder MÜSSEN zwingend in Eurem Website-Ordner oder einem seiner Unterordner abgespeichert sein, sonst gibts später Probleme auf dem echten Webserver. Checkt doch noch kurz, ob das wirklich der Fall ist.

Natürlich kann man nun auch auf Bilder Links legen - sofort ausprobieren!

Wer die Seiten und Bilder schon auf den Server laden will, muss beim Publish-Dialog unbedingt das Häklein bei "Include images an other files" setzen, sonst erscheinen die Bilder auf dem Server nicht:

Ich rate dringend davon ab, nun schon allzu komplexe Dinge zu machen - das Frustpotential ist gross, denn das Publishing-Tool von Netscape taugt nicht viel, es ist bloss zum Testen von sehr einfachen Seiten OK.

Beispiel: Selbst wenn ihr die Bilder in einen Unterordner speichert, aber beim Publishing keinen Unterordner angebt, werden die Bilder auf dem Server NICHT in einen Unterordner abgelegt; das Chaos ist also vorprogrammiert... Ihr werdet sehen, dass mit einem professionelleren Upload-Tool alles etwas einfacher geht. WS FTP (damit kann man auch Dateien auf dem Server löschen und auf die Harddisk laden) lernen wir aber erst etwas später kennen. Dann könnt ihr mit dem Composer designen und mit FTP die Seiten auf den Server uploaden.

Zuerst noch ein paar Composer-Hinweise - testen könnt ihr das ganze ja auch ab Harddisk, das erspart euch auch etwas Upload-Aufwand.

Die rechte Maustaste beispielsweise ist auch im Composer sehr wichtig. Wenn ihr mit der rechten Maustaste auf ein Bild klickt und "Image Properties" ("Grafik-Eigenschaften") oder (wenn ein Link auf dem Bild ist) "Image and Link Properties" (in der deutschen Fassung leider nur "Verknüpfungs-Eigenschaften"; für alle Eigenschaften muss man aufs Bild doppelklicken) wählt, könnt ihr einiges einstellen:

Unter dem Reiter "Link" könnt ihr z.B. wählen, dass der hässliche Rahmen ums Bild verschwindet:

Ziel soll es sein, am Ende dieser Übung mittels diesen Angaben und einigem Ausprobieren am Ende eine kleine Web-Seite mit einer fetten Überschrift zu haben sowie einer kleinen Liste mit Deinen Euren liebsten Links. Dazu sollte noch mindestens ein Bild auf der Seite stehen. Und fertig ist eure erste Website!

Nicht vergessen: Man kann man auch aus dem Composer in den HTML-Code-Editor-Modus wechseln, wenn man einmal grössere Probleme hat, eine Darstellung so hinzubekommen, wie man will: Unten im Composer hat es eine kleine Leiste...

...diese ermöglicht (der Reihe nach)

• die Normale Composer-Ansicht (WYSIWYG)
• eine Ansicht, wo zusätzlich die benutzen HTML-Tags angezeigt werden
• die reine HTML-Code-Ansicht (man kann hier - wie anfangs im Texteditor geübt - auch Code von Hand ändern!)
• eine einfache Preview-Ansicht, wie das ganze im Browser aussehen wird (der Knopf BROWSE taugt dazu aber genau so)

Schaut euch das ganze mal an. Versucht auch nochmals, HTML-Code manuell zu ändern und nachzusehen, was sich ändert. Schaut auch mal, wie Bilder im Code eingebunden sind (img src="...").

Und zum Schluss noch dies: Ganz unten Links in Netscape hats einige geheimnisvolle Icons... genau, auch hier kann man im Notfall Composer starten (rot markiert):

Jetzt gehts nochmals ein wenig in Richtung "schönes Design"! Klar - das ist letztlich Geschmackssache.

Es gibt aber dennoch einige Grundregeln (siehe Dokumentation). Wir haben eingangs einiges besprochen. Schaut Euch doch nochmals schnell einige Websites an, die besonders schlechte und besonders gute HTML-Beispiele vorstellen sowie Tips geben, wie man's machen soll (oder eben nicht): Site 1, Site 2, Site 3, Site 4

Wer Zeit hat: Hier hat es eine Liste von "guten" und "weniger guten" Websites aus dem Kurs "Top im Web ADVANCED"...

Und hier gehts weiter mit "Top im Web BASIC"...

Zur Hauptseite zurück gehts hier.