Hur man använder textpanelen i Dreamweavers CSS-egenskapspanel

Dreamweavers textpanel har en samling alternativ som styr visningen av texten på dina sidor. Du kan komma åt alternativen för textpanelen genom att rulla ner i egenskapspanelen tills du kommer under layoutalternativen, eller genom att klicka på T-ikonen högst upp på panelen.

Textpanelen innehåller följande formateringsalternativ:

• Färg: Ställ in textfärgen. Du kan klicka på färgbrunnen och välja en färg, använda pipetten för att prova vilken färg som helst på skärmen eller ange en hexadecimal färgkod i färgfältet. Om du anger en hexadecimal färgkod, inkludera det första pundtecknet (#).

• Teckensnittsfamilj: Definiera en teckensnittsfamilj eller en serie familjer. Du kan lägga till teckensnitt från din lokala hårddisk eller från Adobe TypeKit genom att välja Hantera teckensnitt längst ned i rullgardinsmenyn och öppna dialogrutan Hantera teckensnitt.

  

• Font-Style: Ange Normal, Kursiv eller Sned. Men kursiv och sned är sällan olika i en webbläsare, så håll dig till kursiv om du inte har en specifik anledning att inte göra det.

• Teckensnittsvariant: Ändra text till små bokstäver. Testa dina designs noggrant eftersom det här attributet inte stöds av alla webbläsare.

• Teckensnittsvikt: Få text att se fetstil ut genom att välja Fet eller Fetare från rullgardinsmenyn. Du kan också ange ett nummer mellan 100 och 900 för att mer exakt styra hur fet texten visas. För att ta bort fet formatering, välj Normal eller Ljusare.

• Font-Size: Definiera storleken på texten. Du kan välja en specifik numerisk storlek eller en relativ storlek. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch. Pixlar, ems och procent är de vanligaste alternativen för textstorlekar.

• Line-Height: Ange höjden på raden som texten placeras på. Precis som textstorlek kan du ange radhöjd på en mängd olika sätt, inklusive pixlar, ems och procentsatser. Det är god praxis på webben att lägga till radhöjd eftersom ökat utrymme runt din text gör det lättare att läsa på en datorskärm.

• Textjustera: Vänsterjustera, högerjustera, centrera eller justera din text genom att klicka på motsvarande ikon. Den första ikonen, för Inherit, är standard. Du kan till exempel centrera texten i sidfoten på din webbsida genom att inkludera Text-Align inställd på Centrera i definitionen av en stil som du tillämpar på

  taggen längst ned på sidan.

• Text-dekoration: Ange om text ska vara understruken, överstruken, visas med genomstruken eller visas med blinkeffekt. Du kan också välja Ingen, som ofta används för att ta bort understrykningen från länkad text.

• Text-indrag: Ange hur mycket text som ska dras in från vänster sida av sidan genom att ange ett nummer i ett av storleksalternativen, som pixlar, ems eller procent.

Varför så många typsnitt?

Du kanske har hört att du nu kan använda vilket typsnitt du vill på dina webbsidor, tack vare den senaste versionen av Cascading Style Sheets, CSS3. Detta påstående är sant men med vissa begränsningar: Du måste ha laglig rätt att publicera typsnittet och typsnittet måste finnas på en webbserver.

För att säkerställa att din text ser ut som du tänkt, innehåller Dreamweaver samlingar av de vanligaste typsnitten på Windows- och Macintosh-datorer. Dessa typsnitt är grupperade i familjer, som t.ex

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

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

Du kan skapa dina egna teckensnittssamlingar med hjälp av dialogrutan Hantera teckensnitt, som är tillgänglig genom att välja alternativet Hantera teckensnitt längst ned i rullgardinsmenyn Teckensnittsfamilj i textpanelen i panelen CSS Designer.

Sektionen Text-Shadow på textpanelen

Text-Shadow-sektionen på textpanelen innehåller verktyg för att lägga till textskuggor, en av de senaste CSS-egenskaperna som ingår i CSS3-definitionen. De mest populära alternativen är följande:

• H-skugga: Lägg till en skugga till din text på den horisontella axeln. Välj först ett storleksalternativ och ange sedan ett nummer i fältet. Ange till exempel 2px för att lägga till en horisontell skugga som är 2 pixlar bred.

• V-skugga: Lägg till en skugga till din text på den vertikala axeln. Välj först ett storleksalternativ och ange sedan ett nummer i fältet.

• Oskärpa: Styr mängden oskärpa i skuggan. Ju större siffra, desto mer sprids skuggan ut eller suddig.

• Färg: Ange en hexadecimal färgkod för att ange färgen på skuggan, eller använd pipetten för att prova valfri färg på skärmen.

  

Funktionerna längst ned på textpanelen, som inte är lika vanliga som de andra textpanelalternativen, är följande:

• Text-Transform: Ändra skiftläge på din text. Alternativen är versaler, versaler och gemener. Klicka på motsvarande ikon för att ställa in den här egenskapen.

• Bokstavsmellanrum: Definierar mängden vitt utrymme som infogas mellan bokstäverna. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch.

• Ordavstånd: Definierar mängden blanksteg som infogas mellan orden. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch. (Se föregående sidofält "Jämföra CSS-storleksalternativ.")

• White-Space: Berätta för webbläsaren hur man hanterar radbrytningar och mellanslag i ett textblock. Dina alternativ är Inherit, Normal, Nowrap, Pre, Pre-line eller Pre-wrap. Nowrap är särskilt användbart eftersom det förhindrar att element separeras om de måste lindas för att passa i ett webbläsarfönster eller en annan behållare.

• Vertical-Align: Justera inline-element, som text och bilder, i förhållande till de element som omger dem. Du kan ställa in ett numeriskt värde eller välja Baseline, Sub, Super, Top, Text-Top, Middle, Bottom och Text-Bottom.