WEBSITE ERSTELLEN mit DREAMWEAVER MX

Transkript

1 WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading Style Sheets)... 3 Neue Stylesheet-Datei anlegen... 3 text.css... 3 Tabelle... 4 Tabellen-Eigenschaften... 4 Zellen verbinden... 4 Spaltenbreite definieren... 4 Bilder... 5 Bild einfügen... 5 Image-Map (Hotspot)... 5 Navigationsleiste mit Rollover-Buttons... 5 Webseite als Vorlage (.dwt) speichern... 7 Bearbeitbaren Bereich festlegen... 7 Seite aus Vorlage erstellen... 7 index.htm... 7 history.htm... 8 Hyperlinks zu Anker Anker erstellen Hyperlink zu Anker erstellen... 8 Codeansicht... 9 HTML-Slideshow... 9 html-slideshow.htm... 9 <iframe>... 9 slideshow.htm... 9 sights.htm Ebenen Ebenen einfügen Eigenschaften für Ebenen definieren Ebene Ein-/Ausblenden (Verhalten)... 11

2 Neue Site anlegen Download Rohdateien: Unter einer Site versteht man die Gesamtheit aller, zu einem Webauftritt gehörenden Dateien. Es ist wichtig, dass alle diese Elemente in einem Lokalen Stammordner gespeichert werden. Zur optimalen Siteverwaltung im Dreamweaver legen wir eine neue Site an: Site - Site neu Relevante Informationen: Site-Name für eigene Orientierung Lokaler Stammordner (hier werden alle Dateien der Site lokal abgelegt) Achtung: Bei Datei-/Ordnernamen keine Umlaute und kein ß verwenden möglichst auf Großschreibung verzichten! Neue HTML-Seite erstellen Datei Neu Einfache HTML-Seite erstellen Seiteneigenschaften Modifizieren Seiteneigenschaften Webseite speichern Datei Speichern unter vorlage.htm London-Skriptum.doc Seite 2 von 11

3 CSS (Cascading Style Sheets) Neue Stylesheet-Datei anlegen Text CSS-Style Neuer CSS-Style text.css body { background-color: #CA3839; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #17117D; text-decoration: none; } CSS-Selektoren: a:link { text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #CC3838; font-weight: bold; } a:visited { text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #C73536; font-weight: bold; } a:hover { text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #CC3838; font-weight: bold; } a:active { text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #CC3838; font-weight: bold; } London-Skriptum.doc Seite 3 von 11

4 Tabelle Professionelle Seiten werden meist über Tabellen strukturiert. Einfügen Tabelle Tabellen-Eigenschaften Ganze Tabelle markieren: Fenster Eigenschaften Zellen verbinden Die 1., 4. und 5. Zeile soll zu einer Zelle verbunden werden. Die jeweiligen Zellen markieren: Kontext-Menü Tabelle Zellen verbinden Spaltenbreite definieren 1. Spalte 200 px breit (b) Spalte markieren Vertikale Zellausrichtung in der gesamten Tabelle oben! London-Skriptum.doc Seite 4 von 11

5 Bilder Bild einfügen Cursor in erste Zelle: Einfügen Bild pictures/banner.jpg Bild markieren: Eigenschaften-Fenster Die Breite (B) und Höhe (H) eines Bildes sollte nicht verändert werden Bilder müssen in einem Bildbearbeitungsprogramm vorgefertigt werden. Alt. (Alternativer Text) ist eine Bildbeschreibung, die angezeigt wird, wenn man mit der Maus über das Bild scrollt. Screen Reader (Browser für sehbehinderte Menschen) lesen diesen Text vor. Image-Map (Hotspot) In die letzte Zeile wird das Bild kontakt.jpg eingefügt. Lediglich der Schriftzug Kontakt soll als Link dargestellt werden nicht das ganze Bild. Bild markieren: Eigenschaften-Fenster Rechteckiger Hotspot mit gedrückter Maustaste über Schriftzug Kontakt aufziehen. Hotspot-Eigenschaften: Hyperlink Navigationsleiste mit Rollover-Buttons Die benötigten Buttons wurden in einem Bildbearbeitungsprogramm vorbereitet (Ordner buttons ) 2 Bilder pro Rollover zb history.jpg history_o.jpg London-Skriptum.doc Seite 5 von 11

6 Cursor steht in der ersten Spalte der dritten Zeile: Einfügen Grafikobjekte Rollover-Bild history.jpg wird standardmäßig angezeigt (Originalbild), beim Rollover mit der Maus wird dieses ausgewechselt in history_o.jpg (Rollover-Bild). Beim Klicken soll auf die noch nicht erstellte Seite history.htm verlinkt werden. Navigation: Link Originalbild Rollover-Bild URL History history.jpg history_o.jpg history.htm Sights sights.jpg sights_o.jpg sights.htm Slideshow slideshow.jpg slideshow_o.jpg slideshow.htm HOME home.jpg home_o.jpg home.htm London-Skriptum.doc Seite 6 von 11

7 Webseite als Vorlage (.dwt) speichern Um gleich bleibende Elemente wie Navigation, Banner etc. rationell zu organisieren und ein einheitliches Erscheinungsbild zu gewährleisten werden Vorlagen erstellt. Datei Als Vorlage speichern Dreamweaver generiert einen neuen Ordner Templates mit der Datei standard.dwt. Bearbeitbaren Bereich festlegen Cursor steht in der zweiten Spalte der dritten Zeile: Einfügen Vorlagenobjekte Bearbeitbarer Bereich Dieser Bereich kann bei den aus der Vorlage erstellten neuen Seiten bearbeitet (Inhalte eingefügt) werden. Nichtbearbeitbarer Bereich Der Bereich außerhalb dieses Bearbeitbaren Bereichs kann nur in der Vorlage verändert werden. Vorteil: Wird ein Element dieses Nichtbearbeitbaren Bereichs verändert, wird dies in allen aus der Vorlage erstellten Seiten übernommen. Somit kann beispielsweise die Navigation jederzeit verändert/erweitert werden ohne mühselige Korrekturen in allen Seiten. Seite aus Vorlage erstellen Datei Neu Register Vorlage Vorlage standard auswählen erstellen index.htm Tabelle mit 2 Spalten 1 Zeile (Breite 100 %, ohne Rahmen, vert. Ausrichtung oben): Linke Spalte: Bild routemaster.jpg Rechte Spalte: Text start.txt Überschrift London Format Überschrift 1 (Eigenschaften-Fenster) Änderungen speichern und Seite schließen. London-Skriptum.doc Seite 7 von 11

8 history.htm Seite aus Vorlage standard erstellen Tabelle mit 4 Spalten 3 Zeile (Breite 100 %, ohne Rahmen, vert. Ausrichtung oben) 2. und 3. Zeile zu jeweils einer Zelle verbinden. 1. Zeile 3. Zeile Text history.txt Überschriften Antike, Mittelalter, Neuzeit und Einwohnerentwicklung Format Überschrift 2. Hyperlinks zu Anker Strukturierung von langen Seiten Mit Ankern können längere Seiten gut strukturiert werden. Diese sind mit Textmarken aus Word vergleichbar. Mit Ankern kann nicht nur wie mit gewöhnlichen Hyperlinks auf eine bestimmte Seite verlinkt werden, sondern auch auf Textstellen innerhalb einer Seite. 1. Anker erstellen Wir klicken vor die gewünschte Textstelle (zb Überschrift Antike ) Einfügen Benannter Anker Anker-Name (zb Antike ) eingeben OK Es wird nun ein gelbes Ankersymbol angezeigt Weitere Anker im Dokument: Überschriften Mittelalter, Neuzeit, Einwohnerentwicklung und am Seitenanfang einen Anker Anfang einfügen. 2. Hyperlink zu Anker erstellen In der ersten Zeile Antike markieren Einfügen Hyperlink Feld Hyperlink : #Antike eintragen Die restlichen Stichwörter in der ersten Zeile ebenfalls mit den erstellten Ankern verlinken. In der History.htm erstellt man nach jedem Teilbereich einen Hyperlink zurück zum Seitenanfang, den man mit dem Anker Anfang verlinkt. Änderungen speichern und Seite schließen. London-Skriptum.doc Seite 8 von 11

9 Codeansicht HTML-Slideshow Voraussetzung: Ordner slideshow mit Bildern (Bild1.jpg, Bild2.jpg, Bild3.jpg, Bild4.jpg ) Neue Einfache Seite (ohne Vorlage) erstellen in Ordner slideshow speichern html-slideshow.htm CSS text.css mit Seite verknüpfen (Text CSS-Style Stylesheet anfügen). Ansicht Code und Entwurf Code aus html-slideshow.txt kopieren entsprechend einfügen <!--Nachstehenden Skript in HEAD einfügen! --> <script language="javascript"> var aktpos=1; var anzahl=3; function wechsel (richtung) {if (aktpos+richtung>=1 && aktpos+richtung<=anzahl) aktpos+=richtung;document.images[0].src="bild"+aktpos+".jpg"; } </script> <!--Nachstehende Links und Image-Tags stehen im BODY! --> <a href="#" onclick="wechsel(-1)">zurück</a> <a href="#" onclick="wechsel(1)">vor </a> </p> Änderungen speichern und Seite schließen. <iframe> Frames: Eine Website wird in einer anderen Website dargestellt. Es gibt die Möglichkeit in einer normalen HTML-Seite einen so genannten Iframe einzupacken. Seite aus Vorlage standard erstellen und auf oberste Ebene des Webordners speichern: slideshow.htm In den Bearbeitbaren Bereich folgenden Befehl einfügen <iframe src= slideshow/html-slideshow.htm width=500 height= 600 frameborder= 0 ></iframe> Änderungen speichern und Seite schließen. London-Skriptum.doc Seite 9 von 11

10 Neue Einfache Seite (ohne Vorlage) erstellen und auf oberste Ebene des Webordners speichern sights.htm Seitenhintergrund: #CA3839 mit Stylesheet text.css verknüpfen. Tabelle mit 2 Spalten 5 Zeile (Breite 800 px, ohne Rahmen, Hintergrundfarbe weiß, erste Zeile zu einer Zelle verbinden): London Sightseeing Format Überschrift 1. Bild: map/map-london.jpg Legenden 1 13 mit runden Image-Maps (Hotspots) versehen. Ebenen Ebenen einfügen Einfügen Layoutobjekte Ebene (bzw. Kategorie Layout Ebene Zeichnen) Eigenschaften für Ebenen definieren Um die Ebene bearbeiten zu können, muss diese markiert werden (mit der Maus auf den Rand der Ebene klicken) Ebenen-ID: möglichst sinnvollen Namen verwenden ( bigben1 ) Hintergrund-Farbe: weiß Sichtbarkeit: hidden (unsichtbar) Ebene wird nur auf Befehl eingeblendet. Mit einem Mausklick außerhalb der Ebene wird diese ausgeblendet Wiedereinblenden über Ebenenfenster (Fenster Ebenen). Inhalte der 13 Ebenen (für 13 Legenden): Jeweils entsprechenden Text (nummeriert) aus der map.txt und ein Bild aus dem Ordner map (ebenfalls nummeriert) einfügen. Strukturierung teilweise über Tabellen. London-Skriptum.doc Seite 10 von 11

11 Ebene Ein-/Ausblenden (Verhalten) Beim Drüberscrollen mit der Maus über die Legende 1 im Bild rechts soll die Ebene bigben1 eingeblendet werden Befehl 1: Ebene einblenden Image-Map (Hotspot) bei Legende 1 markieren - Fenster Verhalten bigben1 markieren Einblenden - OK Das eingefügte Verhalten wird im Verhaltenfenster angezeigt Das Ereignis soll sein onmouseover (löst das Verhalten beim Bewegen des Mauszeigers über den Hyperlink aus). Befehl 2: Ebene ausblenden Siehe Befehl 1: Ebene Ausblenden Ereignis onmouseout (löst das Verhalten aus, sobald sich der Mauszeiger vom Hyperlink wegbewegt). Weitere Skripten: - Dreamweaver Popup-Menü ( London-Skriptum.doc Seite 11 von 11