Hur man använder textpanelen i Dreamweavers CSS Property Panel - dummies

Textpanelen Dreamweaver innehåller en samling alternativ som styr textens visning på dina sidor. Du kan komma åt alternativen Textpanel genom att rulla ned egenskapsfönstret tills du kommer under alternativen Layout, eller genom att klicka på T-ikonen längst 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änd eyedroppen 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 början pund tecknet (#).

• Font-Family: 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 ner i listrutan och starta dialogrutan Hantera teckensnitt.

  

• Teckensnittstil: Ange Normal, Kursiv eller Skal. Men kursiv och snedställd är sällan olika i en webbläsare, så håll dig kursiv om du inte har en särskild anledning att inte.

• Font-Variant: Ändra text till små kepsar. Testa dina mönster noggrant eftersom det här attributet inte stöds av alla webbläsare.

• Teckensnitt-vikt: Gör text med fetstil genom att välja Bold eller Bolder i rullgardinsmenyn. Du kan också ange ett tal mellan 100 och 900 för att justera exakt hur fet texten visas. Om du vill ta bort fet formatering väljer du Normal eller Lättare.

• Teckensnittstorlek: Definiera textens storlek. Du kan välja en viss numerisk storlek eller en relativ storlek. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch. Pixlar, ems och procentandelar är de vanligaste alternativen för textstorlekar.

• Linjehöjd: Ange höjden på den linje som texten placeras på. På samma sätt som textstorlek kan du ange radhöjd på olika sätt, inklusive pixlar, ems och procentandelar. Det är bra att träna på nätet för att lägga till linjens höjd eftersom ökat utrymme runt din text gör det enklare att läsa på en datorskärm.

• Textjustering: Vänsterjustera, högerjustera, centrera eller rättfärdiga 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 Textjustera inställd till Center i definitionen av en stil du tillämpar på taggen längst ner på sidan.

• Textdekoration: Ange om texten är understruken, överskridits, visas med en genomskärning eller visas med blinkningseffekten.Du kan också välja Ingen, som ofta används för att ta bort underskriften från länkad text.

• Text-Indent: Ange det belopp som texten ska indragas från vänster på sidan genom att ange ett nummer i en av storlekarna, till exempel pixlar, ems eller procentandelar.

Varför så många teckensnitt?

Du kanske har hört att du nu kan använda vilken typsnitt du vill ha på dina webbsidor tack vare den senaste versionen av Cascading Style Sheets, CSS3. Detta uttalande är sant men med vissa begränsningar: Du måste ha den lagliga rätten att publicera teckensnittet, och teckensnittet måste vara värd på en webbserver.

För att säkerställa att texten visas som du tänker innehåller Dreamweaver samlingar av de vanligaste typsnitten på Windows och Macintosh-datorer. Dessa teckensnitt är grupperade i familjer som

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

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

Du kan skapa dina egna typsnittskollektioner med dialogrutan Hantera teckensnitt, som är tillgänglig genom att välja alternativet Hantera teckensnitt längst ner i listrutan Font-Family i textpanelen på CSS Designer-panelen.

Text-Shadow-delen i textpanelen

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

• H-skugga: Lägg till en skugga på din text på den horisontella axeln. Välj först ett storlek 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 på din text på den vertikala axeln. Välj först ett storlek och ange sedan ett nummer i fältet.

• Oskärpa: Kontrollera mängden oskärpa i skuggan. Ju större antal, desto mer skuggan är utbredd eller suddig.

• Färg: Ange en hexadecimal färgkod för att ange skuggans färg eller använd eyedroppen för att prova vilken färg som helst på skärmen.

  

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

• Text-Transform: Ändra fallet med din text. Alternativen är Aktivera, stora och små bokstäver. Klicka på motsvarande ikon för att ställa in den här egenskapen.

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

• Word-spacing: Definierar mängden vitt utrymme som är inmatat mellan ord. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch. (Se föregående sidobalk "Jämförelse mellan CSS-format.")

• White Space: Berätta för webbläsaren hur man hanterar rader och rader i ett textblock. Dina alternativ är Inherit, Normal, Nowrap, Pre, Pre-line eller Pre-wrap. Nowrap är speciellt användbart eftersom det förhindrar att element skiljer sig åt om de måste vikas för att passa in i ett webbläsarfönster eller i en annan behållare.

• Vertikaljustering: Anpassa inlineelement, till exempel text och bilder, i förhållande till de element som omger dem. Du kan ange ett numeriskt värde eller välja Baslinje, Sub, Super, Top, Text-Top, Middle, Bottom och Text-Bottom.