Eg har tidligere lovet at eg skal skrive litt om CSS og grafikk. Og ingenting er vel en bedre knagg å henge det på en sangen der vi synger: "med blanke ark og fargestifter til.."
Vi lager oss en ny html side. Som vi kaller index.html Om du har glemt hvordan, så kan du se her. Eg tar også med linjen som henviser til css filen. Lag en ny css fil som du kaller style.css. Og som vanlig holder vi oss til Charset UTF-8
index.html:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Grafikkeksempel med CSS</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</HEAD>
<BODY>
</BODY>
</HTML>
Lagre filen index.html i en ny mappe. Lag så en undermappe som du kaller images
For øyeblikket har eg utelatt å legge inn noe under <BODY> - taggen. Grunnen til det er at vi no skal finne oss et img å lage grafikk med.
Ikke alle bilder er bra til den øvelsen vi no skal gjøre; husk at vi skal gjerne ha tekst opp bakgrunnen og da er det best å ha en motsetting av skrift fargen. Skal du ha en mørk farge på skrift er en lys bakgrunn best.
Eg søkte på google med søkeord paper.gif og fant dette bildet.
Det vi nå skal gjøre er å dekke hele bakgrunnen med dette bildet, det vil gi siden vår en effekt av å være et papir. Finn et lignende bilde og lagre det i undermappen images. For denne øvelsen er det ikke så viktig hva du velger som bakgrunnsbilde, men det er greit å ha i bakhodet at en dårlig bakgrunn fort kan ødelegge helhetsinntrykket av siden.
La oss lage filen style.css, Charset UTF-8 og lagre denne i samme mappe som vi la index.html.
Ta style.css opp i notepad og legg inn følgende kode:
body
{
background-image:url('images/paper.gif');
}
{
background-image:url('images/paper.gif');
}
Som du ser av taggen så er det området på siden din som heter BODY som vil bli endret.
Det vi ønsker å endre er bakgrunns bildet og vi legger også inn linken til dette bildet.
Som du ser har vi fremdeles ikke lagt inn noe under <BODY> i vår html fil.
Lagre begge filene og åpne index.html i en nettleser. Se om du kan finne flere bakgrunnsbilder og lek litt med de på samme måte.
Samtidig kan det være greit å gå gjennom de andre blogginnleggene eg har publisert om html og css for å teste hvordan siden nå vil se ut, med tekst og bilder oppå denne bakgrunnen.
Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!
Ingen kommentarer:
Legg inn en kommentar