Det är verkligen supermånga som frågar mig hur jag lärt mig göra designer och om jag kan tipsa om hur man kodar en design osv. Jag tänkte nu skriva hur jag gått till väga för att komma dit jag är idag samt göra en förklaring av kodmallen och stilmallen. Från första början hade jag ett grundtema (fashion) på min blogg och det är denna som blivit min utgångspunkt med kodningen. Under mina två år har jag hela tiden förändrat min design och därför ser min stilmall ganska annorlunda ut från hur den såg ut för två år sedan. För att göra en design måste du kunna arbeta i photoshop (eller liknande program) och ju mer man arbetar i programmet desto mer kommer du så småning om kunna göra med bloggdesignen. I Photoshop gör du de flesta element som finns på din blogg, till exempel header, wrapper (vita ytan under inläggen) och sidmenyn men vissa saker går såklart att lösa i ren kodning. I min utveckling har jag haft stor hjälp av
designadinblogg.se,
webdesignskolan.se och google där jag sökt på allt jag velat få reda på även om det krävts en hel del letande.
En liten förklaring av stilmallen:
I stilmallen jobbar du med hur din blogg ska se ut, utseende, storlek, färg, placering osv.
# Denna symbol startar en sektion, efter står namnet på vad det är för en sektion (du kan själv skapa nya egna sektioner och döpa till vad du vill).
{ Denna symbol ramar in själva koderna och det är viktigt att slutsymbolen } finns med.
En liten förklaring av kodmallen:
I kodmallarna jobbar du med vart allt ska sitta. Om du har en #side i stilmallen finns det något som heter <div id="side"> i kodmallarna. I kodmallarna bestämmer du alltså vilken ordning allt ska sitta. Body (bakgrunden) ska till exempel sitta ganska högt upp i kodmallen. Det finns fyra olika kodmallar, start (indexsidan), inlägg (sidan du kommenterar på), kategori (om du klickar dig in på en kategori) och arkiv (om du klickar dig in på någon månad).
De vanligaste delarna i din stilmall och förklaring till dem:
Body: Bakgrunden på din blogg, det kan till exempel vara en färg eller en bild
Header: Den översta bilden i bloggen, före alla inlägg
Wrapper: Den vita ytan under alla dina inlägg
Content: Innehåll - det som håller ihop inläggen
Side: Sidmenyns bakgrund
Navheader: Titlar som finns i sidmenyn, till exempel "Kategorier", "Arkiv" och "Länkar"
Nav: Hur länkarna under dessa titlar ser ut, till exempel månaderna eller de olika kategorierna
(Entry headers) h3: Rubriken till varje inlägg
Entrybody: Din inläggstext
Entrymeta: Datum och klockslag då inlägget skrevs
Commentheader: Överdelen namn) av kommentaren
Commenttext: Texten som är skriven i kommentaren
Commentmeta: Datum/tid + blogg/hemsida av den som kommenterat
Vad är margin och padding och hur fungerar de?
Det är väldigt lätt att blanda ihop margin och padding vilket är något jag fortfarande gör idag. Här kommer en bild med beskriving.
Detta är vad jag tänkt bjuda på idag, jag hoppas ni tycker om inlägget! Har du frågor får du gärna ställa dem, jag svarar så gott jag kan! :)
6 kommentarer