Es lohnt sich, ein paar der CSS3-Layouts, um zu versuchen, um zu sehen, was man mit ihnen machen wollen, bevor Sie eine Produktions Projekt beginnen zu schaffen. Kopieren Sie den Quellcode aus dem Beispiel auf der Dynamic Drive-Website und legen Sie sie in Dateien, wie Sie erwarten, es zu benutzen.

Für die Zwecke dieses Beispiel erstellen Sie ein HTML5 mit folgendem Inhalt aus dem HTML-Code mit dem gezeigten Beispiel erhalten Datei. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 07 Ordner von der herunterladbaren Code wie TwoColumnLayout.HTML.)

 
CSS Feste Layout # 2.1- (Fixed-Feste)
840px
 
Inhalt Säule:640px
 
Linke Spalte: 200px
Fußzeile

Das Beispiel fügt weißen Raum, um den Code auf der Dynamic Drive-Website zur Verfügung gestellt für die Zwecke macht es leichter zu lesen und auch die Struktur zu zeigen, wie die erstellt mit

Das Beispiel entfernt die Dynamic Drive-Skripte, weil Sie sie nicht brauchen, um die Abschnitte mit zufälligen Inhalt zu füllen. Er stellt jedoch fest fügt die Anzahl der Pixel standardmäßig für jeden der Abschnitte verwendet wird (das Dynamic Drive Beispiel stellt fest, nur die Größe der festen linken Spalte).

Wenn Sie die CSS für diese Website zu ändern, sollten Sie auch die Noten, die Sie über den festen Spaltengrößen erstellen ändern.

Das Beispiel verwendet auch eine externe CSS-Datei. Beachten Sie die Zugabe von a

body {margin: 0-padding: 0-line-height: 1.5em-} b {font-size: 110% -} em {color: red -} # maincontainer {width: 840px; / * Breite des Hauptbehälters * / margin: 0 Auto- / *-Center Container auf Seite * /} # topsection {background: # EAEAEA-height: 90px; / * Höhe des oberen Abschnitts * /} # topsection h1 {margin: 0-padding-top: 15px;} # contentwrapper {float: left; Breite: 100% -} # contentcolumn {margin-left: 200px; / * Set linken Rand zu LeftColumnWidth * /} # Linke Spalte {float: left; width: 200px; / * Breite der linken Spalte * / margin-left: -840px; / * Set linken Rand - (MainContainerWidth) * / background: # C8FC98 -} # footer {clear: left; Breite: 100% -background: black-color: # FFF-text-align: center-padding: 4px 0- .} #footer a {color: # FFFF80 -} innertube {margin: 10px; / * Die Margen in jeder Spalte für innere DIV * / margin-top (Polsterung zur Verfügung zu stellen): 0-}

An dieser Stelle können Sie die Seite laden, darüber nachzudenken, was Sie möchten, zu ändern. Hier ist die Seite, wie sie ohne Änderungen angezeigt, nachdem es von der Website zu kopieren und den HTML von der CSS zu trennen.

Die erste Option, die Sie wollen werden, ist, die für die verschiedenen Objekte verwendeten Farben ändern. Natürlich müssen die Farben für Ihre Website, das Farbschema anzupassen. Die Vorlagen verwenden hexadezimale Farbdarstellungen. Sie sollten sie ändern diejenigen, die von anderen Vorlagen auf Ihrer Website (falls erforderlich) zu entsprechen.

Vorlagen, die auf festen Spaltenbreiten verlassen können erfordern Tweaking mit dem Rest Ihrer Website zu arbeiten. Um die gesamte Breite der Seite zu ändern, können Sie die Eigenschaft width des #maincontainer Stil ändern. Der linke Bereich Breite wird durch die Breite Eigenschaft des #leftcolumn Stil gesteuert.

Der Inhalt Scheibengröße ist die Differenz zwischen dem #maincontainer Stil Breite und der #leftcolumn Stil Breite. Dynamic Drive neigt konsistente Namensgebung zu verwenden, so dass ein Layout, das die rechte Spalte für Links verwendet würde einen #rightcolumn Stil haben, dass Sie in der Breite dieser Spalte ändern zu ändern.

Wenn Sie die Größe der #leftcolumn oder #rightcolumn Stile ändern, dann müssen Sie auch passen die margin-left-Eigenschaft des #contentcolumn Stil zu ändern.

Die Höhe des oberen Abschnitts ist nur 90px. Dies könnte ein Problem verursachen, wenn sie mit einem größeren Kopf arbeiten. Ändern Sie die Höhe Eigenschaft des #topsection Stil, um es mit anderen Header auf Ihrer Website kompatibel zu machen.

Ebenso fehlt es der Fußzeile eine tatsächliche Höhe, so dass Sie es ändern müssen eine Höhe Eigenschaft auf den #footer Stil durch Hinzufügen von jeder Seite Ihrer Website, um sicherzustellen, gleich aussieht.

Diese Vorlagen stützen sich auch auf sowohl die (Fett) und (Schwerpunkt) Tags. Obwohl beide Tags noch von HTML5 unterstützt werden, gibt es eine starke Warnung mit der Tag, es zu benutzen nur als letzten Ausweg.

Wenn Sie langfristige Nutzung dieser Vorlagen zu planen, wäre es eine gute Idee sein, das zu ersetzen, Tag-Einträge mit der oder Tags, oder besser noch, nur vermeiden, die mit und Tags vollständig zugunsten der CSS-Formatierung.

Diese Tags sind Überbleibsel aus den Tagen vor CSS machte es möglich, verschiedene Formen der Betonung und bolding mit den font-style und font-weight Eigenschaften hinzuzufügen. Das Beispiel zeigt die Tags intakt, aber die Empfehlung ist, sie zu entfernen und andere Arten von die Formatierung verwenden.