Share
In deze zelfstudie gaan we een blogpagina maken met behulp van de volgende generatie technieken uit HTML 5 en CSS 3. De zelfstudie is bedoeld om te laten zien hoe we websites gaan bouwen wanneer de specificaties definitief zijn en de browseraanbieders deze hebben geïmplementeerd. Als u al HTML en CSS kent, moet dit gemakkelijk te volgen zijn.
Voordat we aan de slag gaan, kunt u een van onze HTML5-sjablonen of CSS-thema's gebruiken voor uw volgende project, dat wil zeggen als u een snelle en professionele oplossing nodig heeft. Of u kunt een van de ervaren ontwikkelaars van Envato Studio uitproberen die u kunnen helpen met een breed scala aan aangepaste HTML5- en CSS-projecten.
Anders is het tijd om in deze technieken te graven.
HTML 5 is de volgende hoofdversie van HTML. Het introduceert een hoop nieuwe elementen die onze pagina's semantischer zullen maken. Dit maakt het een stuk eenvoudiger voor zoekmachines en schermlezers om door onze pagina's te navigeren en de webervaring voor iedereen te verbeteren. Bovendien bevat HTML 5 ook fancy API's voor het tekenen van afbeeldingen op het scherm, het offline opslaan van gegevens, het slepen en neerzetten, en nog veel meer. Laten we beginnen met het markeren van de blogpagina.
Voordat we beginnen met het markeren van de pagina, moeten we de algemene structuur rechtzetten:
In HTML 5 zijn er specifieke tags bedoeld voor het markeren van de koptekst, navigatie, zijbalk en voettekst. Bekijk eerst de opmaak en ik zal het naderhand toelichten:
Pagina titel Pagina titel
Het lijkt nog steeds op HTML-opmaak, maar er zijn een paar dingen om op te merken:
In plaats van divs te gebruiken om verschillende delen van de pagina te bevatten, gebruiken we nu geschikte, semantische tags. Ze zullen het een stuk gemakkelijker maken voor zoekmachines en schermlezers om erachter te komen wat wat is op een pagina.
De navigatie is precies zoals we het zouden zien in HTML 4 of XHTML, met een ongeordende lijst. De sleutel is dat deze lijst in de nav-tags wordt geplaatst.
We hebben al een nieuwe sectie in het document gedefinieerd met behulp van de sectietag. Nu hebben we alleen wat inhoud nodig.
Hou je net zoveel van bloemen als wij??
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimavi, quis nostrud exercitation ullamco laboris nisi ut.
We voegen een ID toe aan de sectietag, zodat we deze later kunnen identificeren tijdens het stijlen. We gebruiken de header-tag om rond het inleidende H2-element te wikkelen. Naast het beschrijven van een heel document, moet de header-tag ook worden gebruikt om individuele secties te beschrijven.
Ons hoofdinhoudsgebied bestaat uit drie delen: de blogpost, de opmerkingen en het reactieformulier. Gebruik makend van onze kennis over de nieuwe structurele tags in HTML 5, zou het gemakkelijk moeten zijn om het te markeren.
Ga door de markup en ik zal de nieuwe elementen achteraf uitleggen.
Dit is de titel van een blogpost
geplaatst op door Mads Kjaer - 3 reacties
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio ...
We starten een nieuwe sectie en verpakken de hele blogpost in een artikel-tag. De artikel-tag wordt gebruikt om een onafhankelijke vermelding aan te geven in een blog, discussie, encyclopedie, enz. En is ideaal om hier te gebruiken. Omdat we de details van een enkele post bekijken, hebben we slechts één artikel, maar op de voorpagina van de blog verpakken we elke post in een artikel-tag.
Het header-element wordt gebruikt om de header en metadata over de blogpost te presenteren. We vertellen de gebruiker wanneer het bericht is geschreven, wie het heeft geschreven en hoeveel opmerkingen het heeft. Merk op dat de tijdstempel is ingepakt in een -tag. Deze tag is ook nieuw voor HTML 5 en wordt gebruikt om een specifieke plaats in de tijd te markeren. De inhoud van het kenmerk datetime moet zijn:
De opmerkingen markeren is vrij eenvoudig. Er worden geen nieuwe tags of attributen gebruikt.
Comments
George Washington Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimavi, quis nostrud exercitation ullamco laboris nisi ut.
Benjamin Franklin op Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimavi, quis nostrud exercitation ullamco laboris nisi ut.
Verschillende verbeteringen aan formulieren zijn geïntroduceerd in HTML 5. U hoeft de validatie aan de clientzijde van vereiste velden, e-mails, enz. Nog meer uit te voeren. De browser zorgt hier voor u.
Er zijn twee nieuwe soorten invoer, e-mail en URL. Email specificeert dat de gebruiker een geldige e-mail moet invoeren en url dat de gebruiker een geldig websiteadres moet invoeren. Als u schrijft dat vereist is als attribuut, kan de gebruiker geen leeg veld indienen. "Vereist" is een booleaans attribuut, nieuw voor HTML 5. Het betekent alleen dat het attribuut moet worden gedeclareerd zonder een waarde.
De markup van de zijbalk en voettekst is uiterst eenvoudig. Een paar secties met wat inhoud binnen de toepasselijke opzij- en voettekst-tags.
U kunt hier de definitieve, niet-gestileerde opmaak bekijken. Nu voor de styling.
CSS 3 bouwt voort op de principes over stijlen, selectors en de cascade die we zo goed kennen van eerdere versies van CSS. Het voegt tal van nieuwe functies toe, waaronder nieuwe selectors, pseudo-klassen en eigenschappen. Met deze nieuwe functies wordt het een stuk eenvoudiger om uw lay-out in te stellen. Laten we erin duiken.
Om te beginnen gaan we enkele basisregels definiëren met betrekking tot typografie, achtergrondkleur van de pagina, enz. Je zult dit alles herkennen van CSS 2.1
/ * Makeshift CSS Reset * / marge: 0; opvulling: 0; / * Laat de browser HTML 5-elementen weergeven als block * / header, footer, aside, nav, article display: block; body margin: 0 auto; breedte: 940 px; lettertype: 13px / 22px Helvetica, Arial, schreefloos; achtergrond: # f0f0f0; h2 font-size: 28px; regelhoogte: 44px; opvulling: 22px 0; h3 font-size: 18px; regelhoogte: 22 px; opvulling: 11px 0; p padding-bottom: 22px;
Eerst worden de margevereindstijl en opvulstijlen opnieuw ingesteld met een eenvoudige regel. In een productieomgeving zou ik een meer volledige CSS-reset gebruiken, zoals Eric Meyer's (voor CSS 2.1) maar voor het bereik van de tutorial zal dit doen.
Vervolgens vertellen we de browser om alle nieuwe HTML 5-elementen als blok weer te geven. De browsers zijn prima met elementen die ze niet herkennen (dit is de reden waarom HTML 5 enigszins achterwaarts compatibel is), maar ze weten niet hoe deze elementen standaard moeten worden weergegeven. We moeten ze dit vertellen totdat de norm over de hele linie is geïmplementeerd.
Merk ook op hoe ik heb gekozen om de lettertypen in pixels in plaats van ems of% te vergroten. Dit is om het progressieve karakter van de tutorial te behouden. Wanneer de grote browsers op een dag volledig klaar zijn met de implementatie van HTML 5 en CSS 3, hebben we allemaal toegang tot paginazoomen in plaats van alleen het wijzigen van de grootte van de tekst. Dit elimineert de noodzaak om formaten in relatieve eenheden te definiëren, omdat de browser de pagina toch zal schalen.
Zie hoe de pagina eruit ziet met de basisstijl die is toegepast. Nu kunnen we doorgaan met het stylen van de rest van de pagina. Er zijn geen extra stijlen vereist voor de header, dus we gaan direct naar de navigatie.
Het is belangrijk op te merken dat de breedte van het lichaam is gedefinieerd als 940px en dat het gecentreerd is. Onze navigatiebalk moet de hele breedte van het venster beslaan, dus we moeten een aantal extra stijlen toepassen:
Accentsconagua
nav positie: absoluut; links: 0; breedte: 100%; achtergrond: url ("nav_background"); We plaatsen het nav-element absoluut, lijn het uit aan de linkerkant van het venster en laat het over de hele breedte overspannen. We centreren de geneste lijst om deze binnen de grenzen van de lay-out weer te geven:
nav ul margin: 0 auto; breedte: 940 px; lijststijl: geen;
Nu zullen we enkele extra stijlen definiëren om de navigatie-items er mooier uit te laten zien en ze af te stemmen op het raster waarop de lay-out is gebaseerd. Ik heb ook een stijl toegevoegd voor het markeren van de pagina waarop de gebruiker zich bevindt en een aangepaste stijl voor de abonnementslink.
nav ul li float: left; nav ul li a display: block; margin-right: 20px; breedte: 140 px; lettergrootte: 14 px; regelhoogte: 44px; text-align: center; tekstdecoratie: geen; kleur: # 777; nav ul li a: hover color: #fff; nav ul li.selected a color: #fff; nav ul li.subscribe a margin-left: 22px; opvulling links: 33 px; text-align: left; achtergrond: url ("rss.png") left center no-repeat; De opmaak voor de introductie is vrij eenvoudig: een gedeelte met een kop en een alinea van de tekst. We zullen echter enkele nieuwe CSS 3-trucs gebruiken om het aantrekkelijker te maken.
#intro margin-top: 66px; opvulling: 44px; achtergrond: # 467612 url ("intro_background.png") repeat-x; achtergrondgrootte: 100%; grensradius: 22px; We gebruiken twee nieuwe eigenschappen. De eerste is van een achtergrondformaat, waarmee u de achtergrondafbeelding kunt schalen. In ons geval schalen we het op beide assen tot 100%. Als het vak wordt uitgevouwen terwijl we er meer inhoud aan toevoegen, wordt ook de verloopachtergrond geschaald. Dit is iets dat niet mogelijk was in CSS 2.1 zonder niet-semantische markup en verschillende browser-problemen.
De tweede nieuwe eigenschap is de grensradius, waarbij afgeronde hoeken op het element worden toegepast. De straal van onze afgeronde hoeken is 22px in elke hoek. U kunt voor elke hoek verschillende waarden opgeven of ervoor kiezen om alleen individuele hoeken af te ronden.
Helaas zijn geen van de eigenschappen volledig geïmplementeerd in de grote browsers. We kunnen echter enige ondersteuning krijgen door leverancierspecifieke kenmerken te gebruiken. Achtergrondformaat wordt ondersteund door nieuwere versies van Safari, Opera en Konqueror. Randradius wordt ondersteund door nieuwere versies van Safari en Firefox.
#intro ... / * Achtergrondformaat nog niet geïmplementeerd * / -webkit-achtergrondformaat: 100%; -o-achtergrondformaat: 100%; -html-achtergrondgrootte: 100%; / * Randradius nog niet geïmplementeerd * / -moz-border-radius: 22px; -webkit-border-radius: 22px;
Omdat we een achtergrondkleur hebben gedefinieerd, zullen er geen grote problemen zijn in browsers die geen achtergrondgrootte ondersteunen, zoals Firefox. Nu hoeven we alleen de kop en de tekst te stylen.
#intro h2, #intro p¬ † width: 336px; #intro h2 opvulling: 0 0 22px 0; font-weight: normale kleur: #fff; #intro p opvulling: 0; kleur: # d9f499;
De bloemafbeelding kan eenvoudig worden toegevoegd door #intro een tweede achtergrondafbeelding te geven, iets dat CSS 3 ondersteunt.
#intro ... achtergrond: # 467612 url ("intro_background.png") linksboven (287px 100%) repeat-x, url ("intro_flower.png") rechtsboven (653px 100%) geen herhaling; ... We geven de twee achtergrondafbeeldingen expliciete dimensies om ervoor te zorgen dat ze elkaar niet overlappen en we zijn ingesteld. Noteer de steno-notatie van de achtergrondgrootte.
Helaas ondersteunt geen enkele browser dit op betrouwbare wijze, dus we moeten het op de ouderwetse manier doen: door een inline-afbeelding op te nemen en deze te positioneren met behulp van CSS. Bekijk het laatste voorbeeld om te zien hoe het werd gedaan.
Het inhoudsgebied en de zijbalk worden naast elkaar uitgelijnd. Traditioneel zou je dit doen met behulp van drijvers, maar in CSS 3 gaan we tabellen gebruiken!
"Wat ?! Tafels?" je zou kunnen vragen en in de war kijken. Je hebt waarschijnlijk jaren geleden al geleerd dat het gebruik van tabellen voor weblay-outs een groot nee-nee is, en dat is het nog steeds. Gebruik het tabelelement nooit om een lay-out te markeren. In CSS 3 kunnen we elementen echter als tabellen laten werken zonder dat het ooit in de opmaak wordt weergegeven! Om te beginnen hebben we sommige div's nodig om de secties wat logischer te groeperen.
Alles blijft semantisch logisch, maar nu kunnen we het stylen. We willen dat de #content-div zich gedraagt als een tabel, met #mainContent en opzij als tabel-cellen. Met CSS 3 is dit heel eenvoudig:
#content weergave: tabel; #mainContent weergave: tabelcel; breedte: 620 px; opvulling rechts: 22px; opzij display: tafel-cel; breedte: 300 px;
Dat is alles! Geen zwevende, faux kolom achtergrondafbeeldingen, opruimende of samenvouwbare marges. We hebben ervoor gezorgd dat de elementen zich als een tabel gedragen en dit maakt het ons veel gemakkelijker om lay-out te doen.
De stijl van de berichtheader is nogal triviaal, dus ik ga door naar het leuke gedeelte: de lay-out met meerdere kolommen.
Meerdere tekstkolommen waren voorheen onmogelijk zonder de tekst handmatig te splitsen, maar met CSS 3 is het een fluitje van een cent, hoewel we hiervoor een div over de meerdere alinea's moeten toevoegen om met de huidige browsers te werken..
Lorem ipsum dolor sit amet…
Pellentesque ut sapien arcu ...
Vivamus vitae nulla dolor ...
...
Nu kunnen we twee eenvoudige eigenschappen toevoegen en het een dag noemen.
.blogPost div column-count: 2; kolomafstand: 22px;
We willen 2 kolommen en een opening van 22 px tussen de kolommen. De extra div is nodig omdat er momenteel geen ondersteunde manier is om een element meer dan één kolom te overspannen. In de toekomst kunt u echter de eigenschap kolom-span opgeven en kunnen we gewoon schrijven:
.blogPost column-count: 2; kolomafstand: 22px; .blogPost header column-span: all;
Natuurlijk worden de eigenschappen kolom-telling en kolom-opening alleen ondersteund door sommige browsers, Safari en Firefox. We moeten nu de leverancierspecifieke eigenschappen gebruiken.
.blogPost div / * Column-count nog niet geïmplementeerd * / -moz-column-count: 2; -webkit-kolom-telling: 2; / * Column-gap nog niet geïmplementeerd * / -moz-column-gap: 22px; -webkit-column-gap: 22px;
Als je goed naar de afbeelding in de blogpost kijkt, zie je een slagschaduw. We kunnen dit genereren met behulp van CSS 3 en de eigenschap box-shadow.
.blogPost img margin: 22px 0; vakschaduw: 3px 3px 7px # 777;
De eerste "3px" vertelt de browser waar we willen dat de schaduw horizontaal stopt. De tweede "3px" vertelt waar we willen dat de schaduw verticaal stopt. De laatste "7px" is hoe vaag de rand zou moeten zijn. Als u deze op 0 instelt, is deze volledig stabiel. Last but not least definiëren we de basiskleur van de schaduw. Deze kleur is natuurlijk vervaagd, afhankelijk van hoeveel je de schaduw vervaagt.
Het is waarschijnlijk geen verrassing dat deze eigenschap nog niet in alle browsers is geïmplementeerd. In feite werkt het alleen in Safari en moet u de leverancierspecifieke eigenschap gebruiken.
.blogPost img margin: 22px 0; -webkit-box-shadow: 3px 3px 7px # 777;
Zebrastriping, of het benadrukken van elk tweede element in een serie, heeft van oudsher het selecteren van alle elementen via javascript, dan een lus er doorheen en het markeren van alle oneven elementen. CSS 3 introduceert de pseudo-klasse "nth-child", wat het belachelijk eenvoudig maakt om dit zonder javascript te doen. We gebruiken het om de reacties met zebrastrepen te strepen.
artikel # comments: nth-child (2n + 1) opvulling: 21px; achtergrond: # E3E3E3; rand: 1px vast # d7d7d7; / * Randradius nog niet geïmplementeerd * / -moz-border-radius: 11px; -webkit-border-radius: 11px;
De vreemde waarde "2n + 1" is eigenlijk vrij simpel als je begrijpt waar het voor staat:
Je kunt ook gewoon schrijven:
artikel # comments: nth-child (odd) ...
Omdat de standaard de twee meest gebruikte waarden als afkorting, oneven en even bevat. De rest van de commentaarstijl moet eenvoudig te begrijpen zijn met uw nieuwe kennis.
Een paar CSS 3-technieken worden hergebruikt in de vormgeving van het commentaarformulier, voettekst en zijbalk. In het commentaarformulier en de voettekst heb ik hetzelfde type tabellay-outtechniek gebruikt als in de hoofdlay-out. In de zijbalk wordt grensradius gebruikt om afgeronde hoeken aan de verschillende secties toe te voegen.
Bekijk het definitieve ontwerp met alle toegepaste styling.
De pagina wordt correct weergegeven in Safari 4 en nieuwere webkit-gebaseerde browsers, omdat het de enige rendering-engine is die alle CSS 3-technieken ondersteunt die we hebben gebruikt. Firefox 3 heeft enkele problemen bij het toepassen van afgeronde hoeken op onze bloemafbeelding en het ondersteunt geen achtergrondgrootte, maar daarnaast werkt de lay-out. Ik heb ervoor gekozen om Internet Explorer te negeren omdat het een beetje hacking vereist om HTML 5 te laten werken. Je zou ook wat meer regels kunnen definiëren en alles in grote browsers kunnen laten werken, maar dit valt allemaal buiten de scope van de tutorial.
Wanneer HTML 5 en CSS 3 één dag in alle browsers worden geïmplementeerd, wordt het een stuk eenvoudiger om websites te bouwen. We zullen eindelijk kunnen stoppen met het gebruik van drijvers voor lay-out (waarvoor ze nooit waren bedoeld), en we zullen aanzienlijk minder tijd besteden aan het schrijven van javascript om onze achtergrondafbeeldingen of zebrastripe onze tabellen te schalen. Hopelijk zullen we al deze extra tijd gebruiken om een aantal lang verwaarloosde gebieden van webontwerp te bestuderen, zoals front-end optimalisatie en juiste informatiearchitectuur.
Bekijk onze HTML5-sjablonen of CSS-thema's als u een professionele, kant-en-klare oplossing voor uw volgende webproject nodig hebt.
