Post on 06-Apr-2015
Kirsten Schulte
Dreamweaver
BOK-Veranstaltung des ZfS
Seminar
Internetpublishing
Internetpublishing::Übersicht::Seminarinhalte
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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-DesignSite-DesignPage-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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
3
Internetpublishing::Dreamweaver::Grundlagen
Das Anwendungsfenster
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
5
Internetpublishing::Dreamweaver::Site-Verwaltung
Aufgabe - Site für die Gedichte-Website anlegen1. 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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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 (<h1>) 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
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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 <head>-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
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
11
Internetpublishing::Dreamweaver::Stylesheets
Aufgabe – Stylesheet für <h1> 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: <h1>. • 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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
13
Internetpublishing::Dreamweaver:: StylesheetsAufgabe – 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 <h1>) 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)
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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
<form>….</form>. 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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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: <form action="mailto:ich@ag.de" method="post" enctype="multipart/form-data" name="form1">
• Da diese Methode nicht sehr professionell ist, können Sie im Netz auch nach einem sogenannten Formmailer suchen, Bsp.: http://www.formmailer.com
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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.
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
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
28.05.14
(c) Kirsten Schulte, kirsten.schulte@gmail.com
21