3 Seite

Wenn man mit Datei -> Neu -> HTML eine neue Seite eröffnet, hat sie den Namen „Ohne_Titel_1.htm“. In der Entwurfsansicht ist sie leer und in der Code-Ansicht hat sie fogenden Aufbau:

Der DOCTYPE sagt dem Browser, um welches HTML es sich handelt. Es gibt HTML 4, XHML und FRAMESET. Mit dieser Angabe kann der Browser (und Validierungsprogramme) die Richtigkeit der Seite überprüfen.

Die Seite selbst besteht aus ineinander verschachtelten Tags <..>, die geöffnet und geschlossen werden. In öffnenden Tags können Attribute stehen, die das Tag genauer beschreiben.

Während HTML 4.0 sehr fehlertolerant war, ist XHTML genauer. Man sollte XHTML verwenden.

Die Seite selbst besteht aus <html>…</html> und den beiden Bereichen <head>…</head> (nicht darstellbar) und <body>…</body> (eigentlicher Inhalt).

Der <title>-Tag enthält jenen Namen, der im Browser in der Kopfzeile angezeigt wird. Der Meta-Tag Content wird vom Editor automatisch angelegt und sagt, in welchem Zeichensatz der Text geschrieben wurde. Diese Angabe ist wichtig, damit der Browser die Nicht-ASCII-Zeichen richtig darstellen kann. Weiters stehen hier

Eigenschaften

Um grundsätzliche Einstellungen vorzunehmen, verwendet man in Expression Web den Menüpunkt Datei -> Eigenschaften.

Allgemein: diese Angaben werden im Header-Teil der Seite eingebettet. Die Basisadresse ist jene Adresse, die die Datei nach der Publikation haben wird. Wenn jemand diese Datei aus den Rechner lädt, weiß er über diesen Meta-Tag von wo sie kommt.

Formatierung: diese Angaben sind Attribute im Body-Tag. Das Hintergrundbild überdeckt die Hintergrundfarbe, außer in transparenten Bereichen. Das Hintergrundbild kann nicht skaliert werden (weil es sich nicht in einem img-Tag befindet).

Frame-Seiten

Mit Datei -> Neu -> Seite kann man den Seitentyp genauer wählen. An dieser Stelle wichtig sind die Frame-Seiten, die immer dann verwendet werden, wenn die Navigation nicht Teil derselben Seite ist.

Frameseiten teilen das Fenster in festen oder proportionalen Abständen. Es gibt zahlreiche Vorlagen dazu.

Eine Frameseite besteht aus so vielen Einzeldateien als es Frames gibt und zusätzlich aus einem Frameset, welches die Anordnung dieser Dateien am Bildschirm angibt.

Wesentlich für Frame-Seiten ist, dass ein Link in einer der Seiten sich auch auf andere Frameseiten beziehen kann. Daher ist es bei Frames wichtig, dass jede Frameseite benannt wird und dass bei einem Verweis in einem Link das Attribut target angegeben wird, das als Wert den Namen des Zielframes hat.

Intellisense

Man muss diese Tags nicht auswendig lernen aber mit der Zeit kennt man sie auswendig. Beim Lernen hilft uns ein mächtiges Tool, das „Intellisense“. Egal, an welcher Stelle man zu tippen beginnt, immer sagt uns das System, was wir an dieser Stelle tun können. Gibt man im Head-Teil eine öffnende spitze Klammer ein, sieht man die hier möglichen Tags, ebenso im Body-Teil. Aber auch innerhalb des öffnenden Tags erfährt man, welche Attribute an dieser Stelle möglich sind.

Entwurfsansicht

Die Symbolleiste Allgemein ist für diese Arbeit zutreffend. Allgemein ist eine Kombination aus Standard und Formatierung.

Das Aussehen einer Seite wird definiert durch die Struktur und das Format. Theoretisch könne man eine Seite aus einem einzigen Absatz herstellen, der durch abschnittsweise Formate sein Aussehen ändert. Aber man verwendet eine Mischung aus Struktur-Elementen (Tags) und Stilelementen (Styles).

Strukturelemente

Übung: Eingabe von 14 Absätzen der Form Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

Danach übertragen wir jedem Absatz der Reihe nach die „Formatvorlage“ und stellen den Namen der Formatvorlage (des Tags) davor. „Formatvorlage“ ist eine falsche Übersetzung, denn den Begriff „Formatvorlage“ gibt es bei Html-Dateien nicht. Den hat man von Word übernommen. Gemeint sind die in Html zur Verfügung stehenden Struktur-Tags, die man in der ersten Auswahl-Box in der Symbolleiste Allgemein findet. Diese Strukturelemente kann man ausschließlich über die Symbolleiste Allgemein zuweisen.

Ein besonders Verhalten haben ul ol und dd, denn sie schließen ihrerseits Elemente ein. ul und ol schließen li ein und dl schließt dd und dt ein.

Ergebnis

h1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

h2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

h3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

h4 tie …

h5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

h6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

Formatieren eines Absatzes

Man kann auf jeden Absatz die üblichen Absatzformatierungen linksbündig, rechtsbündig, zentriert und Blocksatz, eingerückt anwenden.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rechts Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Zentriert Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blocksatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In jedem Absatz wird das Attribut class mit einem fortlaufend nummerierten Namen auto-style eingefügt und im Kopf der Datei wird jeder diese Stile in einem Style-Sheet definiert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="de" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>2_Absatzformate</title>
    <style type="text/css">
        .auto-style1
        {
            text-align: right;
        }

        .auto-style2
        {
            text-align: center;
        }

        .auto-style3
        {
            margin-left: 40px;
        }

        .auto-style4
        {
            border-style: solid;
            border-width: 1px;
            padding: 1px 4px;
        }
    </style>
</head>

<body>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat 
cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p class="auto-style1">
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed 
eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. 
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
    </p>
    <p class="auto-style2">
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed 
eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. 
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
    </p>
    <p class="auto-style3">
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed 
eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. 
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
    </p>
    <p class="auto-style4">
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed 
eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. 
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
    </p>
</body>
</html>

Ab sofort stehen diese Style-Sheets zur Verwendung in weiteren Absätzen zur Verfügung und das Aussehen eines Absatzes kann ab sofort auf zwei Arten verändert werden:

Mit direkter Formatierung über die Symbolleiste (wirkt sich nur auf den markierten Absatz aus)

Mit indirekter Formatierung (Veränderung des Stylesheet): wirkt sich auf alle Absätze aus, die mit der Vorlage (dem StyleSheet) formatiert worden sind.

Formatvorlagen in Webseiten heiße StyleSheets. Style-Sheets können auf drei Arten verwendet werden:

Expression Web StyleSheet-Anwendung

Man kann in Expression Web genau festlegen, wie die gewünschte Formatierung in Kode abgebildet wird.

Hier legt man fest, ob bei einer Änderung eines Stils dieser Stil inline (d.h. im Tag mit dem style-Attribut) gesetzt wird oder über ein Style-Sheet innerhalb des Dokuments.

Expression Web und Formatvorlagen

Bereiche

Symbolleisten

Format

Seitenfläche formatieren

Absatz und Zeichen formatieren

Absatzformate können in jedem Tag definiert werden, Zeichen werden durch das Tag span eingerahmt. Manche Formate können sowohl als Absatz- als auch als Zeichenformat verwendet werden (zum Beispiel Schriftart) und andere wieder nur als Absatzformat (zum Beispiel Ausrichtung).

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Implizite indirekte Formatierung

Um diesen Absatz zu formatieren, müssen wir ihn in der Entwurfsansicht markieren, das Symbol „Hervorheben“ anklicken, die Farbe wählen und auf „Übernehmen“ klicken. Fertig.

Statt  steht da jetzt . Und im Kopf der Datei steht im Tag <style> der neue Stil

Das ist die Formatierungsart, die Expression Web bevorzugt verwendet, wenn man die Symbolleisten verwendet. Man könnte sie implizite indirekte Formatierung nennen. Indirekt, weil das Format nicht im Absatz selbst steht sondern im Kopf und implizit, weil der Name für das Format automatisch vergeben wird. Der Vorteil dieser Vorgangsweise ist, dass man den Stil auto-style5 auch an anderer Stelle verwenden kann.

Man kann diese automatisch vergebenen Namen auch umbenennen. Bereich -> Formatvorlagen verwalten oder Format -> CSS –Formatvorlagen -> Formatvorlagen verwalten

Indirekte Formatierung

Um einen Absatz zu formatieren kann man diesen Stil auch gezielt vergeben und dabei auch den Namen mitbestimmen, damit der Kode lesbarer ist. Wir markieren dazu einen Absatz und wählen Format -> Neue Formatvorlage

Direkte Formatierung

Es funktioniert aber auch so: Man kann die Stilbeschreibung auch mit dem Attribut style direkt in den zu formatierenden Absatz übernehmen, also so:

Man schreibt statt  jetzt . Dieser Absatz ist direkt formatiert und dadurch einmalig.

Externe Formatierung

Diese bisherigen Formate funktionieren nur in der gerade bearbeiteten Datei selbst. Wenn man aber ein bestimmtes Format auch in anderen Dateien verwenden will, muss man es in eine so genannte StyleSheet-Datei auslagern. Das geht so:

Wir erzeugen mit Datei -> Neu -> CSS eine neue Stylesheet-Datei. Die bekommt die Endung CSS. In diese Datei kopieren wir den Stil und nennen ihn zum Beispiel hinter-gelb. Diese Datei speichern wir unter mystyle.css.

Jetzt kopieren wir die automatisch generierten Stile in diese externe Datei und löschen sie gleichzeitig aus der Demo-Datei. Die Absätze erscheinen jetzt ohne Formatierung. Wir speichern diese StyleSheet-Datei unter mystile.css.

Jetzt fügen wir mit Format -> CSS Formatvorlagen -> Stylesheet anfügen diese Datei in das Html-Dokument ein. Es wird die Zeile
<link href="mystile.css" rel="stylesheet" type="text/css" />
ergänzt.

Ebenen

Mit einer Ebene wird ein Abschnitt, ein div-Tag erzeugt. Diese Ebenen können beliebige Texte, Bilder und Tabellen enthalten und vor allem, man kann sie auf der Seite positionieren und mit dem Attribut z-index übereinander anordnen.

Eine neue Ebene erzeugt man mit dem div-Symbol aus der Symbolleiste „Allgemein“.

Einfügungen

Html-Kode einfügen

Um in Expression Web ein HTML-Konstrukt einzufügen, öffnet man mit Bereiche -> Toolbox die Toolbox und wählt die Elemente aus dem Bereich HTML aus.

Eine Html-Seite