WEBSCHOOL    EXPRESSION WEB 4    FRONTPAGE    DREAMWEAVER

EXPRESSION WEB 4

FORMATIEREN mit CSS

Websites, die aus mehreren Seiten bestehen - WEBSCHOOL hat mehr als 600 - Seite für Seite zu formatieren, ist eine aufwändige Arbeit.
Überschriften, Links, Texte, Aufzählungen, ... sollten durchgehend ein einheitliches Layout zeigen.
Das Aussehen der einzelnen Elemente, die Elementstile, wird einmal festgelegt, gespeichert und danach von allen Seiten innerhalb der Website automatisch übernommen.
  • Text schreiben
     
     
  • Die Leiste Formatvorlagenanwendung über
     
     
    einblenden.
  • Cursor in die erste Zeile stellen
  • Option: Neue Formatvorlage zuweisen... auswählen
     
     
  • Im Fenster Neue Formatvorlage in der Drop-Down-Liste  h1 (das ist unsere "große Überschrift")
     

     
  • und bei Definieren in: Neues Stylesheet auswählen
     

     
  • Übernehmen
  • Frage mit JA beantworten:
     
     
  • Gewünschte Einstellungen vornehmen:
     
     
  • OK
  • Datei / Alles Speichern (es muss sowohl die CSS-Datei gespeichert, als auch index.html überschrieben werden)
     
     
     
  • Jetzt kann man die CSS-Formatierung von h1 übernehmen. Aus der Drop-Down-Liste Überschrift 1 wählen.
     

     
  • Na, sieht das nicht furchtbar aus?
    Sofort ran an die Ausbesserungsarbeiten:
     
     
  • h2 und h3 formatieren:
    Zielregel: Neue Formatvorlage zuweisen... und so weiter..
  • Sieht schon zivilisierter aus:
     
     
  • Auf den CSS-Geschmack gekommen? Dann kommen Sie nicht umhin, die einschlägige Literatur zu studieren.

Absatz formatieren + Bilder positionieren

Zuerst den Absatz, in den die Bilder eingefügt werden, formatieren.
Seine Erstreckung über den Monitorfläche - eventuell die Umrandung - festlegen:
  • Neue Formatvorlage erzeugen ...
     

     
  • Im Fenster Neue Formatvorlage p (=Absatz) einstellen, der Text wird in der serifenlosen Schrift Arial, wenn die im Browser nicht dargestellt werden kann, dann in Helvetica, u. s. w. ... gezeigt werden:
     
     
  • Im Beispiel soll der Absatzinhalt 5 Pixel px Abstand zu den Absatzgrenzen einhalten, der Absatz selber hat links und rechts einen Abstand zu den Bildschirmrändern von je 20 % der Bildschirmbreite ...
     
     
  • ... die Absatzausdehnung nimmt demnach 60 % der verfügbaren Breite ein ...
     
     
  • OK

Jeder neue Absatz auf der aktuellen Seite bekommt automatisch das eben angelegte Format zugewiesen. Im HTML-Code nehmen die vorgenommenen Einstellungen nur wenige Zeilen ein. Dennoch lässt sich leicht nachvollziehen, was gemacht wurde:
 

 

 

Ausrichtung und Abstände von Bildern, die unter einer Überschrift oder in einem "leeren" Absatz stehen, legt man so fest:
  • Bild mit der Maus aus der Ordnerliste in den Absatz ziehen oder Kopieren und Einfügen
  • Bild markieren
     

     

  •  
  • Einstellungen wie unten abgebildet übernehmen
     
     
  • Einstellungen für Randbereich vornehmen:
    Durchgehender Rand (solid), dünne Linie (1px), Rahmenfarbe silbergrau (#C0C0C0)
     
     
  • OK
  • Das Ergebnis sieht so aus:
     
     
     
  • Weniger Abstand zwischen Bild und Rahmen? Lässt sich einfach und rasch im HTML-Code machen:
    padding: von 4px auf 1px korrigieren ...
     

     
  • ... das sieht dann so aus:
     

     
  • jedes weiter Bild übernimmt automatisch die in der Vorlage festgelegten Formate:
     

     
  • Die Bilder weiter auseinander rücken?
    margin: von 3px auf 10px korrigieren ...
     

     
  • Wer nicht im  HTML-Code  herumstochern möchte, kann alle Änderungen in der Formatvorlage vornehmen, die man z. B. wie unten abgebildet über die Drop-Down-Liste von img einblenden lassen kann.
     
       

CSS-Formatvorlage für Hyperlinks

WEBSCHOOL    EXPRESSION WEB 4    FRONTPAGE    DREAMWEAVER