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.
