0

Når WYSIWYG ikke gir deg det du ser

Jeg satt i et kundemøte forleden dag og diskuterte editoren som vi bruker i vårt produkt. Denne editoren er basert påTinyMCE, og fungerer meget bra. Det finnes dog unntak. Det er nemlig slik at den ikke alltid oppfører seg som forventet. Dette er ikke fordi fordi det er noe feil, men det går på oppbygningen av HTML. Jeg har derfor valgt å lage en liten veiledning med tips og triks på hvordan man får bedre kontroll i tekstbehandleren.

Formålet med tekstbehandleren

 Vi får av og til spørsmål om hvorfor tekstbehandleren i KeyPublisher ikke viser identisk utseende når man redigerer og når man forhåndsviser innhold. Hovedgrunnent til dette, er at editoren er i første omgang ment for å hjelpe brukeren å skrive tekst med korrekt formatering.

wysiwig.png

Målet for oss som jobber med web, er å skille innhold og utseende. Dette gjøres best ved at man legger alt utseende i et stilsett (CSS). Når man da jobber med innhold senere, trenger man derfor kun å konsentrere seg om å velge riktig innholdstype. Om man jobber med et avsnitt, overskrift eller en adresse, angis dette i Format menyen. Dette gjør at man kan jobbe med utseende på samme måte som man gjør i Microsoft Word.

Sti

sti.png

Utrykket «Sti» brukes om feltet i bunnen av tekstbehandleren. Denne viser hvilke innholdstyper man jobber med. Dette er ofte den største kilden til feil, da naturen til stilsett er basert på arv. Dvs at hvis man ved en feil legger en tabell f.eks i en Overskrift 2 ( H2 ), vil alle tekstene i tabellen få samme utseende som Overskrift 2. Hvis man opplever denne «feilen», kan det være lurt å se på stien.

Fjern formatering og rens kildekoden

rens.png

Dette er en svært undervurdert funksjon. For å få tekstbehandleren til å produsere så ren og korrekt HTML som mulig, er det lurt å merke teksten og klikke på fjern formatering. Dette gjelder spesielt hvis man har kopiert teksten fra et annet nettsted.

Lim fra word

Hvis man kladder teksten sin i Microsoft Word, så BØR man vurdere å bruke «Lim inn fra Word» funksjonen i tekstbehandleren. Denne gjør at man fjerner all grisete kode som Word produserer. Denne koden har ingen ting å gjøre på din webside, og det er umulig å forutse utseende på denne teksten.

Tabeller

tabeller.png

Tabeller ble for mange år siden brukt til å plassere grafiske elementer på en webside. Faktisk bruker mange leverandører denne metoden den dag i dag for å få en webside til å oppføre seg likt i alle nettlesere. Dette er feil av mange grunner. For det første skal tabeller brukes til å presentere tabulær data. På samme måte som en h1 skal være en overskrift. Videre knytter man utseende for tett sammen med HTML på en webside. Som et siste poeng, blir det vanskeligere for personer med nedsatte funksjoner å manøvrere seg på websiden.

Hvis du føler at tabellene oppfører seg rart, så er det viktig å merke seg at tabeller utvider seg etter innholdet. Hvis man har et bilde på f.eks 100 piksler i en celle blir cellen minst 100 piksler. Selv om den er definert til 50 piksler i Celleegenskaper. Dette gjelder også H1, H2 osv.

 

Et lite tips til slutt

screenLayout-edge.gifEt av de nyttigste verktøyene for oss som jobber med websider er en liten plugin til Firefox som heter Firebug. Denne lille pluginen er nesten magisk. Man kan enkelt klikke på hvilket element man ønsker for å se faktisk størrelse, plassering i HTML eller hvilke CSS som virker inn på elementet og hvorfor. Jobber man over forfatternivå på web er denne et must.

0 kommentarer

Logg på for å legge inn en kommentar.