So erstellen Sie Seitenvorlagen für Ihre HTML5 und CSS3 Site Template
Mit einem HTML-Rahmen vorhanden ist, können Sie beginnen, auf der CSS-Arbeitsseitenstile auf Ihrer Website zu erstellen. Der beste Weg, CSS3 zu integrieren ist durch die folgenden Schritte:
Beginnen Sie mit der Seitenvorlage Diagramm.
Es sollte alle Informationen haben, die Sie benötigen.
Testen Sie Ihre CSS in einem Browser.
Beginnen Sie mit einem einfachen CSS-Implementierung, die Sie haben die richtigen Namen für alle Seitenelemente gewährleistet. Ändern Sie dann die einzelnen Elemente nach Ihren Design-Dokument, zu testen, wie Sie gehen.
Implementieren Sie die CSS aus Ihrem Diagramm.
Du solltest sein Umsetzung der Entwurf, den Sie bereits erstellt haben, nicht Entwerfen Die Seite. (Das geschah bereits im diagramming Prozess.)
Speichern Sie den Entwurf ab.
Bei mehrseitigen Projekten, externen CSS in einer separaten Datei ist definitiv der Weg zu gehen. Wie Sie arbeiten, die CSS in der normalen Art und Weise speichern, so wird der Browser, es zu lesen können.
Test-und zwicken.
Die Dinge sind nie so recht, was sie mit CSS erscheinen, weil Browser nicht in gleicher Weise auf Standards entsprechen. Sie müssen sich auf andere Browser zu testen und zu optimieren. Wenn Benutzer mit älteren Technologien ein Anliegen sind, können Sie einen sekundären Stylesheet für ältere Versionen von IE verwenden. Möglicherweise möchten Sie auch eine mobile Version machen.
Wiederholen Sie für andere Vorlagen.
Wiederholen Sie diesen Vorgang für jede der anderen Vorlagen, die Sie in Ihrer Site-Diagramm identifiziert.
Das Ergebnis dieses Prozesses sollte eine Reihe von CSS-Dateien, die Sie leicht auf Ihrer Website wiederverwenden können.
Hier ist der CSS-Code für die primäre Seite:
body {background-color: # 000000-} h1 {text-align: center-font-family: sans-serif-color: white-text-shadow: 0 0 10px schwarz -} # all {background-color: white-Grenze : 1px solid schwarz-width: 800px; margin-top: 2em-margin-left: auto-margin-right: auto-min-height: 600px;} # Überschrift {background-color: # A11204-background-image: url ( "cbBackground.png") - color: # FFFFFF-height: 100px; font-size: 2em-padding-left: 1em-border-bottom: 3px solid black-margin-top: -1.5em -} # Menü {Hintergrund- image: url ( "cbBackground.png") - background-color: # A11204-color: # FFFFFF-float: left; width: 100px; min-height: 500px;} # Menü li {list-style-type: none; margin-left: -2em-margin-right: .5em-text-align: center -} # Menü a {color: # FFFFFF-Display: Block-Grenze: # A11204 3px Anfang-text-decoration: none;} # Menü . a: Hover {border: # A11204 3px Einsatz -} Inhalt {border: 3px Doppel # A11204-margin: 1em-margin-left: 110px; padding-left: 1em-padding-bottom: 1em-padding-right: 1em- border-radius: 5px; box-shadow:. 5px 5px 5px grau -} Inhalt h2 {background-color: # A11204-background-image: url ( "cbBackground.png") - color: # FFFFFF-text-align: right ;} # footer {color: # FFFFFF-background-color: # 000000-border: 1px solid # A11204-float: left; clear: both-Breite: 100% -Text-align: Zentrum}