file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

Transkript

1 1 of :15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte som Dreamweaver 'skjuler' kodene i HTML og stilark, skjuler Spry programmeringskoden i Javascript. For å se programmeringskodene som ligger bak kan du kikke på filene med etternavnet.js som produseres i forbindelse med bruk av Spry og Behaviours. Her ser vi på ett eksempl på bruk av Spry - tabbed panels. Spry: fanekort (tabbed panels) Spry er et "rammeverk", programmert i klientspråket JavaScript gjør det mulig å gjøre mer avanserte ting enn HTML-CSS alene tillater. Eksempler vi skal bruke er fanekort (Tabbed panels). Opprett mappen dw6 under M:\dkdm_site, altså: M:\dkdm_site\dw6 Viktig at dere har deres filer organisert i en "site"!!!!! Start Dreamweaver. File > New > HTML > 1 column liquid, centered, header and footer Enten 'Create New File' velges for CSS. ikke 'Add to Head'. eller link to existing file, og finn frem den fra forrige uke (samme design...) Lagre stilarket og HTMLen i dw6-mappen. Legg til en tittel, for eksempel "Spry test" Endre overskriften 'Instructions' til f.eks. 'Spry Test'. Fjern resten av innholdet.

2 2 of :15 Plasser markøren rett under overskriften Sett inn i en Spry Tabbed Panel ved å bruke menyvalget Insert> Spry>Spry Tabbed Panels Eller velg Spry Tabbed Panels under menyen Spry i Insert-ruta. Følgende legges inn i nettsiden: Lagre filen. To filer automatisk lagt til i egen mappe SpryAssets SpryTabbedPanels.js (Javascript) SpryTabbedPanels.css (stilark knyttet til HTML-filen) HTML-filen har nå to stilark knyttet til seg: onecolfixctrhdr.css (det "gamle") SpryTabbedPanels.css (nyopprettet)... pluss en javascrript fil.

3 3 of :15 Når Tabbed Panel er aktivt i dokument-ruta, gir Properties-ruta muligheten til å legge til eller fjerne fanekort (panels). For å gjøre Tabbed Panel 'aktiv' enten: a) klikk i tabbed panel i dokument-ruta og deretter klikk på teksten 'Spry Tabbed Panels: TabbedPanels1' som har blå bakgrunn: eller: b) klikk i tabbed panel i dokument-ruten og deretter velg '<div#tabbedpanels1.tabbedpanels>' fra Tag Selector som er rett under dokumentet: Følgende vises i Properties-ruta: Bruk +-ikonet for å legge til et nytt fanekort (Tab 3). For å fjerne et fanekort markerer du fanekortet som skal fjernes fra listen, f.eks. Tab 1, og klikk på -. Endring av teksten på fanekortene gjøres i dokument-ruta. : Erstatt teksten 'Tab1' med 'HTML'. Merk at navnene på fanekortene i Properties-ruten endres til det nye navnet.

4 4 of :15 Endring av teksten på fanekortene gjøres i dokument-ruta. : Endre de to andre fanekortene til CSS og Javascript. Endre rekkefølgen på fanekortene ved å markere i listen og bruk pil-opp og pil-ned som står til høyre over listen. Det er også mulig å bestemme hvilke fanekort som er aktive når nettsiden vises (Default panel). Endring av innholdet under fanekortet La musepekeren stå over tittelen på fanekortet, slik at øye-ikonet vises: Klikk på øyet for å aktivere fanekortet, så vises innholdet klart til redigering. Innholdet i fanekort kan være hva som helst - tekst, bilder, lister, tabeller,...

5 5 of :15 Endring av utseendet til fanekortene Dette gjøres som vanlig i stilarket. Velg SpryTabbedPanels.css i stilark-ruten og vis alle selektorene: Innholdet i fanekort kan være hva som helst - tekst, bilder, lister, tabeller,... Utseende til fanekortene styres av:.tabbedpanelstab - fanekort som ikke er valgt.tabbedpanelstabselected - fanekortet som er valgt.tabbedpanelstabhover - fanekortet musepekeren er over Regler som er felles for de tre typene legges i.tabbedpanelstab. Tilsvarende finnes regler for selve innholdet i fanekortet knyttet til selektoren.tabbedpanelscontent. En liten øvelse øk skriftstørrelse endre tekstfarge til hvit endre bakgrunnsfarge på valgt fanekort til green, ikke valgt til black og hover til blue. lag luft mellom fanekortene Resultatet er noe slik: Sjekk resultatet i nettleseren.

6 6 of :15 Behaviours DW Behaviours er små programmer skrevet i Javascript, pakket sammen, slik at de kan brukes sammen med en hendelse (event), f. eks, musebevegelse en handling (noe som skal endres) en tag (noe endringen ska skje på) Behaviours består av to deler: hva skal forårsake handlingen, f.eks. at brukeren klikker på en del av nettsiden (eng. trigger)? Venstre-kolonne. hva skal skje? Høyre-kolonne. Velg Tag Inspector i stilark-ruten og velg Behaviours. Behaviours som er definert for elementet i dokumentet som er aktivt listes opp (ingen nå). I venstre kolonne vises hva slags handling som starter behaviour. (Se noen plansjer nedenfor) Velg Tag Inspector i stilark-ruten og velg Behaviours. Legg inn påskeliljebildet i innholdsområdet under HTML-fanekortet. Klikk på bildet slik at det er 'aktivt'. Åpne Tag Inspector i stilark-ruten og velg +-knappen:

7 7 of :15 Vises ikke Tag Inspector i Stilark-ruten, kan du bruke Window > Tag Inspector for å få den fram. (Eller F8 for å få ruten med Tag Inspector i) Velg Grow/Shrink under Effects. Følgende vinduet vises: <Current Selection> er valgt under Target Element slik at handlingen vil gjelde når bildet som er aktiv. 'Toggle effect' betyr at bildet vokser tilbake til den opprinnelig størrelse når brukeren klikker en gang til. Dreamweaver foreslår onclick som trigger (dvs. det som skal sette i gang Behaviour). Klikk på onclick for å få frem en liste over andre mulige trigger: 'Toggle effect' betyr at bildet vokser tilbake til den opprinnelig størrelse når brukeren klikker en gang til. For å endre innstillingene for behaviour (dvs. Grow/Shrink i dette tilfellet) dobbeltklikker på teksten Grow/Shrink. Andre mulige behaviours er 'set text' som kan brukes til å endre teksten i nettsiden når f.eks. musepekeren er over et element og 'Go To URL' som kan endre siden til en annen. Det er lov å leke! Filen SpryEffects.js legges i mappen SpryAssets når du ta i bruk Behaviours.

8 8 of :15 Javascript og tilgjengelighet For noen (færre og færre) er det fortsatt slik at JavaScript ikke er tilgjengelig. For å bøte på dette, bør det, bør nettsider ha et tilgjengelighetsalternativ. Noscript-tagg bør brukes for å gi et alternativ til brukere som ikke ha tilgang til Javascript. For å legge inn taggen velg Insert > HTML > Script Objects > NoScript. Følgende vinduet åpnes: Fyll inn en tekst som skal brukes hvis javascript ikke støttes For å teste hvordan nettsiden oppleves når javascript ikke er aktiv slå av javascript i en nettleser. I Firefox gjøres dette slik: Tools > Options > Content > Fjern krysset fra Enable JavaScript. Last inn siden på nytt og se at teksten du skrev i noscript vises. Merk samtidig hvordan fanekortet og 'behaviours' fungerer. Se også: s i Tilgjengelige nettsteder 2:3 Design og koding (Sosial- og helsedirektoratet Deltasenteret, 2006)).

9 9 of :15 Multimedia - Hvordan legge til en YouTube video på nettsiden Finn frem til videoen i YouTube ( eller en lignende tjeneste. Velg Shareknappen som finnes under videoen: Velg deretter Embed-knappen for å få frem følgende valg av innstillinger: Se også: s i Tilgjengelige nettsteder 2:3 Design og koding (Sosial- og helsedirektoratet Deltasenteret, 2006)). Innholdet i feltet øverst endres i forhold til valgene. Kopier HTML-koden som generes, dvs. "<iframe width...". Lim inn HTML-koden i Codeeller Split-visning, der filmen skal være. Gjør videoen mer tilgjengelig Skriv en beskrivende tekst innenfor iframe-taggen, dvs. mellom <iframe> og </iframe>. Du kan også legge inn en lenk til en større beskrivelse av videoen. Teksten og lenken vil kun vises til de som ikke har tilgang til videoen. Se også: sider i Tilgjengelige nettsteder 2:3 - Design og koding som har vært utdelt tidligere i kurset.