Kantonsschule Enge Bildnerische Gestaltung Webdesign, Photoshop - Dreamweaver

 

  Vorlage produzieren (vorlage.htm) Seite einrichten, Grundtabelle

Die folgende Anleitung dient der Gestaltung einer Website.

Die Website beginnt mit dem Gestalten einer Vorlageseite (vorlage.htm). Die Gestaltung nimmt Rücksicht auf die Bildschirmgrösse. Diese ist normalerweise mindestens 800 Pixel breit und 600 Pixel hoch (SVGA). Heutige Notebookmonitoren sind häufig 768 x 1024 Pixel, Flachbildschirme haben meist noch höhere Auflösung.

Das Beispiel geht von einer Grösse von mind. 600 x 800 Pixel aus.

Die Masse der Tabellen, der Spalten, Zeilen und Zellen nehmen Rücksicht auf dieses Grundmass.

Das Logo ist 200 Pixel breit und 100 Pixel hoch. Somit ist auch die oberste Zeile 100 Pixel hoch und die linke Spalte 200 Pixel breit.

Seite einrichten

  1. Modifizieren - Seiteneigenschaften
  2. Titel der Seite (erscheint in der baleun Brauserleiste oben)
  3. Hintergrundfarbe
  4. Ränder links und oben auf 0 stellen

Grundtabelle

  1. Tabelle einfügen (über Einfügen-Werkzeug oder Einfügen-Menu)
  2. Tabellengrösse bestimmen
    3 Zeilen, 3 Spalten
    100 % Breite
    Zellauffüllung 0
    Zellabstand 0
    Rahmen 0

 

       

Tabelle verändern

  1. Tabelle muss markiert sein!
    (wenn die Marker nicht erscheinen: in die Tabelle in eine leere Zelle klicken- linke Maustaste - Tabelle - Tabelle auswählen)
  2. Im Eigenschaftsfenster erscheinen die Eigenschaften der Tabelle
    Zeilen - und Spaltenzahl
  3. Breite und Höhe in Prozent
  4. Position

Tabelle ausweiten

  1. Höhe auch auf 100 % stellen
  2. Marker gehen auf Fensterrand
       

Zelle formatieren

  1. in Zelle links oben klicken
  2. Zelleigenschaften bestimmen
    Breite 200 Pixel
  3. Höhe 100 Pixel

(nun ist die ganze obere Zeile 100 Pixel hoch und die ganze linke Spalte 200 Pixel breit)

Onemousoverbild einfügen

  1. in oberste Zelle links klicken
  2. Rolloverbild anklicken
    (im Einfügen-Werkzeug)
  3. Bildname geben (z.B. Logo)
  4. erstes Bild suchen (z.B. logo-a.jpg)
    zweites Bild suchen(z.B. logo_b.jpg)
    Ersatztext bestimmen (falls Bilder nicht angezeigt werden)
    Linkdatei angeben (index.htm)