Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

FÅ EN BRA LAYOUT

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. :)


BILDER
   Storlek i kb
   Storleken i bredd och höjd    <-- VIKTIG
   Antalet bilder & ALT-attribut
BAKGRUND
   Bakgrund som bild och färg
   Inte störande
SKÄRMANPASSNING
   En sida för alla
FRAMES
   Allmänt
   Om man vill
ALLMÄNT
   Hårddisken är snabbare än servern

  1. BILDER
    • 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.



  2. 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.



  3. 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)).
    1. 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...

        <SCRIPT LANGUAGE="JavaScript">
        <!--
        if (top.location != location)
        top.location.href = location.href;
        //-->
        </SCRIPT>
        
        ...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.



    2. 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.
    
    
    
    



    Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
    Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]