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.
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 
).
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 ([COLOR=Red]FF0000[/COLOR]), de miderste er grønn ([COLOR=Green]00FF00[/COLOR]) og de to siste er blå ([COLOR=Blue]0000FF[/COLOR]).
Primærfarger? Ikke spør.
Hva blir alle fargene blandet sammen da? Jo - [COLOR=White]FFFFFF[/COLOR] <- 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...
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="CBilder\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.
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!
- MVH Moff
- 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.
Kode
<html> [1] <body bgcolor="000000" [2] link="00FF00" alink="FF0000" vlink="660000">
[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 ).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 ([COLOR=Red]FF0000[/COLOR]), de miderste er grønn ([COLOR=Green]00FF00[/COLOR]) og de to siste er blå ([COLOR=Blue]0000FF[/COLOR]).
Primærfarger? Ikke spør.
Hva blir alle fargene blandet sammen da? Jo - [COLOR=White]FFFFFF[/COLOR] <- 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...
Kode
<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]
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.
Kode
<a target="_top" href="http://www.freakforum.nu">Freak Forum</a>
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!
- MVH Moff
Sist endret av Moff; 30. april 2006 kl. 01:00.
