Dreamweaver, CSS og eksterne applikationer Fjerde øvelsesgennemgang Onsdag den 20. juni Webkommunikation 2007 v/ Niels Christian Nielsen.

Præsentationer af emnet: "Dreamweaver, CSS og eksterne applikationer Fjerde øvelsesgennemgang Onsdag den 20. juni Webkommunikation 2007 v/ Niels Christian Nielsen."— Præsentationens transcript:

1 Dreamweaver, CSS og eksterne applikationer Fjerde øvelsesgennemgang Onsdag den 20. juni Webkommunikation 2007 v/ Niels Christian Nielsen

2 Programmet i dag Dreamweaver igen, metadata, CSS youtube-implementering, flash-implementering, fil-implementering

3 Dreamweaver Værktøjer igen Metadata Keywords: til søgemaskineoptimering (menu: Insert > HTML > head tags > keywords) Title: vises i browservinduets top (findes lige under Insert-værktøjskassen)

4 Cascading Style Sheets (CSS) - Definerer formen på indholdet. - Kan skrives i ekstern fil (.css) eller direkte i html-koden (style=”[css-kode]”) - Kan bruges til f.eks. angivelse af font type.

5 Cascading Style Sheets 2 Definer ny stil i CSS: -I værktøjskassen Design vælges fanebladet CSS Styles -Tryk på New CSS Style (knap numer to i bunden af kassen) - Ved dialogboxen ’New CSS Style’ - Navngiv med et punktum forrest, - Vælg class i selector type - Ved ’Define in’ vælg da den eksisterende css-fil. Hvis der endnu ikke er oprettet en, så vælg ’(New Style Sheet File)’, hvorefter der kommer en box op, hvor man gemmer filen. -Ved dialogboxen ’CSS Style definition for…’ - Her vælges de definitioner som stilen skal have. -Efterfølgende markeres et element og i Properties vælges den nydefinerede stil ud for ’Style’

6 Cascading Style Sheets 3 Øvelse i CSS: -lav en stil til al brødteksten på netsiden. -Definer den med farve, font, størrelse og letter spacing (under Block) - Tilknyt stilen samtlige tekster (Marker relevante tekster og sæt class i proporties på dem.) -lav en stil til et layerelement på netsiden (brug et nyt html- dokument). - Definer bg color til lilla, border til dotted, thick og sort (for alle) - tilknyt denne class til

7 Cascading Style Sheets 4 CSS øvelsen er færdig. Umiddelbare fordele ved CSS: - En stil kan defineres og efterfølgende nemt tilknyttes forskellige elementer. Man undgår altså af definere det samme på alle tekster/elementer, man gør det blot en gang, og tilknytter derefter. - Dette gælder både for et html-dokument, men også – hvis man gemmer css’en i en ekstern fil – for flere forskellige html-dokumenter, hvor stil- definitionerne (class) kan genbruges.

8 Youtube-implementering Kopier embed-koden ind det rette sted i html- koden Om web widgets

9 Flash-implementering 1 Med flashimplementeringen, som er en audio-afspiller, indsætter vi vores mp3-fil på netsiden. De to filer, der skal bruges; mp3player.swf og swfobject.js, hentes her: http://nielschristiannielsen.web.student.hum.au.dk/flashplayer/ Og gemmes – sammen med mp3-filen – i en mappe kaldet /flashplayer/ i jeres netside. - vigtigt at mappen oprettes (højreklik > New folder) og at den hedder nøjagtigt som ovenstående – jf. næste sides kode. (Flash-filen vi bruger er lavet af Jeroen Wijering og distribueret under Creative Commons Licens)Jeroen WijeringCreative Commons Licens

10 Flash-implementering 2 Følgende indsættes i head af html-dokument: Følgende indsættes i body af html-dokument (i det layer, man vil have flashfilen): Get Flash to see this player. var so = new SWFObject('flashplayer/mp3player.swf','player',’[bredden:sæt evt til 400]','20','0'); so.addParam("allowfullscreen","true"); so.addVariable("file",”flashplayer/[mp3-filnavnet]"); so.addVariable("displayheight","0"); so.addVariable('backcolor','0x000000'); so.addVariable('frontcolor','0xffffff'); so.addVariable('lightcolor','0x0099CC'); so.write('player');

11 Flash-implementering 3 Når koden er indsat er flash-filen implementeret. Preview det i browseren, fungerer det? Tilpas bredden og variablerne i koden, der angiver de forskellige farver. (Se tidligere hvordan vi angiver farver i html, nemlig via hexadecimalsystem) ( so.addVariable('backcolor','0x000000'); = sort so.addVariable('frontcolor','0xffffff');= hvid so.addVariable('lightcolor','0x0099CC');= lyseblå )

12 Implementering af tekst-fil Hvadenten man har sin tekst-fil i format.pdf eller.doc eller andet, så bruges blot link-koden til at henvise til dokumentet. Normalt bruges linket til at henvise til et nyt html-dokument, dvs..html eller.htm. Men her linkes blot, som følgende: Absolut: http://mitservernavn/mineventuellemappe/minfil.pdf Eller Relativ: (afhængig af det pågældende html-dokuments placering) minmappetiltekstfiler/mintekstfil.pdf (hvis altså html-dokumentet som vi skriver koden i har en mappe liggende sammesteds og med filen i sig.) Lav dette på netsiden, hvor linket oprettes i et nyt browservindue (linkets target sættes til _blank)

13 Sidste hånd på site Ønskes centrering af site i browservinduet? Layeret, som vi har nested alle resterende layers i, sættes i CSS til position:relative;margin:auto;left:0px; Desuden skal linie 1 i vores html-dokument se således ud: (Har man glemt at neste enkelte layers kan det gøres i layers-vinduet ved at holde Ctrl nede og trække de relevante layers sammen) Når alt er færdigt FTP-uploades alt fra den lokale klient (vores computer) til vores student.hum.au.dk-server. Efterfølgende tjekkes sitet på serveren via browseren, adressen: http://[username].web.student.hum.au.dk/evtmappe Vejledning til FTP-upload

14 Opsamling Hvad vi har været igennem indtil nu: Photoshop med værktøjer (herunder Layers og gemme fil til web) Dreamweaver med værktøjer (herunder behavoirs, FTP-upload og CSS) Internettet – dets sprog og filer (især HTML ) Eksterne applikationer (youtube-embed-kode, implementering af flash-fil) I har produceret et site! – og kender til processen, muligheder og udfordringer. Angående fredag Spørgetime / eventuel færdiggørelse af produktionsite Angående eksamensperioden Vi står til rådighed i tilfælde af ekstreme situationer!