Com utilitzar el tauler de text al tauler de propietats CSS de Dreamweaver

El tauler Text de Dreamweaver inclou una col·lecció d'opcions que controlen la visualització del text a les vostres pàgines. Podeu accedir a les opcions del tauler de text desplaçant-vos cap avall al tauler de propietats fins que us trobeu a sota de les opcions de disseny o fent clic a la icona T a la part superior del tauler.

El tauler Text inclou les opcions de format següents:

• Color: defineix el color del text. Podeu fer clic bé al color i triar-ne un, utilitzar el comptagotes per provar qualsevol color de la pantalla o introduir un codi de color hexadecimal al camp de color. Si introduïu un codi de color hexadecimal, incloeu el signe inicial (#).

• Font-Family: defineix una família de tipus de lletra o una sèrie de famílies. Podeu afegir tipus de lletra des del vostre disc dur local o des d'Adobe TypeKit escollint Gestiona els tipus de lletra a la part inferior de la llista desplegable i inicieu el quadre de diàleg Gestiona els tipus de lletra.

  

• Estil de lletra: introduïu Normal, cursiva o obliqua. Tanmateix, la cursiva i l'oblic rarament són diferents en un navegador web, així que seguiu amb la cursiva tret que tingueu una raó específica per no fer-ho.

• Font-Variant: canvieu el text a majúscules petites. Proveu els vostres dissenys acuradament perquè aquest atribut no és compatible amb tots els navegadors.

• Pes de lletra: feu que el text aparegui en negreta seleccionant Negreta o Negreta a la llista desplegable. També podeu introduir un número entre 100 i 900 per controlar amb més precisió l'aparença del text en negreta. Per eliminar el format en negreta, trieu Normal o Més clar.

• Font-Size: defineix la mida del text. Podeu triar una mida numèrica específica o una mida relativa. Les opcions de mida són píxel (px), punt (pt), pica (pc), percentatge (%), em, rem, ex i ch. Els píxels, els ems i els percentatges són les opcions més utilitzades per a la mida del text.

• Alçada de línia: especifica l'alçada de la línia sobre la qual es col·loca el text. Igual que la mida del text, podeu especificar l'alçada de la línia de diverses maneres, com ara píxels, ems i percentatges. És una bona pràctica al web afegir alçada de línia perquè augmentar l'espai al voltant del text facilita la lectura a la pantalla d'un ordinador.

• Alineació de text: alineeu a l'esquerra, alineeu a la dreta, centreu o justifiqueu el vostre text fent clic a la icona corresponent. La primera icona, per Hereta, és la predeterminada. Per exemple, podeu centrar el text al peu de pàgina de la vostra pàgina web incloent-hi Text-Align establert a Centrar a la definició d'un estil que apliqueu al

  etiqueta a la part inferior de la pàgina.

• Decoració de text: especifiqueu si el text està subratllat, sobreeixit, es mostra amb un ratllat o si es mostra amb l' efecte de parpelleig. També podeu triar Cap, que s'utilitza sovint per eliminar el subratllat del text enllaçat.

• Sagnat de text: especifiqueu la quantitat de sagnat del text des del costat esquerre de la pàgina introduint un número en una de les opcions de mida, com ara píxels, ems o percentatges.

Per què tantes fonts?

És possible que hàgiu sentit que ara podeu utilitzar qualsevol tipus de lletra que vulgueu a les vostres pàgines web, gràcies a la darrera versió de Cascading Style Sheets, CSS3. Aquesta afirmació és certa però amb algunes limitacions: heu de tenir el dret legal per publicar el tipus de lletra i el tipus de lletra ha d'estar allotjat en un servidor web.

Per assegurar-vos que el vostre text aparegui com voleu, Dreamweaver inclou col·leccions de tipus de lletra més habituals als ordinadors Windows i Macintosh. Aquests tipus de lletra s'agrupen en famílies, com ara

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

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

Podeu crear les vostres pròpies col·leccions de tipus de lletra mitjançant el quadre de diàleg Gestiona els tipus de lletra, al qual podeu accedir seleccionant l'opció Gestiona els tipus de lletra a la part inferior de la llista desplegable Família de tipus de lletra al tauler Text del tauler Dissenyador CSS.

La secció Text-Ombra del tauler Text

La secció Text-Shadow del tauler Text ofereix eines per afegir ombres de text, una de les propietats CSS més noves incloses a la definició CSS3. Les opcions més populars són les següents:

• Ombra H: afegiu una ombra al vostre text a l'eix horitzontal. Primer trieu una opció de mida i, a continuació, introduïu un número al camp. Per exemple, introduïu 2 píxels per afegir una ombra horitzontal de 2 píxels d'amplada.

• Ombra en V: afegiu una ombra al vostre text a l'eix vertical. Primer trieu una opció de mida i, a continuació, introduïu un número al camp.

• Desenfocament: controla la quantitat de desenfocament a l'ombra. Com més gran és el nombre, més s'estén l'ombra o s'esborra.

• Color: introduïu un codi de color hexadecimal per especificar el color de l'ombra o utilitzeu el comptagotes per provar qualsevol color de la pantalla.

  

Les funcions de la part inferior del tauler de text, que no són tan habituals com les altres opcions del tauler de text, són les següents:

• Text-Transform: Canvieu la majúscules i minúscules del vostre text. Les opcions són majúscules, majúscules i minúscules. Feu clic a la icona corresponent per establir aquesta propietat.

• Espaiat entre lletres : defineix la quantitat d'espai en blanc inserit entre lletres. Les opcions de mida són píxel (px), punt (pt), pica (pc), percentatge (%), em, rem, ex i ch.

• Espaiat de paraules: defineix la quantitat d'espai en blanc inserit entre paraules. Les opcions de mida són píxel (px), punt (pt), pica (pc), percentatge (%), em, rem, ex i ch. (Vegeu la barra lateral anterior "Comparació d'opcions de mida CSS").

• Espai en blanc: indiqueu al navegador com gestionar els salts de línia i els espais en un bloc de text. Les vostres opcions són Hereta, Normal, Nowrap, Pre, Pre-line o Pre-wrap. Nowrap és especialment útil perquè evita que els elements es separin si s'han d'ajustar per cabre dins d'una finestra del navegador o d'un altre contenidor.

• Alineació vertical: alineeu els elements en línia, com ara text i imatges, en relació amb els elements que els envolten. Podeu establir un valor numèric o triar Baseline, Sub, Super, Top, Text-Top, Middle, Bottom i Text-Bottom.