Styles definieren

Allgemeines , Style in externer Datei ,
Style in der HTML-Seite , Style im HTML-Element

vorige Seite

nächste Seite

 

Nach oben   Allgemeines zu Styles:

 

    Sie bestimmen mit Styles die Formateigenschaften einzelner HTML-Elemente.
    So können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung (Überschrift1) eine bestimmte Schriftgröße aufweisen, und in einer bestimmten Schriftart erscheinen.
    Sie können Style Definitionen auf drei verschiedene Arten vornehmen.

    1. Styles können in einer externen Datei gespeichert werden, alle Seiten, die mit dieser Datei verknüpft sind, können dann ganz einfach über diese im Erscheinungsbild geändert werden.
      z.B alle H1 Formatierungen Ihrer HTML-Seiten In
      Fontgröße 24 und Fett.
    2. Styles die in der HTML-Seite notiert werden sind nur innerhalb dieser Seite gültig.
      z.B alle H1 Formatierungen dieser HTML-Seite In
      Fontgröße 20 und Italic.
    3. Styles die Sie in einem HTML-Element definieren sind nur für dieses gültig.
      z.B diese eine H1 Formatierung in
      Fontgröße 36 Unterstrichen.

    HTML-Help Projects unterstützt Sie bei allen drei Möglichkeiten.

    HinweisWenn Sie ein
    Style ändern, werden die neuen Formatierungen nicht gleich im Editor angezeigt.
    Sie können im Editor über "Formatierung-SeiteanFenstervorwahlanpassen" die Anzeige an ein geändertes Style anpassen lassen.

Nach oben Style in externer Datei.

 

    Sie können mit HTML-Help Projects beliebig viele Styles definieren, die jeweils in einer externen Style Datei gespeichert werden.
    Gehen Sie hierzu wie folgt vor.

    Wenn Sie im Window Editor unter Styles auf klicken, Öffnet der Styleeditor.

    Hier können Sie Styles für alle Absatz, Bereich und sonstigen Formatierungen vornehmen.

    StyleAbsatz

    Für die 30 Absatzformatierungen (10 sind bereits definiert 20 weitere können Sie frei anlegen) kann unter HTML-Style, Hilfe 95/NT (32bit Win-Help) Style und HilfeWin (16bit Win-Help) jeweils ein eigenes Erscheinungsbild definiert werden.

    Style definieren:
    Wählen Sie in der Spalte HTML-Style die
    Absatzformatierung an, für welche ein Style festgelegt werden soll.
    Betätigen Sie dann die Leertaste. Es erscheint ein Dialog, in dem Sie die
    Schrftart, Grösse etc. definieren können. Beenden Sie diesen Dialog mit OK. Sie finden den Fontnamen nun in der entsprechenden Spalte.

    Wenn Sie alle Einstellungen vorgenommen haben wählen Sie Datei/Style speichern unter. Geben Sie dort einen Namen ein und wählen Sie OK.

    Wenn Sie das Stylefenster nun über Datei/Beenden verlassen, finden Sie im Window-Editor die Verknüpfung zu dem soeben gespeicherten Style.

    Sie können nun eine Seite erstellen, der diese Fenstereinstellung zugewiesen ist und das Ergebniss prüfen.
    Im E
    ditor kann über den Menüpunkt "Formatierung-SeiteanFenstervorwahlanpassen" jeweils geänderte Styleeinstellungen zur Anzeige gebracht werden.

    Löschen einer Einstellung:
    Durch betätigen der Entfernen-Taste werden die Styleeinstellungen der aktuellen Zelle gelöscht.

    HTML-Projekt:
    In obigem Beispiel würde der Browser alle mit Normal formatierten Absätze in der Schriftart
    Arial darstellen. Die übrigen Absatzformatierungen stellt der Browser in seiner Standardeinstellung dar.

    HTML-Help Projekt:
    Gleiche Darstellung wie im HTML-Projekt.

    HTML-Help Projekt:
    In obigem Beispiel würde der Browser alle mit Normal formatierten Absätze in der Schriftart
    Arial Black darstellen. Die übrigen Absatzformatierungen stellt der Browser in seiner Standardeinstellung dar.

    Win-Help Projekt:
    In obigem Beispiel würde das
    Win_Help Fenster alle mit Normal formatierten Absätze in der Schriftart Arial Narrow darstellen. Die übrigen Absatzformatierungen werden in der Standardschrift dargestellt.

    Auf gleiche Weise können Sie natürlich auch für die Bereichsformatierungen (10 sind bereits definiert 20 weitere können Sie frei anlegen) Styles definieren.

    Ebenso für die Listen und Verweise.
    Im folgenden Bild ist z.B für die
    Bereichsformatierung "Zitat" eine Styleeinstellung definiert.

    StyleBereich

    Das nächste Bild zeigt ein besonderes Feature von HTML-Help Projects
    Sie können nicht nur für vorhandene HTML-Tags Styles definieren, sondern die HTML-Tags für
    Absatzformatierung und Bereichsformatierung selbst erweitern und diesen Erweiterungen auch Styles zuweisen. Besondere Auszeichnungen mit div class etc. lassen sich so einfach erstellen.

    Absatzformaterw

    Wenn Sie im Editor F5 betätigen oder die Toolbar für die Absatzformatierung
    mit der Maus aufklappen erhalten Sie ohne die obige Erweiterung nur die Standard Formatierungen für den Absatz.

    Standard Absatzformatierungen Absatzformat   und mit Erweiterung Absatzformaterwtoolb

    Mit der Erweiterung stehen Ihnen mehr Absatzformatierungen zur Verfügung, die Sie einfach wie gewohnt im Editor auswählen können. Diese Absatzformatierungen können Sie mit beliebigem HTML-Code auszeichnen.

    HinweisSie können zum Verweisen auf Ihre HTML-Elemente sowohl ID als auch Class Eigenschaften verwenden (Wie im Beispiel oben gezeigt).

    Sie können in mehreren Fenstereinstellungen das gleiche Style verwenden.
    Beim erstellen Ihres Web oder Hilfe Projektes werden die
    Styledateien automatisch mit ins Projektverzeichnis kopiert. Sie müssen lediglich darauf achten, dass diese auf Ihren Web-Server geladen werden.

Nach oben Style in der HTML-Seite.

 

    Um ein Style im Header der HTML-Seite abzulegen, verwenden wir die Script Funktion von HTML-Help Projects
    Sie können das Script direkt selbst anlegen oder aus der Stammscript-Datenbank laden und anpassen.zur genauen Erklärung

    Wählen Sie hierzu im Projektnavigator den Reiter "Script" Öffnen Sie eine Gruppe und wählen Sie einen vorhandenen Eintrag mit der Maus an betätigen Sie dann F4 für Eigenschaften.

    Sie befinden sich nun im Scripteditor und könnten unter HTML-Script-HeadSection Ihre Styledefinition eintragen.
    Wir laden nun jedoch ein vordefiniertes Style aus der genannten Datenbank.

      Wählen Sie hierzu im Menü Datei den Punkt Stamm-Script laden.

      Die Liste wird mit mehreren Gruppen gefüllt.
      Öffnen Sie die Gruppe "HTML" dann HTML4
      und nun Style-
      Sheet.
      Wählen Sie "Im Header definieren" mit der Maus an
      und betätigen Sie dann stscriptnproj um dieses Script in das Projekt zu übernehmen.
      Beim folgenden Dialog können Sie noch die Bezeichnung ändern.
      Wählen Sie nun das im Projektnavigator neu hinzugekommene Script an,
      ändern Sie bei Bedarf die Einträge unter HTML-Script-Eintrag in
      Head Section
      und schließen Sie den Scripteditor.
      Ziehen Sie das soeben angelegte Script in den Editor irgendwo auf Ihre Seite.
      Sie können dieses Style nun auf beliebigen Seiten verwenden.

Nach oben   Style im HTML-Element.

 

    Um ein Style im HTML-Element zu definieren können Sie wie oben erwähnt direkt das HTML-Starttag mit Style.... erweitern.
    Oder Sie arbeiten mit div Bereichen, für welches Sie ebenfalls ein Script anlegen.