byt lankar med html-skolan

Google gbghtml.se
Denna sida använder cookies, läs mer här>>>
index Bodytaggen Logotype Lowsrc Gimp Photoshop Table Picasa PicNic Bilder i Forum Videotaggen i HTML 5


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. Vi använder även här bilder för att få det att fungera i Internet Explorer. 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">&ouml;versta
l&auml;nken </a>
<br/>
<a href="http://www.gbghtml.se">HTML-skolan</a>
<br/>
<a href="http://www.webbgbg.se">Webbhotell</a>
<br/>
<a href="http://www.drivrutiner.net">Drivrutiner</a>
<br/>
<a href="http://www.drivrutiner.net/host/money/index.php">Inkomster</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/books/index.php">B&ouml;cker</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/dlink.php">N&auml;tverk</a>
<br/>
<a href="http://www.drivrutiner.net/program/gratis.php">Gratis program</a>
<br/>
<a href="http://www.drivrutiner.net/program/download.php">Download</a>
<br/>
<a href="http://www.drivrutiner.net/program/bil/spel.php">Colin McRae</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/cfs.php">MS CFS</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/red.php">Red Baron</a>
<br/>
<a href="http://www.drivrutiner.net/program/online/spel.php">Online spel</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg dator</a>
<br/>
<a href="http://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/sok.php">Spr&aring;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: &auml; . 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 bakgrundsbilder eller foton du kan ladda ner gratis

gratis bilder
stockvault.net

Gratis bilder i alla genrer

mayang.com free textures
ca 3400 gratis bakgrunder att ladda ner.

 

eXTReMe Tracker

links
Länkar
om hur du länkar i dina hemsidor. Allt detta med href o.s.v. Jag har nu även lagt in olika tips om hur du länkar mailadresser och olika php formulär. Se mer här>>>

hur du far ut dina kreationer pa webben
FTP
Jag går här igenom olika sätt att få ut din hemsida på internet. Jag ger även tips på gratis webbhotell samt prisvärda webbhotell Jag har också skrivit om hur du bär dig åt med att ladda upp bilder samt skriva på din wordpress blogg.

tjana pengar pa din hemsida
Tjäna pengar på din hemsida
Nu när du börjat få besökare är det dags att göra pengar. Här får du ett gäng förslag.

allt om bilder
Bilder
. Allt om hur du får in bilder på hemsidan. gratis photoshop eller bildbehandlingprogram. Här hittar du även inspiration och många verktyg att framställa logotypes med. Se mer här>>>

webdesign
Design
Allt om hur du använder stylesheets eller css för att utforma designen av hemsidan. Här hittar du även gratis mallar, tillägg till din dreamweaver och gratis redigerare för hemsidan

copyright © Björn Larsen citygbg.se