3.1 Adobe Dreamweaver – CSS

I denne aktiviteten skal du jobbe videre med nettstedet du jobbet med for 2 uker siden. Temaet er CSS. Legg til forskjellige bakgrunnsfarger i div-tag boksene du har definert i HTML dokumentet. Uthev et av ordene som gjentar seg på nettsiden. Velg hvilken effekt du ønsker å bruke til dette; farge, font, fontstørrelse, bold etc. Legg til en tynn border som er sort og solid rundt et av tag elementene dine på nettsiden.

Først lagde jeg et HTML dokument i Dreamweaver, og lagret. Så opprettet jeg et CSS dokument som skulle linkes til HTML dokumentet. Deretter forandret jeg først font, fontstørrelse, bakgrunnsfarge og fontfarge på div-tag #header. Videre gjorde jeg det samme på #mainContent, #ingress og #footer.

Opprettet en Class fra New CSS rule i CSS panelet. Navnet ble .kursiv og videre valgte jeg font, fontstørrelse, style og farge. Ordet jeg valgte å gjøre kursivt i HTML dokumentet mitt ble CSS, siden denne oppgaven har med CSS å gjøre, og for å vise hvor viktig CSS er.

Tilslutt slet jeg litt med å få til border, siden jeg prøvde ADD proterty i CSS panelet først, og skjønte ikke hvordan jeg kunne redigere denne videre. Løsningen ble å lage en New CSS rule og velge tag, deretter valgte jeg border fra menyen og utførte det slik oppgaven ønsket. Slik ser HTML og CSS dokumentene ut, samt resultatet som vises under.

Resultatet ble forskjellige farger på hver boks og forskjellig font. Borderen ble veldig lang iforhold til teksten som er inni, men dette skal jeg vel lære mer om senere i uken. Ellers synes jeg det er artig hvordan man kan utheve noen ord, slik at de blir mer synlige. Har lært veldig mye om CSS og HTML i denne aktiviteten, og hvor viktig de er sammen.

– Annette B. D.

Advertisements

One thought on “3.1 Adobe Dreamweaver – CSS

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