CSS fortsat: Boksmodel, floating & positionering

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse 1 og 2 lært at lave et website med HTML bestående af flere sider og med en simpel menu, der forbinder dem. Du har også lært at opmærke dit indhold med tekstafsnit, overskrifter, punktopstillinger, article, section, header, nav, div og span osv. samt at indsætte billeder og interne og eksterne links på dine sider. Ligeledes har du stiftet bekendskab med CSS, da du i sidste øvelse formaterede tekst med forskellige typografier, skriftstørrelser samt for- og baggrundsfarver. Dette gjorde du ved at tilknytte et eksternt stylesheet til dine HTMLdokumenter. Da der er en del forklarende tekst i denne øvelse, er selve de trin, som du skal udføre selv på baggrund af forklaringer og eksempler, fremhævet med rød skrift - som her: Start med at læse hele øvelsesvejledningen igennem, så du ved, hvilke trin du skal igennem. Det kan være en god ide at oprette en ny undermappe til denne øvelse, så du ikke risikerer at fa lavet rod i din aflevering fra sidst, mens du arbejder med denne øvelse. Det er både for din egen skyld, at det vil være en ide at arbejde på en kopi af siden, og for vores, da vi lige nu stadig kan være i gang med at gennemgå din øvelse fra sidst. Du kan fx kopiere hele din nuværende side (inkl. index-side, billeder, undersider m.v.) til en undermappe, der hedder 'opgave4', som så får URL'en: brugernavn/opgave4. 2. Målsætning I dag skal du lære at arbejde med boksmodellen. Du vil bl.a. få mulighed for at benytte borders, paddings og margins. Samtidig skal du arbejde med bredde og højde. Du skal også prøve at bruge forskellige former for floating og positionering, så du får en fornemmelse af, hvilke metoder du kan benytte for at placere de forskellige elementer på dine sider, hvor du gerne vil have dem. 3. Beskrivelse I denne øvelse skal du arbejde videre med den personlige hjemmeside, som du har arbejdet på i de tre sidste uger. Siden skal fortsat være tilgængelig via internettet på dit brugernavn/evt mappenavn. Du skal ikke lave nogle nye sider denne gang men arbejde med de tre sider, du har på dit individuelle site, din forside, dit CV og siden hvor du fortæller kort om dig selv. Det er meningen, at du skal layoute ved at ændre parametre i boksmodellen sammen med anvendelsen af floating og positionering. I denne øvelse skal du arbejde med: At lave en simpel skitsering af dit layout inden du går i gang med at skrive dine CSS-

2 koder.

3 At anvende boksmodellens parametre til at ændre din HTML-elementers størrelse og udseende. At benytte floating og positionering til at placere dine HTML-elementer der hvor du gerne vil have dem. Evt. tilføje/ændre farver på tekst, baggrundsfarver, baggrundsbilleder og udseende på borders, så dit layout fremstår som et afsluttet hele. I øvelsen fokuseres på siden ommig.html, men du skal sørge for, at alle dine sider bruger det stylesheet, som du laver igennem denne øvelse. 4. Koden 4.1. Lav en skitsering af dit layout Selve layoutet er op til dig. Start derfor med at tage et A4-papir og skitsér, hvordan du vil layoute din side. Tag igen udgangspunkt i indholdet på siden, som du lavede til sidste øvelse, der kort beskriver dig selv, men tilføj meget gerne nyt indhold til siden. Ved at skitsere på papiret først får du et klart mål at sigte efter, når du går i gang med at formatere med CSS. Det er en god ide at forsøge at inddele sit design i nogle logisk adskilte hovedklynger. Elementer du kan inddrage i din skitse er eksempelvis elementer som en header, hvordan menuen skal se ud, et felt til dit primære indhold, hvordan evt. billeder skal placeres samt måske en footer. Du behøver ikke at opfinde et vanvittigt kompliceret layout. Da vi i dag skal lære det rent håndværksmæssige ved at layoute i CSS er det fint at udarbejde en simpel og meget klassisk opbygning. På skitsen kan du ligeledes beskrive parametre som størrelse på elementerne, farver osv. Du behøver ikke nødvendigvis at bruge energi på det rent æstetiske udtryk og på at holde dig tilbage - forsøg i stedet at anvende mange af de forskellige virkemidler, som CSS leverer, også selvom det måske kommer til at se lidt underligt ud. Der findes en række forskellige måder at opbygge dit layout på en webside. I denne øvelse tager vi udgangspunkt i et såkaldt fixed-layout da det ofte er det nemmeste at starte op med og forstå. Et fixed-layout er i høj grad pixel-styret, dvs. at I til denne øvelse med fordel kan bruge pixels til at beskrive højde og bredde i dit layout. Der er en række fordele og ulemper ved denne tilgang som ikke vil blive behandlet nærmere i denne øvelsesvejledning, men som er nævnt til forelæsningen og i grundbogen. (Hvis der er nogle som hellere vil udarbejde denne øvelse med en af de andre klassiske web-layout-tilgange er det selvfølgeligt helt ok). Brug ca. 15 minutter på denne skitsering og gå derefter i gang med at layoute med CSS. Et hurtigt eksempel på en skitsering kan ses nedenfor.

4 4.2. Ændre dimensioner på dine overordnede HTML elementer.

5 Start med udgangspunkt i din skitse med at tilføje en div "wrapper". Ved at tilføje en wrapper får du mulighed for at centrere alt dit indhold på siden. Tilføj <div id="wrapper"> lige efter dit <body> tag, og afslut det lige for dit </body> tag. I din style.css fil kan du nu definere: #wrapper { width: 960px; margin: 0 auto; Med denne stump CSS sætter du bredden til at være 960px på <div id= wrapper ></div> og alle margin i top og bund til at være 0, mens højre- og venstremargin auto-justeres. Dvs. at wrapper automatisk vil placere sig på midten af siden med en bredde på 960px. Du kan eksperimentere med bredden og sætte den til fx 80% og se hvad der sker med dit design. Fortsæt nu med at ændre størrelse på dine overordnede HTML elementer, det kan eksempelvis være din menu/header, dit content-område og din footer. Hvis dine elementer ikke har en baggrundsfarve kan du med fordel tilføje dem midlertidigt imens du arbejder med stylingen og derefter fjerne den til slut. Med en baggrundsfarve kan du lettere følge med i, hvordan boksene ændrer dimensioner undervejs. Tilføj eksempelvis: header { background-color: #ff0000; I sidste øvelse tilføjede du en række tags og div-elementer i dit HTML-dokument som klynger de overordnede indholdsområder. Du kan med fordel tilføje flere, hvis det passer med dit valgte layout. Husk at give dem et beskrivende class eller role navn, som du kan sende din CSSstyling mod, hvis det er nødvendigt. Undgå navne, der beskriver placering som fx. #menu-left, da du måske i et senere redesign flytte menuen til højre. Når du har gjort det, er det muligt for dig at ændre bredden og evt. højden på disse hovedområder. Det gør du ved eksempelvis at tilføje nedenstående kode i dit stylesheet. header { width: 800px; height: 100px; Bemærk at det ikke altid giver mening at tilføje højde til elementer, hvis indhold varierer meget. Eksempelvis det område som indeholder ens brødtekster. Bemærk ligeledes, at du ikke skal gentage hele CSS syntaksen for at tilføje ovenstående til header, du tilføjer selvfølgelig bare deklarationerne indenfor tuborgklammerne med den selektor, som allerede er i dit CSSdokument Ændre padding, margin og evt. borders til dine overordnede elementer Du har nu fået lagt fundamentet for dit layout. Nu skal du forsøge at skabe luft i din opsætning. Luft eller white space er et enormt vigtigt virkemiddel, når man designer. Luft kan hjælpe til med at adskille og skabe overblik - det handler ofte om at skabe luft til at understøtte hvilke elementer som hører sammen. Eksempelvis for en overskift der hører til i ens tekst-hierarki. Men luft handler også om æstetik, det er eksempelvis sjældent kønt at ens tekst står klods op af en baggrundsfarves afslutning eller meget tæt ved en streg. I CSS er der en række muligheder for at skabe luft, det kan eksempelvis gøres gennem brug af padding (dvs. luften mellem indhold og kanten - border ) og margin (dvs. luften fra border og ud). Mange af HTML-elementerne (undtagen eksempelvis de usynlige generiske elementer div og span) har padding og margin default-værdier knyttet til sig via browserens interne stylesheet. Så

6 snart du tilføjer din egen formatering overskrives denne styling. Tilføj padding og margin til de elementer på din side som skal have ændret dette. Eksempelvis: section { padding: 2em; margin-top: 1em; En god måde at skabe opdeling og sammenhæng i sit design er at benytte sig af diverse border muligheder. Hvis du eksempelvis vil tilføje en tynd blå stiplet streg rundt om dit aside-område kan du skrive: aside { border-color: #0000ff; border-style: dashed; border-width: 1px; Du kan skrive med mindre kode ved at udnytte de forskellige syntaks-muligheder i CSS. Koden ovenfor kan fx også skrives sådan her: aside { border: 1px dashed #0000ff; Ofte vil du vælge at skrive koden som det første eksempel og så, når du har styr på dit design, skrive koden ned, så den fylder mindst muligt. Men du bestemmer selv, hvordan du foretrækker at arbejde. Tilføj borders til de elementer som skal have disse og ændre eller tilføj evt. baggrundsfarver eller baggrundsbilleder til de elementer som du synes skal have dette tilføjet eller ændret fra sidste øvelsesgang Første spæde forsøg med positionering Hvis du ikke sidste gang tilføjede billeder til dine beskrivende tekst, så gør det nu, billeder er altid godt at prioritere som understøttelse til ens tekster. Som du kan se i browseren virker billederne dog underligt klodsede og skaber et stort stykke luft mellem paragrafferne når vi har sat dem ind. Det kan float heldigvis hjælpe til med at ændre. Tilføj eksempelvis float: left til img selectoren i CSS'en, og du vil se, at teksten, i stedet for at rykke ned efter billedet, nu omkranser billedet - tilføjer du i stedet float: right rykker billedet over i højre side, stadig med teksten rundt om sig. Hvis du oplever at teksten er lige tæt nok på billedet kan du ændre det ved at tilføje lidt margin til billedet. img { float: right; margin-left: 1em; Bemærk at ovenstående selektor er en såkaldt element selektor, hvilket gør at alle billeder nu flyttes til højre side. Dette kan du ændre ved at vælge en bedre svarende og mere specifik selektortype, f.eks. ved at give dit billede en class.

7 Du kan desværre ikke benytte dig af float: center til at placere billedet i midten - dette er der selvfølgelig en god grund til, hvilket har at gøre med de andre sammenhænge, hvori man benytter float Formatér din menu Din globale menu er lige nu formateret som en bulletliste - dette kan du meget nemt lave om på så den kommer mere til at ligne en rigtigt menu. Hvis HTML koden ser ud som nedenstående: <ul id= > <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Mit CV</a></li> <li><a href= ommig.html >Om mig</a></li> </ul> Fjerner vi bullets ved at tilføje følgende til vores CSS: #menu { list-style-type: none; Hvis vi gerne vil have en horisontal menu med lyseblå baggrundsfarve skrives: #menu li { display: inline; background-color: #ccffff; For at knapperne skal ligne rigtigt knapper kan vi enten ændre dimensionerne på dem eller tilføje lidt luft inde i dem: #menu li { padding: 5px 10px 5px 10px; I kan peppe menuen yderligere op ved eksempelvis at tilføje nogle pseudoclass-selektorer som fx :hover til anchor-elementet. #menu li a { color: blue; text-decoration: none; #menu li a:hover { color: red; text-decoration: underline; Formater din menu evt. ved brug af ovenstående elementer Lav et eksperiment med positionering Til sidst skal I lave et eksperiment med positionering. Benyt enten relative-, absolute- eller fixed positionering til at placere et eller flere elementer på din side. Eksperimenter med dem, men vær opmærksom på at især absolute og fixed positionering skal anvendes i begrænset omfang. Det er normalt sådan at de kun anvendes hvis et unik position skal opnås som ikke kan klares ved hjælp af andre CSS metoder - anvend dem derfor kun hvis alle andre muligheder er opbrugt. Du kan evt. tilføje et ekstra billede eller ikon på din side. Hvis jeg eksempelvis vil tilføje et ikon som en slags splash i toppen af min side, kan jeg bruge: #breaking {

8 position: relative; top: 50px; right: 20px; Ovenstående kræver at jeg har tilføjet et billede i mit HTML-dokument med element identikatoren id="breaking". Forsøg dig frem med de forskellige former for positionering og se forskellene ved dem Validering af HTML Til sidst skal du som i de tidligere øvelser validere dit site vha. validator.w3.org, så du kan være sikker på, det overholder HTML standarden, som er defineret af World Wide Web Consortium (W3C). Vær opmærksom på, at du skal validere hver enkelt af dine undersider - en ad gangen. Når du indtaster URL'en til din forside validerer den KUN forsiden og ikke de tilknyttede undersider, selvom de er forbundne via links. Derfor skal du også tjekke hver enkelt underside ved at indtaste URL'en for dem en ad gangen, for at få tjekket hele dit site. Er koden valideret korrekt, kan man nederst på siden se to små grafiske ikoner. Når det er lykkedes dig at få valideret din side korrekt, kan du evt. kopiere koden til højre for ikonet ind i ALLE dine HTML-filer før </body>- tag'et, og så får du vist et validatorlogo på dine sider, som samtidig linker til validator-servicen. Når man som bruger klikker på logoet på dine sider, vil man blive sendt videre til validator servicen, som viser resultatet af valideringstjekket; at den siden er opbygget af valid HTML-kode efter den pågældende standard. (Det er en stor hjælp for din hjælpelærer, når han/ hun skal gennemgå din aflevering). TIP: Hvis du synes, at logoet er grimt og ødelægger stilen på din side, kan du evt. erstatte linket med en alm. linktekst, som du kan formatere, som du vil, så den passer med resten af siden Validering af CSS Du skal også validere din CSS-kode. Det foregår på samme måde som med HTML-valideringen. På denne side: css-validator/ kan du validere din CSS ved enten at 1) angive URL'en til dit CSS-dokument, 2) uploade dit CSS-dokument, eller 3) kopiere din CSS-kode direkte ind i et tekstfelt. Koden bliver tjekket uanset, hvilken af de tre måder, du vælger. Hvis du bruger et internt stylesheet (men det gør du jo ikke, fordi det er meget smartere at bruge det eksterne), kan du validere det ved at angive URL'en til det HTML-dokument, som det interne stylesheet findes i, men så skal du huske først at validere din HTML-kode. Er koden valideret korrekt, kan man på siden se to små grafiske ikoner. Når det er lykkedes dig at få valideret din side korrekt, kan du evt. kopiere koden til højre for ikonet ind i ALLE dine HTML-filer før </body>- tag'et, og så får du vist et CSS-validatorlogo på dine sider, som samtidig linker til validator-servicen. 5. Aflevering 5.1. Deadline Din deadline for aflevering er tirsdag den 6. marts 2012 inden kl Du har altså en uge til at poste din hjemmesides link ( oevelsenr) på kursus-bloggen på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar Tjekliste Af den hjemmeside, du afleverer skal det være synligt, at du har været igennem hele denne øvelse. Inden du afleverer på bloggen bør du derfor gennemgå denne tjekliste for at sikre, at du

9 har: Klynget indholdsområder med relevante tags eller div-elementer Givet beskrivende class, roles eller id-navne Defineret bredde og højde på indholdsområder fx #header {width: 900px; height: 100px; Tilføjet margin og padding til elementer fx section { padding: 10px 10px 5px 0; Tilføjet border og baggrund til elementer som led i stylingen af dit site fx h2 {border-bottom: 5px solid #fu9; Positioneret billede(r) i din personlige tekst fx img {float:right; margin-left: 10px; Stylet din globale menu, så den passer ind i dit overordnede design, fx se punkt 4.5. Eksperimenteret med relative, absolute eller fixed positionering af element NB! Men kun, hvor alle andre muligheder i CSS er opbrugt El Knyttet alle dine HTML-sider til dit eksteme stylesheet Gennemkigget alle sider i browseren for at tjekke for fejl fx om links, layout og tekstindhold er i orden Valideret HTML Indsat validatorlink på alle dine side Valideret CSS Indsat CSS-validatorlink på din startlindex-side Valideret din HTML endnu engang på alle sider