Share
In diesem Lernprogramm erstellen wir eine Blogseite mit den nächsten Generationen von HTML 5 und CSS 3. Das Lernprogramm soll zeigen, wie wir Websites erstellen, wenn die Spezifikationen fertiggestellt sind und die Browseranbieter sie implementiert haben. Wenn Sie HTML und CSS bereits kennen, sollte es leicht zu folgen sein.
Bevor Sie beginnen, sollten Sie eine unserer HTML5-Vorlagen oder CSS-Designs für Ihr nächstes Projekt in Betracht ziehen. Das heißt, wenn Sie eine schnelle und professionelle Lösung benötigen. Sie können auch einen der erfahrenen Entwickler von Envato Studio ausprobieren, der Ihnen bei einer Vielzahl von benutzerdefinierten HTML5- und CSS-Projekten helfen kann.
Ansonsten ist es an der Zeit, sich mit diesen Techniken zu beschäftigen.
HTML 5 ist die nächste Hauptversion von HTML. Es führt eine Reihe neuer Elemente ein, die unsere Seiten semantischer machen. Dies erleichtert es Suchmaschinen und Bildschirmlesern, auf unseren Seiten zu navigieren und das Web-Erlebnis für alle zu verbessern. Darüber hinaus enthält HTML 5 auch ausgefallene APIs zum Zeichnen von Grafiken auf dem Bildschirm, zum Offline-Speichern von Daten, zum Ziehen und Ablegen und vieles mehr. Beginnen wir mit dem Markieren der Blogseite.
Bevor wir mit dem Markieren der Seite beginnen, sollten wir die Gesamtstruktur gerade machen:
In HTML 5 gibt es bestimmte Tags, mit denen Kopfzeile, Navigation, Seitenleiste und Fußzeile markiert werden können. Schauen Sie sich zuerst das Markup an und ich erkläre es anschließend:
Seitentitel Seitentitel
Es sieht immer noch aus wie HTML-Markup, aber es gibt ein paar Dinge zu beachten:
Anstatt divs für verschiedene Abschnitte der Seite zu verwenden, verwenden wir jetzt entsprechende semantische Tags. Sie werden es Suchmaschinen und Bildschirmlesern viel einfacher machen, herauszufinden, was sich auf einer Seite befindet.
Die Navigation ist genau wie in HTML 4 oder XHTML mit einer ungeordneten Liste markiert. Der Schlüssel ist, dass diese Liste in den Nav-Tags steht.
Wir haben bereits einen neuen Abschnitt im Dokument mit dem Abschnittstag definiert. Jetzt brauchen wir nur etwas Inhalt.
Liebst du Blumen genauso wie wir??
Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ausübung ullamco laboris nisi ut.
Wir fügen dem Abschnitts-Tag eine ID hinzu, damit wir sie beim Stylen später identifizieren können. Wir verwenden das Header-Tag, um das einführende Element h2 zu umschließen. Neben der Beschreibung eines ganzen Dokuments sollte das Header-Tag auch zur Beschreibung einzelner Abschnitte verwendet werden.
Unser Hauptinhaltsbereich besteht aus drei Abschnitten: dem Blogpost, den Kommentaren und dem Kommentarformular. Mit unserem Wissen über die neuen strukturellen Tags in HTML 5 sollte es leicht sein, sie zu kennzeichnen.
Gehen Sie das Markup durch und ich erkläre die neuen Elemente anschließend.
Dies ist der Titel eines Blogbeitrags
Veröffentlicht am von Mads Kjaer - 3 Kommentare
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Projectus tellus eu orci imperdiet ang Rutrum lacus blandit. Cras enim nibh, Sodales ultricies Elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio…
Wir beginnen einen neuen Abschnitt und fassen den gesamten Blogeintrag in einem Artikel-Tag zusammen. Der Artikel-Tag wird verwendet, um einen unabhängigen Eintrag in einem Blog, einer Diskussion, einem Lexikon usw. zu kennzeichnen, und ist hier ideal zu verwenden. Da wir uns die Details eines einzelnen Posts ansehen, haben wir nur einen Artikel, aber auf der Startseite des Blogs würden wir jeden Beitrag in einen Artikel-Tag einschließen.
Das Header-Element wird verwendet, um den Header und die Metadaten des Blogbeitrags anzuzeigen. Wir sagen dem Benutzer, wann der Beitrag geschrieben wurde, wer ihn geschrieben hat und wie viele Kommentare er hat. Beachten Sie, dass der Zeitstempel in einem -Tag steht. Dieses Tag ist ebenfalls neu in HTML 5 und wird verwendet, um einen bestimmten Ort rechtzeitig zu markieren. Der Inhalt des datetime-Attributs sollte folgendermaßen lauten:
Das Markieren der Kommentare ist ziemlich einfach. Es werden keine neuen Tags oder Attribute verwendet.
Bemerkungen
George Washington an Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ausübung ullamco laboris nisi ut.
Benjamin Franklin bei Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ausübung ullamco laboris nisi ut.
In HTML 5 wurden verschiedene Formulierungsverbesserungen eingeführt. Sie müssen die erforderlichen Felder, E-Mails usw. auch clientseitig validieren. Dies übernimmt der Browser für Sie.
Es gibt zwei neue Arten von Eingaben, E-Mail und URL. E-Mail gibt an, dass der Benutzer eine gültige E-Mail-Adresse eingeben muss, und die URL, dass der Benutzer eine gültige Website-Adresse eingeben soll. Wenn Sie als Attribut "required" schreiben, kann der Benutzer kein leeres Feld übergeben. "Required" ist ein boolesches Attribut, neu in HTML 5. Es bedeutet lediglich, dass das Attribut ohne Wert deklariert werden soll.
Das Markup der Seitenleiste und der Fußzeile ist äußerst einfach. Einige Abschnitte mit etwas Inhalt in den entsprechenden Seiten- und Fußzeilen-Tags.
Sie können das endgültige, nicht gestaltete Markup hier anzeigen. Nun zum Styling.
CSS 3 baut auf den Prinzipien zu Stilen, Selektoren und der Kaskade auf, die wir aus früheren CSS-Versionen so gut kennen. Es fügt viele neue Funktionen hinzu, einschließlich neuer Selektoren, Pseudoklassen und Eigenschaften. Mit diesen neuen Funktionen können Sie Ihr Layout viel einfacher einrichten. Lass uns eintauchen.
Zu Beginn definieren wir einige grundlegende Regeln in Bezug auf Typografie, Hintergrundfarbe der Seite usw. Sie erkennen all dies an CSS 2.1
/ * Makeshift CSS Reset * / margin: 0; Polsterung: 0; / * Der Browser soll HTML 5-Elemente als Block darstellen * / Kopfzeile, Fußzeile, Seite, Navi, Artikel Anzeige: Block; body margin: 0 auto; Breite: 940px; Schrift: 13px / 22px Helvetica, Arial, serifenlos; Hintergrund: # f0f0f0; h2 font-size: 28px; Zeilenhöhe: 44px; Polsterung: 22px 0; h3 font-size: 18px; Zeilenhöhe: 22px; Polsterung: 11px 0; p padding-bottom: 22px;
Zuerst setzen wir die Margin- und Padding-Styles mit einer einfachen Regel zurück. In einer Produktionsumgebung würde ich ein vollständigeres CSS-Reset verwenden, z. B. Eric Meyer (für CSS 2.1), aber für den Umfang des Tutorials ist dies ausreichend.
Wir weisen den Browser dann an, alle neuen HTML 5-Elemente als Block darzustellen. Die Browser sind gut mit Elementen, die sie nicht erkennen (deshalb ist HTML 5 etwas abwärtskompatibel), sie wissen jedoch nicht, wie diese Elemente standardmäßig gerendert werden sollen. Wir müssen ihnen das sagen, bis der Standard durchgängig implementiert ist.
Beachten Sie auch, wie ich die Schriftgröße in Pixeln anstelle von Ems oder% festgelegt habe. Dies dient dazu, den progressiven Charakter des Tutorials aufrechtzuerhalten. Wenn die großen Browser eines Tages vollständig mit der Implementierung von HTML 5 und CSS 3 fertig sind, haben wir alle Zugriff auf das Seiten-Zoomen statt nur die Größenänderung von Text. Dadurch müssen Sie keine Größen in relativen Einheiten definieren, da der Browser die Seite trotzdem skaliert.
Sehen Sie, wie die Seite mit dem angewendeten Grundstil aussieht. Nun können wir den Rest der Seite gestalten. Es sind keine zusätzlichen Stile für die Kopfzeile erforderlich. Wir gehen also direkt zur Navigation.
Es ist wichtig zu beachten, dass die Breite des Körpers als 940px definiert wurde und zentriert wurde. Unsere Navigationsleiste muss sich über die gesamte Breite des Fensters erstrecken, daher müssen wir einige zusätzliche Stile anwenden:
Accentsconagua
nav position: absolut; links: 0; Breite: 100%; Hintergrund: URL ("nav_background"); Wir positionieren das nav-Element absolut, richten es links vom Fenster aus und überdecken es die gesamte Breite. Wir werden die verschachtelte Liste zentrieren, um sie innerhalb der Grenzen des Layouts anzuzeigen:
nav ul margin: 0 auto; Breite: 940px; Listenstil: keine;
Jetzt definieren wir einige zusätzliche Stile, um die Navigationselemente schöner aussehen zu lassen und sie an dem Raster auszurichten, auf dem das Layout basiert. Ich habe auch einen Stil hinzugefügt, um die Seite hervorzuheben, auf der sich der Benutzer befindet, und ein benutzerdefiniertes Design für den Abonnement-Link.
nav ul li float: left; nav ul li a display: block; Rand rechts: 20px; Breite: 140px; Schriftgröße: 14px; Zeilenhöhe: 44px; Text ausrichten: Mitte; Textdekoration: keine; Farbe: # 777; nav ul li a: hover color: #fff; nav ul li.wählte eine color: #fff; nav ul li.subscribe a margin-left: 22px; Polsterung links: 33px; Text ausrichten: links; Hintergrund: URL ("rss.png") linke Mitte keine Wiederholung; Das Markup für die Einführung ist ziemlich einfach: Ein Abschnitt mit einer Überschrift und einem Textabschnitt. Wir werden jedoch einige neue CSS 3-Tricks verwenden, um es attraktiver zu machen.
#intro margin-top: 66px; Polsterung: 44px; Hintergrund: # 467612 URL ("intro_background.png") repeat-x; Hintergrundgröße: 100%; Grenzradius: 22px; Wir verwenden zwei neue Eigenschaften. Die erste hat eine Hintergrundgröße, mit der Sie das Hintergrundbild skalieren können. In unserem Fall skalieren wir es auf beiden Achsen auf 100%. Wenn das Feld erweitert wird, wenn mehr Inhalt hinzugefügt wird, wird auch der Hintergrund mit Farbverlauf skaliert. Dies war in CSS 2.1 nicht möglich ohne nicht-semantisches Markup und verschiedene Browserprobleme.
Die zweite neue Eigenschaft ist der Grenzradius, der dem Element abgerundete Ecken zuweist. Der Radius unserer abgerundeten Ecken beträgt in jeder Ecke 22px. Sie können für jede Ecke andere Werte angeben oder nur einzelne Ecken abrunden.
Leider ist keine der Eigenschaften vollständig in den wichtigsten Browsern implementiert. Wir können jedoch Unterstützung erhalten, indem Sie herstellerspezifische Attribute verwenden. Die Hintergrundgröße wird von neueren Versionen von Safari, Opera und Konqueror unterstützt. Der Randradius wird von neueren Versionen von Safari und Firefox unterstützt.
#intro … / * Hintergrundgröße noch nicht implementiert * / -webkit-Hintergrundgröße: 100%; -o-Hintergrundgröße: 100%; -khtml-Hintergrundgröße: 100%; / * Randradius noch nicht implementiert * / -moz-Randradius: 22px; -webkit-border-radius: 22px;
Da wir eine Hintergrundfarbe definiert haben, gibt es keine größeren Probleme in Browsern, die keine Hintergrundgröße unterstützen, wie z. B. Firefox. Jetzt müssen wir nur noch die Überschrift und den Text formatieren.
#intro h2, #intro p † width: 336px; #intro h2 padding: 0 0 22px 0; Schriftgewicht: normale Farbe: #fff; #intro p padding: 0; Farbe: # d9f499;
Das Blumenbild kann leicht hinzugefügt werden, indem #intro ein zweites Hintergrundbild gibt, das von CSS 3 unterstützt wird.
#intro … background: # 467612 url ("intro_background.png") oben links (287px 100%) repeat-x, url ("intro_flower.png") oben rechts (653px 100%) no-repeat;… Wir geben den beiden Hintergrundbildern explizite Bemaßungen, um sicherzustellen, dass sie sich nicht überlappen, und wir sind festgelegt. Beachten Sie die Kurzschreibweise der Hintergrundgröße.
Leider unterstützt noch kein Browser dies zuverlässig, so dass wir es auf die alte Art und Weise tun müssen: indem wir ein Inline-Bild einfügen und es mit CSS positionieren. Sehen Sie sich das letzte Beispiel an, um zu sehen, wie es gemacht wurde.
Der Inhaltsbereich und die Seitenleiste werden nebeneinander ausgerichtet. Normalerweise würden Sie dies mit Floats tun, aber in CSS 3 werden Tabellen verwendet!
"Was ?! Tabellen?" Sie könnten fragen und verwirrt aussehen. Sie haben wahrscheinlich vor Jahren gelernt, dass die Verwendung von Tabellen für das Weblayout ein großes No-No ist und immer noch ist. Sie sollten niemals das table-Element verwenden, um ein Layout zu markieren. In CSS 3 können Elemente jedoch wie Tabellen verhalten werden, ohne dass sie jemals im Markup angezeigt werden. Zu Beginn benötigen wir einige Divs, um die Abschnitte etwas logischer zu gruppieren.
Alles macht immer noch semantisch Sinn, aber jetzt können wir es gestalten. Wir möchten, dass sich #content div wie eine Tabelle verhält, mit #mainContent und neben Tabellenzellen. Mit CSS 3 ist dies sehr einfach:
#content Anzeige: Tabelle; #mainContent Anzeige: Tabellenzelle; Breite: 620px; Polsterung rechts: 22px; beiseite Anzeige: Tabellenzelle; Breite: 300px;
Das ist alles! Keine schwebenden Hintergrundbilder mehr, keine Spalten oder Randbereiche. Wir haben die Elemente so gemacht, dass sie sich wie eine Tabelle verhalten, was uns das Layout wesentlich einfacher macht.
Das Styling des Post-Headers ist eher trivial, also gehe ich zum lustigen Teil über: dem mehrspaltigen Layout.
Mehrere Textspalten waren bisher ohne manuelles Teilen des Texts nicht möglich, aber mit CSS 3 ist dies ein Kinderspiel, obwohl wir ein div um die mehreren Absätze hinzufügen müssen, damit dies mit aktuellen Browsern funktioniert.
Lorem ipsum dolor sitzen amet…
Pellentesque ut sapien arcu…
Vivamus vitae nulla dolor…
…
Jetzt können wir zwei einfache Eigenschaften hinzufügen und es einen Tag nennen.
.blogPost div Spaltenanzahl: 2; Spaltenlücke: 22px;
Wir wollen 2 Spalten und eine Lücke von 22px zwischen den Spalten. Das zusätzliche div ist erforderlich, da es derzeit keine unterstützte Methode gibt, um ein Element mehr als eine Spalte zu überspannen. In der Zukunft können Sie jedoch die column-span -Eigenschaft angeben, und wir könnten einfach schreiben:
.blogPost Spaltenanzahl: 2; Spaltenlücke: 22px; .blogPost-Header column-span: all;
Natürlich werden die Eigenschaften für die Spaltenanzahl und die Spaltenlücke nur von einigen Browsern, Safari und Firefox, unterstützt. Wir müssen zunächst die herstellerspezifischen Eigenschaften verwenden.
.blogPost div / * Spaltenanzahl noch nicht implementiert * / -moz-column-count: 2; -webkit-column-count: 2; / * Spaltenlücke noch nicht implementiert * / -moz-Spaltenlücke: 22px; -webkit-Spaltenlücke: 22px;
Wenn Sie sich das Bild im Blogbeitrag genau ansehen, wird ein Schattenwurf angezeigt. Wir können dies mit CSS 3 und der Box-Shadow-Eigenschaft generieren.
.blogPost img margin: 22px 0; Box-Schatten: 3px 3px 7px # 777;
Das erste "3px" sagt dem Browser, wo der Schatten horizontal stehen soll. Das zweite "3px" gibt an, wo der Schatten senkrecht stehen soll. Das letzte "7px" ist, wie unscharf die Grenze sein soll. Wenn Sie den Wert auf 0 setzen, ist der Wert vollständig. Last but not least definieren wir die Grundfarbe des Schattens. Diese Farbe ist natürlich verblasst, je nachdem, wie stark Sie den Schatten verwischen.
Kein Wunder, dass diese Eigenschaft noch nicht in allen Browsern implementiert ist. Tatsächlich funktioniert es nur in Safari, und Sie müssen die herstellerspezifische Eigenschaft verwenden.
.blogPost img margin: 22px 0; -webkit-box-shadow: 3px 3px 7px # 777;
Beim Zebra-Striping oder beim Hervorheben jedes zweiten Elements einer Serie werden traditionell alle Elemente über Javascript ausgewählt, anschließend durchlaufen und alle ungeraden Elemente hervorgehoben. CSS 3 führt die Pseudo-Klasse "nth-child" ein, was es einfach macht, dies ohne Javascript zu tun. Wir verwenden es, um die Kommentare mit einem Zebra-Streifen zu versehen.
Abschnitt # Kommentarartikel: nth-child (2n + 1) padding: 21px; Hintergrund: # E3E3E3; Rand: 1px fest # d7d7d7; / * Border-radius noch nicht implementiert * / -moz-border-radius: 11px; -webkit-border-radius: 11px;
Der seltsame Wert "2n + 1" ist eigentlich ziemlich einfach, wenn Sie verstehen, wofür es steht:
Alternativ können Sie einfach schreiben:
Artikel zu Abschnitt #-Kommentaren: n-Kind (ungerade) …
Da der Standard die zwei am häufigsten verwendeten Werte als Kürzel, ungerade und gerade enthält. Der Rest des Kommentarstils sollte mit Ihrem neuen Wissen leicht verständlich sein.
Einige CSS 3-Techniken werden in der Gestaltung von Kommentarformular, Fußzeile und Seitenleiste wiederverwendet. Im Kommentarformular und in der Fußzeile habe ich dieselbe Art der Tabellenlayouttechnik verwendet, die im Hauptlayout verwendet wird. In der Seitenleiste wird der Randradius verwendet, um den verschiedenen Abschnitten abgerundete Ecken hinzuzufügen.
Sehen Sie sich das endgültige Design mit allen Stilen an.
Die Seite wird in Safari 4 und neueren Webkit-basierten Browsern korrekt dargestellt, da sie die einzige Rendering-Engine ist, die alle von uns verwendeten CSS 3-Techniken unterstützt. Firefox 3 hat einige Probleme beim Anbringen abgerundeter Ecken an unserem Blumenbild und unterstützt keine Hintergrundgröße. Das Layout funktioniert jedoch auch. Ich habe mich dazu entschieden, den Internet Explorer zu ignorieren, da ein bisschen Hacking erforderlich ist, damit HTML 5 funktioniert. Sie können auch einige weitere Regeln definieren und alles in den gängigen Browsern zum Laufen bringen. Dies alles liegt jedoch außerhalb des Tutorials.
Wenn HTML 5 und CSS 3 eines Tages in allen Browsern implementiert sind, wird das Erstellen von Websites wesentlich einfacher. Wir werden endlich aufhören können, Floats für das Layout zu verwenden (wofür sie nie gedacht waren), und wir werden viel weniger Zeit damit verbringen, Javascript zu schreiben, um unsere Hintergrundbilder zu skalieren oder unsere Tabellen mit Zebrastreifen zu skalieren. Wir hoffen, dass wir diese zusätzliche Zeit nutzen werden, um einige lange vernachlässigte Bereiche des Webdesigns zu untersuchen, wie z. B. die Front-End-Optimierung und die richtige Informationsarchitektur.
Werfen Sie einen Blick auf unsere HTML5-Templates oder CSS-Themes - wenn Sie eine professionelle, vorgefertigte Lösung für Ihr nächstes Webprojekt benötigen.
