Webdesign mit Dreamweaver CS6 1 Was ist Dreamweaver CS6 Dreamweaver ist ein WYSIWYG-Editor WYSIWYG steht für what you see is what you get. Das bedeutet, dass das was man am Bildschirm sieht, dem Ergebnis im Browser (InternetExplorer, FireFox, Chrome) entspricht. 2 Grundlagen des Webdesigns Beim Erstellen einer Website sollte man unbedingt auf folgende Dinge achten: Der Benutzer soll durch die Seite geführt und nicht verwirrt werden Kurze Ladezeiten sind wichtig Auf der Startseite sollte sich kein zu langes Intro befinden (Skip-Intro) Grafiken für das Web optimieren (Auflösung 72 ppi, RGB-Modus) Funktionalität der Seite ist wichtiger als Design Besser kurze und aussagekräftige Texte (sollte es nicht anders gehen, kann z. B. ein PDF bereitgestellt werden) Corporate Design muss beachtet werden (Farben, Schriften, Abstände usw.) Weniger ist mehr! Standardschriften verwenden Auf Tipp- und Rechtschreibfehler achten Website in mehreren Browsern testen (WICHTIG) Die Browser (InternetExplorer, FireFox, Chrome, Safari, Opera ) stellen die Seiten manchmal unterschiedlich dar, da sie diverse Formatierungen unterschiedlich interpretieren. Klare und gut strukturierte Gestaltung Ulrike Voß Sandra Raubinger Seite 1
3 Ordnerstruktur Wenn man Websites erstellt, ist es wichtig, dass man auf die Dateinamen achtet. Wichtig ist dabei besonders, dass man keine Großbuchstaben, Umlaute, scharfes-s oder Sonderzeichen verwendet. Am Einfachsten ist es, wenn man alles klein schreibt und anstelle eines Leerraums einen Unterstrich verwendet. Dies gilt für Datei- und Ordnernamen gleichermaßen. Die Ordnerstruktur wird erst bei der Verlinkung der einzelnen Seiten wichtig. Ordnung und Struktur sind der Weg zum Erfolg. Meistens werden im Stammordner (Ordner indem sich die Website befindet z. B. Serien) weitere Ordner erstellt: css, images, js usw. sind nur einige Beispiele. 4 Arbeitsbereich in Dreamweaver 1 2 3 4 5 6 7 8 1 Anwendungsleiste 2 Dokumentsymbolleiste 3 Dokumentfenster 4 Arbeitsbereichsumschalter 5 Bedienfeldgruppen 6 Tag-Selektor 7 Eigenschafteninspektor 8 Bedienfeld CSS-Stile Ulrike Voß Sandra Raubinger Seite 2
5 Dokumentfenster Entwurfsansicht ist eine Entwurfsumgebung für grafisches Seitenlayout, grafisches Bearbeiten und schnelle Anwendungsentwicklung. In dieser Ansicht kann das Dokument in Dreamweaver vollständig bearbeitet werden und wird grafisch ähnlich der Darstellung in einem Browser angezeigt. Codeansicht ist eine Umgebung zum manuellen Verfassen und Bearbeiten von HTML, JavaScript und Serversprachencode, z. B. PHP. Geteilte Codeansicht ist eine geteilte Version der Codeansicht, in der Sie Bildläufe durchführen können, um gleichzeitig verschiedene Abschnitte eines Dokuments zu bearbeiten. 6 Site anlegen Zu Beginn jeder Website sollte man eine Site festlegen um alle Webseiten und Bilder besser organisieren zu können. Dabei wird der Websiteordner (z. B. serien) festgelegt. Alle darin enthaltenen Elemente (Bilder, Seiten, ) werden nach Fertigstellung im rechten Bereich angezeigt. Wichtig: Kontrollieren Sie unbedingt den Dateipfad und achten Sie darauf, dass beim Stammordner auch der letzte ausgewählte Ordner angeführt wird, da Dreamweaver diesen manchmal weglässt. 6.1 Ablauf Schritt 1: Schritt 2: Site Neue Site Sitename vergeben (z. B. Serien) Lokalen Site-Ordner wählen (Durchsuchen) Schritt 3: Speichern Fertig! Ulrike Voß Sandra Raubinger Seite 3
6.2 Bedienfeld Dateien Im Bedienfeld Dateien scheint nun die Site auf. Sollte man die zuvor eingestellten Einstellungen nochmals verändern wollen, dann klickt man auf das Drop-Down-Menü und wählt Sites verwalten aus. Wählen Sie nun die gewünschte Site aus und klicken Sie auf Bearbeiten. 7 HTML-Grundgerüst 7.1 Grundgerüst <!doctype html> <head> <meta charset="utf-8"> <title>meine Übungsseite</title> </head> <body> </body> </html> 7.2 Aufbau einer CSS-Regel Die Syntax (Schreibweise) einer CSS-Regel besteht aus dem Selektor (was wird formatiert) und der Deklaration (Eigenschaft Schriftgröße; Wert 1.2 em). Danach wir ein Strichpunkt gesetzt. Die geschwungenen Klammern darf man nicht vergessen. Beispiel: h1 { font-size: 1.2em; } 8 Symbolleisten 8.1 Dokumentsymbolleiste Die Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie schnell zwischen verschiedenen Ansichten des Dokuments wechseln können. Außerdem befinden sich auf der Symbolleiste einige häufig verwendete Befehle und Optionen zum Anzeigen und Übertragen von Dokumenten zwischen der lokalen Site und Remote-Sites. In der folgenden Abbildung ist die erweiterte Dokumentsymbolleiste dargestellt. Ulrike Voß Sandra Raubinger Seite 4
Ansichten wurde bereits erklärt Live-Ansicht zeigt eine nicht bearbeitbare, interaktive und browserbasierte Ansicht des Dokuments an. Dokumenttitel ermöglicht die Eingabe eines Titels für das Dokument, der in der Titelleiste des Browsers angezeigt wird Vorschau im Browser ermöglicht es, das Dokument im Browser als Vorschau anzuzeigen. Wählen Sie im Popupmenü einen Browser aus. Wichtig: Damit man eine HTML-Seite im Browser testen kann, muss sie zuvor gespeichert werden! 8.2 Statusleiste in der Entwurfsansicht 1 2 3 1 Tag-Selektor 2 Zoom 3 Fenstergröße Zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt auszuwählen, klicken Sie in der Hierarchie auf den Tag. Ermöglicht eine vergrößerte oder verkleinerte Darstellung des Dokuments. Mobilgeräte, Tablett, Bildschirmgröße, gesamte Fenstergröße Durch Klicken auf die einzelnen Symbole kann zwischen den einzelnen Fenstergrößen gewechselt werden. 8.3 Eigenschafteninspektor Im Eigenschafteninspektor können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. von Text oder eines eingefügten Objekts, anzeigen und ändern. Der Inhalt des Eigenschafteninspektors hängt vom ausgewählten Element ab. Wenn Sie beispielsweise ein Bild auf Ihrer Seite markieren, ändert sich die Anzeige des Eigenschafteninspektors, um die Eigenschaften des Bildes darzustellen (Dateipfad zum Bild, Breite, Höhe usw.). Eigenschafteninspektor bei einer Tabelle (Cursor steht in einer Zelle): Ulrike Voß Sandra Raubinger Seite 5
9 Metadaten Erklärung Die Metadaten werden im Kopf-Bereich eines HTML-Dokuments, also im head- Element, notiert. Metadaten sollen vor allem die Durchsuchbarkeit (Suchmaschinen) des World Wide Web bzw. einer einzelnen Webpräsenz verbessern. Einfügen von Metadaten Einfügen HTML Head-Tags Meta Bei Wert muss entweder description/author/keywords/robots stehen! Bei Inhalt fügt man je nach Wert den gewünschten Inhalt ein! 10 DIV-Boxen Um Divs einfügen zu können, wählen Sie Einfügen Layoutobjekte Div-Tag. Es ist wichtig, dass Sie darauf achten, wo Sie den Div-Tag einfügen! Unterschied Klasse und ID Klassen werden für Bereiche verwendet, die innerhalb einer einzelnen Seite mehrmals eingesetzt werden, wie z. B. Rahmen und margin um ein Bild herum. IDs hingegen werden verwendet, wenn dieser Bereich nur einmal auf der einzelnen Seite gebraucht wird, wie z. B. der Bereich Wrapper. Den Namen der Klasse oder ID können Sie selbstständig wählen. Achten Sie darauf, dass Sie diese später aber nochmals ansprechen müssen, daher darf der Name keine Umlaute oder Sonderzeichen enthalten und Sie sollten auch keine Großbuchstaben verwenden. Ulrike Voß Sandra Raubinger Seite 6
11 Bilder Um Bilder in der Website einfügen zu können, sollten die Bilder vorher in Photoshop bearbeitet werden (Auflösung 72 ppi, Größe, ). Speichern Sie nachdem Bearbeiten die Bilder immer in den Ordner images der jeweiligen Site! Bilder können wie folgt eingefügt werden: Einfügen Bild Bedienfeld Einfügen Allgemein Bild Bedienfeld Dateien Ordnerstruktur Ordner images Bild direkt an die Stelle ziehen, an der es eingefügt werden soll. Anschließend erscheint ein Dialogfeld, um den Alternativtext einfügen zu können. Tipp: Immer kurze Alternativtexte vergeben Barrierefreiheit! Image Maps (Hotspots) Möchte man ein Bild bzw. Teile eines Bildes verlinken, muss ein sogenannter Hotspot erstellt werden. Alle notwendigen Werkzeuge finden Sie im Eigenschafteninspektor. Markieren Sie mit einem passenden Hotspot-Werkzeug den Bereich eines Bildes, der verlinkt werden soll und vergessen Sie nicht im Eigenschafteninspektor die fehlenden Daten einzutragen. 12 Hyperlinks Hyperlinks sind Verknüpfungen und können drei verschiedene Ziele aufweisen: E-Mail interne Hyperlinks externe Hyperlinks Textmarken/Anker 12.1 Vorgangsweise Text eingeben, Text markieren und im Eigenschaftsinspektor unter Hyperlink das Ziel eingeben. Ulrike Voß Sandra Raubinger Seite 7
13 CSS Cascading Style Sheet 13.1 Neue CSS-Datei erstellen Über das Bedienfeld CSS-Stile erstellt man in Dreamweaver CSS-Dateien (intern oder extern). Um Zeit zu sparen, sollte man wie in HTML eine externe CSS-Datei erstellen, da man Änderungen nur einmal vornehmen muss und die Seiten automatisch aktualisiert werden. Klicken Sie im Bedienfeld CSS-Stile rechts unten auf das Plus. Je nachdem, was man im CSS formatieren möchte, muss man einen anderen Selektor wählen (ID, Klasse, Tag oder Zusammengesetzter Ausdruck = Link). Wählen Sie zum Beispiel ID, tragen Sie im Feld Selektor-Name wrapper ein (manchmal steht es auch schon da ) und unter Regel-Definition wählen Sie Neues Stylesheet-Datei aus. Vergeben Sie den Dateienamen styles und speichern Sie die CSS-Datei in einen eigenen Order CSS (Struktur!) Nach dem Speichern öffnet sich folgendes Dialogfenster, indem alle Einstellungen vorgenommen werden können: Ulrike Voß Sandra Raubinger Seite 8
Die erstellte CSS-Regel wird nun im Bedienfeld CSS-Stile angezeigt und kann durch einen Doppelklick bearbeitet werden. Möchte man weitere CSS-Regeln definieren, klickt man erneut auf das Plus. 13.2 Bestehende CSS-Datei verknüpfen Um eine bestehende CSS-Datei mit der HTML-Datei zu verknüpfen, klickt man auf das Kettensymbol und wählt die gewünschte CSS-Datei aus. 14 Anker Ankerpunkte, auch Textmarken genannt, sind Punkte, die man bei längeren Texten setzt, damit man dem User eine schnelle und bequeme Navigation auf der Seite ermöglicht. Der User kann mittels Klick zu jedem beliebigen Ankerpunkt springen, nach unten, nach oben oder zu jeder beliebigen Überschrift vorausgesetzt es sind Ankerpunkte gesetzt. Man beginnt damit, dass man überall im Dokument Ankerpunkte setzt, also Punkte, die man später wieder anpeilen möchte. Dafür stellt man sich vor die gewünschte Textstelle (z. B. Seitenanfang) und fügt einen Ankerpunkt unter Einfügen Benannter Ankerpunkt ein. Hierbei erscheint das folgende Dialogfeld: Tipp: Verwende immer KURZE Namen (ohne Leerraum, Großschreibung, )! Dort, wo ein Anker gesetzt wurde, erscheint das folgende Symbol: Um einen Anker anpeilen zu können, geht man wie folgt vor: Schritt 1: Schritt 2: Gewünschten Text (Link) markieren Eigenschafteninspektor Hyperlink - #name eintragen (name = Name des Ankerpunktes) Wichtig: Hashtag nicht vergessen!!! Ulrike Voß Sandra Raubinger Seite 9