Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 3: Bilder, Links, Anker, Seiteneigenschaften

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.

Wir hatten schon in Übung 1 einen kurzen Einblick in wichtige Shortcuts von Dreamweaver - die wollen wir nun auch anwenden:

• Ctrl+Alt+I für Bild (Image) einfügen
• Ctrl+Alt+T für Tabelle (Table) einfügen
• Ctrl+Alt+A für Ankerpunkt (Anchor) einfügen

Praktisch keine Website kommt ohne Bilder oder Tabellen aus. Hier geht es zunächst aber um Images (Bilder, Fotos) und wie man Hyperlinks (bzw. einfach "Links") einfügt.

Bilder

Legen Sie einen neuen Ordner auf der Festplatte (Kursraum Muesmatt: Laufwerk D) an, inkl. einem Unterordner "images".

Definieren Sie in Dreamweaver bei Bedarf eine neue Site (oder benützen Sie die vorhin definierte) und fügen Sie einige Fotos oder andere beliebige Images (Logos, Buttons usw.) in den Bilderordner "images" ein. Achten Sie UNBEDINGT auf die Dateinamenkonventionen! Keine Leerschläge, keine Umlaute, alles klein geschrieben. Sie können auch Bilder aus dem Internet herunterladen (Foto mit der rechten Maustaste anklicken und "Bild speichern unter / Save Image As" wählen).

Achtung: JPG-Bilder werden auf gewissen PCs teils wegen einer falschen Windows-Einstellung mit der Endung .jpe gespeichert. So funktionieren sie leider nicht im Web; ändern Sie diese Endung unbedingt in .jpg!

Mit Ctrl+Alt+I starten Sie den Bild-Einfüge-Dialog:

Wechseln Sie in den richtigen Ordner und wählen Sie die Bildquelle aus, drücken Sie ENTER oder klicken Sie OK.

In Dreamweaver 8 meldet sich nun in der Standardkonfiguration der Alt-Text-Manager. Was soll das? Alt- oder Alternativtexte helfen Sehbehinderten und Blinden: Anstelle des Bildes wird ihnen der Alt-Text vorgelesen. Das Fenster sieht so aus:

Hier können Sie entweder der Alt-Text eingeben oder auf "abbrechen" klicken. Wenn Sie dieses Fenster nervt, klicken Sie auf den Link zuunterst im Fenster oder gehen auf "Bearbeiten / Voreinstellungen". Hier können Sie das Häklein bei "Bilder" wegnehmen:

Nun denn - wenn Sie diese Hürde gemeistert haben, sollte das Bild eingefügt sein. Wenn Sie es einmal anklicken, erscheint das Eigenschaftenfenster neu so:

(oben: Dreamweeaver MX 2004 / unten: CS3)

• Bei B/H könnten Sie die Bildgrösse ändern (Breite, Höhe). Tun Sie dies hier nur zu Übungszwecken - Webdesigner lassen normalerweise die Finger von dieser Einstellung - Sie werden erfahren, weshalb.
• Bei "Alt:" können Sie einen Text eingeben, der in einem kleinen gelben Fenster erscheint, wenn der Mauszeiger über dem Bild ist oder erscheint, wenn jemand das Laden der Bilder eingeschaltet hat. Hier sollte immer etwas Aussagekräftiges stehen (z.B. "Foto von Hans Meier, Basel"). Dies funktioniert in Firefox nicht - hier müsste im Quellcode manuell der Image-Tag angepasst werden in <img src="bild.jpg" alt="Beschreibung" title="Beschreibung">... also quasi eine Verdoppelung des Alt-Tags als Title-Tag.
• Unter "Hyperlink" können Sie einen Link einfügen, wenn mit einem Klick aufs Bild eine Website aufgehen soll. Beachten Sie, dass externe Links immer mit http:// eröffnet werden müssen.
• Bei "Ziel" können Sie bestimmen, ob dieser Link in einem neuen Browserfenster (_blank) aufgeht oder im gleichen Fenster (nichts hineinschreiben).
• Sie können mit den hellblauen Bereichen auch nur Teile eines Bildes mit einem Link belegen - dies wird später im Kurs beschrieben.
• V-/H-Abstand ist der Abstand neben oder unten/oben am Bild in Pixeln.
• Wenn Sie das Gefühl haben, das Bild sehe mit einem schwarzen Rahmen besser aus, fügen Sie "1" in das Feld "Rahmen" (benützen Sie diese Funktion nicht, wenn ein Link auf dem Bild liegt - der Rahmen wird sonst hässlich blau).
• Bei "Ausrichten" können Sie bestimmen, ob - und wenn ja wie - der Text um das Bild laufen soll. Sichtbar wird das aber erst in der Browservorschau (Datei > Vorschau in Browser)!

Wie überall gilt auch hier: Üben, üben, üben... Testen Sie frei nach Lust und Laune, was passiert, wenn Sie dieses und jenes ändern. Kaputtgehen kann nichts!

Sie können das eingefügte Bild auch an der rechten unteren Ecke (beim schwarzen Punkt) mit der Maus "packen" und bei gedrückter Shift-Taste "zusammenstauchen"; so werden die Proportionen erhalten:

Tipp: Ab Dreamweaver MX 2004 haben Sie die Möglichkeit, ohne Bildbearbeitungsprogramm ein wie soeben beschrieben verkleinertes Bild "neu zu berechnen", d.h. die Dateigrösse zu verkleinern, sodass es schneller erscheint und schöner aussieht.

Klicken Sie dazu das Bild an und wählen Sie im Eigenschaften-Fenster den Button "neu auflösen" an:

Sogleich wird das Bild von Dreamweaver neu berechnet. Tipp: Die weiteren Buttons können Sie auch gleich ausprobieren; hier können Sie das Bild beschneiden (Ausschnitte auswählen und den Rest "wegschneiden") sowie Kontrast und Helligkeit anpassen.

Zum Nachlesen: KnowWare-Heft 27, Seite 29-33

Vergessen Sie nicht - das gilt nicht nur für Bilder -, die Browservorschau vorzunehmen; entweder mit Datei / Vorschau in Browser oder mit dem entsprechenden Erdkugel-Button:

Die Browserliste können Sie in den Einstellungen erweitern, indem Sie + klicken:

Mit der Taste F12 rufen Sie die Vorschau im Primärbrowser an (sollte in der Regel eine aktuelle Version des Internet Explorer sein), mit Ctrl+F12 diejenige im Sekundärbrowser (in der Regel Mozilla - oder eine aktuelle Fassung von Netscape, das antiquierte Netscape 4, sowie z.B. Opera).

Sie können hier aber beliebig viele Browser hinzufügen, es sind einfach nicht alle mit einem Shortcut ausstattbar.

Zum Nachlesen: KnowWare-Heft 27, Seite 22

Links, Text im Allgemeinen, Seiteneigenschaften

Wie ein Hyperlink (oder einfacher gesagt: Link) auf ein Bild eingefügt wird, wissen Sie nun. Natürlich können Sie auch auf ein Wort oder einen Satz einen Link legen. Markieren Sie den zu verlinkenden Bereich mit der Maus und geben Sie im Eigenschaftenfenster den Link in der Zeile "Hyperlink" ein.

Alternativ können Sie auch auf den Ordner rechts neben dem Feld klicken und innerhalb der aktiven Site eine Datei wählen.

Beachten Sie bei den Links die Schreibweisen:

• Links innerhalb der gleichen Site: Dateiname, eventuell mit Pfad (ordnername/datei.htm oder ../datei.htm)
• Links auf eine externe Site: http://www.server.ch
• Links auf eine externe Datei: http://www.server.ch/datei.htm
• Mail-Link: mailto:name@server.ch (keine Leerschläge!)

Bei "Ziel" können Sie bestimmen, ob der gesetzte Link in einem neuen Browserfenster (_blank) aufgeht oder im gleichen Fenster (nichts hineinschreiben).

Im hier sichtbaren Standard-Eigenschaftenfenster können Sie übrigens auch andere Textattribute bestimmen - nicht anders als im Word.

Aber halt - hier sei etwas Wichtiges erwähnt: Es ist viel gescheiter, wenn Sie an dieser Stelle zwar zur Kenntnis nehmen, dass die Textattribute zwar hier bestimmt werden können, dass es aber nicht ratsam ist, Texte so zu formatieren. Das Stichwort lautet "Trennung von Inhalt und Layout mit CSS". Dazu kommen wir später.

Für alle Fälle sei hier aber doch erwähnt, was man so alles ändern kann - denn einige Elemente wie z.B. fett oder kursiv lassen sich auch mit CSS kombinieren:

• Schriftart (in der Regel Verdana, Arial, Helvetica - alles andere macht wenig Sinn, denn es ist wenig attraktiv, und eine Schriftart muss auch beim User installiert sein, damit sie erscheint - eine Site daher mit "Comic sans" zu designen, ist barer Unsinn)
• Grösse (nicht in der üblichen Punktgrösse wie 12 oder 14, sondern in der Regel relativ zu einer userdefinierten Standardgrösse, dazu mehr mündlich im Kurs)
• Textfarbe
• fett
• kursiv
• linksbündig, zentriert, rechtsbündig (wählen Sie nie den Blocksatz, dies wirkt im Web hässlich)
• Aufzählung (Sie können bei Text / Liste / Eigenschaften Punkte oder Quadrate als Zeichen wählen)
• Nummerierung (die Zahlen werden je nach Dreamweaver-Version erst in der Browservorschau sichtbar)

Die Farbe der Links (wie auch der besuchten oder gerade aktiven Links) ändern Sie mit Ctrl+J oder Modifizieren / Seiteneigenschaften global für die aktuelle Seite.

(oben: Dreamweaver MX 2004 / unten: CS3)

Vergessen Sie dabei auch nicht, der Seite einen ansprechenden Titel zu geben - dies spielt auch für die Auffindbarkeit in Suchmaschinen eine Rolle! Der Titel erscheint später im blauen Balken zuoberst und hat nichts mit dem Dateinamen zu tun. Die Angabe des Titels kann auch jederzeit im entsprechenden immer sichtbaren Bereich der Top-Leiste geschehen:

Üben Sie auch hier, was sich ändert, wenn Sie dieses und jenes ändern: Hintergrundfarbe, Textfarbe, Linkfarben usw.

Bei allen Farbauswahlfeldern können Sie mit einem Klick auf das entsprechende graue Feld einen Farb-Selector öffnen und so bequem die gewünschte Farbe aussuchen:

Später erfahren Sie, wie Sie mittels CSS verhindern können, dass Links unterstrichen sind und wie Sie erreichen, dass die Schriftauszeichnungen über die gesamte Site gleich aussehen.

Was Sie schon gemerkt haben dürften: Wenn Sie die ENTER-Taste drücken, entspricht das einer Absatzschaltung oder dem Tag <p> (paragraph). Wenn Sie eine einfache Zeilenschaltung einfügen wollen bzw. ein <br> (break), drücken sie SHIFT+ENTER.

Anker

Wenn Sie auf einen Bereich auf der gleichen Seite verlinken, also gewissermassen einen "Hüpfer" innerhalb der gleichen Seite programmieren wollen, müssen zuerst Sie einen Ankerpunkt einfügen - an der Stelle, wohin Sie springen wollen.

Dies erreichen Sie mit Ctrl+Alt+A (oder Einfügen / Benannten Ankerpunkt) an der Stelle, wo der Anker eingefügt werden soll. Es erscheint dann (sofern Sie nicht unter Ansicht / visuelle Hilfsmittel die unsichtbaren Elemente ausgeblendet haben) dieses Zeichen als "Sichtbarmachung" des an sich für die Betrachter unsichtbaren Ankers.

Wenn Sie nun zu diesem Anker einen Link einfügen wollen, z.B. von oben auf der Seite ganz nach unten (nehmen wir an, Sie haben den Ankerpunkt "unten" benamst), markieren Sie das zu verlinkende Wort (z.B. "Mehr dazu unten auf der Seite") und tippen Sie ins Link-Feld "#unten" ein. Der "Gartenhag" verweist jeweils auf einen Link innerhalb der selben Seite.

Alternativ dazu können Sie auch das Fadenkreuz-Instrument brauchen. Wie, das zeige ich Ihnen im Kurs. Wenn Sie von unten wieder nach oben verlinken wollen - kein Problem. Fügen Sie oben einen Anker namens "top" ein und verlinken Sie auf "#top". Genau so entstand auch der Link "Zum Seitenanfang" zwei Zeilen unter diesem Satz, ausser dass dieser Link auf einem Image liegt.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.