Dynamisk Design

Introduktion

I den här boken kommer jag att lära ut hur man applicerar avancerade och dynamiska designsätt för webbplatser och datorprogram. Vi kommer att redovisa hur man skapar interaktivitet i situationer som vanligtvis inte använder sig av det. Den här boken förutsätter att du har goda färdigheter i såväl html, javaskript och allmän programmeringsteknik.

CSS Variabler

Den här artikeln förutsätter att du är van vid javascript.

Om du är webbdesigner och vill prova olika färgkonfigurationer på en webbsida kan det vara omständigt att ändra alla färgvärden på olika delar av CSSen. Ett stöd för variabler i CSS kod finns ännu inte färdig för alla webbläsare. Men tack vare det fantastiska javascriptet är det inte omöjligt. DHTML kod begränsas inte bara till de synliga objekten på sidan. Man kan modifiera alla html taggar i sidan, även de som själv finns med kod i. Detta kan man utnyttja för att skapa interaktiva mallar och csser med egenskaper som lätt kan modifieras.

Det första vi ska göra är att sätta ett handtag på style-taggen. Det går även att hämta elementet vida GetElementsByTagName, men det snabbaste sättet att grabba tag i elementet är som sagt att sätta ett ID handtag. Ett lämpligt ID är "csselm". Leta upp style taggen i din webbläsare, sätt in detta: id="csselm".

Variabler

Gå in i CSS mallen, och hitta på ett prefix som ska substitueras. Vi rekommonderar att ni startar prefixet med ett $ tecken för enkelhetens skull. Så där den dynamiska färgen ska vara, sätt $primaryColor. Direkt efter CSS elementets slut, skriv följande: <script type="text/javascript"> var csselm=document.getElementById("csselm"); csselm.innerHTML=csselm.innerHTML.replace(/$primaryColor/g,"#0077FF"); </script> Nu behöver du bara ändra färgen i skriptet för att f