PDA

View Full Version : Guide: Interaktiv skrivebordsbakgrunn + HTML for Dummies


Moff
29. april 2006, 23:57
Hvis du er av typen som sjekker de samme nettstedene med jevne mellomrom har du to valg:
- Bruk Opera, som lar deg åpne de sidene du vil ved oppstart
- Les denne guiden (takk)

Hva er en interaktiv skrivebordsbakgrunn?
Det er et bakgrunnsbilde som i dette tilfelle inneholder knapper, eller linker.
Du vet sikkert at det er mulig å benytte HTML-filer som bakgrunnsbilde.
Hvis du da kan HTML vet du allerede hva denne guiden går ut på.
Du kan lage en nettside som inneholder det bakgrunnsbildet du vil ha på PC-en din,
og deretter legge til linker til andre nettsider du daglig sjekker,
akkurat som om du lager en helt vanlig nettside. I stedet velger du å bruker denne nettsiden som bakgrunn.

Hvis du ikke kan HTML fra før:
Hvis du åpner notepad (notisblokk) og lagrer en tom fil der du vil ha den under navnet
Interaktiv.html
(du kan vel strengt tatt kalle den hva du vil, siden det er '.html' som er den vesentlige delen her)
har du utgangspunktet for den interaktive bakgrunnen din.
Det du nå har laget er en nettside som er helt hvit.
Da er det på tide å plotte inn det du vil ha der!

- Et fett bilde
- En meny

La oss begynne på toppen.

<html> [1]

<body bgcolor="000000" [2]
link="00FF00"
alink="FF0000"
vlink="660000">

DON'T PANIC!
[1] og [2]: Disse tallene er kun for referanse i denne guiden. De skal ikke stå der på ordentlig!

[1]<html> betyr bare at dette er et HTML-script.
Er der bare i tilfelle PC-en din lurer på hva i helvete du prøver å si.

[2]<body> Nå blir det vanskeligere. <body> betyr 'dette er det du ser'.
Alt det du skriver etter <body> blir å synes på nettsiden (bakgrunnen).
Altså, skal du ha en tekst på nettsiden/bakgrunnen, må denne stå etter <body>-elementet.
<body> har en god del atributter, altså funksjoner som kan legges til sammen med <body>-koden.
Eksempler på disse er link-kodene:
link - angir tekstfargen på linker (tekst som leder til en annen side). Standard er blå (0000FF).
alink - angir tekstfargen på linker som du benytter akkurat nå. Altså linker til den aktive siden.
vlink - angir tekstfargen på linker du har benyttet før, men som ikke lenger er aktive.
bgcolor="000000" - angir bakgrunsfargen for hele siden. 000000 betyr svart.
Når bakgrunnen på et objekt skal være en farge benyttes bgcolor="000000", men skal du ha et bilde som bakgrunn bruker du background="C:\Bilder\FinBil.jpg" (ROFL :p).
Alle bilder (background) vil bli i side-ved-side-stil, akkurat slik som du kan bruke på skrivebordet. Det er fint lite å gjøre med (Velg store bilder...).

Så de der tallene er farger altså?
Jada. Bill Gates kan ikke nøye seg med å si 'red' eller 'blue' så han vinner respekt ved å si 'FF0000' og '0000FF' i stedet.
0 = Svart
3 = Mørk
6 = Middels
9 = Ganske lys
C = Veldig lys
F = Hvit
Kodene består av 6 tegn. De to første er rød (FF0000), de miderste er grønn (00FF00) og de to siste er blå (0000FF).
Primærfarger? Ikke spør.
Hva blir alle fargene blandet sammen da? Jo - FFFFFF <- Hvit farge
Likedan med svart. Nå synes du sikkert at jeg stapper alt inn med teskje,
men som den tunglærte julebukk jeg er selv, vet jeg at noen vil finne det nyttig (selv om det er liten sansylighet for at akkurat de leser på nFF).

Men bakgrunnen vår har ikke blitt noe særlig forandret ennå.
Den er fremdeles bare svart...

<html>

<body bgcolor="000000"
link="00ff00"
alink="ff0000"
vlink="660000">

<table border="0" width="100%" height="100%" background="C:\Bilder\FinBil.jpg" cellspacing="15"><tr><td> [1]

<table border="0" width="20%" height="100%" align="right" bgcolor="000000">
<tr>
<td align="center" valign="top"> [2]

<a href="http://www.freakforum.nu">Freak Forum</a> [3]

Nå begynner moroa.
Et hvert HTML-script er stappa med <table>-koder. Det blir aldri nok!

[1]<table> - Et table (bord) er en kode som benyttes for å få ting nøyaktig på pikselen der du vil ha dem. Hvis du vet hva Microsoft Excel er, så er det et godt utgangspunkt for å skjønne hva et table er. Nemlig - Et rutenett!
Men før jeg går inn på akkurat det kan jeg ta for meg atributtene:
border="0" - angir tykkelsen på rammen som markerer kantene i rutenettet (table). Du kan prøve å endre verdien 0 til 1, 2, 3 osv. Da disse er svinstygge er de sjelden i bruk. Derfor er de satt til 0, usynlig.
width="100%" - angir den totale bredden på rutenettet (table). Kan oppgis i % og vanlig tall. Vanlige tall angir piksler, så 1 er nesten ikke synlig. 100 begynner å bli bra. Når du oppgir i % er det % av hele nettleservinduet. 100% vil si fra kant til kant.
height="100%" - akkurat det samme som width, bare at det er høyden det er snakk om.
background="..." - forklart lengre oppi der...
cellspacing="15" - anigr bredden fra ytterste rammekant til innerste rammekant. For å se resultat, endre border="0" til 1.

[2]<tr><td> - dette er den delen som er Excel-relatert. <tr> betyr 'ny linje', sånn som linjene 1, 2, 3 osv. på Excel. For hver <tr> du skriver hopper du en linje ned. Da gjetter du kanskje at <td> betyr kolonne? Altså på Excel A, B, C osv. Her benytter jeg bare en rute. Trenger ikke mere.
Et par atributter til:
align="center" - denne kan benyttes på de fleste elementer. center kan byttes ut med left og right. Inlysende nok, er left plassering på venstre side i vinuet osv. Standard er left, derfor skriver man aldri align="left".
valign="top" - denne benyttes i rutenett (table) for å flytte ting vertikalt inne i rutene. top kan byttes ut med bottom. Standard er midten, så middle benyttes aldri.

[3]<a href="...">Link</a> - dette er koden som lager linker på nettsider. <a> har flere atributter, men dem hadde jeg ikke tenkt å legge ut om her. Som du ser, er det teksten mellom <a> og </a> som er den sylige tekstlinken. Her kan du sette inn bilder også (<img src="C:\Bilder\FinBil.jpg" border="0">, har også atributtene width og height).
Ved linking til nettsider er det viktig å huske http:// først.

Nå kan du erstatte mine bilde-linker (FinBil.jpg) med noe seriøst og lagre filen igjen.
Da kan du se verket ditt.
Det jeg videre anbefaler er å prøve seg frem.
Dette er bare en enkel mal.

For mer avanserte hjerner kan jeg tipse om at du kan lage en link som endre bakgrunnen til en annen fil, slik at du f. eks. kan lage en 'animert' meny.
Ved å trykke på en knapp, så spretter det frem en rekke knapper, slik som Start-menyen.

<a target="_top" href="http://www.freakforum.nu">Freak Forum</a>

Prøv og feil er beste metode, as always.
Nå, hvorvidt dette egentlig er programmering gjenstår å se... Men det er jo ikke akkurat webdesign heller, er det vel? :\ Jeg sjanser og legger den her, jeg!
Lykke til! :D

- MVH Moff

milo9000
30. april 2006, 00:42
Fin guide! Men table betyr vel strengt tatt i denne sammenhengen tabell og ikke bord? :p

Thedeeq
30. april 2006, 01:02
Jeg tipser om at man også kan bruke frames, så kan man vise innholdet fra flere nettsteder på skrivebordet i Realtime.

Moff
30. april 2006, 11:49
Det betyr tabell, ja, men i HTML-sammenhengen brukes gjerne rutenett eller bord... Jeg vet egentlig ikke hvorfor :p
Frames er også genialt. Det er en teknikk som stort sett bare funker for bakgrunner, fordi mange nye nettlesere ikke takler dem...

H4g3N
13. juni 2006, 00:31
Takk for en meget lettlest og forståelig tutorial for oss som er helt blank på Html o.l.

Blir nesten thread ressurect dette, men:

Hvordan får jeg mindre avstand mellom linkene som havner på skrivebordet? Får, sånn som det ser ut nå, plass til maks 4 linker. Mulig det står forklart oppe i tutorialen, men jeg har altså ikke funnet ut av det :)

Moff
17. juni 2006, 22:31
Beklager det seine svaret, men jeg var uheldigvis på ferie.

Mener du at du vil ha krympet teksten på linkene eller noe sånt?
I så fall skriver du ganske enkelt: <font size="[verdi]">
[verdi] kan være et tall (1, -2, 4, -1 etc), og i ditt tilfelle, sett at du vil minske størrelsen
tror jeg du vil ha -2.

Dette er bare hvis jeg har forstått deg rett, da.
Hvis ikke kan det være du må endre height-atributten på table-ene eller noe slikt. :)

H4g3N
18. juni 2006, 00:57
Fant ut av det selv etter litt prøving og feiling, var slik at avstanden mellom linkene i tablen der linkene lå automatisk ble justert, noe jeg ikke visste. Blir litt vanskelig å forklare dette, men jeg fant ut av det. :)