file:///c:/users/michaelp/sites/dkdm/dw4/dreamweaver4o.html

Transkript

1 1 of :45 Oppsummering fra forrige gang Bakgrunner i DW kan lages både med farger og bilder kan brukes til å lage tiltalende design, skal derimot være obs. på at kontrasten til innholdsteksten ikke forringes. Bilder Lister Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Det kan av og til være fristende å bruke tabeller som en måte å legge ut sider på. Dette har noen store ulemper, gjør at ting som åpenbart er et "css-anliggende" blir gjort i HTML gjør det vanskelig for skjermlesere å tolke sidene. Dreamweaver har fasiliteter for å opprette, redigere og endre tabeller i design-modus Herunder legges vekt på skillet innhold og struktur (HTML) og utseende (CSS).

2 2 of :45 Tabellens struktur og innhold (HTML) Velg table fra Common i Insert-ruten eller Insert > Table (Ctrl+Alt+T). Fyll inn: antall kolonner og rader. Velg hvilke celler som skal være overskrifter tabelltekst (Caption). Summary:( universell utforming ) Lite å se her i utgangspunktet Tabelltekst (caption), og omriss av cellene vises.

3 3 of :45 CSS for tabellen - noen eksempeler på stilkontroll. Velg i stilark-ruten for å opprette en ny stilarkregel. Velg Tag som Selector Type og Table som Selector Name. OK. Velg deretter Box som kategori og legg inn en bredde for tabellen, f.eks. 98 % (100 % kan skape problemer) Resultatet: Vi fyller noe innhold, og får tydelig forskjell på "default" behandling av overskrifter (th) og dataceller(td) Legg rammer. Rammene skal gjelde både overskrift-og dataceller. Her skal regelen gjelde både taggene th (overskriftene) og td (innholdet) Velg Compound som Selector Type og 'th, td' som Selector Name:

4 4 of :45 Velg kategori Border og velg hvilke rammer du vil ha: Mulig å velge forskjellige rammestiler (heltrukket, stiplet, osv, bredde og linjefarge). Resultatet: Legg merke til at tabellen vises med "luft" mellom celleradene og -kolonnene Border-collapse: fjern luften utenfor cellerammene: Klikk table under css-styles/all, og velg regelen bordercollapse. verdien her skal være "collapse". Dreamweaver skjelner ikke denne regelen. Preview in browser (F12) for å se resultat.

5 5 of :45 Legg til mer luft mellom innhold i cellen og rammen: Her bruker vi "padding" egenskapen Fordi vi allerede har en regel som gjelder både th og td, plasserer vi markøren på den, klikker "add property" og finner frem til "padding" ordet "padding" med ett påfølgende tall setter samme verdi på alle fire sidene. Legg til bakgrunnsfarge på overskrifter ved å velge th som selektør og Background-color i kategorien Background. Husk: lesbar kontrast!

6 6 of :45 Resultater i browser: Tilbake til HTML Legg til rader / kollonner: Vi legger til to rader etter "Epler" Høyre-klikk i "Epler"-raden Velg Slå sammen naboceller i samme rad(<td colspan attributtet): Dra musmarkøren over cellene du skal slå sammen. alternativt, hold CTRL-knappen og velg naboceller Her slår vi sammen alle tre cellene i midtraden. høyreklikk, og velg Table, så Merge cells. Dersom cellene ha data i seg, blir verdiene sammenføyet (eks. Epler14) Andre HTML-redigeringer : Slett en rad eller kolonne Legg markøren i en celle, høyreklikk og velg Table Velg så Delete row eller Delete Column, for å slette raden / kolonnen cellen er en del av.

7 7 of :45 Tilbake til css igjen. For å formattere bare noen av cellene, bruker vi en klasse Lag en sentreringsklasse "centerrow", bruk text-align i block-kategorien Resultatet: Vi legger en ekstra farge til samme klasse (bare for syns skyld) Hold CTRL-knappen inne, og velg de cellene (hvor som helst i tabellen) som skal sentreres.

8 8 of :45 Lag en tabell med fem kolonner og fire rader Gi tabellen en overskrift og beskrivelse (Caption) Bruk stilarkfor å tilpasse Tablewidth, border, cellpadding Lag en annen farge på overskriften Lag forskjellige farger på radene (annen hver, tredje hver?) Dette verk er lisensiert under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens. Michael Preminger, michael@hioa.no,