Kirsten Schulte Dreamweaver BOK-Veranstaltung des ZfS Seminar Internetpublishing.

  • Published on
    06-Apr-2015

  • View
    103

  • Download
    0

Embed Size (px)

Transcript

  • Folie 1
  • Kirsten Schulte Dreamweaver BOK-Veranstaltung des ZfS Seminar Internetpublishing
  • Folie 2
  • 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-Design Site-Design Page-Design Beta-Test
  • Folie 3
  • Internetpublishing :: Dreamweaver :: Grundlagen ber Dreamweaver Dreamweaver ist ein Web-Editor mit WYSYWIG- Oberflche und der Mglichkeit gleichzeitig im Entwurf und im HTML-Quellcode zu arbeiten. Sie knnen Sites anlegen und organisieren und aus Dreamweaver heraus den gesamten Webauftritt verffentlichen. 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
  • Folie 4
  • Internetpublishing :: Dreamweaver ::Grundlagen Das Anwendungsfenster 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 4
  • Folie 5
  • 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. fr die Bilder. Damit Sie aus Dreamweaver heraus leicht Zugriff auf die Site haben, legen Sie zunchst 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) knnen Sie aus Dreamweaver oder aus einem beliebigen FTP-Programm heraus ttigen. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 5
  • Folie 6
  • Internetpublishing :: Dreamweaver :: Site-Verwaltung Aufgabe - Site fr 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. Whlen Sie das Men SITES>NEUE SITE aus 3. Wechseln in das Register ERWEITERT. 4. Geben Sie als Site-Namen Gedichte ein und whlen Sie die Adresse des lokalen Stammordners und des lokalen Standard-Bildordners. Ab sofort knnen 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
  • Folie 7
  • Internetpublishing :: Dreamweaver ::Seite erstellen Aufgabe: neue HTML-Datei (Seiten) erstellen Erstellen Sie eine neue Seite fr die Gedichte Website: Whlen Sie das Men DATEI>NEU und whlen Sie weiter Einfache Seite und HTML aus.Dreamweaver legt fr Sie das Grundgerst einer HTML-Datei an. Legen Sie zunchst den Seitentitel fest: MODIFIZIEREN>SEITENEIGENSCHAFTEN Kategorie: Titel/Kodierung. Geben Sie den Titel Gedichte - Kaleko ein und whlen Sie als Kodierung UTF8 aus. Speichern Sie die Datei unter dem Namen Kaleko. Wenn Sie nichts anderes veranlassen, wird die Datei der aktuell geffneten Site zugeordnet. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 7
  • Folie 8
  • Internetpublishing :: Dreamweaver ::Grundlagen HTML-Dateien gestalten: Elemente einfgen 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 Einfgeleiste - Bereich TEXT: Listen, berschriften und Sonderzeichen. Links, Tabellen und Bilder finden Sie in der Einfgeleiste - Bereich ALLGEMEIN. Horizontale Linien und Meta-Tags finden Sie in der Einfgeleiste - Bereich HTML 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 8
  • Folie 9
  • Internetpublishing :: Dreamweaver ::Grundlagen Eigenschaften der Elemente festlegen Wenn Sie ein Element markieren, dann knnen Sie im Eigenschafteninspektor die Eigenschaften festlegen. Achtung, nicht alles, was Mglich ist, sollte auch benutzt werden. Denken Sie daran, dass viele Formatierungseigenschaften besser ber Stylesheets festgelegt werden knnen. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 9
  • Folie 10
  • 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 msste sich aus dem Staube machen und frh am Morgen unbekannt verreisen. Absatzende: ENTER Zeilenumbruch: STRG + ENTER 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 10
  • Folie 11
  • Internetpublishing :: Dreamweaver ::Stylesheets CSS-Regeln definieren - Vorberlegungen Soll das neue Stylesheet nur fr die aktuelle HTML- Seite oder fr den gesamten Webauftritt Gltigkeit haben? -> Externe Datei oder Definition im - Bereich? Welche Art von Selektor wollen Sie whlen? 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
  • Folie 12
  • Internetpublishing :: Dreamweaver ::Stylesheets Aufgabe Stylesheet fr 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 knnen. Whlen 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. Bettigen Sie mit ok. Sie werden dann auf ein weiteres Dialogfenster geleitet in dem Sie die Stil-Definitionen vornehmen knnen. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 12
  • Folie 13
  • Internetpublishing :: Dreamweaver ::Stylesheets Aufgabe Stylesheet fr 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 knnen. Whlen Sie: Name:.rotfett (Achtung, der Punkt ist verpflichtend) Selektor-Typ: Klasse Im Listenfeld Definieren: Whlen Sie die stylegedichte.css aus Bettigen Sie mit Ok, dann werden Sie auf ein weiteres Dialogfenster geleitet in dem Sie die Stil-Definitionen vornehmen knnen. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 13
  • Folie 14
  • Internetpublishing :: Dreamweaver :: Stylesheets Aufgabe Stylesheet anwenden Haben Sie einen Stil als Typ-Selektor definiert (d.h. Stil-Definitionen fr 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 mssen Sie den Stil dem gewnschten Element zuweisen, indem Sie es zunchst markieren und dann den gewnschten Stil im Eigenschafteninspektor auswhlen. 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
  • Folie 15
  • 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: Whlen Sie in der Bedienfeldgruppe CSS-Stile den Befehl Stylesheet anfgen (Text erscheint bei mouse_over ber das Symbol) und whlen Sie die Datei stylegedichte.css aus 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 15
  • Folie 16
  • Internetpublishing :: Dreamweaver :: Formulare Formulare erstellen Whlen Sie zunchst in der Einfgeleiste den Bereich Formular aus, dann stehen Ihnen die Befehle zur Gestaltung eines Mens zur Verfgung. Alternative: Men Einfgen>Formular. Als uerer Rahmen fr 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. 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 16
  • Folie 17
  • Internetpublishing :: Dreamweaver :: Formulare Versenden des Formulars Wenn das Formular abgeschickt werden soll, dann bentigen Sie natrlich auch eine Schaltflche (einen Button, meistens mit der Aufschrift senden, ok o.), durch die der Betrachter das Senden veranlassen kann. Durch Anklicken der Senden-Schaltflche wird die Aktion ausgelst, die im Start-Tag des Formulars festgelegt wurde: Da diese Methode nicht sehr professionell ist, knnen Sie im Netz auch nach einem sogenannten Formmailer suchen, Bsp.: http://www.formmailer.comhttp://www.formmailer.com 28.05.14 (c) Kirsten Schulte, kirsten.schulte@gmail.com 17
  • Folie 18
  • Internetpublishing :: Dreamweaver :: Seitenlayout-Vorlagen Seitenlayout-Vorlagen Dreamweaver stellt Ihnen einige vorgefertigte Layouts bzw. Teile von Layouts zur Verfgung, die Sie dann fr Ihre Zwecke anpassen knnen. Whlen Sie dafr DATEI>NEU aus. Im Register ALLGEMEIN whlen Sie dann eine Vorlage aus. Fr den Anfang eigenen sich die Kategorien Seitendesign bzw. Seitendesign (zugnglich). 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
  • Folie 19
  • Internetpublishing :: Dreamweaver :: Seitenlayout-Vorlagen Eigene Seitenlayout-Vorlage erstellen Wenn das Layout fr Ihre Site fertig gestellt ist, dann knnen 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 unvernderlichen Elemente ihrer Website enthlt, 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
  • Folie 20
  • Internetpublishing :: Dreamweaver :: Site verffentlichen Eine Site verffentlichen - Upload Ehe Sie diesen Schritt vornehmen knnen mssen Sie eine Domain reserviert haben und einen Vertrag mit einem ISP (Internet Service Provider) abgeschlossen haben, der fr Ihren Internetauftritt als Webhost fungiert. Auf den sogenannten Remote-Webserver des ISP mssen 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
  • Folie 21
  • Internetpublishing :: Dreamweaver :: Site verffentlichen Eine Site verffentlichen - Upload Rufen Sie den Menpunkt SITE>SITES VERWALTEN auf. Markieren Sie die Site um die es geht, und whlen Sie bearbeiten aus. Klicken Sie im Fenster Site-Definition die Registerkarte ERWEITERT an und whlen Sie die Kategorie REMOTE-INFORMATIONEN aus. Whlen 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

Recommended

View more >