Hvordan du bruker tekstpanelet i Dreamweaver CSS Property Panel - dummies

Dreamweaver-tekstpanelet inneholder en samling alternativer som styrer visning av teksten i sidene dine. Du kan få tilgang til alternativene Tekstpanel ved å bla ned på Egenskapspanelet til du kommer under Layout-alternativene, eller ved å klikke på T-ikonet øverst på panelet.

Tekstpanelet inneholder følgende formateringsalternativer:

• Farge: Angi tekstfargen. Du kan klikke på fargebrønnen og velge en farge, bruk eyedropper til å prøve noen farge på skjermen, eller skriv inn en heksadesimal fargekode i fargefeltet. Hvis du skriver inn en heksadesimal fargekode, inkluderer du begynnelseskiltet (#).

• Font-Family: Definer en skriftfamilie eller en serie familier. Du kan legge til fonter fra din lokale harddisk eller fra Adobe TypeKit ved å velge Manage Fonts nederst i rullegardinlisten og starte dialogboksen Administrer skrifttyper.

  

• Font-Style: Skriv inn Normal, Kursiv eller Skrå. Men kursiv og skrå er sjelden forskjellige i en nettleser, så hold kursiv med mindre du har en bestemt grunn til ikke.

• Font-Variant: Endre tekst til små caps. Test designene dine nøye fordi dette attributtet ikke støttes av alle nettlesere.

• Font-Weight: Gjør tekst vises fet ved å velge Fet eller Bolder fra rullegardinlisten. Du kan også skrive inn et nummer mellom 100 og 900 for å kontrollere nøyaktig hvor fet teksten vises. Hvis du vil fjerne fet formatering, velger du Normal eller Lettere.

• Skriftstørrelse: Definer størrelsen på teksten. Du kan velge en bestemt numerisk størrelse eller en relativ størrelse. Størrelsesalternativer er piksel (px), punkt (pt), pica (pc), prosent (%), em, rem, ex og ch. Piksler, ems og prosenter er de mest brukte alternativene for tekststørrelser.

• Linjehøyde: Angi høyden på linjen som teksten er plassert på. På samme måte som tekststørrelse, kan du angi linjehøyde på flere måter, inkludert piksler, ems og prosenter. Det er god praksis på nettet å legge til linjehøyde fordi økt plass rundt teksten gjør det enklere å lese på en dataskjerm.

• Tekstjustering: Venstrejuster, rett juster, senter eller rettferdiggjør teksten ved å klikke på det tilsvarende ikonet. Det første ikonet, for Inherit, er standard. Du kan for eksempel sentrere teksten i sidelinjen på websiden din ved å inkludere Tekstjustering satt til Senter i definisjonen av en stil du bruker på -taggen nederst på siden.

• Tekstdekorasjon: Angi om tekst er understreket, overlinet, vises med en gjennomstrekking, eller vises med blinkingseffekten.Du kan også velge Ingen, som ofte brukes til å fjerne understreken fra koblet tekst.

• Tekstindikator: Angi beløpet som teksten vil bli innrykket fra venstre side av siden ved å skrive inn et nummer i en av størrelsesalternativene, for eksempel piksler, ems eller prosentpoeng.

Hvorfor så mange skrifter?

Du har kanskje hørt at du nå kan bruke hvilken som helst skrift du vil ha på websidene dine, takket være den nyeste versjonen av Cascading Style Sheets, CSS3. Denne utsagnet er sant, men med noen begrensninger: Du må ha lovlig rett til å publisere skrifttypen, og skrifttypen må være vert på en webserver.

For å sikre at teksten vises som du har tenkt, inkluderer Dreamweaver samlinger av de vanligste skriftene på Windows og Macintosh-datamaskiner. Disse skrifttypene er gruppert i familier, for eksempel

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

• Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times og serif

Du kan opprette dine egne skriftsamlinger ved hjelp av dialogboksen Administrer skrifttyper, som er tilgjengelig ved å velge Administrer skrifttyper-alternativet nederst i rullegardinlisten Font-Family i tekstpanelet i CSS Designer-panelet.

Tekstskygge-delen i tekstpanelet

Tekstskygge-delen i tekstpanelet gir verktøy for å legge til tekstskygger, en av de nyeste CSS-egenskapene som er inkludert i CSS3-definisjonen. De mest populære alternativene er følgende:

• H-skygge: Legg til en skygge på teksten din på den horisontale aksen. Velg først et størrelsesalternativ, og skriv deretter inn et nummer i feltet. For eksempel, skriv inn 2px, for å legge til en horisontal skygge som er 2 piksler bred.

• V-skygge: Legg til en skygge på teksten din på den vertikale aksen. Velg først et størrelsesalternativ, og skriv deretter inn et nummer i feltet.

• Sløring: Kontroller mengden av uskarphet i skyggen. Jo større tallet er, desto mer er skyggen spredt ut eller uskarpt.

• Farge: Skriv inn en heksadesimal fargekode for å angi fargen på skyggen, eller bruk eyedropper for å prøve hvilken som helst farge på skjermen.

  

Funksjonene nederst i tekstpanelet, som ikke er like vanlige som de andre tekstpanelalternativene, er som følger:

• Tekst-Transform: Endre tilfellet av teksten. Alternativene er Aktiver, store og små bokstaver. Klikk på det tilhørende ikonet for å angi denne egenskapen.

• Letter-spacing: Definerer mengden av hvitt mellomrom mellom bokstaver. Størrelsesalternativer er piksel (px), punkt (pt), pica (pc), prosent (%), em, rem, ex og ch.

• Word-spacing: Definerer mengden av hvitt mellomrom som er satt inn mellom ordene. Størrelsesalternativer er piksel (px), punkt (pt), pica (pc), prosent (%), em, rem, ex og ch. (Se foregående sidebjelke "Sammenligne CSS-størrelsesalternativer.")

• Hvitrom: Fortell nettleseren hvordan du håndterer linjeskift og mellomrom i en blokk med tekst. Alternativene dine er Inherit, Normal, Nowrap, Pre, Pre-line eller Pre-wrap. Nowrap er spesielt nyttig fordi det forhindrer at elementene blir skilt, hvis de må vikle inn for å passe i et nettleservindu eller en annen beholder.

• Vertikaljustering: Juster inlineelementer, for eksempel tekst og bilder, i forhold til elementene som omgir dem. Du kan angi en numerisk verdi eller velge Baseline, Sub, Super, Top, Text-Top, Middle, Bottom og Text-Bottom.