Modul 6.2: html-Erweiterungen mit GoLive: Cascading Style Sheets, Script-Aktionen und dynamic html
Wir drehen nun unser normales Vorgehen im Kurs einmal um. Wir werden in diesem Modul erst einmal die Möglichkeiten von Stilformatvorlagen (CSS), Script-Aktionen und dynamic html in Beispielen und in Anwendung mit Adobe GoLive kennenlernen und uns daraus jeweils die Grundlagen, d.h. die entsprechende CSS, dhtml und JavaScript-Syntax erarbeiten. Weitere Erläuterungen und Ergänzungen zur Syntax finden Sie dann in Modul 7 (JavaScript-Programmierung von Hand), sowie z.T. im Kursanhang (Modul 11, siehe dhtml-Erläuterungen, weitere CSS-Hinweise
Aber auch für Benutzer anderer CSS-fähiger Webeditoren oder auch von Webmasterpuristen, die auch Style-Sheets exklusive "per Hand" in Ascii-Text erstellen, sollten die nachfolgenden Ausführungen hilfreich zur Erlernung der CSS-Syntax und der Scriptsyntax sein, da wir auch auf diese näher eingehen.
Die Eingangsseite dieses Kurses wurde zum 10.12.2001 mit entsprechenden Beispielen ausgestattet, die mit den entsprechenden Möglichkeiten dieser Erweiterungen bekannt machen sollen.
Modul 6.2.1:Erweiterte Möglichkeiten durch Stilformatvorlagen (Cascading Style Sheets: CSS)
In Modul 4.1 hatten wir die Restriktionen, die durch beschränkte Formatiermöglichkeiten mit der Standard-html-Sprache sowie durch unterschiedliche Benutzerhardware (v.a. unterschiedliche Bildschirmauflösungen) bedingt sind, diskutiert. Ein besonderes Manko für besser definierte Layoutgestaltung waren die fehlenden Möglichkeiten einer absoluten Einstellung von Schriftgröße und Schriftart sowie einer exakten Seitenpositionierung aller Inhalte (Text, Bilder, sonstige Objekte). Die einzige (allerdings bereits relativ weitreichende) Möglichkeit Inhalte mit der Standard-html-Seitenbeschreibungssprache zu positionieren, war die Verwendung von Tabellen ohne Rand quasi als Container zur Aufnahme der Inhalte. Dieses Konzept wurde von GoLive noch stärker ausgeweitet, indem GoLive Layout-Raster zur Positionierung im Layout-Modus zur Verfügung stellt, die dann automatisch in sehr komplexe Tabellen im source-code transformiert werden (s. Modul 6.1.4). Gerade aber die fehlende Kontrolle über die absolute Schriftgröße macht die Gestaltung von Seiten mit viel bzw. komplexen Inhalten (z.B. Portalseiten, Frameset-Menus bzw. Überschriften) zu einer weitgehend unkalkulierbaren Sache.
Die absolute Kontrolle über Schriftarten und Schriftgrößen kann auf zwei Arten geschehen:
- Umwandlung von Text in gif-Grafiken. Dies ist für Überschriften und Menuleisten ein gangbarer und oft verwendeter Weg (so auch in der Kurseingangsseite ab Version 10.12.2001.
- Vorteil: funktioniert für alle Browser ohne Probleme;
- Nachteile: Ladezeiten der Seiten wird größer, die Gestaltung wird zeitaufwändiger und auch die Anpassung (Änderung der Inhalte) wird schwieriger . Zudem nehmen Suchmaschinen keine Inhalte in Grafiken auf (sie sollten deshalb immer einen entsprechenden Alternativtext für die Grafiken mit eingeben, der von Suchmaschinen berücksichtigt werden kann.
- Verwendung von Stilformatvorlagen
Stilformatvorlagen sind Ihnen möglicherweise von Textverarbeitungen (Word) oder Layoutprogrammen (Pagemaker) bekannt. Die html-Ergänzung CSS (Cascading Style Sheets) vermag dies ebenfalls. Wir müssen uns hier auf einige, vielleicht für Sie nutzbare Beispiele, beschränken. Wenn Sie aber das Prinzip (auch nach Lektüre des nachfolgenden Moduls 6.3) verstanden haben, ist die weitergehende Anwendung kein Problem mehr.
6.2.1.1 Definition von Schriftart, Schriftgröße und Schriftfarbe mit Element-Selektoren
Möglichkeit 1: Verwendung eines internen Style-Sheets
Vergleichen wir ein identisches html-Textdokument mit und ohne CSS-Formatierung.
- Beispiel in klassischer html-Formatierung.
- Und hier dasselbe Beispiel mit CSS-Element-Sektoren-Formatierung .
Element-Sektoren-Formatierung bedeutet nichts anderes, als die Zuordnung von Stilen zu (annähernd) beliebigen Tags. Wollen wir uns mal näher ansehen.
Lassen Sie das Beispiel mit CSS-Formatierung im Extra-Fenster stehen, wir wollen nun das Erstellen dieses Typs von Style Sheets mit GoLive näher erläutern:
1. Schritt: Anlegen eines internen Style-Sheets, Definition der Tags im Style Sheet.
In unten stehender Abbildung ist das Vorgehen erklärt:
- Erstellen Sie eine beliebige kurze Textdatei und klicken dann auf das Icon "CSS-Fenster öffnen" (rote 1 in Abb. unten). Dadurch öffnet sich dieses (rote 2).
2. Schritt: Anlegen der über das Style-Sheet zu formatierenden Tags.
- Klicken Sie auf das Icon "Element-Selektor" in der Werkzeugleiste (die sich kontextsensitiv nun geändert hat) (rote 3).
- Dadurch legen Sie ein neues Element an (rote 4). Benennen Sie dieses Element mit dem entsprechenden Tag (ohne spitze Klammern) entweder direkt im CSS-Fenster (4) oder im Inspektor (erster Reiter, rote 5).
- Wiederholen Sie dies für alle Elemente, die Sie seitenweit via CSS formatieren wollen. In unserem Beispiel haben wir p (Paragraph), a (Link), b (bold), i (italics), h2 (Überschrift Kategorie 2), h3 (Überschrift Kategorie 3), center (Zentriertag), size="2" (font-Größenattribut mit Wert), tt (Teletext), li (Linkeintrag) sowie ein fiktives Tag hallo eingetragen. Alle diese Tags wurden in unserem Beispiel verwendet (vgl. Sie ggf. nochmals das in klassischem html gehaltene Beispiel oben).
3. Schritt: Auswahl der Formatoptionen
- Markieren Sie im CSS-Fenster den ersten Tag (in unserem Beispiel p):
- Gehen Sie im Inspektorfenster auf den Reiter F
 |
Wählen Sie nach Ihrem Geschmack aus;
|
- Mit den weiteren Einstellung können Sie spielen. Wenn Sie unverändert angeben, werden html-Formatierungen wiedergegeben (wenn Sie z.B. Teile kursiv formatiert haben, bleiben diese erhalten, ansonsten wird alles durch das Style-Sheet überschrieben. Gilt auch für die Auszeichnungsmöglichkeiten. Sie könnten alles unterstrichen darstellen wollen, was beim Paragraphen-Tag sicherlich keinen Sinn macht.
Hier habe ich Texteinrückung 20 px gewählt (d.h. am Beginn jedes Absatzes gibt es einen Einzug). Auch den Wortabstand und Zeichenabstand habe ich vergrößert (Sie können Ihn mit dem Vorzeichen - übrigens auch verkleinern. Weitere Einstellung habe ich nicht vorgenommen.
- Wir wollen aber auch für die anderen Tags Einstellungen vornehmen. Spielen Sie einfach rum und schauen Sie sich dabei das Ergebnis an. GoLive setzt für jeden Schritt das Ergebnis bereits im Layoutmodus Ihrer html-Seite um.
- Schauen Sie sich mein Beispiel an (Extrafenster schon geschlossen? Dann nochmals zum Vergleich hier öffnen)
Der entsprechende Code für das Style Sheet sieht folgendermaßen aus (in Rot markiert). Sie können die für die jeweiligen Tags vorgenommenen Definitionen unschwer erkennen.
Hinweis: Übrigens werden auch Style-Sheet-Definitionen in der Regel durch den Kommentartag <!-- bis --> umgeben, damit auch ja kein alter Browser auf die Idee kommt, den Inhalt als Text darzustellen. Dies ist aber optional.
-----------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Textformatierung mit Cascading Style Sheets</title>
<style media="screen" type="text/css"><!--
p { color: #069; font-weight: normal; font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-indent: 20px; word-spacing: 5px; letter-spacing: 1px }
a { color: maroon; font-weight: 500; font-size: 11px; letter-spacing: 3px }
b { color: navy }
i { color: black; font-style: normal }
h2 { color: gray; font-family: Monaco, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, "Times New Roman", Georgia, Times, FontName, AGaramond, Helvetica, Geneva, Swiss, SunSans-Regular }
h3 { color: silver; font-family: "Courier New", Courier, Monaco }
center { font-style: italic; font-size: 18px; font-family: "Times New Roman", Georgia, Times }
size="2" { color: purple }
tt { color: red; font-size: 18px; font-family: Kidprint, Arial, Helvetica }
li { font-size: 12px; line-height: 14px; word-spacing: -1px; letter-spacing: -1px }
hallo { color: lime; font-weight: 900; font-size: 18px }
--></style>
</head>
--------------
Wie Sie sehen, habe ich unterschiedlichste Formatierungen eingebaut. Alle Links erscheinen z.B. im gleichen Format, ebenso alles Fettgeschriebene. Alles Kursive usw. gleich etc. . Ob Sie allerdings die Schriften Monaco (bei <h2> oder gar Kidprint für <tt> auf Ihrem Computer angezeigt bekommen, hängt davon ab, ob diese Schriften bei Ihnen installiert sind. In nachfolgender Abbildung sehen Sie einen Screenshot meines Rechners, der Ihnen u.a. zeigt, wie diese Schriften aussehen (Große Überschrift in Font Monaco, Roter Kritzeltext in Font Kidprint). Auf dem Font sehen Sie auch, wie ich die Zeichenabstände und Wortabstände in der Punkteliste verlkeinert habe, so dass sie sehr unschön aussieht.
- Vergleichen Sie einfach nochmals den ohne Stylesheet und mit Stylesheet formatierten Text. (Extrafenster schon wieder geschlossen? Dann nochmals hier öffnen):
Beide Versionen haben absolut identische Tags im Body-source-Code, den Sie nachfolgend angegeben finden (die im Stylesheet neu definierten Tags hab ich blau markiert)
-----------
<body bgcolor="#ffffff">
<div align="right">
<p><font size="-1">gleiches Beispiel <a href="text_ohne_css.html">ohne CSS</a></font></p>
</div>
<h2>Dies ist eine Überschrift in relativer Überschriftengröße 2</h2>
<h3>Dies ist eine Überschrift in relativer Schriftgröße 3</h3>
<p>Hier ein bisschen Text. <b>Dieser Text hat einige unterschiedliche Formatierungen</b>. Hier ein bisschen Text. <i>Dieser Text hat einige unterschiedliche Formatierungen</i>. Hier ein bisschen Text. <i><b>Dieser Text hat einige unterschiedliche Formatierungen</b></i>. Hier ein bisschen Text. <tt>Dieser Text hat einige unterschiedliche Formatierungen</tt>.</p>
<p>Hier kommt ein <a href="#">Link</a>. Und da noch <a href="#">einer</a>.</p>
<ul>
<li>Hier eine Liste:</li>
<li>Eintrag</li>
<li>noch ein Eintrag </li>
<li>und noch ein Eintrag</li>
</ul>
<p><font size="2">Hier ein bisschen Text. Dieser Text wurde im relativen Schriftgrößenformat 2 formatiert. </font></p>
<div align="center">
<p>Hier ein bisschen Text. Dieser <hallo>Text</hallo> wurde zentriert.</p>
</div>
</body>
</html>
----------
Folgende Fehler hab ich zu Übungszwecken in unser Style-Sheet eingebaut.
- wir definierten size="2" als StyleSheet-Element. Nichts ist jedoch passiert, hätte eigentlich die Farbe purple bekommen sollen (siehe Style-Sheet-Code oben). Warum hat dies nicht geklappt? Nun wir haben ein Attribut als Element angegeben, dies ist mit Style Sheets so nicht möglich. (Das Style sheet interpretiert diese Angabe als Vorhandensein eines Tag-paares <size="2">beliebiger Text</size="2"> welches aber nicht im Body vorhanden ist. Kann also nicht klappen.
- Auch der zentrierte Teil hätte eigentlich anders formatiert sein sollen (Kursiv und in 18 px großer Schrift). Hat auch nicht geklappt. Warum? Wir haben ein Style-Sheet-Element mit Name center definiert. Tatsächlich zentriert das Tagpaar <center> beliebiger Text </center> Text, Bilder, Tabellen etc.. Hätten wir dieses Tag verwendet, hätte es auch mit der CSS-Formatierung geklappt. In unserem Sourcecode haben wir aber zur Zentrierung die offiziellere Methode mit dem div tag und entsprechenden Attribut verwendet (also <div align="center"> beliebiger Text </div>. Der in früheren Versionen von html verwendete Tag <center> sollte nämlich nicht mehr verwendet werden (GoLive verwendet die neue Version automatisch). Würden wir von Hand diesen div tag gegen das Center-Tag austauschen, wäre die gewünschte Formatierung da.
Und was hat es nun mit dem <hallo>-Tag auf sich? Obwohl das Tag in der nicht mit CSS formatierten Option ebenfalls vorhanden ist, wird nichts angezeigt. Kein Wunder, denn dieser Tag ist als Formatiertag in der html-Sprache nicht vorhanden und wird deshalb vom Browser schlichtweg ignoriert (er zeigt aber den Ihnalt des Tags, nämlich das Wort Text dennoch an). Da wir aber in der Style-Version ein CSS-Element mit Namen hallo definiert haben, wird der vom entsprechenden "Pseudotag-Paar" umschlossene Text eben wunschgemäß formatiert, nämlich in Lime-Farbe, 18 Pixel großer Schrift sowie in "überfett" (font weight 900).
Dies bedeutet, dass die CSS-Elemente nicht zwingend offiziellen Tags der html-Sprache entsprechen müssen. Sie könnten also auch einen Tag <multimediakurs>beliebiger Text</multimediakurs>, <kursleiteristdoof>beliebiger Text</kursleiteristdoof> oder was auch immer verwenden. Bedenken Sie aber dabei, dass ältere Browser (vor Netscape bzw. IE 4, z.T. auch manche andere Browser) CSS nicht umsetzen können und stellen Sie eine Grundformatierung mit normalen Tags sicher, die nicht CSS-fähige Browser dann umsetzen können.
Tipp: Gehen Sie bei Namensänderungen von den Grundtags aus. Verwenden Sie z.B. einen tag <i> und einen tag <irot>, wobei Sie das CSS-Element i z.B. zb. in kursiv grün, das Element irot in kursiv rot definieren können. Sie können dann auch verschachteln. Sie könnten dann schreiben:
Dies ist <i> Beispiel A</i>, dies ist <i><irot>Beispiel B</irot></i>.
Beispiel A würde kursiv und grün geschrieben, Beispiel B kursiv rot, da in Style Sheets jeweils der innenliegendste Tag umgesetzt wird.
Würde ein Browser aber keine Stylesheets verstehen, wären dennoch beide Teile kursiv, da der in Standard-html unbekannte Pseudotag irot einfach ignoriert würde.
Sie hätten natürlich auch Pseudotags <rot> bzw. <grün> als CSS-Elemente definieren können und Ihnen die Stile kursiv-rot bzw. kursiv-grün zuweisen können. Ein CSS-unfähiger Browser würde aber dann überhaupt keinen Stil, also auch nichts kursives anzeigen.
Powertipp: Es ist sehr mühsam, Pseudotags von Hand einzufügen. Hierzu folgender Tipp: Schreiben Sie Ihren Text unformatiert. Markieren Sie dann mit einem beliebigen html-Formatbefehl, die Textstellen, für die Sie einen Pseudotag erstellen wollen. Verwenden Sie z.B. Fettschrift dafür. Dadurch werden die Stellen im Sourcecode von den Tags <b> und </b> umschlossen. Gehen Sie im Menu Bearbeiten unter Suchen, aktivieren Sie Suchen im Quellcode, wählen Ihre Datei aus und ersetzten alle b> z.B. durch irot>. Damit werden die zu formatierenden Textstellen von den Pseudotagpaaren <irot> und </irot> umschlossen. Machen Sie das beliebig oft, bis Sie alle gewünschten Pseudotags angelegt haben. Erst danach verwenden Sie die "normalen" Formattags, wie z.B. für Fett, kursiv und Teletext. Legen Sie dann Ihr Stylesheet an und ordnen alllen Tags und Pseudotags die gewünschten Formate zu.
Weiterer Powertipp: Vielleicht reichen Ihnen ja die Standard-html-Textformatbefehle aus (z.B. <b>, <i>, <tt>, <em>, <strong> usw. Sie können dann unter Menu Bearbeiten/Tastaturbefehle im Ordner Text frei definierte Tastaturkürzel zuweisen, mit denen Sie rasch formatieren können. Sie können den Tags dann via CSS beliebige Formate zuweisen, kursiv <i>, muss danach nicht mehr für kursiv stehen, sondern kann völlig anders formatiert werden. Dies ist inbesondere hilfreich, wenn Sie externe Stylesheets verwenden, die für die ganze Website gültig sein können (dazu gleich unten).
Zusätzliche Optionen zur CSS-Elementselektoren-Formatierung (z.B. Abstände zu anderen Elementen) finden Sie im Kursmodul 6.2.1.3. Vergleichen Sie auch mit dem anschließenden Modul 6.2.1.2
(haben Sie das Extra-Fenster noch geöffnet? Sie können es hier wieder schließen)
Möglichkeit 2: Verwendung von Externen Stylesheets
Wie Sie gesehen haben, sind die Möglichkeiten von Stylesheets sehr weitreichend, allerdings ist die Erstellung doch ein bisschen aufwändig. Es wäre also schön, wenn Sie Ihr erstelltes internes StyleSheet auch für weitere Webseiten verwenden könnten. Sie denken vielleicht dran, die jeweiligen Stylesheets aus dem Quellcode einer Seite über die Zwischenablage in eine andere Seite zu kopieren, oder die Seite mit Stylesheets einfach als Vorlage zu verwenden? Nun, es geht noch einfacher, und zwar durch Auslagerung Ihres internen Stylesheets als externes Stylesheet-Dokument, welches Sie dann sehr einfach mit beliebig vielen html-Seiten Ihrer Site verlinken können.
Dieses Vorgehen ist auch aus einem weiteren Grund empfehlenswert. Zukünftige Versionen von html (heißt dann xhtml, siehe Modul 9), sollen zur Formatierung ausschließlich externe Stylesheets verwenden. Wie rasch dies umgesetzt wird, bleibt zwar abzuwarten, und sicherlich werden die sonstigen html-Formatierungselemente noch über viele Jahre unterstützt, aber es ist sicherlich auch eine "zukunftsweisende" Übung, mal ein externes Stylesheet anzulegen. Dies funktioniert mit GoLive sehr einfach:
- Öffnen Sie Ihr CSS-Fenster nochmals durch Klick auf das treppenartige CSS-Icon in der rechten oberen Ecke Ihres Layoutfensters. Gehen Sie dann ins Menu Ablage unter Exportieren und wählen Sie Internes Style Sheet (wichtig: lässt sich nur aktivieren, wenn Ihr CSS-Fenster geöffnet ist). Speichern Sie die dadurch generierte externe Stylesheet-Datei an eine geeignete Stelle innerhalb ihres html-Rootordners. Öffnen Sie diesen Ordner im Projektfenster, wählen Sie Menu Website/erneut scannen und Sie sehen dann die neu angelegte externe Stylesheet-Datei mit Endung .css
- Verlinken Sie mit einer der beiden folgenden Möglichkeiten:
Möglichkeit a):
- Öffnen Sie in einer Datei ohne Stylesheet das CSS-Fenster durch Klick auf das oben erwähnte CSS-Icon.
In der nun geändert vorliegenden Werkzeugleiste (siehe nebenstehend) klicken Sie nun ebenfalls auf das Treppensymbol, um auf eine externe Stylesheet-Datei zu verlinken. Im CSS-Fenser (unten links) erscheint nun ein Ordner Extern mit einem Dateisymbol und Hinweis Empty referenz (sowiel einem Stoppschild. Markieren Sie Empty Reference und wählen über den Inspektor (unten rechts) via Point and Shoot die Style-Sheet-Datei im Projektfenster aus. Das war's. Daraufhin wird in Ihren Header ein spezieller Stylesheet-Link eingetragen (zur Syntax in Modul 9).
Möglichkeit b):
- Noch viel einfacher geht's folgendermaßen. Ziehen Sie das Icon der externen Stylesheet-Datei vom Projektfenster auf das Seitensymbol (links oben) im Layoutmodus einer geöffneten html-Seite. Schon verlinkt.
Tipp: Verwenden Sie im Normalfall nicht die Importfunktion für externe Style-Sheets (bei geöffnetem CSS-Fenster unter Ablage / Import. Damit legen Sie ein internes Stylesheet an. Ist eigentlich nicht der Sinn externer Style-Sheets. Die Sache macht höchstens Sinn, falls Sie für eine spezielle Seite das externe StyleSheet ändern wollen (z.B. ergänzen oder Elemente entfernen). Wenn Sie aber Elemente ergänzen wollen, lesen Sie lieber nachfolgenden Tipp:
Tipp: Sie können interne und externe Stylesheets kombinieren oder auch mit mehreren externen Stylesheets verknüpfen (Sie können auch mehrere interne Stylesheets anlegen, dazu später). Hierbei ist die Reihenfolge entscheidend. Das erste Stylesheet hat die wichtigste Funktion. Nachrangige werden nur für die Formatierung derjenigen Elemente verwendet, die im erstrangigen nicht definiert waren. Häufig kommt vor, dass Sie in einem externen Stylesheet nur wesentliche Elemente definieren und dann in einem internen Stylesheet oder durch Verlinken auf ein spezielleres zusätzliches externes Stylesheet weitere CSS-Formatierungen anweisen.
Im nächsten Unterkapitel erfahren Sie, wie Sie mit Stylesheet-Klassen gleiche definierte Formate auf unterschiedliche Textbereiche legen können und wie Sie dies mit GoLive umsetzen.
