Nach der Zusammenfassung vom 23.05.08 behandelten wir die folgende Bereiche:

Arbeiten in Dreamweaver Einstellungen 1. Teil

Schrift und Kodierung festlegen:

- Dreamweaver > Modifizieren > Seiteneigenschaften > Titel/Kodierung:

Dokumenttyp DTD: HTML 4.01 Transitional (fehlertoleranter bzw. Übergangsphase, gegenüber strict = starr), besser XHTML Transitional benutzen. Kodierung: Unicode 4.0 UTF 8 (für MAC und PC)

Allgemein:
für die Struktur einer Website:
- vorab Scribble auf Papier oder im Photoshop
- nicht mehr als drei Ebenen, …übersichtlicher für den Betrachter. Das hat auch zur Folge, dass die Site bei den Suchmaschinen besser bewertet wird und demnach leichter zu finden ist!

scribble800x566

Die Startseite (engl. Homepage) ist wie eine Visitenkarte, entscheidet, ob der Betrachter weiteres Interesse an der gesamten Website hat.

1.) Start (index.html)
2.) Arbeiten; Vita; Kontakt; Impressum*;..
3.) (zu 2.) Arbeiten) = Dateinamen arbeiten.html; etc..
4.) Order für Bilder, Fotos etc. anlegen, z.b. images/ oder videos/

*Impressum bei privaten Websites nicht nötig, aber bei kommerziellen
Angeboten obligatorisch!

HTML - keine Programmiersprache
- reine Anzeigesprache, Darstellungs- Designersprache
- immer in kleinbuchstaben schreiben (im HTML-Text)

Aufbau einer HTML-Seite:
- im Kopf / head enthalten: nichtdargestellte Information (Infos für Suchmaschinen, Browser, Stichworte, Autor, Haltbarkeit etc.)
- im Hauptteil / body enthalten: Inhalte und Struktur

<doctype declaration ... >
<html>
          <head>
              <title>Titel der Seite</title>
              weitere Head-Elemente
          </head>
          <body>
              HTML-Elemente und Inhalte ....
          </body>
</html>

Aufbau der HTML-Elemente (Tags)

In spitzen Klammern, mit Start- und Ende-Tag. Ausnahme z.B. <br> (break = Zeilenumbruch).

Beispiel:

<p>Textabsatz … </p>

Arbeiten im Dreamweaver Einstellungen 2. Teil

Titel aller Webseiten festlegen, falls nicht, erscheint die Seite bei Suchergebnissen bei Google u.a. als “Untitled Document”. Wird außerdem für Lesezeichen oder Überschriften von Ausdrucken verwendet.

Modifizieren > Seiteneigenschaften > Titel/Kodierung

Weitere Seiteneigenschaften:
- Auswahl der Größe und Schriftart bestimmen

Bild

Hyperlink anlegen:

- Wort(e) oder Bild markieren, Ankersymbol wählen (oder Eigenschaften), Hyperlink eingeben oder:

Einfügen > Hyperlink

Beispiele:

<a href=”seitenname.html” title=”Klick mich!”>Lokale Seite verlinken</a>

<a href=”http://www.hgb-leipzig.de” title=”HGB”>Externe Seite aufrufen</a>

<a href=”next.html” title=”Click me”><img src=”sym.png” alt=”Bild Link”></a>

- Ein Hyperlink verknüpft Informationen miteinander, Seiten, auch Fotos, etc.; jede Information im WWW hat eine spezifische, eindeutige Adresse (URL)
Bsp: http://www.hgb-leipzig.de (Vorher mit Browser aufrufen)

Bild

Im Eigenschaften-Fenster: Stile, Hyperlinks etc. festlegen

Bezüglich Fotos:
Das tif-Format nur lokal verwenden, wird im Web nicht verwendet. Webbildformate: jpg, gif oder png (oder svg).
Wie die Fotos letztendlich wirken, hängt auch von der Auflösung des Monitors ab, sollten nicht größer als 200 bis 300 pixel sein.
immer im Photoshop oder ähnlichem Programm Bilder vergrößern oder verkleinern (um das reale Datenaufkommen zu kontrollieren)
sonst wird nur die Darstellung auf der Webseite verändert, nicht die dafür benötigte Datenmenge.

Foto / Bild einfügen:
> Einfügen > Bild
- 100 kb max., sonst zu lange Ladezeiten beim Aufbau der Seiten
- Vorschaubilder verwenden, ggfls. Originale in Popup-Fenstern anzeigen

<img src=”images/foto121.jpg” alt= “Foto Baumwollspinnerei”>

Bild

..Image Maps anlegen mit Hilfe von “Bild einfügen”
Danach gibst Du der Map einen Namen und legst du Bereiche im Bild als Hyperlink fest. Es wird dann später beim Anklicken dieser Bereiche eine neue Seite geöffnet, wenn die Map zur Navigation dient.

..zum Rollover Bild gelangst du über “Grafikobjekte einfügen”
Da hinter können sich zwei Bilder verbergen, aber auch andere Features, wie Ausschnitte, freigestellte Fotos, etc. entstehen. Einfach ausprobieren. Wenn die Maus auf die Stelle des Bildes o. der Grafik kommt, wandelt sich dieses in ein anderes Bild.

Zum Schluß von dit Janze verlinkst du deine neue Seite mit index.html,
…wie beim Abschnitt bdoppelf Hyperlink besprochen ;-)

Good luck!

Druckversion des Beitrags anzeigen und ausdrucken