Zusammengestellt für den Fachbereich Visuelle Kommunikation Robert Bossart, Dipl. Visueller Gestalter FH. Überarbeitete Version HSLU Februar 2013

Transkript

1 1 Grundlagen und Programmeinführung Internet/Html/Dreamweaver HANDBUCH ZU INTERNET-GRUNDLAGEN UND DREAMWEAVER / HTML / CSS Grundlagen und Programmeinführungen für Visuelle GestalterInnen Begleitdokumentation zum Unterricht Mit Website-Anwendungsbeispiel Zusammengestellt für den Fachbereich Visuelle Kommunikation Robert Bossart, Dipl. Visueller Gestalter FH Überarbeitete Version HSLU Februar 2013 Die männliche Bezeichnung einer Person oder Funktion schliesst in den folgenden Inhalten auch dieweibliche mit ein.

2 2 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Inhaltsverzeichnis Inhaltsverzeichnis 1 Geschichte und Idee Internet (3) 2 Dreamweaver Übersicht (4) 3 Website-Beispiel mit Dreamweaver/CSS schrittweise aufbauen (5 22) Anhang 4 Browservorschau (23) 5 Code, Teilen, Entwurf (23, 24) 6 Bilformate jpg, gif, png (24) 11 Domain, DNS (Domain Name Server), Provider, Hosting, index.html (28) 12 Metatext und Favicon (28) 13 FTP File Transfer Protocol (29) 7 Photoshop-Bilder für Web speichern (24, 25) 8 Flash- und Bildimport (25) 9 Typografie (26, 27) 10 Farbe (27)

3 3 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Geschichte und Idee Internet 1 Geschichte und Idee Internet Ausgangspunkt ist das 1969 entwickelte ARPA-Net (Advanced Research Project Agency) des US Verteidigungsministeriums. Es wurde zur Vernetzung von Universitäten und Forschungseinrichtungen benutzt. Ziel des Projekts war zunächst, die knappen Rechenkapazitäten sinnvoll zu nutzen, zuerst in den USA, später weltweit. Die anfängliche Verbreitung des Internets ist eng mit der Entwicklung des Betriebssystems Unix verbunden. Nachdem das Arpa - net im Jahr 1982 TCP/IP adaptierte, begann sich auch der Name Internet durchzusetzen. Nach einer weit verbreiteten Legende bestand das ursprüngliche Ziel des Projektes vor dem Hintergrund des Kalten Krieges in der Schaffung eines verteilten Kommunikationssystems, um im Falle eines Atomkrieges eine störungsfreie Kommunikation zu ermöglichen. In Wirklichkeit wurden vorwiegend zivile Projekte gefördert, auch wenn die ersten Knoten von der ARPA finanziert wurden. Das World Wide Web (www) wird 1989 von Tim Berners-Lee am CERN-Institut in Genf iniziert. Tim Berners-Lee kann man also als Erfinder des Internets bezeichnen. Das CERN-Institut in Genf ist das weltgrösste Elementarteilchen- Beschleunigungslabor. Hier werden auf einer mehreren kilometerlangen, unterirdischen Bahn Protonen, Elektronen und andere Elementarteilchen beschleunigt und zur Kollision gebracht. Dadurch entstehen neue Teilchenkombinationen. Für die Auswertung der Flugbahnen werden Grossrechner mit enormen Rechenleistungen benötigt. Quasi als Nebenprodukt hat Berners-Lee das World Wide Web entwickelt, mit der Absicht ein Netzerk für die Datenkommunikation zu entwickeln. Heute wird am CERN intensiv am World Wide Grid entwickelt und geforscht, einem Netzwerk für verteilte Rechenleistung. Der Austausch und Zugriff von Daten war zuerst also auf interne Netze beschränkt und fokusierte sich auf reine Textdaten. Man hat aber schnell erkannt, dass die Welt überall durch ein Telefonnetz erschlossen ist und dieses Netz zum Transport der Daten genutzt werden konnte. Es brauchte dazu nur ein Modem. Im Jahr 2000 wird das Internet in den USA von der Hälfte der Bevölkerung genutzt, weltweit haben aber erst 5% der gesamten Bvölkerung Zugang haben weltweit ca. 16.9% der Bevölkerung einen Internetzugang. Hypertext, Html, Http Mit der Beschränkung auf den Austausch von Textdaten in frühen www s gab es lediglich die geniale Hypertextverknüpfung. Das waren Stichwörter, welche blau ausgezeichnet und unterstrichen waren. Wir kennen das heute noch, finden wir doch über solche Links weitere Angaben zu den entsprechenden Begriffen und Themen. Zum Transport von Webinhalten wurde HTTP, das Hyper Text Transfer Protocol definiert, zur Erstellung von Webpages HTML, die Hyper Text Markup Language. Diese Protokolle waren ursprünglich für reine Textdateien gedacht. Mit dem späteren Einzug der Bildwelten in Hyper Text ergaben sich zunehmend Probleme, welche wir heute noch wahrnehmen können. Das Platzieren von Bildern und Grafiken ist nicht so einfach wie in einem Grafiklayout-Programm zu bewerkstelligen. Die freie Schriftwahl ist stark eingeschränkt und war bei der Entwicklung unbedeutend. Um bestimmte Elemente an bestimmte Positionen zu bewegen, muss man sich einiger Ticks bedienen, welche heute mehrheitlich die grafischen Webeditoren übernehmen (Dreamweaver). Urprünglich gab es solche Tools nicht und der HTML-Code musste in Texteditoren geschrieben werden. Bis heute bedarf es meist einiger Anstrengungen, bis garantiert werden kann, dass eine Website auch auf allen Betriebssystemen und mit allen gängigen Webbrowsern funktioniert und so aussieht, wie sie aussehen soll. Die komplexen Webinhalte werden immer noch auf Basis des HTTP/ HTML-Protokolls erstellt und generieren mit den heutigen Ansprüchen komplexen Code im Hintergrund. W3C-Konsortium Tim Berners Lee wurde nach der Erfindung des Webs Direktor des World Wide Web Consortium ( Diese Postition hat er bis heute behalten. Das W3C-Konsortium legt die Standards für das Internet fest. Formate wie PDF, CSS und viele, viele mehr werden und wurden vom W3C als Standard festgelegt. Heute beantragen viele Firmen neue Formate welche sie als Standard durchsetzen möchten, dazu ist die Anerkennung durch das W3C äusserst wichtig und hilfreich. Anerkennt das W3C diese Formate nicht, sind sie quasi schon wieder vom Tisch, da bei der Entwicklung von Browsern auf die W3C-Standards zurückgegriffen wird. Heute können Websites über das W3C validiert werden, d.h. man überprüft, ob eine erstellte Website den Vorgaben und Richtlinien des W3C entspricht und somit auch mit den entsprechenden Browsern kompatibel ist. HTML-Editoren / Dreamweaver / WYSIWYG Die Hyper Text Markup Language ist geblieben, dazugesellt haben sich, Java Script und Flash. HTML hat sich weiterentwickelt, XHTML ist definiert worden, CSS (Cascading Style Sheets) erleichtern die Arbeit, HTML 5 und CSS3 sind startbereit und lösen Flash ab, etc. Grundsätzlich arbeiten wir aber heute immer noch auf der Ursprungsbasis. Allerdings wurden grafische Editoren entwickelt, welche es auch den Gestaltern möglich macht, einfacher Websites in HTML zu erstellen. Im professionellen Bereich waren diese Applikationen lange Zeit Adobe GoLive und Macromedia Dreamweaver. Durch den Kauf von Macromedia durch Adobe, haben diese GoLive zugunsten von Dreamweaver aufgegeben. Heute ist es somit praktisch das einzige professionelle HTML Graifktool. Wir nennen es auch WYSIWYG-Editor, was soviel heisst, wie What You See Is What You Get. Die nächste Generation Editoren (Adobe Muse) stehen aber schon vor der Tür und werden die Arbeit auf einer grafischen Oberfläche weiter vereinfachen. Allerdings ist es oft hilfreich, den Code einer Website mindestens grob interpretieren zu können. Steht dieser Code doch auch allen Usern über die Webbrowser zur Verfügung. Durch Copy/Paste und Wertanpassungen können bestehende Websites oft als Vorlage und Lehrstück für eigene Sites gute Dienste leisten. Der Code liegt also quasi offen. Quelltextausschnitt der W3C-Site:

4 4 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Dreamweaver Übersicht 2 Dreamweaver Übersicht Sämtliche Paletten können über das Menü, >Fenster aufgerufen werden. Profil Einfügen (Bild-, Flashimporte, Layoutdarstellungen, Frames, Formulare, Rolloverbilder, Navigationsleisten, etc.), Arbeitsbereich Klassisch Erweiterungspaletten (Style-Sheets, Ebenen Java Scripts, etc.) Dateibrowser HTML-Dokument (mit Darstellungsoptionen- Werkzugen) Eigenschaften (enthält je nach ausgewähltem Objekt die wichtigsten Infos und Einstellmöglichkeiten bereit)

5 5 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 3 Website-Beispiel mit Dreamweaver/CSS schrittweise aufbauen Auf den folgenden Seiten wird schrittweise und exemplarisch der Aufbau einer ganzen Website in Dreamweaver mit CSS aufgezeigt. Diese Abschnitte dienen als praktisches Anwendungsbeispiel. 01 Datenablage konsistent vorbereiten/einrichten In einem ersten Schritt legen wir uns einen sinnvoll aufgeteilten Projektordner an, denn nicht alle bearbeiteten und erstellten Dateien müssen am Schluss auf den Server geladen werden. Wir erstellen einen Projektordner mit folgenden Unerordnern: > Projektordner >AI (Adobe Illustrator-Dateien) >BU(Back Up) >FLA (Flash-Dateien) >Original Bilder > PNG_GIF_JPG >PSD (Photoshop-Dateien) >Upload (wird auf den Server geladen) >Webfonts 02 Site-Verwaltung in Dreamweaver CS6 (DW) >Site >Neue Site... Name der Site Pfad angeben Achtung: Keine Umlaute und Sonderzeichen Angaben zu Server-Verbindung wie in Cyberduck oder anderem FTP-App Neue Serververbindung einrichten weitere Attribute (z.b. neu Webfonts einbinden)

6 6 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Verbindung zum entfernten Host Datenänderung/Links aktualisieren Projektauswahl Daten vom Server/Remote holen Daten auf den Server/Remote laden Lokal- oder Server-Anzeige Einblenden lokale Site und Remote-Site gleichzeitig (siehe unten rechts) Mein Projekt Zustand der Serververbindung

7 7 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 03 Site verwalten >Site >Sites verwalten... Wird dieses Fenster geöffnet, erscheinen alle angelegten Projekte zur Auswahl. Nun kann ein Projekt markiert werden, über den Stiftbutton können die Einstellungen von Seite 21/Punkt 02 bearbeitet oder ergänzt werden. Das about_us.html -File liegt somit im Ordner about_us und dieser wiederum in unserem Projektordner. Wir können durch Drag n Drop Ordner und Html-Files verschieben/ verschachteln, DW erkennt diesen Vorgang und fragt automatisch nach einer Aktualisierung der neuen Pfadverknüpfung. Wir legen folgende Struktur an: d) 2 Spalten, elastisch, linke Randseite, Header und Footer e) 2 Spalten, elastisch, rechte Randseite, Header und Footer etc. 04 Map und html-files anlegen Durch Rechtsklick auf unseren Projektordner in der Dateiverwaltung können.html-files wie auch neue Ordner angelegt werden. Neue Datei Neuer Ordner Die Files und Ordner müssen mit Kleinbuchstaben benannt werden, ohne Wortabstände und ohne Sonderzeichen. Es empfiehlt sich, vor Beginn der DW-Arbeit eine Sitemap oder eine Websitestruktur zurechtzulegen, um eine Übersicht zu erhalten, welche Ordner und Files benötigt werden. In unserem Projektordner oder Hauptverzeichnis benötigen wir das index.html Dokument. Nach diesem File wird beim Aufruf der Website automatisch gesucht. Dieses Dokument darf im Gegensatz zu weiteren Html s nicht in einen anderen Ordner gelegt werden. Die Strukturen sehen somit wie folgt aus, z.b.: 05 Vorgefertigte Layouts in DW verwenden Im Moment haben wir nur leere Html-Dokumente angelegt. Klicken wir doppelt auf index.html finden wir darin nichts. Es besteht nun die Möglichkeit, ohne eigene CSS-Regeln Layouts anzulegen: >Datei >Neu >HTML Nun können wir aus verschiedenen vorgegebenen Layouts auswählen, z.b.: a) 1 Spalte, elastisch, zentriert b) 1 Spalte, fixiert, zentriert c) 2 Spalten, elastisch, linke Randseite

8 8 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Eine Klasse kann mit Doppelklick geöffnet und geändert werden: Wir wählen die klassiche Variante d aus, mit Header, Navi Left, Content right und Footer. Unten rechts wählen wir den Dokumententyp Doc Type XHTML Transitional oder HTML 5 und unter Layout CSS in stehen folgende Varianten zur Verfügung: in die Seite einbetten, im Head : alle CSS-Regeln werden im Dokumenten-Head eingebettet Neue Datei erstellen : empfohlen! Ein neues CSS-Dokument wird in meinem Projektordner angelegt, der Titel benennt die Layoutform. Dieses File erscheint im Dateibrowser im Projektordner auf der index-ebene. Die Site wird nun automatisch von DW mit Blindtext gefüllt. Wechseln wir zur CSS-Stil-Palette, finden wir dort unser CSS-File, klappen wir den Pfeil vor dem Namen auf, werden sämtlich verwendeten CSS-Klassen sichtbar. Eine andere Möglichkeit ist im Dateibrowser das CSS-File twocolelslthdr.css mit Doppelklick zu öffnen. Nun sehen wir das CSS als Code. DW kommentiert dabei mit grauer Schrift die Regeln. Hier kann direkt in den CSS-Code eingegriffen werden.

9 9 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 06 Eigene CSS in DW anlegen Klicken wir auf das index.html -Dokument, sehen wir, dass noch keine Inhalte angelegt wurden oder CSS-Regeln festgelegt sind (bereits oben ausgewählte Layouts und Regelen müssen wieder gelöscht werden). Wir möchten nun ein Layout mit folgenden Komponenten erstellen: Header on the top Navigation on the left Information/Content on the right Footer on the bottom Dazu wechseln wir zur CSS-Stile -Palette und klicken unten rechts den Button Neue CSS-Regel: DW füllt dabei automatisch links oben in der entsprechenden Box einen Text ein, dieser kann gelöscht werden. Nun stehen in einem Dialogfenster folgende CSS-Regel-Typen zur Auswahl: Klasse: kann auf beliebige HTML-Elemente angewendet werden ID: kann jeweils nur auf ein HTML-Element angewendet werden Tag: definiert ein bestimmtes HTML-Element neu Zusammengesetzter Ausdruck: Wird auf eine von mir bestimmte Auswahl angewendet Wir wählen ID aus, um einen bestimmten Bereich mit spezifischen Qualitäten der Website zu bearbeiten. Wir vergeben einen Namen: container (dieser ist wichtig und beinhaltet alle anderen Bereiche) Weitere Einstellungen: Neue Style Sheet Datei (wird als CSS separat gespeichert) Wir vergeben einen sinnvollen Namen, z.b. example_site.css Anschliessend werden im neuen Dialogfeld unter Box folgende Einstellungen vorgenommen: Width: 800 px (Breite) Height: 800 px (Höhe) Float: left (Positionierung) Bis jetzt hat sich in unserem index.html aber noch nichts geändert. Das hat damit zu tun, dass die CSS-ID-Regel noch nicht zugwiesen ist. >Einfügen >Layoutobjekte >Div-Tag Insert DivTag-Fenster öffnet sich, Klasse oder ID zuweisen. Wir weisen unter ID im rechten Dropdownmenü unseren vorhin angelegten CSS-Stil container aus. Ok und der Container wird im index.html Dokument angelegt. Um eine bessere Übersicht zu erhalten, kann am rechten, unteren Fensterrand auf die Lupe gewechselt werden. Mit gedrückter Alt- Taste verkleinert die Lupe die Ansicht. Wir haben nun einen Gesamtcontainer angelegt, der alle anderen Bereiche umfasst. Darin wollen wir nun als nächstes den Header anlegen: Click in den soeben angelegten Container! unten links: >Einfügen >Layoutobjekte >Div-Tag Dialogfenster Div-Tag einfügen : bei ID manuell header eingeben darunter Neue CSS-Regel auswählen Neue Regel unserem bestehenden CSS, z.b. example_site.css anfügen, Ok.

10 10 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Wir kehren zum Div-Tag Fenster zurück. Bei ID steht nur header zur Auswahl, da ID s nur einmal auf ein Objekt angewendet werden können. Container haben wir bereits vorhin zugewiesen. Wir bestätigen nochmals mit OK. Nun befindet sich also im container der header. Klicken wir am unteren, linken Fensterrand in den div#header button, so wird dieser blau hervorgehoben. Klicken wir auf div#container, so wird dieser ausgezeichnet. In einem nächsten Schritt legen wir den Navigationsbereich an: Klick in den div#container, bzw. in den content (also nicht in den header) Vorgehensweise wie beim Anlegen des header, siehe vorher Name: nav, Width 125 px, Height 500 px, Float: left darauf achten, dass vor dem Bestätigen Nach dem Tag ausgewählt ist und hier header Als Letztes bleibt noch der footer, welchen wir nach obigem Muster wie folgt anlegen: Name: footer, Width 800 px, Height 40 px, Float left Fertig! Wir haben unser eigenes Layout angelegt. 07 Tags und spezifische Sektionen re-definieren Wir möchten grundsätzliche Gestaltungselemente definieren, wie z.b. Schrift, Schriftfarbe, Hintergrundfarbe, Links, etc. Dazu legen wir in der CSS-Stil Palette eine neue Regel an, wählen anschliessend Tag (definiert ein bestimmtes, bestehendes HTML- Element neu). Im Selektor wählen wir aus der Pulldownliste body aus. Im anschliessenden Dialogfenster die Schriftart Arial und weisse Schrift auswählen, bei der Hintergrundfarbe Schwarz einstellen. In der folgenden Box geben wir die Grösse dieser an, siehe folgender Screenshot (Breite 799 für Boxplatzierung, danach auf 800px): Nun legen wir in gleicher Weise den Maincontent links von der Navigation an: Name: maincontent, Width 600 px, Height 600 px, Float left Nun stellen wir fest, dass die Masse der Container noch nicht optimal abgestimmt sind. Wir korrigieren folgendermassen: In der Palette CSS-Stile durch Doppelklick auf die entsprechende Regel: maincontent: Width 675 px nav: Height 600 px

11 11 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Als nächstes definieren wir das Aussehen der Links. Dazu wählen wir im Maincontainer den Begriff Inhalt aus dem vorgegebenen Text aus. Um ein Linkverhalten zu erzeugen, ohne wirklich einen Hyperlink zu setzen (wir kennen diesen ev. im Moment noch gar nicht), fügen wir in der Eigenschaftenpalette bei Hyperlink ein Rautensymbol # ein. Dieses können wir mit Alt 3 erstellen. Der Link wird standardmässig blau unterstrichen dargestellt. Auf dem schwarzen Hintergrund ist der Kontrast sehr schlecht. Wir ändern die Linkfarbe auf Orange: Wir legen dazu eine neue CSS-Regel an, wie oben für die Schrift und Hintergrundfarbe, also ein Tag, bei Selektor wählen wir aber a (Anker) für einen Link aus. In der anschliessenden Dialogbox wählen wir als Schriftfarbe orange und bei Unterstreichen none, fertig, Link ist mit einer CSS-Regel geändert. Nun setzen wir in der Navigation exemplarisch drei Menüpunkte: About us Galleries Contact Diese Menüpunkte sind schlussendlich auch Links, sollen aber anders aussehen als der soeben definierte a-link. Folgendes Vorgehen: About us markieren und in der Eigenschaftenpalette bei Hyperlinks mit Alt 3 eine Raute einfügen, damit ein Link entsteht. Dieser ist nun ebenfalls orange. Um das zu ändern, erstellen wir in der CSS-Stile -Palette eine neue Regel, wählen Zusammengesetzter Ausdruck. Im Selektor finden wir nun die ganze Verschachtelung der Div-Tags, bis zum Link. Über die Buttons Weniger Details oder Mehr Details lässt sich entscheiden, innerhalb welches Bereiches die Regel greift. Wir benötigen hier #nav a (Mit diesem Selektornamen wird Ihre Regel angewendet auf alle <a>-elemente die sich innerhalb eines beliebigen HTML-Elements mit der ID nav befinden.) In der folgenden Dialogbox können wir nun eine graue Schriftfarbe definieren und den Schriftschnitt bold machen. 08 CSS-Klassen in DW anwenden Klassen entsprechen Zeichenformaten in InDesign (nicht Absatzformate!) Wir fügen als erstes in unserem Maincontent Blindext nach der Titelzeile hinzu. Das lässt sich am elegantesten mit der Adobe-Extension Lorem ipsum bewerkstelligen, diese kann von Adobe heruntergeladen werden. Wir setzen über diesen Blindtext nun noch den Titel Willkommen auf der Website. Die so eingefügten Schrift-Abschnitte sind nun weiss und in Arial, unser Body-Tag bestimmt dies. Der Lauftext soll nun kleiner sein, als die Titel. Dazu erstellen wir wiederum in CSS-Stile eine neue Regel, diesmal eine Klasse und geben ihr im Selektor einen eigenen, sinnvollen Namen, z.b. Lauftext. Im anschliessenden Dialogfenster wählen wir wiederum die Schriftart Arial in weiss, aber in der Grösse 10px.

12 12 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Wieder einmal tut sich nichts, die Klasse ist noch nicht angewendet, d.h. der Lauftext muss ausgewählt sein, in der CSS-Stile -Palette wählen wir auf unsere.lauftext Regel und mit der rechten Maustaste/ Context-Menü geben wir aus der erscheinenden Auswahl den Befehl Anwenden, voilà. Nun machen wir den Titel über dem Lauftext noch blau, etwas grösser und in Versalbuchstaben. Wir legen wieder eine neue CSS-Klasse an, diesmal nennen wir sie z.b..titel. In der folgenden Dialogbox können wir die gewünschten Attribute vergeben, anschlissend wiederum den Titel markieren und die Klasse aus CSS-Stile mit rechter Maustaste anwenden. Wir setzen nochmals zwei Abschnitte Lauftext aus der Extension Lorem unter den Titel Navigiere links, markieren diese und weisen die Klasse.lauftext zu. Am Schluss löschen wir noch die Kopfzeile Raum für den Inhalt von id maincontent. 09 Feineinstellungen Als erstes stellen wir das Padding ein. Mit Padding ist der Abstand innerhalb eines Div-Tags zum Rand gemeint. Also z.b. den Typoabstand zur Boxrand. Im Moment klebt die Typo an den Div-Tag-Rändern. Wir gehen zur CSS-Stile -Palette und klicken dort maincontent doppelt an. Nun stellen wir beim Padding Right und Left je 15 px ein. Gleichzeitig müssen wir die gesamte Boxbreite von 675 px auf 645 px reduzieren, andernfalls findet durch das Padding eine Textverdrängung statt und der ganze Maincontent wird aus seiner Position verschoben. Weiter machen wir aus unseren drei Navigationspunkten links mit Hilfe von Alt 3 je ein Link aus dem Text. Das nav a Compound-Format wird automatisch in nav-div-tag erkannt und zugewiesen. Nun ändern wir die Schrift in Versalien und verringern den Zeilenabstand. Dazu rufen wir aus der CSS-Stile -Palette das nav a Compound-Format auf und ändern Text-transform auf uppercase und für den Zeilenabstand Line-height auf 2 px. Wir fügen am Ende unseres Lauftextes noch eine Zeile hinzu, z.b. Navigiere links. Dies wird nun automatisch in 10px weiss formatiert. Möchten wir das als Titel formatiert haben, wählen wir die entsprechenden Wörter aus und weisen die Klasse.titel zu. Als nächstes ändern wir die Hintergrundfarbe des Headers. Wiederum in der CSS-Stile -Palette die ID header doppelklicken und in der Dialogbox die Hintergrundfarbe auf grau stellen. Schliesslich stellen wir das Padding bei der Navigation links auch auf 15 px (CSS-Stiele >nav a Doppelklick >Padding left 15 px). Als letztes wechseln wir die Titelfarbe von Blau auf Orange (CSS-Stile >.titel >Schriftfarbe Orange). All diese Änderungen können jeweils auch in der Eigenschaftenpalette unter der CSS-Stile -Palette gemacht werden, anstelle des Aufrufens der Dialogboxen. Unter Eigenschaften hinzufügen wird es aber recht schnell unübersichtlich.

13 13 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 10 Hintergrundelemente hinzufügen und Photoshop-Smart-Objekte importieren Für diese Ausgangslage nehmen wir als erstes den grauen Hintergrund im header wieder heraus (>CSS-Stile >header >BG Color). Weiter setzen wir das Marging des body auf 0 px (wird später wichtig): >CSS-Stile >body >Marging >für alle 0 px. Nun plazieren wir im Header ein Logo. Dazu löschen wir erst mal die automatisch generierte Header-ID-Zeile. Das PSD-Logo legen wir in unseren Upload-Ordner! Klicke ich nun in den Anfang des Headers, kann ich auch meinem Dokumentenbrowser die Photoshop-Datei direkt in den Headbereich ziehen. DW erkennt die PSD-Datei, welche ja so nicht verwendet werden kann, öffnet einen Einstelldialog, wo ich die bekannten Webeinstellungen für jpg und gif vornehmen kann. Bestätigen fertig. Eine jpg-datei mit gleichem Namen wird automatisch in meinem Upload-Ordner hinzugefügt. Das eingefügte Bild zeigt links oben ein Verlinkungssymbol. Wird das originale Photoshop-Bild nachträglich bearbietet (kann aus dem Dokumenten-Browser in DW geöffnet werden), so macht das Verlinkungslogo darauf aufmerksam (roter Pfeil). Mit Mausklick rechts auf das Symbol, kann ich Von der Originaldatei aktualisieren. Als nächstes ersetzen wir den schwarzen Hintergrund durch ein vorbereitetes Background-Bild mit einem Schwarz-Dunkelblau-Verlauf. Wir bearbeiten im Tag body den Hintergrund und fügen unser Bild ein. Wir kacheln es auf der x-achse, nicht aber auf der y-achse. Allfällige bereits definierte Hintergrundfarben im header, nav, maincontent oder footer müssen wieder entfernt werden, sonst wird das BG-Bild nicht sichtbar.

14 14 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Nun erstellen wir in einem nächsten Schritt einen internen Link zu einer anderen Html-Datei. Wir öffnen dazu aus dem Dateibrowser unsere Html-Datei about_us.html im Ordner about_us. Hier schreiben wir eine Text rein, z.b. Das ist die About Us Site. Diese soll nun aus unserer Index-Navigation mit ABOUT US aufgerufen werden: Markieren des ABOUT US Menüpunkts im index.html und bei Hyperlinks über das Ordnersymbol zur about_us.html -Datei browsen. Nun möchten wir auch den CONTACT Menüpunkt zur entsprechenden Site verknüpfen. Dazu müssen wir im Dateibrowser zuerst die contact.html Datei anlegen. In die Datei selber schreiben wir Contact. Es gibt auch eine andere Variante, den Menüpunkt mit der entsprechenden Datei zu verknüpfen: Dazu müssen wir den Dateibrowser/ Palette aus den Seitenpaletten lösen, damit diese als eigenes Fenster dargestellt wird. Der CONTACT Menüpunkt muss markiert sein (als Link eingerichtet >Alt 3). Jetzt packen wir das Fadenkreuz-Symbol welches nach Hyperlinks in der Eigenschaftspalette zu finden ist mit der Maus und ziehen mit dem entstehenden Pfeil auf die entsprechende Html-Datei im Dateibrowser. Das funktioniert auch mit mit Bildern. Im Maincontent schaffen wir uns etwas Platz nach dem ersten Titel WILLKOMMEN AUF DER WEBSITE. Im Uploadordner im Dateibrowser müssen wir einen Bilderordner anlegen mit einem Thumbnail-Foto bild1_240.jpg mit einer Bildbreite von ca. 240 px und einer grösseren Bildvariante bild1.jpg mit einer Bildbreite von ca. 900 px. Aus dem Dateibrowser kann nun das Thumbnailbild einfach an die Cursorstelle im Maincontent gezogen werden. In der Eigenschaftenpalette erscheint nun das Bild, wenn es in Maincontent ausgewählt is als Quelle. Darunter finden wir den Hyperlink. Wir ziehen wiederum mit dem Fadenkreuz-Symbol auf die grössere Variante des gleichen Bildes und geben beim Ziel _blank ein. Im Browser testen, beim Klick auf das Thumbnailbild geht ein neues Fenster auf und eine grössere Bildvariante erscheint. 11 Dokumente, Grafiken und Websites verlinken Als erstes erstellen wir einen Link, der eine externe Website aufruft. Nach dem 3. Abschnitt im Maincontent fügen wir den Linktext Click here to go to Google ein. Wir geben nun in der Eigenschaftspalette bei Hyperlink den entsprechenden Webaufruf ein: und damit sich dieser Link anschliessend in einem neuen Fenster öffnet definieren wir unter Ziel: _blank. Nun erscheint unser Link in Orange, dies differenziert sich nicht von den orangen Titeln. Somit rufen wir den CSS-Stil für die Links auf: a und ändern dort die Link-Schriftfarbe von Orange auf ein Gelb. Als nächstes erstellen wir einen Anker: Zuerst fügen wir 6 Abschnitte Blindtext am Ende des Maincontent ein. Wir formatieren diesen als.lauftext. Vor dem letzten Abschnitt fügen wir den Text Unten ein und erstellen daraus einen Link, und weissen den Stil titel zu. Unter dem eingefügten Bild setzen wir einen neuen Text: Gehe zum Ende. Wir scrollen runter zum Titel UNTEN, klicken an den Anfang und fügen über das Menü von DW einen Anker ein >Einfügen >Benannter Ankerpunkt. Es erscheint ein Dialogfenster, wir geben den Namen bottom. Der Anker wird eingefügt.

15 15 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Was nicht schön ist, ist der entstandene Textüberlauf im Maincontent. Die Box ist zu klein für die vorgegebenen Textmenge, der Footer befindet sich nicht mehr unterhalb des Maincontent, das Layout ist unbrauchbar. Wir korrigieren folgendermassen: Palette CSS Stile #container : Height 800 und px löschen #maincontent : Height 600 und px löschen Fixed! (beim Testen im Browser daran denken, die Site neu zu laden!) 12 Webwidgets in DW installieren Eine vorgefertigte Galerie soll eingebaut werden. Im Menü fügen wir den Punkt PH GALLERY hinzu, für Phat Gallery so heisst unsere fertige Galerie, die wir verwenden wollen. In Hyperlinks setzen wir wieder die Raute, damit ein Link entsteht. Die benötigte Galerie ist eine DW-Extension. Wir rufen die Funktion Web-Widgets suchen auf, oben links, drittes Icon. erstellt werden. Dieser kann auch für die Software-Trialversionen verwendet werden. Die Galerie/Extension wird auf den Computer geladen und wir können diese installieren. Anschliessend muss DW beendet und neu gestartet werden. Oben rechts finden wir einen neuen Tab mit der entsprechenden Galerie. Im Dateibrowser brauchen wir ein neues Html-File, wir nennen es phatfusion.html. Zusätzlich legen wir noch einen Ordner im Dateibrowser an, mit dem Namen phatfusion und ziehen das phatfusion.html in diesen Ordner. Diese Html-Datei muss nun geöffnet werden, um darin die Galerie anzulegen. Oben rechts (siehe oben) den Reiter phatfusion auswählen und drunter das pf icon anklicken die Galerie ist erstellt. Datei sichern, ein Dialogfenster fragt, ob Abhängige Dateien kopiert werden dürfen, bestätigen. Beispielbilder werden in die Galerie geladen und im Dateibrowser im phatgalerie-ordner einige Dateien hinzugefügt. Wir möchten nun aber unserer eigenen Bilder verwenden. Dazu benötigen wir einen Ordner mit der Bezeichnung phatfusion_bilder, darin sind unsere Fotos enthalten, jedes zweimal, einmal Thumbnail und einmal grösser: Zurück zum Text Gehe zum Ende, diesen markieren, runterscrollen zu UNTEN, in der Eigenschaftenpalette mit dem Fadenkreuzsymbol auf den Anker ziehen. Nun kommen wir auf die Adobe-Website, dort gibt es verschiedene Extensions zur Auswahl. Wir suchen nach Phatfusion Slideshow (Freeware). Um diese Estension herunterzuladen benötigen wir einen Adobe Account. Falls nicht vorhanden kann dieser problemlos Thumbnail: 100 x 67 px (bild-1_thumb.jpg) Grossbild: 450 x 299 px (bild.-1.jpg) Den phatfusion_bilder-ordner mit den entsprechenden Fotos legen wir in den Upload-Ordner unseres Projekts und da in den phatfusion- Ordner. Jetzt müssen wir nur noch aus der Galerie die neuen Bilder verknüpfen.

16 16 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Mit dem Fadenkreuzsymbol weisen wir aus der Eigenschaftspalette unter Quelle das Thumbnail im Dateibrowser zu und unter Hyperlink die Grossansicht des Fotos fertig. 13 Video und Code von externen Sites einbetten Durch die vielen Möglichkeiten von Videohostings auf externen Servern (Youtube, Vimeo, etc.) ist es nicht unbedingt nötig, Videos in die eigenen Sites zu importieren. Hier wird als Beispiel ein Video von der Youtube Website eingebettet. Diese Methode ist heute am meisten verbreitet. Wir fügen in unserem Menü einen neuen Punkt ein, VIDEO mit einer Raute (Alt 3) im Hyperlink-Fenster. Im Dateibrowser legen wir die Datei video.html an und linken diese zu unserem Menüpunkt VIDEO. Die video.html - Datei öffnen, sie ist noch leer. Nun wechseln wir in den Browser und suchen uns z.b. auf YouTube das entsprechende Video. Unterhalb des Videos gibt es den Button Teilen >Einbetten. Rufen wir disen auf, so erscheint ein HTML-Code in einem Fenster. Diesen Code kopieren wir uns. Wir wechseln zur Code-Ansicht, schaffen etwas Platz zwischen den Bodytags <body> </body> und fügen den kopierten YouTube-Code dazwischen ein. Anschliessend gehen wir zurück zu DW. Fügen wir nun den Code in unseren Content des Videodokuments, so wird dieser Code einfach als Html-Text dargestellt, mit Video ist gar nichts los. Jetzt können wir zur Entwurfsansicht zurückwechseln, das Dokument speichern und im Browser testen. Auf diese Weise können auch Slideshows von z.b. Flickr eingebettet werden, ein Account/Login ist nötig, damit der Code kopiert werden kann.

17 17 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 14 DW-Template erstellen Bis hierhin haben wir verschiedene Dateien angelegt. Aber das Problem ist, dass diese Html-Dateien keine kohärenz haben, d.h. nur das index.html entspricht den vorgegebenen Layoutvorstellungen. Alle anderen Dateien sind nicht konsistent, weisen z.b. gar keine Navigation auf. Diese kann im Moment nur über dan Browser-Zurück- Button geschehen. Abhilfe schafft hier ein DW-Template. Damit können auch bestimmte Bereiche gesperrt und andere Bereiche zur Bearbeitung bestimmt werden. index_new.html in index.html um. Links aktualisieren und Dokument öffnen. Unser Layout ist nicht sichtbar. Wechsel zur Palette Elemente, der zweitunterste Button auf der linken Seite zeigt die Vorlagen. Als erstes legen wir über das Menü >Datei >Neu eine leere XHTMLoder HTML 5-Datei an. Nun kopieren wir den ganzen Inhalt aus dem Maincontent des index.html und fügen diesen in das leere Dokument ein. Das Layout scheint zerstört, Referenzen zu Files (Bilder) sind defekt, etc. Dokument unter dem Namen index_new.html speichern (in den Uploadordner des Projekts), alle Links/Referenzen funktionieren augenblicklich wieder. Dokument schliessen. In unserem alten (gelayouteten) index.html-file löschen wir nun den ganzen Inhalt aus dem Content. Den Logo-Head (Bild) verknüpfen wir noch als Link zum index.html (über Eigenschaftenpalette, Hyperlink, Browse). Weiter definieren wir den editierbaren Bereich, das ist der Maincontent. In diesen klicken wir und wählen aus dem Menü >Einfügen >Vorlagenobjekte >Bearbeitbarer Bereich. Ein Dialogfenster fragt nach dem Namen dieses Bereichs, wir geben maincontent ein. Dieser Bereich erhält nun eine blaue Bezeichnung, darunter als Platzhalter der Text maincontent, diesen Text können wir löschen. Jetzt ziehen wir das general Dokument aus den Elementen in das geöffnete index.html. Ein Dialogfenster erscheint. DW möchte den Body auflösen, wir ordnen diesen dem maincontent zu (siehe Screenshot). Dokument unter >Datei > Als Vorlage speichern speichern im folgenden Dialogfenster einen Namen vergeben, z.b. general. Anschliessend die abgefragten Links aktualisieren. Im Titelkopf wir dieses Dokument nun als <<Vorlage>> general.dwt benannt. Wir schliessen dieses Vorlagendokument und gehen zum Dateibrowser und löschen unser index.html. Dafür benennen wir das

18 18 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Nun sollte die index.html-site wieder so aussehen, wie wir sie gestaltet und programmiert haben. Manchmal verschiebt sich das Layout und das Padding der maincontent-box muss nachjustiert werden. Die nav und header sind gesperrt und können nur in der vorlage verändert werden. Dokument sichern und schliessen. video.html öffnen, aus den Elementen das Template general draufziehen, sichern, fertig. Mit allen unseren Dateien verfahren wir so. Darauf achten, dass die Links aus der Navigation keine Dateien in neuen Fenstern (_blank) aufrufen, sonst entstehen weisse Fenster zwischen den Seitenwechseln. Achtung: Die phatfusion-galerie funktioniert so nicht, da sie selber komplex aufgebaut ist, mit eigenen CSS und Javascript gespickt ist. Wir sehen später, wie wir ein solches Widget elegant in einem neuen Fenster öffnen können. Unsere Vorlage kann nun auch beim erstellen einer neuen Datei im folgenden Dialogfenster aus den Vorlagendateien ausgewählt werden. Nun klicken wir also zwischen die roten Linien und wechseln in unseren Reitern zu Allgemein, wählen dort eine Tabelle aus und legen diese folgendermassen an: Jetzt wechseln wir in DW wieder zum Reiter Formulare, um zwischen Textfeldern, Radiobuttons und Sendbuttons auszuwählen. Als erstes legen wir ein Textfeld an, 2. Button von links, ein Dialogfenster folgt: 15 Kontaktformular einrichten Zu einer Website gehört auch ein Kontaktformular. Ein solches haben wir schon eingerichtet und wahrscheinlich auch schon die Vorlage zugewiesen. Wir öffnen also contact.html und beginnen die erset Anweisung in das türkisfarbene Feld zu schreiben: Als nächstes müssen wir eine Art Formular-Schale anlegen. Oben rechts in DW gibt es den Reiter Formulare, darunter ganz links den Button Formular, diesen drücken wir und bekommen im Maincontent zwei rote Begrenzungslinien, die Schale unseres Kontaktformulars. Im Folgenden brauchen wir eine Struktur innerhalb dieser Schale. Diese lässt sich viel einfacher mit einer Tabelle anlegen als mit CSS, funktioniern tut diese mit allen gängigen Browsern. Jetzt beginnen wir die Tabelle mit unseren Angaben zu füllen, z.b. in dieser Art:

19 19 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Die Anweisung, was auszufüllen ist, wird leider über dem Feld plaziert. Wir löschen diese wieder, klicken ins Textfeld, gehen zur Eigenschaftenpalette, und schreiben dort unter Anfangswert Bitte Vornamen eintragen. Genauso verfahren wir bei Nachname und . Als nächstes brauchen wir zwei Radio-Buttons für Newsletter. Wir klicken in die Zelle und wählen das 7. Icon im Formular Tab. Dialog: ID: _list_yes Radio Button auswäheln, zur Eigenschaftspalette wechseln Aktivierter Wert: yes Optionsschalter: include_ _list Rechts vom Radio Button selber Ja schreiben Nun praktisch das selbe mit dem No-Button: Wir klicken in die Zelle und wählen das 7. Icon im Formular Tab. Dialog: ID: _list_no Radio Button auswäheln, zur Eigenschaftspalette wechseln Aktivierter Wert: no Optionsschalter: include_ _list Anfangsstatus: Aktiviert Rechts vom Radio Button selber Nein schreiben Unter Infos über: erstellen wir ein Dropdown-Menü zur Auswahl. 9. Icon im Formular-Reiter. Dialogfenster: info_on Menü auswäheln In der Eigenschaftspalette zwischen Menü und Liste wählen, wir wählen Liste über Button Listenwerte Dialogfenster aufrufen Folgende Listenwerte eintragen: Zeitplan zeitplan Konsultation konsultation Preise preise Bitte wählen none Über die Pfeiltasten oben am Dialogfenster verschieben wir den letzten Punkt Bitte wählen an die erste Stelle. Für Kommentare verwenden wir das 4. Icon im Formular-Reiter Textbereich ID: comments Eigenschaftspalette die erforderlichen Attribute einstellen (selbsterklärend Zum Schluss benötigen wir noch einen Submit und einen Reset Button. Das 13. Icon im Formular-Reiter ist die richtige Wahl. Klick in Zelle und auf Button-Tool ID: submit Zweiter Button: ID: reset Jedem Button in der Eigenschaften-Palette das richtige Verhalten zuordnen (Senden, Zurücksetzen).

20 20 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Um das Formular versenden zu können, brauchen wir ein verstecktes Feld, wo wir z.b. eine Ziel- adress angeben können. Der 3. Knopf im Formular-Reiter ist für ein solches verstecktes Feld vorgesehen. Wir setzen es links neben den Submitbutton in die entsprechende Zelle. In der Eigenschaftpalette geben wir bei Versteckter Wert ein, bei Wert die Ziel adresse des Formularempfängers. Im folgenden Dialogfenster durchsuchen wir als erstes die Dokumente und geben den Pfad zum Zieldokument an. Weiter können wir das Fenster in einer bestimmten Grösse öffnen lassen und bestimmen, welche Attribute das Fenster haben darf. Im Folgenden eine Einstellmöglichkeit: Als nächstes gehen wir zum Menü von DW >Fenster >Verhalten und kommen zum Taginspektor. Über den viereckigen +Knopf kann ein Verhalten ausgewählt werden, wir wäheln Browserfenster öffnen. Über den Server kann auch ein Redirect oder eine Bestätigung erstellt werden. Dazu setzen wir neben dem versteckten -Textfeld noch ein Zweites hin mit dem Versteckten Wert redirect, bei Wert Ich benötige also eine Domain und einen Server, sowie eine eingerichtete thanks.html Site, wo z.b. steht: Besten Dank für Ihr Interesse, wir werden umgehend mit Ihnen Kontakt aufnehmen. Speichern wir anschliessend die Vorlage, so müssen wir für alle verknüpften Dokumente aktualisieren, das übernimmt DW für uns. 16 Verhalten in DW Verhalten oder Behaviours sind fertige javascriptbasierte Befehle, die ein bestimmtes Verhalten produzieren. Z.B. möchten wir unsere phatfusion-galerie in einem Popup-Window öffnen, aber in fixer Grösse und ohne Browser-Navigationsleiste, etc. Diesem Beispiel widmen wir uns in diesem Kapitel. Dazu müssen wir das Template general editieren. Wir öffnen dieses Dokument. Dann markieren wir den PH GALERIE Link in der Navigation und löschen in der Eigenschaftspalette bei Hyperlink ein allfälliger Aufruf des phatfusion.html, bzw. setzen hier wieder eine Raute mit Alt 3 ein.