Single Pix

Alla som sysslat med webdesign ett tag har hört talas om David Siegel, antingen i lovande ordalag eller minst sagt upprörda kommentarer om att han försöker skapa nya standarder för webdesign. Siegel kom på att när inte HTML, kunde placera hans objekt fritt på en sida, så kunde man göra en liten genomskinlig bild, som med hjälp av höjd och bredd kunde "puffa" objekten dit man vill ha dom.

Single Pixel Klar GIF
Det är enkelt att göra single pixlar, jag kallar dem dot-giffar. Öppna Photoshop och gör en bild som är 1x1 pixel, gör den genomskinlig eller i den färg som du vill att din bakgrund ska ha. Det är väldigt praktiskt att ha en uppsättning dot-giffar i olika färger, du kan även använda dem om du vill ha färgade linjer på en sida eller när du vill kontrollera "avstånd" mellan olika objekt.

När en dot-gif läses in i Netscapes cacheminne kan du använda den om och om igen utan att den "slöar" ner nedladdningen av sidan. Här är den vanliga bildtaggen när man använder dot-giffar:

<IMG hspace=x vspace=y SRC="../bilder/dot.gif">

X är det antal pixlar horisontellt, Y är antal pixlar vertikalt. Detta gör en tom rektangel eller kvadrat i vilken storlek som helst, som du kan använda som ett "tomrum" för att flytta omkring saker.

Att se buggar
Om saker inte går som planerat, (det är sällan dom gör det på första försöket) är det klokt att använda "dot_blå" eller "dot_gul" istället för "dot_klar". Då kan du se rektanglar som får dig att förstå och tänka på vad problemet är. Detta, (plus att sätta table border=1) gör det lättare att se hur sidan beter sig innan du slutligen gör allt till transparent.

Fasta Rektanglar
Man kan göra rektanglar i vilken storlek som helst genom att använda
<IMG width=x height=y SRC="../bilder/dot_grön.gif">
där dot_grön.gif är en 1x1 pixel i grönt och x och y är dimensionen av rektangeln som du önskar. Den gröna som du ser nedan är 8 pixel bred och 44 hög.

Skillnaden mellan hspace och width är "hspace=5" gör att du får 5 pixlar med tomrum före och efter dot-giffen.
"width=5" gör en 1x1 GIF till en 5x5 GIF.
Titta på exemplet så förstår du. Jag har använt en blå dot-gif, istället för en transparent 1x1.

Denna har 5 pixel av hspace på varje sida.


Denna har en width på 5 pixel.


Denna har 25 pixel av hspace på varje sida.


Denna har en width på 25 pixel.


Denna har en width på 25 pixel och en height på 5 pixel.


Att använda hspace är "renare" när du flyttar omkring saker.Det ger dig två gånger så mycket tomrum för varje enhet du specificerar. Om du använder en single-pixel-GIF är regeln att du får 2n+1 pixel för varje enhet av hspace. Emellanåt kan du inte få hspace kommandot att göra någonting.Detta kan hända med tabeller, därför att "tabellmotorn" försöker att göra sina egna saker, men du kan försöka med "width" när "hspace" inte fungerar.

Detta är bara en liten introduktion vad du kan göra med single-pix GIF. Du kommer säkert att hitta flera sätt att använda denna metod med dot-giffar... dot it! 
©Lena Ason
Ason|planera|storlek|bildformat|reducera färger|paletter&plattformar
gränssnitt|webdesignresurser|single-pix|e-postlista