CSS i Dreamweaver fra skrætsj

(Raske notater fra forelesning ved HiT 10.03.2011)

VI GIKK GJENNOM:


  • Opprette en ny site fra bunn av
  • Grunnleggende CSS med manuelle koder
  • Litt om templates
  • Behaviors
  • Vise hvordan vi legger inn Flash-animasjoner i DW.

Lag Site og side(r):

Du må lage en site – Site>New>Html (none)

Så må du lage en ny side. Dette skal være forsiden: File>Save as (Lagre som index.html)

legg inn det du ønsker deg av tekst. Kan godt holde deg i Design-view mens du gjør dette.

Lag et CSS stilark:

File>New>CSS>Create
Dette gir deg en ny side som blir formattert som et CSS-dokument.

Vi skal nå legge inn ulike regler som gjør at vi kan tre disse over de andre sidene våre.

Når du skriver CSS i DW:
Mellomrom er ikke av betydning, så når du legger inn linjeskift og mellomrom i DW er det bare for at det skal bli enklere å gå inn i dokumentet i ettertid, det påvirker ikke scriptet.

Save as>Stilark
Hold tunga rett i munne når du lagrer! Alt skal ligge i Site-mappa!

Det er viktig at redigering som gjelder hele siten du gjør seinere skjer i stilarket, slik at endringene påvirker alle sidene!

Så skal vi altså tre dette Stilarket over index-sida vi har laget:

CSS Styles
All Rules/Properties
Trykk på lenke/kjetting ikonet
Trykk på Browse
Finn stilarket du har lagret på siten. NB! Viktig å huske hvor du har lagra stilarket!
Trykk OK

Etter at du har tredd et CSS-stilark over ei side vil valg av eksempelvis H1 (header 1) i etterkant følge reglene innafor stilarket.

CSS kan også brukes på enkeletelementer. Dette gjør du ved å trykke på NEW CSS-rule (ikon ved siden av lenke-ikonet) og definer en ny regel.
Så bruker du denne regelen på de elementene du vil ved å merke dem og velge den nye regelen du har laget fra Class i properties.

Dermed kan du seinere omdefinere regelen du har laget, og dette vil påvirke alle elementene du har knyttet regelen til.

Behaviors:

Shift+ F4 gir deg tag inspector
Denne viser deg oversikt over f.eks hva som vises når du holder musa over et element på nettsiden.
Inni Tag Inspector kan du legge til effekter, eks. Shake som gjør at elementet under muepila dirrer når man klikker på det eller lignende.
En annen effekt her er Pop-up vindu

Lagre effekten du legger til
Test effekten med en forhåndsvisning

Legge til FLASH-animasjon:

Pass på at flashfila (.swf) ligger i Site-mappa på forhånd
Insert>Media>.swf – velg fila i Sitemappa og gi den et navn
Da kan du trykke play i properties panel for å se flash-fila

(Starter Page er forøvrig ferdigdefinerte CSS-startsider. Det finnes mange bra slike på Adobe sine sider f.eks.)

Nok en gang noen raske notater altså. Håper du kan ha glede av dette likevel🙂

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s