Webdesign mit DreamWeaver. Rechenzentrum Universität Stuttgart Maria Vass

Transkript

1 Webdesign mit DreamWeaver Rechenzentrum Universität Stuttgart Maria Vass 1

2 Was ist Dreamweaver? DW ist ein profesionelles Programm zur Entwicklung und Verwaltung von Webpräsenzen (Sites) DW profitiert als erstes Webentwicklungsprogramm von den Fähigkeiten der neuesten Browsergeneration und macht es Entwicklern somit einfach, fortgeschrittene Funktionen wie Cascading Style Sheets und Dynamic HTML zu benutzen Arbeiten mit DreamWeaver 2

3 Was ist Dreamweaver? Das Programm verändert bestehenden HTML-Code nicht Fügt keine zusätzlichen Tags ein Generiert sauberen HTML-Code Arbeiten mit DreamWeaver 3

4 WYSYWIG-Editoren WYSIWYG ist ein Akronym für "What You See Is What You Get", d.h. wenn Sie Ihre Texte und Bilder etc. einfügen, sehen Sie diese schon im Editor ungefähr in der Formatierung, wie sie später auch im Browser erscheinen Arbeiten mit DreamWeaver 4

5 WYSYWIG-Editoren Einschränkungen: Warum trotzdem HTML lernen? Die Betonung oben lag auf "im wesentlichen". Denn auch der beste WYSIWYG-Editor wird an vielen Stellen nicht das tun, was Sie wollen, und dann hilft nichts außer dem Eingriff in den HTML-Code selbst, den Sie dazu natürlich lesen, verstehen und ändern können müssen. Sonst sind Sie schnell am Ende Ihres Web-Lateins. Hinzu kommt, daß gute WYSIWYG-Editoren sehr viele Funktionen, Menüpunkte und Optionen haben und damit ohne ein solides Grundverständnis nur schwer zu bedienen sind Arbeiten mit DreamWeaver 5

6 Elemente im Dreamweaver Bildschirm Dokument-Fenster: Hier ist das gerade bearbeitete Dokument sichtbar. Dieses Fenster besitzt eine Menüleiste für die Ausführung von Befehlen. Weitere Leisten können ein- und ausgeblendet werden (Befehl Ansicht/Symbolleisten) Arbeiten mit DreamWeaver 6

7 Arbeiten mit DreamWeaver 7

8 Elemente im Dreamweaver Bildschirm Arbeiten mit DreamWeaver 8

9 Das Eigenschaften-Fenster Das Eigenschaften-Fenster: ist Kontextabhängig. Es dient zur Formatierung eines markierten Elementes im Dokument-Fenster Arbeiten mit DreamWeaver 9

10 Elemente im Dreamweaver Bildschirm Das Bedienfeld EINFÜGEN: In diesem finden Sie in mehreren Registern verschiedene Schaltflächen, mit denen Sie auf schnelle und einfache Weise Objekte, z.b. Ebenen, Bilder, Multimedia-Elemente usw., in Ihre Seite einfügen können Arbeiten mit DreamWeaver 10

11 Elemente im Dreamweaver Bildschirm Bedienfelder: verschiedene Bedienfelder sind zu Gruppen zusammengefasst Über den Befehl "Fenster" steuern Sie, welche Fenster gezeigt und welche ausgeblendet werden Arbeiten mit DreamWeaver 11

12 Elemente im Dreamweaver Bildschirm Bedienfeld Verlauf: zeigt den Verlauf der bisherigen Arbeitsschritte Arbeiten mit DreamWeaver 12

13 Elemente im Dreamweaver Bildschirm Bedienfeld Design: CSS-Stile: koordiniert die Cascading Style Sheet-Modifikationen Mit dem Menü "Verhalten" ist es möglich, eine Vielzahl von Aktionen auszulösen. Das Ganze basiert in der Regel auf Java Script Arbeiten mit DreamWeaver 13

14 Elemente im Dreamweaver Bildschirm Das SITE-FENSTER bietet grundlegende Funktionen zur Dateiverwaltung an, wie z.b.verschieben und Löschen von Ordnern und verwaltet alle Elemente zur Veröffentlichung im Internet Arbeiten mit DreamWeaver 14

15 Elemente im Dreamweaver Bildschirm Der ZEITLEISTEN- INSPECTOR steuert die Animation von Bildern oder Ebenen Arbeiten mit DreamWeaver 15

16 Elemente im Dreamweaver Bildschirm Statusleiste: Tag Selektor; dieser zeigt die HTML-Tags an, die für die Markierung im Dokumentfenster gültig sind Statusleiste: Popup- Menü gewünschte Dokumentfenstergröße Arbeiten mit DreamWeaver 16

17 Elemente im Dreamweaver Bildschirm Rechts vom Popup-menü finden Sie die Angabe, wie groß die Web-Seite momentan ist und wie lang sie zum Herunterladen braucht Arbeiten mit DreamWeaver 17

18 Voreinstellungen in Dreamweaver Befehl Bearbeiten > Voreinstellungen Arbeiten mit DreamWeaver 18

19 Eine Web-Site erstellen Grundsätzliche Vorgehensweise Planen Sie zunächst den allgemeinen Aufbau der Site Erstellen Sie dann die Site, und bauen Sie die grundlegende Struktur der Site auf Erst danach erstellen Sie innerhalb der Site die einzelnen Seiten, die in der Site enthalten sein sollen Zum Schluß die gesamte Site auf einen Web-Server hochladen Arbeiten mit DreamWeaver 19

20 Die Site erstellen Man erstellt zuerst im Dateisystem einen Ordner, der als Stammordner für die Site dienen soll, und benennt ihn entsprechend Man wählt Site > Neue Site Site-Name: passende Name Im Feld LOKALER STAMMORDNER gibt man den vorhin erstellten Ordner an oder wählt es aus Ordner und Dateien erstellen Arbeiten mit DreamWeaver 20

21 Beispiel einer komplexen WebSite Arbeiten mit DreamWeaver 21

22 Wichtige Informationen im Kopfbereich hinzufügen Folgende Informationen sollten im Kopfbereich jeder Webseite enthalten sein: Titel des Dokuments Autor Schlüsselwörter und Beschreibung Arbeiten mit DreamWeaver 22

23 Titel hinzufügen Klicken Sie auf das Titelfeld in der Symbolleiste und geben Sie den Titel ein Arbeiten mit DreamWeaver 23

24 Meta-Anweisungen hinzufügen: Schüsselwörter und Beschreibung Wählen Sie den Befehl Einfügen > Head-Tags > Schlüsselwörter und geben Sie passende Schlüsselwörter ein (alternativ Bedienfeld Einfügen/Head) Wiederholen Sie den Vorgang mit dem Befehl Einfügen > Head-Tags > Beschreibung Arbeiten mit DreamWeaver 24

25 Meta-Anweisungen hinzufügen: Namen des Autors Wählen Sie den Befehl Einfügen > Head-Tags > Meta und tragen Sie in das Feld Wert die Bezeichnung "Author" und in das Feld Inhalt Ihren Namen ein Arbeiten mit DreamWeaver 25

26 Mit Text arbeiten In DW haben Sie verschiedene Möglichkeiten, Text einzufügen: Sie können Text direkt im Dokumentfenster eingeben, aus einem anderen Dokument importieren oder aus einem anderen Dokument kopieren und einfügen Sie haben verschiedene Möglichkeiten Text in einem DW Dokument zu formatieren Im Eigenschafteninspector können Sie Formatierungsoptionen für Schrift, Ausrichtung und Farbauswahl auswählen Arbeiten mit DreamWeaver 26

27 Mit Text arbeiten Wenn Sie für mehrere Dokumente einer Site den gleichen stil verwenden möchten können Sie ein Cascading Style Sheet einrichten und es mit Ihren Dokumenten verknüpfen Arbeiten mit DreamWeaver 27

28 Wichtig mit CSS formatieren und <font> Tag (für Schriftarten,-größen,-farben) nicht verwenden Viele Webgestalter verwenden zur Formatierung von Texten die Elemente <BASEFONT> und <FONT>, die Textgröße und farbe sowie Schriftart definieren. Seit 1997 gehören diese beiden Elemente nicht mehr zum HTML Standard und das W3C empfiehlt ausdrücklich, sie nicht zu verwenden, auch wenn HTML-Editoren und Browser sie weiterhin unterstützen. Damit Sie in Zukunft nicht eine umfangreiche Umstellung Ihres Codes einkalkulieren müssen, sollten Sie Tags wie zum Beispiel <font> nicht verwenden, sondern auf die zukunftssicheren CSS-Definitionen zurückgreifen. nur relative, keine absolute Schriftgröße festlegen Schriftgroesse niemals kleiner als 9pt Arbeiten mit DreamWeaver 28

29 Wichtig 2 Verzichten Sie auf den Einsatz des <BLINK> Tags. Erscheinende und wieder erlöschende Schrift erschwert die Orientierung auf dem Bildschirm und stört erheblich den Einsatz einer Vergrößerungssoftware. Die Information ist für Sehbehinderte meist nicht zu erkennen und macht das Ganze unnötig anstrengend. Seiten nicht fuer feste Aufloesung konzipieren, sondern skalierbar halten Kontrast zwischen Hintergrund und Schriftfarbe muss so gewaehlt werden, dass die Seiten gut lesbar sind Keine ungewollte Bildwiederholung (z.b. Hintergrundbilder, die nur 1024 Pixel breit sind, auf einem Browser mit 1280 Pixeln Breite dargestellt) Als Fonts sollten nur die gaengigen Standardfonts verwendet werden, die auf allen Rechnern/Systemen verfugbar sind. Wenn spezielle Fonts verwendet werden muessen, muessen sinnvolle Alternativfonts gewaehlt werden (mit CSS formatieren)! Text sollte wenn irgend moeglich nicht als Grafik dargestellt werden Eine Mindestaufloesung von 800 Pixeln Breite des Browserfensters kann angenommen werden (trotzdem Skalierbarkeit beachten - s.o.) Arbeiten mit DreamWeaver 29

30 Die Stilpalette - CSS-Stile Dreamweaver macht die Erstellung und Anwendung von Cascading Style Sheets(css) einfach. CSS ermöglicht dem Webdesigner ein großes Maß an Kontrolle über das Erscheinungsbild von Text und anderen Elementen. CSS erleichtern uns die Trennung von Form und Inhalt Sie können in einem einzigen Stylesheet die Formatierung für ein gesamtes Webprojekt definieren. Das hat den Vorteil, dass eine Schrift- oder Formatierungsänderung in nur dieser einen Stylesheet-Datei vorgenommen wird und die komplette Website mit allen dazugehörigen Dateien sofort aktualisiert werden kann. CSS werden von allen aktuellen Browsern verstanden (MS Internet Explorer und Netscape ab Version 4 verstehen zumindest. CSS Version 1) Arbeiten mit DreamWeaver 30

31 Die Stilpalette - CSS-Stile Es gibt 3 verschiedene Typen von Stilen: a. Benutzerdefinierter Stil (Klasse): Sie können sich hier einen eigenen Stil mit eigenem Namen anlegen. Dieser erscheint direkt in der CSS-Stile-Palette und wird von dort aus angewendet. Ein benutzerdefinierter Stil hat immer einen Punkt (.) am Anfang seines Namens. b. HTML-Tags sind vordefinierte Tags, wie z.b. "p" für "Absatz" oder "h1" für "Überschrift erster Ordnung". c. Mit dem CSS-Selektor können Sie Formate für Links definieren Arbeiten mit DreamWeaver 31

32 Im CSS-Stile Fenster Neuer Stil anfügen anklicken Die Stilpalette - CSS-Stile Tag: body >Definieren in (Neue Stylesheet-Datei) >OK Um Stile zu bearbeiten klicken Sie in der CSS-Stile-Palette auf das Icon "Stylesheet bearbeiten Arbeiten mit DreamWeaver 32

33 Die Stilpalette - CSS-Stile Arbeiten mit DreamWeaver 33

34 Die Stilpalette - CSS-Stile Weitere Klassen definieren Arbeiten mit DreamWeaver 34

35 Hinweise zu Dreamweaver: Sonderzeichen einfügen Wählen Sie den Befehl: Einfügen > Sonderzeichen > Weitere oder Bedienfeld Einfügen, Registerkarte Zeichen Wählen Sie das gewünschte Sonderzeichen aus der Tabelle aus. (s. Bild nächste Folie) Arbeiten mit DreamWeaver 35

36 Hinweise zu Dreamweaver: Sonderzeichen einfügen Arbeiten mit DreamWeaver 36

37 Hyperlinks Text markieren Im Eigenschafteninspector gibt man den gewünschten Hyperlink an Arbeiten mit DreamWeaver 37

38 Link erstellen Klicken Sie auf das Symbol für im Objekte Fenster Füllen Sie die Felder in der Dialogbox " Verknüpfung einfügen" aus Arbeiten mit DreamWeaver 38

39 Anker im Text einfügen Mit Ankern können Sie längere Seiten gut Strukturieren Arbeiten mit DreamWeaver 39

40 Flash Schaltflächen Arbeiten mit DreamWeaver 40

41 Bilder einfügen Arbeiten mit DreamWeaver 41

42 Tabellen einfügen Im Bedienfeld Einfügen auf Symbol für "Tabelle Einfügen" klicken Hier kann man die Tabelleneigenschaften definieren Arbeiten mit DreamWeaver 42

43 Tabelle zentrieren Arbeiten mit DreamWeaver 43

44 Tabellenbearbeitung Verbinden Sie Spalten, bzw. Zeilen damit die vorgegebene Struktur entsteht: Markieren Sie die Zellen, die Sie verbinden wollen und wählen Sie den Befehl Modifizieren > Tabelle > Zellen verbinden oder Klicken Sie mit der rechten Maustaste auf markierte Zellen und wählen Sie den Befehl Tabelle > Zellen verbinden Arbeiten mit DreamWeaver 44

45 Tabellen importieren Eine fertige Tabelle aus Microsoft Excel importieren:eine fertige Tabelle aus Microsoft Excel importieren: Tabellendaten, die in einer anderen Anwendung (wie z. B. Microsoft Excel) erstellt und in einem Textformat mit Trennzeichen (in dem die Elemente durch Tabulatoren, Kommata, Doppelpunkte, Strichpunkte oder andere voneinander getrennt sind) gespeichert wurden, können in Dreamweaver importiert und als Tabellen formatiert werden Arbeiten mit DreamWeaver 45

46 Tabellen importieren So importieren Sie Tabellendaten: Führen Sie einen der folgenden Schritte aus: Wählen Sie Datei > Importieren > Tabellendaten. Wählen Sie Einfügen > Tabellenobjekte > Tabellendaten importieren Arbeiten mit DreamWeaver 46

47 Word-HTML optimieren Datei > Importieren > Word-HTML im portieren Arbeiten mit DreamWeaver 47

48 Vorlagen erstellen Datei > als Vorlage speichern In der Datei bearbeitbaren Bereich markieren > rechte Maustaste > Neuer bearbeitbarer Bereich Oder Modifizieren > Vorlagen >Neuer bearbeitbarer Bereich Weitere Dateien durch Neu von Vorlage Eventuelle Änderungen müssen in der Vorlage gemacht werden Arbeiten mit DreamWeaver 48

49 Formulare Beispiel Arbeiten mit DreamWeaver 49

50 Formulare: Methode Get und Post Bei der GET Methode werden die Daten direkt an die URL-Seite angehängt Bei der POST Methode werden die Daten als extra Datenpaket übertragen Arbeiten mit DreamWeaver 50

51 Formulare Alle Formularelemente müssen sich innerhalb dieser gestrichelten Linie befinden. In das Textfeld AKTION geben Sie den URL zu dem CGI Skript auf dem Server ein, das die Informationen entgegennehmen soll, sobald Sie das Formular abschicken. Im Feld METHODE wählen Sie die gewünschte Methode zum versenden des Formulars. Sauber und gut aussehende Formulare -> mit Tabellen Arbeiten mit DreamWeaver 51

52 Formularüberprüfung Abschicken Button markieren Verhalten Formular überprüfen Arbeiten mit DreamWeaver 52

53 DHTML-Animationen mit Zeitleisten Werden mit Hilfe von Ebenen erstellt Ebene zeichnen Auf der Ebene Bild einfügen Ebene markieren und auf das erste Schlüsselbild im Zeitleistenfenster ziehen Letztes Schlüsselbild anklicken und die Ebene links verschieben Im Browser testen Beispiel Arbeiten mit DreamWeaver 53

54 Verhalten hinzufügen Arbeiten mit DreamWeaver 54

55 Ebenen ein-/ausblenden Beispiel, Beispiel 2 -Mitarbeiterliste mit Bildern Tabelle mit Mitarbeitern erstellen Ebenen erstellen und Bilder einfügen Namen markieren (hyperlink:#) Verhalten > + >Ebenen ein-/ausblenden Arbeiten mit DreamWeaver 55

56 Ebenen ziehen Beispiel Ebene ziehen (Quiz, Puzzle etc.) Ebene zeichnen,benennen > Text einfügen Zweite Ebene zeichnen 1. Ebene an die gewünschte endposition ziehen Text auf der 1.Ebene markieren, im Eigenschaftsfenster (Hyperlink) # setzen um zu aktivieren und das Verhalten: Ebene ziehen hinzufügen Ablageziel aufrufen und java-script:alert( das war spitze!);hinzufügen wenn abgelegt onmousedown auswählen Arbeiten mit DreamWeaver 56

57 Hinweise zu Dreamweaver: HTML-Code bearbeiten Klicken Sie auf Code Ansicht Anzeigen Wenn Sie einen externen Editor, wie HomeSite, verwenden wollen, klicken Sie auf die Schaltfläche "Externer Editor". Wenn Sie noch keinen externen Editor definiert haben, werden Sie jetzt dazu aufgefordert den Pfad zum Editor-Programm einzugeben Arbeiten mit DreamWeaver 57

58 Weitere Tools Links überprüfen: Site > Hyperlinks auf gesamter Site überprüfen Bearbeiten > Suchen und ersetzen Arbeiten mit DreamWeaver 58

59 Die Site ins Web laden Zum hochladen Ihrer Webseite ins Web über Ihren Provider können Sie entweder verschiedene FTP-Programme verwenden oder gleich über DW vorgehen Den Upload vorbereiten: prüfen Sie unter Windows, ob in der DFÜ- Verbindung die Option AM NETZWERK ANMELDEN aktiviert ist. Nur dann können Sie sich an einem FTP-Server anmelden. Wählen Sie Ihre Site aus, die Sie hochladen möchten Wählen Sie Bearbeiten->Voreinstellungen->Site Aktivieren Sie das Kontrollfeld FTP-VERBINDUNG wenn Sie möchten, dass nach einer Verbindung zum Server die Verbindung nach einer von Ihnen festgelegten Zeit getrennt werden soll.diesen Zeitraum geben Sie in das Feld TRENNEN NACH ein Arbeiten mit DreamWeaver 59

60 Die Site ins Web laden Im Eingabefeld FTP-ZEITÜBERSCHREITUNG geben Sie ein, nach wie viele Sekunden Sie eine Warnmeldung erhalten möchten, wenn eine Verbindung zum Server nicht herzustellen ist Ist Ihr Netz durch eine Firewall vom WWW abgeschirmt, geben Sie in das Feld FIREWALL-HOST die Adresse des Proxyservers an Im Textfeld FIREWALL-ANSCHLUSS legen Sie den Anschluss fest, über den die Verbindung zum FTP-Server aufgebaut werden soll. Die voreingestellte Wert 21 ist in den meisten Fällen richtig Arbeiten mit DreamWeaver 60

61 Die Site ins Web laden Klicken Sie nun auf die Schaltfläche SITES BEARBEITEN und wählen Sie die Website aus, die Sie übertragen möchten. Klicken Sie dann auf BEARBEITEN Wählen Sie im Dialogfenster SITE-DEFINITION für Name der Site das Register ERWEITERT und dann die Kategorie REMOTE-INFORMATIONEN Hier öffnen Sie das Listenfeld ZUGRIFF und wählen den eintrag FTP Tragen Sie in das Eingabefeld FTP-HOST den Namen des Hosts ein, auf den Sie Ihre Daten übetragen (dabei darf nicht nicht das Protokoll stehen, sondern es muss gleich die Adresse eingetragen werden Arbeiten mit DreamWeaver 61

62 Die Site ins Web laden Das Eingabefeld HOST-ORDNER kann im Allgemeinen leer bleiben. Denn normalerweise gewährt Ihnen der Provider ohnehin nur Zugriff auf Ihr eigenes Verzeichnis, das Sie durch die Eingabe von Benutzerkennung und Passwort automatisch ansteuern In das Feld ANMELDUNG geben Sie Ihre Benutzerkennung ein, in das Feld KENNWORT Ihr Passwort Ist der FTP-Server durch eine Firewall geschützt, müssen Sie noch das Kontrollfeld PASSIVEN FTP verwenden anklicken Bestätigen Sie mit OK, Fertig und noch einmal OK Arbeiten mit DreamWeaver 62

63 Die Site ins Web laden Der Upload: im Site Fenster wählen Sie REMOTE-ANSICHT Das Bedienfeld wird zweigeteilt dargestellt- rechts sehen Sie Ihre lokale Site, links werden Sie im nächsten Scritt die Dateistruktur Ihres Server-Platzes darstellen Klicken Sie auf die Schaltfläche STELLT VERBINDUNG ZUM ENTFERNTEN HOST HER Entweder wählen Sie die einzelnen Dateien aus, die sie hochladen möchten oder wenn Sie die gesamte Site hochladen möchten, klicken Sie auf die Schaltfläche DATEI(EN) BEREITSTELLEN Arbeiten mit DreamWeaver 63

64 Die Site ins Web laden Arbeiten mit DreamWeaver 64

65 Die Site ins Web laden Überprüfen: FENSTER -> ERGEBNISSE -> FTP-PROTOKOLL Abgleich zwischen lokaler und entfernter Site: im Site-Fenster Site markieren > Site > Synchronisieren Arbeiten mit DreamWeaver 65

66 Übung Siehe Blatt Arbeiten mit DreamWeaver 66