Kantonsschule Enge Bildnerische Gestaltung Webdesign, Photoshop - Dreamweaver
Layout:
Photoshop - Dreamweaver
Elemente der Vorlage einsetzten in der Homepage
Arbeitsschritt einzelne Befehle Abbildungen Kommentar

Dreamweaver 1

Site einrichten

Bevor mit dem Layout der Homepage (Startseite) begonnen wird, muss die geplante Site im Sitemanager des Dreamweaver geöffnet, oder eine neue Site angelegt werden. (siehe erste Site)

Dreamweaver 2

Site öffnen
leere Seite wählen
Datei als index.htm speichern

Dreamweaver starten
Site öffnen

oder neue Site

  1. Sites bearbeiten
  2. neue Site
  3. Sitenamen geben (beliebig)
  4. Webverzeichnis bestimmen

Dreamweaver 3

Seiteneigenschaften

Leere Seite anwählen
als index.htm speichern

Seiteneigenschaften bestimmen

  1. Modifizieren - Seiteneigenschaften
  2. Seitentitel (z.B. Begrüssung) (erscheint in der blauen Browserleiste)
  3. ev. Hintergrundfarbe bestimmen
  4. Seitenränder oben und links auf 0 stellen

Dreamweaver 4

Layout und Tabelle

  1. Tabelle einfügen
  2. 3 Spalten und 3 Zeilen
  3. Zellauffüllung und Zellenabstand 0
  4. 100 % breit
  5. Rahmen 0

 

 

 

Dreamweaver 5

Zellenmasse
Zelleigenschaften

das Bestimmen der Zellenmasse der Zelle oben links
bestimmt die Höhe der ganzen oberen Zeile und die Breite
der ganzen linken Spalte

  1. in Zelle oben links klicken - die Zelleigenschaften werden im
    Eigenschaftsfenster angezeigt
  2. B: 175
  3. H: 100

weitere Zellmasse:

  • mittlere Zelle oben: Breite 625 Pixel
  • mittlere Zelle links: Höhe 220 Pixel

alle Zellen markieren (in Zelle unten rechts klicken und von unten rechts nach oben links über alle Zellen streichen

  • im Eigenschaftsfenster Zelleigenschaften bestimmen
  • Ausrichtung:
    Horiz : links
    Vert. Oben

Dreamweaver 6

Bilder einfügen

nun werden alle zerschnittenen Teile des Layouts
in die entsprechenden Zellen eingefügt
 

Dreamweaver 7

Rolloverbild und Verlinkung

Rolloverfunktionen zu einem Bild werden als "Verhalten" bezeichnet.

  1. Fenster - Verhalten
  2. links oben auf + klicken
  3. Ereignisse zeigen - für Browser ab Vers. 4

Rollover bestimmen

  1. Bild anklicken und im Eigenschaftsfenser Link angeben (Hyperlink)
  2. eindeutigen Bildnamen geben im Eigenschaftsfenster links oben
  3. auf + im Verhaltensfenster
  4. Bild austauschen
  5. Quelle einstellen auf: Rolloverbild wählen
  6. die zwei Optionskästchen markieren

Verhalten testen (F12)

weiter mit Dreamweaver
(Hotspot / Imagemap)