Menu
• Indhold

Letvægtsgrafik

Resumé

Af John Mirland, UNI-C
03/01 2000

Afrundede felter og mønstrede baggrunde, buede knapper, streger - alt dette kan laves, så det nemt kan genbruges og fylder minimalt.

Indhold

 

Arkiv med artikler fra Designværkstedet

Som nævnt adskillige gange i diverse artikler her på Designværkstedet [1] er hastighed og afvikling af hjemmesider et centralt emne i webdesign. Det hurtigste ville naturligvis være blot at lave et sidelayout, der overhovedet ikke benytter sig af grafik, men blot med en evt. centreret tekst og en baggrundsfarve som nedenfor (Se evt. koden.):

Den tekst siden skal indeholde.

Men det er der jo ikke meget sjov ved.

 

Papir og blyant

I stedet kunne man sætte sig ned med blyant og ternet papir og tegne layoutet som man gerne ville have det. Med knapper og buede felter og hvad man ellers kunne tænke sig.

Husk at vende papiret horisontalt, så det modsvarer skærmens dimensioner.

Ved at bruge papir og blyant distancerer man sig fra koden og koncentrerer sig om selve layoutet.

Ved desuden at bruge ternet papir kan man hurtigt overskue, hvad der kan deles ind i firkanter og dermed erstattes af en tabel med defineret baggrundsfarve. På denne måde minimeres behovet for store grafikfelter, og det er kun de områder i grafikken, der ikke kan dannes ud fra "tabel-puslespillet", der i sidste ende vil indeholde grafikstumper.

Når man har placeret felter og paragraffer, handler det simpelthen om at se sig for: Hvad kan deles op i henholdsvis grafik og baggrundfarve?

En baggrundsfarve er jo blot et tag i HTML-koden: <BODY BACKGROUND="white">, og fylder intet i download.

Men hvad så med buerne? Og hvad nu hvis man gerne vil have en ternet baggrund i stedet for en massiv farveflade?

Det er her man kan bruge uhyre små bidder grafik i gif-format. Bidder der kan sammensættes til et "puslespil" og dermed illudere en større grafik uden at fylde væsentligt.

Man kan bl.a. benytte disse "minimal"-grafikker til dynamiske dokumenter, hvor der er behov for en vilkårlig generering af eksempelvis faneblade i en adressebog.

Kan man "genbruge" grafikker inden for det samme site, øges hastigheden ligeledes, da browseren cacher grafikken og derfor kun skal hente den en gang på serveren og derefter på harddisken.

Om Papir og blyant

Nyhedsbrev

Tilmeld dig til IT-temaets nyhedsbrev



 

Artikler af

John R. Mirland
 (11/07 2007)

 

Runde hjørner

Et afrundet felt med tekst ville bestå af:

En tabel med en baggrundsfarve og fire små stykker kvadratisk gif-grafik med indekseret farveskala, hvor den ene halvdel er transparent, og den anden er med affasede hjørner, der er "antialiasede" ud imod baggrundsfarven ( se eksempel).

I stedet for at have en klump grafik der ville fylde 10 - 12k har man nu et tilsvarende felt der max. fylder 3k.

 

Transparente gifs

Til at positionere felter på siden med præcis den afstand man ønsker til andre elementer, kan man benytte transparente gif-grafikker til at lægge ind i tabellen, hvor det måtte være nødvendigt:

<td width="32" height="1" valign="top">
<img width="32" height="1" src="/billeder/artik/99/transparent.gif"></td>

Se desuden kildeteksten til foregående eksempel.

 

Streger

Hvad med streger til at inddele siden med?

I stedet for at bruge en grafik kan man lave en tabel, hvis baggrundsfarve "tegner" stregen:

Tabellens dimensioner afgør således stregens samme.

 

Mønstre

Det kan være ønskeligt at have et mønster i baggrunden, men det kan nemt komme til at fylde alt for meget. Igen bør man tænke på layoutet som et puslespil, der skal gå op. De fleste mønstre består af gentagelser af det samme tema, så hvorfor ikke lave et sådant mønster som en samling "fliser"? Jo mindre jo bedre.

Man skal ved gif-grafik tage højde for, hvorvidt man vil interlace det eller ej. Interlacing får billedet til at fylde mere, men modtageren får hurtigere et midlertidigt resultat. Det belaster imidlertid CPU'en unødigt, samtidig med at den skal fylde baggrunden.

For at lave et mønstret felt på 250x100 pixels skal browseren altså eksempelvis kun hente en grafik på nogle få hundrede byte og derefter fylde baggrunden med den.

 

"Svævende" felter

Man kunne eventuelt tænke sig et layout, hvor de enkelte celler "svæver" over baggrunden.

I så fald ville man vælge en baggrundsfarve til hele siden <BODY BGCOLOR="#white"> eller evt. en gif grafik som baggrundsmønster <BODY BACKGROUND="dir/baggrund.gif"> og placere de ønskede tabeller på siden. Disse vil få en gif grafik som baggrund.

Denne gif grafik vil bestå af henholdsvis et felt på 1x1 pixels i en given farve, der adskiller sig fra baggrunden og et felt på 1x1 pixels, der er transparent.

Når en sådan grafik benyttes som tabel-baggrund, vil den fremstå som et halvvejs transparent lag svævende over sidens baggrund.

 

Husk

Planlæg layoutet! Gennemarbejd det.

Jo mere tid man bruger på at planlægge grafikken ned i detaljer, eliminere tilfældigheder og overflødigheder, jo mindre tid skal modtageren bruge i download.

 

Noter

  1. Se bl.a. Hastighed på Internettet. Jakob Nielsen har lavet en nyere artikel Usability as Barrier to Entry, hvor han bl.a. understreger vigtigheden af at specielt nye websites er meget mere brugervenlige, end allerede etablerede steder.
  2. Se artiklerne Farver I og Farver II.
  3. Uddybende læsning: