Bilder som bakgrund i tabeller

index Bodytaggen Photoshop Table

HTML-programmering Inspira Grunder
Teori varvas med övningar och i slutet av varje kapitel finns det lösningsförslag till alla övningar.

Maxterhost mini På detta kontot lägger du upp en domän, oändligt MySQL databaser, email-konton och subdomäner. Du har 200MB plats och 5GB trafik(ca 20000 besökare per månad) MySQL, email, och ftp-konton. Gratis support, statistik, många program att installera som blog, forum och mycket färdiga mindre script typ gästbok och formmail-script . Här får du även statistik så att du kan följa vad dina besökare letar efter. Detta är ett bra budget-konto för dig som vill ha många databaser, möjlighet att lägga till flera ftp-konton eller behöver en massa mailkonton. hela fantastico paketet i kontrollpanelen(cPanel) med vilket du installerar, Chattrum, PhpMyChatt
phpBB - Forum, Coppermine(ett fotoalbum på webben), OsCommerce(en hel webshop som du installerar med ett par klick), phpnuke, InvisionBoard, MamboOpenSource(ett cms-system där du kan köra e-butik, forum och webbplats), Nucleus, PHP-Nuke, PostNuke, WordPress(en blogg där du skriver som i word), Xoops, Agora E-handelssystem plus ett tjugotal till. Själva kontot kostar 180:-. Billigare än så här blir det inte. Beställ här

Bilder som bakgrund i tabeller

Du kan använda bilder som bakgrunder även i tabeller. I nästa sekvens skall vi använda en bild som bakgrund i den vänstra kolumnen av en tabell plus i en meny på ovansidan. Vad vi gör då är att använda photoshop eller paint shop pro för att göra en smalare bild. Bilden repeterar sig själv över hela cellen. Till den vänstra kolumnen(eller cellen) har vi använt en 120 pixels bred och 4 pixels hög bild och på den kört med "gradient tool"(i photoshop). Till menyn på ovansidan har vi använt en längre smal bild. Närmare 800 pixels bred och 4 pixels hög. Denna repeterar sig själv nedåt. Vi har använt "gradient tool" även på denna för att få ett lite tuffare utseende. Koden till denna tabell ser ut så här:

<table border="1" width="80%">
<tr><td colspan="2" background="top.jpg"><a href="http://www.drivrutiner.net"><img src="knapp1.gif" width="200" height="66" alt="knapp1" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp2.gif" width="200" height="66" alt="knapp 2" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp3.gif" width="200" height="66" alt="knapp 3" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp4.gif" width="200" height="66" alt="knapp 4" border="0" /></a></td></tr>
<tr>
<td width="12%" background="left.jpg" valign="top"><a href="http://www.drivrutiner.net">översta
länken </a>
 
<a href="http://www.gbghtml.se">HTML-skolan</a>
 
<a href="http://www.webbgbg.se">Webbhotell</a>
 
<a href="http://www.drivrutiner.net">Drivrutiner</a>
 
<a href="http://www.drivrutiner.net/host/money/index.php">Inkomster</a>
 
<a href="http://www.drivrutiner.net/drivrutiner/books/index.php">Böcker</a>
 
<a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
 
<a href="http://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk</a>
 
<a href="http://www.drivrutiner.net/program/gratis.php">Gratis program</a>
 
<a href="http://www.drivrutiner.net/program/download.php">Download</a>
 
<a href="http://www.drivrutiner.net/program/bil/spel.php">Colin McRae</a>
 
<a href="http://www.drivrutiner.net/program/flyg/cfs.php">MS CFS</a>
 
<a href="http://www.drivrutiner.net/program/flyg/red.php">Red Baron</a>
 
<a href="http://www.drivrutiner.net/program/online/spel.php">Online spel</a>
 
<a href="http://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg dator</a>
 
<a href="http://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
 
<a href="http://www.drivrutiner.net/drivrutiner/sok.php">Språklexikon</a></td>
<td><img src="kodtabell.gif" width="601" height="768" alt="" /></td></tr>
</table>

I bodytaggen har jag nu använt en annan bild. Bodytaggen ser ut så här:

<body background="BirdsSAThumb.jpg"> . Du hämtar gratis bilder på http://www.atpm.com/

Kolla resultatet här

Som du ser har vi med width="80%" på tabellen gjort bredden till 80% av fönstret. I den vänstra kolumnen har vi skrivit width="12%" som background bilden left.jpg. Vi tittar på detta med bredd på celler i tabell på denna sidan. . Till knappar har jag använt en genomskinlig gif-bild som du enkelt fixar i photoshop.

Vi har även gjort bilden till bodytaggen större för att täcka hela sidan. Enklast gör du detta genom att öppna photoshop eller paint shop pro och göra bilden 1024x860 pixels stor. Texten ser lite underlig på vissa ställen. Exempelvis ett ä ser ut så här: ä . Detta för att göra bokstäverna synliga för alla webbläsare. Det är inte helt nödvändigt att var så här noga om sidan bara skall användas för enskilt bruk eller svenska besökare.

Prova att kopiera hela koden och lägg den mellan body-taggarna på din html-fil. Du kan själv ändra vilken bild du vill ha som bakgrund. Vill du använda dem som vi använder här så ladda gärna ner dem här>>> Prova dig gärna fram med olika bilder.

Detta med att använda bilder som bakgrund i tabeller går även att ordna med stylesheets. Vi går igenom stylesheets för tabell på denna sidan.

Du kan läsa lite mer om gradient tool på http://www.loriswebs.com

sxc.hu har bilder eller foton du kan ladda ner gratis