WEBSCHOOL    FRONTPAGE-INHALT

FORMATVORLAGEN

Damit alle Headlines (gemeint sind Seitenüberschriften, Headline klingt aber besser, wie auch Deadline statt Fertigstellungstermin), die Subheadlines, die noch kleineren Kapitelüberschriften und die schon fast winzigen Absatzüberschriften auf der gesamten Website gleich aussehen, genügt es, die jeweiligen Einstellungen (Schriftart, Farbe, Größe, ...) in einer Formatvorlage festzulegen.
Von dort können die Formatieranweisungen bei Bedarf abgerufen werden.
Alle Formatvorlagen für eine aus mehreren Seiten bestehende Website werden in einem externen Stylesheet zusammengefasst.
Formatvorlagen in einem internen Stylesheet  gelten nur für ein bestimmtes Dokument. Bei einer neuen Seite beginnt die ganze "Formatierungsarbeit" wieder von vorne.

Das Ein- und Ausschalten bestimmter Eigenschaften wird im HTML-Code durch Tags angezeigt.
Z. B. wird mit dem Tag <b> der Beginn eines Textes mit fettgedruckten Zeichen gekennzeichnet, </b> folgt nach dem letzten fettgedruckten Zeichen.
Mit  <h1> beginnt eine Überschrift 1. Ordnung, mit </h1> endet sie.
Der Inhalt einer Webseite steht zwischen <body> und </body>
Beachten Sie dazu <h1>Corporate Identity</h1> und <b>Mannerschnitten</b> in Abbildung 1

 

FRONTPAGE - Tags anzeigen
Abbildung 1

Die Zuordnung einer bestimmten Schrift für den gesamten Text der Webseite wird nach dem Tag <body>  festgelegt. Frontpage macht das für uns:
  • Format / Formatvorlage...
  • im Fenster Formatvorlage das Auswahlfeld (Selektor) body markieren   Abbildung 2
  • Ändern...
  • Zeichen...
  • die gewünschten Schrifteinstellungen auswählen
  • OK


Abbildung 2

Das Resultat der Arbeitsschritte ist in der HTML-Ansicht zu sehen:
 
<style>
<!--
body
{ font-family: Arial }
-->
</style>
</head>

 
Der eingefügte Befehl { font-family: Arial }... sorgt dafür, dass alle Texte, die zwischen den beiden body-Tags geschrieben werden, die Schriftart Arial übernehmen. Flotter geht es, wenn die Anweisung direkt in den HTML-Code geschrieben wird.
Auf die gleiche Weise können weitere CSS-Attribute (Cascading Style Sheet) erstellt werden. Z. B.
  • alle Hauptüberschriften rot: h1 { color: red } oder
  • alle Links in Verdana und der Farbe Magenta: a { font-family: Verdana; font-size: 10pt; color: #FF00FF }

 

Externe Stylesheets
 

Die Stile eines ganzen Webprojekts von einer Datei aus steuern? Rasch und problemlos?
Dazu muss man nur alle Seiten des Webs mit der Datei verlinken, welche die CSS-Regeln enthält.
  • Explorer starten
  • im Webprojekt: BuMuseum einen Ordner mit dem Namen css anlegen
  • Ordner öffnen
  • Datei / Neu / Textdokument
  • Textdokument umbenennen auf SiteStil.css
  • Ein Doppelklick auf SiteStil.css öffnet die Datei in Frontpage
  • die Tags und ihre Eigenschaften (Attribute) eintragen   Abbildung 3

Externe CSS-Datei
Abbildung 3

Im nächsten Schritt werden die einzelnen Seiten mit der Datei SiteStil.css verlinkt
  • Format / Links zu Stylesheet...
  • Hinzufügen...
  • Ordner und Datei auswählen      Abbildung 4
  • OK / OK


Abbildung 4

In der HTML-Ansicht ist der integrierte Link zu sehen:
 

WEBSCHOOL    FRONTPAGE-INHALT