Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider?

Præsentationer af emnet: "Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider?"— Præsentationens transcript:

1 Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider? 4.Hvordan lægger man billeder og mønstre ind på baggrunde? 5.Hvordan styler man websider, så man får tekstfarver, baggrundsfarver, tekststørrelser, fonte …. etc AFLEVERINGER: Upload af Dag1-mappen fra i går upload Dag2-mappe med udkast til websider med grafik og foreløbig styling 130911 helf KEA

2 Program for Dag2 1.ca. 09.00 download af Filezilla, upload af Dag1-mappe 2.ca. 09.45 billeder – optimering, img-tag, baggrunde 3.ca. 10.30 css: inline css: embedded og ekstern css-fil 4.FROKOST Kl.: 11.20 – 11.50 5.ca. 11.50 id-attribut, class-attribut i tags 6.ca. 12.30 projektarbejde med vejledning 130911 helf KEA

3 2. Billeder img-tag 130911 helf KEA Filtyper: jpg, gif, png Optimering: opløsning (72-96), kompression, resize, beskæring

4 2. Billedøvelse 130911 helf KEA Hent et af dine billeder fra Photoshop-kurset, læg det enmappe, Dag2 Gå ind på url-adressen: http://helf.monline.dk/Dag2/dag2test.html. Tag en ”View page source” (”Vis kildekode”). http://helf.monline.dk/Dag2/dag2test.html Åbn Komodo og opret en nye fil. Copy-paste kildekoden ind i denne fil og gem den i mappen Dag2. Optimér dit billede (opløsning, størrelse, billedkvalitet), og læg det ind i html-filen med html-koden: Se i Komodos browser, om filen fungerer

5 3. css 130911 helf KEA Farver Baggrundsfarver Farvenavne, rgb-koder, hex-koder Baggrundsmønstre/billeder Fontstørrelse Font-family Font-weight Float Position Embedded css : …… Ekstern css-fil:

6 5. id og class 130911 helf KEA Id: Du har mange elementer af et tag (a, h1, p ….), og ét af dem skal styles anderledes. Løsning: du giver dette element et id, og så styler du id’er. Fantastisk side css: #megaoverskrift{font-size:50px} Class: Du har mange elementer med et bestemt tag (f.eks. a) Nogle af dem (f.eks. Links i menuen), skal styles anderledes end de andre. Løsning: du giver disse elementer en class-attribut, og styler dem samlet i css’en: menulink Css:.menupunkt {color:yellow}