I detta kapitel ska jag ta upp det som är nödvändigt för att
en hemsida ska få en bra layout.
Jag tar även upp ämnen som hjälper till att förbättra din hemsida.
Du bör läsa denna sida en gång om du känner
dig redo för lite fördjupning av hur man gör hemsidor, för som sagt,
först ska du lära dig att göra en hemsida, sedan hur du förbättrar den. :)
Storleken i kb
Som vi alla vet så kan vissa bilder ta lång tid att ladda färdigt.
Detta beror på att bilden är stor kb-mässigt (Kilobytemässigt).
Detta behöver inte betyda att bilden är stor så att den tar stor yta på skärmen,
utan att den innehåller t.ex. mycket färger, kanske är animerad etc.
Eftersom en hemsida ska ta kort tid att ladda så ska man INTE ha mycket grafik,
som du ser så har min hemsida få bilder, men innehållet
är ju rikt (eller hur? ;) ).
Mitt råd är att använd ytterst få bilder och när det verkligen behövs,
ingen imponeras av en hemsida som dyker upp efter 30 sekunder.
Storleken i bredd och höjd
Som du läste så ska en bild inte vara stor kb-mässigt,
men en sak som är lika viktig är att du anger bildens
bredd och höjd, alltså sätter ut WIDTH="xxx" HEIGHT="xxx"
i IMG-taggen. Här nedan har jag satt ut 2 bilder, båda är samma bild,
men jag har angivit olika storlekar på bilderna:
OK, dessa bilder tar alltså lika lång tid att ladda,
men vad är då vitsen med att sätta ut WIDTH- och HEIGHT-attribut
när det inte blir någon skillnad? Jo, faktum är att det visst blir en skillnad,
det är bara nu det inte blir det för att bilderna är färdigladdade.
Ger du IMG-taggen WIDTH- och HEIGHT-attribut så laddas sidan färdigt fortare
i Netscape och sidan slipper att "hoppa" i Explorer.
Netscape skriver nämligen inte ut bilden innan
bilden laddats färdigt så att Netscape då vet bildens storlek.
I Explorer visas först en liten bild som visar att bilden laddar.
Först när bilden laddats färdigt ändras dess storlek till bildens riktiga
storlek. Detta får till följd att allt innehåll efter bilden "puttas"
ner då bilden behöver mer utrymme.
Om du vill att din sida ska ladda snabbare och smidigare ska du
alltså sätta in WIDTH och HEIGHT
i IMG-taggen, men du ska inte minska bilden från dess riktiga storlek,
utan skriva dess riktiga WIDTH och HEIGHT som värden.
Så har du en sida med bilder så kolla hur stor varje bild är och så sätter du in värdena
som varje bild har i WIDTH- (bredd) och HEIGHT- (höjd) attributena i varje IMG-tagg.
Ett exempel:
Låt oss säga att du har denna bild på din sida:
<IMG SRC="bild.gif">
...Så kan du istället skriva:
<IMG SRC="bild.gif" WIDTH="200" HEIGHT="100">
Du ändrar givetvis värdena "200" och "100" till de värden som passar din bild.
Detta är det viktigaste felet som dessvärre otroligt många hemsideskapare glömmer.
Antalet bilder & ALT-attribut
Nästa viktiga råd är att aldrig ha för många bilder,
och om du har det så rekommender jag att du har en
ALT-attribut i IMG-taggen. På detta sätt så kan en besökare
dra musen över bilden och få ett meddelande om vad det står
på bilden innan bilden är färdigladdad,
annars måste han vänta tills att bilden har laddats färdig.
OBSERVERA att du måste ha WIDTH och HEIGHT angivet i IMG-taggen
för att bilderna fort ska komma där de ska så att besökaren ska slippa vänta
på att de laddas färdigt.
BAKGRUND
Bakgrund som bild och färg
Om du har en bildbakgrund så se till att du har en
färgbakgrund som är i ungefär samma nyans. Detta
är viktigt då du har en bakgrund som tar lång tid
att ladda, för medan besökaren väntar på att bakgrunden
ska bli färdig så bör den vanliga bakgrunden vara
någorlunda matchande mot texten på sidan så att man
kan läsa texten som finns på sidan medan bakgrunden
laddar alternativt om besökaren tryckt på stop
så att bakgrunden inte kommer att laddas in.
Din BODY bör alltså alltid innehålla en BGCOLOR-attribut,
även om en BACKGROUND-attributen finns. Några exempel:
<BODY BACKGROUND="en_svart_bild.gif" BGCOLOR="black">
<BODY BACKGROUND="en_röd_bild.gif" BGCOLOR="red">
<BODY BACKGROUND="en_grön_bild.gif" BGCOLOR="green">
Inte störande
En viktig sak att ha på minnet när du gör/väljer bakgrund
är att bakgrunden inte ska vara störande, alltså inte ha många
olika färger i olika nyanser, inte vara animerad etc.
Kom också ihåg att kanterna ska matcha, alltså så ska den vänstra och
högra sidan vara likadana och att toppen och botten vara likadana,
annars blir bakgrunden som helhel störande, eftersom den hela tiden
upprepar sig.
Om din bakgrund är så att det är en väldigt kort men väldigt bred bild
(t.ex. om det är en bakgrund med en färgad rand till vänster så måste bilden vara
väldigt bred, eftersom visa skärmar har en upplösning på t.ex. 1280*1024.
Detta skulle få till följd att bilden upprepade sig, trots att
det ser bra ut på din dator.
Bakgrunden skulle bli väldigt ful om det var en till rand i mitten av skärmen.
SKÄRMANPASSNING
En sida för alla
När du gör din hemsida, se till att det går att se sidan
med alla skärminställningar, t.ex. så fungerar denna sida
perfekt med en skärminställning motsvarande 640*480,
vilket många sidor på internet tyvärr inte gör.
Om du vill kolla hur en hemsida på internet blir med olika skärminställningar
så kan du kolla det här:
Vilken skärminställning vill du använda? (Skärmen som öppnas är
så stor som den skärm som en vanlig surfare använder (det är lite olika på
Netscape och Explorer)).
FRAMES
Allmänt
När man kommer in på området frames så är det många som gör
många fel, vilket är en av de många anledningar som gör så
att jag placerat "frames" under svåra saker i språket HTML.
När du gör frames så bör du tänka på att sidan ska synas bra
på alla skärmupplösningar (se ovanstående layouttips).
Hur du anpassar dig är helt enkelt genom att du kollar dina
sidor med olika skärminställningar.
För att ändra skärmstorlekar
i Windows 95 & 98 så trycker du på den högra musknappen på
ditt skrivbord (desktop) och väljer egenskaper
(properties) där väljer du settings och tillsist
vad du vill ha för skärmstorlek (tryck på OK nu).
För att ändra tillbaka så gör du om det du just gjort igen,
svårare är det inte...
Tips att tänka på är att...
...Inte sätta ut noresize, då kan nämligen besökaren
själv ändra ramstorleken.
...Inte heller sätta ut scrolling="yes|auto|no",
varken med värdet yes eller no.
Varför?
Jo, om du sätter yes så blir det alltid
rullningslister, även om det inte behövs, och det är ju korkat i kubik.
Sätter du auto (vid behov) så är det samma sak som att inte sätta ut
någon SCROLLING-attribut (då blir det ju bara onödigt mycket text).
Sätter du däremot no så får du ju aldrig rullningslister, även om det behövs.
Sätt bara no om du har kollat att det fungerar med alla layouter och sätt det då
bara i t.ex. en länkframe, alltså en sida på kanten som länkar till en större sida.
Glöm inte heller att ibland så länkar folk till ens sida och låter ens sida ligga i deras
frame (jag avråder alla från att länka på detta sätt), för då har ju din frame "mindre
plats".
P.g.a. detta råder jag alla att skriva...
...I sin framesidas HEAD-tagg, alternativt i sin startsidas HEAD-tagg
(eller båda om det inte är samma sida).
Genom att använda detta script i t.ex. HEAD-taggen på din framesida
(inte på de vanliga sidorna, för då försvinner ju din framesida)
så kan du vara säker på att ingen sida länkar till din egen sida
från deras framesida och håller din egen sida i deras frame.
Scriptet tillåter nämligen inte att sidan med scriptet är i någons frame. ;)
Om man vill
Gör gärna 2 layouter på din hemsida, en med och en utan frames.
JavaScript.nu har 2 layouter, det gör så att besökare utan framesstöd
inte bara får ett meddelande som "du kan inte besöka denna sida",
utan de kommer till en annan sida där de kan navigera utan frames.
ALLMÄNT
Hårddisken är snabbare än servern
Kom alltid ihåg att du INTE ska se hur lång tid din hemsida tar att ladda
från hårddisken, detta beror på att hårddisken är MYCKET snabbare
än ett vanligt modem och en vanlig server, och även om din besökare
har ett snabbt modem och du har en snabb server så tar det ändå kortare tid
att ladda färdigt allt från hårddisken. En annan sak du bör tänka på är
att en webbläsare "cachar" allt (sparar allt) du tittar på på din hårddisk,
så om du vill se hur snabb din sida är på nätet bör du först radera dina
cachade filer och sen titta på din hemsida som ligger på någon server
på nätet. Även de bilder som du tittar på cachas.
