Kirsten Schulte Dreamweaver BOK-Veranstaltung des ZfS Seminar Internetpublishing

Internetpublishing :: Übersicht ::Seminarinhalte (c) Kirsten Schulte, 2 Projektablauf Technische Kenntnisse HTML CSS Photoshop Dreamweaver Das Internet1. Konzeption, Planung 2. Site Konzeption 3. Site Erstellung 4. Publikation und Marketing 5. Evaluation und Wartung Interface-Design Site-Design Page-Design Beta-Test

Internetpublishing :: Dreamweaver :: Grundlagen Über Dreamweaver Dreamweaver ist ein Web-Editor mit WYSYWIG- Oberfläche und der Möglichkeit gleichzeitig im Entwurf und im HTML-Quellcode zu arbeiten. Sie können Sites anlegen und organisieren und aus Dreamweaver heraus den gesamten Webauftritt veröffentlichen. Ehe Sie anfangen, den Webauftritt in Dreamweaver umzusetzen, sollte das Konzept, die Struktur und das Layout der Seiten feststehen (c) Kirsten Schulte, 3

Internetpublishing :: Dreamweaver ::Grundlagen Das Anwendungsfenster (c) Kirsten Schulte, 4

Internetpublishing :: Dreamweaver :: Grundlagen Sites anlegen und verwalten Der gesamte Webauftritte sollte in einem (lokalen) Ordner auf der Festplatte gespeichert sein. Dieser Ordner kann Unterordner haben, z.B. für die Bilder. Damit Sie aus Dreamweaver heraus leicht Zugriff auf die Site haben, legen Sie zunächst eine Site an, die auf den lokalen Ordner mit den Daten zeigt. Ist die Site fertig gestellt, dann wird der gesamte Webauftritt auf den Server des Internet Service Providers (ISP) übertragen. Man spricht vom Remote-Webserver (dem entfernten, also dem nicht lokalen Webserver). Die Übertragung (upload) können Sie aus Dreamweaver oder aus einem beliebigen FTP-Programm heraus tätigen (c) Kirsten Schulte, 5

Internetpublishing :: Dreamweaver :: Site-Verwaltung Aufgabe - Site für die Gedichte-Website anlegen 1. Haben Sie auf der Festplatte einen Ordner mit den Gedichten gespeichert? Holen Sie sich sonst alle Gedichte-Dateien vom gemeinsamen Laufwerk. 2. Wählen Sie das Menü SITES>NEUE SITE aus 3. Wechseln in das Register ERWEITERT. 4. Geben Sie als Site-Namen „Gedichte“ ein und wählen Sie die Adresse des lokalen Stammordners und des lokalen Standard-Bildordners. Ab sofort können Sie die Seiten der Gedichte-Site aus der Bedienfeldgruppe DATEI heraus öffnen und verwalten (c) Kirsten Schulte, 6

Internetpublishing :: Dreamweaver ::Seite erstellen Aufgabe: neue HTML-Datei (Seiten) erstellen Erstellen Sie eine neue Seite für die Gedichte Website: Wählen Sie das Menü DATEI>NEU und wählen Sie weiter „Einfache Seite“ und „HTML“ aus.Dreamweaver legt für Sie das Grundgerüst einer HTML-Datei an. Legen Sie zunächst den Seitentitel fest: MODIFIZIEREN>SEITENEIGENSCHAFTEN Kategorie: Titel/Kodierung. Geben Sie den Titel „Gedichte - Kaleko“ ein und wählen Sie als Kodierung „UTF8“ aus. Speichern Sie die Datei unter dem Namen „Kaleko“. Wenn Sie nichts anderes veranlassen, wird die Datei der aktuell geöffneten Site zugeordnet (c) Kirsten Schulte, 7

Internetpublishing :: Dreamweaver ::Grundlagen HTML-Dateien gestalten: Elemente einfügen Tippen Sie ihren Text im Entwurfsbereich des Fensters ein. Dreamweaver setzt den Text in HTML-Code um und maskiert auch die Sonderzeichen korrekt (ä -> ä). Elemente zur Textstrukturierung finden Sie in der Einfügeleiste - Bereich TEXT: Listen, Überschriften und Sonderzeichen. Links, Tabellen und Bilder finden Sie in der Einfügeleiste - Bereich ALLGEMEIN. Horizontale Linien und Meta-Tags finden Sie in der Einfügeleiste - Bereich HTML (c) Kirsten Schulte, 8

Internetpublishing :: Dreamweaver ::Grundlagen Eigenschaften der Elemente festlegen Wenn Sie ein Element markieren, dann können Sie im Eigenschafteninspektor die Eigenschaften festlegen. Achtung, nicht alles, was Möglich ist, sollte auch benutzt werden. Denken Sie daran, dass viele Formatierungseigenschaften besser über Stylesheets festgelegt werden können (c) Kirsten Schulte, 9

Internetpublishing :: Dreamweaver ::Grundlagen Aufgabe: ein Gedicht eingeben Geben Sie auf der eben erstellen Seite eine neues Gedicht ein. Schalten Sie dabei die geteilte Ansicht ein, und tippen Sie im Entwurf-Bereich. Geben Sie eine Überschrift ( ) ein: „Einmal sollte man...“ Geben Sie einen Absatz ein: Einmal sollte man seine Siebensachen fortrollen aus diesen glatten Geleisen. Man müsste sich aus dem Staube machen und früh am Morgen unbekannt verreisen. Absatzende: ENTER Zeilenumbruch: STRG + ENTER (c) Kirsten Schulte, 10

Internetpublishing :: Dreamweaver ::Stylesheets CSS-Regeln definieren - Vorüberlegungen Soll das neue Stylesheet nur für die aktuelle HTML- Seite oder für den gesamten Webauftritt Gültigkeit haben? -> Externe Datei oder Definition im - Bereich? Welche Art von Selektor wollen Sie wählen? Typ-Selektor (bezieht sich auf ein Tag) Klassen-Selektor (kann auf unterschiedliche Tags angewendet werden) Erweiterte: ID-Selektor oder Pseudo-Formate (c) Kirsten Schulte, 11

Internetpublishing :: Dreamweaver ::Stylesheets Aufgabe – Stylesheet für definieren (Type- Selektor) Klicken Sie in der Bedienfeldgruppe im Bereich CSS- Stile auf das Symbol mit dem +. Es wird ein Fenster angezeigt, in dem Sie den Speicherort und die Art des Selektors bestimmen können. Wählen Sie: im Listenfeld Tag:. Selektor-Typ: Tag Im Listenfeld Definieren: „Neue Stylesheet-Datei“ und geben Sie dann den Namen „stylegedichte“ als Namen der Stylesheet-Datei ein. Betätigen Sie mit ok. Sie werden dann auf ein weiteres Dialogfenster geleitet in dem Sie die Stil-Definitionen vornehmen können (c) Kirsten Schulte, 12

Internetpublishing :: Dreamweaver ::Stylesheets Aufgabe – Stylesheet für Klassenselektor.rotfett definieren Klicken Sie in der Bedienfeldgruppe im Bereich CSS- Stile auf das Symbol mit dem +. Es wird ein Fenster angezeigt, in dem Sie den Speicherort und die Art des Selektors bestimmen können. Wählen Sie: Name:.rotfett (Achtung, der Punkt ist verpflichtend) Selektor-Typ: Klasse Im Listenfeld Definieren: Wählen Sie die „stylegedichte.css“ aus Betätigen Sie mit Ok, dann werden Sie auf ein weiteres Dialogfenster geleitet in dem Sie die Stil-Definitionen vornehmen können (c) Kirsten Schulte, 13

Internetpublishing :: Dreamweaver :: Stylesheets Aufgabe – Stylesheet anwenden Haben Sie einen Stil als Typ-Selektor definiert (d.h. Stil-Definitionen für einen Tag erstellt), dann wird die Stil-Definition automatisch auf jeden Tag dieser Art (hier ) angewandt. Haben Sie einen Stil als Klassen-Selektor definiert (z.B..rotfett), dann müssen Sie den Stil dem gewünschten Element zuweisen, indem Sie es zunächst markieren und dann den gewünschten Stil im Eigenschafteninspektor auswählen. Markieren Sie „aus diesen glatten Geleisen“ und weisen Sie dem Text den Stil.rotfett zu (Eigenschafteninspektor) (c) Kirsten Schulte, 14

Internetpublishing :: Dreamweaver :: Stylesheets Aufgabe – externe Stylesheet-Datei anderen Seiten zuweisen Öffnen Sie die Datei „Benn.htm“ und weisen Sie ihr die „styegedichte.css“ Datei zu. Das geht so: Wählen Sie in der Bedienfeldgruppe „CSS-Stile“ den Befehl „Stylesheet anfügen“ (Text erscheint bei mouse_over über das Symbol) und wählen Sie die Datei „stylegedichte.css“ aus (c) Kirsten Schulte, 15

Internetpublishing :: Dreamweaver :: Formulare Formulare erstellen Wählen Sie zunächst in der Einfügeleiste den Bereich „Formular“ aus, dann stehen Ihnen die Befehle zur Gestaltung eines Menüs zur Verfügung. Alternative: Menü Einfügen>Formular. Als äußerer Rahmen für das Formular dient der Tag ….. Innerhalb dieses Rahmens wird das Formular aus Textfeldern, mehrzeiligen Textfeldern, Kontrollfeldern (=checkboxen) und Optionsgruppen gestaltet. Schauen Sie sich die Seite „kontakt.htm“ der Webhtml-Site auf der gemeinsamen Website als Beispiel an (c) Kirsten Schulte, 16

Internetpublishing :: Dreamweaver :: Formulare Versenden des Formulars Wenn das Formular abgeschickt werden soll, dann benötigen Sie natürlich auch eine Schaltfläche (einen Button, meistens mit der Aufschrift „senden“, „ok“ oä.), durch die der Betrachter das Senden veranlassen kann. Durch Anklicken der Senden-Schaltfläche wird die Aktion ausgelöst, die im Start-Tag des Formulars festgelegt wurde: Da diese Methode nicht sehr professionell ist, können Sie im Netz auch nach einem sogenannten Formmailer suchen, Bsp.: (c) Kirsten Schulte, 17

Internetpublishing :: Dreamweaver :: Seitenlayout-Vorlagen Seitenlayout-Vorlagen Dreamweaver stellt Ihnen einige vorgefertigte Layouts bzw. Teile von Layouts zur Verfügung, die Sie dann für Ihre Zwecke anpassen können. Wählen Sie dafür DATEI>NEU aus. Im Register ALLGEMEIN wählen Sie dann eine Vorlage aus. Für den Anfang eigenen sich die Kategorien „Seitendesign“ bzw. „Seitendesign (zugänglich)“. Schwieriger sind die vorgefertigten Layouts unter Seitendesign (CSS)“, da sie auf CSS-Techniken aufbauen, die im Seminar nicht besprochen werden (c) Kirsten Schulte, 18

Internetpublishing :: Dreamweaver :: Seitenlayout-Vorlagen Eigene Seitenlayout-Vorlage erstellen Wenn das Layout für Ihre Site fertig gestellt ist, dann können Sie sich auch eine eigene Seitenlayout-Vorlage erstellen, von der Sie dann die restlichen Seiten Ihrer Website „kopieren“. Gehen Sie so vor um die Vorlage zu erstellen: Erstellen Sie eine HTML-Seite, die nur die unveränderlichen Elemente ihrer Website enthält, also z.B. die zugrundeliegende Tabellenstruktur, das Logo, das Menü. Speichern Sie diese Seite als Vorlage und nennen Sie sie z.B. Vorlage oä. Kopieren Sie alle Folgeseiten von dieser Vorlage (c) Kirsten Schulte, 19

Internetpublishing :: Dreamweaver :: Site veröffentlichen Eine Site veröffentlichen - Upload Ehe Sie diesen Schritt vornehmen können müssen Sie eine Domain reserviert haben und einen Vertrag mit einem ISP (Internet Service Provider) abgeschlossen haben, der für Ihren Internetauftritt als Webhost fungiert. Auf den sogenannten Remote-Webserver des ISP müssen Sie jetzt alle Dateien (Bilder, CSS-Dateien, HTML-Dateien) hochladen. Die Ordnerstruktur Ihres Webauftritts muss dabei erhalten bleiben (c) Kirsten Schulte, 20

Internetpublishing :: Dreamweaver :: Site veröffentlichen Eine Site veröffentlichen - Upload Rufen Sie den Menüpunkt „SITE>SITES VERWALTEN“ auf. Markieren Sie die Site um die es geht, und wählen Sie „bearbeiten“ aus. Klicken Sie im Fenster Site-Definition die Registerkarte „ERWEITERT“ an und wählen Sie die Kategorie „REMOTE-INFORMATIONEN“ aus. Wählen Sie als Zugriffsart FTP. Geben Sie die folgenden Informationen ein, die Sie vom ISP erhalten haben: Adresse des FTP-Host den Anmeldenamen / User das Kennwort (c) Kirsten Schulte, 21