Download ppt - Kirsten Schulte Dreamweaver BOK-Veranstaltung des ZfS Seminar Internetpublishing

Kirsten Schulte

Dreamweaver

BOK-Veranstaltung des ZfS

Seminar

Internetpublishing

Internetpublishing::Übersicht::Seminarinhalte

28.05.14

(c) Kirsten Schulte, [email protected]

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


3

Internetpublishing::Dreamweaver::Grundlagen

Das Anwendungsfenster

28.05.14


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


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


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


7


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


8


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


9


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


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


11


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


12


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


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


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


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


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:[email protected]" 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


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


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


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


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


21