Stil over formfelterne

Ved at bruge StyleSheet direkte på form-indtastningsfelter kan man se, hvordan resultatet kommer til at se ud, mens man skriver teksten til web-siden ? man slipper for problemet med standard-formindtastningsfelterne, hvor teksten må redigeres i flere omgange, så den passer ind i et fast layout. Se her hvordan.

12. december 2000 kl. 11.41

Tonny Bjørn

WYSIWYG

Brugen af web-baserede sider til intern og ekstern nyhedsinformation er steget markant inden for de seneste to år. Det skyldes specielt den fleksibilitet, som HTML-siderne giver.

Modsat brugeren, som læser den endeligt formaterede information, løber forfatteren til informationsteksterne tit ind i et problem. Teksten udarbejdes oftest i et standard form-indtastningsfelt, og det afspejler på ingen måde det endelige resultat.

Problemet kan løses ved at bruge StyleSheet-tags på form-indtastningsfelterne ? dermed er det muligt at udarbejde en What-You-See-Is-What-You-Get (WYSIWYG) grænseflade, som i indtastningsøjeblikket viser, hvordan resultatet kommer til at se ud.

Hermed kan skribenten spares for mange rettelser og omskrivninger, hvis et stramt layout gør, at lange overskrifter og indledninger får linien til at ?knække? uheldigt.

Det skal nævnes, at den følgende kode er rettet imod Internet Explorer-browseren, da Netscape ikke kan håndtere alle de viste formateringskoder.

Brugen af Cascading Style Sheets (CSS) og DHTML er på ingen måde noget nyt i forbindelse med visuel og funktionel optimering af web-sider. Det er i dag en udbredt måde at give websiden et løft på.

Danske Jakob Nielsen har længe slået på tromme for både visuelt og funktionsmæssigt bedre websteder. I sin bog Designing Web Usability (ISBN 1-56205-810-X) ? anmeldt i PC World nr. 8/2000 ? kommer han netop ind på disse problemstillinger ? men hvor han kommenterer godt og dårligt ud fra eksisterende websider, giver vi her et simpelt eksempel på, hvordan det kan gøres i praksis.

Der er med vilje ikke kælet for det egentlige layout, da formålet er at vise, hvordan man med enkle midler kan opnå en stor effekt.

Denne artikel blev bragt i PC World nummer 20/2000.

Sådan gør du

Den normale kode til oprettelse af indtastningsfelter i en FORM-tag resulterer i et standard-udseende, som kendes fra særdeles mange websider. Problemet er, at designet ikke giver skribenten nogen form for indikation af, at den indtastede tekst muligvis ikke kommer til at se sådan ud for brugeren, der læser den. Resultatet kan være, at teksten skal rettes til i flere tempi, så den passer ind i et fastdefineret layout.

Tilføjer man en StyleSheet-definering til den første udgave, kan man formatere FORM-indholdet og visuelt angive, hvordan resultatet kommer til at se ud.

I den viste udgave er der kun benyttet de typiske formateringskoder til styring af fonten. Indtastningsfeltet formateres ved at tildele en kode med CLASS-værdien, svarende til den ønskede formatering i StyleSheet-definering. Der er allerede formateret til den endelige font-type og størrelse, så felternes bredde skal nu også justeres for at passe ind i layoutet. Resultatet er, at skribenten under skrivningen kan se, hvordan teksten præsenteres for læseren, da det samme StyleSheet bruges til fremvisningen på den endelige side. Brugbarheden er dermed hævet betragteligt.

Kant og farve

Vil man for alvor give skribenten følelsen af, at han arbejder i en HTML WYSIWYG-editor, kan man ligeledes styre indtastningsfelternes kant og baggrundsfarve. I dette eksempel er der tilføjet border-style, border-color, border-width og background-color til StyleSheet-defineringen (markeret med blå).

Resultatet er enestående, da man direkte kan se, hvordan ens tekst kommer til at se ud. Læg specielt mærke til formateringen af det indtastningsfelt, der bruges til selve teksten, hvor border-style er sat til ?dotted?. Det giver skribenten en idé om, hvor de fysiske grænser for indtastningsfeltet befinder sig. På Microsoft Developer Networks side om DHTML-koderne vil man kunne se de nuværende ni mulige værdier for ?border-style?.

Det publicerede materiale ligner til forveksling den brugergrænseflade, som skribenten skrev teksten i. På siden bruges StyleSheet-defineringen fra eksempel 2 til at fremvise det endelige resultat til læseren.

Formateringskoderne

Formateringskoderne
De fleste, som har interesse i udarbejdelse af hjemmesider, har også prøvet at se den bagvedliggende kode, hvis man finder et websted, der viser noget nyt og spændende.

I så fald er man tit stødt på start-tag'en <STYLE TYPE="text/css">, hvor de mest brugte DHTML-funktioner ? som font-size, font-family, color og font-weight ? benyttes. Med disse kan man definere, hvor stor fonten skal være, hvilken skrifttype der bruges, fontens farve og om den skal være normal, fed, kursiv eller for eksempel understreget.

Disse bruges i store dele af en typisk webside i dag og aktiveres med HTML-tag'en . Denne start-tag afsluttes på behørig vis med . Al tekst, som findes mellem start- og slut-tag, formateres til den ønskede font-type, farve og størrelse.

Styling af indtastningsfelter

Styling af indtastningsfelter
Det er muligt ud fra HTML version 4.0-standarden at tildele en 'class' til andre objekter i HTML-koden. Det kan for eksempel være de felter, som benyttes i forbindelse med FORM-tag'en.

Tilføjer man et par ekstra muligheder i sin STYLE-definering, kan man også styre måden, indtastningsfelterne INPUT TYPE="text" og TEXTAREA fremvises på.

Det er muligt at formatere sin side så meget, at det ser ud som om man indtaster tekst på en 'glat' HTML-side. Her er det kun formateringen af TEXTAREA, som afslører, at man arbejder i et FORM-felt, idet denne tag viser muligheden for at scrolle.

Resultatet af formateringen er, at skribenten får WYSIWYG-muligheden direkte i arbejdsprocessen, da grænsefladen afspejler, hvordan den endelige tekst vises til læseren.

Internet-referencer
På Microsoft Developer Network (MSDN) har man mulighed for at se alle de næsten 500 kommandoer, der kan bruges i forbindelse med DHTML og StyleSheet. Den følgende webadresse indeholder oversigten ? man klikker blot på den ønskede kommando og får herefter vist de mulige parametre:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties.asp
Ønsker man mere overordnet information om brugen af denne måde at kode på, er adressen http://www.w3.org/Style/ absolut et besøg værd. Her er der mulighed for at få en bred introduktion til, hvad CSS er ? samt hvor, hvordan og hvorfor det bør bruges. Det er ligeledes uddrag fra Jakob Nielsens bog.

Log ind eller opret profil