Tech­niek

Web Designer Magazine - - Webworkshop -

1. Maak een Html-do­cu­ment

De ini­eer eerst de op­bouw van het do­cu­ment. Dit is een Html-con­tai­ner die de head en bo­dy be­vat. De head-sec­tie be­vat kop­pe­lin­gen naar ex­ter­ne bron­nen zo­als de Csssty­les­heet en Ja­vascript-co­de. De bo­dy-sec­tie wordt ge­bruikt voor de zicht­ba­re con­tent die je bij stap 2 maakt.

2. Voeg Html-con­tent toe

De in­houd be­staat uit de na­vi­ga­tie en een set ar­ti­kel­con­tai­ners voor elk van de na­vi­ga­tie­sec­ties. Plaats al­le ar­ti­ke­len in een hoofd­con­tai­ner. Dat is goed voor SEO en om de pre­sen­ta­tie er­van te stroom­lij­nen. Merk op hoe elk van de na­vi­ga­tie­links naar een ar­ti­kel-id ver­wijst..

3. Co­de voor te­rug

Om­dat CSS geen mo­ge­lijk­heid heeft om te ver­wij­zen naar het voor­gaan­de ar­ti­kel, werk je daar om­heen via Ja­vascript. Maak een nieuw be­stand co­de.js met daar­in de vol­gen­de co­de. Die stelt bij het klik­ken op een van de na­vi­ga­tie­links een ken­merk da­ta-pre­vious in op het ar­ti­kel van dat mo­ment. win­dow.ad­de­vent­lis­te­ner(“load”, func­ti­on(){ var tar­get = “#”+do­cu­ment. query­se­lec­tor(“[id]”).ge­tat­tri­bu­te(“id”); win­dow.ad­de­vent­lis­te­ner(“pop­sta­te”, func­ti­on(){ if(tar­get != “” && tar­get != win­dow.lo­ca­ti­on. hash){ var no­de = do­cu­ment.query­se­lec­tor(‘[da­ta­pre­vious]’); if(no­de != null)no­de.re­mo­ve­at­tri­bu­te(“da­ta­pre­vious”); do­cu­ment.query­se­lec­tor(tar­get). se­t­at­tri­bu­te(“da­ta-pre­vious”, “”); } tar­get = win­dow.lo­ca­ti­on.hash; }); });

4. Be­gin met de CSS

Maak een nieuw be­stand ge­naamd sty­les.css. Stel in het eer­ste deel hier van de bo­dy, HTML en main-con­tai­ner zo in dat die het he­le brow­ser­ven­ster zon­der mar­ges vul­len. Stel de ach­ter­grond­kleur in en pas re­la­tie­ve po­si­ti­o­ne­ring toe.

5. Ar­ti­kel­ei­gen­schap­pen

Stel elk van de ar­ti­ke­len qua af­me­tin­gen af op de bo­ven­lig­gen­de con­tai­ner (main). We wil­len dat er­in ge­scrold kan wor­den voor in­houd die daar­bui­ten door­loopt. De ab­so­lu­te po­si­ti­o­ne­ring le­vert een po­si­tie op die is ge­re­la­teerd aan de bo­ven­lig­gen­de con­tai­ner, met een z-in­dex van 0.

7. 9.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.