Microsoft Expression Web - Webseitenlayout
In diesem Kapitel werden wir das grundlegende Layout Ihrer Webseiten behandeln. Bevor wir unser Webseitenlayout erstellen, müssen wir über unseren Inhalt nachdenken und dann festlegen, wie wir diesen Inhalt präsentieren möchten, da dieser Inhalt auf unserer Website sichtbar ist.
Es liegt an uns, wie wir unsere Inhalte präsentieren, damit unsere Zuschauer unsere Website finden und dann bleiben, um sie zu überprüfen. Das Layout wird wahrscheinlich das Firmenlogo oder -banner oben, das Navigationsmenü, einen Inhaltsbereich mit mehreren Spalten und eine Fußzeile unten auf der Seite enthalten.
Bisher verwendeten Entwickler Tabellen, um diesen Look zu erzielen. In Tabellen wurde eine Gruppe von Feldern erstellt, mit denen Zeilen und Spalten erstellt wurden. Jetzt verwenden Webdesigner<div>s um die Felder zu bilden und CSS, um diese Felder auf der Seite zu platzieren.
<div> -Tag
Im Folgenden sind einige der Funktionen des <div> -Tags aufgeführt.
Das <div> -Tag definiert eine Abteilung oder einen Abschnitt in einem HTML-Dokument und erleichtert das Verwalten, Stylen und Bearbeiten dieser Abteilungen oder Abschnitte.
Es wird verwendet, um Blockelemente zu gruppieren, um sie mit CSS zu formatieren.
Browser setzen normalerweise einen Zeilenumbruch vor und nach dem div-Element.
Das <div> -Tag ist ein Element auf Blockebene.
Das <div> -Tag kann fast jedes andere Element enthalten.
Das <div> -Tag darf sich nicht in einem <p> -Tag befinden.
Beispiel
Schauen wir uns ein einfaches Beispiel an, in dem wir <div> </ div> -Tags verwenden, um die verschiedenen Felder und Stilregeln zu erstellen.
Step 1 - Öffnen Sie Expression Web und dann das index.html Seite, die wir im vorherigen Kapitel erstellt haben.
Step 2- Wie im obigen Screenshot zu sehen, ist die Codeansicht standardmäßig hervorgehoben. Sie können in arbeitenCode View oder Design ViewSie können jedoch auch die geteilte Ansicht anzeigen, in der sowohl die Codeansicht als auch die Entwurfsansicht geöffnet werden. Wählen wir also die ausSplit View Möglichkeit.
Step 3 - Die bodyElement definiert den Hauptteil des Dokuments. Um das <body> -Tag zu formatieren, müssen wir einen neuen Stil erstellen. Wählen Sie zuerst das Body-Tag in der Entwurfsansicht aus und klicken Sie dann aufNew Style…Klicken Sie im Bedienfeld „Stile anwenden“ auf das Dialogfeld „Neuer Stil“. Hier können Sie die verschiedenen Optionen für Ihren Stil definieren.
Step 4 - Der erste Schritt ist die Auswahl der body von dem SelectorDropdown-Liste und wählen Sie dann das vorhandene Stylesheet unter "Definieren in" in der Dropdown-Liste aus. Wählen Sie unter der URL die CSS-Datei aus, die wir im vorherigen Kapitel erstellt haben.
Auf der linken Seite befindet sich eine CategoryListe wie Schriftart, Hintergrund usw. und die aktuelle Schriftart werden hervorgehoben. Stellen Sie die schriftbezogenen Informationen gemäß Ihren Anforderungen ein, wie im obigen Screenshot gezeigt.
Step 5 - Wählen Sie die Background colorSie wollen. Sie können das Bild auch über die Browser-Schaltfläche für Ihren Hintergrund auswählen. Wenn Sie mit dem Hintergrund fertig sind, definieren Sie Ihre Rahmen, wenn Sie möchten.
Step 6 - Lassen Sie uns die auswählen double lineOption für den Rand und wählen Sie die Breite und Farbe auch aus den Dropdown-Listen. Wenn Sie mit dem Stil fertig sind, klicken Sie auf OK.
Step 7- Jetzt können Sie in der Entwurfsansicht sehen, dass die Hintergrundfarbe in die von uns ausgewählte Farbe geändert wird. Wenn Sie die Datei sample.css öffnen, sehen Sie, dass alle Informationen automatisch in der CSS-Datei gespeichert werden.
Step 8 - Geh zum index.html Seite erneut und ziehen Sie die <div> Klicken Sie im Bedienfeld "Toolbox" auf Ihre geöffnete Seite.
Step 9 - Über dem code view, du wirst sehen <body> und <div> Tags, klicken Sie auf <div>Tag und dann im Bereich Stile anwenden auf den neuen Stil klicken. Dadurch wird das Dialogfeld "Neuer Stil" geöffnet.
Geben Sie "#container" in das Feld "Auswahl" ein. Die Raute # ist eine ID-Auswahl. Wählen Sie in der Dropdown-Liste "Definieren in" das vorhandene Stylesheet aus und aktivieren Sie die Option "Neuen Stil auf Dokumentauswahl anwenden". Gehen Sie zur Kategorie Hintergrund.
Step 10 - Wählen Sie die Hintergrundfarbe aus, wählen Sie die weiße Farbe und gehen Sie dann zur Kategorie Box.
Step 11 - Definieren padding und margin und dann geh zum Position Kategorie
Step 12- Stellen Sie die Breite auf 90% ein. Geben Sie jedoch nicht die Höhe an, da hier der Container bei der Eingabe des Inhalts erweitert werden soll. Klicken Sie auf die Schaltfläche OK.
Fügen Sie in ähnlicher Weise Stile für Kopfzeile, obere Navigation, linke Navigation, Hauptinhalt und Fußzeile hinzu.
sample.css
Es folgt der Code in sample.css Stylesheet nach dem Hinzufügen aller oben genannten Stile.
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}index.html
Im Folgenden finden Sie den Code in der Datei index.html, nachdem Sie alle <div> -Tags hinzugefügt haben.
<!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" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Ausgabe
Ihr Seitenlayout in der Entwurfsansicht sieht wie im folgenden Screenshot aus.
