Chrome Pointer

Lär dig webbdesign - Att hitta rätt

   Då sätter vi igång! Under hela den här serien kommer jag visa hur det ser ut på Blogg.se. Jag kommer använda mig av den gamla kodningen, eftersom jag tycker den är lättare att hitta i och dessutom så är min design för komplex för att visas i det nya läget. Det är dock samma saker man gör, och då man har koll på koderna så är det här superenkelt. Det är ungefär som att spela piano utan att titta ner på tagenterna :)
 
   Innan vi börjar så föreslår jag att ni skaffar er en testblogg, där ni bara kan ludda runt och där det inte gör så mycket om något går åt skogen. Jag har t ex en underblogg som heter monokerus.blogg.se/test, och den har jag haft i flera år. Om jag vill testa något nytt gör jag det där, och det är där jag pusslar ihop mina nya designer. Och det behövs, för även fast jag är rätt van vid att koda så kan det väldigt lätt bli väldigt fel.
  Ni skapar en till blogg genom att klicka på er profilbild i övre högra hörnet.
 
   Så! Vi säger nu att ni är redo att börja koda. För att komma till det gamla designläget loggar ni in på den blogg ni vill ändra på och då ni är på sidan där ni kan se t ex statistiken trycker ni ner tagenten Alt. Då ser ni den här synen:
 
 
   Klicka på "Design".
 
   Det är nu vi har hittat till kodmallarna.
 
   Det är nu det gäller att ha koll, och vi ska gå igenom vad de här olika grejerna betyder.
   En kodmall är en grov sorts kodning. Kodmallen visar var saker och ting ska ligga. Det finns vissa saker som alltid måste finnas med i en kodmall, men det ska vi inte bekymra oss över just nu.
   Som ni ser så finns det fyra olika kodmallar - Startsida, Inlägg, Arkiv och Kategorier. Det är för att sidan ser lite annorlunda ut beroende på vart i bloggen dina läsare är. I mallen "Inlägg" finns t ex koderna för att man ska kunna kommentera på bloggen. Därför är det väldigt viktigt att man håller isär de här fyra, för annars kommer dina besökare inte kunna kommentera bloggen eller gå tillbaka och se vad du tidigare har skrivit. Jag har sett flera som gjort det misstaget, och det blir väldigt trist om man vill ha kommentarer - eller om man vill kommentera hos de som missat den detaljen.
 
   Bredvid fliken "Redigera kodmall", som vi är inne i nu, finns fliken "Redigera stilmall".
 
   Nu är det lite mer färgglatt! En stilmall kallas också för CSS-sheet. I dina kodmallar finns en länk som kopplar dem till den här CSS:en. Det är jätteviktigt. Om den länken inte finns så har kodmallen ingenting att bygga på, och då har du i princip ingen design alls. (Länken finns dock automatiskt i din blogg just nu, så du behöver inte bekymra dig över den.) I kodmallen finns den grova kodningen, men i CSS:en finns alla detaljer som gör att det ser bra ut. Det sker genom div-taggar, som jag ska ta upp i nästa avsnitt.
   Så vi har alltså fem olika mallar - Stilmallen samt fyra stycken kodmallar. De här ska inte se exakt likadana ut. Om koderna i dem alla ser exakt likadana ut är det något fel.
 
   Längst ner på alla dessa sidor finns knapparna "Förhandsgranska" och "Publicera ändringar". Båda dessa är jätteviktiga. Om du har skrivit något i en kodmall och ska gå över till nästa kodmall måste du först publicera dina ändringar, annars försvinner de. Om du har skrivit en längre kodremsa och måste gå tillbaka för att göra om det blir man rätt trött på sig själv, tro mig.
   Man kan inte använda knappen "Förhandsgranska" för mycket. Det är jätteviktigt att hela tiden veta vad man pysslar med, och då man förhandsgranskar ser man precis hur det faktiskt ser ut för stunden. Vissa script (det tar vi framöver) visas dock inte med förhandsgranskningen, och då får man publicera för att kunna se hur det ser ut.
 
   En till sak som jag säger idag, innan vi avslutar - var inte rädd för att besöka din egen blogg. Klicka på länkar, läs kommentarer, klicka på allt som går att klicka på. Varför? Jo, för att se till att kodning och design hänger ihop. Trasiga länkar är jätteirriterande tycker jag, så jag har stenkoll på mina länkar för att se till att de verkligen fungerar. Om inte annat kan du kanske se var saker ligger, så att det blir lättare för dig att hitta dem då du sedan ska koda. Jag vet t ex att mina två menyer jag har på sidorna av den här texten ligger ganska högt upp i min kodning - den högra överst och den vänstra under den.
 
 
   För att hålla det här i färskt minne fortsätter vi redan i morgon, med div-taggar :)
 
   (PS! Under hela den här serien uppskattas det om ni kommer med tips på saker som ni vill lära er! c:)






Alessandra Kinglord

Skulle vilja lära mig hur man får menyer på båda siderna.

Izabella Mcstar

Skulle vara kul om du kunde visa hur man fixar en dropdownmeny så som din! c:
Har aldrig lyckats fixa så det blir bra ._.

Cass

Header som byter bilder (alltså ett bildspel) skulle vara kul :3 men annars helt grymt !

Quinn Catforce

Hur gör man länkar?

Svar: Fortsätt läsa kursen!
Esmeralda Silverforce

Rebecca Puppyhome

Det kommer inte upp något när jag klickar på Alt, hur gör jag? :(

Svar: Blogg.se har ändrat sin layout. Nu klickar man på kugghjulet i menyn och väljer "design".
Esmeralda Silverforce

Kom ihåg mig!

Namn: (ALLA anonyma kommentarer raderas)


E-postadress: (syns endast för mig)


URL / Bloggadress:


Din Kommentar:


Trackback


Jag är Esmeralda “Esme” Silverforce, 90-talist som alltid haft ett enormt intresse för hästdatorspel. Från att ha varit en spelare av MMORPG’t Star Stable Online sedan spelets start arbetar jag nu med spelet, men mitt enorma intresse för andra spel består - och det är just de spel jag spelar som ni kan ta del av här!

Utöver denna blogg delar jag aktivt med mig av spelbilder på min Instagram @GamingbyEsme och pratar även mycket om spel på YouTube. Jag är också grundare av Jorvikipedia, som är ett slags uppslagsverk om allt som handlar om Star Stable. Ni kan läsa mer om mig och vem jag är längre ner i menyn!

Kontakt: Hitta min kontaktinformation genom att klicka på brevikonen i menyn högst upp på sidan!

Disclaimer: Bloggen är privat driven och ingenting skrivet på den är betalt material om inte annat tydligt framgår i inläggen. All min egen text samt grafik får användas om länk ges tillbaka till mig.