Microsoft Expression Web - HTML-Layout
In diesem Kapitel lernen wir eine andere Möglichkeit, das Layout einer Seite zu gestalten. Im letzten Kapitel haben wir das Stylesheet verwendet, um die Stile auf Kopf- und Fußzeilen usw. anzuwenden. Sie können die Stile jedoch auch in der HTML-Seite selbst angeben, ohne ein zusätzliches Stylesheet zu verwenden.
Dies ist nicht die empfohlene Methode zum Entwerfen eines Layouts. Wir werden diese Technik hier jedoch nur zum Verständnis des Zwecks behandeln. Versuchen Sie, die folgenden Schritte auszuführen.
Step 1 - Fügen wir eine HTML-Seite hinzu und rufen Sie sie auf layoutdemo.html
Step 2 - Fügen Sie nun die hinzu <div> tag aus der Toolbox.
Step 3 - In der Apply Styles Klicken Sie im Bedienfeld auf New Style…
Step 4- Wenn Sie die Option Aktuelle Seite aus der Dropdown-Liste "Definieren in" auswählen, wird der Stil auf derselben HTML-Seite gespeichert. Legen Sie die Schriftart für Ihre Seite fest und wechseln Sie dann zur Kategorie Hintergrund.
Step 5- Stellen Sie die Farbe für Ihren Hintergrund ein. Sie können auch die Kategorien Rahmen, Feld und Position festlegen und dann auf OK klicken.
layoutdemo.html
Sie können sehen, dass der Stil in derselben HTML-Datei hinzugefügt wird.
<!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 = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
<style type = "text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #800000;
background-color: #C0C0C0;
padding: 8px;
margin: 8px;
width: 90%;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>Ebenso können Sie andere Stile wie Kopf- und Fußzeile, Hauptinhalt usw. hinzufügen, wie oben gezeigt.