Kantonsschule Enge Bildnerische Gestaltung Webdesign, Photoshop - Dreamweaver
Vorbereitung Zur Vorbereitung sollte eine Layoutskizze (mit Hilfslinien, ohne Hilfslinien) von Hand gezeichnet werden.
Ort und Grösse der Navigation und des Logos müssen vor dem Arbeitsbeginn mit Fotoshop festgelegt werden.

Photoshop 1

neue Datei

Dateigrösse

  • 1000 Pixel breit
  • 650 Pixel hoch
  • Auflösung 72 Pixel/Zoll
    (oder 300 Pixel/Zoll)

    Die Grösse des Normbildschirmes ist 1024 x 768 Pixel (XGA, Notebooks). Da Symbolleisten, Statuszeile und Scrollbalken wegfallen benötigt man eine kleinere Fläche für das Layout. Je nach Benutzerprofil muss man ein noch kleineres Layout planen. Die Auflösung kann zur präziseren Bearbeitung auf 300 Pixel/Zoll eingestellt werden. 72 Pixel/Zoll würden aber genügen. Bei der Einstellung 72/Zoll wird auch besser deutlich, welche Schriftgrösse noch lesbar ist.

Photoshop 2

Masseinheiten / Lineale /
Hilfslinien

Bearbeiten - Voreinstellungen -
Masseinheiten & Lineale

  • Lineale und Art auf Pixel stellen

Lineale einblenden

  • Ansicht - Lineale

mit dem Verschieben-Werkzeug (Pfeil) aus dem oberen und linken Lineal Hilfslinien ziehen und auf vorher bestimmte Layoutpositionen ziehen

  • z.B.: 100, 400 von oben
  • z.B.: 175, 800 von links
    Damit Spalten und Zeilen des Layouts auch später im HTML-Editor (Dreamweaver) exakt eingestellt werden können, müssen in der Photoshop-Layoutdatei die Masse mit Hilfe von Hilfslinien sichtbar sein. Für die Ausgabe der Website am Bildschirm benötigt man Pixelangaben und nicht mm oder cm.

Photoshop 3

Ebene für Hintergrund

Ebenenfenster einblenden (Fenster - Ebenen)

  1. im Ebenenfenster oben rechts kleines Dreieck drücken
  2. neue Ebene
  3. Ebenennamen: Farbe
    Für alle einzelnen Elemente (Texte, Logos, Farben, Bilder usw.) sollte eine separate Ebene gemacht werden. Die Hintergrundebene sollte leer bleiben.

Photoshop 4

Spraygrund

Mit Pinsel (im Werkzeugfenster rchts Mitte) und verschiedenen Vordergrundfarben einen Hintergrund sprayen. Für Spray Pinsel oben auf "Sprenkeln" stellen.

Photoshop 5

Logo schreiben
Effekte bestimmen

Logo schreiben

  1. Textwerkzeug wählen
  2. Logo schreiben
  3. ev. Schrift und Schriftfarbe anpassen
  4. Effektsysmbol anklicken
  5. Effekte bestimmen (z.B. Schlagschatten und Kontur)
  6. mit Verschiebenwerkzeug Logo an die gewünschte Position schieben

Photoshop 6

weitere Hilfslinien setzen

Fenster - Informationen einblenden
mit dem Verschieben-Werkzeug (Pfeil) aus dem oberen und linken Lineal Hilfslinien ziehen und auf Detail-Layoutpositionen ziehen. Ebenso für die Buttons der Navigation Hilfslinien ziehen (z.B. je Feld 20 x 155 Pixel)

Photoshop 7

Buttonhintergund zeichnen
Effekte bestimmen

Buttontexte schreiben
Buttontexte kopieren

Neue Ebene für Buttonhintergrund (Name Buttonhintergrund) Mit dem Auswahlrechteck Buttonfelder markieren.
In die mit den Hilfslinien vorbestimmten Felder als Buttonhintergrund Farbe füllen.
Effekte wie beim Logo für diese Ebene
Buttontext schreiben, Schrift anpassen und Text mit Verschiebenwerkzeug richtig plazieren

Photoshop 8

Buttontexte kopieren
mit Verschiebenwerkzeug an neuen
Button schieben
und Text anpassen

für jeden Button gibt es eine separate Textebene
Die Buttontextebenen sollten mit dem entsprechenden Namen versehen werden

Photoshop 9

Ganze Layoutdatei speichern
Buttonbereich separat speichern
Logobereich separat speichern

Freistellen:
Diese im Fotoshop produzierte Layout-Datei (Bild) dient dazu, die Erscheinung der Website nachher am Bildschirm während dem Design und der Produktion zu überblicken. Verwendet wird diess Bild als Ganzes nie. Es werden nur die einzelnen Bereiche als Bilder für das Internet (Website) gespeichert.
Das Speichern der einzelnen Bereiche geschieht mit folgenden Schritten:

  1. gewünschten Bereich mit dem Auswahlrechteck markieren
  2. Bild - freistellen
  3. Datei für Web speichern (es wird dann nur der gewählte Bereich als Bild für die Website gespeichert. dabei ist es wichtig, dieses Bild in den Webordner zu speichern!!)
  4. Protokoll - Schritt zurück (damit man wieder am ganzen Bild weiterarbeiten kann)

 

  1. Layoutdatei speichern (z.B. als Weblayout.psd)
  2. Mit dem Rechteckauswahlwerkzeug Logobereich bis zum oberen und linken Rand markieren
  3. Datei - freistellen und als Logo.psd speichern
  4. ebenso mit dem Navigationsbereich

Photoshop 10

Einzelne Teile für Web speichern

Das Logo in zwei Varianten für das Web speichern

  • Logo.psd öffnen
  • Datei für Web speichern
  • in den Bilderordner der Website speichern
    als logo_1.jpg
  • Textfarbe ändern
  • Datei für Web speichern
  • in den Bilderordner der Website speichern
    als logo_2.jpg

Photoshop 11

Navigation in mehreren Varianten speichern

navigation.psd öffnen

  1. erste Textebene anwählen
  2. Textwerkzeug wählen
  3. Textfarbe ändern

nun Datei für Web speichern z.B. als nav_1.jpg, mit allen Textebenen gleich verfahren

Photoshop 12

restliches Layout in Einzelteilen für das
Web speichern

  1. Mit Auswahlrechteck Bereich markieren
  2. Bild - freistellen
  3. Datei - für Web speichern (In den Bilderordner der Website)

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
  4. mittlere Zelle oben: Breite 625 Pixel, nmittlere 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)

Dreamweaver 8

Hotspots bestimmen

Rollover als Imagemap/Hotspot bestimmen

  1. Bild anklicken (Navigation)
  2. Bildnamen eingeben (navigation)
  3. im Eigenschaftsfenster Rechteckhotspotwerkzeug wählen
  4. Bereich markieren

Dreamweaver 9

Hotspots bestimmen

Hotspot verlinkern

  1. Pfeilwerkzeug im Eigenschaftsfenster anwählen
  2. gezeichneten Hotspot anwählen
  3. Link (Hyperlink) eingeben
    (immer ganzen Dateinamen oder Hyperlink eingeben)

Dreamweaver 10

Rollover auf Hotspot bestimmen

Verhalten auf Hotspot bestimmen

  1. Fenster - Verhalten einblenden
  2. auf + klicken und Bild-austauschen wählen
  3. Quelle (alternatives Bild) suchen und bestimmen

Dreamweaver 11

weitere Hotspots zeichnen und Hyperlinks wie auch Rollovers definieren