Habt Ihr es so in die CSS-Datei eingefügt, dann diese speichern und noch etwas im Quelltext von DW wie nachfolgend beschrieben ändern (siehe Pkt. 9).
Ebenenmenü (Popup) Teil II
Die Fähigkeit von Dreamweaver Ebenen (Layer) ein/auszublenden kann für Navigations-Menüs genutzt werden (ähnlich der Popup-Funktion in Fireworks). Damit das ganze auch ladefreundlich geschieht, wird diese in diesem Tutorial erzeugte Formatierung der einzelnen Navigationselemente in ein externes Stylesheet ausgelagert, dass spart viel Quelltext.
- Autor:
- (rb)
- Arbeitsmaterial:
- download
- Schwierigkeit:
- Einfach
Hinweis
Dieser Tutorial ist mittlerweile veraltet.
0Styleformatierung
Wer das nicht will überspringt einfach diesen Abschnitt und macht mit den Verhalten weiter. Aber ich denke mitmachen ist nicht verkehrt.
Um den Durchblick zu behalten, sollten die einzelnen Ebenen mit eindeutigen Namen versehen werden. Nahe liegt hier die Ebene die bei Mouseover über Home eingeblendet wird auch Home zu nennen usw. Namen werden im Eigenschaftenfenster der markierten Ebene eingetragen. Für die Navigationsebene ruhig dasselbe tun. Für die spätere Stylesheetdatei sind eindeutige Namen von Vorteil.
Abb. 1
1
Ein kleines Phänomen ist mir beim schreiben des Tuts aufgefallen:
Der Name für die zweite Ebene die bei Mouseover über Links eingeblendet werden soll, hatte bei mir den Namen Links (sieht man auch an den Bildern unten). Nach dem ich die Verhalten zum Einblenden vergeben hatte wurde diese Ebene aus unerklärlichen Gründen nicht eingeblendet. Es lag am Namen! Hab sie einfach umbenannt in hyperlink und es klappte. Sollte eigentlich nicht die Regel sein, da Namen frei wählbar sind, aber wie es eben manchmal so ist mit unerklärlichem.
2
Jetzt gehts an den Quellcode. Die Postionierungs und Größenangaben werden in eine externe Stylesheet ausgelagert. Wer mit Stylesheets klarkommt wird es wahrscheinlich anders machen oder Dreamweaver dazu nutzen, aber ich will hier nicht allzuviel schreiben und nicht noch auf Stylesheets mit Dreamweaver erzeugen eingehen. Daher einfach mal so machen wie ichs hier vorstelle.
Das einfachste Programm zur Erstellung einer Stylesheetdatei ist z.B. der Windowseditor Notepad oder jeder andere Texteditor, diesen jetzt einfach mal starten.
Im Texteditor nun gleich auf Speichern unter klicken. Bei Dateityp Alle Dateien(*.*) auswählen und die Datei mit einem Namen und der Dateiendung "css" in einem Ordner der Site speichern, also extern.css im Beispiel. Das css kennzeichnet die Datei als eine Stylesheetdatei.
3
Nun in Dreamweaver alle Ebenen außer die Hauptnavigation mit Hilfe des Ebenenfenster wie im folgenden Bild ausblenden (hidden). Einmal vor die jeweilige Ebene unterhalb vom Auge klicken und es sollte ein "geschlossenes Auge" erscheinen.
Abb. 2 und Abb. 3
4
Jetzt auf der Leinwand alle Ebenen zusammen markieren. Dies erreicht man wenn wie im Bild alle Ankerpunkte für die Ebenen mit Hilfe gedrückter Shifttaste markiert werden. Es kann passieren, dass die Ebenen wieder kurzzeitig eingeblendet werden, dadurch nicht verrückt machen lassen, ist nicht von Bedeutung.
Abb. 4
5
Wer diese Ankerpunkte nicht hat geht auf Ansicht-->Visuelle Hilfsmittel-->Unsichtbare Elemente und setzt dort ein Häkchen. Sind sie immer noch nicht da ist wahrscheinlich in den Voreinstellungen kein Häkchen bei Unsichtbare Elemente. Man muß dann diese über Bearbeiten-->Voreinstellungen aktivieren, ein Neustart von DW in der 4 Version ist dabei nicht nötig.
6
Sind nun alle markiert einfach Bearbeiten-->HTML kopieren klicken und der ganze Ebenencode ist in der Zwischenablage. Jetzt in Notepad den ganzen Spaß in die extern.css einfügen.
7
Eine weitere praktische Anwendung für die Bibliothek ist der Export aus dem Grafikprogramm Fireworks. Speichern Sie Ihre Rollovers, Navigationsleisten oder Logos in Fireworks als Dreamweaver-Bibliothek ab. Fügen Sie diese Objekte dannin Ihre Bibliothek ein. Aktivieren Sie auch die Option "Bilder in Unterordner ablegen" für mehr Übersicht. Dieses Vorgehen spart eine Menge Kopierarbeit.
7So siehts in der extern.css jetzt aus:
Eine Ebene besteht aus dem Anfangs <div id=..... und dem </div> diese sollten Zwecks Übersicht erstmal wie oben ersichtlich durch genügend Leerzeilen getrennt werden.
Jetzt ist alles ganz einfach wenn man es mehrmals gemacht hat, der absolute Neuling in Sachen Stylesheet wird wohl erstmal "dumm" in den Quellcode sehen.
Der überflüssige Code muß nun gelöscht werden! Warum das eine oder andere stehen muß oder auch nicht, laß ich an dieser Stelle mal weg. Stylesheet allgemein und die Codierung/Schreibweise und vieles mehr erfährt man auf den Gelben Seiten von Dr.Web.
Ich zeig jetzt nur wie es fertig aussehen muß/kann. Wenn alle Stränge reißen, einfach hier rauskopieren und in die extern.css einfügen oder eben selbst anpassen. Ist ein bisschen mehr dabei aber das macht nichts. Am Ende gibts die Originaldateien, ne kleine Beschreibung der Style-Befehle sowie das Tut zum Download, dann kann man sich lokal alles in Ruhe ansehen und experimentieren.
8Code der extern.css
CSS
9Quelltext bearbeiten:
Als erstes muß die extern.css in den Head-Bereich der Html eingebunden werden damit die Formatierungen überhaupt funktionieren.
Entweder folgendes per Hand reinkopieren und gegebenenfalls den Pfad anpassen oder in Dreamweaver über Menü: Text-->CSS Stile-->Stylesheet anfügen und dann die entsprechende CSS-Datei auswählen.
<link rel="stylesheet" href="extern.css" type="text/css">
10Nun zu den Ebenen (Layer)
Die Layer im Quelltext haben noch den alten Code, so sieht es in etwa aus:
<div id="Layer1" style="position:absolute; left:223px; top:362px; width:176px; height:103px; z-index:2">Blah, Blah, Blah</div>.
Das muss noch geändert werden!
11Und so sollte es stehen:
<div id="Layer1"> Blah, Blah, Blah </div>
Für Layer1 muss natürlich der entsprechende Name der Ebene stehen den diese bekommen hat. Für unser Beispiel also z.B. home für die Ebene die bei Mouseover über den Home-Link eingeblendet wird. Dies ist für alle anderen Ebenen genauso zu machen.
12Verhaltensweisen
Nun noch zu den Verhaltensweisen, damit die Ebenen auch ein bzw. ausgeblendet werden. Abb. 5
Den Link markieren und über das Verhaltensfenster (Fenster-->Verhalten) das Verhalten Ebenen ein-/ausblenden hinzufügen. Es öffnet sich folgendes Fenster in dem alle Ebenen die sich auf der Leinwand befinden zu sehen sind. Abb. 6
13
Das ist jetzt mit allen Hauptlinks zu machen. Nicht vergessen wenn die Ebene z.B. für Links eingeblendet wird, dort das Verhalten für das Ausblenden der restlichen Ebenen gleich einzustellen, sonst bleiben einmal eingeblendete Ebenen stehen. Ist man mit allen restlichen Links fertig und wählt einen Link aus steht nun wahrscheinlich folgendes im Verhaltenfenster. Abb. 7
Einfach auf den Abwärtspfeil klicken und man kann onMouseOver auswählen. Nun werden die Ebenen schon beim Überfahren mit der Maus angezeigt und nicht erst bei Klick. Im selben Menü gibt es noch ein Ereignis zeigen für:
Dort kann man bestimmen welche Ereignisse überhaupt in diesem Fenster bei entsprechender Browsergeneration angezeigt werden. Wählt man Browser ab 3.0 könnten ein paar Verhalten fehlen. Das sind dann diese, die normalerweise nicht von der entsprechenden Browsergeneration unterstützt werden. Abb. 8
14
So das wars dann. Hier alle Files um das ganze nocheinmal lokal auf dem Rechner nachzuvollziehen.
15
Die ganze Geschichte der Formatierung in ein externes Stylesheet auszulagern muß nicht sein. Der Code kann auch im Quelltext jeder einzelnen Seite stehen. Der Vorteil dieser Methode ist, dass beim Aufruf der Seite(n) die externe Stylesheetdatei in den Cache des Browsers geladen wird. Dies muß dann nur einmal erfolgen.
Noch ein Vorteil: Will man eine Schriftfarbe/größe, Ebenenposition usw. ändern braucht man dies nur in der Stylesheetdatei zu tun und muß nicht die eigentliche HTML bearbeiten. Bei einer Änderung braucht dann nur die geänderte CSS-Datei neu uploaden, also eine feine Sache.
Nachteil: Nicht alle Browser unterstützen alle Styleformatierungen, gerade die alten Exoten sind da mächtige Spielverderber. Man kann mit einigen Tricks in manchen Fällen was dagegen tun, aber das braucht sehr viel Geduld und Nerven.
- Abbildung 1 - Name für die Ebenen vergeben
- Abbildung 2 - Ebenen sind ausgeblendet
- Abbildung 3 - Alle Ankerpunkte markieren
- Abbildung 4 - Wirrwar ohne Ende aber halb so schlimm
- Abbildung 5 - Verhalten einem Link zuweisen
- Abbildung 6 - Ebenen ein bzw. ausblenden
- Abbildung 7 - von onClick zu onMouseOver
- Abbildung 8 - Verhalten für entsprechende Browsergenerationen einstellen
Um zu kommentieren musst Du eingeloggt sein.
No comments