Guide Till Web Design

Det finns ett tonvis webbsidor där ute och varje sida har en egen design. Varje design är uppbyggd på koder. Det finns Html koder, CSS koder m.m. Denna guiden är baserad på CSS koder för den fungerar på de flesta, om inte alla, webbsidor.

Anledningen till att ingen sida är sig lik är pga att källkoderna är olika. Och det bestämmer man genom att ändra koderna, CSS koderna i detta fall, vilket är webb design. Webb design är ett gemensamt namn för alla koder som man använder sig utav när man redigerar hemsidor. <sup>1



1</sup>.http://www.w3.org/standards/webdesign/ 20110217

Struktur och innehåll
Cascading Style Sheets, som förkortas CSS, är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. För att formge dokument och hemsidor har CSS använts för att åstadkomma detta, det gäller färg, justering av text, teckensnitt, och objekt mm. Allt som behövs är en enda CSS-mall och denna kan hantera tusentals dokument, bara man vet hur man gör. Även HTML är en sorts design, men CSS har fler alternativ till redigering och är därför mer avancerad men innehållet är betydligt större. Exempelvis har man möjlighet att formatera om allt och ändra massvis med effekter inom CSS, vilket inte finns med i HTML. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. Exempelvis på denna bloggen kan man klicka på design, sedan kan man redigera kodmallar och stilmall. Kodmallen är "huvudmallen" medan stilmallen är den "lokala" mallen och det är där den mesta redigeringen kommer ta plats. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.<sup>1

1</sup>.http://www.html.net/tutorials/css/lesson1.php 20110227

CSS syfte är att man ska få möjligheten att påverka utseendet av dokumentet (webbsidan) när sidorna läses i webbläsaren. Detta har dock inte varit omtyckt hos skaparna av dokumenten på grund av att webbplatsens layout, som man har sin blogg på t.ex., kan påverkas med hjälp av dessa förändringar. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för CSS är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webbplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då alltså bort helt. <sup>1

1</sup>.http://www.webdesignskolan.se/html/standards/standards.htm 20110227

Ett element på en sida är ganska svår att förklara. Det är ungefär som varje "kroppsdel" på sidan. På den här sidan finns det tre synliga element. De är markerade med röd penna på nedanstående bild.



Det första elementet kallas för header och koden för det elementet är #header. Header:n används som sidans rubrik, ungefär. Där kan man ha en bild på sig själv och berätta vad bloggen handlar om, vad man skriver om, om man till exempel har en blogg. Det är den första man tittar på när man går in på en sida så den är mycket viktig. Jag har skrivit "Guide Till Web Design" för det är just en guide jag arbetar med, inget annat.

Det andra elementet kallas för content och har #content som kodnamn. I content skriver man inläggen, innehållet -det sidan är.

Det tredje synliga elementet kallas för side och har naturligtvis #side som kodnamn. Den ligger i sidan och kallas därför för "side". I den står det arkiverat vilka inlägg man har skrivit, från vilken månad och om man har kategorisat inläggen. Det är som ett slags arkiv helt enkelt. Vissa brukar ha en porträttbild på side och något kortfattat om sig som t.ex. ålder, kön, yrke o.s.v. Det beror helt på vad det är för hemsida.

Det finns andra element som inte syns särskilt bra och det är till exempel body. Body är också ett element, men har oftast ingen fyrkant framför sig. Body brukar skrivas först av alla element och är sidans tapet, sidans grund. Hur stor du vill ha hela sidan, bakgrundsbild, -färg, -position o.s.v. redigeras i "body".

Efter varje element skriver man { och när man är klar med att ändra elementet skriver man samma tecken fast baklänges. Exempel:

#side {
background-color: #FFF;
}

Side-koden för denna sidan är:

#side {
border:7px double #000;
float:right;
width: 220px;
padding: 24px 12px 0px 12px;
background-image:url();
background-color: #FFF;
}

Margin, som det står i css-koderna, kallas för marginal på svenska. Marginalen bestämmer storleken på varje element. Exempelvis:

body {

margin: 50px 50px 0px 0px;
background-image:url();
background-color: #FFF;
background-position:top-left;
background-attachment:fixed;
background-repeat:repeat;

}

Marginalen har ingen färg och är transparent. Den övre, högra, nedre och vänstra sidan kan man själv bestämma om man ändrar på de fyra talen som är skrivna i fet stil. Det första talet "50px" står för den övre sidan av marginalen. Px står för pixlar. Nästa tal, som också är 50px står för den högra sidan av marginalen, därefter kommer den nedre och den vänstra.

Alternativt kan marginalen ha ett till fyra värden.

* marginal: 25px 50px 75px 100px;
o övre marginalen är 25px
o högermarginalen är 50px
o botten marginalen är 75 px
o vänster marginal är 100px

* marginal: 25px 50px 75px;
o övre marginalen är 25px
o höger och vänster marginalerna är 50px
o botten marginalen är 75 px

* marginal: 25px 50px;
o övre och nedre marginalerna är 25px
o höger och vänster marginalerna är 50px

* marginal: 25px;
o alla fyra marginalerna är 25px

Eftersom marginalerna inte syns brukar folk missa dem, men de är mycket viktigare än vad man tror. Det första exemplet (50px 50px 0px 0px) är marginalen för denna sidan.

---

Källa: http://www.w3schools.com/css/css_margin.asp

Tecknet semikolon ";" använder man när man har gjort en förändring av något slag och visar att det är just en förändring och inga fler. Varje förändring skall alltså ha ett semikolon. Exempel:

Body {

background-color:#FFFFFF;

background-position:top-left;

background-attachment:fixed;

}

Här har man indikerat att bakgrundsfärgen skall var vit (background-color:#FFFFFF;), bakgrundspositionen ska vara längst upp till vänster (background-position:top-left;) och bakgrundsfästet ska vara fixerat (background-attachment:fixed;). Och efter dessa tre förändringar skall semikolonet vara på plats som visas ovan. Utan semikolon är det som att du inte har "avslutat" din redigering, att den fortsätter, vilket det inte ska göra.

Små tecken, inom webb design, som man ofta lägger märke till men inte vet vilket syfte de uppfyller finns det mycket utav. Exempelvis detta tecken "{"

Det tecknet använder man när man börjar med en ny lager eller element på sidan som man designar. Till exempel rutan för själva blogginlägget är en element för sig och kallas för "content", medan rutan vid sidan om där arkivet är kallas för "side". Ännu en element är "body" som är ungefär som sidans "tapet". Den ligger underst och är samma sak som bakgrund. Exempelvis:

Body {

background-color:#FFFFFF;

}

"}" används som stor bokstav och punkt. Man börjar med den när man har skrivit vilken del av sidan man tänker redigera som exemplet visar ovan. Därefter skriver man vad man vill ändra på. I exemplet står det "background-color:" som anger vilken färg du vill ha på bakgrunden, tapeten på din sida. Sedan kommer en kod "#FFFFFF;" som indikerar att det är vit färg vi vill ha som bakgrundsfärg. Varje färg har en kod för sig och skrivs ALLTID med fyrkant framför.

Anledningen till att det är en hel rad mellan "{" är för att man ska kunna se dem tydligare. De måste dock inte ligga så. Det räcker med ett mellanrum, men det är snyggare som exemplet ovan visar.

Body { background-color:#FFFFFF; }

En text kan skrivas på flera olika sätt. Den kan vara i en specifik färg, textformat, stil, storlek o.s.v. Här är några koder för hur man kan redigera en text med koder:

• Annat typsnitt --> <span style="font-family:SKRIV TYPSNITT HÄR">Annat typsnitt</span>
  
  Exempel: <span style="font-family:Comic Sans Ms">Annat typsnitt</span>

• Storlek på texten --> <font size="STORLEK OCH PIXLAR">Text</font>
  
  Exempel: <font size="12px">Din text</font>

• Färg --------> <span style="color: FÄRGKODEN;">Text</span>
  
  Exempel: <span style="color: #FF99CC;">Text</span>

• Centrera -----> <div style="text-align: center;">Text och/eller bild</div>

OBS! om man vill ha texten längst till höger eller vänster byter man ut "center" mot "right" eller "left".

• Radbrytning -----------> <br />

• Understruken text -----> <span style="text-decoration: underline;">Din text här</span>

• Överstruken text --------> <span style="text-decoration: line-through;">Din text</span>

• Kursiv text --------> <em>Text</em>

• Maskinskriven text, terminaltext<tt>Text</tt>

• Fetstil --------><strong>Text</strong>

• Superscript^Upphöjd -------->^Text

• Subscript_Nedsänkt -------->_Text

Efter att man använder dessa koder märker man att när man avslutar en kod lägger man till ett snedstreck. Exempelvis <em>Text</em>, alltså blir det kursiverad text men i den sista koden efter Text lägger man till ett snedstreck för att "avsluta" koden. Detta gäller i princip bara när det kommer till text, men det finns undantag också.

I de större koderna som till exempel: <span style="color: #FF99CC;">Text</span> börjar man med <span style. "<" indikerar att något redigeras, "span style" indikerar att det är texten som redigeras. Därefter lägger man till ="color:#FF99CC;">. =" indikerar att "här kommer koden som skall ändras" till följd av color, som indikerar att det skall vara en färg, till följd av färgkoden "#FF99CC" som alltid ska komma med fyrkant framför och semikolon efter. Sedan avslutar man med citationstecken och >. Hela koden började med < och skall sluta med >. Sedan skriver man texten som skall ändras och avslutar återigen med </span>. Där ser vi snedstrecket som avgör att ingen annan text efter </span> skall ha den ändringen. Efter </span> får man lägga till nya ändringar om man vill.

Ibland vill man ändra på flera saker. Man vill ha både fet och kursiverad stil, dessutom skall det vara ett annat typsnitt. I de fallen kan man skriva tre olika koder efter varandra:

<strong><em><span style="font-family:Comic Sans Ms">Text</strong></em></span>

Kom ihåg, det spelar ingen roll i vilken ordning du skriver koderna, så länge de ligger där de skall vara. Exempel:


<strong><em><span style="font-family:Comic Sans Ms">Text</span></em></strong>


<em><strong><span style="font-family:Comic Sans Ms">Text</span></em></strong><sup>1

-----------
1</sup>http://www.w3schools.com/css/css_text.asp 20110217

http://www.computerhope.com/htmcolor.htm

Länken ovan är en sida som anger koderna för en mängd färger.

Som det står ovan beskrivs det hur man kan ha en bild repeterad. Allt som behövs göras är att skriva background-repeat:repeat;. Vill man inte ha den repeterad skriver man no- innan repeat: background-repeat:no-repeat;.

Repetition:

Utan repetition:

Detta gäller inte endast för body-elementet utan för alla element där bilder används över huvud taget.

---

Källa: http://www.w3schools.com/css/css_background.asp

Bakgrundsbilden och/eller färgen är, enligt mig, bland det roligaste man kan arbeta med. Man kan välja att antingen ha en färg som bakgrund. Man kan välja en bild som bakgrund, en bild som repeteras så att den täcker hela sidan eller om man vill kan man använda sig av både en bild och färg.

Bakgrundsbild (bilden ovan)
Först skriver man in body för det är just det elementet som skall ändras. Därefter tecknet "{" som man kan skriva genom att hålla inne Alt Gr och klicka på nummer 7-tangenten. Därefter skriver man in marginalen på sidan. Sedan kommer man till bakgrundsfärg och bakgrundsbild (det spelar ingen roll i vilken ordning man skriver dem, så länge de ligger i samma element).

Om man önskar sig en bild som bakgrund får man ladda upp den först så att man kan använda sig utav länken. En sida där man kan snabbt ladda upp en bild är tinypic.com. När man har laddat upp bilden får man fyra alternativ på länkar. En där det står "HTML för Websites", en annan "IMG Code for Forums & Message Boards", "URL for E-Mail & IM" och "Direct Link for Layouts". Det är det sista alternativet "Direct Link for Layouts" som vi vill använda oss utav för det är direktlänken som skall användas. Du kan testa att kopiera länken under Direct Link for Layouts, öppna en ny sida, klistra in länken i sökfältet och klicka enter på tangentbordet. Nu ska du se bilden som du har laddat upp. Om du gör det har du fått rätt länk.

Klistra in den länken mellan parentesen som står efter "background-image: url". Url står för Unifrom Resource Locator och är den formella benämningen för en webbaddress, en länk som till exempel: http://gtwd.blogg.se/.1

Bakgrundsfärg
Dessutom kan man välja vilken färg som ska ligga bakom bilden. Exemplet har färgen vit och koden för vit är #FFFFFF. Vill man ha en vit färg som bakgrund får man skriva in koden background-color: #FFFFFF;. Om man önskar en annan färg får man skriva in en annan färgkod istället för #FFFFFF. Glöm ej fyrkant framför!

body {

margin: 50px 50px 0px 0px;

background-image: url( http://susannim.blogg.se/whatever/images/2010/bg_91905517.gif );

background-color: #FFFFFF;

background-repeat: no-repeat;

background-position:top left;

background-attachment:fixed;

}

Bildbakgrundsrepetition
Därefter får man välja om man vill ha bilden repeterad så att hela webbsidan täcks, men man kan inte förstora en bild så att den sträcker ut sig istället. Det får man göra på bildredigeringsprogram som till exempel Photoshop så att bilden blir automatiskt stor som hemsidan.

För att repetera måste man sätta in koden background-repeat:repeat. Om man inte vill ha den repeterad skall man lägga till "no-" framför repeat efter kolon som det står i exemplet ovan.

body {

margin: 50px 50px 0px 0px;

background-image: url( http://susannim.blogg.se/whatever/images/2010/bg_91905517.gif );

background-color: #FFFFFF;

background-repeat:repeat;

background-position:top left;

background-attachment:fixed;

}

Bakgrundsfärg
Om man inte vill använda en bild och istället vill använda sig utav endast färg gör man helt enkelt så att man raderar bildlänken i parentesen. Då återstår endast den vita färgen. Om annan färg önskas skriver man efter kolon på background-color in koden för färgen som önskas.

body {

margin: 50px 50px 0px 0px;

background-image: url( );

background-color: #FFFFFF;

background-position:top left;

background-attachment:fixed;

background-repeat:repeat;

}

Om man vill ha en rosa bakgrund kan det se ut så här:

Som resultat blir koden:

body {

margin: 50px 50px 0px 0px;

background-image: url( );

background-color: #FF99CC;

background-position:top left;

background-attachment:fixed;

background-repeat:repeat;

}

Det finns fler kodfärger på denna sida: http://www.computerhope.com/htmcolor.htm

---

Källa: http://www.w3schools.com/css/css_background.asp 20110214

1.http://www.w3.org/Addressing/URL/Overview.html 20110215

När man skrollar på en sida brukar sidan följa med ner eller så sitter den fast. Om den sitter fast stannar den på en och samma plats oavsett hur långt ner eller upp du skrollar. Om någon del av sidan följer med när man skrollar innebär det att den inte sitter fast.

Koden för bakgrundens fäste: background-attachment:fixed. Om man vill ha den så att den skrollar ned raderar man hela den raden ”background-attachment:fixed ” eller skriver in scroll istället för fixed.

---

Källa: http://www.w3schools.com/css/css_background.asp

background-position:top left;

Koden ”background-position” bestämmer vart man vill ha bilden. Vill man ha den centrerad på sidan skriver man in center istället för top-left. Observera att alla koder är skrivna på amerikansk engelska. Alltså kan du inte skriva colour, utan du måste skriva color. Jag har valt att ha den längst upp till höger eftersom jag även valt att bilden ska repeteras. Om man väljer att repetera en bild brukar det vara för att bilden är liten men man vill ha samma bild fast som en repetition. Vill ha endast en och samma bild men vill att den ska täcka hela sidan får man göra om bildstorleken själv och hör inte till webb design.

Centrerad bild = center

Bild till höger = right

Bild till vänster = left

Bild i botten = bottom

Bild i toppen = top

Top left innebär att den ligger längst upp till höger. Du kan ändra position på bakgrundsbilden om du vill ha bilden i mitten till höger till exempel. Då blir koden background-position:right center;. (Det spelar ingen roll om man skriver right före center eller center före right.) Nu när du vet detta kan du bestämma position på bakgrundsbilden till vart du vill i princip.

---

Källa: http://www.w3schools.com/css/css_background.asp

Om du bara vill att bilderna i dina inlägg ska få en ram, ska du göra så här:

1. Gå in i din stilmall.

2. Leta upp följande kod:

.image{

3. Om där finns en rad som heter border, ta bort den i så fall och lägg sedan till följande rader:

<br /> background: #000000;<br /> padding: 2px;

Background anger vilken färg ramen ska ha, och padding anger vilken bredd ramen ska ha.

4. Spara din stilmall, så är allt klart.

Om du vill ha en ram runt precis alla dina bilder som du har på bloggen, även de som du lägger till manuellt med hjälp av html-kod, t ex i menyn eller så, då ska du göra så här:

1. Gå in i din stilmall.

2. Lägg till följande kod längst ner i din stilmall:

img{<br /> background: #000000;<br /> padding: 2px;

Background anger vilken färg ramen ska ha, och padding anger vilken bredd ramen ska ha.

3. spara din stilmall, så är allt klart.¹

¹.http://www.webdesignskolan.com/css-layout/css_layout.htm#kantlinje 20110227

Det finns två alternativ till hur man gör för att få en bild att bli en klickbar länk

Antingen kan man göra en bild till en länk i ett inlägg, eller så kanske man vill göra en klickbar bild som ligger i menyn, om man har en tävling på sin blogg t ex.

Jag ska visa hur man gör båda delarna

Vi börjar med om du ska lägga in en länkad bild i ett inlägg.

1. Ladda upp din bild på din blogg.

2. Gå sen in för att skriva ett nytt inlägg. Lägg in lite text, och när du sen vill ha din bild i inlägget, så klickar du på knappen för att lägga in en bild.

3. Välj bilden som du laddat upp i punkt 1, och klicka sen på knappen Full storlek

4. Markera nu din bild, och klicka sen på Infoga/redigera länk.

5. Fyll i adressen som du vill länka till, och om du vill att sidan skall öppnas i ett nytt fönster eller i samma. Klicka sen på infoga.

6. Spara och publicera, så ska du se att allt är klart.

Om man nu vill lägga in en länkad bild i menyn, så måste man göra på ett annat sätt:

1. Ladda upp din bild på bloggen.

2. Högerklicka på miniatyrbilden du får fram, och välj öppna länk i ny flik (FF), eller öppna i ny flik (IE).

3. Då får du fram hela bilden i en ny flik, låt den fliken vara kvar, för adressen till bilden ska vi använda senare.

4. Gå nu in i dina kodmallar.

5. Nu ska du lägga in koden för själva länken och bilden. Kopiera koden som finns i rutan nedanför:
<a href="adressen till sidan"><img src="adressen till bilden" border="0"></a>

Var du ska lägga in den beror helt på var du vill ha den, men om det är i menyn, så ska du lägga in den under <div id=”side”>

6. Nu ska du lägga in själva länken, dvs adressen till din sida du länkar till, det gör du där det står adressen till sidan och sedan så skall du lägga in adressen till bilden som du laddade upp på din blogg innan, den som ligger öppen i en ny flik. Lägg in den adressen där det står adressen till bilden.

Sen är det bara att spara din kodmall och se om det hela funkar eller inte.

Om detta var komplicerat finns ytterligare ett enklare alternativ:

1. Börja med att skriva ett nytt inlägg.

2. Markera sedan den text eller bild du vill ska vara en länk.

3. Klicka sen på ikonen som ser ut som en kedja.

4. Nu får du upp en liten ruta, där ska du fylla i adressen till sidan du länkar till, sen så väljer du om du vill att länken skall öppnas i ett nytt fönster eller i samma fönster som din blogg.

5. Sedan är det bara att klicka på skapa, så har du skapat din länk.¹

¹.http://www.webdesignskolan.se/css/css.htm#pseudoclass 20110227