|
Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 1 "Webbasic"/Modul 1.6 "html-mit Netscape Composer (3 v. 3)" |
| (© copyright) Letzte Änderungen: |
So, los geht's zur letzten Lektion unserer Composer-Einführung.
Es wird ja Zeit, dass wir mal ein Bild sowie Links einbauen. Hierzu brauchen wir einige Vorbereitungen.
Vorbereitungsschritt 1: Projektordner auf Festplatte anlegen
Wenn Sie noch immer noch keinen Ordner für Ihr Projekt auf ihrer Festplatte haben, legen Sie nun einen an und benennen ihn ohne Leerzeichen, Kommas, Apostrophe oder andere Sonderzeichen, also z.B. rudis_webordner.
Vorbereitungsschritt 2: Bilder in Projektplatte legen
Holen Sie sich zu Übungszwecken doch ein Bild aus dem Angebot von http://www.palaeo.de/edu/ oder einer anderen Website (nur zu Übungszwecken, Sie müssen die Copyright-Bedingungen beachten, dazu später), von einem der Bildarchive im Web (siehe unser kleines Verzeichnis hierzu) oder nehmen Sie einfach unten stehendes Bildchen.
Wissen Sie, wie Sie dies Bild auf Ihre Festplatte bekommen?
Mit den meisten Browsern können Sie das Bild einfach von einer Webseite auf Ihren Ordner oder das geöffnete Ordnerfenster ziehen. Damit aber das Bildformat keinesfalls geändert wird, verwenden Sie (vor allem bei PCs) besser die rechte Maustaste und speichern Sie das Bild ab (Befehle, je nach Plattform und Browser z.B. Bild speichern unter... oder Bild auf Ihre Festplatte downloaden... oder so ähnlich.
Wenn Sie bereits Pixelbilder mit 72-dpi Auflösung im Gif oder JPG-Format haben, können Sie auch diese in Ihren Projektordner legen. Wenn Ihnen obige Begriffe (dpi, GIF, JPG) noch Böhmische Dörfer darstellen, warten Sie bis zur entsprechenden Lektion und nehmen erst einmal Bilder aus dem Web wie oben beschrieben.
Vorbereitungsschritt 3: Registrierte Dateiendungen anzeigen lassen (nur Windows-Benutzer)
Ggf. haben Sie dies schon früher eingestellt, dann betrifft es Sie nicht.
Windows-Benutzer sollten sicherstellen, dass die Dateiendungen aller Daten angezeigt werden. Je nach verwendeter Windows-Version ist diese Einstellung etwas unterschiedlich. In der Regel funktioniert es, über den Windows-Explorer zu gehen und rufen dort unter Menu Ansicht die Ordner-Optionen auf. Klicken Sie hier (unter Windows98) nochmals auf den Ansicht-Reiter und deaktivieren, dass Dateitnamenerweiterungen bei bekannten Dateitypen ausgeblendet werden sollen. Ja, richtig: deaktivieren; standardmäßig ist dies aktiviert. Danach wird z.B. bei Bilddateien ihre richtige Endung, z.B. .gif oder .jpg angezeigt, bei asci-Textdateien wird standardmäßig .txt angehängt, es sei denn, sie ändern dies auf .html. Der Composer hängt an die mit ihm erstellten Dateien automatisch .html an, was nun auch angezeigt wird. Unten stehendes, verkleinertes Bild sollte helfen:
Mac-Benutzer müssen darauf achten, ebenfalls jeweils die korrekten Dateiändungen anzuhängen (auch wenn das Mac-Betriebsystem bis zur Version 9 so etwas nicht braucht, für die html-Sprache ist es aber notwendig).
Unix, LInux und MacOS-X-Benutzer haben sowieso Endungen an ihren Dateien (unter MacOS-X ggf. analog oben anzeigen lassen).
Vorbereitungsschritt 4: Erstellung zweier kleiner html-Seiten
Wenn Sie Ihre alte Übungsdatei nicht weggeworfen haben, legen Sie diese in Ihren Projektordner und erstellen im Composer eine zweite Seite, die Sie ebenfalls direkt in Ihren Projektordner speichern. Falls Sie Ihre alte Datei nicht mehr haben oder nicht verwenden wollen, erstellen Sie eben eine zweite Seite und speichern direkt in Ihren Projektordner.
Die erste Seite könnte als Dateinamen vielleicht haben: ersteseite.html, die zweite Seite zweiteseite.html
Auf der ersten Seite könnte z.B. stehen: Hallo Besucher, wollen Sie mal mein schönes Bild sehen. Dann bitte hier klicken. Vielen Dank.
Auf der zweiten Seite könnte stehen: Gefällt Ihnen mein Bild? Hier kommen Sie wieder zur ersten Seite zurück. Sie können aber auch auf das Bild klicken, um zurückzugelangen.
So, nun müssen wir den Link und das Bild einfügen.
Schritt 1: Link von Seite eins zu Seite zwei.
Rufen Sie Ihre Seite 1 wieder mit dem Composer wieder auf (Sie wissen schon, mit Datei öffnen im Netscape Browser laden, oder einfach Datei-Icon auf Programmicon ziehen; dann mit Datei/Seite bearbeiten in den Composer laden)
Markieren Sie im Satz "Dann bitte hier klicken" das Wort "hier" (oder irgend ein beliebiges Wort Ihres Textes, welches als Link dienen soll) und klicken in der Menuleiste auf das Icon "Verknüpfung" (welches hier für das geläufigere Wort Link gebraucht wird). Es öffnet sich unten abgebildetes Fenster "Verknüpfungseigenschaften" Gehen Sie hier auf Datei wählen und steuern Sie die zweite in Ihrem Projektordner liegende html-Datei an. In unserem Beispiel heißt sie "seitezwei.html". Hierbei wird automatisch URL ist relativ zur Seitenadresse aktiviert. Dies muss unbedingt geschehen.
Wichtig: Sie können Ihren Dateinamen auch von Hand eingeben, sofern die zu verknüpfende Datei im gleichen Ordner liegt. Dabei müssen Sie aber unbedingt wieder URL ist relativ zur Seitenadresse aktivieren (ansonsten wird oben eine kompletter absoluter, aber lokaler Pfad Ihres Arbeitsrechners in den Sourccode eingetragen (irgendetwas mit file:///festplatte/etc/etc/). Wenn Sie Ihre Dateien ins Internet übertragen, würde dann überhaupt nichts mehr funktionieren. Näheres hierzu kommt in den nächsten Lektionen).
'Wichtig für Mac-Benutzer: In Version NetscapeNavigator 6.1 für Mac gibt es im Composer einen Bug bzw. nicht die Option URL ist relativ zur Seitenadresse zu aktivieren. Bei Verknüpfung über Datei wählen wird Ihnen deshalb immer der falsche Link (d.h. der lokale absolute Link, siehe oben) eingetragen. Sie müssen deshalb unbedingt den Dateinamen (und bei komplexeren Projekten den relativen Pfad, näheres siehe später) von Hand eintragen. Hoffentlich wird in der nächsten Version des Navigators dieses Problem behoben sein). Höre ich da PC-Benutzer hämisch grinsen ("endlich funktioniert auch mal beim Mac was nicht!!")?
So, auf ok drücken und fertig ist der Link.
Schauen vielleicht noch kurz in den Quellcode. Der entsprechende Teil sollte so aussehen:
.... dann bitte <a href="seitezwei.html">hier</a> klicken.
Genau, das kennen Sie ja schon.
Nun aber gleich mal ausprobieren! Gehen Sie auf Vorschau und laden somit Ihre Seite in den Browser (Sie müssen zuvor noch speichern). Klicken Sie auf den Link und ... hier ist die zweite Seite. Hat doch sicherlich geklappt?
Schritt 2: Einfügen des Bildes auf Seite 2
Nun fügen wir das Bild auf der zweiten html-Seite ein. Gehen Sie wieder in den Composer-Modus. Klicken Sie auf die Stelle in der Standardansicht, an der das Bild eingefügt werden soll. Es sollte am Beginn einer neuen leeren Zeile stehen (ggf. einfügen). Dann klicken Sie in der Menuleiste des Composers auf "Grafik". Unten abgebildetes Eigenschaftenfenster öffnet sich. Wählen Sie, analog zur Linkerstellung oben die Bildatei an oder tragen Sie von Hand deren Dateinamen ein. Wichtig: wieder muss die Option "URL relativ" aktiviert sein (für Macs gilt analog das oben gesagte :-((
Sie sollten noch einen Alternativtext eingeben.
Dieser wird angezeigt, falls ein Benutzer die sofortige Darstellung von Bildern in seinem Browser deaktiviert hat. Dies war in den Anfängen des WWW wichtig, als die Übertragungsgeschwindigkeiten noch sehr langsam waren, wird aber wieder wichtiger, wenn Webseiten via Handheld-Computern angesteuert werden. Der Benutzer kann dann die Bilder nach Wahl nachladen. Sie können das Feld aber leerlassen, die Warnmeldung ignorieren und ein zweites Mal auf ok klicken.
Klicken Sie auf ok, uns schon ist das Bild auf Ihrer Seite!
Der einfügte html-Code sollte so aussehen (im html-Quelle Modus vergleichen).
... Gefällt Ihnen mein Bild?<br>
<br>
<img src="laempel.gif" alt="mein erstes Bild" width="82" height="108">
<br>
<br>
Hier kommen Sie ......
Schritt 3: Textlink und Bildlink zurück auf Seite 1
So, nun noch einen Link zurück von Seite 2 auf Seite 1. Markieren Sie einen entsprechenden Text (z.B. zur ersten Seite zurück) und gehen wie oben vor, verlinken nun aber natürlich auf seiteeins.html (oder wie auch immer Ihre erste Seite heißt).
Jetzt gleich noch was Spezielleres: Oft kann man im Web auf ein Bild klicken, worauf eine andere Seite aufgerufen wird. Klar, können wir auch gleich basteln.
Markieren Sie Ihr Bild und klicken in der Menuleiste wieder auf "Grafik". Der Linkinspektor geht wieder auf. Geben Sie wie üblich, wieder die zu verlinkende Seite an, URL-relativ etc. und ok. Funktioniert doch wunderbar, oder?
Im Ansichtsmodus des Composers sollte die Seite nun folgendermaßen aussehen.
Das Bild hat nun einen Rahmen, welcher anzeigt, dass man auf das Bild klicken kann, wodurch ein Link ausgelöst wird. So etwas ist oft gewünscht, aber optisch ist es in unserem Fall nicht allzuschön. Außerdem steht ja eh unten, dass man auf das Bild klicken kann. Wir machen den Rahmen deshalb weg. Dazu doppelklicken wir auf das Bild oder markieren es und rufen über Absatz/Grafikeigenschaften den Eigenschaften-Inspektor auf. Dort auf "Mehr Eigenschaften" klicken. Das Fenster sieht dann wie unten aus. Hier kännen Sie rechts unten bei durchgezogener Rand 0 Pixel einstellen. Nach der OK-Bestätigung ist der Rand um das Bild weg.
Jetzt können Sie wieder nach Herzenslust im Browser Ihre Seiten bewundern.
Hinweis: unsere html-Seiten und das Bild liegen alle in einem Ordner, Unterordner haben wir keine angelegt. Dies bedeutet, dass unser Projekt eine sog. flache Struktur aufweist. Näheres dazu gibt es in der nächsten Lektion (Modul 2.3)
Weitere Möglichkeiten mit dem Composer
Seitenhintergrund und Text-/Linkfarben: Kehren wir nun zu unserem Bildbeispiel zurück und wählen noch eine Seitenhintergrundfarbe aus. Einfach unter Absatz zu Seitenfarben und Hintergrund gehen, das sieht dann wie unten aus. Hier auf Benutzerdefinierte Farben klicken und im Farbwählfenster für Hintergrund etwa eine andere Farbe auswählen, in unserem Beispiel ist dies ein helles Blaugrün. Sie könnten in diesem Eigenschaftenfenster auch die Grundfarbe für den normalen Text definieren bzw. andere Farben für Verknüpfungstext definieren. Wir belassen es in diesem Beispiel bei den Standardeinstellungen für Text.
Sie könnten auch eine Hintergrundgrafik wählen, diese sollte möglichst klein sein undsich kacheln lassen. Probieren Sie es einfach mal aus, dann sehen Sie die Effekte. Im Web gibt es jede Menge Auswahl für geeignete Hintergrundbilder (siehe hier).
Klicken wir nochmals aufs Icon Absatz und rufen Seitentitel und Eigenschaften auf. Hier könnten Sie den Titel für Ihre Seite ändern (wird auf der Browserkopfleiste angezeigt), können Ihren Autorennamen eingeben und können eine Kurzbeschreibung der Seite eingeben. Diese Informationen werden im Kopfteil der html-Seite als sog. Metainformationen abgespeichert. Websuchmaschinen fragen diese Informationen häufig ab und kommen so zu ihren Suchergebnissen. Hier als zwei Beispiele für Metainformationen, es gibt davon noch viel mehr.
Der Quellcode unserer Seite sähe nun so aus. Die neuen code-Merkmale dieser Lektion habe ich eingefärbt, damit Sie sich besser zurechtfinden. Versuchen Sie mal, alles nachzuvollziehen.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>seitezwei</title>
<meta name="author" content="Reinhold Leinfelder">
<meta name="description" content="Composeranleitung zu Links und Bildern">
</head>
<body text="#000000" bgcolor="#66ffff" link="#0000ee" vlink="#551a8b" alink="#0000ee">
Gefällt Ihnen mein Bild?<br>
<br>
<a href="seiteeins.html"><img src="laempel.gif" alt="mein erstes Bild" width="82" height="108" border="0">
</a>
<br>
<br>
Hier kommen Sie wieder <a href="seiteeins.html">zur ersten Seite zurück</a>
. Alternativ können Sie auch auf obiges Bild klicken, um wieder zurückzukommen.<br>
</body>
</html>
(Hinweis: Die Information für die Seitenhintergrundfarbe wurde im Bodytag eingegeben (bgcolor). Obwohl wir für die Textoptionen keine veränderten Farbeinstellungen vorgenommen haben, hat der Composer doch die entsprechenden Attribute ebenfalls eingetragen., Dies liegt daran, dass wir das "mehr Einstellungen"-Fenster geöffnet hatten).
Ausblick: Wichtig bei dieser Lektion waren also insbesondere Bilder und Links. Zu komplexeren Links und Bildpfaden kommen wir später. Soviel aber noch vorne weg: Sie können natürlich auch sogenannte absolute Links auf andere Seiten angeben. Zum Beispiel einen Link zum Jurassic Reef Park. Im Verknüpfungsinspektor wäre hier einzugeben: http://www.palaeo.de/edu/JRP/index.html . Probieren Sie es doch mal aus.
Hier noch eine kurze Erklärung zu Zielen (Anker), wir kommen im späteren Kursverlauf noch näher dazu. Sie können nicht nur auf andere Seiten verlinken, sondern auch bestimmte Stellen in anderen (oder derselben Seite) direkt anspringen. Dazu muss zuvor ein Anker (im Composer heißt dies etwas unüblich Ziel)eingebaut werden. Probieren Sie es aus. Machen Sie eine Seite mit viel Text und bauen Sie etwa in der Dokument-Mitte am Beginn einer Zeile einen Anker ein. Cursor an die richtige Stelle, auf Ziel klicken und ins Namensfeld einen beliebigen Namen ohne Leerstellen etc. eingeben. Der Code sähe folgendermaßen aus:
<a name="meinersteranker"></a>. Zwischen den beiden a-Tags kann, muss aber nichts stehen. Der Anker wird im Browser aber auch nicht angezeigt. Nehmen wir an, Sie wollen auf die Seite meinedritteseite.html verlinken, und gleich diese Ankerstelle anspringen. Wenn Sie den Link durch das Verknüpfungsfenster erstellen, steuern Sie erst die zu verlinkende Seite an und wählen dann mehr Eigenschaften. Wenn auf der zu verlinkenden Seite Anker eingebaut sind, werden diese dort angezeigt und können selektiert werden.
Tipp: Ein nettes Feature des Composers ist, dass Sie auch evtl. auf der zu verlinkenden Seite vorhandene Überschriften ansteuern können. Hierbei wird dann in der Zeile der ausgewählten Überschrift automatisch ein Anker generiert.
Der im obigen Beispiel generierte Code würde folgendermaßen aussehen:
<a href="meinedritteseite.html#meinersteranker">hier klicken</a>
Sie können auch eine Stelle innerhalb derselben Seite anspringen. Wählen Sie dazu eben keine andere html-Datei aus, sondern einen Anker (oder auch Überschrift, siehe oben) innerhalb der aktuellen Seite. Der erstellte Code wäre dann z.B.
<a href="#meinersterAnker">hier geht's nach unten</a>
Damit ist unser kleiner Composer-Kurs vorläufig beendet. Er beinhaltet noch etliche weitere Funktionen, z.B. können Sie Textpassagen farbig machen (Sie kommen selbst drauf wie) oder auch unterschiedliche Schriftarten auswählen. Gehen Sie mit letzterem aber sparsam um, wir kommen da später noch zu eleganteren Möglichkeiten.
Viel Spaß beim Erstellen Ihrer Webseiten. Wir kommen aber immer wieder zum Composer zurück, er wird auch für die nächsten Lektionen Ihr wichtigstes Handwerkszeug bleiben.
Auch im Netz gibt es einige weitere Tutorials zum Composer. Das umfassendste ist vielleicht unter http://www.guide.net/nz/mtn/web2.html zu erreichen. Es ist allerdings betagt und behandelt nur den Composer der Versionen Netscape Communicator 3 und 4. Vielleicht können Sie aber dennoch einige zusätzliche Anregungen daraus erhalten.
>> Fortsetzung des Kurses: Modul 2 (Internet-Techniken)
<< Modul 1.6: Composer