Layouten met grid-areas (grid-area-template)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

2 reacties op “Layouten met grid-areas (grid-area-template)

    1. Beste evelyn. Dat is vreemd en zou niet moeten. Het is waarschijnlijk een typfout. Kun je mij jouw html en css bestand opsturen met de mail. Dan kijk ik er even naar. Stuur maar naar belinda@ (ons webadres). Vanwege spam zet ik liever niet mijn mailadres hier neer. Groet, belinda

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Layouten met behulp van de nummers van gridlijnen is handig maar voor sommigen ook wat abstract.

Daarnaast is het voor velen vrij ingewikkeld om deze css-stijlen te visualiseren naar de layout.

Voor hen is het gebruik maken van gridareas wellicht een verademing.

Je moet in het begin iets meer handelingen verrichten.

Maar daarna kun je met de css-regels direct de layout begrijpen en wijzigen.

In dit eindresultaat toon ik het principe van gridareas.

Het grid is gevuld met griditems.

Deze griditems nemen soms meerdere cellen in beslag.

Dat herken je aan de herhaling van de gridnamen.

o zie je op de eerste rij drie keer achter elkaar head staan.

De css die hiervoor zorgt is de eigenschap grid-template areas.

Daar zie je als eerste drie keer de naam 'head' terugkomen.

Omdat we een grid hebben die bestaat uit drie kolommen

moet je ook per kolom opgeven welk item hierin moet komen te staan.

Vandaar telkens rijen van drie namen bij grid-template-areas.

Elk html-element op het grid is dus voorzien van een aparte naam.

Deze zie je terug in het stijlblad bij grid-area.

Elk html-element dat je op het grid wilt plaatsen moet een eigen unieke naam krijgen.

Je ziet dat de layout zoals deze in de css-stijl staat beschreven

perfect overeen komt met de layout in de browser.

Dit gaan we nu doen in de bestanden index-.html en index-.css.

Je start als volgt.

Eerst moet je dus elk griditem een gridnaam geven.

Ga met de cursor in de css-stijl staan van de header. Dat is de classnaam .head

En typ de eigenschap grid-area, dubbele punt en daarna de naam. Ik noem deze head.

Op deze manier geef je elk griditem zijn eigen gridnaam.

Dan kan ik de css van de parent die het grid maakt uitbreiden

met de eigenschap grid-template-areas, dubbele punt.

Voer dan een aantal lege regels in en sluit af met puntkomma.

Op de lege regels gaan we nu de gridgebieden beschrijven.

Elke regel is een rij.

Je start de rij op met een quote en sluit deze ook weer af met een quote.

We hebben een layout van drie kolommen dus we moeten de inhoud van drie opeenvolgende cellen beschrijven.

De hele eerste rij wordt gevuld door de header.

Dus typ ik gescheiden met spaties drie keer head.

Dat is de naam van het gridgebied van de header.

Bewaar de wijzigingen en ververs de pagina in firefox.

Daar staat nu de header en deze neemt de hele eerste rij in beslag.

Firefox toont ook de namen die ik aan mijn griditems heb gegeven.

Omdat de overige grinditems nog niet benoemd zijn.

Komen deze in een loze vierde kolom terecht.

Maar ook die ga ik positioneren.

De hele tweede rij is voor de titel. Dus tussen quotes plaats je dan drie keer 'title'.

De derde rij bevat twee griditems de main-content die geef ik aan met 'main'..

Die mag twee kolommen in beslag nemen. En daarna de 'aside-t'.

De main-content neemt ook de eerste twee cellen van de vierde rij in beslag. Dus twee keer 'main'.

En dan de tweede aside voor de laatste cel met 'aside-b'.

En de laatste rij is voor de footer. Ik plaats drie keer 'footer'.

Bewaar je document en bekijk een voorvertoning in de browser.

Dit is wat je nu zou moeten zien.

Niet alleen in Firefox heb ik snel inzicht in mijn layout maar ook de css-stijl.

Het is allemaal heel duidelijk en overzichtelijk.

En makkelijk aan te passen. Kijk maar...

Zo eenvoudig kan ik nu de bovenste aside naast de titel plaatsen.

Als ik een cel leeg wil laten dan kan ik deze vervangen voor een punt.

Ik denk dat webdesigners van deze methode het meest gecharmeerd zijn.

Dit werk zo snel, zo efficiënt en zo ongelooflijk simpel. Hier moet je blij van worden.